.discovery-page {
  color: #192d00;
  background: #fff;
}

.discovery-page .site-header {
  color: #fff;
}

.discovery-mobile-break {
  display: none;
}

.discovery-hero {
  position: relative;
  isolation: isolate;
  height: clamp(440px, 38.85vw, 746px);
  min-height: 440px;
  overflow: hidden;
  background: #07130a;
}

.discovery-hero-background,
.discovery-hero-shade {
  position: absolute;
  inset: 0;
}

.discovery-hero-background {
  z-index: -3;
  background: url("../assets/hero-discovery.jpg") center / cover no-repeat;
  transform: scale(1.025);
}

.discovery-hero-shade {
  z-index: -2;
  background:
    radial-gradient(circle at 50% 48%, rgba(0, 17, 7, 0.04), rgba(0, 12, 4, 0.48) 100%),
    linear-gradient(90deg, rgba(1, 11, 4, 0.42), transparent 44%, rgba(1, 11, 4, 0.36));
}

.discovery-foliage {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}

.discovery-foliage img {
  display: block;
  width: 100%;
  height: auto;
}

.discovery-foliage-left-top {
  top: -6%;
  left: -2%;
  width: clamp(225px, 23vw, 440px);
}

.discovery-foliage-right-top {
  top: -5%;
  right: -1%;
  width: clamp(190px, 20vw, 385px);
}

.discovery-foliage-left-bottom {
  bottom: -8%;
  left: -3%;
  width: clamp(210px, 20vw, 385px);
}

.discovery-foliage-right-bottom {
  right: -4%;
  bottom: -15%;
  width: clamp(290px, 29vw, 555px);
}

.discovery-hero-title-wrap {
  position: absolute;
  z-index: 8;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.discovery-hero-title-wrap h1,
.discovery-story h2,
.difference-section h2,
.finest-content h2,
.promise-section h2,
.discovery-cta h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
}

