:root {
  --green: #08251c;
  --deep: #03100c;
  --cream: #f7f0df;
  --paper: #fbf6ea;
  --gold: #b99a5d;
  --gold2: #d5bf83;
  --ink: #0e241b;
  --muted: #5f5a50;
  --line: rgba(185,154,93,.28);
  --serif: Georgia,"Times New Roman",serif;
  --sans: "Montserrat","Avenir Next","Helvetica Neue",Arial,sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #e4e2da;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  color: var(--ink);
}

.ribbon {
  height: 36px;
  background: var(--green);
  color: var(--gold2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 700;
}

.nav-row {
  height: 78px;
  background: rgba(251,246,234,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 42px;
}

.brand img {
  width: 78px;
  display: block;
}

/* Home page: transparent header over the hero image */
.home-page .site-header {
  color: #fff;
}

.home-page .nav-row {
  grid-template-columns: 1fr auto;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.28);
  padding: 0 28px;
}

.home-page .brand {
  justify-self: end;
}

.home-page .brand img {
  width: 52px;
}

.home-page .menu-toggle span {
  background: #fff;
}

.home-page .home-landing {
  background: var(--deep) url("../img/hero-home.png") center / cover no-repeat;
}

.home-page .home-landing .home-hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.home-page .home-landing .pause-btn {
  z-index: 5;
}

.menu-toggle {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  display: grid;
  gap: 5px;
  align-content: center;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  transition: .28s ease;
}

.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
}

.small-link,
.portal-link {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
}

.portal-link {
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 12px 22px;
}

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(5,24,18,.97);
  color: var(--gold2);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: .34s ease;
}

.menu-panel.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.menu-logo {
  width: 130px;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
}

.menu-close {
  position: absolute;
  top: 46px;
  right: 46px;
  background: transparent;
  border: 0;
  color: var(--gold);
  font-size: 44px;
  cursor: pointer;
}

.menu-links {
  display: grid;
  text-align: center;
  gap: 22px;
}

.menu-links a {
  font-family: var(--serif);
  font-size: clamp(36px,6vw,84px);
  line-height: 1;
  letter-spacing: .04em;
}

.menu-links a:hover {
  color: #fff;
}

.video-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--deep);
  color: white;
}

.video-visual {
  position: absolute;
  inset: 0;
  background-image: var(--poster);
  background-size: cover;
  background-position: center;
  animation: kenburns 18s ease-in-out infinite alternate;
}

.video-hero.paused .video-visual {
  animation-play-state: paused;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(3,16,12,.86),rgba(3,16,12,.35) 45%,rgba(3,16,12,.1)),radial-gradient(circle at 60% 55%,rgba(185,154,93,.18),transparent 38%);
}

.pause-btn {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(8,37,28,.35);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .2s;
}

.pause-btn span:last-child {
  position: absolute;
  left: 54px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transition: .2s;
  white-space: nowrap;
}

.pause-btn:hover span:last-child {
  opacity: 1;
}

.home-title {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
  padding: 140px 7vw 80px;
}

.kicker {
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 18px;
}

.home-title h1,
.hero-copy h1,
.product-hero-copy h1,
.intro-section h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px,9vw,132px);
  line-height: .92;
  letter-spacing: .01em;
  margin: 0 0 28px;
}

.home-title em,
.hero-copy em {
  font-style: italic;
  color: var(--gold2);
}

.home-title p:not(.kicker),
.hero-copy p:not(.kicker) {
  max-width: 560px;
  color: rgba(255,255,255,.82);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  background: var(--green);
  color: var(--gold2);
  border: 1px solid var(--gold);
  padding: 15px 26px;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.btn.outline,
.btn.ghost {
  background: transparent;
}

.intro-section {
  background: var(--paper);
  text-align: center;
  padding: 95px 24px;
}

.intro-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px,5vw,76px);
  line-height: 1.05;
  margin: 0 auto 28px;
  max-width: 900px;
}

.intro-section p:not(.kicker) {
  max-width: 560px;
  margin: 0 auto;
  color: #2a2a27;
}

.intro-mark {
  width: 170px;
  margin: 20px auto 28px;
  opacity: .82;
}

.home-collection {
  background: var(--paper);
  padding: 80px 42px 90px;
}

/* Home */
.home-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 505px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.home-hero-text {
  padding: 105px 64px 70px;
}

.home-hero .display {
  color: var(--green);
  font-size: clamp(52px,6.7vw,88px);
  line-height: 1.05;
}

.home-hero-img {
  position: relative;
  background: linear-gradient(90deg,rgba(248,242,229,.96),rgba(248,242,229,.18)),url('../img/home-still-life.jpg') center/cover no-repeat;
}

.home-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 45% 55%,rgba(255,255,255,.05),rgba(248,242,229,.65) 75%);
}

/* Home collection: seamless benefits-style layout. */
.collection-section {
  padding: 100px 7vw 96px;
  text-align: center;
  background: transparent;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  max-width: 1600px;
  margin: 0 auto;
  border: 0;
  background: transparent;
}

.collection-card {
  min-height: 224px;
  padding: 4px 28px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  border-right: 1px solid var(--line);
  position: relative;
  background: transparent;
  transition: none;
}

.collection-card:last-child {
  border-right: 0;
}

.collection-card:hover {
  background: transparent;
  transform: none;
}

.collection-card .icon {
  height: 96px;
  width: 96px;
  object-fit: contain;
  margin-bottom: 22px;
}

.collection-card h3 {
  min-height: 64px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: .18em;
  line-height: 1.08;
  text-transform: uppercase;
  font-weight: 400;
}

.collection-card p {
  min-height: 42px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 190px;
  margin: 0 auto 22px;
  color: #3b3a35;
}

.discover {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  transition: color .22s ease, transform .22s ease;
}

.collection-card:hover .discover,
.forest-band .discover:hover {
  color: #d5a35f;
  transform: translateX(7px);
}

.forest-band {
  --forest-parallax: 0px;
  position: relative;
  min-height: 94vh;
  min-height: 94svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--deep);
  color: #fff;
  padding: clamp(110px, 11vw, 180px) 7vw;
  isolation: isolate;
}

.forest-band::before {
  content: "";
  position: absolute;
  inset: -22vh 0;
  z-index: -2;
  background: url('../img/forest.jpg') center center / cover no-repeat;
  transform: translate3d(0, var(--forest-parallax), 0) scale(1.08);
  will-change: transform;
}

.forest-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 37, 28, .98) 0%,
    rgba(8, 37, 28, .9) 30%,
    rgba(8, 37, 28, .42) 68%,
    rgba(8, 37, 28, .18) 100%
  );
}

.forest-band > * {
  position: relative;
  z-index: 1;
}

.forest-band h2 {
  max-width: 460px;
  margin: 0 0 28px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(32px, 3.2vw, 56px);
  letter-spacing: .18em;
  line-height: 1.08;
  text-transform: uppercase;
  font-weight: 400;
}

.forest-band p {
  max-width: 420px;
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.8;
}

/* More vertical space and consistent alignment for the partner benefits section. */
.benefits {
  padding: 100px 7vw 100px;
  text-align: center;
}

.benefits h2 {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}

.benefits .sub {
  letter-spacing: .24em;
  color: var(--gold);
  text-transform: uppercase;
  font-size: 12px;
  margin: 14px 0 46px;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  align-items: stretch;
  max-width: 1600px;
  margin: 0 auto;
}

.benefit {
  min-height: 190px;
  padding: 4px 28px 12px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.benefit:last-child {
  border-right: 0;
}

.benefit img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 18px;
}

.benefit h4 {
  min-height: 42px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: .18em;
  line-height: 1.35;
  text-transform: uppercase;
}

.benefit p {
  max-width: 240px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.5;
  color: #222;
}

.section-heading {
  text-align: center;
  margin-bottom: 42px;
}

.section-heading h2 {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  margin: 0;
}

.home-product-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.home-product-card {
  background: #fbf6ea;
  min-height: 470px;
  padding: 34px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: .25s;
}

.home-product-card:hover {
  background: #fffaf0;
  transform: translateY(-4px);
}

.home-product-icon {
  height: 58px;
  width: 58px;
  object-fit: contain;
  margin-bottom: 18px;
}

.home-product-img {
  height: 210px;
  width: 100%;
  object-fit: contain;
  margin: auto 0 20px;
  filter: drop-shadow(0 24px 20px rgba(0,0,0,.18));
}

.home-product-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.1;
  font-size: 25px;
  margin: 0 0 12px;
}

.home-product-card p {
  font-size: 13px;
  color: #4b4740;
}

.home-product-card span,
.text-link {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}

.split-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}

.split-image {
  background-size: cover;
  background-position: center;
}

.split-copy {
  background: #e5ebef;
  padding: 90px 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-copy h2,
.profile-copy h2,
.pairing-copy h2,
.decanter-section h2,
.related h2,
.stay-touch h2,
.tasting-preview h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px,4.8vw,72px);
  line-height: 1.05;
  margin: 0 0 22px;
}

.tasting-preview {
  background: #eef2f5;
  padding: 78px 6vw;
  text-align: center;
}

.note-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 40px auto 0;
}

.note-grid div {
  padding: 22px;
}

.note-grid img {
  width: 54px;
  height: 54px;
  color: var(--gold);
  opacity: .9;
}

.note-grid h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 25px;
  margin: 16px 0 8px;
}

.note-grid p {
  font-size: 13px;
  color: #454a4c;
}

.stay-touch {
  background: #eef2f5;
  text-align: center;
  padding: 70px 24px;
}

.stay-touch form {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.stay-touch input {
  width: 280px;
  border: 1px solid #cfd5d8;
  padding: 13px;
  background: white;
}

.stay-touch button {
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--ink);
  padding: 13px 22px;
}

.site-footer {
  background: var(--green);
  color: white;
  text-align: center;
  padding: 60px 40px 26px;
}

.footer-logo img {
  width: 105px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 40px;
  max-width: 900px;
  margin: 40px auto;
}

.footer-grid div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-grid h4 {
  color: var(--gold);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12px;
}

.footer-grid a,
.footer-grid p {
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

.footer-bottom {
  font-size: 11px;
  color: rgba(255,255,255,.58);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-top: 1px solid rgba(185,154,93,.25);
  padding-top: 22px;
}

.collection-split {
  height: 100vh;
  padding-top: 114px;
  display: grid;
  grid-template-columns: 50% 50%;
  overflow: hidden;
}

.collection-video {
  position: relative;
  background: var(--deep);
  overflow: hidden;
  color: white;
}

.collection-video-copy {
  position: absolute;
  left: 10%;
  bottom: 11%;
  z-index: 2;
  max-width: 460px;
}

.collection-video-copy h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px,6vw,92px);
  margin: 0;
}

.collection-scroll {
  height: calc(100vh - 114px);
  overflow-y: auto;
  background: #eef2f5;
}

.collection-scroll-inner {
  display: grid;
}

.collection-item {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,.07);
  padding: 70px 30px;
}

.collection-item img {
  height: min(430px,55vh);
  object-fit: contain;
  filter: drop-shadow(0 28px 26px rgba(0,0,0,.16));
}

.collection-item h2 {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 30px 0 8px;
}

.collection-item p {
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-size: 12px;
}

.page-hero {
  min-height: 82vh;
}

.hero-copy {
  position: relative;
  z-index: 2;
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 130px 8vw 80px;
  max-width: 760px;
}

.feature-panels {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.feature-panels div {
  padding: 64px;
  text-align: center;
  border-right: 1px solid var(--line);
}

.feature-panels div:last-child {
  border-right: 0;
}

.feature-panels img {
  width: 62px;
  height: 62px;
  color: var(--gold);
}

.feature-panels h3 {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 14px;
}

.product-video {
  min-height: 88vh;
}

.product-hero-copy {
  position: relative;
  z-index: 2;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  padding: 130px 24px 80px;
}

.product-hero-copy h1 {
  max-width: 960px;
}

.product-hero-copy p:last-child {
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold2);
}

.product-intro {
  background: #eef2f5;
  text-align: center;
  padding: 80px 24px;
}

.product-intro h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px,5vw,74px);
  margin: 0 auto 30px;
  max-width: 900px;
}

.product-intro p:not(.kicker) {
  max-width: 620px;
  margin: 20px auto;
}

.product-feature-img {
  height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 28px 22px rgba(0,0,0,.18));
}

.p rofile-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 650px;
}

.profile-image {
  background-size: cover;
  background-position: center;
}

.profile-copy {
  background: #dfe6ea;
  padding: 90px 9vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  margin-top: 34px;
  border: 1px solid rgba(185,154,93,.42);
  background: rgba(185,154,93,.4);
}

.stats span {
  background: #eaf0f2;
  padding: 22px 12px;
}

.stats b {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
}

.stats small {
  display: block;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10px;
  color: var(--gold);
}

.pairing-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #dfe6ea;
  min-height: 520px;
}

.pairing-copy {
  padding: 84px 8vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pairing-section>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tag-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 28px;
}

.tag-list span {
  border: 1px solid rgba(185,154,93,.5);
  padding: 8px 12px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.decanter-section {
  position: relative;
  min-height: 620px;
  background: #eef2f5;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

.decanter-section .soft-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  background: linear-gradient(rgba(8,37,28,.55),rgba(8,37,28,.75)),url("../img/hero-home.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(1px);
}

.decanter-section>div:not(.soft-bg) {
  position: relative;
  max-width: 540px;
}

.decanter-section img {
  height: 310px;
  object-fit: contain;
}

.related {
  background: var(--paper);
  padding: 80px 6vw;
  text-align: center;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  margin-top: 40px;
  background: var(--line);
  border: 1px solid var(--line);
}

.related-grid a {
  background: #fbf6ea;
  padding: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.related-grid img {
  height: 190px;
  object-fit: contain;
}

.related-grid span {
  font-family: var(--serif);
  font-size: 24px;
  margin-top: 14px;
}

.serve-list {
  background: #eef2f5;
  padding: 70px 6vw;
  display: grid;
  gap: 28px;
}

.serve-card {
  display: grid;
  grid-template-columns: 42% 1fr;
  background: var(--paper);
  min-height: 360px;
}

.serve-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serve-card div {
  padding: 70px;
}

.serve-card h2 {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  margin: 0 0 12px;
}

.serve-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  transition: .25s;
}

.serve-drawer {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: min(460px,100%);
  background: #050d0a;
  color: white;
  z-index: 130;
  transform: translateX(100%);
  transition: .28s ease;
  padding: 44px;
  overflow: auto;
  border-left: 1px solid var(--gold);
}

.serve-drawer.active,
.serve-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.drawer-x {
  float: right;
  background: transparent;
  border: 0;
  color: var(--gold);
  font-size: 36px;
}

.serve-drawer h2 {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 400;
}

.serve-drawer img {
  height: 250px;
  width: 100%;
  object-fit: cover;
  margin: 20px 0;
}

.fineprint {
  font-size: 12px;
  color: rgba(255,255,255,.6);
}

.age-gate {
  position: fixed;
  inset: 0;
  background: rgba(5,24,18,.96);
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}

.age-gate.hidden {
  display: none;
}

.age-card {
  background: var(--paper);
  padding: 44px;
  text-align: center;
  max-width: 520px;
  border: 1px solid var(--gold);
  box-shadow: 0 40px 90px rgba(0,0,0,.28);
}

.age-card img {
  width: 100px;
}

.age-card h2 {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 400;
}

@keyframes kenburns {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08) translate3d(-1.2%,1%,0);
  }
}

@media (max-width:980px) {
  .collection-section {
    padding: 44px 28px 48px;
  }

  .collection-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .collection-card:nth-child(2n) {
    border-right: 0;
  }

  .collection-card:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .benefits {
    padding: 58px 28px 68px;
  }

  .benefit-grid {
    grid-template-columns: repeat(2,1fr);
    row-gap: 36px;
  }

  .benefit:nth-child(2n) {
    border-right: 0;
  }

  .benefit:last-child {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
    border-right: 0;
  }

  .nav-row {
    padding: 0 22px;
  }

  .nav-actions .small-link {
    display: none;
  }

  .home-product-grid,
  .note-grid,
  .footer-grid,
  .feature-panels,
  .related-grid {
    grid-template-columns: 1fr 1fr;
  }

  .split-story,
  .profile-split,
  .pairing-section,
  .serve-card {
    grid-template-columns: 1fr;
  }

  .collection-split {
    height: auto;
    display: block;
    padding-top: 114px;
  }

  .collection-video {
    height: 64vh;
  }

  .collection-scroll {
    height: auto;
    overflow: visible;
  }

  .profile-image {
    height: 420px;
  }

  .pairing-section>img {
    height: 360px;
  }

  .decanter-section .soft-bg {
    width: 100%;
    opacity: .12;
  }

  .home-title h1,
  .hero-copy h1,
  .product-hero-copy h1 {
    font-size: 64px;
  }

  .ribbon {
    font-size: 10px;
    text-align: center;
    padding: 0 12px;
  }

  .footer-grid {
    gap: 18px;
  }
}

@media (max-width:620px) {
  .collection-section {
    padding: 32px 18px 36px;
  }

  .collection-grid {
    grid-template-columns: 1fr;
  }

  .collection-card,
  .collection-card:nth-child(2n) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .collection-card:last-child {
    border-bottom: 0;
  }

  .benefits {
    padding: 48px 18px 56px;
  }

  .benefit-grid {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .benefit,
  .benefit:nth-child(2n),
  .benefit:last-child {
    width: 100%;
    min-height: 0;
    grid-column: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 30px 8px;
  }

  .benefit:last-child {
    border-bottom: 0;
  }

  .ribbon {
    height: auto;
    min-height: 34px;
  }

  .portal-link {
    display: none;
  }

  .brand img {
    width: 64px;
  }


  .home-page .nav-row {
    padding: 0 18px;
  }

  .home-page .brand img {
    width: 46px;
  }

  .home-title {
    padding-left: 28px;
    padding-right: 28px;
  }

  .home-title h1,
  .hero-copy h1,
  .product-hero-copy h1 {
    font-size: 48px;
  }

  .home-product-grid,
  .note-grid,
  .footer-grid,
  .feature-panels,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .home-product-card {
    min-height: 360px;
  }

  .home-product-img {
    height: 180px;
  }

  .profile-copy,
  .pairing-copy,
  .serve-card div {
    padding: 50px 28px;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .stay-touch form {
    flex-direction: column;
    align-items: center;
  }

  .stay-touch input {
    width: 100%;
  }

  .collection-item {
    min-height: 520px;
  }

  .collection-item img {
    height: 290px;
  }

  .collection-item h2 {
    font-size: 30px;
  }

  .product-feature-img {
    height: 250px;
  }
}



/* Responsive refinements for the seamless collection and parallax forest sections. */
@media (max-width: 980px) {
  .collection-section {
    padding: 64px 28px 70px;
  }

  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 36px;
  }

  .collection-card,
  .collection-card:nth-child(-n+2) {
    border-bottom: 0;
  }

  .collection-card:nth-child(2n) {
    border-right: 0;
  }

  .forest-band {
    min-height: 82vh;
    min-height: 82svh;
    padding: 92px 36px;
  }

  .forest-band::before {
    inset: -16vh 0;
  }
}

@media (max-width: 620px) {
  .collection-section {
    padding: 54px 18px 60px;
  }

  .collection-grid {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .collection-card,
  .collection-card:nth-child(2n),
  .collection-card:nth-child(-n+2) {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 34px 8px;
  }

  .collection-card:last-child {
    border-bottom: 0;
  }

  .collection-card .icon {
    width: 86px;
    height: 86px;
  }

  .forest-band {
    min-height: 74vh;
    min-height: 74svh;
    padding: 82px 24px;
  }

  .forest-band::before {
    inset: -12vh 0;
  }
}

/* =========================================================
   Home page: four-panel brand pathway section
   ========================================================= */
.home-page .brand-pathways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.home-page .brand-pathway,
.home-page .brand-invitation {
  position: relative;
  min-height: clamp(310px, 31vw, 500px);
  overflow: hidden;
}

.home-page .brand-pathway {
  display: block;
  color: #fff;
}

.home-page .brand-pathway > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: transform .75s ease;
}

.home-page .brand-pathway:hover > img {
  transform: scale(1.035);
}

.home-page .brand-pathway-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(3, 16, 12, .72) 0%,
    rgba(3, 16, 12, .35) 48%,
    rgba(3, 16, 12, .08) 100%
  );
}

.home-page .brand-pathway-copy {
  position: absolute;
  left: clamp(24px, 4vw, 54px);
  bottom: clamp(28px, 4vw, 58px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-page .brand-pathway-title {
  font-family: var(--serif);
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
}

.home-page .brand-pathway-subtitle {
  margin-top: 18px;
  font-size: clamp(10px, .9vw, 13px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
}

.home-page .brand-pathway-arrow {
  margin-top: 24px;
  color: var(--gold2);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  transition: transform .25s ease;
}

.home-page .brand-pathway:hover .brand-pathway-arrow {
  transform: translateX(7px);
}

.home-page .brand-invitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 54px 32px;
  text-align: center;
  background: var(--paper);
  color: var(--ink);
}

.home-page .brand-invitation-kicker {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #36453e;
}

.home-page .brand-invitation h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 400;
  line-height: 1;
}

.home-page .brand-invitation-ornament,
.home-page .newsletter-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.home-page .brand-invitation-ornament {
  margin: 20px 0 18px;
}

.home-page .brand-invitation-ornament span,
.home-page .newsletter-ornament span {
  width: 34px;
  height: 1px;
  background: var(--gold);
  opacity: .72;
}

.home-page .brand-invitation-ornament img,
.home-page .newsletter-ornament img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.home-page .brand-invitation > p:not(.brand-invitation-kicker) {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #4b514d;
}

.home-page .brand-invitation-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  margin-top: 28px;
  padding: 14px 28px;
  border: 1px solid rgba(185, 154, 93, .72);
  border-radius: 999px;
  background: transparent;
  color: #303c36;
  font-size: 12px;
  transition: background .25s ease, color .25s ease;
}

.home-page .brand-invitation-button:hover {
  background: var(--green);
  color: var(--cream);
}

/* =========================================================
   Home page: luxury newsletter
   Uses assets/img/footer-background-1.png
   ========================================================= */
.home-page .luxury-newsletter {
  position: relative;
  overflow: hidden;
  padding: 70px 24px 74px;
  background-color: var(--paper);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--ink);
}

.home-page .newsletter-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.home-page .newsletter-ornament {
  margin-bottom: 16px;
}

.home-page .newsletter-ornament img {
  width: 28px;
  height: 28px;
}

.home-page .luxury-newsletter h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(42px, 5.2vw, 66px);
  font-weight: 400;
  line-height: 1;
  color: var(--green);
}

.home-page .luxury-newsletter p {
  max-width: 610px;
  margin: 0 auto;
  color: #54554f;
  font-size: 14px;
  line-height: 1.65;
}

.home-page .newsletter-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 142px;
  gap: 12px;
  max-width: 590px;
  margin: 26px auto 0;
}

.home-page .newsletter-field {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid rgba(14, 36, 27, .55);
  border-radius: 8px;
  background: rgba(251, 246, 234, .68);
}

.home-page .newsletter-field svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .newsletter-field input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.home-page .newsletter-field input::placeholder {
  color: #74756e;
}

.home-page .newsletter-form button {
  min-height: 48px;
  border: 0;
  border-radius: 7px;
  background: var(--green);
  color: var(--cream);
  padding: 0 24px;
  font-family: var(--serif);
  font-size: 16px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.home-page .newsletter-form button:hover {
  background: #0d382b;
  transform: translateY(-1px);
}

/* =========================================================
   Home page: luxury footer
   Uses assets/img/footer-background-2.png
   ========================================================= */
.home-page .luxury-footer {
  position: relative;
  overflow: hidden;
  padding: 0;
  text-align: left;
  background-color: var(--green);
  background-image: linear-gradient(rgba(5, 34, 25, .87), rgba(5, 34, 25, .93));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: rgba(255, 255, 255, .76);
}

.home-page .luxury-footer-inner {
  display: grid;
  grid-template-columns: 1.45fr repeat(5, minmax(115px, 1fr));
  max-width: 1540px;
  margin: 0 auto;
  padding: 54px 5vw 32px;
}

.home-page .footer-brand-column,
.home-page .footer-column {
  min-width: 0;
}

.home-page .footer-brand-column {
  padding: 0 clamp(28px, 3vw, 58px) 0 0;
  text-align: center;
}

.home-page .footer-brand-logo {
  width: 165px;
  max-height: 112px;
  object-fit: contain;
  margin: 0 auto 20px;
}

.home-page .footer-brand-column p {
  max-width: 260px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
}

.home-page .footer-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 clamp(18px, 2.2vw, 34px);
  border-left: 1px solid rgba(185, 154, 93, .48);
}

.home-page .footer-column h4 {
  position: relative;
  width: max-content;
  margin: 0 0 16px;
  padding-bottom: 12px;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.home-page .footer-column h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 1px;
  background: var(--gold);
}

.home-page .footer-column a,
.home-page .footer-column p {
  color: rgba(255, 255, 255, .74);
  font-size: 12px;
  line-height: 1.45;
  transition: color .2s ease;
}

.home-page .footer-column a:hover {
  color: var(--gold2);
}

.home-page .footer-social a,
.home-page .footer-contact a {
  display: flex;
  align-items: center;
  gap: 11px;
}

.home-page .footer-icon,
.home-page .footer-contact svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--gold2);
}

.home-page .footer-contact svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.home-page .footer-icon-instagram {
  position: relative;
  border: 1.5px solid var(--gold2);
  border-radius: 5px;
}

.home-page .footer-icon-instagram::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 1.3px solid var(--gold2);
  border-radius: 50%;
}

.home-page .footer-icon-instagram::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold2);
}

.home-page .footer-icon-facebook {
  font-family: Arial, sans-serif;
  font-size: 21px;
}

.home-page .footer-icon-linkedin {
  font-family: Arial, sans-serif;
  font-size: 11px;
  border: 1px solid var(--gold2);
  border-radius: 2px;
}

.home-page .footer-icon-youtube {
  width: 19px;
  height: 14px;
  border-radius: 4px;
  background: var(--gold2);
  color: var(--green);
  font-size: 8px;
}

.home-page .footer-divider {
  position: relative;
  height: 21px;
  max-width: 100%;
}

.home-page .footer-divider::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(185, 154, 93, .6);
}

.home-page .footer-divider span {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 50%;
  width: 13px;
  height: 13px;
  border: 1px solid var(--gold);
  background: var(--green);
  transform: translateX(-50%) rotate(45deg);
}

.home-page .footer-divider span::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(185, 154, 93, .65);
}

.home-page .footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1540px;
  margin: 0 auto;
  padding: 12px 5vw 24px;
  color: rgba(255, 255, 255, .56);
  font-size: 10px;
}

.home-page .footer-legal p {
  margin: 0;
}

.home-page .footer-legal > div {
  display: flex;
  align-items: center;
  gap: 22px;
}

.home-page .footer-legal > div span {
  width: 1px;
  height: 17px;
  background: rgba(185, 154, 93, .68);
}

.home-page .footer-legal a {
  color: rgba(255, 255, 255, .56);
}

.home-page .footer-legal a:hover {
  color: var(--gold2);
}

@media (max-width: 1180px) {
  .home-page .luxury-footer-inner {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    row-gap: 44px;
  }

  .home-page .footer-column:nth-of-type(4),
  .home-page .footer-column:nth-of-type(5) {
    grid-row: 2;
  }

  .home-page .footer-social {
    grid-column: 2;
  }

  .home-page .footer-contact {
    grid-column: 3 / span 2;
  }
}

@media (max-width: 820px) {
  .home-page .brand-pathways {
    grid-template-columns: 1fr;
  }

  .home-page .brand-pathway,
  .home-page .brand-invitation {
    min-height: 390px;
  }

  .home-page .newsletter-form {
    grid-template-columns: 1fr 132px;
  }

  .home-page .luxury-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 44px;
  }

  .home-page .footer-brand-column {
    grid-column: 1 / -1;
    padding: 0 20px 34px;
  }

  .home-page .footer-brand-column p {
    max-width: 440px;
  }

  .home-page .footer-column,
  .home-page .footer-social,
  .home-page .footer-contact,
  .home-page .footer-column:nth-of-type(4),
  .home-page .footer-column:nth-of-type(5) {
    grid-column: auto;
    grid-row: auto;
    padding: 0 24px 24px;
  }

  .home-page .footer-column:nth-of-type(odd) {
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .home-page .brand-pathway,
  .home-page .brand-invitation {
    min-height: 335px;
  }

  .home-page .brand-pathway-title {
    font-size: 42px;
  }

  .home-page .brand-pathway-copy {
    left: 24px;
    bottom: 30px;
  }

  .home-page .brand-invitation {
    padding: 48px 22px;
  }

  .home-page .brand-invitation > p:not(.brand-invitation-kicker) br,
  .home-page .luxury-newsletter p br {
    display: none;
  }

  .home-page .luxury-newsletter {
    padding: 58px 20px 62px;
  }

  .home-page .newsletter-form {
    grid-template-columns: 1fr;
  }

  .home-page .newsletter-form button {
    width: 100%;
  }

  .home-page .luxury-footer-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 44px 24px 22px;
  }

  .home-page .footer-brand-column {
    grid-column: auto;
    padding: 0 0 36px;
  }

  .home-page .footer-column,
  .home-page .footer-social,
  .home-page .footer-contact,
  .home-page .footer-column:nth-of-type(odd) {
    border-left: 0;
    border-top: 1px solid rgba(185, 154, 93, .34);
    padding: 28px 0;
  }

  .home-page .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 28px;
  }
}

/* =========================================================
   HOMEPAGE SMART HEADER
   - Transparent and visible at the top of the hero
   - Hides while scrolling down
   - Reappears in theme green while scrolling up
   ========================================================= */
.home-page .site-header {
  transform: translateY(0);
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease;
  will-change: background-color, box-shadow;
}

/* Do not hide the homepage header anymore. */
.home-page .site-header.header-hidden {
  transform: translateY(0);
}

/* Green header state used after leaving the top of the page. */
.home-page .site-header.header-scrolled {
  background: rgba(8, 37, 28, 0.97);
  box-shadow: 0 8px 28px rgba(3, 16, 12, 0.2);
}

.home-page .site-header.header-scrolled .nav-row {
  background: rgba(8, 37, 28, 0.97);
  border-bottom: 1px solid rgba(185, 154, 93, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Keep the menu icon readable in both transparent and green states. */
.home-page .site-header .menu-toggle span,
.home-page .site-header.header-scrolled .menu-toggle span {
  background: #fff;
}


/* =========================================================
   DEVIL'S BLOOD — CINEMATIC PRODUCT PAGE
   Scoped to .devils-blood-page so other product pages remain unchanged.
   ========================================================= */

.devils-blood-page {
  background: #050806;
}

.devils-blood-page .dbw-page {
  overflow: hidden;
  background: #050806;
  color: #f7f0df;
}

.devils-blood-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.devils-blood-page .dbw-eyebrow,
.devils-blood-page .dbw-section-label {
  margin: 0;
  color: #d1934e;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .28em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ---------- Full-screen video hero ---------- */

.devils-blood-page .dbw-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 50%, rgba(118, 45, 12, .36), transparent 34%),
    url("../img/DBWBanner.jpeg") center / cover no-repeat,
    #030403;
  color: #fff;
}

.devils-blood-page .dbw-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 62% center;
  transform: none;
  transform-origin: center center;
  will-change: auto;
}

.devils-blood-page .dbw-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .72) 31%, rgba(0, 0, 0, .22) 65%, rgba(0, 0, 0, .12) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .62) 0%, transparent 35%);
}

.devils-blood-page .dbw-hero__content {
  position: relative;
  z-index: 2;
  width: min(640px, 47vw);
  padding: 132px 0 84px clamp(34px, 5.2vw, 92px);
}

.devils-blood-page .dbw-hero h1 {
  margin: 18px 0 10px;
  color: #f4eee2;
  font-family: var(--serif);
  font-size: clamp(74px, 8.6vw, 150px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .82;
  text-transform: uppercase;
  text-shadow: 0 6px 28px rgba(0, 0, 0, .4);
}

.devils-blood-page .dbw-hero__type {
  margin: 22px 0 18px;
  color: #d6a35e;
  font-size: clamp(15px, 1.35vw, 24px);
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.devils-blood-page .dbw-hero__description {
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(13px, 1vw, 17px);
  line-height: 1.7;
}

.devils-blood-page .dbw-outline-link {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  margin-top: 28px;
  padding: 15px 25px;
  border: 1px solid rgba(213, 163, 94, .82);
  color: #f2ece0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.devils-blood-page .dbw-outline-link:hover {
  background: #c98b45;
  color: #100a06;
  transform: translateY(-2px);
}

.devils-blood-page .dbw-video-toggle {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 4;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.devils-blood-page .dbw-video-toggle:hover {
  border-color: #d6a35e;
  background: rgba(113, 54, 18, .66);
  transform: scale(1.05);
}


@media (prefers-reduced-motion: reduce) {
  .devils-blood-page .dbw-hero__video {
    transform: none;
  }
}

/* ---------- Story + serve split ---------- */

.devils-blood-page .dbw-story-serve {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #050505;
  border-top: 1px solid rgba(186, 88, 35, .3);
}

.devils-blood-page .dbw-story-panel,
.devils-blood-page .dbw-serve-panel {
  position: relative;
  min-height: clamp(430px, 34vw, 620px);
  overflow: hidden;
}

.devils-blood-page .dbw-story-panel {
  border-right: 1px solid rgba(186, 88, 35, .24);
}

.devils-blood-page .dbw-panel-background {
  position: absolute;
  inset: 0;
  background-image: var(--dbw-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform .8s ease;
}

.devils-blood-page .dbw-story-panel:hover .dbw-panel-background,
.devils-blood-page .dbw-serve-panel:hover .dbw-panel-background {
  transform: scale(1.025);
}

.devils-blood-page .dbw-panel-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .64) 52%, rgba(0, 0, 0, .25) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .7), transparent 60%);
}

.devils-blood-page .dbw-story-panel__content,
.devils-blood-page .dbw-serve-panel__content {
  position: relative;
  z-index: 2;
  max-width: 430px;
  padding: clamp(66px, 7vw, 118px) clamp(34px, 6vw, 106px);
}

.devils-blood-page .dbw-story-panel h2,
.devils-blood-page .dbw-serve-panel h2 {
  margin: 8px 0 22px;
  color: #f1e9dc;
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 70px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .98;
  text-transform: uppercase;
}

.devils-blood-page .dbw-story-panel p:not(.dbw-section-label),
.devils-blood-page .dbw-serve-panel p:not(.dbw-section-label) {
  margin: 0 0 17px;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  line-height: 1.65;
}

.devils-blood-page .dbw-story-panel a,
.devils-blood-page .dbw-text-button {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 8px;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid rgba(205, 117, 61, .65);
  background: transparent;
  color: #d98a4f;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, gap .2s ease;
}

.devils-blood-page .dbw-story-panel a:hover,
.devils-blood-page .dbw-text-button:hover {
  gap: 17px;
  color: #f0b46f;
}

/* ---------- Four-value strip ---------- */

.devils-blood-page .dbw-value-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(182, 79, 31, .35);
  border-bottom: 1px solid rgba(182, 79, 31, .35);
  background: #050505;
}

.devils-blood-page .dbw-value-card {
  min-height: 124px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 16px;
  padding: 26px clamp(20px, 3vw, 46px);
  border-right: 1px solid rgba(182, 79, 31, .28);
}

.devils-blood-page .dbw-value-card:last-child {
  border-right: 0;
}

.devils-blood-page .dbw-value-card > img {
  width: 31px;
  height: 31px;
  object-fit: contain;
  filter: sepia(1) saturate(7) hue-rotate(334deg) brightness(.88);
}

