:root {
  --color-lilly-bold-brown: #501009;
  --color-lilly-red: #d31710;
  --color-lilly-vibrant-coral: #fd9485;
  --color-lilly-pink: #ffdad4;
  --color-lilly-neutral-rose: #f9eeed;
  --color-lilly-neutral-rose-tint: #fbf5f4;
  --color-lilly-vibrant-orange: #ffdcc6;
  --color-lilly-vibrant-gold: #f4c003;
  --color-lilly-neutral-cream: #f9f0e0;
  --color-lilly-neutral-cream-tint: #fcf5ed;
  --color-lilly-bold-green: #00422c;
  --color-lilly-neutral-sage: #beebe6;
  --color-lilly-neutral-sage-tint: #f0f8f6;
  --color-lilly-bold-blue: #003a6c;
  --color-lilly-vibrant-azure: #86b3f2;
  --color-lilly-bold-grey: #818c94;
  --color-lilly-neutral-stone: #d8e4ec;
  --color-lilly-neutral-stone-tint: #f3f7fa;
  --color-lilly-black: #191919;
  --color-lilly-white: #ffffff;
  --color-lilly-transparent-black: #000000b3;


  /* Ringside Typography Tokens - Mobile First */
  --lds-g-typography-ringside-display-1: 900 4rem / 1.1 "Ringside Sans Extra Wide", "Ringside Extra Wide", sans-serif;
  --lds-g-typography-ringside-display-1-letter-spacing: -0.05em;
  --lds-g-typography-ringside-display-2: 900 3.6rem / 1.22 "Ringside Sans Extra Wide", "Ringside Extra Wide", sans-serif;
  --lds-g-typography-ringside-display-2-letter-spacing: -0.04em;
  --lds-g-typography-ringside-heading-1: 400 4rem / 1.1 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-heading-1-letter-spacing: -0.025em;
  --lds-g-typography-ringside-heading-2: 400 3.6rem / 1.22 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-heading-2-letter-spacing: -0.02em;
  --lds-g-typography-ringside-heading-3: 400 3.2rem / 1.19 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-heading-3-letter-spacing: -0.02em;
  --lds-g-typography-ringside-heading-4: 400 2.8rem / 1.21 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-heading-4-letter-spacing: -0.02em;
  --lds-g-typography-ringside-heading-5: 400 2.4rem / 1.33 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-heading-6: 400 2rem / 1.3 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-body-small: 400 1.4rem / 1.43 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-body-medium: 400 1.6rem / 1.5 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-body-large: 400 1.8rem / 1.56 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-special-cta-button: 400 1.6rem / 1.25 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-special-cta-text-link: 900 1.6rem / 1.25 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-special-caption: 400 1.2rem / 1.5 "Ringside Sans", Ringside, sans-serif;
  --lds-g-typography-ringside-special-eyebrow: 400 1.2rem / 1.33 "Ringside Sans Extra Wide", "Ringside Extra Wide", sans-serif;

  /* Garamond Typography Tokens - Mobile First */
  --lds-g-typography-garamond-display-1: 400 4.8rem / 1.0 "ITC Garamond Condensed", "ITC Garamond Narrow", "ITC Garamond Std", Garamond, serif;
  --lds-g-typography-garamond-display-1-letter-spacing: -0.015em;
  --lds-g-typography-garamond-heading-1: 400 4rem / 1.05 "ITC Garamond Condensed", "ITC Garamond Narrow", "ITC Garamond Std", Garamond, serif;
  --lds-g-typography-garamond-heading-1-letter-spacing: -0.01em;
  --lds-g-typography-garamond-heading-2: 400 3.6rem / 1.11 "ITC Garamond Condensed", "ITC Garamond Narrow", "ITC Garamond Std", Garamond, serif;
  --lds-g-typography-garamond-heading-2-letter-spacing: -0.01em;
  --lds-g-typography-garamond-heading-3: 400 3.2rem / 1.19 "ITC Garamond Condensed", "ITC Garamond Narrow", "ITC Garamond Std", Garamond, serif;
  --lds-g-typography-garamond-heading-3-letter-spacing: -0.01em;
  --lds-g-typography-garamond-heading-4: 400 2.8rem / 1.21 "ITC Garamond Condensed", "ITC Garamond Narrow", "ITC Garamond Std", Garamond, serif;
  --lds-g-typography-garamond-heading-5: 400 2.4rem / 1.33 "ITC Garamond Condensed", "ITC Garamond Narrow", "ITC Garamond Std", Garamond, serif;
  --lds-g-typography-garamond-heading-6: 400 2rem / 1.3 "ITC Garamond Condensed", "ITC Garamond Narrow", "ITC Garamond Std", Garamond, serif;
}

* {
  box-sizing: border-box;
}

