/* wendy-road.css — Wendy Road page
 * Source: Figma — Full prototype V4 → Wendy Road (989:1680) at 1728px
 * Sections: hero, VSL, exclusivity teal (w/ bg image + bowls), hand-picking, Continuum (dark)
 */

.site-main--wendy-road {
  background: var(--bg, #F2E8D4);
  color: var(--brand, #183A40);
}

/* ===========================
 * Hero — centered title with underline + lead
 * =========================== */
.wr-hero {
  background: var(--bg);
  padding-block: clamp(3rem, 5.85vw, 6.25rem) clamp(3rem, 5.85vw, 6.25rem);
}

.wr-hero__inner {
  max-width: 1728px;
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2rem, 4.05vw, 4.375rem);
  width: 100%;
}

.wr-hero__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 6.25vw, 6.75rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.333;
  color: #561F33;
  letter-spacing: 0;
}

.wr-hero__title-emph {
  position: relative;
  display: inline-block;
}

.wr-hero__title strong {
  font-weight: 700;
}

.wr-hero__underline {
  position: absolute;
  left: 42%;
  bottom: -0.22em;
  width: 56%;
  height: auto;
  pointer-events: none;
}

.wr-hero__lead {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.35vw, 1.5rem);
  line-height: 1.25;
  color: #561F33;
  max-width: 1236px;
  letter-spacing: -0.01em;
}

.wr-hero__ctas {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 401px));
  gap: clamp(1rem, 2vw, 2rem);
  justify-content: center;
  width: 100%;
}

.btn-layout.hollow.wr-hero__btn {
  min-height: 81px;
  color: #561F33;
  border-color: #561F33;
}

.btn-layout.hollow.wr-hero__btn:hover,
.btn-layout.hollow.wr-hero__btn:focus-visible {
  background: #561F33;
  color: var(--bg, #F2E8D4);
}

/* ===========================
 * VSL — maroon bg, split text/video
 * =========================== */
.wr-vsl {
  background: var(--bg);
  color: var(--bg, #F2E8D4);
  padding-block: 0 clamp(5rem, 4.63vw, 5rem);
  overflow: hidden;
}

.wr-vsl__inner {
  max-width: 1728px;
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 90px);
}

.wr-vsl__label {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 8.1vw, 8.75rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.19;
  color: var(--bg, #F2E8D4);
  letter-spacing: 0;
  text-align: center;
}

.wr-vsl__label em {
  font-style: italic;
  font-weight: 900;
  display: block;
}

.wr-vsl__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(1.75rem, 3.3vw, 3.5rem);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.31vw, 2.5rem);
  font-weight: 700;
  line-height: 1.333;
  color: var(--bg, #F2E8D4);
  text-decoration: none;
  cursor: pointer;
}

.wr-vsl__btn::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0;
  border-top: 0.7em solid transparent;
  border-bottom: 0.7em solid transparent;
  border-left: 1.05em solid currentColor;
  border-radius: 0.16em;
  opacity: 0;
  transform: translateX(-0.25em) scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease, margin-left 0.2s ease;
}

.wr-vsl__btn:hover,
.wr-vsl__btn:focus-visible {
  color: var(--bg, #F2E8D4);
  text-decoration: none;
}

.wr-vsl__btn:hover::after,
.wr-vsl__btn:focus-visible::after {
  margin-left: 0.7em;
  opacity: 1;
  transform: translateX(0) scale(1);
}

.wr-vsl__media {
  position: relative;
  width: 100%;
  max-width: 1568px;
  aspect-ratio: 1485 / 827;
  overflow: hidden;
  border-radius: 6px;
  margin-inline: auto;
}

.wr-vsl__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wr-vsl__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(86, 31, 51, 1) 0%, rgba(86, 31, 51, 0.98) 34%, rgba(86, 31, 51, 0.58) 58%, rgba(86, 31, 51, 0) 76%),
    linear-gradient(0deg, rgba(86, 31, 51, 0.2), rgba(86, 31, 51, 0.2));
}

.wr-vsl__media::after {
  content: none;
}