.devils-blood-page .dbw-value-card h3 {
  margin: 0 0 7px;
  color: #e7dfd1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.devils-blood-page .dbw-value-card p {
  margin: 0;
  color: rgba(255, 255, 255, .56);
  font-size: 10px;
  line-height: 1.55;
}

/* ---------- Tasting profile ---------- */

.devils-blood-page .dbw-tasting {
  position: relative;
  min-height: clamp(480px, 38vw, 650px);
  overflow: hidden;
  background: #030303;
  border-bottom: 1px solid rgba(182, 79, 31, .32);
}

.devils-blood-page .dbw-tasting__background {
  position: absolute;
  inset: 0;
  background-image: var(--dbw-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.devils-blood-page .dbw-tasting__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .46) 38%, rgba(0, 0, 0, .2) 62%, rgba(0, 0, 0, .88) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .68), transparent 48%);
}

.devils-blood-page .dbw-tasting__inner {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(290px, .85fr) 1.7fr minmax(220px, .65fr);
  align-items: center;
  padding: clamp(62px, 6vw, 105px) clamp(34px, 6vw, 105px);
}

.devils-blood-page .dbw-tasting__profile {
  grid-column: 1;
  max-width: 350px;
}

.devils-blood-page .dbw-tasting-note {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  margin-top: 24px;
}

.devils-blood-page .dbw-tasting-note > img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  filter: sepia(1) saturate(6) hue-rotate(335deg) brightness(.96);
}

.devils-blood-page .dbw-tasting-note h3 {
  margin: 0 0 4px;
  color: #d49a55;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.devils-blood-page .dbw-tasting-note p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  line-height: 1.5;
}

.devils-blood-page .dbw-tasting__stats {
  grid-column: 3;
  display: grid;
  gap: 0;
  width: min(240px, 100%);
  justify-self: end;
  text-align: center;
}

.devils-blood-page .dbw-tasting__stats > div {
  padding: 18px 8px;
  border-bottom: 1px solid rgba(185, 154, 93, .28);
}

.devils-blood-page .dbw-tasting__stats > div:last-child {
  border-bottom: 0;
}

.devils-blood-page .dbw-tasting__stats strong {
  display: block;
  color: #d5a45e;
  font-family: var(--serif);
  font-size: clamp(31px, 3.4vw, 54px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.devils-blood-page .dbw-tasting__stats span {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------- Five-card bottle gallery ---------- */

.devils-blood-page .dbw-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: clamp(360px, 29vw, 520px);
  background: #050505;
}

.devils-blood-page .dbw-gallery-card {
  position: relative;
  min-height: inherit;
  overflow: hidden;
  border-right: 1px solid rgba(185, 154, 93, .22);
}

.devils-blood-page .dbw-gallery-card:last-child {
  border-right: 0;
}

.devils-blood-page .dbw-gallery-card__image {
  position: absolute;
  inset: 0;
  background-image: var(--dbw-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform .75s ease, filter .75s ease;
}

.devils-blood-page .dbw-gallery-card:hover .dbw-gallery-card__image {
  transform: scale(1.055);
  filter: brightness(1.08);
}

.devils-blood-page .dbw-gallery-card__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .46) 34%, rgba(0, 0, 0, .04) 72%),
    linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 52%);
}

.devils-blood-page .dbw-gallery-card__copy {
  position: absolute;
  left: 23px;
  right: 23px;
  bottom: 25px;
  z-index: 2;
}

.devils-blood-page .dbw-gallery-card h3 {
  margin: 0 0 7px;
  color: #d68c52;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.devils-blood-page .dbw-gallery-card p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: 10px;
  line-height: 1.5;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .devils-blood-page .dbw-hero__content {
    width: min(620px, 62vw);
  }

  .devils-blood-page .dbw-value-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .devils-blood-page .dbw-value-card:nth-child(2) {
    border-right: 0;
  }

  .devils-blood-page .dbw-value-card:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(182, 79, 31, .28);
  }

  .devils-blood-page .dbw-tasting__inner {
    grid-template-columns: minmax(260px, .9fr) 1.2fr minmax(190px, .55fr);
  }

  .devils-blood-page .dbw-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .devils-blood-page .dbw-gallery-card:nth-child(3) {
    border-right: 0;
  }

  .devils-blood-page .dbw-gallery-card:nth-child(-n + 3) {
    border-bottom: 1px solid rgba(185, 154, 93, .22);
  }

  .devils-blood-page .dbw-gallery-card:nth-child(4),
  .devils-blood-page .dbw-gallery-card:nth-child(5) {
    min-height: 380px;
  }
}

@media (max-width: 820px) {
  .devils-blood-page .dbw-hero {
    --dbw-hero-x-offset: clamp(10px, 3vw, 36px);
    align-items: flex-end;
  }

  .devils-blood-page .dbw-hero__video {
    inset: -8vh 0;
    height: calc(100% + 16vh);
    object-position: 58% center;
    transform: translate3d(var(--dbw-hero-x-offset), var(--dbw-hero-parallax), 0) scale(1.06);
  }

  .devils-blood-page .dbw-hero__shade {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .54) 52%, rgba(0, 0, 0, .12) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 70%);
  }

  .devils-blood-page .dbw-hero__content {
    width: 100%;
    padding: 130px 28px 90px;
  }

  .devils-blood-page .dbw-hero h1 {
    font-size: clamp(64px, 16vw, 105px);
  }

  .devils-blood-page .dbw-story-serve {
    grid-template-columns: 1fr;
  }

  .devils-blood-page .dbw-story-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(186, 88, 35, .24);
  }

  .devils-blood-page .dbw-story-panel__content,
  .devils-blood-page .dbw-serve-panel__content {
    max-width: 520px;
  }

  .devils-blood-page .dbw-tasting__inner {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }

  .devils-blood-page .dbw-tasting__profile {
    grid-column: 1;
  }

  .devils-blood-page .dbw-tasting__stats {
    grid-column: 2;
  }

  .devils-blood-page .dbw-tasting__shade {
    background: rgba(0, 0, 0, .72);
  }

  .devils-blood-page .dbw-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .devils-blood-page .dbw-gallery-card,
  .devils-blood-page .dbw-gallery-card:nth-child(3),
  .devils-blood-page .dbw-gallery-card:nth-child(4),
  .devils-blood-page .dbw-gallery-card:nth-child(5) {
    min-height: 360px;
    border-right: 1px solid rgba(185, 154, 93, .22);
    border-bottom: 1px solid rgba(185, 154, 93, .22);
  }

  .devils-blood-page .dbw-gallery-card:nth-child(2n) {
    border-right: 0;
  }

  .devils-blood-page .dbw-gallery-card:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }
}

@media (max-width: 560px) {
  .devils-blood-page .dbw-hero__content {
    padding-left: 22px;
    padding-right: 22px;
  }

  .devils-blood-page .dbw-hero__description br {
    display: none;
  }

  .devils-blood-page .dbw-video-toggle {
    right: 18px;
    bottom: 18px;
  }

  .devils-blood-page .dbw-story-panel,
  .devils-blood-page .dbw-serve-panel {
    min-height: 520px;
  }

  .devils-blood-page .dbw-story-panel__content,
  .devils-blood-page .dbw-serve-panel__content {
    padding: 62px 24px;
  }

  .devils-blood-page .dbw-value-strip {
    grid-template-columns: 1fr;
  }

  .devils-blood-page .dbw-value-card,
  .devils-blood-page .dbw-value-card:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(182, 79, 31, .28);
  }

  .devils-blood-page .dbw-value-card:last-child {
    border-bottom: 0;
  }

  .devils-blood-page .dbw-tasting__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 58px 24px;
  }

  .devils-blood-page .dbw-tasting__profile,
  .devils-blood-page .dbw-tasting__stats {
    grid-column: 1;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .devils-blood-page .dbw-tasting__stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .devils-blood-page .dbw-tasting__stats > div {
    padding: 16px 5px;
    border-right: 1px solid rgba(185, 154, 93, .28);
    border-bottom: 0;
  }

  .devils-blood-page .dbw-tasting__stats > div:last-child {
    border-right: 0;
  }

  .devils-blood-page .dbw-tasting__stats strong {
    font-size: 26px;
  }

  .devils-blood-page .dbw-tasting__stats span {
    font-size: 8px;
  }

  .devils-blood-page .dbw-gallery {
    grid-template-columns: 1fr;
  }

  .devils-blood-page .dbw-gallery-card,
  .devils-blood-page .dbw-gallery-card:nth-child(2n),
  .devils-blood-page .dbw-gallery-card:last-child {
    grid-column: auto;
    min-height: 360px;
    border-right: 0;
    border-bottom: 1px solid rgba(185, 154, 93, .22);
  }

  .devils-blood-page .dbw-gallery-card:last-child {
    border-bottom: 0;
  }
}

/* =========================================================
   DEVIL'S BLOOD — READABILITY AND ICON REFINEMENTS
   Added after the original page rules so these values take
   precedence without changing the HTML structure.
   ========================================================= */

/* Keep the story title to the intended two-line composition. */
.devils-blood-page .dbw-story-panel__content,
.devils-blood-page .dbw-serve-panel__content {
  max-width: 620px;
}

.devils-blood-page .dbw-story-panel h2 {
  max-width: 560px;
  font-size: clamp(40px, 3.15vw, 58px);
  line-height: .96;
}

.devils-blood-page .dbw-serve-panel h2 {
  max-width: 600px;
  font-size: clamp(42px, 3.35vw, 62px);
  line-height: .96;
}

/* Slightly improve supporting-copy readability in both panels. */
.devils-blood-page .dbw-story-panel p:not(.dbw-section-label),
.devils-blood-page .dbw-serve-panel p:not(.dbw-section-label) {
  max-width: 440px;
  font-size: 14px;
  line-height: 1.7;
}

/* Larger value strip with clearly visible warm-gold icons. */
.devils-blood-page .dbw-value-card {
  min-height: 154px;
  grid-template-columns: 50px 1fr;
  gap: 20px;
  padding: 30px clamp(24px, 3vw, 50px);
}

.devils-blood-page .dbw-value-card > img {
  width: 41px;
  height: 41px;
  opacity: 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(67%)
    sepia(43%)
    saturate(865%)
    hue-rotate(345deg)
    brightness(92%)
    contrast(88%);
}

.devils-blood-page .dbw-value-card h3 {
  margin-bottom: 9px;
  color: #f0e8dc;
  font-size: 12px;
  letter-spacing: .15em;
  line-height: 1.4;
}

.devils-blood-page .dbw-value-card p {
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
  line-height: 1.6;
}

/* Enlarge the tasting-copy column and make its icons visible. */
.devils-blood-page .dbw-tasting__inner {
  grid-template-columns: minmax(390px, .95fr) 1.45fr minmax(250px, .65fr);
}

.devils-blood-page .dbw-tasting__profile {
  max-width: 470px;
}

.devils-blood-page .dbw-tasting__profile > .dbw-section-label {
  font-size: 13px;
  letter-spacing: .25em;
}

.devils-blood-page .dbw-tasting-note {
  grid-template-columns: 48px 1fr;
  gap: 18px;
  margin-top: 30px;
}

.devils-blood-page .dbw-tasting-note > img {
  width: 39px;
  height: 39px;
  opacity: 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(67%)
    sepia(43%)
    saturate(865%)
    hue-rotate(345deg)
    brightness(92%)
    contrast(88%);
}

.devils-blood-page .dbw-tasting-note h3 {
  margin-bottom: 6px;
  color: #d5a45e;
  font-size: 13px;
  letter-spacing: .18em;
  line-height: 1.4;
}

.devils-blood-page .dbw-tasting-note p {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  line-height: 1.65;
}

/* Gallery typography now follows the gold-serif / white-label
   treatment used by the product-detail statistics. */
.devils-blood-page .dbw-gallery {
  min-height: clamp(420px, 31vw, 590px);
}

.devils-blood-page .dbw-gallery-card__copy {
  left: 27px;
  right: 27px;
  bottom: 31px;
}

.devils-blood-page .dbw-gallery-card h3 {
  margin: 0 0 10px;
  color: #d5a45e;
  font-family: var(--serif);
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 400;
  letter-spacing: .065em;
  line-height: 1.2;
  text-transform: uppercase;
}

.devils-blood-page .dbw-gallery-card p {
  color: rgba(255, 255, 255, .86);
  font-family: var(--sans);
  font-size: clamp(12px, .72vw, 14px);
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .devils-blood-page .dbw-tasting__inner {
    grid-template-columns: minmax(330px, 1fr) 1fr minmax(210px, .65fr);
  }

  .devils-blood-page .dbw-gallery-card h3 {
    font-size: 18px;
  }

  .devils-blood-page .dbw-gallery-card p {
    font-size: 13px;
  }
}

@media (max-width: 820px) {
  .devils-blood-page .dbw-story-panel__content,
  .devils-blood-page .dbw-serve-panel__content {
    max-width: 590px;
  }

  .devils-blood-page .dbw-story-panel h2,
  .devils-blood-page .dbw-serve-panel h2 {
    font-size: clamp(42px, 8vw, 58px);
  }

  .devils-blood-page .dbw-tasting__inner {
    grid-template-columns: minmax(0, 1fr) minmax(190px, .7fr);
  }

  .devils-blood-page .dbw-tasting__profile {
    max-width: 470px;
  }
}

@media (max-width: 560px) {
  .devils-blood-page .dbw-story-panel h2,
  .devils-blood-page .dbw-serve-panel h2 {
    font-size: 43px;
  }

  .devils-blood-page .dbw-story-panel p:not(.dbw-section-label),
  .devils-blood-page .dbw-serve-panel p:not(.dbw-section-label) {
    font-size: 13px;
  }

  .devils-blood-page .dbw-value-card {
    min-height: 138px;
    grid-template-columns: 44px 1fr;
    gap: 17px;
    padding: 27px 24px;
  }

  .devils-blood-page .dbw-value-card > img {
    width: 37px;
    height: 37px;
  }

  .devils-blood-page .dbw-tasting-note {
    grid-template-columns: 43px 1fr;
    gap: 15px;
  }

  .devils-blood-page .dbw-tasting-note > img {
    width: 35px;
    height: 35px;
  }

  .devils-blood-page .dbw-gallery-card h3 {
    font-size: 20px;
  }

  .devils-blood-page .dbw-gallery-card p {
    font-size: 13px;
  }
}


/* =========================================================
   UNIFIED CINEMATIC PRODUCT PAGE — FINAL TYPE REFINEMENT
   Keeps Signature Serve titles the same size and format as
   the Story title across all four product pages.
   ========================================================= */
.devils-blood-page .dbw-serve-panel h2 {
  max-width: 560px;
  font-size: clamp(40px, 3.15vw, 58px);
  line-height: .96;
}

@media (max-width: 820px) {
  .devils-blood-page .dbw-serve-panel h2 {
    font-size: clamp(42px, 8vw, 58px);
  }
}

@media (max-width: 560px) {
  .devils-blood-page .dbw-serve-panel h2 {
    font-size: 43px;
  }
}


/* =========================================================
   HOMEPAGE CURTAIN / PANEL REVEAL EFFECT
   Reference style: the previous section pins in place while
   the next full section rises over it. This makes the section
   feel like it is coming up instead of the page simply scrolling down.

   This replaces the older image-only parallax behaviour.
   ========================================================= */

/* Keep the forest image steady; the full section reveal now creates the motion. */
.home-page .forest-band::before {
  inset: 0;
  transform: none !important;
  will-change: auto;
}

/* The image cards should not have scroll-parallax transforms anymore. */
.home-page .brand-pathway > img {
  will-change: transform;
}

/*
  Desktop/tablet reveal:
  - collection-section pins behind forest-band
  - forest-band rises over collection-section
  - benefits pins behind brand-pathways
  - brand-pathways rises over benefits
*/
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .home-page main {
    overflow: visible;
  }

  .home-page .collection-section,
  .home-page .benefits {
    position: sticky;
    top: 0;
    transform: translateZ(0);
    background: #e4e2da;
  }

  .home-page .collection-section {
    z-index: 1;
  }

  .home-page .forest-band {
    position: relative;
    z-index: 2;
    box-shadow: 0 -34px 90px rgba(3, 16, 12, 0.34);
  }

  .home-page .benefits {
    z-index: 3;
  }

  .home-page .brand-pathways {
    position: relative;
    z-index: 4;
    box-shadow: 0 -34px 90px rgba(3, 16, 12, 0.24);
  }
}

/*
  Mobile: keep normal scrolling. Sticky reveal can feel jumpy on small screens,
  especially with browser address bars changing height.
*/
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .home-page .collection-section,
  .home-page .benefits,
  .home-page .forest-band,
  .home-page .brand-pathways {
    position: relative;
    top: auto;
    z-index: auto;
    box-shadow: none;
  }
}
/* =========================================================
   COLLECTION PAGE — SINGLE PAGE SCROLL / STICKY LEFT PANEL
   Removes the inner right-side scrollbar.
   The browser/page scrollbar now controls the bottle list.
   Left side stays pinned until the bottle collection finishes.
   ========================================================= */

.collection-page {
  background: #eef2f5;
}

/* Full viewport split, but no internal overflow. */
.collection-page .collection-split {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  align-items: start;
  overflow: visible;
}

/* The left panel stays fixed while the right bottle list scrolls. */
.collection-page .collection-video {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* Right side is no longer its own scroll container. */
.collection-page .collection-scroll {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: visible;
  background: #eef2f5;
  scrollbar-width: none;
}

.collection-page .collection-scroll::-webkit-scrollbar {
  display: none;
}

.collection-page .collection-scroll-inner {
  display: grid;
}

/* Each product fills the viewport so the right side scroll feels intentional. */
.collection-page .collection-item {
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(96px, 11vh, 140px) 30px clamp(70px, 9vh, 110px);
}

/* Keep product visuals large and centered during the page scroll. */
.collection-page .collection-item img {
  height: min(440px, 48vh);
}

.collection-page .collection-item h2 {
  margin-top: clamp(26px, 4vh, 42px);
}

/* Tablet and mobile: stack normally, because sticky split panels are too tight. */
@media (max-width: 980px) {
  .collection-page .collection-split {
    display: block;
    height: auto;
    min-height: 0;
    padding-top: 0;
  }

  .collection-page .collection-video {
    position: relative;
    top: auto;
    height: 70vh;
    min-height: 520px;
  }

  .collection-page .collection-scroll {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .collection-page .collection-item {
    min-height: 76vh;
    padding: 76px 28px;
  }
}

@media (max-width: 620px) {
  .collection-page .collection-video {
    height: 64vh;
    min-height: 460px;
  }

  .collection-page .collection-item {
    min-height: 620px;
    padding: 62px 22px;
  }

  .collection-page .collection-item img {
    height: 290px;
  }
}

/* =========================================================
   AGE GATE FIX
   Keeps the legal-age verification visible and clickable until
   the visitor actively confirms.
   ========================================================= */

body.age-gate-open {
  overflow: hidden;
}

.age-gate {
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.age-gate.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.age-card,
.age-card * {
  pointer-events: auto;
}

/* =========================================================
   OPTIONAL HOME BENEFITS RISE EFFECT
   ---------------------------------------------------------
   What this does:
   - The forest-band becomes sticky/pinned for a moment.
   - The benefits section rises upward over the forest-band.
   - The benefits section then pins so brand-pathways can rise over it.

   To remove ONLY this added benefits effect later:
   delete this entire OPTIONAL HOME BENEFITS RISE EFFECT block.
   The forest and brand-pathways reveal will fall back to the earlier behaviour.
   ========================================================= */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .home-page .forest-band {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: none;
  }

  .home-page .benefits {
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 -34px 90px rgba(3, 16, 12, 0.18);
  }

  .home-page .brand-pathways {
    position: relative;
    z-index: 4;
  }
}

/* =========================================================
   PRODUCT PAGES — STORY / SERVE CURTAIN RISE EFFECT
   ---------------------------------------------------------
   What this does:
   - The product hero/banner stays normal: no image transform/parallax.
   - The hero pins briefly while the story + signature serve section rises over it.
   - After the story/serve/value strip finishes, tasting, gallery, and footer scroll normally.

   This applies to Devil's Blood, Bitcoin, four20, and On The Green because they all use:
   body.cinematic-product-page + .dbw-hero + .dbw-story-serve.

   To remove this product-page reveal later:
   delete this entire PRODUCT PAGES — STORY / SERVE CURTAIN RISE EFFECT block.
   ========================================================= */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  body.cinematic-product-page .dbw-page {
    overflow: visible;
  }

  body.cinematic-product-page .dbw-hero {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  body.cinematic-product-page .dbw-story-serve {
    position: relative;
    z-index: 2;
    box-shadow: 0 -34px 90px rgba(0, 0, 0, 0.52);
  }

  body.cinematic-product-page .dbw-tasting,
  body.cinematic-product-page .dbw-gallery {
    position: relative;
    z-index: 3;
  }
}

@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  body.cinematic-product-page .dbw-hero,
  body.cinematic-product-page .dbw-story-serve,
  body.cinematic-product-page .dbw-tasting,
  body.cinematic-product-page .dbw-gallery {
    position: relative;
    top: auto;
    z-index: auto;
    box-shadow: none;
  }
}


/* =========================================================
   DEVIL'S BLOOD STORY PAGE
   Dedicated story landing page for devils-blood-story.html.
   Placeholder image paths are defined inline in the HTML using
   --story-image / --story-bottle so final images can be swapped
   without changing the CSS.
   ========================================================= */
.devils-blood-story-page {
  background: #050403;
  color: #efe7d3;
}

.devils-blood-story-page .dbs-page {
  background: #050403;
  overflow: hidden;
}

.devils-blood-story-page .dbs-kicker {
  margin: 0 0 12px;
  color: #c9a464;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .28em;
  line-height: 1;
  text-transform: uppercase;
}

.devils-blood-story-page .dbs-hero {
  position: relative;
  min-height: 66vh;
  min-height: 66svh;
  isolation: isolate;
  overflow: visible;
  background: #15110d;
}

.devils-blood-story-page .dbs-hero__background,
.devils-blood-story-page .dbs-ageing-band__background {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(6, 5, 4, .96), rgba(6, 5, 4, .42) 58%, rgba(6, 5, 4, .15)),
    var(--story-image),
    radial-gradient(circle at 72% 34%, rgba(185, 154, 93, .26), transparent 35%),
    #15110d;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.devils-blood-story-page .dbs-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 70% 50%, rgba(186, 94, 33, .2), transparent 32%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.68));
}

.devils-blood-story-page .dbs-hero__copy {
  position: relative;
  z-index: 2;
  width: min(760px, 70vw);
  padding: clamp(122px, 12vw, 165px) 8vw 190px;
}

.devils-blood-story-page .dbs-hero__copy h1 {
  margin: 0 0 20px;
  max-width: 620px;
  color: #d7bf81;
  font-family: var(--serif);
  font-size: clamp(48px, 5.7vw, 88px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.025em;
}

.devils-blood-story-page .dbs-hero__copy p:not(.dbs-kicker) {
  max-width: 620px;
  margin: 0;
  color: rgba(250, 242, 223, .88);
  font-size: clamp(13px, .95vw, 16px);
  line-height: 1.75;
}

.devils-blood-story-page .dbs-hero__bottle {
  position: absolute;
  right: clamp(72px, 11vw, 210px);
  bottom: -62px;
  z-index: 1;
  width: clamp(190px, 22vw, 360px);
  aspect-ratio: 2 / 3;
  background:
    var(--story-bottle) center bottom / contain no-repeat,
    linear-gradient(160deg, rgba(44, 42, 38, .94), rgba(9, 8, 7, .95));
  filter: drop-shadow(0 36px 42px rgba(0,0,0,.5));
}

.devils-blood-story-page .dbs-pillar-deck {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: min(1180px, calc(100% - 14vw));
  margin: -96px auto 0;
  padding: 20px 20px 26px;
  background: #fbf8ef;
  color: #1f1c18;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .36);
}

.devils-blood-story-page .dbs-pillar-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.devils-blood-story-page .dbs-pillar-card__image {
  min-height: 130px;
  margin-bottom: 15px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.08)),
    var(--story-image),
    linear-gradient(135deg, #29231c, #0f0d0b);
  background-size: cover;
  background-position: center;
}

.devils-blood-story-page .dbs-pillar-card h2 {
  margin: 0 0 8px;
  color: #1a1713;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.devils-blood-story-page .dbs-pillar-card p {
  margin: 0;
  color: #3f3931;
  font-size: 12px;
  line-height: 1.65;
}

.devils-blood-story-page .dbs-ageing-band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
  margin-top: -10px;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background: #080604;
}

.devils-blood-story-page .dbs-ageing-band__background {
  background:
    var(--story-image),
    linear-gradient(135deg, #1a130d, #040302);
  background-size: cover;
  background-position: center;
}

.devils-blood-story-page .dbs-ageing-band__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.18) 50%, rgba(0,0,0,.82)),
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.8));
}

.devils-blood-story-page .dbs-ageing-band__copy {
  position: relative;
  z-index: 2;
  padding: 70px 24px;
}

.devils-blood-story-page .dbs-ageing-band h2 {
  margin: 0 0 12px;
  color: #e6d3a3;
  font-family: var(--serif);
  font-size: clamp(38px, 5.2vw, 82px);
  font-weight: 400;
  line-height: .95;
  text-transform: uppercase;
}

.devils-blood-story-page .dbs-ageing-band p {
  max-width: 700px;
  margin: 0 auto;
  color: rgba(255,255,255,.86);
  font-size: 14px;
}

.devils-blood-story-page .dbs-detail-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: min(1020px, calc(100% - 14vw));
  margin: -74px auto 0;
  position: relative;
  z-index: 4;
}

.devils-blood-story-page .dbs-detail-gallery article {
  min-height: clamp(165px, 18vw, 240px);
  background: #181614;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

.devils-blood-story-page .dbs-detail-gallery__image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.25)),
    var(--story-image),
    linear-gradient(135deg, #48433a, #13100d);
  background-size: cover;
  background-position: center;
  transition: transform .45s ease;
}

.devils-blood-story-page .dbs-detail-gallery article:hover .dbs-detail-gallery__image {
  transform: scale(1.045);
}

.devils-blood-story-page .dbs-collection-nav {
  padding: 38px 7vw 72px;
  background:
    linear-gradient(180deg, rgba(47, 45, 40, .98), rgba(28, 27, 24, .98));
  color: #e7d7ab;
  text-align: center;
}

.devils-blood-story-page .dbs-collection-nav h2 {
  margin: 0 0 18px;
  color: #d8bd76;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 31px);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.devils-blood-story-page .dbs-collection-nav nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.devils-blood-story-page .dbs-collection-nav a {
  color: rgba(255,255,255,.8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: color .22s ease, transform .22s ease;
}

.devils-blood-story-page .dbs-collection-nav a:not(:last-child)::after {
  content: "|";
  margin-left: 20px;
  color: rgba(216, 189, 118, .45);
}

.devils-blood-story-page .dbs-collection-nav a:hover {
  color: #d8bd76;
  transform: translateY(-1px);
}

@media (max-width: 1040px) {
  .devils-blood-story-page .dbs-hero__copy {
    width: min(720px, 82vw);
  }

  .devils-blood-story-page .dbs-hero__bottle {
    opacity: .52;
    right: 6vw;
  }
}

@media (max-width: 820px) {
  .devils-blood-story-page .dbs-hero {
    min-height: auto;
  }

  .devils-blood-story-page .dbs-hero__copy {
    width: 100%;
    padding: 120px 7vw 140px;
  }

  .devils-blood-story-page .dbs-hero__bottle {
    width: 190px;
    right: 4vw;
    bottom: -36px;
    opacity: .34;
  }

  .devils-blood-story-page .dbs-pillar-deck,
  .devils-blood-story-page .dbs-detail-gallery {
    grid-template-columns: 1fr;
    width: min(620px, calc(100% - 40px));
  }

  .devils-blood-story-page .dbs-pillar-deck {
    margin-top: -70px;
  }

  .devils-blood-story-page .dbs-ageing-band {
    min-height: 360px;
  }

  .devils-blood-story-page .dbs-detail-gallery {
    margin-top: -42px;
    gap: 16px;
  }

  .devils-blood-story-page .dbs-collection-nav nav {
    display: grid;
    gap: 12px;
  }

  .devils-blood-story-page .dbs-collection-nav a::after {
    display: none;
  }
}

/* =========================================================
   DEVIL'S BLOOD STORY PAGE — FINAL REFINEMENTS
   ---------------------------------------------------------
   Updates requested:
   - Hero uses one full background image: assets/img/DBWStoryImg.jpeg.
   - Removes the grey bottle placeholder block.
   - Pillar cards are taller, white, overlapping, and include gold icons.
   - Aged To Perfection uses a full banner image placeholder.
   - Explore The Collection is hidden/removed from layout.
   ========================================================= */

.devils-blood-story-page .dbs-hero {
  min-height: clamp(520px, 68vh, 760px);
  overflow: visible;
  background:
    linear-gradient(90deg, rgba(4, 3, 2, .94), rgba(4, 3, 2, .42) 58%, rgba(4, 3, 2, .2)),
    url("../img/DBWStoryImg.jpeg") center / cover no-repeat,
    #070504;
}

.devils-blood-story-page .dbs-hero__background {
  background:
    linear-gradient(90deg, rgba(4, 3, 2, .96), rgba(4, 3, 2, .44) 58%, rgba(4, 3, 2, .16)),
    var(--story-image),
    #070504;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.devils-blood-story-page .dbs-hero__bottle {
  display: none !important;
}

.devils-blood-story-page .dbs-hero__copy {
  width: min(690px, 62vw);
  padding: clamp(132px, 12vw, 176px) 8vw clamp(178px, 15vw, 240px);
}

.devils-blood-story-page .dbs-hero__copy h1 {
  max-width: 610px;
  color: #d8bf7c;
  font-size: clamp(54px, 5.9vw, 96px);
}

.devils-blood-story-page .dbs-hero__copy p:not(.dbs-kicker) {
  max-width: 560px;
  font-size: clamp(14px, 1vw, 17px);
}

.devils-blood-story-page .dbs-pillar-deck {
  width: min(1240px, calc(100% - 15vw));
  margin: clamp(-138px, -8vw, -92px) auto 0;
  padding: 22px 22px 34px;
  gap: 22px;
  background: #fffdf5;
  color: #1a1713;
  box-shadow:
    0 28px 75px rgba(0, 0, 0, .36),
    0 0 0 1px rgba(255, 255, 255, .75);
}

.devils-blood-story-page .dbs-pillar-card {
  min-height: clamp(255px, 18vw, 330px);
  justify-content: flex-start;
  font-family: var(--sans);
}

.devils-blood-story-page .dbs-pillar-card__image {
  min-height: clamp(132px, 8.5vw, 172px);
  margin-bottom: 18px;
}

.devils-blood-story-page .dbs-pillar-card h2 {
  margin: 0 0 11px;
  color: #171510;
  font-family: var(--sans);
  font-size: clamp(17px, 1.08vw, 21px);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.devils-blood-story-page .dbs-pillar-card__body {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: start;
  gap: 13px;
}

.devils-blood-story-page .dbs-pillar-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: start center;
  color: #caa766;
  transform: translateY(1px);
}

.devils-blood-story-page .dbs-pillar-icon svg {
  width: 28px;
  height: 28px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.devils-blood-story-page .dbs-pillar-card p {
  margin: 0;
  color: #3d382f;
  font-family: var(--sans);
  font-size: clamp(13px, .88vw, 15px);
  line-height: 1.68;
}

.devils-blood-story-page .dbs-ageing-band {
  min-height: clamp(390px, 34vw, 565px);
  margin-top: clamp(-34px, -1.6vw, -10px);
  padding: clamp(62px, 6vw, 105px) 7vw clamp(128px, 10vw, 180px);
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.34)),
    url("../img/DBWAgedBanner.jpeg") center / cover no-repeat,
    #090706;
}

.devils-blood-story-page .dbs-ageing-band__background {
  background:
    var(--story-image),
    linear-gradient(135deg, #1a130d, #040302);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.devils-blood-story-page .dbs-ageing-band__shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.18) 50%, rgba(0,0,0,.82)),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.78));
}

.devils-blood-story-page .dbs-ageing-band__copy {
  padding: 0 24px;
  transform: translateY(-18px);
}

.devils-blood-story-page .dbs-ageing-band h2 {
  color: #ddc28a;
  font-size: clamp(42px, 5vw, 84px);
}

.devils-blood-story-page .dbs-ageing-band p {
  font-size: clamp(14px, 1vw, 16px);
}

.devils-blood-story-page .dbs-detail-gallery {
  width: min(980px, calc(100% - 18vw));
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: clamp(-122px, -6.5vw, -78px) auto 0;
  padding-bottom: clamp(52px, 5vw, 84px);
  z-index: 5;
}

.devils-blood-story-page .dbs-detail-gallery article {
  min-height: clamp(150px, 14vw, 230px);
  background: #1b1916;
  box-shadow: 0 26px 62px rgba(0,0,0,.42);
}

.devils-blood-story-page .dbs-detail-gallery__image {
  min-height: inherit;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18)),
    var(--story-image),
    linear-gradient(135deg, #35312a, #11100e);
  background-size: cover;
  background-position: center;
}

.devils-blood-story-page .dbs-collection-nav {
  display: none !important;
}

@media (max-width: 1040px) {
  .devils-blood-story-page .dbs-hero__copy {
    width: min(720px, 82vw);
  }
}

@media (max-width: 820px) {
  .devils-blood-story-page .dbs-hero {
    min-height: auto;
  }

  .devils-blood-story-page .dbs-hero__copy {
    width: 100%;
    padding: 120px 7vw 135px;
  }

  .devils-blood-story-page .dbs-pillar-deck {
    width: min(650px, calc(100% - 38px));
    grid-template-columns: 1fr;
    margin-top: -82px;
  }

  .devils-blood-story-page .dbs-pillar-card {
    min-height: 0;
  }

  .devils-blood-story-page .dbs-pillar-card__image {
    min-height: 170px;
  }

  .devils-blood-story-page .dbs-ageing-band {
    min-height: 390px;
    padding-bottom: 110px;
  }

  .devils-blood-story-page .dbs-detail-gallery {
    width: min(650px, calc(100% - 38px));
    grid-template-columns: 1fr;
    margin-top: -68px;
    gap: 16px;
  }
}

/* =========================================================
   DEVIL'S BLOOD STORY — REFERENCE MATCH + IMAGE LOAD FIX
   Uses real <img> elements in devils-blood-story.html so image
   paths resolve from the HTML page: assets/img/...
   ========================================================= */

.devils-blood-story-page,
.devils-blood-story-page .dbs-page {
  background: #050403;
}

/* Hero */
.devils-blood-story-page .dbs-hero {
  position: relative;
  min-height: clamp(540px, 64vh, 720px);
  isolation: isolate;
  overflow: visible;
  background: #050403;
}

.devils-blood-story-page .dbs-hero__background,
.devils-blood-story-page .dbs-ageing-band__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #050403;
}

.devils-blood-story-page .dbs-hero__background img,
.devils-blood-story-page .dbs-ageing-band__background img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center;
}

.devils-blood-story-page .dbs-hero__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4,4,3,.94) 0%, rgba(4,4,3,.68) 32%, rgba(4,4,3,.22) 62%, rgba(4,4,3,.48) 100%),
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.72) 100%);
}

.devils-blood-story-page .dbs-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 70% 42%, rgba(186, 94, 33, .18), transparent 33%);
  pointer-events: none;
}

.devils-blood-story-page .dbs-hero__copy {
  position: relative;
  z-index: 2;
  width: min(560px, 45vw);
  padding: clamp(122px, 10vw, 156px) 0 176px clamp(58px, 8vw, 150px);
}

