
@font-face {
    font-family: 'Termina';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Termina-Regular.woff2') format('woff2'),
         url('../fonts/Termina-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Termina';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Termina-Medium.woff2') format('woff2'),
         url('../fonts/Termina-Medium.woff') format('woff');
}

.thrive-start-section__button-text .mobile-label {
  display: none;
}

.standard-section {
overflow: visible !important;}

.standard-section__marquee {
position: relative !important;
z-index: 10 !important;
width: 100vw !important;
max-width: none !important;
transform: translateX(-50%) translateY(-50%) !important;
overflow: hidden !important;
pointer-events: none !important;}

.standard-section__track {
align-items: center !important;
width: max-content !important;
white-space: nowrap !important;
will-change: transform !important;}

.standard-section__copy {
color: #FFF !important;
font-family: "Termina", Arial, sans-serif !important;
font-size: clamp(38px, 3.75vw, 72px) !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: clamp(40px, 3.25vw, 62px) !important;
letter-spacing: clamp(-0.72px, -0.0375vw, -0.38px) !important;
text-transform: uppercase !important;
white-space: nowrap !important;
padding-right: clamp(34px, 3.1vw, 60px) !important;}

/* .how section */
@media (min-width: 768px) and (max-width: 1919px) {
  .how {
    height: clamp(610px, 46vw, 800px) !important;
    overflow: hidden;
  }

  .how__eyebrow {
    top: clamp(64px, 5.7vw, 110px) !important;
    white-space: nowrap;
  }

  .how__intro {
    top: clamp(122px, 9.7vw, 186px) !important;
    width: min(720px, calc(100vw - 80px)) !important;
  }

  .how__diagram {
    top: clamp(255px, 18.5vw, 355px) !important;
    left: 56% !important;
    width: 1650px !important;
    height: 340px !important;
    transform: translateX(-50%) scale(clamp(0.48, 0.052vw, 1)) !important;
    transform-origin: top center !important;
  }
}

@media (max-width: 767px) {
  .how {
    height: auto !important;
    min-height: 0 !important;
    padding: 17px 0 72px !important;
    background: #151515;
    overflow: hidden;
  }

  .how__inner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
	margin-top: 120px;  
    margin-bottom: 100px;	  
  }

  .how__eyebrow {
    position: static !important;
    transform: none !important;
    margin: 0 0 34px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #FFF;
    font-family: "Termina", Arial, sans-serif;
    font-size: 13px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 28px !important;
    letter-spacing: -0.13px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .how__eyebrow svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
  }

  .how__intro {
    position: static !important;
    transform: none !important;
    margin: 0 0 70px !important;
    width: min(340px, calc(100vw - 52px)) !important;
    color: #B3B2B7;
    text-align: left;
    font-family: "Roboto Flex", Arial, sans-serif;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 26px !important;
    letter-spacing: -0.16px;
  }

  .how__intro strong {
    color: #FFF;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 26px !important;
  }

  .how__intro br {
    display: none;
  }

  .how__diagram {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(340px, calc(100vw - 48px)) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    z-index: 2;
  }

  .how__card,
  .how__line {
    display: none !important;
  }

  .how__item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 253px !important;
    height: 143px !important;
    min-height: 143px;
    margin: 0 0 0 !important;
    padding: 26px 22px 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    color: #B3B2B7;
    text-align: center;
    font-family: "Roboto Flex", Arial, sans-serif;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 22px !important;
    letter-spacing: -0.14px;
    white-space: normal !important;
    z-index: 2;
  }

  .how__item svg {
    width: 32px;
    height: 32px;
    display: block;
    flex: 0 0 auto;
  }

  .how__item span {
    display: block;
    max-width: 190px;
  }

  .how__item strong {
    color: #FFF;
    font-family: "Roboto Flex", Arial, sans-serif;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 22px !important;
    letter-spacing: -0.14px;
  }

  .how__item--pathways {
    order: 1;
    align-self: flex-start;
    background-image: url("../images/mobileRectangle52.png");
  }

  .how__item--integrity {
    order: 2;
    align-self: flex-end;
    background-image: url("../images/mobileRectangle53.png");
    margin-top: -1px !important;
  }

  .how__item--mitochondrial {
    order: 3;
    align-self: flex-start;
    background-image: url("../images/mobileRectangle54.png");
    margin-top: -1px !important;
  }

  .how__item--antioxidant {
    order: 4;
    align-self: flex-end;
    background-image: url("../images/mobileRectangle55br.png");
    margin-top: 0px !important;
  }

  .how__item--aging {
    order: 5;
    align-self: flex-start;
    background-image: url("../images/mobileRectangle56.png");
    margin-top: -1px !important;
  }
}