.wr-vsl__media .wr-vsl__shape {
  position: absolute;
  left: clamp(-135px, -6.5vw, -64px);
  bottom: clamp(-112px, -5.4vw, -54px);
  z-index: 2;
  width: clamp(260px, 25vw, 430px);
  max-width: none;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.wr-vsl__overlay {
  position: absolute;
  z-index: 3;
  left: clamp(60px, 10vw, 168px);
  top: 50%;
  transform: translateY(-50%);
  width: min(52%, 790px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wr-vsl__video {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.wr-vsl__media.is-playing > img:not(.wr-vsl__shape),
.wr-vsl__media.is-playing .wr-vsl__shape,
.wr-vsl__media.is-playing .wr-vsl__overlay,
.wr-vsl__media.is-playing::before {
  opacity: 0;
  pointer-events: none;
}

/* ===========================
 * Exclusivity — teal bg, hero-style with bg image overlay + bowls
 * =========================== */
.wr-exclusive {
  position: relative;
  background: var(--brand, #183A40);
  color: var(--bg, #F2E8D4);
  min-height: 1229px;
  padding-block: clamp(6rem, 8.68vw, 9.375rem);
  overflow: hidden;
  isolation: isolate;
}

.wr-exclusive__shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: clamp(240px, 21.4vw, 369px);
  height: auto;
}

.wr-exclusive__shape--tr {
  top: 0;
  right: 0;
  transform: translate(18%, -18%) rotate(180deg);
}

.wr-exclusive__shape--bl {
  bottom: 0;
  left: 0;
  transform: translate(-18%, 20%);
}

.wr-exclusive__inner {
  position: relative;
  z-index: 2;
  max-width: 1728px;
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2rem, 4.05vw, 4.375rem);
  min-height: calc(1229px - clamp(12rem, 17.36vw, 18.75rem));
}

.wr-exclusive__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 8.1vw, 8.75rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.333;
  color: var(--bg, #F2E8D4);
  letter-spacing: -0.005em;
}

.wr-exclusive__title em {
  font-style: italic;
  font-weight: 900;
}

.wr-exclusive__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1548px;
}

.wr-exclusive__body p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.74vw, 1.875rem);
  line-height: 1.333;
  color: var(--bg, #F2E8D4);
}

.wr-exclusive__body p:nth-child(2) {
  font-weight: 700;
  font-size: clamp(1.85rem, 2.31vw, 2.5rem);
}

.wr-exclusive__stat {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 2.31vw, 2.5rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.333;
  color: var(--bg, #F2E8D4);
  letter-spacing: -0.01em;
}

.wr-exclusive__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3rem, 5.78vw, 6.25rem);
  margin-top: 0;
  width: 100%;
}

.wr-exclusive__invitation {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 4.1vw, 4.4375rem);
  font-weight: 700;
  line-height: 1.333;
  color: var(--bg, #F2E8D4);
  text-align: center;
}

.btn-layout.hollow.wr-exclusive__cta-secondary {
  border-color: var(--bg, #F2E8D4);
  color: var(--bg, #F2E8D4);
  min-width: min(100%, 401px);
}

.btn-layout.hollow.wr-exclusive__cta-secondary:hover,
.btn-layout.hollow.wr-exclusive__cta-secondary:focus-visible {
  background: #561F33;
  border-color: #561F33;
  color: var(--bg, #F2E8D4);
}

/* ===========================
 * Hand-picking — cream centered italic quote
 * =========================== */
.wr-picking {
  background: var(--bg);
  padding-block: clamp(4rem, 5.21vw, 5.625rem);
}

.wr-picking__inner {
  max-width: 1728px;
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 90px);
  text-align: center;
}

.wr-picking__quote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.62vw, 1.75rem);
  font-style: normal;
  font-weight: 500;
  line-height: 2.32;
  color: var(--brand, #183A40);
  letter-spacing: 0;
}

.wr-picking__quote em {
  color: #561F33;
  font-style: italic;
  font-weight: 700;
}

/* ===========================
 * Continuum — black bg with text + photo + agency label
 * =========================== */
.wr-continuum {
  position: relative;
  background: #000000;
  color: var(--brand, #183A40);
  padding: 90px;
  min-height: 1603px;
  isolation: isolate;
  overflow: hidden;
}

.wr-continuum__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.wr-continuum__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) contrast(0.75);
}

.wr-continuum__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(86, 31, 51, 0.12);
}