.devils-blood-story-page .dbs-hero__copy h1 {
  max-width: 540px;
  margin: 0 0 20px;
  color: #d8c17f;
  font-family: var(--serif);
  font-size: clamp(50px, 4.85vw, 82px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.035em;
}

.devils-blood-story-page .dbs-hero__copy p:not(.dbs-kicker) {
  max-width: 500px;
  color: rgba(255,248,232,.92);
  font-size: clamp(13px, .95vw, 16px);
  line-height: 1.75;
}

/* Floating white story deck */
.devils-blood-story-page .dbs-pillar-deck {
  position: relative;
  z-index: 5;
  width: min(1240px, calc(100% - 20vw));
  margin: -112px auto 0;
  padding: 18px 18px 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  background: #fffaf0;
  color: #14110d;
  box-shadow: 0 28px 78px rgba(0,0,0,.38);
}

.devils-blood-story-page .dbs-pillar-deck::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44px;
  width: 100vw;
  bottom: -42px;
  transform: translateX(-50%);
  background: #fffaf0;
}

.devils-blood-story-page .dbs-pillar-card {
  min-height: 260px;
  padding: 0 0 14px;
  display: flex;
  flex-direction: column;
  background: #fffaf0;
}

.devils-blood-story-page .dbs-pillar-card__image {
  min-height: clamp(142px, 9.8vw, 182px);
  margin: 0 0 18px;
  overflow: hidden;
  background: #251f19;
}

.devils-blood-story-page .dbs-pillar-card__image img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center;
}

.devils-blood-story-page .dbs-pillar-card h2 {
  margin: 0 0 12px;
  color: #11100d;
  font-family: var(--sans);
  font-size: clamp(17px, 1.18vw, 21px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.devils-blood-story-page .dbs-pillar-card__body {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.devils-blood-story-page .dbs-pillar-icon {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  display: inline-grid;
  place-items: center;
  color: #c9a464;
}

.devils-blood-story-page .dbs-pillar-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.devils-blood-story-page .dbs-pillar-card p {
  margin: 0;
  color: #28231d;
  font-family: var(--sans);
  font-size: clamp(12px, .82vw, 14px);
  line-height: 1.65;
}

/* Aged banner */
.devils-blood-story-page .dbs-ageing-band {
  position: relative;
  min-height: clamp(390px, 35vw, 540px);
  margin-top: -2px;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background: #060504;
}

.devils-blood-story-page .dbs-ageing-band__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.22) 50%, rgba(0,0,0,.74)),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.58));
}

.devils-blood-story-page .dbs-ageing-band__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 28%, rgba(185,154,93,.16), transparent 35%);
  pointer-events: none;
}

.devils-blood-story-page .dbs-ageing-band__copy {
  position: relative;
  z-index: 2;
  padding: 92px 24px 120px;
}

.devils-blood-story-page .dbs-ageing-band h2 {
  margin: 0 0 12px;
  color: #d8c17f;
  font-family: var(--serif);
  font-size: clamp(42px, 5.4vw, 88px);
  font-weight: 400;
  line-height: .95;
  text-transform: uppercase;
}

.devils-blood-story-page .dbs-ageing-band p {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255,255,255,.88);
  font-size: clamp(13px, .95vw, 16px);
}

/* Lower image placeholders/details */
.devils-blood-story-page .dbs-detail-gallery {
  position: relative;
  z-index: 5;
  width: min(980px, calc(100% - 22vw));
  margin: -94px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-bottom: 64px;
}

.devils-blood-story-page .dbs-detail-gallery article {
  min-height: clamp(150px, 14vw, 220px);
  overflow: hidden;
  background: #181614;
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
}

.devils-blood-story-page .dbs-detail-gallery__image,
.devils-blood-story-page .dbs-detail-gallery__image img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}

.devils-blood-story-page .dbs-detail-gallery__image img {
  object-fit: cover;
  object-position: center;
}

.devils-blood-story-page .dbs-collection-nav {
  display: none;
}

@media (max-width: 1040px) {
  .devils-blood-story-page .dbs-hero__copy {
    width: min(650px, 60vw);
    padding-left: 7vw;
  }

  .devils-blood-story-page .dbs-pillar-deck {
    width: min(1060px, calc(100% - 10vw));
  }

  .devils-blood-story-page .dbs-detail-gallery {
    width: min(880px, calc(100% - 12vw));
  }
}

@media (max-width: 820px) {
  .devils-blood-story-page .dbs-hero {
    min-height: auto;
  }

  .devils-blood-story-page .dbs-hero__copy {
    width: 100%;
    padding: 118px 7vw 150px;
  }

  .devils-blood-story-page .dbs-pillar-deck {
    grid-template-columns: 1fr;
    width: min(620px, calc(100% - 40px));
    margin-top: -86px;
  }

  .devils-blood-story-page .dbs-pillar-deck::before {
    top: 28px;
    bottom: -34px;
  }

  .devils-blood-story-page .dbs-detail-gallery {
    grid-template-columns: 1fr;
    width: min(620px, calc(100% - 40px));
    gap: 16px;
    margin-top: -54px;
  }
}

@media (max-width: 560px) {
  .devils-blood-story-page .dbs-hero__copy h1 {
    font-size: 46px;
  }

  .devils-blood-story-page .dbs-pillar-deck {
    padding: 14px 14px 22px;
  }
}

/* =========================================================
   DEVIL'S BLOOD STORY — FINAL HERO + PILLAR ALIGNMENT TUNE
   - Lets the hero breathe more vertically so DBWStoryImg.jpeg is less cropped
   - Pushes the floating story cards slightly lower
   - Aligns card title/text columns more cleanly
   - Enlarges the gold pillar icons
   ========================================================= */
.devils-blood-story-page .dbs-hero {
  min-height: clamp(660px, 76vh, 860px);
}

.devils-blood-story-page .dbs-hero__background img {
  object-position: 68% 52%;
}

.devils-blood-story-page .dbs-hero__copy {
  padding-top: clamp(138px, 11vw, 178px);
  padding-bottom: 210px;
}

.devils-blood-story-page .dbs-pillar-deck {
  margin-top: -72px;
  padding: 22px 22px 42px;
  gap: 22px;
}

.devils-blood-story-page .dbs-pillar-deck::before {
  top: 70px;
  bottom: -54px;
}

.devils-blood-story-page .dbs-pillar-card {
  min-height: 310px;
  padding-bottom: 24px;
}

.devils-blood-story-page .dbs-pillar-card__image {
  min-height: clamp(180px, 13vw, 235px);
  margin-bottom: 22px;
}

.devils-blood-story-page .dbs-pillar-card h2 {
  min-height: 52px;
  display: flex;
  align-items: flex-start;
  margin: 0 0 10px calc(46px + 15px);
  font-size: clamp(21px, 1.45vw, 27px);
  line-height: 1.08;
  letter-spacing: .12em;
}

.devils-blood-story-page .dbs-pillar-card__body {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}

.devils-blood-story-page .dbs-pillar-icon {
  width: 42px;
  height: 42px;
  margin-top: 0;
  color: #c9a464;
}

.devils-blood-story-page .dbs-pillar-icon svg {
  width: 42px;
  height: 42px;
  stroke-width: 1.75;
}

.devils-blood-story-page .dbs-pillar-card p {
  max-width: 95%;
  font-size: clamp(13px, .9vw, 15px);
  line-height: 1.68;
}

@media (max-width: 980px) {
  .devils-blood-story-page .dbs-hero {
    min-height: 680px;
  }

  .devils-blood-story-page .dbs-hero__copy {
    padding-bottom: 150px;
  }

  .devils-blood-story-page .dbs-pillar-deck {
    margin-top: -52px;
  }

  .devils-blood-story-page .dbs-pillar-card h2 {
    min-height: 0;
    margin-left: calc(40px + 14px);
  }

  .devils-blood-story-page .dbs-pillar-card__body {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .devils-blood-story-page .dbs-pillar-icon,
  .devils-blood-story-page .dbs-pillar-icon svg {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 620px) {
  .devils-blood-story-page .dbs-hero {
    min-height: 620px;
  }

  .devils-blood-story-page .dbs-hero__background img {
    object-position: 70% 50%;
  }

  .devils-blood-story-page .dbs-hero__copy {
    width: auto;
    padding-bottom: 92px;
  }

  .devils-blood-story-page .dbs-pillar-deck {
    margin-top: 0;
    padding: 18px 18px 34px;
  }

  .devils-blood-story-page .dbs-pillar-deck::before {
    top: 0;
    bottom: -40px;
  }

  .devils-blood-story-page .dbs-pillar-card h2 {
    margin-left: 0;
  }

  .devils-blood-story-page .dbs-pillar-card__body {
    grid-template-columns: 38px minmax(0, 1fr);
  }
}

/* =========================================================
   SIGNATURE SERVE DRAWER — FINAL LUXURY TWO-COLUMN PANEL
   Safe override only for the recipe drawer. Does not touch product parallax.
   ========================================================= */

.serve-overlay {
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.serve-drawer.serve-drawer--luxury {
  --drawer-red: #8a1d16;
  --drawer-red-bright: #c74735;
  --drawer-gold: #d6a35e;
  --drawer-cream: #f5eee2;
  --drawer-muted: rgba(245, 238, 226, .68);
  --drawer-line: rgba(138, 29, 22, .58);

  top: 0;
  right: 0;
  width: min(1120px, 100vw);
  height: 100vh;
  height: 100svh;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(360px, 46%) minmax(440px, 54%);
  background:
    radial-gradient(circle at 68% 18%, rgba(107, 34, 19, .28), transparent 32%),
    linear-gradient(115deg, rgba(12, 8, 6, .99), rgba(6, 6, 5, .98));
  color: var(--drawer-cream);
  border-left: 1px solid rgba(214, 163, 94, .58);
  box-shadow: -42px 0 110px rgba(0, 0, 0, .58);
}

.serve-drawer.serve-drawer--luxury::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    linear-gradient(90deg, transparent 0, rgba(255,255,255,.035) 50%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.serve-drawer.serve-drawer--luxury .drawer-x {
  position: absolute;
  top: 26px;
  right: 28px;
  z-index: 5;
  float: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--drawer-gold);
  background: transparent;
  font-family: var(--sans);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition: color .22s ease, transform .22s ease;
}

.serve-drawer.serve-drawer--luxury .drawer-x:hover {
  color: var(--drawer-cream);
  transform: rotate(90deg);
}

.serve-drawer__media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid rgba(214, 163, 94, .33);
  background:
    linear-gradient(rgba(4, 5, 4, .35), rgba(4, 5, 4, .55)),
    var(--recipe-hero) center / cover no-repeat;
}

.serve-drawer.serve-drawer--luxury .serve-drawer__media > img {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.04);
}

.serve-drawer__media-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 48% 52%, transparent 0 35%, rgba(0,0,0,.24) 67%, rgba(0,0,0,.62) 100%),
    linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 24%, transparent 76%, rgba(0,0,0,.48) 100%);
  pointer-events: none;
}

.serve-drawer__pause {
  position: absolute;
  left: 34px;
  bottom: 28px;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--drawer-gold);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 9px;
}

.serve-drawer__pause span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 163, 94, .75);
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  color: var(--drawer-gold);
  font-size: 13px;
}

.serve-drawer__content {
  position: relative;
  z-index: 2;
  min-height: 0;
  padding: clamp(34px, 4.2vw, 56px) clamp(34px, 4.7vw, 64px) clamp(26px, 3.4vw, 42px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.serve-drawer.serve-drawer--luxury .kicker {
  margin: 0 0 12px;
  color: var(--drawer-red-bright);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .27em;
  text-transform: uppercase;
}

.serve-drawer.serve-drawer--luxury h2 {
  margin: 0;
  color: var(--drawer-cream);
  font-family: var(--serif);
  font-size: clamp(42px, 4.5vw, 64px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.serve-drawer__rule {
  width: min(280px, 54%);
  height: 22px;
  margin: 14px 0 16px;
  display: flex;
  align-items: center;
  color: var(--drawer-red);
}

.serve-drawer__rule::before,
.serve-drawer__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--drawer-red), transparent);
  opacity: .9;
}

.serve-drawer__rule span {
  width: 13px;
  height: 13px;
  margin: 0 10px;
  border: 1px solid var(--drawer-red-bright);
  transform: rotate(45deg);
}

.serve-drawer__rule span::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  margin: 3px;
  border: 1px solid rgba(199, 71, 53, .75);
}

.serve-drawer__lead {
  max-width: 540px;
  margin: 0 0 22px;
  color: rgba(245, 238, 226, .76);
  font-size: clamp(13px, .92vw, 16px);
  line-height: 1.65;
}

.serve-recipe-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 3.8vw, 48px);
  margin-bottom: 18px;
}

.serve-recipe-block h3,
.serve-notes h3,
.serve-meta-grid p {
  margin: 0;
  color: var(--drawer-red-bright);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.serve-recipe-block ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.serve-recipe-block ul li {
  position: relative;
  list-style: none;
  padding-left: 24px;
  margin-bottom: 9px;
  color: var(--drawer-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* This removes the browser bullet */
.serve-recipe-block ul li::marker {
  content: "";
  font-size: 0;
}

/* This keeps only your diamond */
.serve-recipe-block ul li::before {
  content: "◇";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--drawer-red-bright);
  font-size: 11px;
  line-height: 1.55;
}

.serve-recipe-method {
  padding-left: clamp(24px, 2.8vw, 42px);
  border-left: 1px solid rgba(214, 163, 94, .22);
}

.serve-recipe-method ol li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

.serve-recipe-method ol li span {
  color: var(--drawer-red-bright);
  font-size: 12px;
  letter-spacing: .08em;
}

.serve-recipe-method ol li p {
  margin: 0;
  color: var(--drawer-muted);
  font-size: 12px;
  line-height: 1.55;
}

.serve-notes {
  display: grid;
  grid-template-columns: 46px 104px 1fr;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(138, 29, 22, .8);
  background: rgba(7, 5, 4, .42);
}

.serve-notes__icon {
  width: 34px;
  height: 34px;
  color: var(--drawer-red-bright);
}

.serve-notes__icon svg,
.serve-meta-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.serve-notes p {
  margin: 0;
  color: rgba(245, 238, 226, .68);
  font-size: 11px;
  line-height: 1.45;
}

.serve-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(214, 163, 94, .22);
  padding-top: 18px;
}

.serve-meta-grid > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 0 clamp(10px, 1.6vw, 22px);
  border-right: 1px solid rgba(214, 163, 94, .25);
}

.serve-meta-grid > div:first-child {
  padding-left: 0;
}

.serve-meta-grid > div:last-child {
  border-right: 0;
  padding-right: 0;
}

.serve-meta-icon {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  color: var(--drawer-gold);
}

.serve-meta-grid p {
  color: var(--drawer-gold);
  font-size: 9px;
  letter-spacing: .2em;
}

.serve-meta-grid strong {
  margin-top: 2px;
  color: rgba(245, 238, 226, .72);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}

.serve-drawer.serve-drawer--luxury .fineprint,
.serve-drawer.serve-drawer--luxury .btn {
  display: none;
}

@media (max-height: 780px) and (min-width: 861px) {
  .serve-drawer.serve-drawer--luxury h2 {
    font-size: clamp(38px, 4vw, 54px);
  }

  .serve-drawer__content {
    padding-top: 34px;
    padding-bottom: 26px;
  }

  .serve-drawer__lead {
    margin-bottom: 16px;
  }

  .serve-recipe-grid {
    margin-bottom: 14px;
  }

  .serve-recipe-block li,
  .serve-recipe-method ol li p {
    font-size: 11px;
    line-height: 1.45;
  }

  .serve-notes {
    margin-bottom: 14px;
    padding: 13px 16px;
  }

  .serve-meta-grid {
    padding-top: 14px;
  }
}

@media (max-width: 860px) {
  .serve-drawer.serve-drawer--luxury {
    width: 100vw;
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .serve-drawer__media {
    min-height: 42vh;
    border-right: 0;
    border-bottom: 1px solid rgba(214, 163, 94, .33);
  }

  .serve-drawer__content {
    overflow: visible;
  }

  .serve-recipe-grid,
  .serve-meta-grid {
    grid-template-columns: 1fr;
  }

  .serve-recipe-method {
    padding-left: 0;
    border-left: 0;
  }

  .serve-notes {
    grid-template-columns: 42px 1fr;
  }

  .serve-notes p {
    grid-column: 2;
  }

  .serve-meta-grid > div {
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(214, 163, 94, .2);
  }

  .serve-meta-grid > div:last-child {
    border-bottom: 0;
  }
}


/* =========================================================
   BACKGROUND IMAGE NOTE
   Image panels now use inline `background-image: url(...)`
   in the HTML instead of `--dbw-image` custom properties.
   This avoids relative path issues when custom property URLs
   are consumed from assets/css/styles.css.
   ========================================================= */

/* =========================================================
   SIGNATURE SERVE DRAWER — STACKED CARD RECIPE PANEL
   Requested update: keep the drawer slide-out animation, but
   change the recipe panel to a top image + beige recipe card.
   This override only targets the recipe drawer and does not touch
   product hero/parallax/scroll sections.
   ========================================================= */

.serve-overlay {
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.serve-drawer.serve-drawer--luxury {
  --drawer-card-bg: var(--paper);
  --drawer-card-ink: var(--ink);
  --drawer-card-muted: #4e493f;
  --drawer-card-gold: var(--gold);
  --drawer-card-red: #8f2f1f;
  --drawer-card-line: rgba(185, 154, 93, .42);

  top: 50%;
  right: clamp(14px, 3vw, 46px);
  left: auto;
  bottom: auto;
  width: min(460px, calc(100vw - 28px));
  height: auto;
  max-height: calc(100vh - 42px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  background: var(--drawer-card-bg);
  color: var(--drawer-card-ink);
  border: 1px solid rgba(185, 154, 93, .62);
  border-radius: 0;
  box-shadow: -28px 26px 95px rgba(0, 0, 0, .42);
  transform: translate3d(calc(100% + 70px), -50%, 0);
}

.serve-drawer.serve-drawer--luxury.active {
  transform: translate3d(0, -50%, 0);
}

.serve-drawer.serve-drawer--luxury::before {
  display: none;
}

.serve-drawer.serve-drawer--luxury .drawer-x {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 6;
  float: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--cream);
  background: rgba(3, 16, 12, .46);
  font-family: var(--sans);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: color .22s ease, background .22s ease, transform .22s ease;
}

.serve-drawer.serve-drawer--luxury .drawer-x:hover {
  color: var(--drawer-card-gold);
  background: rgba(3, 16, 12, .68);
  transform: rotate(90deg);
}

.serve-drawer.serve-drawer--luxury .serve-drawer__media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: clamp(265px, 43vh, 405px);
  min-height: 0;
  overflow: hidden;
  border-right: 0;
  border-bottom: 1px solid var(--drawer-card-line);
  background:
    linear-gradient(rgba(3, 16, 12, .08), rgba(3, 16, 12, .18)),
    var(--recipe-hero) center / cover no-repeat;
}

.serve-drawer.serve-drawer--luxury .serve-drawer__media > img {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.02);
}

.serve-drawer.serve-drawer--luxury .serve-drawer__media-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 16, 12, .15) 0%, transparent 44%, rgba(3, 16, 12, .08) 100%),
    radial-gradient(circle at 50% 52%, transparent 0 42%, rgba(0, 0, 0, .22) 100%);
}

.serve-drawer.serve-drawer--luxury .serve-drawer__pause {
  display: none;
}

.serve-drawer.serve-drawer--luxury .serve-drawer__content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: clamp(22px, 2.5vw, 32px) clamp(24px, 3vw, 36px) clamp(24px, 2.8vw, 34px);
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 38%),
    var(--drawer-card-bg);
  color: var(--drawer-card-ink);
}