@media (max-width: 374px) {
  .how__intro {
    width: calc(100vw - 40px) !important;
    font-size: 15px !important;
    line-height: 24px !important;
  }

  .how__diagram {
    width: min(320px, calc(100vw - 36px)) !important;
  }

  .how__item {
    width: 253px !important;
    height: 143px !important;
  }
}

@media (min-width: 768px) and (max-width: 1399px) {
  .how {
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(70px, 7vw, 96px) 28px clamp(86px, 8vw, 120px) !important;
    overflow: hidden !important;
  }

  .how__inner {
    position: relative !important;
    width: 100% !important;
    max-width: 1040px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .how__eyebrow {
    position: static !important;
    transform: none !important;
    margin: 0 0 clamp(34px, 4vw, 48px) !important;
    font-size: clamp(11px, 1.2vw, 13px) !important;
    line-height: 28px !important;
    white-space: nowrap !important;
  }

  .how__intro {
    position: static !important;
    transform: none !important;
    width: min(620px, calc(100vw - 80px)) !important;
    margin: 0 0 clamp(64px, 7vw, 86px) !important;
    text-align: center !important;
    font-size: clamp(16px, 1.55vw, 20px) !important;
    line-height: clamp(26px, 2.35vw, 32px) !important;
  }

  .how__intro strong {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .how__diagram {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(860px, calc(100vw - 72px)) !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(22px, 4vw, 48px) !important;
    row-gap: clamp(22px, 3.4vw, 42px) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    z-index: 2 !important;
  }

  .how__card,
  .how__line {
    display: none !important;
  }

  .how__item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: clamp(150px, 16vw, 188px) !important;
    min-height: 150px !important;
    padding: 34px 26px 26px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    color: #B3B2B7 !important;
    text-align: center !important;
    font-family: "Roboto Flex", Arial, sans-serif !important;
    font-size: clamp(14px, 1.35vw, 16px) !important;
    line-height: clamp(22px, 2vw, 26px) !important;
    letter-spacing: -0.16px !important;
    white-space: normal !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    z-index: 2 !important;
  }

  .how__item span {
    display: block !important;
    max-width: 300px !important;
  }

  .how__item strong {
    color: #FFF !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 700 !important;
  }

  .how__item svg {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 auto !important;
  }

  .how__item--pathways {
    order: 1 !important;
    background-image: url("../images/mobileRectangle52.png") !important;
  }

  .how__item--integrity {
    order: 2 !important;
    background-image: url("../images/mobileRectangle53.png") !important;
  }

  .how__item--mitochondrial {
    order: 3 !important;
    background-image: url("../images/mobileRectangle54.png") !important;
  }

  .how__item--antioxidant {
    order: 4 !important;
    background-image: url("../images/mobileRectangle55.png") !important;
  }

  .how__item--aging {
    order: 5 !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(50%, 406px) !important;
    background-image: url("../images/mobileRectangle56.png") !important;
  }
}


@media (min-width: 768px) and (max-width: 900px) {
  .how {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .how__diagram {
    width: min(700px, calc(100vw - 44px)) !important;
    column-gap: 18px !important;
    row-gap: 22px !important;
  }

  .how__item {
    height: 148px !important;
    min-height: 148px !important;
    padding: 28px 18px 22px !important;
    font-size: 13px !important;
    line-height: 21px !important;
  }

  .how__item span {
    max-width: 230px !important;
  }
}

/* .publicly section */
@media (min-width: 768px) and (max-width: 1919px) {
  .publicly {
    height: clamp(540px, 46vw, 802px) !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  .publicly__title {
    top: clamp(-28px, -1.7vw, -8px) !important;
    left: 50% !important;
    width: calc(100% - clamp(40px, 6vw, 120px)) !important;
    max-width: 1480px !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    font-size: clamp(48px, 6.7vw, 92px) !important;
    line-height: 1.04 !important;
    letter-spacing: clamp(3.2px, 0.45vw, 10.12px) !important;
    white-space: nowrap !important;
  }

  .publicly__copy {
    top: clamp(100px, 10.2vw, 150px) !important;
    right: clamp(48px, 12vw, 245px) !important;
    width: min(650px, 54vw) !important;
    text-align: right !important;
  }

  .publicly__subhead {
    font-size: clamp(26px, 3vw, 40px) !important;
    line-height: 1.18 !important;
    letter-spacing: clamp(-0.08px, -0.004vw, -0.04px) !important;
    white-space: nowrap !important;
  }

  .publicly__body {
    margin-top: 8px !important;
    font-size: clamp(15px, 1.55vw, 24px) !important;
    line-height: 1.25 !important;
  }

  .publicly__cta {
    top: auto !important;
    bottom: clamp(72px, 7.2vw, 126px) !important;
    transform: translateX(-50%) scale(clamp(0.78, 0.054vw, 1)) !important;
    transform-origin: center center !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .publicly {
    height: clamp(560px, 58vw, 640px) !important;
  }

  .publicly__title {
    top: 18px !important;
    font-size: clamp(40px, 6.2vw, 64px) !important;
    letter-spacing: clamp(2.4px, 0.36vw, 4.2px) !important;
  }

  .publicly__copy {
    top: clamp(108px, 12vw, 132px) !important;
    right: clamp(30px, 7vw, 80px) !important;
    width: min(520px, 58vw) !important;
  }

  .publicly__subhead {
    font-size: clamp(22px, 3.2vw, 32px) !important;
  }

  .publicly__body {
    font-size: clamp(13px, 1.8vw, 18px) !important;
  }

  .publicly__cta {
    bottom: clamp(52px, 7vw, 82px) !important;
    transform: translateX(-50%) scale(0.78) !important;
  }
}

@media (max-width: 767px) {
  .publicly {
    position: relative !important;
    height: 791px !important;
    min-height: 721px !important;
    overflow: hidden !important;
    background:url("../images/couple_onbeach_mobile.png") center top / cover no-repeat !important;
  }

  .publicly__inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
  }

  .publicly__title {
    position: absolute !important;
    top: 39px !important;
    left: 20px !important;
    right: auto !important;
    transform: none !important;
    width: min(350px, calc(100vw - 40px)) !important;
    margin: 0 !important;
    color: #FDF5FF !important;
    text-align: left !important;
    font-family: "Termina", Arial, sans-serif !important;
    font-size: 39px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 39px !important;
    letter-spacing: 2.15px !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    z-index: 4 !important;
  }

  .publicly__copy {
    position: absolute !important;
    top: 128px !important;
    left: 20px !important;
    right: auto !important;
    width: min(350px, calc(100vw - 40px)) !important;
    text-align: left !important;
    z-index: 4 !important;
  }

  .publicly__subhead {
    margin: 0 !important;
    color: #FDF5FF !important;
    text-align: left !important;
    font-family: "Termina", Arial, sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    letter-spacing: 1.08px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .publicly__body {
    display: none !important;
  }

  .publicly__cta {
    position: absolute !important;
    left: 50% !important;
    top: auto !important;
    bottom: 25px !important;
    transform: translateX(-50%) !important;
    width: min(336px, calc(100vw - 54px)) !important;
    height: 112px !important;
    border-radius: 18px !important;
    border: 0 !important;
    box-shadow: 0 14px 28px rgba(154, 114, 28, 0.24) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    padding: 15px 14px 12px !important;
    z-index: 5 !important;
  }

  .publicly__cta .hero-cta__text {
color: #FFF;
text-align: center;
leading-trim: both;
text-edge: cap;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(255, 255, 255, 0.40);
font-family: "Roboto Flex";
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.15px;
text-transform: uppercase;	
  }
	

  .publicly__cta .hero-cta__button {
    width: 100% !important;
    height: 48px !important; 
border-radius: 32px;
border: 2px solid rgba(241, 241, 241, 0.15);
background: rgba(255, 176, 32, 0.80);
box-shadow: 1px 9px 19px 0 rgba(197, 153, 35, 0.20);
}

  .publicly__cta .hero-cta__button:hover,
  .publicly__cta .hero-cta__button:active,
  .publicly__cta .hero-cta__button.is-active {
    border-radius: 32px;
    transform: none !important;  
   border: 2px solid rgba(241, 241, 241, 0.35);	  
  }

  .publicly__cta .hero-cta__button-icon {
    left: 6px !important;
    width: 31px !important;
    height: 31px !important;
  }

  .publicly__cta .hero-cta__button-text {
    left: 55% !important;
    font-family: "Roboto Flex", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
  }
}

@media (max-width: 374px) {
  .publicly {
    height: 700px !important;
  }

  .publicly__title {
    top: 34px !important;
    font-size: 35px !important;
    line-height: 36px !important;
    letter-spacing: 1.9px !important;
  }

  .publicly__copy {
    top: 116px !important;
  }

  .publicly__subhead {
    font-size: 16px !important;
  }

  .publicly__cta {
    width: calc(100vw - 42px) !important;
    bottom: 22px !important;
  }
}

/* Elevation Hero section */
@media (max-width: 767px) {
  .hero {
    position: relative !important;
    width: 100% !important;
    height: 696px !important;
    min-height: 696px !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .hero__header-atmosphere,
  .header {
    display: none !important;
  }

  .hero__image {
    content: url("../images/wmnatoceanbeach_hat_mobile.png");
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    width: 100% !important;
    height: 616px !important;
    object-fit: cover !important;
    object-position: center top !important;
    z-index: 1 !important;
  }

  .hero-copy {
    position: absolute !important;
    top: 32px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    z-index: 5 !important;
    pointer-events: none !important;
    display: block !important;
  }

  .hero-copy__title {
    margin: 0 !important;
    color: #F3EDF7 !important;
    text-align: center !important;
    font-family: "Termina", Arial, sans-serif !important;
    font-size: clamp(48px, 14.95vw, 62px) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
    letter-spacing: clamp(2.7px, 0.9vw, 3.7px) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

.hero-copy__subtitle {
    position: absolute !important;
    top: 54px !important;
right: max(-67px, calc((100vw - 375px) / 2 - 67px)) !important;
    color: #F3EDF7 !important;
    text-align: right !important;
    font-family: "Termina", Arial, sans-serif !important;
    font-size: clamp(21px, 6.05vw, 25px) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: -0.3px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    margin-top: 20px;
}

  .hero-copy__subtitle span {
    transform: none !important;
  }

@media (max-width: 490px) {
    .hero-copy__title {
        margin: 0 !important;
        color: #F3EDF7 !important;
        text-align: center !important;
        font-family: "Termina", Arial, sans-serif !important;
        font-size: clamp(34.32px, 10.69vw, 44.33px) !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: 1.08 !important;
        letter-spacing: clamp(2.7px, 0.9vw, 3.7px) !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }
    .hero-copy__subtitle {
position: absolute !important;
top: 54px !important;
right: max(18px, calc((100vw - 375px) / 2 + 18px)) !important;
color: #F3EDF7 !important;
text-align: right !important;
font-family: "Termina", Arial, sans-serif !important;
font-size: clamp(15.12px, 4.36vw, 18px) !important;
font-style: normal !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: -0.3px !important;
text-transform: uppercase !important;
white-space: nowrap !important;
margin-top: 6px;
    }
}
	

  .hero-cta {
    position: absolute !important;
    left: 50% !important;
    top: auto !important;
    bottom: 46px !important;
    transform: translateX(-50%) !important;
    width: min(336px, calc(100vw - 40px)) !important;
    height: 112px !important;
    border-radius: 18px !important;
    border: 0 !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.03) 35%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.03) 65%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(to bottom, rgba(170, 198, 150, 0.50) 0%, rgba(140, 175, 125, 0.50) 100%);
    box-shadow: 0 14px 28px rgba(154, 114, 28, 0.24) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    padding: 15px 14px 12px !important;
    z-index: 7 !important;
  }

  .hero-cta__text {
    color: #FFF !important;
    text-align: center !important;
    -webkit-text-stroke-width: 1px !important;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.40) !important;
    font-family: "Roboto Flex", Arial, sans-serif !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    letter-spacing: -0.15px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transform: none !important;
  }	

  .hero-cta__button {
    width: 100% !important;
    height: 48px !important;
    border-radius: 16px;
    border: 2px solid rgba(241, 241, 241, 0.15) !important;
    background: rgba(90, 197, 153, 0.80) !important;
   box-shadow: 0 8px 20px rgba(90, 197, 153, 0.18) !important;
    transform: none !important;
  }

  .hero-cta__button:hover,
  .hero-cta__button:active,
  .hero-cta__button.is-active {
    border-radius: 16px !important;
    border: 2px solid rgba(241, 241, 241, 0.35) !important;
box-shadow: 1px 9px 19px 0 rgba(0, 0, 0, 0.20) !important;
    transform: none !important;
  }

  .hero-cta__button-icon {
    left: 6px !important;
    width: 31px !important;
    height: 31px !important;
  }

  .hero-cta__button-text {
    left: 55% !important;
    color: #FFF !important;
    font-family: "Roboto Flex", Arial, sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: -0.16px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 374px) {
  .hero {
    height: 680px !important;
    min-height: 680px !important;
  }

  .hero__image {
    top: 58px !important;
    height: 602px !important;
  }

  .hero-copy {
    top: 34px !important;
  }

  .hero-copy__title {
    font-size: 39px !important;
    letter-spacing: 2.7px !important;
  }

  .hero-copy__subtitle {
    top: 46px !important;
    right: 24px !important;
    font-size: 21px !important;
  }

  .hero-cta {
    width: calc(100vw - 40px) !important;
    bottom: 38px !important;
  }
}

/* Vision section */
@media (min-width: 768px) and (max-width: 1919px) {
  .vision {
    min-height: clamp(520px, 35.5vw, 680px) !important;
  }

  .vision__inner {
    min-height: clamp(520px, 35.5vw, 680px) !important;
  }

  .vision__copy {
    left: clamp(70px, 7.1vw, 260px) !important;
    top: clamp(92px, 12.3vw, 236px) !important;
    width: min(50vw, 690px) !important;
  }

  .vision__headline {
    max-width: min(46vw, 620px) !important;
    font-size: clamp(20px, 1.45vw, 24px) !important;
    line-height: clamp(28px, 1.9vw, 32px) !important;
    letter-spacing: clamp(0.6px, 0.06vw, 0.96px) !important;
  }

  .vision__body,
  .vision__body strong {
    font-size: clamp(16px, 1.1vw, 20px) !important;
    line-height: clamp(26px, 1.65vw, 32px) !important;
  }

  .vision__body {
    margin-top: clamp(52px, 4.6vw, 88px) !important;
  }

  .vision__sphere {
    right: clamp(-8px, 7vw, 230px) !important;
    top: clamp(76px, 8.3vw, 160px) !important;
    width: clamp(520px, 39.6vw, 760px) !important;
    max-width: none !important;
  }

  .why {
    height: clamp(840px, 68.5vw, 1315px) !important;
  }

  .why__title {
    top: clamp(42px, 4vw, 76px) !important;
    font-size: clamp(48px, 4.8vw, 92px) !important;
    line-height: clamp(58px, 5.4vw, 104px) !important;
    letter-spacing: clamp(5px, 0.53vw, 10.12px) !important;
  }

  .why__rule {
    top: clamp(128px, 10.5vw, 202px) !important;
  }

  .why__subhead {
    top: clamp(148px, 11.25vw, 216px) !important;
    width: min(980px, calc(100vw - 72px)) !important;
    font-size: clamp(18px, 1.55vw, 24px) !important;
    line-height: clamp(27px, 2vw, 32px) !important;
  }

  .why__body {
    top: clamp(226px, 15.5vw, 298px) !important;
    width: min(820px, calc(100vw - 120px)) !important;
    font-size: clamp(15px, 1.1vw, 20px) !important;
    line-height: clamp(24px, 1.65vw, 32px) !important;
  }

  .why__body strong {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .why__card {
    left: 50% !important;
    top: clamp(430px, 32.2vw, 618px) !important;
    transform: translateX(-50%) !important;
    width: min(54vw, 833px) !important;
    height: clamp(330px, 23.6vw, 453px) !important;
  }

  .why__card-kicker,
  .why__card-copy,
  .why__card-end {
    width: min(520px, calc(100% - 72px)) !important;
    font-size: clamp(10px, 0.63vw, 12px) !important;
    line-height: clamp(22px, 1.35vw, 26px) !important;
    letter-spacing: clamp(1px, 0.075vw, 1.44px) !important;
  }

  .why__card-kicker { top: 18% !important; }
  .why__card-copy { top: 40% !important; }
  .why__card-end { top: 73% !important; }

  .why__image--top {
    left: clamp(36px, 8vw, 240px) !important;
    top: clamp(410px, 29.2vw, 560px) !important;
    width: clamp(210px, 17vw, 327px) !important;
    height: clamp(117px, 9.5vw, 182px) !important;
  }

  .why__image--left {
    left: clamp(70px, 12vw, 342px) !important;
    top: clamp(635px, 44.5vw, 855px) !important;
    width: clamp(115px, 8.6vw, 165px) !important;
    height: clamp(142px, 10.6vw, 204px) !important;
  }

  .why__image--right {
    left: auto !important;
    right: clamp(36px, 8vw, 280px) !important;
    top: clamp(610px, 42.6vw, 818px) !important;
    width: clamp(205px, 15.9vw, 305px) !important;
    height: clamp(244px, 18.9vw, 363px) !important;
  }
}

@media (max-width: 767px) {
button.thrive-start-section__button.travelatlas:hover {
    background: #61E5B2 !important;}
	
  .mobile-header::before {
    content: "";
    position: absolute;
    right: -214px;
    top: -116px;
    width: 439.556px;
    height: 339.306px;
    border-radius: 439.556px;
    opacity: 0.01;
background: url("../images/green_ellipse_circle.png")
  transparent -500.222px 0px / 281.655% 186.032% no-repeat;
    transform: rotate(45deg);
    transform-origin: center center;
    pointer-events: none;
    z-index: 0;
  }	
	
.mobile-header {
  background:
    radial-gradient(ellipse at 86% 10%, rgba(90, 197, 153, 0.24) 0%, rgba(90, 197, 153, 0.10) 26%, rgba(90, 197, 153, 0.00) 58%),
    linear-gradient(180deg, #151515 0%, #151515 100%) !important;
}
	
  .vision {
    min-height: 674px !important;
    height: 674px !important;
    background: #151515 !important;
    overflow: hidden !important;
  }

  .vision__inner {
    min-height: 674px !important;
    height: 674px !important;
    position: relative !important;
  }

  .vision__copy {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    z-index: 2 !important;
    padding: 72px 44px 0 !important;
  }

  .vision__eyebrow {
    margin: 0 0 38px !important;
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 28px !important;
    letter-spacing: -0.13px !important;
    white-space: nowrap !important;
  }

  .vision__headline {
    max-width: 336px !important;
    font-size: 18px !important;
    line-height: 27px !important;
    letter-spacing: 0.72px !important;
  }

  .vision__headline br {
    display: none !important;
  }

  .vision__body {
    margin: 34px 0 0 !important;
    max-width: 315px !important;
    color: #B3B2B7 !important;
    font-size: 16px !important;
    line-height: 28px !important;
    letter-spacing: -0.16px !important;
  }

  .vision__body strong {
    font-size: 16px !important;
    line-height: 28px !important;
  }

  .vision__body br {
    display: none !important;
  }

  .vision__sphere {
    position: absolute !important;
    right: -210px !important;
    bottom: -6px !important;
    top: auto !important;
    width: 650px !important;
    max-width: none !important;
    opacity: 0.96 !important;
    z-index: 1 !important;
  }

  .why {
    height: auto !important;
    min-height: 0 !important;
    background: #151515 !important;
    overflow: hidden !important;
    padding: 52px 0 78px !important;
  }

  .why__inner {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .why__title,
  .why__subhead,
  .why__body,
  .why__card,
  .why__image {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  .why__title {
    order: 1 !important;
    margin: 0 0 48px !important;
    width: min(350px, calc(100vw - 40px)) !important;
    color: #FDF5FF !important;
    font-size: 32px !important;
    line-height: 38px !important;
    letter-spacing: 2.8px !important;
    white-space: nowrap !important;
  }

  .why__rule {
    display: none !important;
  }

  .why__subhead {
    order: 2 !important;
    margin: 0 0 25px !important;
    width: min(340px, calc(100vw - 56px)) !important;
    text-align: center !important;
    font-size: 18px !important;
    line-height: 26px !important;
    letter-spacing: 0.72px !important;
  }

  .why__body {
    order: 3 !important;
    margin: 0 0 72px !important;
    width: min(332px, calc(100vw - 56px)) !important;
    color: #B3B2B7 !important;
    text-align: center !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: -0.16px !important;
  }

  .why__body strong {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .why__body br {
    display: none !important;
  }

  .why__image {
    object-fit: cover !important;
    border-radius: 8px !important;
    z-index: 3 !important;
  }

  .why__image--top {
    order: 4 !important;
    align-self: center !important;
    width: min(327px, calc(100vw - 76px)) !important;
    height: 182px !important;
    margin: 0 0 48px !important;
  }

  .why__card {
    order: 5 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 2 !important;
  }

  .why__card::before {
    display: none !important;
  }

  .why__card-kicker,
  .why__card-copy,
  .why__card-end {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(340px, calc(100vw - 42px)) !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 26px !important;
    letter-spacing: 1.6px !important;
  }

  .why__card-kicker {
    color: #FFF !important;
    margin-bottom: 55px !important;
  }

  .why__card-copy {
    color: #B3B2B7 !important;
    margin-bottom: 52px !important;
  }

  .why__card-end {
    color: #B3B2B7 !important;
    margin-bottom: 104px !important;
  }

  .why__image--left {
    order: 6 !important;
    align-self: flex-start !important;
    width: 132px !important;
    height: 164px !important;
    margin: 0 0 -210px max(33px, calc((100vw - 375px) / 2 + 33px)) !important;
  }

  .why__image--right {
    order: 7 !important;
    align-self: flex-end !important;
    width: 224px !important;
    height: 289px !important;
    margin: 0 max(0px, calc((100vw - 375px) / 2)) 0 0 !important;
  }
}


@media (max-width: 1919px) {
  .why__body {margin-top: 40px;}
}

@media (max-width: 1500px) {
  .why__body {margin-top: 25px;}
}

@media (max-width: 1370px) {
  .why__body {margin-top: 10px;}
}

@media (max-width: 767px) {
.mobbresc {display: none}
.pictures-section {
min-height: 1045px !important;
background:
  linear-gradient(
    180deg,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.48) 22%,
    rgba(0,0,0,0.18) 42%,
    rgba(0,0,0,0.34) 62%,
    rgba(0,0,0,0.82) 100%
  ),
  url("../images/mobile_mosaic.png") center top / cover no-repeat !important;
align-items: flex-start !important;
padding: 0 20px !important;}

.pictures-section::before,
.pictures-section::after {
display: none !important;}

.pictures-section__content {
width: 100% !important;
max-width: 420px !important;
margin: 0 auto !important;
padding-top: 290px !important;
transform: none !important;
position: relative !important;
z-index: 3 !important;}

.pictures-section__title {
margin: 0 auto !important;
color: #F3EDF7 !important;
text-align: center !important;
font-family: "Termina", Arial, sans-serif !important;
font-size: clamp(24px, 8.3vw, 40px) !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 0.98 !important;
letter-spacing: -0.24px !important;
text-transform: uppercase !important;
max-width: 360px !important;}

.pictures-section__body {
margin: 38px auto 0 !important;
max-width: 350px !important;
color: #B3B2B7 !important;
text-align: center !important;
font-family: "Roboto Flex", Arial, sans-serif !important;
font-size: 16px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1.75 !important;
letter-spacing: -0.16px !important; padding-top: 150px;}

.pictures-section__body .white {
color: #FFF !important;}
	
.thrive-start-section__title {
margin-top: clamp(46px, 3.96vw, 76px);
font-size: clamp(19px, 1.73vw, 33px) !important;
line-height: clamp(26px, 1.96vw, 37px);
letter-spacing: clamp(-0.33px, -0.018vw, -0.19px);}
		
button.thrive-start-section__button.travelatlas {border-radius: 32px !important;}		
		
.thrive-start-section__button.travelatlas {
width: min(325px, calc(100vw - 28px)) !important;
height: 48px !important;
min-height: 48px !important;
border: 2px solid rgba(241, 241, 241, 0.15) !important;
background: #5AC599 !important;
box-shadow: 1px 9px 19px 0 rgba(0, 0, 0, 0.20) !important;
padding: 0 !important;
overflow: hidden !important;}

.thrive-start-section__button.travelatlas .thrive-start-section__button-inner {
position: relative !important;
border-radius: 32px !important;  
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
padding: 0 18px !important;
box-sizing: border-box !important;}

.thrive-start-section__button.travelatlas .thrive-start-section__button-icon {
position: absolute !important;
left: 13px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 31px !important;
height: 31px !important;
flex: 0 0 31px !important;}

.thrive-start-section__button.travelatlas .thrive-start-section__button-icon svg {
width: 31px !important;
height: 31px !important;
display: block !important;}

.thrive-start-section__button.travelatlas .thrive-start-section__button-text {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
color: #FFF !important;
font-family: "Roboto Flex", Arial, sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 20px !important;
letter-spacing: -0.16px !important;
text-align: center !important;
white-space: nowrap !important;}

.thrive-start-section__button-text .desktop-label {display: none !important;}
.thrive-start-section__button-text .mobile-label {display: inline !important;}
.iqatlasbenefits-card--portal .iqatlasbenefits-card__bullets {top: 322px;}
.iqatlasbenefits-card--concierge .iqatlasbenefits-card__bullets {top: 334px;}
.iqatlasbenefits-card--escapes .iqatlasbenefits-card__bullets {top: 342px;}
.iqatlasbenefits-card--rewards .iqatlasbenefits-card__bullets {top: 384px;}
.iqatlashow-card__link {margin-top: 28px;}
	
.publicly,
.publicly__inner {overflow: visible !important;}

.standard-section__marquee {
position: absolute !important;
left: 50% !important;
top: 0 !important;
margin-left: 0 !important;
width: 100vw !important;
height: auto !important;
min-height: clamp(54px, 13vw, 74px) !important;
padding: 8px 0 !important;
display: block !important;
overflow: visible !important;
transform: translate(-50%, -50%) !important;}

.standard-section__track {
display: flex !important;
align-items: center !important;
width: max-content !important;
white-space: nowrap !important;}

.standard-section__copy {
display: inline-block !important;
font-size: clamp(34px, 10.9vw, 42px) !important;
line-height: 1.22 !important;
letter-spacing: -0.42px !important;
padding-right: 34px !important;}
	
.hero .hero-copy {
left: 50% !important;
transform: translateX(-50%) !important;
width: max-content !important;
max-width: none !important;
z-index: 55 !important;
pointer-events: none !important;}

.hero .hero-copy__title.travel {
width: auto !important;
max-width: none !important;
margin: 0 !important;
text-align: center !important;
font-size: clamp(30.6px, 7.605vw, 59.4px) !important;
line-height: 0.95 !important;
letter-spacing: clamp(-0.18px, -0.02vw, -0.08px) !important;
white-space: nowrap !important;
transform: none !important;}
}

@media (max-width: 560px) {
.hero .hero-copy__title.travel {font-size: clamp(30.6px, 7.515vw, 42.3px) !important; line-height: 0.95 !important;}

@media (max-width: 425px) {
.vision__sphere {
position: absolute !important;
right: -210px !important;
bottom: -140px !important;
width: 650px !important;
max-width: none !important;
opacity: 0.96 !important;
z-index: 1 !important;}
.vision {
min-height: 874px !important;
height: 874px !important;
overflow: hidden !important;}	
.pictures-section {
min-height: 1024px !important;}
.pictures-section__content {
padding-top: 290px !important;}
.pictures-section__title {
font-size: clamp(22px, 8vw, 34px) !important;
line-height: 1.08 !important;}
.pictures-section__body {
max-width: 320px !important;
font-size: 15px !important;
line-height: 1.7 !important; padding-top: 120px;}	
}

@media (max-width: 374px) {
.vision__copy {
padding-left: 36px !important;
padding-right: 34px !important;}

.vision__headline {
font-size: 17px !important;
line-height: 26px !important;}

.vision__sphere {
right: -235px !important;
width: 635px !important;}

.why__title {
font-size: 30px !important;
letter-spacing: 2.2px !important;}

.why__subhead {
font-size: 17px !important;
line-height: 25px !important;}

.why__body {
font-size: 15px !important;
line-height: 23px !important;}

.why__image--top {
width: calc(100vw - 76px) !important;
height: auto !important;
aspect-ratio: 327 / 182 !important;}

.why__image--left {
margin-left: 33px !important;}
.hero .hero-copy__title.travel {
 font-size: clamp(27.9px, 7.626vw, 31.62px) !important;}	
}
	
@media (max-width: 255px) {
.vision__sphere {
position: absolute !important;
right: -210px !important;
bottom: -340px !important;
width: 650px !important;
max-width: none !important;
opacity: 0.96 !important;
z-index: 1 !important;}
.vision {
min-height: 974px !important;
height: 974px !important;
overflow: hidden !important;}	
}

