@font-face {
  font-family: DrJKiwiLato;
  src: url('media/dr-jeneen-lato-regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: DrJKiwiLato;
  src: url('media/dr-jeneen-lato-bold.woff') format('woff');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* The homepage body class is added only while this interlude is enabled.
   Divi's page-container overflow otherwise traps the sticky stage. */
body.drj-kiwi-page { overflow-x: clip !important; }
body.drj-kiwi-page #page-container { overflow: clip visible !important; }

/* Preserve the following Divi divider's geometry while joining the white finale. */
#drj-kiwi-story + .et_pb_section > .et_pb_top_inside_divider {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100px' viewBox='0 0 1280 140' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath d='M1280 140V0H0l1280 140z'/%3E%3C/g%3E%3C/svg%3E") !important;
}

#drj-kiwi-story {
  --drj-progress: 0;
  --drj-one: 0;
  --drj-two: 0;
  --drj-final: 1;
  --drj-white: 1;
  --drj-ink-shift: 1;
  --drj-one-y: 0px;
  --drj-two-y: 20px;
  --drj-final-y: 0px;
  --drj-header-offset: 72px;
  --drj-logo-edge-strength: .5;
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  overflow: visible !important;
  background: #fff !important;
  color: #26371f;
  font-family: DrJKiwiLato, Lato, Arial, sans-serif;
  scroll-margin-top: calc(var(--drj-header-offset) + 16px);
}

#drj-kiwi-story,
#drj-kiwi-story *,
#drj-kiwi-story *::before,
#drj-kiwi-story *::after { box-sizing: border-box; }

#drj-kiwi-story.drj-kiwi-enhanced {
  height: 330vh;
  min-height: 2000px;
}

#drj-kiwi-story.drj-kiwi-motion {
  --drj-one: 1;
  --drj-two: 0;
  --drj-final: 0;
  --drj-white: 0;
  --drj-ink-shift: 0;
  --drj-final-y: 20px;
}

#drj-kiwi-story .drj-kiwi-stage {
  position: relative;
  top: 0;
  width: 100%;
  height: calc(100vh - var(--drj-header-offset));
  height: calc(100svh - var(--drj-header-offset));
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}

#drj-kiwi-story.drj-kiwi-enhanced .drj-kiwi-stage {
  position: sticky;
  top: var(--drj-header-offset);
}

#drj-kiwi-story .drj-kiwi-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transform: scale(calc(1.09 - var(--drj-progress) * .07));
  background: #26371f;
}

#drj-kiwi-story .drj-kiwi-poster,
#drj-kiwi-story .drj-kiwi-visual video,
#drj-kiwi-story .drj-kiwi-wash {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border: 0;
}

#drj-kiwi-story .drj-kiwi-visual video { opacity: 0; }
#drj-kiwi-story.drj-kiwi-video-ready .drj-kiwi-visual video { opacity: 1; }

#drj-kiwi-story .drj-kiwi-wash {
  background: linear-gradient(90deg, rgba(18,34,14,.83), rgba(22,40,16,.4) 50%, rgba(22,40,16,.2)),
    linear-gradient(0deg, rgba(18,34,14,.7), transparent 50%);
}

#drj-kiwi-story .drj-kiwi-grain {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: calc(.035 * (1 - var(--drj-white)));
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

#drj-kiwi-story .drj-kiwi-whiteout {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: #fff;
  opacity: var(--drj-white);
}

#drj-kiwi-story .drj-kiwi-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 50px 7vw;
  color: #f6f8ea;
  text-align: left;
}

#drj-kiwi-story .drj-kiwi-lines {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  min-height: 0;
}

#drj-kiwi-story .drj-kiwi-one,
#drj-kiwi-story .drj-kiwi-two {
  position: absolute;
  left: 0;
  margin: 0;
  padding: 0;
  color: #f6f8ea;
  font-family: DrJKiwiLato, Lato, Arial, sans-serif;
  font-size: clamp(76px, 11.5vw, 166px);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .92;
}