.serve-drawer.serve-drawer--luxury .kicker {
  margin: 0 0 8px;
  color: var(--drawer-card-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.serve-drawer.serve-drawer--luxury h2 {
  margin: 0 0 17px;
  color: var(--drawer-card-ink);
  font-family: var(--serif);
  font-size: clamp(28px, 3.8vw, 40px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: none;
}

.serve-drawer.serve-drawer--luxury .serve-drawer__rule,
.serve-drawer.serve-drawer--luxury .serve-drawer__lead,
.serve-drawer.serve-drawer--luxury .serve-notes,
.serve-drawer.serve-drawer--luxury .serve-meta-grid,
.serve-drawer.serve-drawer--luxury .fineprint,
.serve-drawer.serve-drawer--luxury .btn {
  display: none !important;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-block,
.serve-drawer.serve-drawer--luxury .serve-recipe-method {
  padding: 0;
  border: 0;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-block h3 {
  margin: 0 0 9px;
  color: var(--drawer-card-red);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  line-height: 1.2;
  text-transform: uppercase;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-block ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-block li {
  margin: 0 0 6px;
  color: var(--drawer-card-ink);
  font-size: 13px;
  line-height: 1.45;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-block li::marker {
  color: var(--drawer-card-gold);
}

.serve-drawer.serve-drawer--luxury .serve-recipe-method ol {
  margin: 0;
  padding-left: 0;
  counter-reset: recipe-step;
  list-style: none;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-method ol li {
  counter-increment: recipe-step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 0 7px;
  color: var(--drawer-card-ink);
}

.serve-drawer.serve-drawer--luxury .serve-recipe-method ol li span {
  display: none;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-method ol li::before {
  content: counter(recipe-step) ".";
  color: var(--drawer-card-gold);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-method ol li p {
  margin: 0;
  color: var(--drawer-card-ink);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-height: 760px) and (min-width: 721px) {
  .serve-drawer.serve-drawer--luxury {
    width: min(430px, calc(100vw - 28px));
  }

  .serve-drawer.serve-drawer--luxury .serve-drawer__media {
    height: clamp(230px, 36vh, 315px);
  }

  .serve-drawer.serve-drawer--luxury .serve-drawer__content {
    padding: 20px 28px 22px;
  }

  .serve-drawer.serve-drawer--luxury h2 {
    font-size: clamp(27px, 3vw, 34px);
    margin-bottom: 12px;
  }

  .serve-drawer.serve-drawer--luxury .serve-recipe-grid {
    gap: 13px;
  }

  .serve-drawer.serve-drawer--luxury .serve-recipe-block li,
  .serve-drawer.serve-drawer--luxury .serve-recipe-method ol li p,
  .serve-drawer.serve-drawer--luxury .serve-recipe-method ol li::before {
    font-size: 12px;
    line-height: 1.35;
  }
}

@media (max-width: 720px) {
  .serve-drawer.serve-drawer--luxury {
    top: auto;
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-height: calc(100vh - 24px);
    transform: translate3d(0, calc(100% + 36px), 0);
  }

  .serve-drawer.serve-drawer--luxury.active {
    transform: translate3d(0, 0, 0);
  }

  .serve-drawer.serve-drawer--luxury .serve-drawer__media {
    height: clamp(230px, 40vh, 340px);
  }

  .serve-drawer.serve-drawer--luxury .serve-drawer__content {
    overflow: auto;
  }
}


/* =========================================================
   BITCOIN WHISKY PAGE — BLUE / GOLD CINEMATIC OVERRIDES
   Keep this block in the shared stylesheet. It reuses the same
   product-page structure as Devil's Blood, but changes only the
   Bitcoin page through the .bitcoin-page body class.
   ========================================================= */

.devils-blood-page.bitcoin-page {
  --btc-bg: #050912;
  --btc-deep: #020611;
  --btc-panel: #060b17;
  --btc-blue: #07101f;
  --btc-gold: #c49a44;
  --btc-gold-soft: #ddb96e;
  --btc-cream: #f4ead8;
  --btc-line: rgba(196, 154, 68, .36);
  background: var(--btc-bg);
}

.devils-blood-page.bitcoin-page .dbw-page {
  background:
    radial-gradient(circle at 70% 4%, rgba(20, 55, 93, .16), transparent 32%),
    linear-gradient(180deg, #050912 0%, #020611 100%);
  color: var(--btc-cream);
}

.devils-blood-page.bitcoin-page .dbw-eyebrow,
.devils-blood-page.bitcoin-page .dbw-section-label {
  color: var(--btc-gold);
}

.devils-blood-page.bitcoin-page .dbw-hero {
  background:
    radial-gradient(circle at 70% 46%, rgba(197, 155, 62, .16), transparent 30%),
    url("../img/hero-bitcoin.jpg") center / cover no-repeat,
    #050912;
}

.devils-blood-page.bitcoin-page .dbw-hero__video {
  object-position: 69% center;
}

.devils-blood-page.bitcoin-page .dbw-hero__shade {
  background:
    linear-gradient(90deg, rgba(3, 8, 18, .96) 0%, rgba(3, 8, 18, .78) 31%, rgba(3, 8, 18, .30) 62%, rgba(3, 8, 18, .12) 100%),
    linear-gradient(0deg, rgba(2, 6, 17, .68) 0%, transparent 40%);
}

.devils-blood-page.bitcoin-page .dbw-hero__content {
  width: min(660px, 48vw);
}

.devils-blood-page.bitcoin-page .dbw-hero h1 {
  color: #fff8ea;
  letter-spacing: -.015em;
  line-height: .88;
  text-shadow: 0 10px 30px rgba(0, 0, 0, .42);
}

.devils-blood-page.bitcoin-page .dbw-hero__type,
.devils-blood-page.bitcoin-page .dbw-tasting__stats strong,
.devils-blood-page.bitcoin-page .dbw-outline-link,
.devils-blood-page.bitcoin-page .dbw-story-panel a,
.devils-blood-page.bitcoin-page .dbw-text-button,
.devils-blood-page.bitcoin-page .dbw-gallery-card h3,
.devils-blood-page.bitcoin-page .dbw-tasting-note h3 {
  color: var(--btc-gold-soft);
}

.devils-blood-page.bitcoin-page .dbw-hero__type {
  font-size: clamp(13px, 1.2vw, 22px);
  letter-spacing: .40em;
}

.devils-blood-page.bitcoin-page .dbw-outline-link {
  border-color: rgba(196, 154, 68, .72);
}

.devils-blood-page.bitcoin-page .dbw-outline-link:hover {
  background: var(--btc-gold);
  color: #07101f;
}

.devils-blood-page.bitcoin-page .dbw-video-toggle:hover {
  border-color: var(--btc-gold-soft);
  background: rgba(16, 35, 61, .62);
}

.devils-blood-page.bitcoin-page .dbw-story-serve {
  background: var(--btc-deep);
  border-top-color: var(--btc-line);
}

.devils-blood-page.bitcoin-page .dbw-story-panel,
.devils-blood-page.bitcoin-page .dbw-serve-panel {
  min-height: clamp(430px, 33vw, 610px);
}

.devils-blood-page.bitcoin-page .dbw-story-panel {
  border-right-color: var(--btc-line);
}

.devils-blood-page.bitcoin-page .dbw-panel-shade {
  background:
    linear-gradient(90deg, rgba(2, 6, 17, .92) 0%, rgba(4, 10, 22, .68) 49%, rgba(4, 10, 22, .24) 100%),
    radial-gradient(circle at 74% 42%, rgba(199, 159, 67, .10), transparent 30%);
}

.devils-blood-page.bitcoin-page .dbw-story-panel h2,
.devils-blood-page.bitcoin-page .dbw-serve-panel h2 {
  color: #fff3df;
}

.devils-blood-page.bitcoin-page .dbw-story-panel p:not(.dbw-section-label),
.devils-blood-page.bitcoin-page .dbw-serve-panel p:not(.dbw-section-label),
.devils-blood-page.bitcoin-page .dbw-tasting-note p,
.devils-blood-page.bitcoin-page .dbw-gallery-card p {
  color: rgba(244, 234, 216, .72);
}

.devils-blood-page.bitcoin-page .dbw-story-panel a,
.devils-blood-page.bitcoin-page .dbw-text-button {
  border-bottom-color: rgba(196, 154, 68, .65);
}

.devils-blood-page.bitcoin-page .dbw-story-panel a:hover,
.devils-blood-page.bitcoin-page .dbw-text-button:hover {
  color: #f4ca73;
}

.devils-blood-page.bitcoin-page .dbw-value-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background:
    linear-gradient(180deg, rgba(8, 17, 31, .98), rgba(4, 9, 19, .98));
  border-top-color: var(--btc-line);
  border-bottom-color: var(--btc-line);
}

.devils-blood-page.bitcoin-page .dbw-value-card {
  border-right-color: var(--btc-line);
  grid-template-columns: 42px 1fr;
}

.devils-blood-page.bitcoin-page .dbw-value-card > img,
.devils-blood-page.bitcoin-page .dbw-tasting-note > img {
  filter: sepia(1) saturate(5) hue-rotate(358deg) brightness(1.08);
}

.devils-blood-page.bitcoin-page .dbw-value-card h3 {
  color: var(--btc-cream);
}

.devils-blood-page.bitcoin-page .dbw-value-card p {
  color: rgba(244, 234, 216, .62);
}

.devils-blood-page.bitcoin-page .dbw-tasting {
  background: #030712;
  border-top: 1px solid var(--btc-line);
  border-bottom-color: var(--btc-line);
}

.devils-blood-page.bitcoin-page .dbw-tasting__shade {
  background:
    linear-gradient(90deg, rgba(3, 7, 16, .95) 0%, rgba(3, 7, 16, .64) 34%, rgba(3, 7, 16, .24) 58%, rgba(3, 7, 16, .92) 100%),
    linear-gradient(0deg, rgba(2, 6, 17, .7), transparent 52%);
}

.devils-blood-page.bitcoin-page .dbw-tasting__inner {
  grid-template-columns: minmax(310px, .9fr) minmax(120px, .45fr) minmax(250px, .65fr);
}

.devils-blood-page.bitcoin-page .dbw-tasting__inner::after {
  content: "";
  grid-column: 2;
  justify-self: center;
  width: 1px;
  height: min(250px, 56%);
  background: var(--btc-line);
}

.devils-blood-page.bitcoin-page .dbw-tasting__stats > div {
  border-bottom-color: rgba(196, 154, 68, .30);
}

.devils-blood-page.bitcoin-page .dbw-tasting__stats span {
  color: rgba(244, 234, 216, .76);
}

.devils-blood-page.bitcoin-page .dbw-tasting__stats strong {
  letter-spacing: .02em;
}

.devils-blood-page.bitcoin-page .dbw-tasting__stats > div:nth-child(3) strong {
  font-size: clamp(22px, 2.5vw, 40px);
  line-height: 1.05;
}

.devils-blood-page.bitcoin-page .dbw-gallery {
  background: #020611;
  border-top: 1px solid var(--btc-line);
}

.devils-blood-page.bitcoin-page .dbw-gallery-card {
  border-right-color: var(--btc-line);
}

.devils-blood-page.bitcoin-page .dbw-gallery-card__shade {
  background:
    linear-gradient(0deg, rgba(2, 6, 17, .94) 0%, rgba(2, 6, 17, .50) 35%, rgba(2, 6, 17, .06) 72%),
    linear-gradient(90deg, rgba(2, 6, 17, .18), transparent 58%);
}

.devils-blood-page.bitcoin-page .dbw-gallery-card h3 {
  font-family: var(--serif);
  font-size: clamp(15px, 1.05vw, 21px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.05;
  text-transform: uppercase;
}

.devils-blood-page.bitcoin-page .dbw-gallery-card p {
  font-size: clamp(11px, .8vw, 14px);
}

/* Bitcoin page footer tint when inserted by site-shell.js */
.bitcoin-page .luxury-footer,
.bitcoin-page .site-footer {
  background-color: #07101f;
  background-image:
    radial-gradient(circle at 72% 10%, rgba(196, 154, 68, .10), transparent 34%),
    linear-gradient(180deg, #07101f, #040914);
}

.bitcoin-page .footer-column,
.bitcoin-page .footer-brand-column,
.bitcoin-page .luxury-footer .footer-column {
  border-color: var(--btc-line);
}

.bitcoin-page .footer-column h4,
.bitcoin-page .footer-column a:hover,
.bitcoin-page .footer-icon,
.bitcoin-page .footer-contact svg {
  color: var(--btc-gold-soft);
}

/* Bitcoin drawer inherits the stacked recipe-card drawer, with blue/gold accents. */
.serve-drawer.serve-drawer--bitcoin {
  --drawer-card-bg: #f7f0df;
  --drawer-card-ink: #07101f;
  --drawer-card-muted: #4b4a43;
  --drawer-card-gold: #b58935;
  --drawer-card-red: #8e6f2e;
  --drawer-card-line: rgba(181, 137, 53, .46);
}

.serve-drawer.serve-drawer--bitcoin .kicker,
.serve-drawer.serve-drawer--bitcoin .serve-recipe-block h3,
.serve-drawer.serve-drawer--bitcoin .serve-recipe-method ol li::before {
  color: #b58935;
}

.serve-drawer.serve-drawer--bitcoin .drawer-x {
  color: #b58935;
}

@media (max-width: 1180px) {
  .devils-blood-page.bitcoin-page .dbw-value-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .devils-blood-page.bitcoin-page .dbw-value-card:nth-child(3) {
    border-right: 0;
  }

  .devils-blood-page.bitcoin-page .dbw-value-card:nth-child(-n + 3) {
    border-bottom: 1px solid var(--btc-line);
  }
}

@media (max-width: 820px) {
  .devils-blood-page.bitcoin-page .dbw-hero__content {
    width: 100%;
  }

  .devils-blood-page.bitcoin-page .dbw-value-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .devils-blood-page.bitcoin-page .dbw-value-card:nth-child(3) {
    border-right: 1px solid var(--btc-line);
  }

  .devils-blood-page.bitcoin-page .dbw-value-card:nth-child(2n) {
    border-right: 0;
  }

  .devils-blood-page.bitcoin-page .dbw-value-card:nth-child(-n + 4) {
    border-bottom: 1px solid var(--btc-line);
  }

  .devils-blood-page.bitcoin-page .dbw-tasting__inner {
    grid-template-columns: 1fr;
  }

  .devils-blood-page.bitcoin-page .dbw-tasting__inner::after {
    display: none;
  }

  .devils-blood-page.bitcoin-page .dbw-tasting__stats {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .devils-blood-page.bitcoin-page .dbw-value-strip {
    grid-template-columns: 1fr;
  }

  .devils-blood-page.bitcoin-page .dbw-value-card,
  .devils-blood-page.bitcoin-page .dbw-value-card:nth-child(3),
  .devils-blood-page.bitcoin-page .dbw-value-card:nth-child(2n) {
    border-right: 0;
  }
}

/* =========================================================
   BITCOIN / DEVIL'S BLOOD FINAL PAGE FIXES
   - Bitcoin icon gold filter
   - Bitcoin gallery text alignment
   - Product-page theme-safe footer/header helpers
   ========================================================= */

/* Turn black SVG icons into the same gold tone used across the Bitcoin page. */
.bitcoin-page .dbw-value-card > img,
.bitcoin-page .dbw-tasting-note > img {
  opacity: 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(65%)
    sepia(74%)
    saturate(476%)
    hue-rotate(2deg)
    brightness(93%)
    contrast(91%);
}

.bitcoin-page .dbw-value-card > img {
  width: 42px;
  height: 42px;
}

.bitcoin-page .dbw-tasting-note > img {
  width: 39px;
  height: 39px;
}

/* Keep all Bitcoin gallery headings/descriptions visually aligned even when one title is longer. */
.bitcoin-page .dbw-gallery-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 118px;
}

.bitcoin-page .dbw-gallery-card h3 {
  min-height: 2.34em;
  display: flex;
  align-items: flex-end;
  margin-bottom: 9px;
  color: var(--btc-gold-soft, #d3ad63);
}

.bitcoin-page .dbw-gallery-card p {
  min-height: 2.95em;
  max-width: 92%;
}

/* Make sure the longer Bitcoin gallery text does not push the title off rhythm. */
.bitcoin-page .dbw-gallery-card:nth-of-type(2) h3 {
  max-width: 12.5em;
}

/* Devil's Blood keeps its own black shell without affecting the home page or other products. */
.devils-theme-page .dbw-page {
  background: #010101;
}

/* =========================================================
   FINAL BITCOIN GOLD ICON OVERRIDE
   This must stay at the very bottom of styles.css.
   The Bitcoin-specific rules earlier are more specific than
   .bitcoin-page alone, so this uses the full selector and !important.
   ========================================================= */

.devils-blood-page.bitcoin-page .dbw-value-card > img,
.devils-blood-page.bitcoin-page .dbw-tasting-note > img {
  opacity: 1 !important;
  filter:
    brightness(0)
    saturate(100%)
    invert(66%)
    sepia(67%)
    saturate(610%)
    hue-rotate(358deg)
    brightness(95%)
    contrast(92%) !important;
}

.devils-blood-page.bitcoin-page .dbw-value-card > img {
  width: 42px;
  height: 42px;
}

.devils-blood-page.bitcoin-page .dbw-tasting-note > img {
  width: 39px;
  height: 39px;
}


/* =========================================================
   FOUR20 VODKA PAGE — WHITE / BEIGE / GREEN THEME
   Drop-in overrides for four20.html only. Keeps the shared
   product structure, but changes the page into the lighter
   botanical mockup style and tints the header/footer green.
   ========================================================= */

.devils-blood-page.four20-page {
  --f20-green: #0a3c2f;
  --f20-deep: #05281f;
  --f20-forest: #073327;
  --f20-cream: #f8f3e7;
  --f20-paper: #fbf7ec;
  --f20-gold: #b99a5d;
  --f20-soft-gold: #d2ba7d;
  --f20-ink: #103729;
  --f20-muted: #4e5d52;
  --f20-line: rgba(185, 154, 93, .34);
  background: var(--f20-cream);
}

.devils-blood-page.four20-page .dbw-page {
  background: var(--f20-cream);
  color: var(--f20-ink);
}

.devils-blood-page.four20-page .dbw-eyebrow,
.devils-blood-page.four20-page .dbw-section-label {
  color: var(--f20-gold);
  letter-spacing: .34em;
}

/* Four20 header: transparent at top, botanical green after scroll. */
.four20-page .shared-site-header.header-scrolled,
.four20-page .shared-site-header.header-scrolled .nav-row {
  background: rgba(8, 58, 45, .97);
}

.four20-page .shared-site-header.header-scrolled .nav-row {
  border-bottom-color: rgba(210, 186, 125, .42);
}

/* Four20 hero */
.devils-blood-page.four20-page .dbw-hero {
  background:
    radial-gradient(circle at 70% 45%, rgba(229, 224, 182, .18), transparent 30%),
    url("../img/four20Hero.jpeg") center / cover no-repeat,
    var(--f20-deep);
}

.devils-blood-page.four20-page .dbw-hero__video {
  object-position: 66% center;
  filter: saturate(.96) contrast(1.03) brightness(.96);
}

.devils-blood-page.four20-page .dbw-hero__shade {
  background:
    linear-gradient(90deg, rgba(4, 33, 25, .86) 0%, rgba(7, 48, 37, .58) 31%, rgba(7, 48, 37, .18) 62%, rgba(7, 48, 37, .06) 100%),
    linear-gradient(0deg, rgba(4, 25, 19, .42) 0%, transparent 45%);
}

.devils-blood-page.four20-page .dbw-hero__content {
  width: min(670px, 48vw);
  padding-left: clamp(42px, 5.4vw, 94px);
}

.devils-blood-page.four20-page .dbw-hero h1 {
  color: #fbf7ec;
  font-size: clamp(72px, 8.35vw, 146px);
  letter-spacing: -.045em;
  line-height: .82;
  text-transform: uppercase;
}

.devils-blood-page.four20-page .dbw-hero__type {
  color: var(--f20-soft-gold);
  letter-spacing: .42em;
}

.devils-blood-page.four20-page .dbw-hero__description {
  color: rgba(255, 255, 255, .83);
}

.devils-blood-page.four20-page .dbw-outline-link {
  border-color: rgba(210, 186, 125, .78);
  color: #fff7e9;
}

.devils-blood-page.four20-page .dbw-outline-link:hover {
  background: var(--f20-soft-gold);
  color: var(--f20-deep);
}

/* Story / serve panels: light botanical editorial section */
.devils-blood-page.four20-page .dbw-story-serve {
  background: var(--f20-paper);
  border-top: 1px solid rgba(185, 154, 93, .32);
  color: var(--f20-ink);
}

.devils-blood-page.four20-page .dbw-story-panel,
.devils-blood-page.four20-page .dbw-serve-panel {
  min-height: clamp(470px, 35vw, 650px);
  background: var(--f20-paper);
}

.devils-blood-page.four20-page .dbw-story-panel {
  border-right-color: rgba(185, 154, 93, .34);
}

.devils-blood-page.four20-page .dbw-story-panel .dbw-panel-background {
  background-size: min(330px, 42%) auto;
  background-position: 75% 62%;
  opacity: .10;
  filter: sepia(.28) saturate(1.4) hue-rotate(70deg);
}

.devils-blood-page.four20-page .dbw-serve-panel .dbw-panel-background {
  background-position: 72% center;
  background-size: cover;
  opacity: .98;
}

.devils-blood-page.four20-page .dbw-story-panel .dbw-panel-shade {
  background:
    radial-gradient(circle at 74% 62%, rgba(10, 60, 47, .07), transparent 31%),
    linear-gradient(90deg, rgba(251, 247, 236, .98), rgba(251, 247, 236, .93));
}

.devils-blood-page.four20-page .dbw-serve-panel .dbw-panel-shade {
  background:
    linear-gradient(90deg, rgba(251, 247, 236, .98) 0%, rgba(251, 247, 236, .78) 44%, rgba(251, 247, 236, .16) 100%),
    linear-gradient(0deg, rgba(251, 247, 236, .24), transparent 58%);
}

.devils-blood-page.four20-page .dbw-story-panel h2,
.devils-blood-page.four20-page .dbw-serve-panel h2 {
  color: var(--f20-ink);
  font-size: clamp(36px, 3.6vw, 62px);
  letter-spacing: -.025em;
  line-height: .98;
}

.devils-blood-page.four20-page .dbw-story-panel p:not(.dbw-section-label),
.devils-blood-page.four20-page .dbw-serve-panel p:not(.dbw-section-label) {
  color: #36493f;
  font-size: 12px;
  line-height: 1.72;
}

.devils-blood-page.four20-page .dbw-story-panel a,
.devils-blood-page.four20-page .dbw-text-button {
  border-bottom-color: rgba(185, 154, 93, .76);
  color: var(--f20-gold);
}

.devils-blood-page.four20-page .dbw-story-panel a:hover,
.devils-blood-page.four20-page .dbw-text-button:hover {
  color: var(--f20-green);
}

/* Botanical green value strip */
.devils-blood-page.four20-page .dbw-value-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background:
    radial-gradient(circle at 50% 0%, rgba(210, 186, 125, .10), transparent 32%),
    linear-gradient(180deg, #0c4738 0%, #073427 100%);
  border-top-color: rgba(210, 186, 125, .35);
  border-bottom-color: rgba(210, 186, 125, .36);
}

.devils-blood-page.four20-page .dbw-value-card {
  grid-template-columns: 42px 1fr;
  min-height: 132px;
  border-right-color: rgba(210, 186, 125, .30);
}

.devils-blood-page.four20-page .dbw-value-card > img,
.devils-blood-page.four20-page .dbw-tasting-note > img {
  opacity: 1 !important;
  filter:
    brightness(0)
    saturate(100%)
    invert(59%)
    sepia(72%)
    saturate(343%)
    hue-rotate(6deg)
    brightness(94%)
    contrast(91%) !important;
}

.devils-blood-page.four20-page .dbw-value-card > img {
  width: 40px;
  height: 40px;
}

.devils-blood-page.four20-page .dbw-value-card h3 {
  color: #fff7e9;
  letter-spacing: .16em;
}

.devils-blood-page.four20-page .dbw-value-card p {
  color: rgba(255, 247, 233, .72);
}

/* Tasting profile: cream field with green/gold stats */
.devils-blood-page.four20-page .dbw-tasting {
  min-height: clamp(470px, 35vw, 640px);
  background: var(--f20-cream);
  border-top: 1px solid rgba(185, 154, 93, .28);
  border-bottom: 1px solid rgba(185, 154, 93, .28);
}

.devils-blood-page.four20-page .dbw-tasting__background {
  inset: 0;
  background-size: min(380px, 34vw) auto;
  background-position: center;
  opacity: .34;
  filter: saturate(.86) contrast(.9);
}

.devils-blood-page.four20-page .dbw-tasting__shade {
  background:
    linear-gradient(90deg, rgba(248, 243, 231, .98) 0%, rgba(248, 243, 231, .72) 39%, rgba(248, 243, 231, .55) 58%, rgba(248, 243, 231, .98) 100%);
}

.devils-blood-page.four20-page .dbw-tasting__inner {
  grid-template-columns: minmax(300px, .75fr) minmax(220px, 1fr) minmax(245px, .55fr);
}

.devils-blood-page.four20-page .dbw-tasting__profile {
  max-width: 410px;
}

.devils-blood-page.four20-page .dbw-tasting-note {
  grid-template-columns: 42px 1fr;
}

.devils-blood-page.four20-page .dbw-tasting-note > img {
  width: 34px;
  height: 34px;
}

.devils-blood-page.four20-page .dbw-tasting-note h3 {
  color: var(--f20-gold);
  font-size: 11px;
}

.devils-blood-page.four20-page .dbw-tasting-note p {
  color: #394940;
  font-size: 12px;
}

.devils-blood-page.four20-page .dbw-tasting__stats {
  padding-left: clamp(28px, 3vw, 60px);
  border-left: 1px solid rgba(185, 154, 93, .38);
}

.devils-blood-page.four20-page .dbw-tasting__stats > div {
  border-bottom-color: rgba(185, 154, 93, .45);
}

.devils-blood-page.four20-page .dbw-tasting__stats strong {
  color: #6f6f35;
  letter-spacing: .02em;
}

.devils-blood-page.four20-page .dbw-tasting__stats span {
  color: var(--f20-ink);
}

.devils-blood-page.four20-page .dbw-tasting__stats > div:nth-child(2) strong,
.devils-blood-page.four20-page .dbw-tasting__stats > div:nth-child(3) strong {
  font-size: clamp(28px, 2.7vw, 44px);
  line-height: 1.04;
}

/* Five-image gallery */
.devils-blood-page.four20-page .dbw-gallery {
  background: var(--f20-deep);
  border-top: 1px solid rgba(210, 186, 125, .38);
}

.devils-blood-page.four20-page .dbw-gallery-card {
  border-right-color: rgba(210, 186, 125, .30);
}

.devils-blood-page.four20-page .dbw-gallery-card__shade {
  background:
    linear-gradient(0deg, rgba(6, 37, 29, .94) 0%, rgba(6, 37, 29, .56) 36%, rgba(6, 37, 29, .05) 74%),
    linear-gradient(90deg, rgba(6, 37, 29, .22), transparent 62%);
}

.devils-blood-page.four20-page .dbw-gallery-card h3 {
  color: var(--f20-soft-gold);
  font-family: var(--serif);
  font-size: clamp(16px, 1.08vw, 22px);
  font-weight: 400;
  letter-spacing: .03em;
}

.devils-blood-page.four20-page .dbw-gallery-card p {
  color: rgba(255, 247, 233, .82);
  font-size: clamp(11px, .8vw, 14px);
}

/* Four20 footer tint from site-shell.js. */
.four20-page .shared-footer.site-footer,
.four20-page .luxury-footer,
.four20-page .site-footer {
  background-color: #0b3a2e;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(42, 103, 80, .42), transparent 34%),
    linear-gradient(rgba(7, 56, 43, .94), rgba(4, 40, 30, .98));
}

.four20-page .shared-footer__column,
.four20-page .shared-footer__brand,
.four20-page .footer-column,
.four20-page .footer-brand-column {
  border-color: rgba(210, 186, 125, .38);
}

.four20-page .shared-footer__column h4,
.four20-page .shared-footer__column a:hover,
.four20-page .shared-footer__icon,
.four20-page .shared-footer__contact svg,
.four20-page .footer-column h4,
.four20-page .footer-column a:hover,
.four20-page .footer-icon,
.four20-page .footer-contact svg {
  color: var(--f20-soft-gold);
}

.four20-page .shared-footer__divider span,
.four20-page .footer-divider span {
  background: #0b3a2e;
}

/* Four20 recipe drawer inherits the stacked card layout with green/gold accents. */
.serve-drawer.serve-drawer--four20 {
  --drawer-card-bg: #f8f3e7;
  --drawer-card-ink: #0a3c2f;
  --drawer-card-muted: #4d5c52;
  --drawer-card-gold: #a9894e;
  --drawer-card-red: #0a3c2f;
  --drawer-card-line: rgba(169, 137, 78, .42);
}

.serve-drawer.serve-drawer--four20 .kicker,
.serve-drawer.serve-drawer--four20 .serve-recipe-block h3,
.serve-drawer.serve-drawer--four20 .serve-recipe-method ol li::before,
.serve-drawer.serve-drawer--four20 .drawer-x {
  color: #a9894e;
}

@media (max-width: 1180px) {
  .devils-blood-page.four20-page .dbw-value-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .devils-blood-page.four20-page .dbw-value-card:nth-child(3) {
    border-right: 0;
  }

  .devils-blood-page.four20-page .dbw-value-card:nth-child(-n + 3) {
    border-bottom: 1px solid rgba(210, 186, 125, .30);
  }
}

@media (max-width: 820px) {
  .devils-blood-page.four20-page .dbw-hero__content {
    width: 100%;
  }

  .devils-blood-page.four20-page .dbw-story-panel {
    border-right: 0;
    border-bottom-color: rgba(185, 154, 93, .34);
  }

  .devils-blood-page.four20-page .dbw-value-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .devils-blood-page.four20-page .dbw-value-card:nth-child(3) {
    border-right: 1px solid rgba(210, 186, 125, .30);
  }

  .devils-blood-page.four20-page .dbw-value-card:nth-child(2n) {
    border-right: 0;
  }

  .devils-blood-page.four20-page .dbw-value-card:nth-child(-n + 4) {
    border-bottom: 1px solid rgba(210, 186, 125, .30);
  }

  .devils-blood-page.four20-page .dbw-tasting__inner {
    grid-template-columns: 1fr;
  }

  .devils-blood-page.four20-page .dbw-tasting__stats {
    grid-column: 1;
    justify-self: start;
    padding-left: 0;
    border-left: 0;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .devils-blood-page.four20-page .dbw-value-strip {
    grid-template-columns: 1fr;
  }

  .devils-blood-page.four20-page .dbw-value-card,
  .devils-blood-page.four20-page .dbw-value-card:nth-child(2n),
  .devils-blood-page.four20-page .dbw-value-card:nth-child(3) {
    border-right: 0;
  }
}



/* =========================================================
   ON THE GREEN PAGE — DARK GREEN / GOLF CLUB CINEMATIC THEME
   Scoped only to on-the-green.html through .on-the-green-page.
   This reuses the shared product page structure without changing
   Devil's Blood, Bitcoin, Four20, or the home page.
   ========================================================= */

.devils-blood-page.on-the-green-page {
  --otg-deep: #021812;
  --otg-green: #073225;
  --otg-green-2: #0a3f2f;
  --otg-cream: #f5efdf;
  --otg-paper: #fbf6ea;
  --otg-gold: #b99a5d;
  --otg-gold-soft: #d7c083;
  --otg-line: rgba(185, 154, 93, .38);
  background: var(--otg-deep);
}

.devils-blood-page.on-the-green-page .dbw-page {
  background: var(--otg-deep);
  color: var(--otg-cream);
}

.devils-blood-page.on-the-green-page .dbw-eyebrow,
.devils-blood-page.on-the-green-page .dbw-section-label {
  color: var(--otg-gold-soft);
}

/* Header color for On The Green only. It still stays transparent at page top. */
.on-the-green-page .shared-site-header.header-scrolled,
.on-the-green-page .shared-site-header.header-scrolled .nav-row,
.on-the-green-page .site-header.header-scrolled,
.on-the-green-page .site-header.header-scrolled .nav-row {
  background: rgba(5, 42, 30, .96) !important;
}

.on-the-green-page .shared-site-header.header-scrolled .nav-row,
.on-the-green-page .site-header.header-scrolled .nav-row {
  border-bottom-color: rgba(215, 192, 131, .32) !important;
}

/* Hero */
.devils-blood-page.on-the-green-page .dbw-hero {
  background:
    radial-gradient(circle at 72% 50%, rgba(215, 192, 131, .16), transparent 31%),
    url("../img/hero-golf.jpg") center / cover no-repeat,
    var(--otg-deep);
}

.devils-blood-page.on-the-green-page .dbw-hero__video {
  object-position: 70% center;
  filter: saturate(.95) contrast(1.04) brightness(.9);
}

.devils-blood-page.on-the-green-page .dbw-hero__shade {
  background:
    linear-gradient(90deg, rgba(2, 16, 12, .94) 0%, rgba(2, 16, 12, .72) 34%, rgba(2, 16, 12, .28) 63%, rgba(2, 16, 12, .14) 100%),
    linear-gradient(0deg, rgba(2, 16, 12, .56) 0%, transparent 42%);
}

.devils-blood-page.on-the-green-page .dbw-hero__content {
  width: min(650px, 47vw);
  padding-left: clamp(38px, 5vw, 86px);
}

.devils-blood-page.on-the-green-page .dbw-hero h1 {
  color: #fffaf0;
  font-size: clamp(70px, 8vw, 140px);
  letter-spacing: -.03em;
  line-height: .84;
  text-transform: uppercase;
}

.devils-blood-page.on-the-green-page .dbw-hero__type {
  color: var(--otg-gold-soft);
  letter-spacing: .43em;
}

.devils-blood-page.on-the-green-page .dbw-hero__description {
  color: rgba(255, 250, 240, .82);
}

.devils-blood-page.on-the-green-page .dbw-outline-link {
  border-color: rgba(215, 192, 131, .76);
  color: #fffaf0;
}

.devils-blood-page.on-the-green-page .dbw-outline-link:hover,
.devils-blood-page.on-the-green-page .dbw-video-toggle:hover {
  background: var(--otg-gold-soft);
  color: var(--otg-deep);
}

/* Story / serve panels */
.devils-blood-page.on-the-green-page .dbw-story-serve {
  background: var(--otg-deep);
  border-top: 1px solid var(--otg-line);
  color: var(--otg-cream);
}

.devils-blood-page.on-the-green-page .dbw-story-panel,
.devils-blood-page.on-the-green-page .dbw-serve-panel {
  min-height: clamp(470px, 36vw, 660px);
  background: var(--otg-deep);
}

.devils-blood-page.on-the-green-page .dbw-story-panel {
  border-right-color: rgba(215, 192, 131, .28);
}

.devils-blood-page.on-the-green-page .dbw-story-panel .dbw-panel-background {
  background-position: center;
  filter: saturate(.78) contrast(1.05) brightness(.72);
}

.devils-blood-page.on-the-green-page .dbw-serve-panel .dbw-panel-background {
  background-position: 76% center;
  filter: saturate(.92) contrast(1.05) brightness(.86);
}

.devils-blood-page.on-the-green-page .dbw-story-panel .dbw-panel-shade {
  background:
    linear-gradient(90deg, rgba(2, 16, 12, .92) 0%, rgba(2, 16, 12, .75) 46%, rgba(2, 16, 12, .34) 100%),
    radial-gradient(circle at 75% 45%, rgba(215, 192, 131, .13), transparent 34%);
}

.devils-blood-page.on-the-green-page .dbw-serve-panel .dbw-panel-shade {
  background:
    linear-gradient(90deg, rgba(2, 16, 12, .94) 0%, rgba(2, 16, 12, .66) 48%, rgba(2, 16, 12, .14) 100%),
    linear-gradient(0deg, rgba(2, 16, 12, .52), transparent 56%);
}

.devils-blood-page.on-the-green-page .dbw-story-panel h2,
.devils-blood-page.on-the-green-page .dbw-serve-panel h2 {
  color: #fffaf0;
  font-size: clamp(34px, 3.4vw, 60px);
  letter-spacing: -.02em;
  line-height: .98;
}

.devils-blood-page.on-the-green-page .dbw-story-panel p:not(.dbw-section-label),
.devils-blood-page.on-the-green-page .dbw-serve-panel p:not(.dbw-section-label),
.devils-blood-page.on-the-green-page .dbw-gallery-card p {
  color: rgba(255, 250, 240, .76);
}

.devils-blood-page.on-the-green-page .dbw-story-panel a,
.devils-blood-page.on-the-green-page .dbw-text-button {
  border-bottom-color: rgba(215, 192, 131, .74);
  color: var(--otg-gold-soft);
}

.devils-blood-page.on-the-green-page .dbw-story-panel a:hover,
.devils-blood-page.on-the-green-page .dbw-text-button:hover {
  color: #fffaf0;
}

/* Five golf-themed value cards */
.devils-blood-page.on-the-green-page .dbw-value-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background:
    radial-gradient(circle at 50% 0%, rgba(215, 192, 131, .10), transparent 34%),
    linear-gradient(180deg, #0a3f2f 0%, #062d22 100%);
  border-top-color: rgba(215, 192, 131, .35);
  border-bottom-color: rgba(215, 192, 131, .36);
}

.devils-blood-page.on-the-green-page .dbw-value-card {
  grid-template-columns: 42px 1fr;
  min-height: 132px;
  border-right-color: rgba(215, 192, 131, .30);
}

.devils-blood-page.on-the-green-page .dbw-value-card > img,
.devils-blood-page.on-the-green-page .dbw-tasting-note > img {
  opacity: 1 !important;
  filter:
    brightness(0)
    saturate(100%)
    invert(67%)
    sepia(34%)
    saturate(560%)
    hue-rotate(5deg)
    brightness(92%)
    contrast(90%) !important;
}

.devils-blood-page.on-the-green-page .dbw-value-card > img {
  width: 38px;
  height: 38px;
}

.devils-blood-page.on-the-green-page .dbw-value-card h3 {
  color: #fffaf0;
  letter-spacing: .16em;
}

.devils-blood-page.on-the-green-page .dbw-value-card p {
  color: rgba(255, 250, 240, .70);
}

/* Tasting profile: cream / golf-green layout */
.devils-blood-page.on-the-green-page .dbw-tasting {
  min-height: clamp(470px, 35vw, 640px);
  background: var(--otg-paper);
  border-top: 1px solid rgba(185, 154, 93, .28);
  border-bottom: 1px solid rgba(185, 154, 93, .28);
}

.devils-blood-page.on-the-green-page .dbw-tasting__background {
  inset: 0;
  background-size: min(610px, 43vw) auto;
  background-position: 86% center;
  opacity: .92;
  filter: saturate(.96) contrast(.94) brightness(.95);
}

.devils-blood-page.on-the-green-page .dbw-tasting__shade {
  background:
    linear-gradient(90deg, rgba(251, 246, 234, .98) 0%, rgba(251, 246, 234, .91) 34%, rgba(251, 246, 234, .72) 54%, rgba(251, 246, 234, .28) 100%),
    radial-gradient(circle at 82% 50%, rgba(7, 50, 37, .12), transparent 34%);
}

.devils-blood-page.on-the-green-page .dbw-tasting__inner {
  grid-template-columns: minmax(280px, .76fr) minmax(210px, .48fr) minmax(390px, 1.04fr);
  gap: clamp(28px, 3.6vw, 68px);
}

.devils-blood-page.on-the-green-page .dbw-tasting__profile {
  max-width: 430px;
}

.devils-blood-page.on-the-green-page .dbw-tasting-note {
  grid-template-columns: 42px 1fr;
}

.devils-blood-page.on-the-green-page .dbw-tasting-note > img {
  width: 34px;
  height: 34px;
}

.devils-blood-page.on-the-green-page .dbw-tasting-note h3 {
  color: var(--otg-gold);
  font-size: 11px;
}

.devils-blood-page.on-the-green-page .dbw-tasting-note p {
  color: #33473c;
  font-size: 12px;
}

.devils-blood-page.on-the-green-page .dbw-tasting__stats {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  width: min(240px, 100%);
}

.devils-blood-page.on-the-green-page .dbw-tasting__stats > div {
  border-bottom-color: rgba(185, 154, 93, .45);
}

.devils-blood-page.on-the-green-page .dbw-tasting__stats strong {
  color: #294e34;
  letter-spacing: .02em;
}

.devils-blood-page.on-the-green-page .dbw-tasting__stats span {
  color: #19382b;
}

.devils-blood-page.on-the-green-page .dbw-tasting__stats > div:nth-child(2) strong,
.devils-blood-page.on-the-green-page .dbw-tasting__stats > div:nth-child(3) strong {
  font-size: clamp(28px, 2.45vw, 42px);
  line-height: 1.05;
}

/* Five-card gallery */
.devils-blood-page.on-the-green-page .dbw-gallery {
  background: var(--otg-deep);
  border-top: 1px solid rgba(215, 192, 131, .38);
}

.devils-blood-page.on-the-green-page .dbw-gallery-card {
  border-right-color: rgba(215, 192, 131, .28);
}

.devils-blood-page.on-the-green-page .dbw-gallery-card__shade {
  background:
    linear-gradient(0deg, rgba(3, 30, 22, .94) 0%, rgba(3, 30, 22, .56) 36%, rgba(3, 30, 22, .05) 74%),
    linear-gradient(90deg, rgba(3, 30, 22, .24), transparent 62%);
}

.devils-blood-page.on-the-green-page .dbw-gallery-card h3 {
  color: var(--otg-gold-soft);
  font-family: var(--serif);
  font-size: clamp(16px, 1.05vw, 22px);
  font-weight: 400;
  letter-spacing: .04em;
}

.devils-blood-page.on-the-green-page .dbw-gallery-card p {
  font-size: clamp(11px, .8vw, 14px);
}

/* Footer tint for On The Green only. */
.on-the-green-page .shared-footer.site-footer,
.on-the-green-page .luxury-footer,
.on-the-green-page .site-footer {
  background-color: #073225;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(20, 95, 69, .34), transparent 34%),
    linear-gradient(rgba(7, 50, 37, .95), rgba(3, 35, 25, .98));
}

.on-the-green-page .shared-footer__column,
.on-the-green-page .shared-footer__brand,
.on-the-green-page .footer-column,
.on-the-green-page .footer-brand-column {
  border-color: rgba(215, 192, 131, .38);
}

.on-the-green-page .shared-footer__column h4,
.on-the-green-page .shared-footer__column a:hover,
.on-the-green-page .shared-footer__icon,
.on-the-green-page .shared-footer__contact svg,
.on-the-green-page .footer-column h4,
.on-the-green-page .footer-column a:hover,
.on-the-green-page .footer-icon,
.on-the-green-page .footer-contact svg {
  color: var(--otg-gold-soft);
}

.on-the-green-page .shared-footer__divider span,
.on-the-green-page .footer-divider span {
  background: #073225;
}

/* On The Green recipe drawer uses the shared stacked card layout with green/gold accents. */
.serve-drawer.serve-drawer--otg {
  --drawer-card-bg: #fbf6ea;
  --drawer-card-ink: #123d2c;
  --drawer-card-muted: #4b574e;
  --drawer-card-gold: #aa8d55;
  --drawer-card-red: #123d2c;
  --drawer-card-line: rgba(170, 141, 85, .42);
}

.serve-drawer.serve-drawer--otg .kicker,
.serve-drawer.serve-drawer--otg .serve-recipe-block h3,
.serve-drawer.serve-drawer--otg .serve-recipe-method ol li::before,
.serve-drawer.serve-drawer--otg .drawer-x {
  color: #aa8d55;
}

@media (max-width: 1180px) {
  .devils-blood-page.on-the-green-page .dbw-value-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .devils-blood-page.on-the-green-page .dbw-value-card:nth-child(3) {
    border-right: 0;
  }

  .devils-blood-page.on-the-green-page .dbw-value-card:nth-child(-n + 3) {
    border-bottom: 1px solid rgba(215, 192, 131, .30);
  }
}

@media (max-width: 820px) {
  .devils-blood-page.on-the-green-page .dbw-hero__content {
    width: 100%;
  }

  .devils-blood-page.on-the-green-page .dbw-story-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(215, 192, 131, .30);
  }

  .devils-blood-page.on-the-green-page .dbw-value-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .devils-blood-page.on-the-green-page .dbw-value-card:nth-child(3) {
    border-right: 1px solid rgba(215, 192, 131, .30);
  }

  .devils-blood-page.on-the-green-page .dbw-value-card:nth-child(2n) {
    border-right: 0;
  }

  .devils-blood-page.on-the-green-page .dbw-value-card:nth-child(-n + 4) {
    border-bottom: 1px solid rgba(215, 192, 131, .30);
  }

  .devils-blood-page.on-the-green-page .dbw-tasting__inner {
    grid-template-columns: 1fr;
  }

  .devils-blood-page.on-the-green-page .dbw-tasting__background {
    background-size: min(440px, 78vw) auto;
    background-position: 78% 82%;
    opacity: .22;
  }

  .devils-blood-page.on-the-green-page .dbw-tasting__stats {
    grid-column: 1;
    justify-self: start;
    padding-left: 0;
    border-left: 0;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .devils-blood-page.on-the-green-page .dbw-value-strip {
    grid-template-columns: 1fr;
  }

  .devils-blood-page.on-the-green-page .dbw-value-card,
  .devils-blood-page.on-the-green-page .dbw-value-card:nth-child(2n),
  .devils-blood-page.on-the-green-page .dbw-value-card:nth-child(3) {
    border-right: 0;
  }
}

/* =========================================================
   FOUR20 FINAL FIXES — serve image, globe icon, gallery images
   Scoped to four20.html only. Paste at the very bottom of styles.css.
   ========================================================= */

/* 1) Force the Hemp & Citrus Spritz image to appear in the right side
   of the Signature Serve panel. This avoids any var()/inline background
   issue and keeps the text area readable. */
.devils-blood-page.four20-page .dbw-serve-panel .dbw-panel-background {
  background-image: url("../img/four20Spritz.png") !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
}

.devils-blood-page.four20-page .dbw-serve-panel .dbw-panel-shade {
  background:
    linear-gradient(
      90deg,
      rgba(251, 247, 236, 1) 0%,
      rgba(251, 247, 236, .98) 33%,
      rgba(251, 247, 236, .66) 52%,
      rgba(251, 247, 236, .18) 100%
    ) !important;
}

.devils-blood-page.four20-page .dbw-serve-panel__content {
  max-width: 470px;
}

/* 2) Inline globe icon used in four20.html so the broken globe.svg image
   does not appear. */
.devils-blood-page.four20-page .f20-value-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f20-soft-gold);
}

.devils-blood-page.four20-page .f20-value-icon svg {
  width: 40px;
  height: 40px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3) Force the five gallery images directly from CSS. This fixes cases
   where inline --dbw-image backgrounds are not resolving or are cached. */
.devils-blood-page.four20-page .dbw-gallery-card:nth-of-type(1) .dbw-gallery-card__image {
  background-image: url("../img/f20-gallery-1.png") !important;
}

.devils-blood-page.four20-page .dbw-gallery-card:nth-of-type(2) .dbw-gallery-card__image {
  background-image: url("../img/f20-gallery-2.png") !important;
}

.devils-blood-page.four20-page .dbw-gallery-card:nth-of-type(3) .dbw-gallery-card__image {
  background-image: url("../img/f20-gallery-3.png") !important;
}

.devils-blood-page.four20-page .dbw-gallery-card:nth-of-type(4) .dbw-gallery-card__image {
  background-image: url("../img/f20-gallery-4.png") !important;
}

.devils-blood-page.four20-page .dbw-gallery-card:nth-of-type(5) .dbw-gallery-card__image {
  background-image: url("../img/f20-gallery-5.png") !important;
}

.devils-blood-page.four20-page .dbw-gallery-card__image {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none;
}

.devils-blood-page.four20-page .dbw-gallery-card:hover .dbw-gallery-card__image {
  transform: scale(1.045);
  filter: brightness(1.05) saturate(1.04);
}

/* Make the images visible instead of hiding them behind the green overlay. */
.devils-blood-page.four20-page .dbw-gallery-card__shade {
  background:
    linear-gradient(0deg, rgba(4, 35, 26, .88) 0%, rgba(4, 35, 26, .58) 27%, rgba(4, 35, 26, .08) 72%),
    linear-gradient(90deg, rgba(4, 35, 26, .18), transparent 62%) !important;
}

/* 4) Align the gallery text. Keeps all headings/descriptions starting
   from the same vertical rhythm, even when one heading is longer. */
.devils-blood-page.four20-page .dbw-gallery-card__copy {
  left: clamp(22px, 1.7vw, 34px);
  right: clamp(22px, 1.7vw, 34px);
  bottom: clamp(24px, 2vw, 38px);
  min-height: 74px;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 9px;
}

.devils-blood-page.four20-page .dbw-gallery-card h3 {
  margin: 0;
  min-height: 1.15em;
  line-height: 1.1;
  white-space: nowrap;
  font-size: clamp(15px, .98vw, 20px);
}

.devils-blood-page.four20-page .dbw-gallery-card p {
  margin: 0;
  max-width: 320px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .devils-blood-page.four20-page .dbw-serve-panel .dbw-panel-background {
    background-position: 70% center !important;
  }

  .devils-blood-page.four20-page .dbw-gallery-card h3 {
    white-space: normal;
  }
}

/* =========================================================
   FINAL FOUR20 + ON THE GREEN BACKGROUND / GALLERY FIXES
   Paste this at the very bottom of styles.css.
   ========================================================= */

/* Four20: force the Our Story leaf background to appear and stay subtle. */
.devils-blood-page.four20-page .dbw-story-panel .dbw-panel-background {
  background-image: url("../img/f20-story-leaf.png") !important;
  background-size: min(520px, 45vw) auto !important;
  background-position: 76% 58% !important;
  background-repeat: no-repeat !important;
  opacity: .24 !important;
  filter: saturate(.88) contrast(.96) brightness(1.04) !important;
}

.devils-blood-page.four20-page .dbw-story-panel .dbw-panel-shade {
  background:
    linear-gradient(90deg, rgba(251, 247, 236, .99) 0%, rgba(251, 247, 236, .94) 45%, rgba(251, 247, 236, .72) 100%),
    radial-gradient(circle at 76% 58%, rgba(10, 60, 47, .12), transparent 36%) !important;
}

/* Four20: force the tasting image and make it visible behind the center area. */
.devils-blood-page.four20-page .dbw-tasting__background {
  background-image: url("../img/f20-tasting-profile-background.png") !important;
  background-size: min(520px, 36vw) auto !important;
  background-position: 53% center !important;
  background-repeat: no-repeat !important;
  opacity: .46 !important;
  filter: saturate(.9) contrast(.94) brightness(1.02) !important;
  mix-blend-mode: multiply;
}

.devils-blood-page.four20-page .dbw-tasting__shade {
  background:
    linear-gradient(90deg, rgba(248, 243, 231, .98) 0%, rgba(248, 243, 231, .72) 33%, rgba(248, 243, 231, .36) 52%, rgba(248, 243, 231, .73) 70%, rgba(248, 243, 231, .98) 100%) !important;
}

/* Four20: keep gallery images visible even when inline CSS variables are not resolving. */
.devils-blood-page.four20-page .dbw-gallery-card:nth-of-type(1) .dbw-gallery-card__image { background-image: url("../img/f20-gallery-1.png") !important; }
.devils-blood-page.four20-page .dbw-gallery-card:nth-of-type(2) .dbw-gallery-card__image { background-image: url("../img/f20-gallery-2.png") !important; }
.devils-blood-page.four20-page .dbw-gallery-card:nth-of-type(3) .dbw-gallery-card__image { background-image: url("../img/f20-gallery-3.png") !important; }
.devils-blood-page.four20-page .dbw-gallery-card:nth-of-type(4) .dbw-gallery-card__image { background-image: url("../img/f20-gallery-4.png") !important; }
.devils-blood-page.four20-page .dbw-gallery-card:nth-of-type(5) .dbw-gallery-card__image { background-image: url("../img/f20-gallery-5.png") !important; }

.devils-blood-page.four20-page .dbw-gallery-card__image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}

/* On The Green: blend the tasting image into the cream background instead of showing as a square. */
.devils-blood-page.on-the-green-page .dbw-tasting__background {
  background-image: url("../img/otg-tasting-profile-background.png") !important;
  background-size: min(760px, 48vw) auto !important;
  background-position: 84% center !important;
  background-repeat: no-repeat !important;
  opacity: .68 !important;
  filter: saturate(.88) contrast(.9) brightness(1.08) !important;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse at 78% 50%, #000 0%, #000 48%, rgba(0, 0, 0, .62) 62%, transparent 82%);
  mask-image: radial-gradient(ellipse at 78% 50%, #000 0%, #000 48%, rgba(0, 0, 0, .62) 62%, transparent 82%);
}

.devils-blood-page.on-the-green-page .dbw-tasting__shade {
  background:
    linear-gradient(90deg, rgba(251, 246, 234, .99) 0%, rgba(251, 246, 234, .93) 31%, rgba(251, 246, 234, .72) 50%, rgba(251, 246, 234, .50) 67%, rgba(251, 246, 234, .78) 100%),
    radial-gradient(ellipse at 82% 50%, rgba(7, 50, 37, .10), transparent 42%) !important;
}

/* On The Green: align all gallery headings and descriptions on the same baseline. */
.devils-blood-page.on-the-green-page .dbw-gallery-card__copy {
  left: clamp(22px, 1.7vw, 34px);
  right: clamp(22px, 1.7vw, 34px);
  bottom: clamp(24px, 2vw, 38px);
  min-height: 96px;
  display: grid;
  grid-template-rows: 2.45em 1fr;
  align-content: start;
  gap: 10px;
}

.devils-blood-page.on-the-green-page .dbw-gallery-card h3 {
  margin: 0;
  min-height: 2.45em;
  display: flex;
  align-items: flex-end;
  line-height: 1.16;
}

.devils-blood-page.on-the-green-page .dbw-gallery-card p {
  margin: 0;
  min-height: 2.7em;
  max-width: 92%;
  line-height: 1.45;
}

/* Responsive safety so the background art does not crowd the copy on tablets/mobile. */
@media (max-width: 980px) {
  .devils-blood-page.four20-page .dbw-story-panel .dbw-panel-background {
    background-size: min(390px, 62vw) auto !important;
    background-position: 85% 65% !important;
    opacity: .16 !important;
  }

  .devils-blood-page.four20-page .dbw-tasting__background {
    background-size: min(430px, 75vw) auto !important;
    background-position: 50% 62% !important;
    opacity: .24 !important;
  }

  .devils-blood-page.on-the-green-page .dbw-tasting__background {
    background-size: min(520px, 82vw) auto !important;
    background-position: 50% 86% !important;
    opacity: .26 !important;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 52%, transparent 84%);
    mask-image: radial-gradient(ellipse at center, #000 0%, #000 52%, transparent 84%);
  }

  .devils-blood-page.on-the-green-page .dbw-gallery-card__copy {
    min-height: auto;
    grid-template-rows: auto auto;
  }

  .devils-blood-page.on-the-green-page .dbw-gallery-card h3,
  .devils-blood-page.on-the-green-page .dbw-gallery-card p {
    min-height: 0;
  }
}

/* =========================================================
   FINAL FOUR20 / ON THE GREEN BLENDED BACKGROUND FIX
   Date: 2026-07-30
   Purpose:
   1) Make Four20 story leaf visible.
   2) Make Four20 and On The Green tasting artwork act like
      full-section blended backgrounds, not boxed images.
   3) Preserve all existing product-page parallax/scroll behavior.
   Paste at the very bottom of styles.css.
   ========================================================= */

/* ---------- Four20 Our Story background ---------- */
.devils-blood-page.four20-page .dbw-story-panel {
  background:
    radial-gradient(circle at 78% 54%, rgba(10, 60, 47, .10), transparent 34%),
    var(--f20-paper) !important;
}

.devils-blood-page.four20-page .dbw-story-panel .dbw-panel-background {
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url("../img/f20-story-leaf.png") !important;
  background-size: min(640px, 54vw) auto !important;
  background-position: 79% 54% !important;
  background-repeat: no-repeat !important;
  opacity: .42 !important;
  filter: saturate(.95) contrast(.98) brightness(1.05) !important;
  mix-blend-mode: multiply;
}

.devils-blood-page.four20-page .dbw-story-panel .dbw-panel-shade {
  z-index: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(251, 247, 236, .99) 0%,
      rgba(251, 247, 236, .95) 41%,
      rgba(251, 247, 236, .68) 68%,
      rgba(251, 247, 236, .48) 100%
    ) !important;
}

.devils-blood-page.four20-page .dbw-story-panel__content {
  position: relative;
  z-index: 2 !important;
}

/* ---------- Shared tasting-section background reset ----------
   This is the main fix for the "image sitting in a box" issue.
   The background art now covers the whole section and blends through
   soft gradients instead of being displayed at its native rectangle size. */
.devils-blood-page.four20-page .dbw-tasting,
.devils-blood-page.on-the-green-page .dbw-tasting {
  isolation: isolate;
  overflow: hidden;
}

.devils-blood-page.four20-page .dbw-tasting__background,
.devils-blood-page.on-the-green-page .dbw-tasting__background {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 1 !important;
  mix-blend-mode: multiply;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Four20 tasting: full-width soft botanical background. */
.devils-blood-page.four20-page .dbw-tasting__background {
  background-image: url("../img/f20-tasting-profile-background.png") !important;
  background-position: center center !important;
  filter: saturate(.86) contrast(.92) brightness(1.06) !important;
}

.devils-blood-page.four20-page .dbw-tasting__shade {
  background:
    linear-gradient(90deg,
      rgba(248, 243, 231, .99) 0%,
      rgba(248, 243, 231, .88) 24%,
      rgba(248, 243, 231, .58) 50%,
      rgba(248, 243, 231, .84) 75%,
      rgba(248, 243, 231, .99) 100%
    ),
    radial-gradient(ellipse at 51% 50%, rgba(10, 60, 47, .04) 0%, rgba(10, 60, 47, .02) 38%, transparent 68%) !important;
}

/* On The Green tasting: full-width golf-club background blended into cream. */
.devils-blood-page.on-the-green-page .dbw-tasting__background {
  background-image: url("../img/otg-tasting-profile-background.png") !important;
  background-position: center center !important;
  filter: saturate(.82) contrast(.9) brightness(1.08) !important;
}

.devils-blood-page.on-the-green-page .dbw-tasting__shade {
  background:
    linear-gradient(90deg,
      rgba(251, 246, 234, .99) 0%,
      rgba(251, 246, 234, .90) 27%,
      rgba(251, 246, 234, .63) 52%,
      rgba(251, 246, 234, .62) 74%,
      rgba(251, 246, 234, .94) 100%
    ),
    radial-gradient(ellipse at 77% 50%, rgba(7, 50, 37, .08), transparent 54%) !important;
}

/* Keep content cleanly above the blended background art. */
.devils-blood-page.four20-page .dbw-tasting__inner,
.devils-blood-page.on-the-green-page .dbw-tasting__inner {
  position: relative;
  z-index: 2 !important;
}

/* On The Green gallery text: align headings and copy cleanly. */
.devils-blood-page.on-the-green-page .dbw-gallery-card__copy {
  min-height: 104px !important;
  display: grid !important;
  grid-template-rows: 2.55em auto !important;
  align-content: start !important;
  gap: 10px !important;
}

.devils-blood-page.on-the-green-page .dbw-gallery-card h3 {
  min-height: 2.55em !important;
  display: flex !important;
  align-items: flex-end !important;
  margin: 0 !important;
}

.devils-blood-page.on-the-green-page .dbw-gallery-card p {
  min-height: 2.8em !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .devils-blood-page.four20-page .dbw-story-panel .dbw-panel-background {
    background-size: min(520px, 84vw) auto !important;
    background-position: 78% 64% !important;
    opacity: .28 !important;
  }

  .devils-blood-page.four20-page .dbw-tasting__background,
  .devils-blood-page.on-the-green-page .dbw-tasting__background {
    background-size: cover !important;
    background-position: center center !important;
    opacity: .72 !important;
  }

  .devils-blood-page.four20-page .dbw-tasting__shade,
  .devils-blood-page.on-the-green-page .dbw-tasting__shade {
    background: rgba(248, 243, 231, .88) !important;
  }

  .devils-blood-page.on-the-green-page .dbw-gallery-card__copy,
  .devils-blood-page.on-the-green-page .dbw-gallery-card h3,
  .devils-blood-page.on-the-green-page .dbw-gallery-card p {
    min-height: 0 !important;
    grid-template-rows: auto auto !important;
  }
}



/* =========================================================
   FINAL FOUR20 STORY + SIGNATURE SERVE VISIBILITY FIX
   Date: 2026-07-30
   Purpose:
   1) Make f20-story-leaf.png cover the full Our Story panel
      instead of floating as a smaller centered image.
   2) Reduce the heavy cream translucency over both the Our Story
      and Signature Serve panels so the background images are visible.
   3) Keep this scoped ONLY to four20.html.
   ========================================================= */

/* Four20: full-panel Our Story background image */
.devils-blood-page.four20-page .dbw-story-panel .dbw-panel-background {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("../img/f20-story-leaf.png") !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: saturate(.95) contrast(.98) brightness(1.03) !important;
  mix-blend-mode: multiply;
}

/* Four20: lighter overlay so the story image is visible, while the left text stays readable */
.devils-blood-page.four20-page .dbw-story-panel .dbw-panel-shade {
  background:
    linear-gradient(
      90deg,
      rgba(251, 247, 236, .96) 0%,
      rgba(251, 247, 236, .88) 38%,
      rgba(251, 247, 236, .46) 67%,
      rgba(251, 247, 236, .18) 100%
    ),
    radial-gradient(
      ellipse at 74% 55%,
      rgba(10, 60, 47, .06) 0%,
      rgba(10, 60, 47, .03) 38%,
      transparent 70%
    ) !important;
}

/* Four20: make Signature Serve background image more visible */
.devils-blood-page.four20-page .dbw-serve-panel .dbw-panel-background {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("../img/four20Spritz.png") !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: saturate(.98) contrast(.98) brightness(1.02) !important;
  mix-blend-mode: normal;
}

/* Four20: lighter overlay on serve panel; image remains visible on the right */
.devils-blood-page.four20-page .dbw-serve-panel .dbw-panel-shade {
  background:
    linear-gradient(
      90deg,
      rgba(251, 247, 236, .97) 0%,
      rgba(251, 247, 236, .86) 34%,
      rgba(251, 247, 236, .44) 58%,
      rgba(251, 247, 236, .12) 100%
    ),
    linear-gradient(
      0deg,
      rgba(251, 247, 236, .10),
      transparent 60%
    ) !important;
}

/* Keep Four20 story/serve copy cleanly above the images */
.devils-blood-page.four20-page .dbw-story-panel__content,
.devils-blood-page.four20-page .dbw-serve-panel__content {
  position: relative;
  z-index: 2 !important;
}

/* Tablet/mobile: keep image full-bleed but increase readability */
@media (max-width: 980px) {
  .devils-blood-page.four20-page .dbw-story-panel .dbw-panel-background,
  .devils-blood-page.four20-page .dbw-serve-panel .dbw-panel-background {
    background-size: cover !important;
    background-position: center center !important;
    opacity: .92 !important;
  }

  .devils-blood-page.four20-page .dbw-story-panel .dbw-panel-shade,
  .devils-blood-page.four20-page .dbw-serve-panel .dbw-panel-shade {
    background: rgba(251, 247, 236, .82) !important;
  }
}


/* =========================================================
   Signature serve drawer: align ingredient diamonds with method numbers
   ========================================================= */
.serve-drawer.serve-drawer--luxury .serve-recipe-block ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-block ul li {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 10px;
  align-items: start;
  position: relative;
  padding-left: 0;
  margin: 0 0 7px;
  list-style: none;
  color: var(--drawer-card-ink);
  font-size: 13px;
  line-height: 1.45;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-block ul li::marker {
  content: "";
  font-size: 0;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-block ul li::before {
  content: "◇";
  position: static;
  left: auto;
  top: auto;
  grid-column: 1;
  color: var(--drawer-card-gold);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.serve-drawer.serve-drawer--luxury .serve-recipe-method ol li {
  grid-template-columns: 28px 1fr;
  column-gap: 10px;
}

/* =========================================================
   DEVIL'S BLOOD STORY — DARK REFERENCE MOCKUP OVERRIDE
   Paste-safe override scoped to body.dbs-reference-page.
   Keeps the shared header/footer markup, only changes this page.
   ========================================================= */

body.devils-blood-story-page.dbs-reference-page {
  --dbs-black: #050403;
  --dbs-black-2: #0a0705;
  --dbs-card: #100b08;
  --dbs-gold: #c9954f;
  --dbs-gold-soft: #e0c17c;
  --dbs-cream: #f3ead8;
  --dbs-muted: rgba(243, 234, 216, .72);
  --dbs-line: rgba(201, 149, 79, .34);
  background: var(--dbs-black);
  color: var(--dbs-cream);
}

/* This page only: black header and footer theme, while preserving transparent top state. */
body.devils-blood-story-page.dbs-reference-page .shared-site-header.header-scrolled,
body.devils-blood-story-page.dbs-reference-page .shared-site-header.header-scrolled .nav-row {
  background: rgba(5, 4, 3, .97);
  border-bottom-color: rgba(201, 149, 79, .34);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
}

body.devils-blood-story-page.dbs-reference-page .shared-footer.site-footer {
  background-color: #050403;
  background-image:
    linear-gradient(rgba(5, 4, 3, .93), rgba(5, 4, 3, .97));
}

body.devils-blood-story-page.dbs-reference-page .shared-footer__divider span {
  background: #050403;
}

body.devils-blood-story-page.dbs-reference-page .dbs-page {
  position: relative;
  overflow: visible;
  background: var(--dbs-black);
  color: var(--dbs-cream);
}

body.devils-blood-story-page.dbs-reference-page .dbs-kicker {
  margin: 0 0 12px;
  color: var(--dbs-gold);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Sticky full hero creates the same “next section comes up over the hero” feel. */
body.devils-blood-story-page.dbs-reference-page .dbs-story-hero,
body.devils-blood-story-page.dbs-reference-page .dbs-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background: #050403;
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__background {
  position: absolute;
  inset: -8vh 0;
  z-index: 0;
  overflow: hidden;
  background: #050403;
  transform: translateZ(0) scale(1.04);
  will-change: transform;
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__background img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: 66% center;
  filter: saturate(1.06) contrast(1.08);
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.78) 27%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.15) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.05) 44%, rgba(0,0,0,.9) 100%),
    radial-gradient(circle at 72% 34%, rgba(194, 89, 32, .28), transparent 36%);
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 4, 3, .45), transparent 46%),
    radial-gradient(circle at 78% 54%, rgba(201, 149, 79, .12), transparent 34%);
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy {
  position: relative;
  z-index: 2;
  width: min(520px, 43vw);
  padding: 118px 0 140px clamp(28px, 5.4vw, 92px);
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy h1 {
  margin: 0 0 18px;
  color: var(--dbs-gold-soft);
  font-family: var(--serif);
  font-size: clamp(42px, 4.7vw, 78px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: none;
  text-shadow: 0 10px 34px rgba(0,0,0,.55);
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy p:not(.dbs-kicker) {
  max-width: 430px;
  margin: 0;
  color: rgba(243, 234, 216, .82);
  font-family: var(--sans);
  font-size: clamp(12px, .85vw, 14px);
  line-height: 1.7;
}

body.devils-blood-story-page.dbs-reference-page .dbs-story-stack {
  position: relative;
  z-index: 3;
  margin-top: -18vh;
  background: transparent;
}

/* Dark three-card deck */
body.devils-blood-story-page.dbs-reference-page .dbs-pillar-deck {
  position: relative;
  z-index: 5;
  width: min(1120px, calc(100% - 7vw));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.25vw, 22px);
  padding: clamp(11px, 1vw, 16px);
  background: rgba(8, 6, 5, .82);
  border: 1px solid var(--dbs-line);
  box-shadow: 0 34px 92px rgba(0,0,0,.5);
  color: var(--dbs-cream);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-deck::before {
  display: none;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card {
  position: relative;
  min-height: clamp(310px, 25vw, 420px);
  display: flex;
  flex-direction: column;
  padding: 0 0 clamp(18px, 2vw, 28px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(31, 18, 11, .96), rgba(7, 5, 4, .98));
  border: 1px solid rgba(201, 149, 79, .26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__image {
  position: relative;
  min-height: clamp(168px, 13.5vw, 230px);
  height: clamp(168px, 13.5vw, 230px);
  margin: 0;
  overflow: hidden;
  background: #160e09;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.38));
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__image img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.05);
  transition: transform .55s ease;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card:hover .dbs-pillar-card__image img {
  transform: scale(1.035);
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin: -17px 0 14px clamp(16px, 1.5vw, 24px);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(201, 149, 79, .88);
  border-radius: 50%;
  background: #090604;
  color: var(--dbs-gold-soft);
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card h2 {
  min-height: 0;
  margin: 0 clamp(16px, 1.5vw, 24px) 9px;
  color: var(--dbs-gold-soft);
  font-family: var(--serif);
  font-size: clamp(18px, 1.45vw, 25px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .02em;
  text-transform: none;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__body {
  display: block;
  margin: 0 clamp(16px, 1.5vw, 24px);
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-icon {
  display: none;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card p {
  max-width: none;
  margin: 0;
  color: rgba(243, 234, 216, .72);
  font-family: var(--sans);
  font-size: clamp(11px, .78vw, 13px);
  line-height: 1.55;
}

/* Ageing message band */
body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band {
  position: relative;
  z-index: 4;
  min-height: clamp(240px, 21vw, 360px);
  margin: clamp(18px, 2.3vw, 38px) 0 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background: #080604;
}

body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band__background {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  overflow: hidden;
}

body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band__background img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.95) contrast(1.05);
}

body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.28) 50%, rgba(0,0,0,.86)),
    linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.7));
}

body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 30%, rgba(201, 149, 79, .18), transparent 34%);
  pointer-events: none;
}

body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band__copy {
  position: relative;
  z-index: 2;
  max-width: 980px;
  padding: 58px 24px;
  transform: none;
}

body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band h2 {
  margin: 0 0 10px;
  color: var(--dbs-gold-soft);
  font-family: var(--serif);
  font-size: clamp(30px, 3.3vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: none;
}

body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band p {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(243,234,216,.78);
  font-size: clamp(12px, .82vw, 14px);
  line-height: 1.65;
}

/* Bottle & spirit collage */
body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: .62fr 1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  padding: clamp(54px, 6vw, 96px) 7vw clamp(64px, 7vw, 110px);
  background:
    radial-gradient(circle at 52% 16%, rgba(201, 149, 79, .13), transparent 35%),
    linear-gradient(180deg, #050403 0%, #0a0705 100%);
  border-top: 1px solid rgba(201,149,79,.16);
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__intro {
  max-width: 470px;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit h2 {
  margin: 0 0 18px;
  color: var(--dbs-gold-soft);
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 50px);
  font-weight: 400;
  line-height: 1;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit p:not(.dbs-kicker) {
  margin: 0;
  color: rgba(243,234,216,.76);
  font-size: clamp(12px, .86vw, 14px);
  line-height: 1.7;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__gallery {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: repeat(2, clamp(150px, 14vw, 240px));
  gap: clamp(12px, 1.2vw, 20px);
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201,149,79,.28);
  background: #130d09;
  box-shadow: 0 26px 70px rgba(0,0,0,.36);
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card--large {
  grid-row: 1 / span 2;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.42));
  pointer-events: none;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center;
}

body.devils-blood-story-page.dbs-reference-page .dbs-detail-gallery,
body.devils-blood-story-page.dbs-reference-page .dbs-collection-nav {
  display: none !important;
}

@media (max-width: 980px) {
  body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy {
    width: min(560px, 72vw);
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-deck {
    width: min(720px, calc(100% - 40px));
    grid-template-columns: 1fr;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card {
    min-height: 0;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__image {
    height: 240px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body.devils-blood-story-page.dbs-reference-page .dbs-story-hero,
  body.devils-blood-story-page.dbs-reference-page .dbs-hero {
    position: relative;
    min-height: 720px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-hero__background img {
    object-position: 70% center;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy {
    width: auto;
    padding: 126px 28px 170px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy h1 {
    font-size: 42px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-story-stack {
    margin-top: -120px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-deck {
    width: calc(100% - 28px);
    padding: 12px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__image {
    height: 190px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band {
    min-height: 300px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit {
    padding: 52px 22px 70px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card,
  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card--large {
    grid-row: auto;
    min-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.devils-blood-story-page.dbs-reference-page .dbs-story-hero,
  body.devils-blood-story-page.dbs-reference-page .dbs-hero {
    position: relative;
  }
}



/* =========================================================
   DEVIL'S BLOOD STORY — FULL HERO + SEPARATE FULL-WIDTH CARDS
   Requested update:
   1) hero remains its own full banner
   2) three cards sit in their own black section under hero
   3) sticky hero creates the same product-page style reveal/parallax feel
   4) Bottle & The Spirit returns to a three-image row layout
   ========================================================= */

body.devils-blood-story-page.dbs-reference-page {
  background: #050403;
}

body.devils-blood-story-page.dbs-reference-page .dbs-page {
  overflow-x: hidden;
  background: #050403;
}

/* Full standalone banner. Nothing overlaps it at page load. */
body.devils-blood-story-page.dbs-reference-page .dbs-story-hero,
body.devils-blood-story-page.dbs-reference-page .dbs-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  background: #050403;
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__background {
  inset: -10vh 0;
  transform: scale(1.04);
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__background img {
  object-fit: cover;
  object-position: 68% center;
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__background::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.78) 26%, rgba(0,0,0,.32) 58%, rgba(0,0,0,.16) 100%),
    linear-gradient(180deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,.06) 44%, rgba(0,0,0,.86) 100%),
    radial-gradient(circle at 72% 34%, rgba(194, 89, 32, .27), transparent 36%);
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy {
  width: min(560px, 44vw);
  padding: 128px 0 110px clamp(34px, 5.4vw, 96px);
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy h1 {
  font-size: clamp(46px, 5.2vw, 86px);
}

/* This is the section that now scrolls up over the sticky hero. */
body.devils-blood-story-page.dbs-reference-page .dbs-story-stack {
  position: relative;
  z-index: 4;
  margin-top: 0 !important;
  background: #050403;
  box-shadow: 0 -44px 96px rgba(0, 0, 0, .68);
}

/* Three-card section: full-width black band below the hero. */
body.devils-blood-story-page.dbs-reference-page .dbs-pillar-deck,
body.devils-blood-story-page.dbs-reference-page .dbs-pillar-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(32px, 4vw, 62px) clamp(22px, 3.4vw, 64px) clamp(46px, 5vw, 84px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.45vw, 28px);
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 149, 79, .08), transparent 36%),
    linear-gradient(180deg, #050403 0%, #070504 100%);
  border: 0;
  border-top: 1px solid rgba(201, 149, 79, .26);
  border-bottom: 1px solid rgba(201, 149, 79, .24);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card {
  min-height: clamp(430px, 33vw, 610px);
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(25, 14, 8, .98) 0%, rgba(8, 5, 4, .99) 100%);
  border: 1px solid rgba(201, 149, 79, .35);
  box-shadow:
    0 26px 76px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(255,255,255,.025);
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__image {
  height: clamp(250px, 20vw, 370px);
  min-height: clamp(250px, 20vw, 370px);
  flex: 0 0 auto;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__number {
  width: 42px;
  height: 42px;
  margin: -21px 0 16px clamp(22px, 2vw, 34px);
  font-size: 13px;
  background: #080503;
  border-color: rgba(201, 149, 79, .92);
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card h2 {
  margin: 0 clamp(22px, 2vw, 34px) 12px;
  color: var(--dbs-gold-soft);
  font-size: clamp(25px, 2.15vw, 38px);
  line-height: 1.02;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__body {
  margin: 0 clamp(22px, 2vw, 34px) clamp(24px, 2vw, 36px);
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card p {
  font-size: clamp(13px, .92vw, 16px);
  line-height: 1.65;
  color: rgba(243, 234, 216, .76);
}

/* Keep the ageing band after the cards as a cinematic divider. */
body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band {
  margin: 0;
  min-height: clamp(280px, 26vw, 430px);
  border-top: 0;
  border-bottom: 1px solid rgba(201, 149, 79, .20);
}

body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band h2 {
  font-size: clamp(36px, 4.2vw, 70px);
}

/* Bottle & The Spirit: top text with three equal images side by side. */
body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit {
  display: block;
  padding: clamp(48px, 5vw, 84px) clamp(22px, 4vw, 72px) clamp(58px, 6vw, 100px);
  background:
    radial-gradient(circle at 50% 18%, rgba(201, 149, 79, .11), transparent 30%),
    linear-gradient(180deg, #070504 0%, #050403 100%);
  border-top: 1px solid rgba(201,149,79,.18);
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__intro {
  max-width: 820px;
  margin: 0 auto clamp(24px, 3vw, 46px);
  text-align: center;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit h2 {
  margin: 0 0 10px;
  font-size: clamp(34px, 3.7vw, 62px);
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit p:not(.dbs-kicker) {
  max-width: 680px;
  margin: 0 auto;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__gallery {
  width: min(1440px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  gap: clamp(12px, 1.2vw, 22px);
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card,
body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card--large {
  grid-row: auto;
  min-height: clamp(230px, 18vw, 340px);
  height: clamp(230px, 18vw, 340px);
  border: 1px solid rgba(201,149,79,.30);
  background: #120c08;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card--large img {
  object-position: 58% center;
}

@media (max-width: 980px) {
  body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy {
    width: min(620px, 74vw);
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-deck,
  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-section {
    grid-template-columns: 1fr;
    padding: 34px 24px 48px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card {
    min-height: 0;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__image {
    height: clamp(260px, 42vw, 410px);
    min-height: clamp(260px, 42vw, 410px);
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__gallery {
    grid-template-columns: 1fr;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card,
  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card--large {
    height: clamp(250px, 48vw, 430px);
  }
}

@media (max-width: 620px) {
  body.devils-blood-story-page.dbs-reference-page .dbs-story-hero,
  body.devils-blood-story-page.dbs-reference-page .dbs-hero {
    position: relative;
    min-height: 720px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-hero__background img {
    object-position: 70% center;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy {
    width: auto;
    padding: 126px 28px 96px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy h1 {
    font-size: 46px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-deck,
  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-section {
    padding: 22px 14px 36px;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__image {
    height: 210px;
    min-height: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.devils-blood-story-page.dbs-reference-page .dbs-story-hero,
  body.devils-blood-story-page.dbs-reference-page .dbs-hero {
    position: relative;
  }
}

/* =========================================================
   FINAL DEVIL'S BLOOD STORY POLISH — STICKY CURTAIN + CARDS
   Requested update:
   - Hero stays as a full standalone banner.
   - Next sections rise over the hero like the product pages.
   - Pillar cards feel more premium/floating and sit tighter.
   - Crafted Character gets larger images and a gold footer divider.
   ========================================================= */

body.devils-blood-story-page.dbs-reference-page {
  background: #050403;
}

@supports (overflow: clip) {
  body.devils-blood-story-page.dbs-reference-page {
    overflow-x: clip;
  }
}

/* Important: sticky/parallax-style reveal breaks if a parent has overflow hidden/auto. */
body.devils-blood-story-page.dbs-reference-page .dbs-page {
  position: relative;
  overflow: visible !important;
  background: #050403;
}

/* Match Devil's Blood product page black header/footer only on this story page. */
body.devils-blood-story-page.dbs-reference-page .shared-site-header.header-scrolled,
body.devils-blood-story-page.dbs-reference-page .shared-site-header.header-scrolled .nav-row {
  background: rgba(0, 0, 0, .96) !important;
  border-bottom-color: rgba(201, 149, 79, .36) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .44) !important;
}

body.devils-blood-story-page.dbs-reference-page .shared-footer.site-footer {
  background-color: #030303 !important;
  background-image:
    linear-gradient(rgba(3, 3, 3, .94), rgba(3, 3, 3, .98)) !important;
  border-top: 1px solid rgba(201, 149, 79, .44) !important;
}

body.devils-blood-story-page.dbs-reference-page .shared-footer__divider span {
  background: #030303 !important;
}

/* Desktop curtain reveal: this is the same idea as the product-page hero/story effect. */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  body.devils-blood-story-page.dbs-reference-page .dbs-story-hero,
  body.devils-blood-story-page.dbs-reference-page .dbs-hero {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: translateZ(0);
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-story-stack {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
    background: #050403 !important;
    box-shadow: 0 -46px 120px rgba(0, 0, 0, .78);
  }
}

/* Keep mobile simpler and avoid sticky bugs on smaller screens. */
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  body.devils-blood-story-page.dbs-reference-page .dbs-story-hero,
  body.devils-blood-story-page.dbs-reference-page .dbs-hero {
    position: relative !important;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-story-stack {
    margin-top: 0 !important;
  }
}

/* Hero stays clean and full-height, with the image placed like a product-page banner. */
body.devils-blood-story-page.dbs-reference-page .dbs-story-hero,
body.devils-blood-story-page.dbs-reference-page .dbs-hero {
  background: #050403 !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__background {
  position: absolute !important;
  inset: -9vh 0 !important;
  z-index: 0 !important;
  transform: translateZ(0) scale(1.035) !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__background img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: 70% center !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__shade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .78) 27%, rgba(0, 0, 0, .34) 60%, rgba(0, 0, 0, .12) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .44) 0%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .88) 100%),
    radial-gradient(circle at 74% 35%, rgba(194, 89, 32, .28), transparent 38%) !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy {
  width: min(560px, 44vw) !important;
  padding: 128px 0 110px clamp(34px, 5.4vw, 96px) !important;
}

/* Floating cards section. The dark band fills the viewport, while the cards sit tighter and float. */
body.devils-blood-story-page.dbs-reference-page .dbs-pillar-deck,
body.devils-blood-story-page.dbs-reference-page .dbs-pillar-section {
  position: relative !important;
  isolation: isolate;
  z-index: 3;
  width: min(94vw, 1780px) !important;
  max-width: 1780px !important;
  margin: 0 auto !important;
  padding: clamp(24px, 2.8vw, 42px) 0 clamp(28px, 3vw, 46px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.25vw, 22px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-deck::before,
body.devils-blood-story-page.dbs-reference-page .dbs-pillar-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% -8%, rgba(201, 149, 79, .12), transparent 34%),
    linear-gradient(180deg, #050403 0%, #060403 58%, #050403 100%);
  border-top: 1px solid rgba(201, 149, 79, .26);
  border-bottom: 1px solid rgba(201, 149, 79, .24);
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card {
  min-height: clamp(400px, 31vw, 570px) !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(25, 14, 8, .97) 0%, rgba(8, 5, 4, .995) 100%) !important;
  border: 1px solid rgba(201, 149, 79, .40) !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .50),
    0 0 0 1px rgba(255, 255, 255, .025) inset,
    0 0 34px rgba(201, 149, 79, .055) !important;
  transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card:hover {
  transform: translateY(-5px);
  border-color: rgba(224, 193, 124, .58) !important;
  box-shadow:
    0 38px 110px rgba(0, 0, 0, .58),
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 0 46px rgba(201, 149, 79, .09) !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__image {
  height: clamp(230px, 18vw, 340px) !important;
  min-height: clamp(230px, 18vw, 340px) !important;
  background: #120b07 !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__number {
  width: 42px !important;
  height: 42px !important;
  margin: -21px 0 16px clamp(20px, 1.8vw, 34px) !important;
  background: #080503 !important;
  border-color: rgba(224, 193, 124, .90) !important;
  color: #e0c17c !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card h2 {
  margin: 0 clamp(20px, 1.8vw, 34px) 12px !important;
  color: #e0c17c !important;
  font-size: clamp(25px, 2.05vw, 38px) !important;
  line-height: 1.04 !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__body {
  margin: 0 clamp(20px, 1.8vw, 34px) clamp(22px, 2vw, 34px) !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card p {
  color: rgba(243, 234, 216, .78) !important;
  font-size: clamp(13px, .9vw, 16px) !important;
  line-height: 1.62 !important;
}

/* Pull the next cinematic band closer to the cards. */
body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band {
  margin: 0 !important;
  min-height: clamp(260px, 23vw, 390px) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(201, 149, 79, .24) !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band__copy {
  padding: 44px 24px !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-ageing-band h2 {
  margin-bottom: 10px !important;
  font-size: clamp(34px, 4vw, 68px) !important;
}

/* Crafted Character: closer to the supplied reference, with larger images and a footer divider. */
body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit {
  display: block !important;
  padding: clamp(38px, 4.4vw, 72px) clamp(16px, 3vw, 54px) clamp(48px, 5.4vw, 88px) !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(201, 149, 79, .12), transparent 28%),
    linear-gradient(180deg, #060403 0%, #050403 100%) !important;
  border-top: 1px solid rgba(201, 149, 79, .22) !important;
  border-bottom: 1px solid rgba(201, 149, 79, .50) !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__intro {
  max-width: 880px !important;
  margin: 0 auto clamp(20px, 2.4vw, 36px) !important;
  text-align: center !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit h2 {
  margin: 0 0 10px !important;
  color: #e0c17c !important;
  font-size: clamp(40px, 4.2vw, 76px) !important;
  line-height: .98 !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__gallery {
  width: min(96vw, 1680px) !important;
  max-width: 1680px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  padding: 0 !important;
  background: rgba(201, 149, 79, .36) !important;
  border: 1px solid rgba(201, 149, 79, .38) !important;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .36) !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card,
body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card--large {
  grid-row: auto !important;
  height: clamp(300px, 24vw, 455px) !important;
  min-height: clamp(300px, 24vw, 455px) !important;
  border: 0 !important;
  background: #0e0906 !important;
  box-shadow: none !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .20)) !important;
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card img,
body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card--large img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(1.04) contrast(1.04) brightness(.94);
}

body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card--large img {
  object-position: 58% center !important;
}

/* Responsive clean-up. */
@media (max-width: 980px) {
  body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy {
    width: min(620px, 76vw) !important;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-deck,
  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-section {
    width: min(760px, calc(100% - 32px)) !important;
    grid-template-columns: 1fr !important;
    padding: 28px 0 38px !important;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card {
    min-height: 0 !important;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__image {
    height: clamp(250px, 42vw, 410px) !important;
    min-height: clamp(250px, 42vw, 410px) !important;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__gallery {
    width: min(760px, calc(100% - 20px)) !important;
    grid-template-columns: 1fr !important;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card,
  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit__card--large {
    height: clamp(250px, 48vw, 430px) !important;
    min-height: clamp(250px, 48vw, 430px) !important;
  }
}

@media (max-width: 620px) {
  body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy {
    width: auto !important;
    padding: 126px 26px 96px !important;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-hero__copy h1 {
    font-size: 46px !important;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-deck,
  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-section {
    width: calc(100% - 24px) !important;
    padding: 22px 0 32px !important;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-pillar-card__image {
    height: 210px !important;
    min-height: 210px !important;
  }

  body.devils-blood-story-page.dbs-reference-page .dbs-bottle-spirit {
    padding: 42px 12px 56px !important;
  }
}

/* =========================================================
   GLOBAL ORNAMENT FIX — GOLD LINE + HEMP LEAF
   Applies anywhere the older red diamond divider appears.
   ========================================================= */
.serve-drawer__rule,
.serve-drawer.serve-drawer--luxury .serve-drawer__rule {
  color: var(--gold2) !important;
}

.serve-drawer__rule::before,
.serve-drawer__rule::after,
.serve-drawer.serve-drawer--luxury .serve-drawer__rule::before,
.serve-drawer.serve-drawer--luxury .serve-drawer__rule::after {
  background: linear-gradient(90deg, transparent, var(--gold2), transparent) !important;
  opacity: .9 !important;
}

.serve-drawer__rule span,
.serve-drawer.serve-drawer--luxury .serve-drawer__rule span {
  width: 25px !important;
  height: 25px !important;
  margin: 0 13px !important;
  border: 0 !important;
  transform: none !important;
  background: url("../icons/leaf.svg") center / contain no-repeat !important;
  filter: sepia(1) saturate(4) hue-rotate(358deg) brightness(1.08) !important;
}

.serve-drawer__rule span::after,
.serve-drawer.serve-drawer--luxury .serve-drawer__rule span::after {
  display: none !important;
}

/* =========================================================
   BITCOIN STORY PAGE — BLUE / GOLD COLLECTOR STORY
   Add this block to the end of assets/css/styles.css.
   Page file: bitcoin-story.html
   ========================================================= */

body.bitcoin-story-page {
  --btc-deep: #030914;
  --btc-deep-2: #050c18;
  --btc-panel: #071120;
  --btc-panel-2: #0a1423;
  --btc-gold: #c99a37;
  --btc-gold-soft: #e4c47c;
  --btc-cream: #f4ead6;
  --btc-muted: rgba(244, 234, 214, .74);
  --btc-line: rgba(201, 154, 55, .38);
  background: var(--btc-deep);
  color: var(--btc-cream);
}

body.bitcoin-story-page .btc-story-main {
  position: relative;
  overflow: visible;
  background: var(--btc-deep);
  color: var(--btc-cream);
}

@supports (overflow: clip) {
  body.bitcoin-story-page {
    overflow-x: clip;
  }
}

/* Bitcoin story keeps the shared site shell, but uses Bitcoin blue/gold when the header is scrolled. */
body.bitcoin-story-page .shared-site-header.header-scrolled,
body.bitcoin-story-page .shared-site-header.header-scrolled .nav-row {
  background: rgba(3, 9, 20, .97) !important;
  border-bottom-color: rgba(201, 154, 55, .42) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .44) !important;
}

body.bitcoin-story-page .shared-footer.site-footer {
  background-color: #030914 !important;
  background-image:
    linear-gradient(rgba(3, 9, 20, .93), rgba(3, 9, 20, .98)) !important;
  border-top: 1px solid rgba(201, 154, 55, .44) !important;
}

body.bitcoin-story-page .shared-footer__divider span {
  background: #030914 !important;
}

body.bitcoin-story-page .shared-footer__column,
body.bitcoin-story-page .shared-footer__brand {
  border-color: rgba(201, 154, 55, .42) !important;
}

body.bitcoin-story-page .shared-footer__column h4::after,
body.bitcoin-story-page .shared-footer__divider::before {
  background: rgba(201, 154, 55, .72) !important;
}

.btc-story-kicker {
  margin: 0 0 12px;
  color: var(--btc-gold);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .24em;
  line-height: 1.2;
  text-transform: uppercase;
}

.btc-story-ornament {
  width: min(290px, 78%);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 17px 0 20px;
  color: var(--btc-gold);
}

.btc-story-ornament span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, currentColor);
}

.btc-story-ornament span:last-child {
  background: linear-gradient(90deg, currentColor, transparent);
}

.btc-story-ornament svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .94;
}

/* Sticky hero: the next section rises over this like the product pages. */
.btc-story-hero {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background: var(--btc-deep);
}

.btc-story-hero__background {
  position: absolute;
  inset: -8vh 0;
  z-index: 0;
  transform: translateZ(0) scale(1.03);
}

.btc-story-placeholder {
  width: 100%;
  height: 100%;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 38%, rgba(201, 154, 55, .28), transparent 28%),
    linear-gradient(135deg, rgba(13, 24, 43, .96), rgba(4, 9, 17, .98) 52%, rgba(21, 14, 5, .92));
}

.btc-story-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 43%, rgba(255,255,255,.05) 44%, transparent 45%),
    radial-gradient(circle at 82% 22%, rgba(255, 215, 126, .2), transparent 11%);
  opacity: .65;
}

.btc-story-placeholder::after {
  content: "Image placeholder";
  position: absolute;
  left: 18px;
  bottom: 14px;
  color: rgba(228, 196, 124, .58);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.btc-story-placeholder--hero {
  min-height: 100%;
  background:
    radial-gradient(circle at 76% 48%, rgba(201, 154, 55, .42), transparent 24%),
    radial-gradient(circle at 63% 46%, rgba(228, 196, 124, .20), transparent 18%),
    linear-gradient(90deg, #030914 0%, #06101f 48%, #120d05 100%);
}

.btc-story-placeholder--hero::after {
  content: "Hero image placeholder";
  left: auto;
  right: 38px;
  bottom: 34px;
}

.btc-story-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 9, 20, .96) 0%, rgba(3, 9, 20, .78) 31%, rgba(3, 9, 20, .28) 66%, rgba(3, 9, 20, .16) 100%),
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, transparent 45%, rgba(0,0,0,.76) 100%);
}

.btc-story-hero__content {
  position: relative;
  z-index: 2;
  width: min(560px, 46vw);
  padding: 128px 0 120px clamp(34px, 5.4vw, 96px);
}

.btc-story-hero h1 {
  margin: 0;
  color: var(--btc-gold-soft);
  font-family: var(--serif);
  font-size: clamp(44px, 4.8vw, 78px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.04em;
  text-shadow: 0 10px 34px rgba(0,0,0,.55);
}

.btc-story-hero p:not(.btc-story-kicker) {
  max-width: 430px;
  margin: 0 0 14px;
  color: var(--btc-muted);
  font-size: clamp(13px, .92vw, 16px);
  line-height: 1.65;
}

.btc-story-stack {
  position: relative;
  z-index: 2;
  background: var(--btc-deep);
  box-shadow: 0 -46px 120px rgba(0,0,0,.76);
}

.btc-story-card-section {
  width: min(94vw, 1740px);
  margin: 0 auto;
  padding: clamp(26px, 3vw, 54px) 0 clamp(30px, 3.8vw, 66px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.25vw, 22px);
}

.btc-story-card {
  position: relative;
  min-height: clamp(440px, 34vw, 610px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(9, 17, 30, .98), rgba(3, 7, 13, .99));
  border: 1px solid rgba(201, 154, 55, .50);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .50),
    inset 0 0 0 1px rgba(255,255,255,.025);
  transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.btc-story-card:hover {
  transform: translateY(-5px);
  border-color: rgba(228, 196, 124, .68);
  box-shadow:
    0 38px 112px rgba(0,0,0,.58),
    0 0 46px rgba(201, 154, 55, .09);
}

.btc-story-card__image {
  height: clamp(235px, 18.5vw, 350px);
  background: #08111e;
}

.btc-story-card__image .btc-story-placeholder::after {
  content: "Story image placeholder";
}

.btc-story-card__number {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: -24px 0 18px clamp(22px, 2vw, 34px);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(201, 154, 55, .95);
  border-radius: 50%;
  background: #050a12;
  color: var(--btc-gold-soft);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
}

.btc-story-card h2 {
  margin: 0 clamp(22px, 2vw, 34px) 13px;
  color: var(--btc-gold-soft);
  font-family: var(--serif);
  font-size: clamp(28px, 2.2vw, 40px);
  font-weight: 400;
  line-height: 1.03;
}

.btc-story-card p {
  margin: 0 clamp(22px, 2vw, 34px) clamp(24px, 2vw, 36px);
  color: var(--btc-muted);
  font-size: clamp(13px, .92vw, 16px);
  line-height: 1.62;
}

.btc-story-band {
  position: relative;
  min-height: clamp(300px, 28vw, 460px);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid rgba(201, 154, 55, .32);
  border-bottom: 1px solid rgba(201, 154, 55, .32);
  background: #040914;
}

.btc-story-band__background {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
}

.btc-story-placeholder--wide {
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 35%, rgba(201,154,55,.25), transparent 22%),
    linear-gradient(90deg, #030914, #091321 50%, #030914);
}

.btc-story-placeholder--wide::after {
  content: "Wide background placeholder";
  left: 50%;
  transform: translateX(-50%);
}

.btc-story-band__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3,9,20,.88), rgba(3,9,20,.32) 50%, rgba(3,9,20,.88)),
    linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.72));
}

.btc-story-band__content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 54px 24px;
}

.btc-story-band h2 {
  margin: 0;
  color: var(--btc-gold-soft);
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 70px);
  font-weight: 400;
  line-height: 1;
}

.btc-story-band .btc-story-ornament {
  margin-left: auto;
  margin-right: auto;
}

.btc-story-band p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--btc-muted);
  font-size: clamp(13px, .95vw, 16px);
  line-height: 1.65;
}

.btc-story-experience {
  padding: clamp(48px, 5vw, 82px) clamp(22px, 4vw, 72px) clamp(58px, 6vw, 100px);
  background:
    radial-gradient(circle at 50% 10%, rgba(201,154,55,.13), transparent 30%),
    linear-gradient(180deg, var(--btc-deep-2), var(--btc-deep));
  border-bottom: 1px solid rgba(201, 154, 55, .55);
}

.btc-story-experience__intro {
  max-width: 820px;
  margin: 0 auto clamp(24px, 3vw, 46px);
  text-align: center;
}

.btc-story-experience h2 {
  margin: 0 0 10px;
  color: var(--btc-gold-soft);
  font-family: var(--serif);
  font-size: clamp(36px, 3.8vw, 64px);
  font-weight: 400;
  line-height: 1;
}

.btc-story-experience__intro p:not(.btc-story-kicker) {
  max-width: 700px;
  margin: 0 auto;
  color: var(--btc-muted);
  font-size: 14px;
  line-height: 1.65;
}

.btc-story-experience__grid {
  width: min(96vw, 1640px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(360px, 1.2fr) minmax(290px, .82fr);
  gap: clamp(12px, 1.2vw, 22px);
  align-items: stretch;
}

.btc-story-profile-card,
.btc-story-technical-card,
.btc-story-showcase-card {
  border: 1px solid rgba(201,154,55,.40);
  background: rgba(4, 9, 18, .82);
  box-shadow: 0 26px 76px rgba(0,0,0,.32);
}

.btc-story-profile-card,
.btc-story-technical-card {
  padding: clamp(24px, 2.4vw, 38px);
}

.btc-story-profile-card h3,
.btc-story-technical-card h3 {
  margin: 0 0 22px;
  color: var(--btc-gold-soft);
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 28px);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.btc-story-profile-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 15px;
}

.btc-story-profile-card li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
}

.btc-story-profile-card li span {
  color: var(--btc-gold);
  font-size: 23px;
  line-height: 1;
  text-align: center;
}

.btc-story-profile-card li p {
  margin: 0;
  color: var(--btc-muted);
  font-size: 14px;
  line-height: 1.45;
}

.btc-story-showcase-card {
  min-height: clamp(330px, 24vw, 460px);
  overflow: hidden;
}

.btc-story-placeholder--showcase {
  min-height: 100%;
  background:
    radial-gradient(circle at 52% 36%, rgba(201,154,55,.36), transparent 20%),
    linear-gradient(135deg, #06101e, #02050a 55%, #141005);
}

.btc-story-placeholder--showcase::after {
  content: "Bottle + glass placeholder";
}

.btc-story-technical-card dl {
  margin: 0;
  display: grid;
  gap: 16px;
}

.btc-story-technical-card dl div {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(201,154,55,.20);
}

.btc-story-technical-card dl div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.btc-story-technical-card dt {
  margin: 0 0 5px;
  color: var(--btc-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.btc-story-technical-card dd {
  margin: 0;
  color: var(--btc-muted);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .btc-story-experience__grid {
    grid-template-columns: 1fr;
  }

  .btc-story-showcase-card {
    min-height: 360px;
  }
}

@media (max-width: 980px) {
  .btc-story-hero__content {
    width: min(620px, 76vw);
  }

  .btc-story-card-section {
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 32px));
  }

  .btc-story-card {
    min-height: 0;
  }

  .btc-story-card__image {
    height: clamp(250px, 42vw, 410px);
  }
}

@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .btc-story-hero {
    position: relative;
    min-height: 760px;
  }
}

@media (max-width: 620px) {
  .btc-story-hero__content {
    width: auto;
    padding: 126px 26px 96px;
  }

  .btc-story-hero h1 {
    font-size: 44px;
  }

  .btc-story-card-section {
    width: calc(100% - 24px);
    padding: 22px 0 32px;
  }

  .btc-story-card__image {
    height: 210px;
  }

  .btc-story-experience {
    padding: 42px 12px 56px;
  }
}



/* =========================================================
   BITCOIN STORY IMAGE PLACEMENTS — ACTUAL IMAGE ASSETS
   These replace the placeholder blocks on bitcoin-story.html.
   Required files in assets/img/:
   - bitcoinHero.png
   - btc-gallery-4.png
   - btc-gallery-2.png
   - btc-gallery-3.png
   - DBWAgedBanner.jpeg
   ========================================================= */

body.bitcoin-story-page .btc-story-image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Main story banner */
body.bitcoin-story-page .btc-story-image--hero {
  background-image: url("../img/bitcoinHero.png");
  background-position: center center;
  background-size: cover;
}

/* Full-width aged / barrel band background */
body.bitcoin-story-page .btc-story-image--band {
  background-image: url("../img/DBWAgedBanner.jpeg");
  background-position: center center;
  background-size: cover;
  transform: scale(1.04);
}

/* Three story card images */
body.bitcoin-story-page .btc-story-card__image {
  overflow: hidden;
  background: #050914;
}

body.bitcoin-story-page .btc-story-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.04);
  transition: transform .55s ease;
}

body.bitcoin-story-page .btc-story-card:hover .btc-story-card__image img {
  transform: scale(1.035);
}

/* Showcase card uses a zoomed-in crop of bitcoinHero.png */
body.bitcoin-story-page .btc-story-showcase-card {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, 27vw, 520px);
}

body.bitcoin-story-page .btc-story-image--showcase {
  background-image: url("../img/bitcoinHero.png");
  background-size: 155%;
  background-position: 58% center;
  filter: saturate(1.08) contrast(1.06);
  transition: transform .55s ease;
}

body.bitcoin-story-page .btc-story-showcase-card:hover .btc-story-image--showcase {
  transform: scale(1.035);
}

@media (max-width: 980px) {
  body.bitcoin-story-page .btc-story-image--showcase {
    background-size: cover;
    background-position: center;
  }
}


/* =========================================================
   FOUR20 STORY PAGE — PURITY, REFINED
   Add this block at the END of assets/css/styles.css.
   Scoped to body.four20-story-page so the home page, product pages,
   Bitcoin story, and Devil's Blood story stay untouched.
   ========================================================= */

body.four20-story-page {
  --f20s-green: #083a2b;
  --f20s-deep: #032016;
  --f20s-forest: #0f4a37;
  --f20s-cream: #fbf6ea;
  --f20s-paper: #fffaf0;
  --f20s-gold: #b89452;
  --f20s-soft-gold: #d7bf82;
  --f20s-ink: #0d3a2c;
  --f20s-text: #243a32;
  --f20s-muted: #617066;
  --f20s-line: rgba(184, 148, 82, .38);
  background: var(--f20s-cream);
  color: var(--f20s-text);
}

body.four20-story-page .shared-site-header.header-scrolled,
body.four20-story-page .shared-site-header.header-scrolled .nav-row {
  background: rgba(6, 48, 35, .97);
  border-bottom-color: rgba(215, 191, 130, .36);
}

body.four20-story-page .shared-footer,
body.four20-story-page .site-footer,
body.four20-story-page .luxury-footer {
  background-color: var(--f20s-deep) !important;
  background-image:
    linear-gradient(rgba(3, 32, 22, .91), rgba(3, 32, 22, .97)) !important;
  background-position: center !important;
  background-size: cover !important;
}

body.four20-story-page .shared-footer__column h4,
body.four20-story-page .shared-footer__column a:hover,
body.four20-story-page .shared-footer__icon,
body.four20-story-page .shared-footer__contact svg {
  color: var(--f20s-soft-gold) !important;
}

body.four20-story-page .shared-footer__divider::before {
  background: rgba(215, 191, 130, .58) !important;
}

body.four20-story-page .shared-footer__divider span {
  border-color: var(--f20s-gold) !important;
  background: var(--f20s-deep) !important;
}

body.four20-story-page .f20-story-main {
  overflow: clip;
  background: var(--f20s-cream);
}

body.four20-story-page .f20-story-kicker {
  margin: 0 0 18px;
  color: var(--f20s-gold);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .26em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.four20-story-page .f20-story-ornament,
body.four20-story-page .f20-story-card-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--f20s-gold);
}

body.four20-story-page .f20-story-ornament span,
body.four20-story-page .f20-story-card-ornament span {
  width: 78px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

body.four20-story-page .f20-story-ornament svg,
body.four20-story-page .f20-story-card-ornament svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.four20-story-page .f20-story-ornament--small {
  gap: 12px;
}

body.four20-story-page .f20-story-ornament--small span {
  width: 44px;
}

body.four20-story-page .f20-story-ornament--small svg {
  width: 25px;
  height: 25px;
}

/* ---------- Hero ---------- */

body.four20-story-page .f20-story-hero {
  position: relative;
  min-height: 760px;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--f20s-deep);
  isolation: isolate;
}

body.four20-story-page .f20-story-hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("../img/four20Hero.jpeg");
  background-position: 64% center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

body.four20-story-page .f20-story-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(4, 42, 29, .84) 0%, rgba(4, 42, 29, .56) 34%, rgba(4, 42, 29, .15) 62%, rgba(4, 42, 29, .04) 100%),
    linear-gradient(0deg, rgba(251, 246, 234, .14) 0%, rgba(251, 246, 234, 0) 38%),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,.28), transparent 31%);
}

body.four20-story-page .f20-story-hero__content {
  width: min(610px, 48vw);
  margin-left: clamp(34px, 7vw, 110px);
  padding: 128px 0 150px;
  color: #fff;
}

body.four20-story-page .f20-story-hero h1 {
  margin: 0 0 22px;
  color: rgba(255,255,255,.94);
  font-family: var(--serif);
  font-size: clamp(56px, 6.1vw, 92px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
  text-shadow: 0 18px 55px rgba(0, 0, 0, .30);
}

body.four20-story-page .f20-story-hero__content p:not(.f20-story-kicker) {
  max-width: 520px;
  margin: 0;
  color: rgba(255,255,255,.91);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.76;
  text-shadow: 0 8px 22px rgba(0,0,0,.34);
}

body.four20-story-page .f20-story-hero .f20-story-ornament {
  justify-content: flex-start;
  margin-top: 34px;
}

/* ---------- Floating story cards ---------- */

body.four20-story-page .f20-story-pillar-wrap {
  position: relative;
  z-index: 3;
  margin-top: -92px;
  padding: 0 clamp(18px, 3vw, 34px) 0;
  background: linear-gradient(180deg, rgba(251,246,234,0) 0 45px, var(--f20s-cream) 45px 100%);
}

body.four20-story-page .f20-story-pillars {
  max-width: 1460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(184, 148, 82, .55);
  border-radius: 10px;
  background: rgba(255, 250, 240, .95);
  box-shadow: 0 30px 80px rgba(8, 44, 32, .22);
}

body.four20-story-page .f20-story-pillar-card {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: grid;
  grid-template-rows: 255px 1fr;
  border: 1px solid rgba(184, 148, 82, .28);
  border-radius: 7px;
  background: rgba(255, 250, 240, .96);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

body.four20-story-page .f20-story-pillar-card__image {
  min-height: 255px;
  background-image: var(--f20s-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.01);
  filter: saturate(1.02) contrast(.98);
}

body.four20-story-page .f20-story-pillar-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 58px clamp(24px, 3vw, 44px) 30px;
  text-align: center;
}

body.four20-story-page .f20-story-pillar-card__number {
  position: absolute;
  top: -31px;
  left: 50%;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 148, 82, .68);
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf5 0 50%, #efe4ce 100%);
  color: #51452f;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  transform: translateX(-50%);
  box-shadow: 0 10px 24px rgba(39, 40, 24, .16);
}

body.four20-story-page .f20-story-pillar-card h2 {
  min-height: 62px;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #26352c;
  font-family: var(--serif);
  font-size: clamp(24px, 2.1vw, 35px);
  font-weight: 400;
  line-height: 1.05;
}

body.four20-story-page .f20-story-pillar-card p {
  max-width: 340px;
  margin: 0 auto;
  color: #35463d;
  font-size: 14px;
  line-height: 1.64;
}

body.four20-story-page .f20-story-card-ornament {
  margin-top: auto;
  padding-top: 28px;
  opacity: .52;
}

body.four20-story-page .f20-story-card-ornament span {
  width: 45px;
}

body.four20-story-page .f20-story-card-ornament svg {
  width: 26px;
  height: 26px;
}

/* ---------- Clean band ---------- */

body.four20-story-page .f20-story-clean-band {
  position: relative;
  min-height: 310px;
  display: grid;
  place-items: center;
  padding: 80px 24px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(251,246,234,.92), rgba(251,246,234,.76)),
    url("../img/f20-tasting-profile-background.png") center / cover no-repeat,
    var(--f20s-cream);
  border-top: 1px solid rgba(184, 148, 82, .18);
  border-bottom: 1px solid rgba(184, 148, 82, .20);
}

body.four20-story-page .f20-story-clean-band__image {
  position: absolute;
  z-index: 0;
  opacity: .28;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}

body.four20-story-page .f20-story-clean-band__image--left {
  left: 0;
  bottom: -42px;
  width: 38vw;
  height: 340px;
  background-image: url("../img/f20-story-leaf.png");
  background-position: left bottom;
  mix-blend-mode: multiply;
}

body.four20-story-page .f20-story-clean-band__image--right {
  right: 0;
  top: -18px;
  width: 34vw;
  height: 300px;
  background-image: url("../img/green_leaf_reflection_in_rippling_water.png");
  background-position: right center;
  opacity: .22;
}

body.four20-story-page .f20-story-clean-band__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
}

body.four20-story-page .f20-story-clean-band h2 {
  margin: 0;
  color: var(--f20s-ink);
  font-family: var(--serif);
  font-size: clamp(38px, 4.2vw, 60px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
}

body.four20-story-page .f20-story-clean-band p {
  max-width: 630px;
  margin: 16px auto 0;
  color: #3f4c43;
  font-size: 15px;
  line-height: 1.62;
}

/* ---------- Process section ---------- */

body.four20-story-page .f20-story-process {
  padding: 48px clamp(22px, 3vw, 58px) 66px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.68), transparent 38%),
    linear-gradient(180deg, #fffaf0, #f5eedf);
}

body.four20-story-page .f20-story-process__heading {
  max-width: 900px;
  margin: 0 auto 28px;
  text-align: center;
}

body.four20-story-page .f20-story-process__heading h2 {
  margin: 0;
  color: #1d3028;
  font-family: var(--serif);
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 400;
  line-height: 1.06;
}

body.four20-story-page .f20-story-process__heading p {
  margin: 8px 0 0;
  color: var(--f20s-gold);
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 28px);
  font-style: italic;
  line-height: 1.2;
}

body.four20-story-page .f20-story-process__heading .f20-story-ornament {
  margin-top: 10px;
  opacity: .7;
}

body.four20-story-page .f20-story-process__grid {
  max-width: 1460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(360px, 1.1fr) minmax(260px, .72fr);
  gap: 26px;
  align-items: stretch;
}

body.four20-story-page .f20-story-info-card {
  min-height: 505px;
  padding: 30px clamp(20px, 2vw, 32px);
  border: 1px solid rgba(184, 148, 82, .42);
  border-radius: 10px;
  background: rgba(255, 250, 240, .78);
  box-shadow: 0 24px 58px rgba(57, 58, 42, .10), inset 0 0 0 1px rgba(255,255,255,.5);
}

body.four20-story-page .f20-story-info-card h3 {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(184, 148, 82, .32);
  color: #1e332a;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

body.four20-story-page .f20-story-feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

body.four20-story-page .f20-story-feature-list li {
  display: grid;
  grid-template-columns: 33px 1fr;
  gap: 13px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(184, 148, 82, .24);
}

body.four20-story-page .f20-story-feature-list li:last-child {
  border-bottom: 0;
}

body.four20-story-page .f20-story-feature-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--f20s-gold);
}

body.four20-story-page .f20-story-feature-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.four20-story-page .f20-story-feature-list p {
  margin: 0;
  color: #2f4037;
  font-size: 12px;
  line-height: 1.35;
}

body.four20-story-page .f20-story-feature-list strong {
  color: #1f352c;
  font-weight: 800;
}

body.four20-story-page .f20-story-feature-list--tasting li {
  min-height: 64px;
}

body.four20-story-page .f20-story-feature-list--tasting p {
  font-family: var(--serif);
  font-size: 15px;
  color: #26352c;
}

body.four20-story-page .f20-story-product-card {
  margin: 0;
  min-height: 505px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(184, 148, 82, .42);
  border-radius: 10px;
  background: #f6efe2;
  box-shadow: 0 24px 58px rgba(57, 58, 42, .10), inset 0 0 0 1px rgba(255,255,255,.5);
}

body.four20-story-page .f20-story-product-card__image {
  flex: 1;
  min-height: 458px;
  background:
    linear-gradient(0deg, rgba(251,246,234,.18), rgba(251,246,234,.18)),
    url("../img/four20Hero.jpeg") center center / cover no-repeat;
}

body.four20-story-page .f20-story-product-card figcaption {
  padding: 13px 18px 16px;
  color: rgba(13, 58, 44, .75);
  font-size: 11px;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 901px) {
  body.four20-story-page .f20-story-hero__media {
    background-attachment: fixed;
  }
}

@media (max-width: 1180px) {
  body.four20-story-page .f20-story-pillars,
  body.four20-story-page .f20-story-process__grid {
    grid-template-columns: 1fr;
  }

  body.four20-story-page .f20-story-pillar-card {
    min-height: 0;
  }

  body.four20-story-page .f20-story-process__grid {
    max-width: 760px;
  }
}

@media (max-width: 820px) {
  body.four20-story-page .f20-story-hero {
    min-height: 720px;
  }

  body.four20-story-page .f20-story-hero__media {
    background-position: 62% center;
  }

  body.four20-story-page .f20-story-hero__content {
    width: auto;
    max-width: 590px;
    margin: 0;
    padding: 128px 28px 150px;
  }

  body.four20-story-page .f20-story-hero__shade {
    background:
      linear-gradient(90deg, rgba(4, 42, 29, .88), rgba(4, 42, 29, .45)),
      linear-gradient(0deg, rgba(4, 42, 29, .58), transparent 42%);
  }

  body.four20-story-page .f20-story-pillar-wrap {
    margin-top: -70px;
  }

  body.four20-story-page .f20-story-pillar-card {
    grid-template-rows: 220px 1fr;
  }

  body.four20-story-page .f20-story-pillar-card__image {
    min-height: 220px;
  }

  body.four20-story-page .f20-story-clean-band__image--left,
  body.four20-story-page .f20-story-clean-band__image--right {
    width: 70vw;
  }
}

@media (max-width: 560px) {
  body.four20-story-page .f20-story-hero h1 {
    font-size: 48px;
  }

  body.four20-story-page .f20-story-hero__content p:not(.f20-story-kicker) {
    font-size: 14px;
  }

  body.four20-story-page .f20-story-pillars {
    padding: 8px;
  }

  body.four20-story-page .f20-story-pillar-card__body {
    padding: 54px 20px 28px;
  }

  body.four20-story-page .f20-story-pillar-card h2 {
    min-height: 0;
  }

  body.four20-story-page .f20-story-clean-band h2,
  body.four20-story-page .f20-story-process__heading h2 {
    font-size: 34px;
  }

  body.four20-story-page .f20-story-process {
    padding: 38px 14px 52px;
  }

  body.four20-story-page .f20-story-info-card {
    padding: 24px 18px;
  }
}

/* =========================================================
   FOUR20 STORY PAGE — HERO + STORY-CARD LAYOUT UPDATE
   Requested:
   - Hero is its own full top banner, with no cards inside it.
   - The following sections use the same curtain/parallax reveal feel
     used by the product and story pages.
   - Image placement:
     banner: four20Hero.jpeg
     card 1: f20-gallery-4.png
     card 2: f20-gallery-2.png
     card 3: f20-gallery-5.png
     clean band: f20-tasting-profile-background.png
     showcase card: four20BottleGlass.jpeg
   ========================================================= */

body.four20-story-page {
  --f20s-green: #083a2b;
  --f20s-deep: #032016;
  --f20s-cream: #fbf6ea;
  --f20s-paper: #fffaf0;
  --f20s-gold: #b89452;
  --f20s-soft-gold: #d7bf82;
  --f20s-ink: #0d3a2c;
  --f20s-text: #243a32;
  --f20s-line: rgba(184, 148, 82, .38);
  background: var(--f20s-cream);
  color: var(--f20s-text);
}

body.four20-story-page .f20-story-main {
  overflow: visible;
  background: var(--f20s-cream);
}

/* ---------- Full banner hero ---------- */

body.four20-story-page .f20-story-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--f20s-deep);
}

body.four20-story-page .f20-story-hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("../img/four20Hero.jpeg");
  background-position: 64% center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: none;
}

body.four20-story-page .f20-story-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(4, 42, 29, .90) 0%, rgba(4, 42, 29, .64) 34%, rgba(4, 42, 29, .18) 62%, rgba(4, 42, 29, .06) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 38%),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,.18), transparent 31%);
}

body.four20-story-page .f20-story-hero__content {
  position: relative;
  z-index: 2;
  width: min(630px, 47vw);
  margin-left: clamp(34px, 7vw, 112px);
  padding: 150px 0 120px;
  color: #fff;
}

body.four20-story-page .f20-story-hero h1 {
  margin: 0 0 22px;
  color: rgba(255,255,255,.96);
  font-family: var(--serif);
  font-size: clamp(58px, 6.3vw, 98px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.035em;
  text-shadow: 0 18px 55px rgba(0, 0, 0, .38);
}

body.four20-story-page .f20-story-hero__content p:not(.f20-story-kicker) {
  max-width: 540px;
  margin: 0;
  color: rgba(255,255,255,.9);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.75;
  text-shadow: 0 8px 24px rgba(0,0,0,.40);
}

body.four20-story-page .f20-story-hero .f20-story-ornament {
  justify-content: flex-start;
  margin-top: 34px;
}

/* ---------- Curtain/parallax reveal after hero ---------- */

@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  body.four20-story-page .f20-story-hero {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  body.four20-story-page .f20-story-pillar-wrap {
    position: relative;
    z-index: 2;
    box-shadow: 0 -34px 90px rgba(3, 32, 22, .32);
  }

  body.four20-story-page .f20-story-clean-band {
    position: relative;
    z-index: 3;
  }

  body.four20-story-page .f20-story-process {
    position: relative;
    z-index: 4;
  }
}

/* ---------- Story cards: directly after hero ---------- */

body.four20-story-page .f20-story-pillar-wrap {
  margin-top: 0;
  padding: clamp(26px, 3.2vw, 52px) clamp(18px, 2.7vw, 44px);
  background:
    linear-gradient(180deg, rgba(255, 250, 240, .98), rgba(251, 246, 234, 1)),
    var(--f20s-cream);
}

body.four20-story-page .f20-story-pillars {
  max-width: 1460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(184, 148, 82, .56);
  border-radius: 9px;
  background: rgba(255, 250, 240, .96);
  box-shadow: 0 28px 76px rgba(8, 44, 32, .16);
}

body.four20-story-page .f20-story-pillar-card {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: grid;
  grid-template-rows: 255px 1fr;
  border: 1px solid rgba(184, 148, 82, .30);
  border-radius: 7px;
  background: rgba(255, 250, 240, .98);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

body.four20-story-page .f20-story-pillar-card__image {
  min-height: 255px;
  background-image: var(--f20s-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(1.04) contrast(.99);
}

body.four20-story-page .f20-story-pillar-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 58px clamp(24px, 3vw, 44px) 30px;
  text-align: center;
}

body.four20-story-page .f20-story-pillar-card__number {
  position: absolute;
  top: -31px;
  left: 50%;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 148, 82, .72);
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf5 0 50%, #efe4ce 100%);
  color: #51452f;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  transform: translateX(-50%);
  box-shadow: 0 10px 24px rgba(39, 40, 24, .16);
}

body.four20-story-page .f20-story-pillar-card h2 {
  min-height: 62px;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #26352c;
  font-family: var(--serif);
  font-size: clamp(24px, 2.1vw, 35px);
  font-weight: 400;
  line-height: 1.05;
}

body.four20-story-page .f20-story-pillar-card p {
  max-width: 350px;
  margin: 0 auto;
  color: #35463d;
  font-size: 14px;
  line-height: 1.64;
}

body.four20-story-page .f20-story-card-ornament {
  margin-top: auto;
  padding-top: 28px;
  opacity: .52;
}

/* ---------- Exceptionally clean band ---------- */

body.four20-story-page .f20-story-clean-band {
  position: relative;
  min-height: clamp(300px, 28vw, 430px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(70px, 8vw, 118px) 24px;
  background: var(--f20s-cream);
  border-top: 1px solid rgba(184, 148, 82, .20);
  border-bottom: 1px solid rgba(184, 148, 82, .24);
}

body.four20-story-page .f20-story-band__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(251, 246, 234, .92) 0%, rgba(251, 246, 234, .78) 46%, rgba(251, 246, 234, .9) 100%),
    url("../img/f20-tasting-profile-background.png") center / cover no-repeat;
  opacity: 1;
}

body.four20-story-page .f20-story-clean-band__image {
  display: none;
}

body.four20-story-page .f20-story-clean-band__content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  text-align: center;
}

body.four20-story-page .f20-story-clean-band h2 {
  margin: 0;
  color: var(--f20s-ink);
  font-family: var(--serif);
  font-size: clamp(38px, 4.2vw, 62px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
}

body.four20-story-page .f20-story-clean-band p {
  max-width: 650px;
  margin: 16px auto 0;
  color: #3f4c43;
  font-size: 15px;
  line-height: 1.62;
}

/* ---------- Bottle and finishing process ---------- */

body.four20-story-page .f20-story-process {
  padding: clamp(48px, 5vw, 78px) clamp(22px, 3vw, 58px) clamp(66px, 6vw, 96px);
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.76), transparent 38%),
    linear-gradient(180deg, #fffaf0, #f5eedf);
}

body.four20-story-page .f20-story-process__heading {
  max-width: 920px;
  margin: 0 auto 30px;
  text-align: center;
}

body.four20-story-page .f20-story-process__heading h2 {
  margin: 0;
  color: #1d3028;
  font-family: var(--serif);
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 400;
  line-height: 1.06;
}

body.four20-story-page .f20-story-process__heading p {
  margin: 8px 0 0;
  color: var(--f20s-gold);
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 28px);
  font-style: italic;
  line-height: 1.2;
}

body.four20-story-page .f20-story-process__grid {
  max-width: 1460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(360px, 1.1fr) minmax(260px, .72fr);
  gap: 26px;
  align-items: stretch;
}

body.four20-story-page .f20-story-info-card,
body.four20-story-page .f20-story-showcase-card {
  min-height: 505px;
  border: 1px solid rgba(184, 148, 82, .42);
  border-radius: 10px;
  background: rgba(255, 250, 240, .78);
  box-shadow: 0 24px 58px rgba(57, 58, 42, .10), inset 0 0 0 1px rgba(255,255,255,.5);
}

body.four20-story-page .f20-story-info-card {
  padding: 30px clamp(20px, 2vw, 32px);
}

body.four20-story-page .f20-story-info-card h3 {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(184, 148, 82, .32);
  color: #1e332a;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

body.four20-story-page .f20-story-showcase-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f6efe2;
}

body.four20-story-page .f20-story-showcase-card__image,
body.four20-story-page .f20-story-product-card__image {
  flex: 1;
  min-height: 458px;
  background:
    linear-gradient(0deg, rgba(251,246,234,.12), rgba(251,246,234,.12)),
    url("../img/four20BottleGlass.jpeg") center / cover no-repeat !important;
}

body.four20-story-page .f20-story-showcase-card figcaption {
  padding: 13px 18px 16px;
  color: rgba(13, 58, 44, .75);
  font-size: 11px;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

body.four20-story-page .f20-story-feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

body.four20-story-page .f20-story-feature-list li {
  display: grid;
  grid-template-columns: 33px 1fr;
  gap: 13px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(184, 148, 82, .24);
}

body.four20-story-page .f20-story-feature-list li:last-child {
  border-bottom: 0;
}

body.four20-story-page .f20-story-feature-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--f20s-gold);
}

body.four20-story-page .f20-story-feature-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.four20-story-page .f20-story-feature-list p {
  margin: 0;
  color: #2f4037;
  font-size: 12px;
  line-height: 1.35;
}

body.four20-story-page .f20-story-feature-list strong {
  color: #1f352c;
  font-weight: 800;
}

body.four20-story-page .f20-story-feature-list--tasting li {
  min-height: 64px;
}

body.four20-story-page .f20-story-feature-list--tasting p {
  font-family: var(--serif);
  font-size: 15px;
  color: #26352c;
}

/* Keep old product-card class supported in case another version of the HTML still uses it. */
body.four20-story-page .f20-story-product-card {
  margin: 0;
  min-height: 505px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(184, 148, 82, .42);
  border-radius: 10px;
  background: #f6efe2;
  box-shadow: 0 24px 58px rgba(57, 58, 42, .10), inset 0 0 0 1px rgba(255,255,255,.5);
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  body.four20-story-page .f20-story-pillars,
  body.four20-story-page .f20-story-process__grid {
    grid-template-columns: 1fr;
  }

  body.four20-story-page .f20-story-process__grid {
    max-width: 760px;
  }

  body.four20-story-page .f20-story-pillar-card {
    min-height: 0;
  }
}

@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  body.four20-story-page .f20-story-hero,
  body.four20-story-page .f20-story-pillar-wrap,
  body.four20-story-page .f20-story-clean-band,
  body.four20-story-page .f20-story-process {
    position: relative;
    top: auto;
    z-index: auto;
    box-shadow: none;
  }

  body.four20-story-page .f20-story-hero {
    min-height: 720px;
  }

  body.four20-story-page .f20-story-hero__media {
    background-position: 62% center;
  }

  body.four20-story-page .f20-story-hero__content {
    width: auto;
    max-width: 590px;
    margin: 0;
    padding: 128px 28px 110px;
  }

  body.four20-story-page .f20-story-hero__shade {
    background:
      linear-gradient(90deg, rgba(4, 42, 29, .88), rgba(4, 42, 29, .45)),
      linear-gradient(0deg, rgba(4, 42, 29, .58), transparent 42%);
  }

  body.four20-story-page .f20-story-pillar-card {
    grid-template-rows: 220px 1fr;
  }

  body.four20-story-page .f20-story-pillar-card__image {
    min-height: 220px;
  }
}

@media (max-width: 560px) {
  body.four20-story-page .f20-story-hero h1 {
    font-size: 48px;
  }

  body.four20-story-page .f20-story-hero__content p:not(.f20-story-kicker) {
    font-size: 14px;
  }

  body.four20-story-page .f20-story-pillars {
    padding: 8px;
  }

  body.four20-story-page .f20-story-pillar-card__body {
    padding: 54px 20px 28px;
  }

  body.four20-story-page .f20-story-pillar-card h2 {
    min-height: 0;
  }

  body.four20-story-page .f20-story-clean-band h2,
  body.four20-story-page .f20-story-process__heading h2 {
    font-size: 34px;
  }

  body.four20-story-page .f20-story-process {
    padding: 38px 14px 52px;
  }

  body.four20-story-page .f20-story-info-card {
    padding: 24px 18px;
  }
}


/* =========================================================
   FOUR20 STORY PAGE — bitcoin-style card layout override
   This keeps the Four20 cream/green/gold theme, but uses the
   same card structure as bitcoin-story: image top, number overlap,
   left-aligned title/body, tighter spacing, and real <img> support.
   Safe to remove this whole block if you want the old centered cards back.
   ========================================================= */

body.four20-story-page .f20-story-pillar-wrap {
  margin-top: 0;
  padding: clamp(26px, 3vw, 54px) clamp(18px, 3vw, 44px) clamp(34px, 3.8vw, 66px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 34%),
    linear-gradient(180deg, #fffaf0 0%, var(--f20s-cream) 100%);
}

body.four20-story-page .f20-story-pillars {
  width: min(94vw, 1740px);
  max-width: 1740px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.25vw, 22px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.four20-story-page .f20-story-pillar-card {
  position: relative;
  min-height: clamp(440px, 34vw, 610px);
  display: block;
  overflow: hidden;
  border: 1px solid rgba(184, 148, 82, .55);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, .99), rgba(248, 241, 225, .99));
  box-shadow:
    0 30px 82px rgba(8, 44, 32, .16),
    inset 0 0 0 1px rgba(255,255,255,.45);
  transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

body.four20-story-page .f20-story-pillar-card:hover {
  transform: translateY(-5px);
  border-color: rgba(215, 191, 130, .78);
  box-shadow:
    0 38px 104px rgba(8, 44, 32, .20),
    0 0 42px rgba(184, 148, 82, .12);
}

body.four20-story-page .f20-story-pillar-card__image {
  height: clamp(235px, 18.5vw, 350px);
  min-height: 0;
  width: 100%;
  overflow: hidden;
  display: block;
  background-color: rgba(8, 58, 43, .10);
  background-image: var(--f20s-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: none;
  filter: none;
}

body.four20-story-page .f20-story-pillar-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(.99);
  transition: transform .55s ease;
}

body.four20-story-page .f20-story-pillar-card:hover .f20-story-pillar-card__image img {
  transform: scale(1.035);
}

body.four20-story-page .f20-story-pillar-card__body {
  position: static;
  display: block;
  padding: 0 0 clamp(24px, 2vw, 36px);
  text-align: left;
}

body.four20-story-page .f20-story-pillar-card__number {
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
  width: 48px;
  height: 48px;
  margin: -24px 0 18px clamp(22px, 2vw, 34px);
  display: grid;
  place-items: center;
  transform: none;
  border: 1px solid rgba(184, 148, 82, .95);
  border-radius: 50%;
  background: #fffaf0;
  color: var(--f20s-ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(39, 40, 24, .14);
}

body.four20-story-page .f20-story-pillar-card h2 {
  min-height: 0;
  margin: 0 clamp(22px, 2vw, 34px) 13px;
  display: block;
  color: var(--f20s-ink);
  font-family: var(--serif);
  font-size: clamp(28px, 2.2vw, 40px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.02em;
}

body.four20-story-page .f20-story-pillar-card p {
  max-width: none;
  margin: 0 clamp(22px, 2vw, 34px);
  color: #35463d;
  font-size: clamp(13px, .92vw, 16px);
  line-height: 1.62;
}

body.four20-story-page .f20-story-card-ornament {
  display: none;
}

/* Keep the bitcoin-style cards responsive without affecting other pages. */
@media (max-width: 1180px) {
  body.four20-story-page .f20-story-pillars {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  body.four20-story-page .f20-story-pillar-card {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  body.four20-story-page .f20-story-pillar-wrap {
    padding: 28px 14px 46px;
  }

  body.four20-story-page .f20-story-pillar-card__image {
    height: 220px;
  }

  body.four20-story-page .f20-story-pillar-card h2 {
    font-size: 30px;
  }
}

/* =========================================================
   ON THE GREEN STORY PAGE — CRAFTED FOR THOSE WHO LOVE THE GAME
   Add this block at the END of assets/css/styles.css.
   Scoped to body.on-the-green-story-page so the home page,
   product pages, Bitcoin story, Four20 story, and Devil's Blood story stay untouched.
   ========================================================= */

body.on-the-green-story-page {
  --otg-deep: #06140f;
  --otg-deep-2: #0a1d16;
  --otg-green: #0d2f23;
  --otg-green-soft: #1f5b43;
  --otg-cream: #f4ead7;
  --otg-paper: #f8f0df;
  --otg-gold: #b9934f;
  --otg-gold-soft: #dcc184;
  --otg-muted: rgba(244, 234, 215, .76);
  --otg-line: rgba(185, 147, 79, .44);
  background: var(--otg-deep);
  color: var(--otg-cream);
}

body.on-the-green-story-page .otg-story-main {
  position: relative;
  overflow: visible;
  background: var(--otg-deep);
  color: var(--otg-cream);
}

@supports (overflow: clip) {
  body.on-the-green-story-page {
    overflow-x: clip;
  }
}

/* Keep the shared shell consistent, but make this story page dark green + gold. */
body.on-the-green-story-page .shared-site-header.header-scrolled,
body.on-the-green-story-page .shared-site-header.header-scrolled .nav-row,
body.on-the-green-story-page .site-header.header-scrolled,
body.on-the-green-story-page .site-header.header-scrolled .nav-row {
  background: rgba(6, 20, 15, .97) !important;
  border-bottom-color: rgba(185, 147, 79, .44) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .42) !important;
}

body.on-the-green-story-page .shared-footer.site-footer,
body.on-the-green-story-page .site-footer {
  background-color: #061f16 !important;
  background-image:
    linear-gradient(rgba(6, 31, 22, .94), rgba(4, 18, 13, .98)) !important;
  border-top: 1px solid rgba(185, 147, 79, .42) !important;
}

body.on-the-green-story-page .shared-footer__divider span {
  background: #061f16 !important;
}

body.on-the-green-story-page .shared-footer__column,
body.on-the-green-story-page .shared-footer__brand {
  border-color: rgba(185, 147, 79, .40) !important;
}

body.on-the-green-story-page .shared-footer__column h4::after,
body.on-the-green-story-page .shared-footer__divider::before {
  background: rgba(185, 147, 79, .76) !important;
}

.otg-story-kicker {
  margin: 0 0 12px;
  color: var(--otg-gold);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .24em;
  line-height: 1.2;
  text-transform: uppercase;
}

.otg-story-ornament {
  width: min(292px, 80%);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 22px;
  color: var(--otg-gold);
}

.otg-story-ornament span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, currentColor);
}

.otg-story-ornament span:last-child {
  background: linear-gradient(90deg, currentColor, transparent);
}

.otg-story-ornament svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .94;
}

.otg-story-ornament--center {
  margin-left: auto;
  margin-right: auto;
}

/* Sticky hero: next content rises over the full banner like the story/product pages. */
.otg-story-hero {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background: var(--otg-deep);
}

.otg-story-hero__background {
  position: absolute;
  inset: -8vh 0;
  z-index: 0;
  transform: translateZ(0) scale(1.03);
}

.otg-story-image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.otg-story-image--hero {
  background-image: url("../img/otgHero.png");
  background-position: center center;
}

.otg-story-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 9, 7, .96) 0%, rgba(4, 19, 14, .82) 34%, rgba(4, 19, 14, .26) 66%, rgba(4, 19, 14, .16) 100%),
    linear-gradient(180deg, rgba(0,0,0,.46) 0%, transparent 46%, rgba(0,0,0,.72) 100%);
}

.otg-story-hero__content {
  position: relative;
  z-index: 2;
  width: min(620px, 48vw);
  padding: 128px 0 118px clamp(34px, 5.3vw, 96px);
}

.otg-story-hero h1 {
  margin: 0;
  color: var(--otg-cream);
  font-family: var(--serif);
  font-size: clamp(46px, 5.1vw, 86px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-shadow: 0 10px 36px rgba(0,0,0,.56);
}

.otg-story-hero p:not(.otg-story-kicker) {
  max-width: 475px;
  margin: 0 0 15px;
  color: var(--otg-muted);
  font-size: clamp(13px, .96vw, 16px);
  line-height: 1.7;
}

.otg-story-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  border: 1px solid rgba(185,147,79,.72);
  color: var(--otg-gold-soft);
  padding: 14px 25px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform .22s ease, border-color .22s ease, color .22s ease;
}

.otg-story-button:hover {
  color: #fff1c4;
  border-color: rgba(220,193,132,.95);
  transform: translateX(6px);
}

.otg-story-stack {
  position: relative;
  z-index: 2;
  background: var(--otg-deep);
  box-shadow: 0 -48px 120px rgba(0,0,0,.78);
}

.otg-story-card-section {
  width: min(94vw, 1740px);
  margin: 0 auto;
  padding: clamp(28px, 3.2vw, 56px) 0 clamp(34px, 4vw, 72px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.25vw, 22px);
}

.otg-story-card {
  position: relative;
  min-height: clamp(470px, 35vw, 630px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 27, 21, .98), rgba(4, 12, 9, .99));
  border: 1px solid rgba(185, 147, 79, .54);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .50),
    inset 0 0 0 1px rgba(255,255,255,.025);
  transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.otg-story-card:hover {
  transform: translateY(-5px);
  border-color: rgba(220, 193, 132, .72);
  box-shadow:
    0 38px 112px rgba(0,0,0,.58),
    0 0 46px rgba(185, 147, 79, .10);
}

.otg-story-card__image {
  height: clamp(250px, 19.5vw, 360px);
  background: #071810;
  overflow: hidden;
}

.otg-story-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.05);
  transition: transform .55s ease;
}

.otg-story-card:hover .otg-story-card__image img {
  transform: scale(1.035);
}

.otg-story-card__number {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: -24px 0 18px clamp(22px, 2vw, 34px);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(185, 147, 79, .95);
  border-radius: 50%;
  background: #07140f;
  color: var(--otg-gold-soft);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
}

.otg-story-card h2 {
  margin: 0 clamp(22px, 2vw, 34px) 13px;
  color: var(--otg-cream);
  font-family: var(--serif);
  font-size: clamp(28px, 2.1vw, 40px);
  font-weight: 400;
  line-height: 1.05;
}

.otg-story-card p {
  margin: 0 clamp(22px, 2vw, 34px) clamp(24px, 2vw, 36px);
  color: var(--otg-muted);
  font-size: clamp(13px, .92vw, 16px);
  line-height: 1.62;
}

.otg-story-band {
  position: relative;
  min-height: clamp(320px, 30vw, 500px);
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid rgba(185, 147, 79, .34);
  border-bottom: 1px solid rgba(185, 147, 79, .34);
  background: #06140f;
}

.otg-story-band__background {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
}

.otg-story-image--band {
  background-image: url("../img/otg-story-glass.png");
  background-position: center center;
  background-size: cover;
  transform: scale(1.04);
}

.otg-story-band__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3,12,9,.88), rgba(3,12,9,.34) 54%, rgba(3,12,9,.80)),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.72));
}

.otg-story-band__content {
  position: relative;
  z-index: 2;
  width: min(850px, 78vw);
  padding: clamp(58px, 6vw, 92px) clamp(28px, 5.2vw, 92px);
}

.otg-story-band h2 {
  margin: 0;
  color: var(--otg-cream);
  font-family: var(--serif);
  font-size: clamp(40px, 4.6vw, 78px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.025em;
}

.otg-story-band .otg-story-subline {
  margin: 16px 0 0;
  color: var(--otg-gold-soft);
  font-family: var(--sans);
  font-size: clamp(11px, .95vw, 14px);
  font-weight: 800;
  letter-spacing: .20em;
  line-height: 1.7;
  text-transform: uppercase;
}

.otg-story-collection {
  padding: clamp(52px, 5vw, 90px) clamp(22px, 5vw, 86px) clamp(58px, 6vw, 104px);
  background:
    radial-gradient(circle at 50% 10%, rgba(185,147,79,.14), transparent 30%),
    linear-gradient(180deg, #0b2018, #06140f);
  border-bottom: 1px solid rgba(185, 147, 79, .48);
}

.otg-story-collection__heading {
  max-width: 820px;
  margin: 0 auto clamp(28px, 3vw, 48px);
  text-align: center;
}

.otg-story-collection__heading h2 {
  margin: 0;
  color: var(--otg-cream);
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 68px);
  font-weight: 400;
  line-height: 1;
}

.otg-story-collection__grid {
  width: min(96vw, 1500px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 44px);
  align-items: end;
}

.otg-story-bottle-card {
  position: relative;
  min-height: clamp(340px, 28vw, 520px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(22px, 2.4vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(185,147,79,.22);
  background: rgba(3, 12, 9, .34);
}

.otg-story-bottle-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: .64;
  transform: scale(1.04);
}

.otg-story-bottle-card:nth-child(1) .otg-story-bottle-card__image {
  background-image: url("../img/otg-gallery-1.png");
}

.otg-story-bottle-card:nth-child(2) .otg-story-bottle-card__image {
  background-image: url("../img/otg-tasting-profile-background.png");
}

.otg-story-bottle-card:nth-child(3) .otg-story-bottle-card__image {
  background-image: url("../img/otg-gallery-5.png");
}

.otg-story-bottle-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4,15,11,.10), rgba(4,15,11,.84)),
    linear-gradient(90deg, rgba(4,15,11,.72), rgba(4,15,11,.18));
}

.otg-story-bottle-card__copy {
  position: relative;
  z-index: 2;
}

.otg-story-bottle-card h3 {
  margin: 0 0 12px;
  color: var(--otg-cream);
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 400;
  line-height: 1.05;
}

.otg-story-bottle-card p {
  max-width: 290px;
  margin: 0;
  color: var(--otg-muted);
  font-size: clamp(13px, .9vw, 15px);
  line-height: 1.62;
}

.otg-story-bottle-card__rule {
  width: 48px;
  height: 1px;
  display: block;
  margin-top: 16px;
  background: var(--otg-gold);
}

.otg-story-process {
  padding: clamp(48px, 5vw, 82px) clamp(22px, 4vw, 72px) clamp(58px, 6vw, 100px);
  background:
    linear-gradient(180deg, #06140f, #081b14),
    radial-gradient(circle at 28% 24%, rgba(185,147,79,.10), transparent 32%);
  border-bottom: 1px solid rgba(185, 147, 79, .55);
}

.otg-story-process__grid {
  width: min(96vw, 1640px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(390px, 1.1fr) minmax(430px, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
  align-items: stretch;
}

.otg-story-process__image {
  min-height: clamp(370px, 30vw, 560px);
  overflow: hidden;
  border: 1px solid rgba(185,147,79,.42);
  background:
    linear-gradient(rgba(4, 15, 11, .18), rgba(4, 15, 11, .18)),
    url("../img/otgCraftsmanship.png") center / cover no-repeat;
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
}

.otg-story-process__copy {
  padding: clamp(28px, 3vw, 52px);
  border: 1px solid rgba(185,147,79,.42);
  background: rgba(3, 12, 9, .70);
  box-shadow: 0 28px 80px rgba(0,0,0,.26);
}

.otg-story-process__copy h2 {
  margin: 0 0 22px;
  color: var(--otg-cream);
  font-family: var(--serif);
  font-size: clamp(34px, 3vw, 56px);
  font-weight: 400;
  line-height: 1.04;
}

.otg-story-specs {
  margin: 24px 0 0;
  display: grid;
  gap: 0;
}

.otg-story-specs div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(185,147,79,.24);
}

.otg-story-specs dt {
  margin: 0;
  color: var(--otg-gold);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.otg-story-specs dd {
  margin: 0;
  color: var(--otg-muted);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .otg-story-process__grid {
    grid-template-columns: 1fr;
  }

  .otg-story-process__image {
    min-height: 430px;
  }
}

@media (max-width: 980px) {
  .otg-story-hero__content {
    width: min(640px, 78vw);
  }

  .otg-story-card-section,
  .otg-story-collection__grid {
    grid-template-columns: 1fr;
    width: min(780px, calc(100% - 32px));
  }

  .otg-story-card {
    min-height: 0;
  }

  .otg-story-card__image {
    height: clamp(260px, 44vw, 430px);
  }
}

@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .otg-story-hero {
    position: relative;
    min-height: 760px;
  }
}

@media (max-width: 620px) {
  .otg-story-hero__content {
    width: auto;
    padding: 126px 26px 96px;
  }

  .otg-story-hero h1 {
    font-size: 44px;
  }

  .otg-story-card-section,
  .otg-story-collection__grid {
    width: calc(100% - 24px);
  }

  .otg-story-card-section {
    padding: 22px 0 34px;
  }

  .otg-story-card__image {
    height: 220px;
  }

  .otg-story-band__content {
    width: auto;
    padding-left: 26px;
    padding-right: 26px;
  }

  .otg-story-process {
    padding: 42px 12px 56px;
  }

  .otg-story-specs div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}


/* =========================================================
   FINAL FIXES — Home Our Collections image + OTG tasting stats
   Scoped only to index.html (.home-page) and on-the-green.html.
   ========================================================= */

/* Home page: make the Our Collections pathway image show the full bottles.
   This targets only the 3rd image tile inside .brand-pathways. */
.home-page .brand-pathways > .brand-pathway:nth-of-type(3) {
  background:
    radial-gradient(circle at 55% 50%, rgba(185, 154, 93, .12), transparent 44%),
    #071812;
}

.home-page .brand-pathways > .brand-pathway:nth-of-type(3) > img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
}

.home-page .brand-pathways > .brand-pathway:nth-of-type(3):hover > img {
  transform: scale(1.035);
}

.home-page .brand-pathways > .brand-pathway:nth-of-type(3) .brand-pathway-shade {
  background:
    linear-gradient(
      90deg,
      rgba(3, 16, 12, .82) 0%,
      rgba(3, 16, 12, .52) 42%,
      rgba(3, 16, 12, .14) 100%
    );
}

/* On The Green page: move the 40% / Premium Vodka stats to the right side
   of the tasting profile section. Desktop only, so mobile keeps stacking. */
@media (min-width: 981px) {
  .devils-blood-page.on-the-green-page .dbw-tasting__inner {
    grid-template-columns: minmax(300px, .72fr) minmax(420px, 1.08fr) minmax(230px, .42fr);
    gap: clamp(34px, 4vw, 76px);
    padding-right: clamp(76px, 7vw, 140px);
  }

  .devils-blood-page.on-the-green-page .dbw-tasting__profile {
    grid-column: 1;
  }

  .devils-blood-page.on-the-green-page .dbw-tasting__stats {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    width: min(260px, 100%);
    margin-left: auto;
    text-align: center;
  }
}

/* =========================================================
   Editorial Pages: Our Craft + Ingredients
   Adds two new pages without changing the existing product page styling.
   ========================================================= */
:root {
  --editorial-green: #062219;
  --editorial-deep: #020b08;
  --editorial-blackgreen: #030f0b;
  --editorial-cream: #f5ecd9;
  --editorial-gold: #c49a48;
  --editorial-gold-soft: #d7bf7d;
  --editorial-copy: rgba(255,255,255,.78);
  --editorial-border: rgba(196,154,72,.36);
}

body.editorial-page {
  background: var(--editorial-blackgreen);
  color: #fff;
}

body.editorial-page .shared-site-header.header-scrolled,
body.editorial-page .shared-site-header.header-scrolled .nav-row {
  background: rgba(3, 15, 11, .96) !important;
  border-bottom-color: rgba(196,154,72,.36) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.38) !important;
}

body.editorial-page .shared-footer.site-footer {
  background:
    radial-gradient(circle at 52% -20%, rgba(196,154,72,.12), transparent 42%),
    linear-gradient(180deg, #062219 0%, #03120d 100%) !important;
  border-top: 1px solid rgba(196,154,72,.32) !important;
}

.shared-footer__divider--leaf {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: min(100%, 1200px);
  margin-left: auto;
  margin-right: auto;
}

.shared-footer__divider--leaf span {
  display: block !important;
  width: min(42vw, 520px) !important;
  height: 1px !important;
  background: rgba(196,154,72,.55) !important;
}

.shared-footer__divider--leaf img {
  display: block;
  width: 62px;
  height: auto;
  object-fit: contain;
  opacity: .95;
  filter: sepia(1) saturate(1.2) hue-rotate(355deg) brightness(1.03);
}

.editorial-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #030b08;
  color: #fff;
  isolation: isolate;
}

.editorial-hero__image {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: .74;
}

.editorial-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(2,9,7,.95) 0%, rgba(2,9,7,.77) 32%, rgba(2,9,7,.32) 64%, rgba(2,9,7,.12) 100%),
    radial-gradient(circle at 70% 40%, rgba(196,154,72,.22), transparent 42%);
}

.editorial-hero__copy {
  width: min(650px, 88vw);
  padding: clamp(125px, 12vw, 190px) 0 clamp(72px, 8vw, 120px) clamp(28px, 7vw, 92px);
  position: relative;
  z-index: 2;
}

.editorial-kicker {
  margin: 0 0 16px;
  color: var(--editorial-gold);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.editorial-hero h1,
.editorial-section h2,
.editorial-dark-panel h2,
.craft-sequence h2,
.craft-display-band h2,
.ingredients-trust h2,
.ingredients-quality-results h2,
.ingredients-cta-band h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.025em;
}

.editorial-hero h1 {
  margin: 0;
  font-size: clamp(48px, 6.2vw, 96px);
  line-height: .96;
  color: #fffaf0;
}

.editorial-hero h1 span {
  color: var(--editorial-gold-soft);
}

.editorial-hero p:not(.editorial-kicker) {
  width: min(560px, 100%);
  margin: 22px 0 0;
  color: rgba(255,255,255,.86);
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.8;
}

.editorial-leaf-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 24px;
  width: min(360px, 100%);
}

.editorial-leaf-rule span {
  height: 1px;
  flex: 1;
  background: rgba(196,154,72,.72);
}

.editorial-leaf-rule img {
  width: 54px;
  height: auto;
  object-fit: contain;
  opacity: .92;
}

.editorial-dark-panel {
  padding: clamp(70px, 7vw, 110px) clamp(24px, 7vw, 110px);
  text-align: center;
  background:
    radial-gradient(circle at 50% -10%, rgba(196,154,72,.11), transparent 40%),
    linear-gradient(180deg, var(--editorial-green) 0%, var(--editorial-blackgreen) 100%);
  border-top: 1px solid rgba(196,154,72,.25);
  border-bottom: 1px solid rgba(196,154,72,.18);
}

.editorial-dark-panel h2,
.editorial-section h2,
.craft-sequence h2 {
  margin: 0 auto 16px;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1.08;
  color: #fffaf0;
}

.editorial-dark-panel p:not(.editorial-kicker),
.editorial-section__lede {
  max-width: 780px;
  margin: 0 auto;
  color: rgba(255,255,255,.74);
  line-height: 1.75;
}

/* Our Craft page */
.craft-page {
  background: var(--editorial-blackgreen);
}

.craft-page .craft-hero .editorial-hero__image {
  object-position: 58% center;
}

.craft-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--editorial-green);
  border-top: 1px solid rgba(196,154,72,.28);
  border-bottom: 1px solid rgba(196,154,72,.28);
}

.craft-steps article {
  min-height: 220px;
  padding: 42px 28px;
  text-align: center;
  border-right: 1px solid rgba(196,154,72,.22);
}

.craft-steps article:last-child { border-right: 0; }
.craft-steps span {
  display: block;
  margin-bottom: 12px;
  color: var(--editorial-gold);
  font-size: 10px;
  letter-spacing: .24em;
}
.craft-step-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border: 1px solid rgba(196,154,72,.7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--editorial-gold);
}
.craft-steps h3 {
  margin: 0 0 10px;
  color: #fffaf0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
}
.craft-steps p {
  max-width: 250px;
  margin: 0 auto;
  color: rgba(255,255,255,.67);
  font-size: 13px;
  line-height: 1.6;
}

.editorial-section {
  padding: clamp(78px, 7vw, 130px) clamp(24px, 5vw, 84px);
  background: var(--editorial-blackgreen);
  text-align: center;
}

.craft-process-grid {
  width: min(1320px, 100%);
  margin: clamp(34px, 4vw, 58px) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(196,154,72,.32);
}

.craft-process-card {
  min-height: clamp(370px, 34vw, 560px);
  margin: 0;
  border-right: 1px solid rgba(196,154,72,.24);
  border-bottom: 1px solid rgba(196,154,72,.24);
}
.craft-process-card:nth-child(2n) { border-right: 0; }
.craft-process-card:nth-last-child(-n+2) { border-bottom: 0; }

.craft-process-card--image img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.05);
}
.craft-process-card--copy {
  text-align: left;
  padding: clamp(36px, 4vw, 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(8,37,28,.68);
}
.craft-process-card--copy h3 {
  margin: 0 0 18px;
  color: #fffaf0;
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 54px);
  line-height: 1.04;
  font-weight: 400;
}
.craft-process-card--copy p:not(.editorial-kicker) {
  color: rgba(255,255,255,.72);
  line-height: 1.72;
}
.craft-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
  border-top: 1px solid rgba(196,154,72,.25);
  padding-top: 22px;
}
.craft-mini-stats span {
  color: rgba(255,255,255,.68);
  font-size: 12px;
}
.craft-mini-stats b {
  display: block;
  color: var(--editorial-gold-soft);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10px;
  margin-bottom: 6px;
}

