/* consistent internal padding like your other cards */
.two-card .two > .border {
  padding: 20px;
  box-sizing: border-box;
}


/* -------------------------
   TYPOGRAPHY
------------------------- */
.content {
  font-family: var(--ubuntu-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--unnamed-color-154269);
}

.author {
  margin-top: 20px;
  font-style: italic;
}

.demo-title {
  font-family: var(--ubuntu-font);
  font-size: 20px;
  color: var(--unnamed-color-154269);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* -------------------------
   HERO LAYOUT
------------------------- */
.hero {
  position: relative;
}

.hero .intro {
  display: grid;
  grid-template-columns: 1fr min(520px, 42%);
  column-gap: 24px;
  align-items: start;
}

.hero .intro-content {
  grid-column: 1;
}

.hero .intro-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.hero-title {
  font-family: 'ATPPleasurize-Regular', 'ATP-Pleasurize', sans-serif;
  font-size: 56px;
  line-height: 55px;
  color: #154269;

  margin: 0;
}


.hero .intro .content {
  max-width: 640px;
  margin: 16px 0;
}
.hero .girl-wrap {
  pointer-events: none;
}

.hero .girl-wrap img {
  pointer-events: none;
}


/* -------------------------
   TESTIMONIAL BLOCK
------------------------- */
.testimonial {
  display: grid;
  gap: 4px;
  max-width: 339px;
  width: 100%;
}

.testimonial .stars {
  width: 140px;
  height: auto;
  display: block;
  margin: 18px 0;
}

.testimonial .quote {
  font-family: var(--ubuntu-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--unnamed-color-154269);
}

.testimonial .byline {
  font-family: var(--ubuntu-font);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--unnamed-color-154269);
}
.demo-button {
  margin-top: 32px;
}

@media (max-width: 420px) {
  .testimonial .quote { font-size: 15px; }
  .testimonial .byline { font-size: 13px; }
}

/* -------------------------
   GIRL + SPARKLES IN BAND
------------------------- */
.hero .dark-blue-band .band-inner {
  position: relative;
  height: 56px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  overflow: visible;
}

.hero .girl-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(520px, 42%);
  aspect-ratio: 619 / 900;
  transform: translateY(0) scale(1.2);
  transform-origin: bottom right;
  overflow: visible;
  isolation: isolate;
}

.hero .girl {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 1;
}

.hero .sparkle {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

.hero .sparkle-22 {
  top: 60%;
  right: 0;
  width: 18%;
  opacity: 0.9;
}

.hero .sparkle-21 {
  top: 53%;
  right: 17%;
  width: 9%;
}

/* -------------------------
   CARD 1: "Invisible risk"
------------------------- */
.risk-card {
  display: grid;
  grid-template-columns: clamp(120px, 22vw, 306px) 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.risk-side {
  width: 100%;
  height: auto;
  display: block;
  align-self: stretch;
  object-fit: contain;
}

.risk-body {
  min-width: 0;
}

.risk-title {
  width: min(357px, 100%);
  height: auto;
  display: block;
  margin-bottom: 12px;
}

.risk-lead {
  font-family: var(--ubuntu-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--unnamed-color-154269);
  margin: 0 0 12px 0;
  padding-top: 16px;
}

.risk-bullets {
  font-family: var(--ubuntu-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--unnamed-color-154269);

  margin: 0 0 16px 0;
  padding-left: 20px;
  list-style-type: disc;
}

.risk-bullets li {
  margin-bottom: 8px;
}


.risk-callout {
  font-family: var(--ubuntu-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--unnamed-color-0084ac);
  margin: 0 0 16px 0;
}

.risk-foot {
  font-family: var(--ubuntu-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--unnamed-color-154269);
  margin: 0;
}

/* ---------------------
    CARD: Leadership
-----------------------*/


.leadership-title {
  font-family: 'Cubano-Regular', sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  color: var(--unnamed-color-0084ac);
  margin: 0 0 10px 0;
}

.leadership-subtitle {
  font-family: var(--ubuntu-font);
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 28px;
  letter-spacing: 2px;
  color: var(--unnamed-color-0084ac);
  text-transform: uppercase;
  margin: 0 0 22px 0;
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 32px);
}

.leadership-col {
  min-width: 0;
}

.leadership-colhead {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.leadership-check {
  width: 17px;
  height: auto;
  margin-top: 4px;
  flex: 0 0 auto;
}

.leadership-role {
  font-family: var(--ubuntu-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--unnamed-color-154269);
}

.leadership-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;

  font-family: var(--ubuntu-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--unnamed-color-154269);
}

.leadership-bullets li {
  position: relative;
  padding-left: 14px;
}

.leadership-bullets li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
}

.leadership-desc {
  margin: 0;
  font-family: var(--ubuntu-font);
  font-size: 14px;
  line-height: 20px;
  color: var(--unnamed-color-154269);
}

/*------------------
   CARD: Prevention
-------------------*/

.prevention-title {
  display: block;
  width: min(759px, 100%);
  height: auto;
  margin: 0 0 16px 0;
}

.prevention-intro {
  font-family: var(--ubuntu-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--unnamed-color-154269);
  max-width: 1200px;
  margin: 0 0 22px 0;
  padding-top: 16px;
}

.prevention-list {
  display: grid;
  gap: 18px;
  margin: 0 0 22px 0;
}

.prevention-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 24px;
  align-items: start;
}

.prevention-icon {
  width: 48px;
  height: auto;
  margin-top: 4px;
}

.prevention-item-title {
  font-family: var(--ubuntu-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--unnamed-color-154269);
  margin: 0 0 4px 0;
}

.prevention-item-text {
  font-family: var(--ubuntu-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--unnamed-color-154269);
  margin: 0;
  max-width: 100%;
}

.prevention-quote {
  font-family: var(--ubuntu-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--unnamed-color-0084ac);
  text-align: center;
  margin: 10px 0 18px 0;
}

.prevention-video {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}

.prevention-video iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.prevention-video-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--ubuntu-font);
  font-size: 14px;
  color: var(--link-color);
  text-decoration: none;
}

.prevention-video-link:hover {
  text-decoration: underline;
}





/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 1024px) {
  .leadership-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .hero .intro {
    grid-template-columns: 1fr;
  }

  .hero .girl-wrap {
    width: min(520px, 70vw);
    transform: translateY(0) scale(0.65);
  }
  .risk-card {
    grid-template-columns: 1fr;
  }

  .risk-side {
    width: min(306px, 70%);
    margin: 0 auto 8px auto;
  }
  .two-card .two {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 700px) {

  .leadership-grid {
    grid-template-columns: 1fr;
  }

  .leadership-role {
    font-size: 18px;
  }

  .prevention-item {
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
  }

  .prevention-icon {
    width: 40px;
  }

  .prevention-item-title {
    font-size: 18px;
    line-height: 26px;
  }

  .prevention-quote {
    font-size: 18px;
    line-height: 26px;
  }
}

@media (max-width: 600px) {
  .hero .girl-wrap {
    transform: translateY(0) scale(0.55);
  }

  .hero .dark-blue-band {
    height: auto;
  }

  .hero .dark-blue-band .band-inner {
    height: 56px;
  }
  .hero-title {
    font-size: 42px;
    line-height: 40px;
  }
}

@media (max-width: 480px) {
  .prevention-item {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  .prevention-icon {
    width: 44px;
    margin-top: 0;
  }
}