#drj-kiwi-story .drj-kiwi-one em,
#drj-kiwi-story .drj-kiwi-two em {
  color: #d3ed87;
  font-family: Georgia, serif;
  font-weight: 400;
}

#drj-kiwi-story .drj-kiwi-one {
  opacity: var(--drj-one);
  transform: translateY(var(--drj-one-y));
}

#drj-kiwi-story .drj-kiwi-two {
  opacity: var(--drj-two);
  transform: translateY(var(--drj-two-y));
}

#drj-kiwi-story .drj-kiwi-final {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: var(--drj-final);
  transform: translateY(var(--drj-final-y));
}

/* The original image remains unfiltered. Only its separate, identical
   background copy carries the pale edge; both align at the native ratio. */
#drj-kiwi-story .drj-kiwi-logo {
  position: relative;
  isolation: isolate;
  width: min(640px, 67vw, max(140px, calc((100vh - var(--drj-header-offset) - 280px) * 1.48954)));
  width: min(640px, 67vw, max(140px, calc((100svh - var(--drj-header-offset) - 280px) * 1.48954)));
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#drj-kiwi-story .drj-kiwi-logo::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: url('media/better-health-solutions-full-logo.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 1px #f1f4e6) drop-shadow(0 0 2px rgba(227,237,207,.95));
  opacity: calc(var(--drj-logo-edge-strength) * (1 - var(--drj-white)));
}

#drj-kiwi-story .drj-kiwi-logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
}

#drj-kiwi-story .drj-kiwi-name {
  position: relative;
  z-index: 1;
  margin: 30px 0 0;
  padding: 0;
  color: #26371f;
  color: color-mix(in srgb, #f6f8ea, #26371f calc(var(--drj-ink-shift) * 100%));
  font-family: DrJKiwiLato, Lato, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  text-shadow: 0 2px 16px rgb(20 36 12 / calc(.6 * (1 - var(--drj-ink-shift))));
}

#drj-kiwi-story .drj-kiwi-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 0;
  color: #52634a;
  color: color-mix(in srgb, #e5ead8, #52634a calc(var(--drj-ink-shift) * 100%));
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.5;
}

#drj-kiwi-story .drj-kiwi-count {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: .1em;
}

#drj-kiwi-story .drj-kiwi-count b { font-weight: 400; }
#drj-kiwi-story .drj-kiwi-count span {
  display: block;
  width: 100px;
  height: 1px;
  background: #cdd5c5;
  background: color-mix(in srgb, #ffffff50, #cdd5c5 calc(var(--drj-white) * 100%));
}
#drj-kiwi-story .drj-kiwi-count span::before {
  content: "";
  display: block;
  width: calc(var(--drj-progress) * 100%);
  height: 100%;
  background: #a6cf11;
}

#drj-kiwi-story .drj-kiwi-progress {
  position: absolute;
  z-index: 6;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  background: #a6cf1122;
}
#drj-kiwi-story .drj-kiwi-progress span {
  display: block;
  width: calc(var(--drj-progress) * 100%);
  height: 100%;
  background: #a6cf11;
}

#drj-kiwi-story .drj-kiwi-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;
}

/* A paused or uninitialized scene is complete and readable. Its enhanced
   scroll height is retained when paused, so the page cannot jump. */