.craft-sequence {
  padding: clamp(78px, 7vw, 120px) clamp(24px, 5vw, 84px);
  background: var(--editorial-cream);
  color: #10251c;
  text-align: center;
}
.craft-sequence h2 { color: #10251c; }
.craft-sequence > p {
  max-width: 680px;
  margin: 0 auto 34px;
  color: #3d3a31;
}
.craft-sequence-grid {
  width: min(1320px, 100%);
  margin: 0 auto 24px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid rgba(196,154,72,.32);
  background: rgba(255,255,255,.36);
}
.craft-sequence-grid article {
  padding: 34px 24px;
  border-right: 1px solid rgba(196,154,72,.26);
  text-align: left;
}
.craft-sequence-grid article:last-child { border-right: 0; }
.craft-sequence-grid span {
  color: var(--editorial-gold);
  font-size: 10px;
  letter-spacing: .22em;
}
.craft-sequence-grid h3 {
  margin: 10px 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: #10251c;
}
.craft-sequence-grid p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #4b463b;
}
.craft-sequence small { color: #655d4c; }

.craft-brand-grid {
  width: min(1320px, 100%);
  margin: clamp(34px, 4vw, 60px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.craft-brand-grid article {
  min-height: 420px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(196,154,72,.28);
  background: #071a13;
  text-align: left;
}
.craft-brand-grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: .62;
  transition: transform .5s ease, opacity .5s ease;
}
.craft-brand-grid article:hover img { transform: scale(1.035); opacity: .76; }
.craft-brand-grid article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(2,9,7,.96), rgba(2,9,7,.18) 68%);
}
.craft-brand-grid div {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 1;
}
.craft-brand-grid h3 {
  margin: 0 0 10px;
  color: var(--editorial-gold-soft);
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 400;
}
.craft-brand-grid p:not(.editorial-kicker) {
  color: rgba(255,255,255,.76);
  max-width: 620px;
}