.discovery-hero-title-wrap h1 {
  margin: 0;
  color: #9bdf35;
  background: linear-gradient(180deg, #f4f5ef 0%, #e9eee2 36%, #a9e74b 70%, #62bd04 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 4px 2px rgba(0, 12, 5, 0.38));
  font-size: clamp(4.2rem, 7.25vw, 8.7rem);
  letter-spacing: -0.018em;
  white-space: nowrap;
}

.discovery-title-parrot {
  position: absolute;
  z-index: 2;
  top: -122%;
  left: -35%;
  width: clamp(125px, 15vw, 245px);
  max-width: none;
  height: auto;
  pointer-events: none;
}

.discovery-story {
  min-height: clamp(300px, 25.25vw, 485px);
  display: grid;
  place-items: center;
  padding: clamp(55px, 5vw, 96px) 0;
  background: linear-gradient(180deg, #dcebf2 0%, #f6fafc 60%, #fff 100%);
}

.discovery-story-inner {
  width: min(44%, 845px);
  text-align: center;
}

.discovery-story h2 {
  margin: 0;
  color: #376b04;
  background: linear-gradient(180deg, #315e02, #4f9004 55%, #87d41d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(3.3rem, 4.3vw, 5.15rem);
}

.discovery-story h2 span,
.difference-section h2 span,
.finest-content h2 span,
.discovery-cta h2 span {
  display: block;
}

.discovery-story p {
  max-width: 700px;
  margin: clamp(18px, 1.6vw, 30px) auto 0;
  font-size: clamp(0.73rem, 0.84vw, 1rem);
  line-height: 1.55;
}

.difference-section {
  position: relative;
  isolation: isolate;
  min-height: clamp(650px, 70.2vw, 1100px);
  overflow: hidden;
  color: #fff;
  background: url("../assets/bg-why.png") center / cover no-repeat;
  background-color: #142014;
}

.difference-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(21, 46, 25, 0.26), rgba(3, 19, 8, 0.7) 74%),
    rgba(3, 20, 9, 0.67);
}

.difference-foliage-left {
  top: 0%;
  left: 0%;
  width: clamp(220px, 22vw, 420px);
}

.difference-foliage-right {
  right: 0%;
  bottom: 0%;
  width: clamp(280px, 27vw, 520px);
}

.difference-inner {
  position: relative;
  height: clamp(650px, 70.2vw, 1100px);
}

.difference-section h2 {
  position: absolute;
  z-index: 7;
  top: 11%;
  left: 50%;
  width: 100%;
  margin: 0;
  color: #4c8b04;
  background: linear-gradient(180deg, #2c5702, #498602 55%, #78c810);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(3.6rem, 5.45vw, 6.5rem);
  text-align: center;
  transform: translateX(-50%);
}

.difference-bottle {
  position: absolute;
  z-index: 5;
  top: 30%;
  left: 50%;
  height: 59%;
  transform: translateX(-50%) rotate(27deg);
  filter: drop-shadow(25px 30px 25px rgba(0, 0, 0, 0.36));
}

.difference-bottle img {
  display: block;
  width: auto;
  height: 100%;
}

.difference-points {
  position: absolute;
  z-index: 6;
  inset: 0;
}

.difference-point {
  position: absolute;
  width: clamp(175px, 19vw, 315px);
  color: #fff;
}

.difference-point h3 {
  margin: 0 0 11px;
  font-size: clamp(0.72rem, 0.83vw, 1rem);
  font-weight: 500;
}

.difference-point p {
  max-width: 220px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.6rem, 0.66vw, 0.8rem);
  line-height: 1.55;
}

.difference-point > span {
  position: relative;
  display: block;
  height: 9px;
  margin-top: 17px;
  border-bottom: 1px dashed rgba(102, 151, 51, 0.56);
}

.difference-point > span::before {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 11px;
  height: 11px;
  border: 3px solid #65a80b;
  border-radius: 3px;
}

.difference-point-source {
  top: 38%;
  left: 18%;
}

.difference-point-filtered {
  top: 58%;
  left: 11%;
}

.difference-point-minerals {
  top: 38%;
  right: 14%;
}

.difference-point-taste {
  top: 58%;
  right: 7%;
}

.difference-point-recycled {
  top: 77%;
  right: 26%;
}

.difference-point-source > span,
.difference-point-filtered > span {
  margin-right: -22%;
}

.difference-point-source > span::before,
.difference-point-filtered > span::before {
  left: 0;
}

.difference-point-minerals > span,
.difference-point-taste > span,
.difference-point-recycled > span {
  margin-left: -22%;
}

.difference-point-minerals > span::before,
.difference-point-taste > span::before,
.difference-point-recycled > span::before {
  right: 0;
}

.finest-section {
  min-height: clamp(510px, 53.3vw, 1025px);
  display: grid;
  place-items: center;
  padding: clamp(60px, 6.5vw, 125px) 0;
  background: linear-gradient(180deg, #dcebf2 0%, #f9fcfd 72%, #fff 100%);
}

.finest-inner {
  width: min(80%, 1535px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(60px, 6.5vw, 125px);
}

.finest-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(19px, 1.6vw, 30px);
}

.finest-content h2 {
  margin: 0;
  color: #3e7603;
  background: linear-gradient(180deg, #315e02, #4f9004 55%, #87d41d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(3.4rem, 5.15vw, 6.2rem);
}

.finest-intro {
  max-width: 530px;
  margin: clamp(18px, 1.8vw, 34px) 0 clamp(28px, 3vw, 58px);
  font-size: clamp(0.68rem, 0.78vw, 0.94rem);
  line-height: 1.5;
}

.finest-note {
  padding: clamp(32px, 3.2vw, 62px);
  border: 1px solid #6ea7cf;
  border-radius: clamp(13px, 1vw, 20px);
  background: rgba(231, 241, 246, 0.7);
}

.finest-note > p {
  margin: 0;
  font-size: clamp(0.67rem, 0.73vw, 0.88rem);
  line-height: 1.65;
}

.finest-note > div {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 2.5vw, 48px);
  margin-top: clamp(25px, 2.4vw, 46px);
}

.finest-note span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(0.65rem, 0.72vw, 0.86rem);
  font-weight: 500;
}

.finest-note span img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.discovery-page .discovery-minerals {
  height: clamp(610px, 63.65vw, 1000px);
  margin-top: 0;
  padding-bottom: 0;
}

.discovery-page .discovery-minerals .minerals-water-layer {
  background: url("../assets/bg-white.png") center top / 100% 100% no-repeat;
}

.discovery-page .discovery-minerals .minerals-bottle-frame {
  top: 35%;
  left: 45%;
  height: 58%;
}

.discovery-page .discovery-minerals .mineral-nitrate {
  top: 31%;
}

.discovery-page .discovery-minerals .mineral-calcium {
  top: 43%;
}

.discovery-page .discovery-minerals .mineral-fluoride {
  top: 48%;
}

.discovery-page .discovery-minerals .mineral-potassium {
  top: 57%;
}

.discovery-page .discovery-minerals .mineral-chloride {
  top: 65%;
}

.discovery-page .discovery-minerals .mineral-sulphate {
  top: 60%;
}

.discovery-page .discovery-minerals .mineral-magnesium {
  top: 57%;
}

.discovery-page .discovery-minerals .mineral-sodium {
  top: 82%;
}

.discovery-page .discovery-minerals .mineral-bicarbonate {
  top: 76%;
}

.promise-section {
  position: relative;
  isolation: isolate;
  min-height: clamp(485px, 50.4vw, 968px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.promise-water-layer {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("../assets/bg-white.png") center top / 100% 100% no-repeat;
}

.promise-inner {
  width: min(68%, 1305px);
  padding-top: clamp(100px, 10vw, 190px);
  text-align: center;
}

.promise-section h2 {
  margin: 0;
  color: #4b8b04;
  background: linear-gradient(180deg, #315e02, #4f9004 55%, #87d41d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(3.2rem, 4.5vw, 5.4rem);
}

.promise-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(35px, 3.7vw, 70px);
}

.promise-cards article {
  min-height: clamp(150px, 15.8vw, 303px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(28px, 3vw, 58px);
  border: 1px solid rgba(104, 164, 204, 0.68);
  border-radius: clamp(13px, 1.2vw, 22px);
  text-align: left;
  background: rgba(219, 236, 244, 0.48);
}

.promise-cards article > img {
  width: clamp(28px, 2.5vw, 48px);
  height: clamp(28px, 2.5vw, 48px);
  margin-bottom: auto;
  object-fit: contain;
}

.promise-cards h3 {
  margin: clamp(25px, 2.6vw, 50px) 0 12px;
  font-size: clamp(0.8rem, 0.88vw, 1.05rem);
  font-weight: 500;
}

.promise-cards article > span {
  width: 17px;
  height: 1px;
  margin-bottom: 13px;
  background: #617856;
}

.promise-cards p {
  margin: 0;
  font-size: clamp(0.57rem, 0.63vw, 0.76rem);
  line-height: 1.5;
}

.promise-button,
.discovery-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: #4e850d;
  font-size: 11px;
  text-transform: uppercase;
  transition: background-color 180ms ease, transform 180ms ease;
}

.promise-button {
  min-width: clamp(115px, 12vw, 180px);
  min-height: clamp(35px, 3vw, 48px);
  margin-top: clamp(28px, 3vw, 56px);
}

.promise-button:hover,
.promise-button:focus-visible,
.discovery-cta a:hover,
.discovery-cta a:focus-visible {
  background: #71b91b;
  transform: translateY(-2px);
}

.discovery-cta {
  position: relative;
  isolation: isolate;
  min-height: clamp(190px, 19.8vw, 380px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: url("../assets/hero-discovery.jpg") center 58% / cover no-repeat;
}

.discovery-cta-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(0, 20, 8, 0.7);
}

.discovery-cta-content {
  text-align: center;
}

.discovery-cta h2 {
  margin: 0;
  color: #4c8b04;
  background: linear-gradient(180deg, #315e02, #4f9004 55%, #87d41d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2.8rem, 4vw, 4.8rem);
}

.discovery-cta a {
  min-width: clamp(85px, 8vw, 125px);
  min-height: clamp(32px, 2.7vw, 43px);
  margin-top: clamp(14px, 1.4vw, 26px);
}
section.minerals-section.discovery-minerals {
    background-color: #fafbfb;
}

@media (max-width: 1024px) {
  /* .discovery-title-parrot {
    display: none;
  } */

  .discovery-title-parrot {
    position: absolute;
    z-index: 2;
    top: -140%;
    left: 0px;
    right:0px;
    margin:0px auto;
  }
  .discovery-story-inner {
    width: min(calc(100% - 48px), 680px);
  }

  .difference-point-source {
    left: 8%;
  }

  .difference-point-filtered {
    left: 4%;
  }

  .difference-point-minerals {
    right: 7%;
  }

  .difference-point-taste {
    right: 3%;
  }

  .finest-inner {
    width: min(calc(100% - 48px), 850px);
  }

  .promise-inner {
    width: min(calc(100% - 48px), 850px);
  }
}

@media (max-width: 900px) {
  .discovery-hero {
    height: 430px;
    min-height: 430px;
  }

  .difference-section {
    min-height: 0;
    padding: 85px 0;
  }

  .difference-inner {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .difference-section h2,
  .difference-bottle,
  .difference-points {
    position: relative;
    inset: auto;
    transform: none;
  }

  .difference-section h2 {
    font-size: clamp(3.4rem, 10vw, 5.5rem);
  }

  .difference-bottle {
    height: 470px;
    margin: 40px auto;
    transform: rotate(20deg);
  }

  .difference-points {
    width: min(100%, 680px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .difference-point {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 145px;
    padding: 24px;
    border: 1px solid rgba(102, 168, 29, 0.55);
    border-radius: 18px;
    background: rgba(19, 39, 21, 0.78);
  }

  .difference-point > span {
    display: none;
  }

  .finest-section {
    padding: 85px 0;
  }

  .finest-inner {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .finest-content {
    max-width: 680px;
  }

  .discovery-page .discovery-minerals {
    height: 900px;
    min-height: 900px;
    padding: 0;
  }

  .discovery-page .discovery-minerals .minerals-water-layer {
    background-size: auto 100%;
  }

  .promise-section {
    padding: 90px 0;
  }

  .promise-inner {
    padding-top: 200px;
  }

  .promise-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .promise-button {
    min-width: clamp(140px, 12vw, 180px);
  }
}

@media (max-width: 640px) {
  .discovery-mobile-break {
    display: block;
  }

  .discovery-hero-title-wrap {
    width: calc(100% - 40px);
    text-align: center;
  }

  .discovery-hero-title-wrap h1 {
    font-size: clamp(3rem, 14vw, 4.6rem);
    white-space: normal;
  }

  .discovery-foliage-left-top {
    width: 175px;
  }

  .discovery-foliage-right-top {
    width: 160px;
  }

  .discovery-foliage-left-bottom,
  .discovery-foliage-right-bottom {
    width: 190px;
  }

  .discovery-story {
    padding: 75px 0;
  }

  .discovery-story-inner {
    width: calc(100% - 32px);
  }

  .discovery-story h2,
  .finest-content h2 {
    font-size: clamp(2.8rem, 11vw, 4rem);
  }

  .discovery-story h2,
  .difference-section h2,
  .discovery-cta h2 {
    width: 100%;
    text-align: center;
  }

  .difference-section h2 {
    font-size: clamp(2.9rem, 11vw, 4.2rem);
  }

  .difference-inner {
    width: calc(100% - 32px);
  }

  .difference-bottle {
    height: 390px;
  }

  .difference-points {
    grid-template-columns: 1fr;
  }

  .finest-inner {
    width: calc(100% - 32px);
  }

  .finest-note {
    padding: 26px 22px;
  }

  .discovery-page .discovery-minerals {
    height: 820px;
    min-height: 820px;
  }

  .promise-inner {
    width: calc(100% - 32px);
  }

  .promise-section h2 {
    font-size: clamp(2.8rem, 12vw, 4.2rem);
  }

  .discovery-cta {
    min-height: 260px;
  }

  .discovery-cta h2 {
    font-size: clamp(2.5rem, 10.5vw, 3.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .discovery-hero-background,
  .discovery-foliage {
    transform: none;
  }
}