/* ===================================
   BASE & RESET STYLES
   =================================== */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font: var(--lds-g-typography-ringside-body-large);
  margin: 0;
  padding: 0;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  font: var(--lds-g-typography-ringside-body-medium);
  letter-spacing: -0.01em;
}

.h2-big {
  text-align: center;
}

.h2-big,
.h2-left-align {
  font: var(--lds-g-typography-garamond-display-1);
  letter-spacing: var(--lds-g-typography-garamond-heading-1-letter-spacing);
  color: var(--color-lilly-black);
  padding-block: 4.8rem;
}

.h2-left-align {
  text-align: left;
  color: var(--color-lilly-white);
  display: block;
  width: 100%;
}

.h2-black {
  color: var(--color-lilly-black);
}

.highlight-red {
  color: var(--color-lilly-red);
}

.eyebrow-text p {
    font: var(--lds-g-typography-ringside-special-eyebrow)!important;
    color: var(--color-lilly-black);
    text-transform: uppercase;
}

.text-align-center {
    text-align: center;
}


.description {
    font: var(--lds-g-typography-ringside-body-large);
    max-width: 64.4rem;
}

sup {
    font-family: inherit;
    font-size: 1.4rem;
}


/* ===================================
   LAYOUT COMPONENTS
   =================================== */
.wrapper {
  width: 100%;
}

.container {
  margin: 0 auto;
  max-width: 1440px;
  padding-inline: 1.6rem;
}

.wrapper:nth-child(even) {

  color: var(--color-lilly-black);
}

.wrapper:nth-child(odd) {
  background-color: var(--color-lilly-neutral-rose-tint);
}

main section {
    padding-block: 14.4rem;
}

.small-logo {
  text-align: center;
}

.small-logo img {
  height: 6.4rem;
  width: 6.4rem;
}

.intro-section{
   padding-block: 14.4rem;
}

.intro-section p:nth-of-type(2) {
    margin-top: 4.8rem;
}

.intro-section p {
    max-width: 867px;
    margin: auto;
   font:var(--lds-g-typography-ringside-body-large);
}



/* Quick Links Section */
.quick-links-container {
    position: relative;
    top: -7.3rem;
}

.quick-links-section {
    background-color: var(--color-lilly-neutral-rose);
    border-radius: 3.2rem;
    padding: 6.4rem 4.8rem 4.8rem 4.8rem;
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
}

.quick-links-divider {
    border-top: 2px solid #c5c5c5;
}

.quick-links-heading {
    color: var(--color-lilly-black);
    font: var(--lds-g-typography-ringside-special-eyebrow);
    text-transform: uppercase;
    opacity: 0.8;
}

.quick-links-list {
    display: grid;
}

.quick-link-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 3.2rem 0 0 0;
}

.arrow-icon {
    transition: transform 200ms cubic-bezier(0.08, 0.32, 0.4, 1);
}

.quick-link-item:hover .arrow-icon {
    transform: translateX(30%);
}

.quick-link {
    font: var(--lds-g-typography-ringside-heading-5);
    text-decoration: underline;
    text-underline-offset: 24%;
    text-decoration-thickness: 4%;
    color: var(--color-lilly-black);
}

@media (min-width: 1024px) {
    .quick-links-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 4.8rem;
    }
}




.communications-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4.8rem;
  margin-bottom: 4.8rem 0;
  padding-block: 6.4rem;
}

.feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
}

.feature-icon {
  width: auto;
  height: 4.8rem;
}

.feature-icon img {
  width: auto;
  height: 4.8rem;
}

.feature h3 {
  font: var(--lds-g-typography-ringside-heading-3);
  color: var(--color-lilly-black);
  text-align: center;
}

.feature p {
  font: var(--lds-g-typography-ringside-body-large);
  text-align: center;
}

.communications-cta {
  text-align: center;
  margin-block: 4.8rem;
}

.cta-button {
  color: var(--color-lilly-red);
  text-decoration: none;
  display: inline-flex;
  font: var(--lds-g-typography-ringside-special-cta-text-link);
  align-items: center;
  gap: .8rem;
  position: relative;
  transition: all .3s ease;
}

.cta-button::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-lilly-red);
  transition: width .4s cubic-bezier(.25, .46, .45, .94);
}

.cta-button:hover::after {
  width: calc(100% - 3.2rem);
}

.cta-button img {
  transition: transform .3s cubic-bezier(.25, .46, .45, .94);
  filter: brightness(0) saturate(100%) invert(18%) sepia(92%) saturate(6289%) hue-rotate(357deg) brightness(89%) contrast(109%);
}

.cta-button:hover img {
  transform: translateX(4px);
}


.newsletter-section {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.0) 100%), url(https://delivery-p137454-e1438138.adobeaemcloud.com/adobe/assets/urn:aaid:aem:b1647106-8193-4a27-aa40-5bca04ddb0dc/as/Woman_in_a_field.avif?assetname=Woman_in_a_field.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 900px;
  display: flex;
  align-items: center;
}