.craft-display-band {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--editorial-green);
  border-top: 1px solid rgba(196,154,72,.25);
  border-bottom: 1px solid rgba(196,154,72,.25);
}
.craft-display-band > div {
  padding: clamp(68px, 7vw, 120px) clamp(28px, 6vw, 90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.craft-display-band h2 {
  margin: 0 0 20px;
  color: #fffaf0;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1.08;
}
.craft-display-band p:not(.editorial-kicker) {
  max-width: 620px;
  color: rgba(255,255,255,.73);
  line-height: 1.75;
}
.craft-display-band > img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}
.craft-closing h2 { font-size: clamp(36px, 4.4vw, 70px); }

/* Ingredients page */
.ingredients-page-main {
  background: var(--editorial-blackgreen);
}
.ingredients-hero .editorial-hero__image {
  object-position: 68% center;
}
.ingredients-hero .editorial-hero__shade {
  background:
    linear-gradient(90deg, rgba(2,9,7,.96) 0%, rgba(2,9,7,.78) 34%, rgba(2,9,7,.34) 66%, rgba(2,9,7,.12) 100%),
    radial-gradient(circle at 70% 44%, rgba(196,154,72,.18), transparent 38%);
}

.ingredients-trust {
  padding: clamp(48px, 5vw, 76px) clamp(22px, 4vw, 64px) clamp(72px, 6vw, 110px);
  background:
    radial-gradient(circle at 50% 0, rgba(196,154,72,.10), transparent 38%),
    linear-gradient(180deg, #051914 0%, #03110d 100%);
  border-top: 1px solid rgba(196,154,72,.34);
  border-bottom: 1px solid rgba(196,154,72,.30);
}
.ingredients-heading-row {
  width: min(1500px, 100%);
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}
.ingredients-heading-row span {
  height: 1px;
  background: rgba(196,154,72,.46);
}
.ingredients-heading-row h2 {
  margin: 0;
  color: var(--editorial-gold);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1;
  text-align: center;
}
.ingredients-card-grid {
  width: min(1500px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid rgba(196,154,72,.32);
  background: rgba(0,0,0,.12);
}
.ingredients-card-grid article {
  padding: 32px 18px 20px;
  min-height: 540px;
  border-right: 1px solid rgba(196,154,72,.26);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.ingredients-card-grid article:last-child { border-right: 0; }
.ingredient-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  color: var(--editorial-gold);
  font-size: 34px;
  line-height: 1;
}
.ingredients-card-grid h3 {
  min-height: 54px;
  margin: 0 0 12px;
  color: var(--editorial-gold);
  font-family: var(--sans);
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}
.ingredients-card-grid p {
  margin: 0 0 22px;
  color: rgba(255,255,255,.76);
  font-size: 14px;
  line-height: 1.65;
}
.ingredients-card-grid img {
  margin-top: auto;
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-top: 1px solid rgba(196,154,72,.24);
  filter: saturate(.9) contrast(1.04);
}
.ingredients-quality-results {
  display: grid;
  grid-template-columns: .95fr 1.35fr;
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
  border-left: 1px solid rgba(196,154,72,.32);
  border-right: 1px solid rgba(196,154,72,.32);
  border-bottom: 1px solid rgba(196,154,72,.32);
  background: var(--editorial-blackgreen);
}
.ingredients-quality-panel,
.ingredients-results-panel {
  padding: clamp(46px, 5vw, 78px) clamp(28px, 4vw, 62px);
  text-align: center;
}
.ingredients-quality-panel { border-right: 1px solid rgba(196,154,72,.32); }
.ingredients-quality-results h2 {
  margin: 0;
  color: var(--editorial-gold);
  font-size: clamp(30px, 3.2vw, 54px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ingredients-quality-results .editorial-leaf-rule { margin-left: auto; margin-right: auto; }
.ingredients-quality-results p {
  color: rgba(255,255,255,.78);
  line-height: 1.75;
}
.quality-icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}
.quality-icons div {
  border-right: 1px solid rgba(196,154,72,.24);
  padding: 0 12px;
}
.quality-icons div:last-child { border-right: 0; }
.quality-icons span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  color: var(--editorial-gold);
  border: 1px solid rgba(196,154,72,.55);
  border-radius: 50%;
}
.quality-icons h3,
.ingredients-product-strip h3 {
  color: var(--editorial-gold);
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.quality-icons p { font-size: 13px; margin: 0; }
.ingredients-product-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 20px;
  margin-top: 36px;
}
.ingredients-product-strip div {
  padding: 0 12px;
  border-right: 1px solid rgba(196,154,72,.24);
}
.ingredients-product-strip div:last-child { border-right: 0; }
.ingredients-product-strip img {
  width: 100%;
  height: 210px;
  object-fit: contain;
  margin-bottom: 14px;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.32));
}
.ingredients-product-strip p { font-size: 13px; margin: 0; }
.ingredients-cta-band {
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto clamp(60px, 7vw, 110px);
  min-height: 260px;
  padding: clamp(36px, 5vw, 70px);
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: clamp(26px, 4vw, 70px);
  align-items: center;
  border: 1px solid rgba(196,154,72,.36);
  background:
    linear-gradient(90deg, rgba(3,15,11,.75), rgba(3,15,11,.42)),
    url("../img/forest.jpg") center/cover no-repeat;
}
.ingredients-cta-icon {
  width: 110px;
  height: 110px;
  border: 1px solid rgba(196,154,72,.6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--editorial-gold);
  font-size: 48px;
}
.ingredients-cta-band h2 {
  margin: 0;
  color: var(--editorial-gold-soft);
  text-transform: uppercase;
  font-size: clamp(30px, 3.2vw, 54px);
  line-height: 1.05;
}
.ingredients-cta-band p {
  margin: 0;
  color: rgba(255,255,255,.82);
  line-height: 1.75;
}

/* Home page link update support: make all brand pathway links feel clickable. */
.home-page .brand-pathway[href="/our-craft"],
.home-page .forest-band .discover[href="/ingredients"] {
  cursor: pointer;
}

@media (max-width: 1100px) {
  .craft-steps,
  .craft-sequence-grid,
  .ingredients-card-grid,
  .ingredients-product-strip,
  .quality-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .craft-steps article:nth-child(2n),
  .ingredients-card-grid article:nth-child(2n) { border-right: 0; }
  .craft-sequence-grid article:nth-child(2n),
  .quality-icons div:nth-child(2n),
  .ingredients-product-strip div:nth-child(2n) { border-right: 0; }
  .ingredients-card-grid article { min-height: 450px; }
  .ingredients-quality-results,
  .craft-display-band {
    grid-template-columns: 1fr;
  }
  .ingredients-quality-panel { border-right: 0; border-bottom: 1px solid rgba(196,154,72,.32); }
}

@media (max-width: 820px) {
  .editorial-hero {
    min-height: 760px;
  }
  .editorial-hero__copy {
    padding: 125px 26px 82px;
  }
  .editorial-hero h1 {
    font-size: 50px;
  }
  .craft-process-grid,
  .craft-brand-grid {
    grid-template-columns: 1fr;
  }
  .craft-process-card,
  .craft-process-card:nth-child(2n),
  .craft-process-card:nth-last-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid rgba(196,154,72,.24);
  }
  .craft-process-card:last-child { border-bottom: 0; }
  .craft-process-card--image { min-height: 300px; }
  .craft-display-band > img { min-height: 340px; }
  .ingredients-heading-row {
    grid-template-columns: 1fr;
  }
  .ingredients-heading-row span { display: none; }
  .ingredients-quality-results,
  .ingredients-cta-band {
    width: 100%;
  }
  .ingredients-cta-band {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ingredients-cta-icon { margin: 0 auto; }
}

@media (max-width: 620px) {
  .craft-steps,
  .craft-sequence-grid,
  .ingredients-card-grid,
  .ingredients-product-strip,
  .quality-icons {
    grid-template-columns: 1fr;
  }
  .craft-steps article,
  .craft-sequence-grid article,
  .ingredients-card-grid article,
  .quality-icons div,
  .ingredients-product-strip div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(196,154,72,.22);
  }
  .craft-steps article:last-child,
  .craft-sequence-grid article:last-child,
  .ingredients-card-grid article:last-child,
  .quality-icons div:last-child,
  .ingredients-product-strip div:last-child {
    border-bottom: 0;
  }
  .craft-mini-stats { grid-template-columns: 1fr; }
  .craft-brand-grid article { min-height: 360px; }
  .ingredients-card-grid article { min-height: auto; }
  .ingredients-card-grid img { height: 240px; }
}

