/* —— Why choose —— */
.why__grid {
  display: grid; gap: 28px;
  margin-top: 40px;
}
@media (min-width: 800px) {
  .why__grid { grid-template-columns: repeat(3, 1fr); }
}
.why__card {
  padding: 8px 12px 0;
  text-align: center;
}
.why__icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto 14px;
  display: block;
}
.why__card h3 {
  margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--olive-mid);
}
.why__card p {
  margin: 0 auto; font-size: 16px; line-height: 1.55; opacity: .88;
  max-width: 28em;
}
.stars {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  margin: 0 auto 14px;
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 32px;
  line-height: 1;
}
.why__video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 36px 0 8px;
  background: var(--olive-dark);
  overflow: hidden;
  border-radius: var(--radius);
}
.why__video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
#why-choose .cta-row {
  justify-content: center;
  margin-top: 36px;
}

/* —— Gallery (homepage chapter only — not layout builder section.gallery) —— */
.chapter .gallery {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chapter .gallery::-webkit-scrollbar { display: none; }
.chapter .gallery__frame,
.chapter .gallery__main {
  position: relative;
  flex: 0 0 calc((100% - 16px) / 2.15);
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  scroll-snap-align: start;
}
.chapter .gallery__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 699px) {
  .chapter .gallery__frame,
  .chapter .gallery__main {
    flex-basis: 86%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chapter .gallery { scroll-behavior: auto; }
}

/* —— Split chapters —— */
.split {
  display: grid; gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip > .split__media { order: -1; }
}
.split__media {
  position: relative; overflow: hidden; aspect-ratio: 4/3; min-height: 260px;
  border-radius: var(--radius);
}
.split__media img {
  width: 100%; height: 125%; object-fit: cover;
}
.split__media iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* min-height plus aspect-ratio transfers to a 347px minimum width, which
   overflows phones narrower than 395px; the ratio alone is enough there. */
@media (max-width: 700px) {
  .split__media { min-height: 0; }
}

/* —— Media logos —— */
.media-logos {
  margin-top: 36px;
  width: 100%;
  overflow: hidden;
}
.media-logos__track {
  display: flex;
  width: 100%;
}
.media-logos__group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  width: 100%;
  min-width: 0;
}
.media-logos__group--clone {
  display: none;
}
.media-logos img {
  height: auto;
  width: auto;
  max-height: 42px;
  max-width: 100%;
  object-fit: contain;
  flex: 0 0 auto;
  filter: grayscale(1) brightness(.2);
  opacity: .7;
}
@media (max-width: 700px) {
  .media-logos__track {
    width: max-content;
    animation: media-logos-marquee 28s linear infinite;
  }
  .media-logos__group {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 48px;
    padding-right: 48px;
  }
  .media-logos__group--clone {
    display: flex;
  }
  .media-logos img {
    max-height: 34px;
    max-width: none;
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .media-logos__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .media-logos__group {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }
  .media-logos__group--clone {
    display: none;
  }
}
@keyframes media-logos-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.chapter--olive .media-logos img {
  filter: brightness(0) invert(1); opacity: .75;
}

/* —— Instagram placeholders —— */
.ig-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) {
  .ig-grid { grid-template-columns: repeat(4, 1fr); }
}
.ig-tile {
  aspect-ratio: 9/16;
  background: center / cover no-repeat;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.ig-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(61,66,53,.45), transparent 50%);
}