.newsletter-section .container {
  margin-inline: auto;
}

.newsletter-text {
  max-width: 420px;
}


.newsletter-cta a {
  background-color: var(--color-lilly-red);
  color: white;
  text-decoration: none;
  font: var(--lds-g-typography-ringside-special-cta-button);
  padding: 1.2rem 2.4rem;
  border-radius: 3.2rem;
  text-decoration: none;
  border: none;
  box-shadow: none;
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.newsletter-cta,
.science-cta {
  padding-top: 4.8rem;
}

.science-cta a {
  background-color: transparent;
  color: white;
  text-decoration: none;
  font: var(--lds-g-typography-ringside-special-cta-button);
  padding: 1.2rem 2.4rem;
  border-radius: 3.2rem;
  text-decoration: none;
  border: 1.5px solid var(--color-lilly-white);
  box-shadow: none;
  display: flex;
  width: max-content;

  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.science-section {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.0) 100%), url(https://medical.lilly.com/de/science/_nuxt/img/hero-science.dfeb6d4.jpeg) !important;
}


@media (min-width: 768px) {
  :root {
    --lds-g-typography-ringside-display-1: 900 10rem / 1.0 "Ringside Sans Extra Wide", "Ringside Extra Wide", sans-serif;
    --lds-g-typography-ringside-display-2: 900 6rem / 1.1 "Ringside Sans Extra Wide", "Ringside Extra Wide", sans-serif;
    --lds-g-typography-ringside-heading-1: 400 6rem / 1.1 "Ringside Sans", Ringside, sans-serif;
    --lds-g-typography-ringside-heading-2: 400 4.8rem / 1.21 "Ringside Sans", Ringside, sans-serif;
    --lds-g-typography-ringside-heading-3: 400 3.6rem / 1.22 "Ringside Sans", Ringside, sans-serif;
    --lds-g-typography-ringside-heading-4: 400 3.2rem / 1.19 "Ringside Sans", Ringside, sans-serif;
    --lds-g-typography-ringside-heading-5: 400 2.8rem / 1.29 "Ringside Sans", Ringside, sans-serif;
    --lds-g-typography-ringside-heading-6: 400 2.4rem / 1.33 "Ringside Sans", Ringside, sans-serif;
    --lds-g-typography-ringside-body-large: 400 2rem / 1.5 "Ringside Sans", Ringside, sans-serif;
    --lds-g-typography-ringside-special-cta-button: 400 2rem / 1.2 "Ringside Sans", Ringside, sans-serif;
    --lds-g-typography-ringside-special-cta-text-link: 900 2rem / 1.2 "Ringside Sans", Ringside, sans-serif;
    --lds-g-typography-ringside-special-caption: 400 1.4rem / 1.57 "Ringside Sans", Ringside, sans-serif;
    --lds-g-typography-ringside-special-eyebrow: 400 1.4rem / 1.29 "Ringside Sans Extra Wide", "Ringside Extra Wide", sans-serif;

    --lds-g-typography-garamond-display-1: 400 10rem / 1.0 "Garamond Narrow Condensed", "ITC Garamond Std", Garamond, garamond, serif;
    --lds-g-typography-garamond-heading-1: 400 6rem / 1.1 "Garamond Narrow Condensed", "ITC Garamond Std", Garamond, garamond, serif;
    --lds-g-typography-garamond-heading-2: 400 4.8rem / 1.08 "Garamond Narrow Condensed", "ITC Garamond Std", Garamond, garamond, serif;
    --lds-g-typography-garamond-heading-3: 400 3.6rem / 1.22 "Garamond Narrow Condensed", "ITC Garamond Std", Garamond, garamond, serif;
    --lds-g-typography-garamond-heading-4: 400 3.2rem / 1.19 "Garamond Narrow Condensed", "ITC Garamond Std", Garamond, garamond, serif;
    --lds-g-typography-garamond-heading-5: 400 2.8rem / 1.29 "Garamond Narrow Condensed", "ITC Garamond Std", Garamond, garamond, serif;
    --lds-g-typography-garamond-heading-6: 400 2.4rem / 1.33 "Garamond Narrow Condensed", "ITC Garamond Std", Garamond, garamond, serif;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 4.8rem;
  }

  .communications-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4.8rem;
  }

}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 2.4rem;
  right: 2.4rem;
  width: 5.6rem;
  height: 5.6rem;
  background-color: var(--color-lilly-transparent-black);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  color: var(--color-lilly-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 998;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  text-decoration: none;
}

.back-to-top-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover .back-to-top-icon {
  background-color: rgba(255, 255, 255, .2);
}

@media (min-width: 768px) {
  .back-to-top {
    width: 6.4rem;
    height: 6.4rem;
    bottom: 4.8rem;
    right: 4.8rem;
  }
}