/* =========================================================
   EDITORIAL PAGES — CURTAIN / SECTION PARALLAX REVEAL
   ---------------------------------------------------------
   Matches the product-page reveal style:
   - the hero/previous section pins briefly
   - the next section rises over it with a soft shadow
   - mobile and reduced-motion users keep normal scrolling

   To remove this entire change later, delete only this block.
   ========================================================= */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  /* Our Craft page: alternate sections rise over the section before them. */
  body.our-craft-page .craft-page {
    overflow: visible;
  }

  body.our-craft-page .craft-hero {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  /* 1st after hero: effect ON */
  body.our-craft-page .craft-intro {
    position: relative;
    z-index: 2;
    box-shadow: 0 -34px 90px rgba(0, 0, 0, .44);
  }

  /* 2nd after hero: normal visually, but pins so the next section can rise over it. */
  body.our-craft-page .craft-steps {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  /* 3rd after hero: effect ON */
  body.our-craft-page .craft-process {
    position: relative;
    z-index: 4;
    box-shadow: 0 -34px 90px rgba(0, 0, 0, .38);
  }

  /* 4th after hero: normal visually, but pins so the next section can rise over it. */
  body.our-craft-page .craft-sequence {
    position: sticky;
    top: 0;
    z-index: 5;
  }

  /* 5th after hero: effect ON */
  body.our-craft-page .craft-character {
    position: relative;
    z-index: 6;
    box-shadow: 0 -34px 90px rgba(0, 0, 0, .36);
  }

  /* 6th after hero: normal visually, but pins so the next section can rise over it. */
  body.our-craft-page .craft-display-band {
    position: relative;
    top: 0;
    z-index: 7;
  }

  /* 7th after hero: effect ON */
  body.our-craft-page .craft-closing {
    position: relative;
    z-index: 8;
    box-shadow: 0 -34px 90px rgba(0, 0, 0, .38);
  }
}

@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  body.ingredients-page .ingredients-hero,
  body.ingredients-page .ingredients-trust,
  body.ingredients-page .ingredients-quality-results,
  body.ingredients-page .ingredients-cta-band,
  body.our-craft-page .craft-hero,
  body.our-craft-page .craft-intro,
  body.our-craft-page .craft-steps,
  body.our-craft-page .craft-process,
  body.our-craft-page .craft-sequence,
  body.our-craft-page .craft-character,
  body.our-craft-page .craft-display-band,
  body.our-craft-page .craft-closing {
    position: relative;
    top: auto;
    z-index: auto;
    box-shadow: none;
  }
}