/* —— Addiction cards: one substance, one authoritative destination —— */
.addict-grid {
  display: grid; gap: 16px; margin-top: 32px;
}
@media (min-width: 680px) {
  .addict-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
.addict-card {
  position: relative; min-height: 470px; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: clamp(24px, 2.4vw, 32px);
  color: #fff;
  background: var(--olive-dark);
  border-radius: var(--radius);
  min-width: 0;
}
.addict-card__img {
  position: absolute; inset: -12%; width: 124%; height: 124%;
  /* The global img reset clamps this to 100% and leaves the right 12% of the
     card uncovered, so the parallax headroom has to opt out of it. */
  max-width: none;
  object-fit: cover;
  /* Four stock photos from different libraries; desaturating pulls them into
     one palette and stops the betting screen's green fighting the olive. */
  filter: saturate(.6) contrast(1.04);
}
/* Heavy veil by design: the sources run from near-black to a bright odds
   board, and the copy has to hold legibly on all four. */
.addict-card__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(45,48,38,.97) 0%,
    rgba(45,48,38,.94) 46%,
    rgba(45,48,38,.74) 74%,
    rgba(45,48,38,.34) 100%);
}
@media (max-width: 679px) {
  /* Single column: the copy fills far more of the card, so the readable
     band has to start higher up. */
  .addict-card__veil {
    background: linear-gradient(to top,
      rgba(45,48,38,.97) 0%,
      rgba(45,48,38,.95) 64%,
      rgba(45,48,38,.85) 84%,
      rgba(45,48,38,.5) 100%);
  }
}
.addict-card__body { position: relative; z-index: 1; width: 100%; }
.addict-card__num {
  font-size: 11px; font-weight: 500; letter-spacing: .2em;
  color: var(--gold); margin-bottom: 10px;
}
.addict-card h3 {
  margin: 0 0 8px;
  font-size: clamp(21px, 2vw, 24px);
  font-weight: 300; line-height: 1.22; letter-spacing: -.015em;
}
.addict-card p {
  margin: 0 0 16px;
  font-size: 13.5px; font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,.84);
}
.addict-card__primary {
  display: inline-flex; align-items: center;
  padding: 11px 18px;
  border-radius: var(--radius);
  background: var(--gold); color: var(--olive-dark) !important;
  font-size: 10px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.addict-card__primary:hover { background: var(--gold-hover); color: var(--olive-dark) !important; transform: translateY(-2px); }
.addict-card__within {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.addict-card__within-lbl {
  margin: 0 0 10px;
  font-size: 9px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.addict-card__within ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px;
}
.addict-card__within a {
  display: inline-block;
  font-size: 13px; font-weight: 300;
  color: rgba(255,255,255,.86);
  border-bottom: 1px solid transparent;
  transition: color .35s ease, border-color .35s ease;
}
.addict-card__within a:hover,
.addict-card__within a:focus-visible { color: var(--gold); border-bottom-color: rgba(255,210,108,.5); }

/* —— Quote —— */
.quote {
  display: grid; gap: 32px; align-items: center;
  max-width: 900px; margin: 0 auto; text-align: center;
}
@media (min-width: 800px) {
  .quote { grid-template-columns: 160px 1fr; text-align: left; }
}
.quote__photo {
  width: 140px; height: 140px; border-radius: 50%;
  object-fit: cover; object-position: center 10%; margin: 0 auto;
}
.quote blockquote {
  margin: 0 0 16px;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 500; line-height: 1.55;
}
.chapter--olive .quote blockquote {
  background: none;
  border: 0;
  padding: 0;
  color: #fff;
  font-weight: 500;
}
.chapter--olive .quote blockquote p {
  margin: 0;
  font-size: inherit !important;
  font-weight: inherit;
  color: inherit;
}
.quote cite {
  font-style: normal; font-size: 14px; font-weight: 600;
  color: var(--gold);
}

/* —— Rooms —— */
.rooms-grid {
  display: grid; gap: 16px; margin-top: 32px;
}
@media (min-width: 800px) {
  .rooms-grid { grid-template-columns: repeat(3, 1fr); }
}
.room {
  background: var(--white); color: var(--olive);
  overflow: hidden;
  border-radius: var(--radius);
}
.chapter--cream .room { box-shadow: 0 0 0 1px rgba(69,72,59,.08); }
.room__img {
  aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.room__img img {
  width: 100%; height: 115%; object-fit: cover;
}
.room__body { padding: 20px 18px 24px; }
.room__body h3 {
  margin: 0 0 10px; font-size: 20px; font-weight: 600; color: var(--olive-mid);
}
.room__list {
  margin: 0; padding: 0; list-style: none;
  font-size: 13px; line-height: 1.7; opacity: .88;
}
.room__list li::before {
  content: "✓ ";
  color: var(--gold); font-weight: 600;
}

/* —— Outcomes videos —— */
.out-grid {
  display: grid; gap: 14px; margin-top: 28px;
}
@media (min-width: 800px) {
  .out-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 799px) {
  .out-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .out-grid::-webkit-scrollbar { display: none; }
  .out-vid {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}
@media (max-width: 799px) and (prefers-reduced-motion: reduce) {
  .out-grid { scroll-behavior: auto; }
}
.out-vid {
  position: relative; aspect-ratio: 16/10; background: #000; overflow: hidden;
  border-radius: var(--radius);
}
.out-vid iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* —— Results table —— */
.results {
  width: 100%; border-collapse: collapse; margin: 28px 0;
  font-size: 15px;
}
.results th, .results td {
  padding: 14px 12px; text-align: left;
  border-bottom: 1px solid rgba(69,72,59,.12);
}
.results th { font-weight: 600; color: var(--olive-mid); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.results td:last-child { color: var(--olive-mid); font-weight: 600; }
/* Four columns have a min-content width wider than a phone, so below 700px
   each row becomes a card and the <th> labels move into the cells. */
@media (max-width: 700px) {
  .results { display: block; margin: 26px 0 30px; }
  .results thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
  }
  .results tbody, .results tr, .results td { display: block; }
  .results tr {
    padding: 20px 22px 18px;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(69,72,59,.12);
    border-radius: var(--radius);
  }
  .results tr + tr { margin-top: 14px; }
  .results td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(69,72,59,.1);
  }
  .results td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 10px; font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--olive-dark);
  }
  .results td:first-child {
    display: block; padding: 0 0 15px;
    font-size: 21px; font-weight: 300; color: var(--olive);
  }
  .results td:first-child::before { content: none; }
  .results td:last-child {
    margin-top: 0; padding-bottom: 0;
    border-top: 0; border-bottom: 0;
    color: var(--olive); font-weight: 500;
  }
}
.results-note {
  font-size: 20px; font-weight: 600; color: var(--olive-mid); margin: 0 0 8px;
}

/* —— FAQs —— */
.faq { border-top: 1px solid rgba(69,72,59,.14); }
.faq:last-child { border-bottom: 1px solid rgba(69,72,59,.14); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  background: none; border: 0; cursor: pointer;
  font-size: 17px; font-weight: 600; color: var(--olive-mid); text-align: left;
}
.faq__q span:last-child {
  flex: 0 0 auto; color: var(--gold); font-size: 22px; line-height: 1;
}
.faq__a {
  display: none;
  padding: 0 0 18px;
  font-size: 16px; line-height: 1.6; opacity: .9;
  max-width: 62ch;
}
.faq.is-open .faq__a { display: block; }
.faq.is-open .faq__q span:last-child { transform: rotate(45deg); }

/* —— Blog —— */
.blog-grid {
  display: grid; gap: 20px; margin-top: 28px;
}
@media (min-width: 800px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}
.blog-card__img {
  aspect-ratio: 16/10; overflow: hidden; margin-bottom: 14px;
  background: var(--olive);
  border-radius: var(--radius);
}
.blog-card__img img {
  width: 100%; height: 115%; object-fit: cover;
}
.blog-card__meta {
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--olive-mid); margin-bottom: 8px;
}
.blog-card h3 {
  margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.3;
}
.blog-card p { margin: 0; font-size: 14px; line-height: 1.55; opacity: .85; }
.blog-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.blog-card__link:hover h3 { color: var(--olive-mid); }

/* Smash Balloon feed inside chapter grid */
.ig-grid--plugin {
  display: block;
}
.ig-grid--plugin #sb_instagram,
.ig-grid--plugin .sbi_feed_wrap {
  width: 100%;
}

/* —— Final CTA —— */
section.close {
  float: none;
  width: auto;
  opacity: 1;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-shadow: none;
}
.close {
  position: relative; overflow: hidden;
  padding: clamp(88px, 14vh, 130px) 0;
  text-align: center; color: #fff;
}
.close__bg {
  position: absolute; inset: -8% 0;
  background:
    linear-gradient(to top, rgba(61,66,53,.92), rgba(61,66,53,.55)),
    var(--close-bg-image, url("/wp-content/uploads/2026/05/DELAMERE_ENVIRONMENT_089_websize.webp")) center / cover no-repeat;
}
.close__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.close .cta-row { justify-content: center; }
.close__attrs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin: 0 0 28px; font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold);
}

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.is-in { opacity: 1; transform: none; }