.wr-continuum__inner {
  position: relative;
  z-index: 1;
  max-width: 1548px;
  margin-inline: auto;
  padding: clamp(4rem, 5.78vw, 6.25rem) clamp(2rem, 3.47vw, 3.75rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title body"
    "media media"
    "agencyBody agencyTitle";
  gap: clamp(3rem, 5.67vw, 6.125rem) clamp(3rem, 5.27vw, 5.6875rem);
  align-items: center;
  background: var(--bg, #F2E8D4);
  min-height: 1423px;
}

.wr-continuum__col {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.75vw, 1.5rem);
}

.wr-continuum__col--label {
  align-items: center;
  text-align: center;
  grid-area: agencyTitle;
}

.wr-continuum__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 6.25vw, 6.75rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.95;
  color: #561F33;
  letter-spacing: -0.005em;
  text-align: center;
}

.wr-continuum__title span {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(2.2rem, 3.47vw, 3.75rem);
  line-height: 1.333;
}

.wr-continuum__title em {
  font-style: italic;
  font-weight: 900;
}

.wr-continuum__body {
  margin: 0;
  grid-area: body;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.56vw, 1.6875rem);
  line-height: 1.333;
  color: var(--brand, #183A40);
  text-align: center;
}

.wr-continuum__col--media {
  grid-area: media;
  align-self: center;
  justify-self: center;
  width: min(100%, 740px);
}

.wr-continuum__col--media img {
  width: 100%;
  height: auto;
  aspect-ratio: 740 / 639;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.wr-continuum__col--text {
  grid-area: title;
}

.wr-continuum__agency-body {
  grid-area: agencyBody;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.56vw, 1.6875rem);
  line-height: 1.333;
  color: var(--brand, #183A40);
  text-align: center;
}

/* ===========================
 * Responsive — 1399px
 * =========================== */
@media (max-width: 1399px) {
  .wr-continuum__inner {
    gap: clamp(1.5rem, 3.5vw, 3.5rem);
  }
}

/* ===========================
 * Responsive — 991px (tablet)
 * =========================== */
@media (max-width: 991px) {
  .wr-continuum__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "body"
      "media"
      "agencyBody"
      "agencyTitle";
    gap: 2rem;
    min-height: auto;
  }

  .wr-vsl__overlay {
    left: 24px;
    width: min(58%, 520px);
  }

  .wr-exclusive {
    min-height: auto;
  }

  .wr-exclusive__inner {
    min-height: auto;
  }
}

/* ===========================
 * Responsive — 767px (mobile)
 * =========================== */
@media (max-width: 767px) {
  .wr-hero__title,
  .wr-exclusive__title {
    font-size: clamp(2.5rem, 12vw, 4.5rem);
  }

  .wr-vsl__label {
    font-size: clamp(2.5rem, 11vw, 4rem);
  }

  .wr-exclusive__stat {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .wr-hero__ctas {
    grid-template-columns: 1fr;
  }

  .wr-vsl__media {
    aspect-ratio: 16 / 9;
  }

  .wr-vsl__label {
    font-size: clamp(2.25rem, 12vw, 4rem);
  }

  .wr-vsl__btn {
    font-size: clamp(1.25rem, 6vw, 2rem);
    margin-top: 1rem;
  }

  .wr-vsl__media::after {
    width: 84px;
  }

  .wr-picking__quote {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    line-height: 1.5;
  }

  .wr-continuum__title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .wr-continuum {
    min-height: auto;
  }

  .wr-exclusive__ctas .btn-layout {
    width: 100%;
  }
}

/* ===========================
 * Responsive — 575px (small mobile)
 * =========================== */
@media (max-width: 575px) {
  .wr-hero__inner,
  .wr-vsl__inner,
  .wr-exclusive__inner,
  .wr-picking__inner,
  .wr-continuum__inner {
    padding-inline: 18px;
  }
}