/* =========================================================
   INGREDIENTS PAGE — FULL-BLEED BACKGROUNDS FOR REVEAL SECTIONS
   ---------------------------------------------------------
   Fixes the curtain/parallax reveal so the Quality/Results
   and CTA sections do not show transparent page edges while
   they are moving over the previous section.

   To remove only this fix later, delete this block.
   ========================================================= */
body.ingredients-page .ingredients-quality-results,
body.ingredients-page .ingredients-cta-band {
  position: relative;
  isolation: isolate;
}

body.ingredients-page .ingredients-quality-results::before,
body.ingredients-page .ingredients-cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}

body.ingredients-page .ingredients-quality-results::before {
  background:
    radial-gradient(circle at 20% 18%, rgba(196,154,72,.10), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(196,154,72,.08), transparent 36%),
    linear-gradient(180deg, #041510 0%, #020b08 100%);
}

body.ingredients-page .ingredients-cta-band::before {
  background:
    linear-gradient(90deg, rgba(3,15,11,.92), rgba(3,15,11,.72)),
    url("../img/forest.jpg") center / cover no-repeat;
}

@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  body.ingredients-page .ingredients-quality-results,
  body.ingredients-page .ingredients-cta-band {
    min-height: 100vh;
    min-height: 100svh;
  }

  body.ingredients-page .ingredients-quality-results {
    align-items: stretch;
  }

  body.ingredients-page .ingredients-quality-panel,
  body.ingredients-page .ingredients-results-panel,
  body.ingredients-page .ingredients-cta-band {
    align-content: center;
  }
}



/* =========================================================
   INGREDIENTS PAGE — QUALITY PANEL + CTA FINAL FIX
   ---------------------------------------------------------
   Requested change:
   1) make the single Quality By Nature panel feel like the
      home benefits section after the Results panel was removed
   2) prevent horizontal page scrolling caused by earlier
      full-bleed reveal backgrounds
   3) remove the empty green space below the CTA band
   4) use assets/img/icon-leaf.png for the CTA icon
   ========================================================= */
body.ingredients-page {
  overflow-x: hidden;
  max-width: 100%;
}

body.ingredients-page .ingredients-page-main {
  overflow-x: hidden;
  background: var(--editorial-blackgreen);
}

body.ingredients-page .ingredients-quality-results,
body.ingredients-page .ingredients-cta-band {
  max-width: none;
  overflow: hidden;
}

body.ingredients-page .ingredients-quality-results::before,
body.ingredients-page .ingredients-cta-band::before {
  display: none !important;
}

body.ingredients-page .ingredients-quality-results {
  width: 100%;
  margin: 0;
  display: block;
  grid-template-columns: 1fr;
  padding: clamp(82px, 8vw, 120px) clamp(28px, 7vw, 120px);
  border: 0;
  background:
    radial-gradient(circle at 50% 115%, rgba(8,37,28,.12), transparent 34%),
    linear-gradient(180deg, #eeeae0 0%, #dcdad2 100%);
  color: var(--ink);
}

body.ingredients-page .ingredients-quality-panel {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 0;
  border: 0 !important;
  text-align: center;
  background: transparent;
}

body.ingredients-page .ingredients-quality-results h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(26px, 2.45vw, 44px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .22em;
  text-transform: uppercase;
}

body.ingredients-page .ingredients-quality-results .editorial-leaf-rule {
  width: min(360px, 90vw);
  margin: 30px auto 26px;
}

body.ingredients-page .ingredients-quality-results > .ingredients-quality-panel > p {
  max-width: 760px;
  margin: 0 auto;
  color: #202820;
  font-size: 14px;
  line-height: 1.75;
}

body.ingredients-page .quality-icons {
  width: min(1180px, 100%);
  margin: clamp(44px, 4vw, 62px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

body.ingredients-page .quality-icons div {
  min-height: 185px;
  padding: 0 clamp(20px, 2.5vw, 38px);
  border-right: 1px solid rgba(185,154,93,.34);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

body.ingredients-page .quality-icons div:last-child {
  border-right: 0;
}

body.ingredients-page .quality-icons span {
  width: 54px;
  height: 54px;
  margin: 0 auto 20px;
  color: var(--gold);
  border: 1px solid rgba(185,154,93,.72);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

body.ingredients-page .quality-icons h3 {
  min-height: 42px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.ingredients-page .quality-icons p {
  max-width: 210px;
  margin: 0 auto;
  color: #222;
  font-size: 12px;
  line-height: 1.55;
}

body.ingredients-page .ingredients-cta-band {
  width: 100%;
  margin: 0;
  min-height: clamp(360px, 50vh, 620px);
  padding: clamp(58px, 6vw, 92px) clamp(28px, 8vw, 140px);
  display: grid;
  grid-template-columns: auto minmax(300px, .9fr) minmax(300px, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  border: 0;
  border-top: 1px solid rgba(196,154,72,.34);
  border-bottom: 1px solid rgba(196,154,72,.28);
  background:
    linear-gradient(90deg, rgba(3,15,11,.92) 0%, rgba(3,15,11,.68) 48%, rgba(3,15,11,.46) 100%),
    url("../img/forest.jpg") center / cover no-repeat;
}

body.ingredients-page .ingredients-cta-icon {
  width: clamp(78px, 7vw, 112px);
  height: clamp(78px, 7vw, 112px);
  padding: clamp(18px, 1.5vw, 24px);
  border: 1px solid rgba(196,154,72,.62);
  border-radius: 50%;
  object-fit: contain;
  display: block;
}

body.ingredients-page .ingredients-cta-band h2 {
  margin: 0;
  color: var(--editorial-gold-soft);
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 70px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

body.ingredients-page .ingredients-cta-band p {
  max-width: 650px;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.8;
}

@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  body.ingredients-page .ingredients-quality-results {
    min-height: auto;
    align-content: center;
  }

  body.ingredients-page .ingredients-cta-band {
    min-height: clamp(360px, 50vh, 620px);
  }
}

@media (max-width: 980px) {
  body.ingredients-page .quality-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 34px;
  }

  body.ingredients-page .quality-icons div:nth-child(2n) {
    border-right: 0;
  }

  body.ingredients-page .ingredients-cta-band {
    grid-template-columns: 1fr;
    text-align: center;
  }

  body.ingredients-page .ingredients-cta-icon {
    margin: 0 auto;
  }

  body.ingredients-page .ingredients-cta-band p {
    margin: 0 auto;
  }
}

@media (max-width: 620px) {
  body.ingredients-page .ingredients-quality-results {
    padding: 68px 22px;
  }

  body.ingredients-page .quality-icons {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  body.ingredients-page .quality-icons div,
  body.ingredients-page .quality-icons div:nth-child(2n) {
    min-height: 0;
    padding: 28px 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(185,154,93,.30) !important;
  }

  body.ingredients-page .quality-icons div:last-child {
    border-bottom: 0 !important;
  }
}


/* =========================================================
   OUR STORY PAGE — redesign based on provided reference
   ---------------------------------------------------------
   Uses shared header/footer. Body class: .our-story-page.
   If you want to remove this page-specific design later,
   delete this whole block.
   ========================================================= */
body.our-story-page {
  overflow-x: clip;
  background: #020b08;
  color: #fffaf0;
}

body.our-story-page .our-story-main {
  background: #020b08;
  color: #fffaf0;
  overflow: visible;
}

body.our-story-page .shared-site-header.header-scrolled,
body.our-story-page .shared-site-header.header-scrolled .nav-row {
  background: rgba(2, 8, 6, .96) !important;
  border-bottom-color: rgba(196, 154, 72, .38) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.44) !important;
}

body.our-story-page .shared-footer.site-footer {
  background: #020b08 !important;
  border-top: 1px solid rgba(196,154,72,.34) !important;
}

.our-story-hero,
.our-story-quality,
.our-story-integrity,
.our-story-display,
.our-story-final {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(196,154,72,.28);
}

.our-story-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: #020b08;
}

.our-story-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 62% center;
  z-index: -3;
  opacity: .92;
  filter: saturate(.95) contrast(1.05);
}

.our-story-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(2,8,6,.96) 0%, rgba(2,8,6,.86) 33%, rgba(2,8,6,.46) 61%, rgba(2,8,6,.14) 100%),
    radial-gradient(circle at 73% 38%, rgba(196,154,72,.24), transparent 38%);
}

.our-story-hero__copy {
  width: min(680px, 88vw);
  padding: clamp(136px, 12vw, 190px) 0 clamp(78px, 8vw, 120px) clamp(30px, 6vw, 78px);
  position: relative;
  z-index: 2;
}

.our-story-kicker {
  margin: 0 0 16px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.our-story-hero h1,
.our-story-quality h2,
.our-story-integrity h2,
.our-story-display h2,
.our-story-final h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.03em;
}

.our-story-hero h1 {
  color: #fffaf0;
  font-size: clamp(58px, 7.4vw, 118px);
}

.our-story-hero h1 span {
  color: var(--gold2);
}

.our-story-hero p:not(.our-story-kicker) {
  width: min(540px, 100%);
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.85;
}

.our-story-leaf-rule {
  width: min(420px, 100%);
  margin: 28px 0 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.our-story-leaf-rule span {
  height: 1px;
  flex: 1;
  background: rgba(196,154,72,.72);
}

.our-story-leaf-rule img {
  width: 42px;
  height: auto;
  object-fit: contain;
  opacity: .95;
}

.our-story-quality {
  min-height: 40vh;
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(640px, 1.35fr);
  align-items: center;
  gap: clamp(32px, 5vw, 84px);
  padding: clamp(48px, 5vw, 78px) clamp(34px, 6vw, 78px);
  background:
    radial-gradient(circle at 20% 20%, rgba(196,154,72,.08), transparent 34%),
    linear-gradient(90deg, #051812 0%, #09271e 100%);
}

.our-story-quality__copy h2,
.our-story-integrity h2,
.our-story-display h2,
.our-story-final h2 {
  color: var(--gold2);
  font-size: clamp(28px, 3vw, 48px);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.our-story-quality__copy p,
.our-story-integrity__copy p,
.our-story-display__copy p,
.our-story-final__copy p {
  max-width: 560px;
  color: rgba(255,255,255,.82);
  font-size: clamp(14px, .95vw, 16px);
  line-height: 1.85;
}

.our-story-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.our-story-value-grid article {
  min-height: 190px;
  padding: 0 clamp(18px, 2vw, 34px);
  text-align: center;
  border-right: 1px solid rgba(196,154,72,.28);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.our-story-value-grid article:last-child { border-right: 0; }

.our-story-value-grid img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  margin: 0 auto 18px;
  filter: sepia(1) saturate(1.4) hue-rotate(357deg) brightness(1.1);
}

.our-story-value-grid h3,
.our-story-principles span,
.our-story-signoff {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1.45;
  text-transform: uppercase;
}

.our-story-value-grid h3 { margin: 0 0 10px; }
.our-story-value-grid p {
  max-width: 200px;
  margin: 0 auto;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.7;
}

.our-story-integrity {
  min-height: 52vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: #020b08;
}

.our-story-image-panel {
  min-height: 520px;
  position: relative;
  overflow: hidden;
  background: #050c09;
}

.our-story-image-panel img,
.our-story-final__image img,
.our-story-lineup img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

.our-story-image-panel::after,
.our-story-lineup::after,
.our-story-final__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,8,6,.1), rgba(2,8,6,.56));
  pointer-events: none;
}

.our-story-integrity__copy,
.our-story-final__copy,
.our-story-display__copy {
  padding: clamp(54px, 6vw, 96px) clamp(34px, 7vw, 92px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.our-story-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid rgba(196,154,72,.32);
  border-bottom: 1px solid rgba(196,154,72,.18);
}

.our-story-principles span {
  padding: 18px 14px;
  border-right: 1px solid rgba(196,154,72,.22);
  text-align: center;
}

.our-story-principles span:last-child { border-right: 0; }

.our-story-display {
  min-height: 52vh;
  display: grid;
  grid-template-columns: .9fr 1.35fr;
  align-items: stretch;
  background:
    radial-gradient(circle at 68% 30%, rgba(196,154,72,.13), transparent 36%),
    #020b08;
}

.our-story-lineup {
  min-height: 520px;
  position: relative;
  overflow: hidden;
}

.our-story-lineup img {
  object-position: center;
}

.our-story-final {
  min-height: 42vh;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  background:
    radial-gradient(circle at 68% 28%, rgba(196,154,72,.12), transparent 34%),
    linear-gradient(90deg, #020b08 0%, #061812 100%);
}

.our-story-final__image {
  min-height: 330px;
  position: relative;
  overflow: hidden;
}

.our-story-final__copy .our-story-leaf-rule {
  margin-top: 22px;
  margin-bottom: 16px;
}

.our-story-signoff {
  margin-top: 0 !important;
  color: var(--gold2) !important;
}

@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  body.our-story-page .our-story-hero {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  body.our-story-page .our-story-quality {
    position: relative;
    top: 0;
    z-index: 2;
    box-shadow: 0 -34px 90px rgba(0,0,0,.46);
  }

  body.our-story-page .our-story-integrity {
    position: relative;
    top: 0;
    z-index: 3;
    box-shadow: 0 -34px 90px rgba(0,0,0,.40);
  }

  body.our-story-page .our-story-display {
    position: relative;
    top: 0;
    z-index: 4;
    box-shadow: 0 -34px 90px rgba(0,0,0,.38);
  }

  body.our-story-page .our-story-final {
    position: relative;
    z-index: 5;
    box-shadow: 0 -34px 90px rgba(0,0,0,.34);
  }
}

@media (max-width: 1100px) {
  .our-story-quality,
  .our-story-integrity,
  .our-story-display,
  .our-story-final {
    grid-template-columns: 1fr;
  }

  .our-story-value-grid,
  .our-story-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .our-story-value-grid article:nth-child(2n),
  .our-story-principles span:nth-child(2n) { border-right: 0; }
}

@media (max-width: 620px) {
  .our-story-hero__copy {
    padding-left: 26px;
    padding-right: 26px;
  }

  .our-story-hero h1 {
    font-size: 52px;
  }

  .our-story-quality,
  .our-story-integrity__copy,
  .our-story-display__copy,
  .our-story-final__copy {
    padding-left: 24px;
    padding-right: 24px;
  }

  .our-story-value-grid,
  .our-story-principles {
    grid-template-columns: 1fr;
  }

  .our-story-value-grid article,
  .our-story-value-grid article:nth-child(2n),
  .our-story-principles span,
  .our-story-principles span:nth-child(2n) {
    border-right: 0;
    border-bottom: 1px solid rgba(196,154,72,.22);
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .our-story-value-grid article:last-child,
  .our-story-principles span:last-child { border-bottom: 0; }
}

/* =========================================================
   INGREDIENTS PAGE — restore curtain/parallax reveal
   ---------------------------------------------------------
   Re-enables the section-rise effect after the hero while
   keeping horizontal scrolling clipped.
   ========================================================= */
body.ingredients-page {
  overflow-x: clip !important;
}

body.ingredients-page .ingredients-page-main {
  overflow: visible !important;
  max-width: 100% !important;
}

body.ingredients-page .ingredients-trust,
body.ingredients-page .ingredients-quality-results,
body.ingredients-page .ingredients-cta-band {
  width: 100% !important;
  max-width: 100% !important;
}

body.ingredients-page .ingredients-quality-results::before,
body.ingredients-page .ingredients-cta-band::before {
  display: none !important;
}

@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  body.ingredients-page .ingredients-hero {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
  }

  body.ingredients-page .ingredients-trust {
    position: relative !important;
    top: 0 !important;
    z-index: 2 !important;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-content: center;
    box-shadow: 0 -34px 90px rgba(0,0,0,.44) !important;
  }

  body.ingredients-page .ingredients-quality-results {
    position: relative !important;
    top: 0 !important;
    z-index: 3 !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    display: grid !important;
    align-content: center;
    box-shadow: 0 -30px 80px rgba(0,0,0,.36) !important;
  }

  body.ingredients-page .ingredients-cta-band {
    position: relative !important;
    z-index: 4 !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    box-shadow: 0 -30px 80px rgba(0,0,0,.32) !important;
  }
}

@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  body.our-story-page .our-story-hero,
  body.our-story-page .our-story-quality,
  body.our-story-page .our-story-integrity,
  body.our-story-page .our-story-display,
  body.our-story-page .our-story-final,
  body.ingredients-page .ingredients-hero,
  body.ingredients-page .ingredients-trust,
  body.ingredients-page .ingredients-quality-results,
  body.ingredients-page .ingredients-cta-band {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
  }
}


/* Our Story icon fallback — avoids missing icon image files in the value row. */
.our-story-value-grid .our-story-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border: 1px solid rgba(196,154,72,.70);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold2);
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1;
}


/* =========================================================
   AGE GATE SESSION MODE + FLASH PREVENTION
   ---------------------------------------------------------
   The age-gate HTML now starts with .hidden so it does not flash
   before JavaScript checks sessionStorage. JavaScript removes
   .hidden only when the visitor has not confirmed this session.
   ========================================================= */

body.age-gate-open {
  overflow: hidden;
}

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 24, 18, 0.96);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.age-gate.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.age-card,
.age-card * {
  pointer-events: auto;
}


/* =========================================================
   RESPONSIVE RECIPE DRAWER / VIEW RECIPE PANEL FIX
   Prevents image/text overlap on shorter laptop screens.
   ========================================================= */

body.cinematic-product-page .serve-drawer,
body.cinematic-product-page .recipe-drawer,
body.cinematic-product-page .serve-recipe-panel {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overflow-x: hidden;
}

body.cinematic-product-page .serve-drawer img,
body.cinematic-product-page .recipe-drawer img,
body.cinematic-product-page .serve-recipe-panel img {
  display: block;
  width: 100%;
  height: clamp(220px, 36dvh, 390px);
  max-height: 390px;
  object-fit: cover;
  object-position: center center;
  flex: 0 0 auto;
}

body.cinematic-product-page .serve-recipe-content,
body.cinematic-product-page .serve-drawer__content,
body.cinematic-product-page .recipe-drawer__content {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding-top: clamp(28px, 4vw, 42px);
}

body.cinematic-product-page .serve-drawer h2,
body.cinematic-product-page .recipe-drawer h2,
body.cinematic-product-page .serve-recipe-panel h2 {
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 0.95;
}

@media (max-height: 760px) {
  body.cinematic-product-page .serve-drawer img,
  body.cinematic-product-page .recipe-drawer img,
  body.cinematic-product-page .serve-recipe-panel img {
    height: 220px;
  }

  body.cinematic-product-page .serve-recipe-content,
  body.cinematic-product-page .serve-drawer__content,
  body.cinematic-product-page .recipe-drawer__content {
    padding-top: 28px;
  }

  body.cinematic-product-page .serve-drawer h2,
  body.cinematic-product-page .recipe-drawer h2,
  body.cinematic-product-page .serve-recipe-panel h2 {
    font-size: clamp(34px, 4vw, 48px);
  }
}

/* =========================================================
   ON THE GREEN STORY — CRAFTSMANSHIP IMAGE RESPONSIVE FIX
   Prevents the golf bottles from being cropped on smaller laptops.
   ========================================================= */

body.on-the-green-story-page .craftsmanship-image,
body.on-the-green-story-page .otg-craft-image,
body.on-the-green-story-page .story-craft-image,
body.on-the-green-story-page .story-showcase-image {
  overflow: hidden;
  background: #04170f;
}

body.on-the-green-story-page .craftsmanship-image img,
body.on-the-green-story-page .otg-craft-image img,
body.on-the-green-story-page .story-craft-image img,
body.on-the-green-story-page .story-showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #04170f;
}

/* If that image is being used as a CSS background instead of an <img> */
body.on-the-green-story-page .craftsmanship-image,
body.on-the-green-story-page .otg-craft-image,
body.on-the-green-story-page .story-craft-image,
body.on-the-green-story-page .story-showcase-image {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* =========================================================
   FINAL DEPLOY OVERRIDES — recipe drawer + age gate off
   ---------------------------------------------------------
   - Does NOT modify the On The Green craftsmanship section.
   - Keeps the recipe image large on smaller laptop screens.
   - Makes the recipe text area scroll when space is limited.
   - Temporarily disables the age gate site-wide.
   ========================================================= */

/* Temporarily disable the legal-age gate site-wide. */
body .age-gate,
body .age-gate.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.age-gate-open {
  overflow: auto !important;
}

/* Revert the On The Green craftsmanship block back to the original layout. */
body.on-the-green-story-page .otg-story-process__grid {
  width: min(96vw, 1640px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(390px, 1.1fr) minmax(430px, 1fr) !important;
  gap: clamp(16px, 1.6vw, 28px) !important;
  align-items: stretch !important;
}

body.on-the-green-story-page .otg-story-process__image {
  min-height: clamp(370px, 30vw, 560px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border: 1px solid rgba(185,147,79,.42) !important;
  background:
    linear-gradient(rgba(4, 15, 11, .18), rgba(4, 15, 11, .18)),
    url("../img/otgHero.png") center / cover no-repeat !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.34) !important;
}

body.on-the-green-story-page .otg-story-process__copy {
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  body.on-the-green-story-page .otg-story-process__grid {
    grid-template-columns: 1fr !important;
    width: min(780px, calc(100% - 32px)) !important;
  }

  body.on-the-green-story-page .otg-story-process__image {
    min-height: 430px !important;
    aspect-ratio: auto !important;
  }
}

/* Signature Serve / View Recipe drawer: keep the image large and scroll the text. */
body.cinematic-product-page .serve-drawer.serve-drawer--luxury {
  top: 50% !important;
  right: clamp(12px, 2.2vw, 42px) !important;
  left: auto !important;
  bottom: auto !important;
  width: min(460px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 32px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  transform: translate3d(calc(100% + 70px), -50%, 0) !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury.active {
  transform: translate3d(0, -50%, 0) !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__media {
  grid-row: 1 !important;
  width: 100% !important;
  height: clamp(300px, 44dvh, 430px) !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--drawer-card-line, rgba(185, 154, 93, .42)) !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__media > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__content {
  grid-row: 2 !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  padding: clamp(20px, 2.2vw, 32px) clamp(24px, 3vw, 36px) clamp(22px, 2.6vw, 34px) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 38%),
    var(--drawer-card-bg, var(--paper)) !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury h2 {
  margin: 0 0 16px !important;
  font-size: clamp(34px, 3.15vw, 44px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .kicker {
  margin: 0 0 8px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-recipe-grid {
  grid-template-columns: 1fr !important;
  gap: 17px !important;
  margin: 0 !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-recipe-block ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-recipe-block ul li {
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  gap: 10px !important;
  padding-left: 0 !important;
  margin: 0 0 7px !important;
  color: var(--drawer-card-ink, var(--ink)) !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-recipe-block ul li::before {
  content: "◇" !important;
  position: static !important;
  color: var(--drawer-card-gold, var(--gold)) !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-recipe-method ol li {
  grid-template-columns: 28px 1fr !important;
  gap: 10px !important;
  margin: 0 0 7px !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-recipe-method ol li p,
body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-recipe-method ol li::before {
  font-size: 13px !important;
  line-height: 1.42 !important;
}

@media (max-height: 760px) and (min-width: 721px) {
  body.cinematic-product-page .serve-drawer.serve-drawer--luxury {
    width: min(430px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__media {
    height: clamp(285px, 43dvh, 360px) !important;
  }

  body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__content {
    padding: 18px 28px 20px !important;
  }

  body.cinematic-product-page .serve-drawer.serve-drawer--luxury h2 {
    font-size: clamp(30px, 2.85vw, 36px) !important;
    margin-bottom: 11px !important;
  }
}

@media (max-width: 720px) {
  body.cinematic-product-page .serve-drawer.serve-drawer--luxury {
    top: auto !important;
    right: 12px !important;
    left: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - 24px) !important;
    transform: translate3d(0, calc(100% + 36px), 0) !important;
  }

  body.cinematic-product-page .serve-drawer.serve-drawer--luxury.active {
    transform: translate3d(0, 0, 0) !important;
  }

  body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__media {
    height: clamp(260px, 42dvh, 360px) !important;
  }

  body.cinematic-product-page .serve-drawer.serve-drawer--luxury h2 {
    font-size: clamp(34px, 8vw, 46px) !important;
  }
}


/* =========================================================
   FINAL POLISH OVERRIDES — OTG image framing + recipe photo
   ---------------------------------------------------------
   - Pulls the On The Green craftsmanship background left so
     the club bottles stay in frame across laptop widths.
   - Lets the recipe drawer use the full portrait cocktail
     photo and scroll naturally instead of cropping it into a
     short landscape strip.
   ========================================================= */

/* On The Green story craftsmanship image: keep cover layout, but show more of the right side of otgHero.png. */
body.on-the-green-story-page .otg-story-process__image {
  background:
    linear-gradient(rgba(4, 15, 11, .18), rgba(4, 15, 11, .18)),
    url("../img/otgCraftsmanship.png") 68% center / cover no-repeat !important;
}

@media (max-width: 1320px) {
  body.on-the-green-story-page .otg-story-process__image {
    background-position: 72% center !important;
  }
}

@media (max-width: 1100px) {
  body.on-the-green-story-page .otg-story-process__image {
    background-position: 68% center !important;
  }
}

@media (max-width: 720px) {
  body.on-the-green-story-page .otg-story-process__image {
    background-position: 74% center !important;
  }
}

/* Recipe drawer: use the full portrait image, then allow the drawer to scroll. */
body.cinematic-product-page .serve-drawer.serve-drawer--luxury {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  grid-template-rows: none !important;
  background: var(--drawer-card-bg, var(--paper)) !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__media {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  line-height: 0 !important;
  background: #050d0a !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--drawer-card-line, rgba(185, 154, 93, .42)) !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__media > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center top !important;
  filter: saturate(1.05) contrast(1.02) !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__media-shade {
  display: none !important;
}

body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__content {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: var(--drawer-card-bg, var(--paper)) !important;
}

@media (max-height: 760px) and (min-width: 721px) {
  body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__media {
    height: auto !important;
  }
}

@media (max-width: 720px) {
  body.cinematic-product-page .serve-drawer.serve-drawer--luxury .serve-drawer__media {
    height: auto !important;
  }
}

/* =========================================================
   FINAL MOBILE HERO FRAMING OVERRIDES
   ---------------------------------------------------------
   Mobile-only hero image positioning for the four pages that
   were cropping important bottle/product artwork:
   - bitcoin-story.html
   - four20.html
   - on-the-green.html
   - on-the-green-story.html

   Desktop/tablet layouts are not changed.
   ========================================================= */
@media (max-width: 720px) {
  /* Keep mobile pages from creating accidental side-scroll. */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Bitcoin story: pull the Bitcoin bottle/coin farther into frame. */
  body.bitcoin-story-page .btc-story-hero__background {
    inset: 0 !important;
    transform: none !important;
  }

  body.bitcoin-story-page .btc-story-image--hero {
    background-size: cover !important;
    background-position: 86% center !important;
  }

  /* Four20 product hero: show more of the left-side leaf bottle. */
  body.four20-page .dbw-hero__video,
  body.devils-blood-page.four20-page .dbw-hero__video {
    object-position: 36% center !important;
  }

  body.devils-blood-page.four20-page .dbw-hero {
    background-position: 36% center !important;
  }

  /* On The Green product hero: keep the club bottles better framed. */
  body.on-the-green-page.devils-blood-page .dbw-hero__video,
  body.devils-blood-page.on-the-green-page .dbw-hero__video {
    object-position: 82% center !important;
  }

  body.devils-blood-page.on-the-green-page .dbw-hero {
    background-position: 82% center !important;
  }

  /* On The Green story hero: remove extra zoom and show more of the club bottle. */
  body.on-the-green-story-page .otg-story-hero__background {
    inset: 0 !important;
    transform: none !important;
  }

  body.on-the-green-story-page .otg-story-image--hero {
    background-size: cover !important;
    background-position: 88% center !important;
  }
}

@media (max-width: 430px) {
  /* Slightly stronger mobile crops for narrow iPhones/Androids. */
  body.bitcoin-story-page .btc-story-image--hero {
    background-position: 70% center !important;
  }

  body.devils-blood-page.four20-page .dbw-hero__video,
  body.devils-blood-page.four20-page .dbw-hero {
    object-position: 52% center !important;
    background-position: 52% center !important;
  }

  body.devils-blood-page.on-the-green-page .dbw-hero__video,
  body.devils-blood-page.on-the-green-page .dbw-hero {
    object-position: 75% center !important;
    background-position: 75% center !important;
  }

  body.on-the-green-story-page .otg-story-image--hero {
    background-position: 80% center !important;
  }
}