#drj-kiwi-story:not(.drj-kiwi-motion) .drj-kiwi-visual,
#drj-kiwi-story.drj-kiwi-paused .drj-kiwi-visual,
#drj-kiwi-story:not(.drj-kiwi-motion) .drj-kiwi-grain,
#drj-kiwi-story.drj-kiwi-paused .drj-kiwi-grain,
#drj-kiwi-story:not(.drj-kiwi-motion) .drj-kiwi-one,
#drj-kiwi-story.drj-kiwi-paused .drj-kiwi-one,
#drj-kiwi-story:not(.drj-kiwi-motion) .drj-kiwi-two,
#drj-kiwi-story.drj-kiwi-paused .drj-kiwi-two,
#drj-kiwi-story:not(.drj-kiwi-motion) .drj-kiwi-logo::after,
#drj-kiwi-story.drj-kiwi-paused .drj-kiwi-logo::after { opacity: 0; }
#drj-kiwi-story:not(.drj-kiwi-motion) .drj-kiwi-whiteout,
#drj-kiwi-story.drj-kiwi-paused .drj-kiwi-whiteout { opacity: 1; }
#drj-kiwi-story:not(.drj-kiwi-motion) .drj-kiwi-final,
#drj-kiwi-story.drj-kiwi-paused .drj-kiwi-final { opacity: 1; transform: none; }
#drj-kiwi-story:not(.drj-kiwi-motion) .drj-kiwi-name,
#drj-kiwi-story.drj-kiwi-paused .drj-kiwi-name { color: #26371f; text-shadow: none; }
#drj-kiwi-story:not(.drj-kiwi-motion) .drj-kiwi-footer,
#drj-kiwi-story.drj-kiwi-paused .drj-kiwi-footer { color: #52634a; }
#drj-kiwi-story:not(.drj-kiwi-motion) .drj-kiwi-count,
#drj-kiwi-story.drj-kiwi-paused .drj-kiwi-count { visibility: hidden; }
#drj-kiwi-story:not(.drj-kiwi-motion) .drj-kiwi-progress,
#drj-kiwi-story.drj-kiwi-paused .drj-kiwi-progress { display: none; }

@media (max-width: 700px) {
  body.drj-kiwi-page.drj-kiwi-in-view .et_pb_side_nav { visibility: hidden; pointer-events: none; }
  #drj-kiwi-story.drj-kiwi-enhanced { height: 300vh; height: 300svh; min-height: 1800px; }
  #drj-kiwi-story .drj-kiwi-content { padding: 30px 7vw 36px; }
  #drj-kiwi-story .drj-kiwi-one,
  #drj-kiwi-story .drj-kiwi-two { font-size: clamp(66px,18vw,120px); }
  #drj-kiwi-story .drj-kiwi-logo {
    width: min(100%, 430px, max(140px, calc((100vh - var(--drj-header-offset) - 235px) * 1.48954)));
    width: min(100%, 430px, max(140px, calc((100svh - var(--drj-header-offset) - 235px) * 1.48954)));
  }
  #drj-kiwi-story .drj-kiwi-name { margin-top: 30px; font-size: 19px; }
  #drj-kiwi-story .drj-kiwi-footer { font-size: 10px; }
  #drj-kiwi-story .drj-kiwi-count { gap: 8px; font-size: 9px; }
  #drj-kiwi-story .drj-kiwi-count span { width: 36px; }
}

/* Keep the logo and typography comfortable in short landscape viewports. */
@media (max-height: 540px) {
  #drj-kiwi-story .drj-kiwi-content { padding: 16px 7vw 20px; }
  #drj-kiwi-story .drj-kiwi-one,
  #drj-kiwi-story .drj-kiwi-two { font-size: clamp(42px,14svh,76px); }
  #drj-kiwi-story .drj-kiwi-logo {
    width: min(430px, 55vw, max(110px, calc((100vh - var(--drj-header-offset) - 150px) * 1.48954)));
    width: min(430px, 55vw, max(110px, calc((100svh - var(--drj-header-offset) - 150px) * 1.48954)));
  }
  #drj-kiwi-story .drj-kiwi-name { margin-top: 12px; font-size: 16px; }
  #drj-kiwi-story .drj-kiwi-footer { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  #drj-kiwi-story.drj-kiwi-enhanced:not(.drj-kiwi-motion):not(.drj-kiwi-paused) { height: auto; min-height: 0; }
  #drj-kiwi-story.drj-kiwi-enhanced:not(.drj-kiwi-motion):not(.drj-kiwi-paused) .drj-kiwi-stage { position: relative; top: 0; }
  #drj-kiwi-story *,
  #drj-kiwi-story *::before,
  #drj-kiwi-story *::after { transition: none !important; animation: none !important; }
}
