/* About Us — final section correction */

/* HERO: white background with fully opaque dark typography. */
body:has(#about-slider) main > section:first-of-type {
  background: #ffffff !important;
  background-image: none !important;
}
body:has(#about-slider) main > section:first-of-type > div:first-child,
body:has(#about-slider) main > section:first-of-type > div:nth-child(2) {
  display: none !important;
}
body:has(#about-slider) main > section:first-of-type p:first-child { color: #111111 !important; opacity: 1 !important; }
body:has(#about-slider) main > section:first-of-type h1 { color: #111111 !important; opacity: 1 !important; }
body:has(#about-slider) main > section:first-of-type p:last-child { color: #333333 !important; opacity: 1 !important; }

/* STORY GRID: this is the section shown in the screenshot. Keep it white, not dark. */
body:has(#about-slider) main > section:nth-of-type(2) .grid:has(#about-slider) > div:first-child {
  position: relative !important;
  overflow: visible !important;
  isolation: auto !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
body:has(#about-slider) main > section:nth-of-type(2) .grid:has(#about-slider) > div:first-child::before,
body:has(#about-slider) main > section:nth-of-type(2) .grid:has(#about-slider) > div:first-child::after {
  display: none !important;
}
body:has(#about-slider) main > section:nth-of-type(2) .grid:has(#about-slider) > div:first-child p {
  color: #111111 !important;
  opacity: 1 !important;
}
body:has(#about-slider) main > section:nth-of-type(2) .grid:has(#about-slider) > div:first-child > p:first-child {
  color: #111111 !important;
  opacity: 1 !important;
}
body:has(#about-slider) main > section:nth-of-type(2) .grid:has(#about-slider) > div:first-child h2 {
  color: #111111 !important;
  opacity: 1 !important;
}
body:has(#about-slider) main > section:nth-of-type(2) .grid:has(#about-slider) > div:first-child .text-ocean-700 {
  color: #333333 !important;
  opacity: 1 !important;
}

/* Story image stays normal and fully visible. */
body:has(#about-slider) main > section:nth-of-type(2) .grid:has(#about-slider) > div:last-child {
  background: transparent !important;
  opacity: 1 !important;
}
body:has(#about-slider) #about-slider,
body:has(#about-slider) #about-slider img {
  opacity: 1 !important;
  filter: none !important;
}

/* FOUNDER CARD: dark style only for the dedicated founder grid, not the story grid. */
body:has(#about-slider) main > section:nth-of-type(2) div.mt-24.grid > div:first-child {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #062f3d !important;
  background-image: linear-gradient(145deg,#073b4c 0%,#062f3d 62%,#052733 100%) !important;
  border: 1px solid rgba(157,225,226,.22) !important;
  box-shadow: 0 24px 55px rgba(3,28,38,.22) !important;
  opacity: 1 !important;
}
body:has(#about-slider) main > section:nth-of-type(2) div.mt-24.grid > div:first-child::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 88% 8%,rgba(91,214,207,.12),transparent 34%),
    radial-gradient(circle at 8% 92%,rgba(17,104,128,.18),transparent 38%) !important;
}
body:has(#about-slider) main > section:nth-of-type(2) div.mt-24.grid > div:first-child p {
  color:#e4f2f4 !important;
  opacity:1 !important;
}
body:has(#about-slider) main > section:nth-of-type(2) div.mt-24.grid > div:first-child p:first-child { color:#9de1e2 !important; }
body:has(#about-slider) main > section:nth-of-type(2) div.mt-24.grid > div:first-child h2 { color:#ffffff !important; opacity:1 !important; }
body:has(#about-slider) main > section:nth-of-type(2) div.mt-24.grid > div:first-child .text-ocean-200 { color:#cfe8eb !important; opacity:1 !important; }
body:has(#about-slider) main > section:nth-of-type(2) div.mt-24.grid > div:first-child .bg-turquoise-400 { background-color:#55cfc8 !important; opacity:1 !important; }

/* APPROACH CARDS: remove checkmarks and use compact premium pill titles. */
body:has(#about-slider) main > section:nth-of-type(2) .mt-24 > div[class*="grid"] > div {
  background:#ffffff !important;
  border:1px solid #e8ded1 !important;
  border-radius:1.25rem !important;
  opacity:1 !important;
}

/* Hide the old checkmark circle completely. */
body:has(#about-slider) main > section:nth-of-type(2) .mt-24 > div[class*="grid"] > div > div:first-child {
  display:none !important;
}

/* Title badge inspired by the reference: dark navy, white type, rounded pill. */
body:has(#about-slider) main > section:nth-of-type(2) .mt-24 > div[class*="grid"] h3 {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:46px !important;
  padding:10px 20px !important;
  margin:0 0 16px 0 !important;
  border:1px solid #062f3d !important;
  border-radius:999px !important;
  background:#062f3d !important;
  color:#ffffff !important;
  font-family:inherit !important;
  font-size:1rem !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.005em !important;
  box-shadow:0 8px 20px rgba(6,47,61,.14) !important;
  opacity:1 !important;
}

body:has(#about-slider) main > section:nth-of-type(2) .mt-24 > div[class*="grid"] p {
  color:#333333 !important;
  opacity:1 !important;
}

/* Welcome panel remains dark and fully readable. */
body:has(#about-slider) main section:has(#about-slider) div[class*="mt-24"][class*="rounded-[2rem]"] {
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:#062f3d !important;
  background-image:linear-gradient(145deg,#073b4c 0%,#062f3d 60%,#052733 100%) !important;
  border:1px solid rgba(157,225,226,.22) !important;
  opacity:1 !important;
  box-shadow:0 28px 70px rgba(3,28,38,.24) !important;
}
body:has(#about-slider) main section:has(#about-slider) div[class*="mt-24"][class*="rounded-[2rem]"]::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 88% 8%,rgba(91,214,207,.16),transparent 30%),
    radial-gradient(circle at 8% 92%,rgba(17,104,128,.18),transparent 34%) !important;
}
body:has(#about-slider) main section:has(#about-slider) div[class*="mt-24"][class*="rounded-[2rem]"]::after { display:none !important; }
body:has(#about-slider) main section:has(#about-slider) div[class*="mt-24"][class*="rounded-[2rem]"] > * { position:relative !important; z-index:2 !important; opacity:1 !important; }
body:has(#about-slider) main section:has(#about-slider) div[class*="mt-24"][class*="rounded-[2rem]"] p:first-child { color:#8de2da !important; opacity:1 !important; }
body:has(#about-slider) main section:has(#about-slider) div[class*="mt-24"][class*="rounded-[2rem]"] h2 { color:#ffffff !important; opacity:1 !important; }
body:has(#about-slider) main section:has(#about-slider) div[class*="mt-24"][class*="rounded-[2rem]"] p:last-child { color:#e7f4f5 !important; opacity:1 !important; max-width:760px !important; margin-left:auto !important; margin-right:auto !important; }

@media (max-width:640px) {
  body:has(#about-slider) main > section:first-of-type h1 { font-size:clamp(2.75rem,12vw,4rem) !important; line-height:1.05 !important; }
  body:has(#about-slider) main > section:nth-of-type(2) .grid:has(#about-slider) > div:first-child { padding-right:0 !important; }
  body:has(#about-slider) main > section:nth-of-type(2) div.mt-24.grid > div:first-child { border-radius:1.5rem !important; }
  body:has(#about-slider) main > section:nth-of-type(2) .mt-24 > div[class*="grid"] h3 { min-height:42px !important; padding:9px 15px !important; font-size:.95rem !important; border-radius:999px !important; }
  body:has(#about-slider) main section:has(#about-slider) div[class*="mt-24"][class*="rounded-[2rem]"] { border-radius:1.5rem !important; padding-left:1.25rem !important; padding-right:1.25rem !important; padding-top:3rem !important; padding-bottom:3rem !important; }
}

/* Homepage desktop-only fix: hide the mobile destination swiper on large screens. */
@media (min-width:768px) {
  .mobile-destination-swiper { display:none !important; }

  /* Keep the desktop hero proportionate on laptop and large desktop screens. */
  body:has(#home) #home .hero-copy h1 {
    font-size: clamp(4.75rem, 5.5vw, 6.25rem) !important;
    line-height: .94 !important;
    letter-spacing: -.045em !important;
    margin-bottom: 1.75rem !important;
  }

  body:has(#home) #home .hero-copy > p:not(.mobile-hero-scroll) {
    font-size: clamp(1rem, 1.15vw, 1.2rem) !important;
    line-height: 1.55 !important;
    max-width: 44rem !important;
    margin-bottom: 2rem !important;
  }
}

/* Mobile homepage package images: use the real package artwork without changing layout or swipe behavior. */
@media (max-width:767px) {
  .mobile-journey-card:nth-child(1) img {
    content: url('/images/asasa.jpg');
  }
  .mobile-journey-card:nth-child(2) img {
    content: url('/images/Gemini_Generated_Image_gw3tx9gw3tx9gw3t.jpg');
  }
  .mobile-journey-card:nth-child(3) img {
    content: url('/images/Gemini_Generated_Image_xxtet3xxtet3xxte (4).jpg');
  }
}

/* Homepage desktop refinement: centered editorial headings, single-line titles, tighter vertical rhythm. */
@media (min-width:768px) {
  body:has(#home) #destinations {
    padding-top: 4.5rem !important;
    padding-bottom: 4.25rem !important;
  }

  body:has(#home) #destinations > .max-w-7xl > .max-w-3xl {
    max-width: 100% !important;
    margin: 0 auto 2rem !important;
    text-align: center !important;
  }

  body:has(#home) #destinations > .max-w-7xl > .max-w-3xl h2 {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto 1rem !important;
    white-space: nowrap !important;
    font-size: clamp(2.9rem, 4.1vw, 4.35rem) !important;
    line-height: 1 !important;
  }

  body:has(#home) #destinations > .max-w-7xl > .max-w-3xl h2 br {
    display: none !important;
  }

  body:has(#home) #destinations > .max-w-7xl > .max-w-3xl > p:last-child {
    max-width: 46rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:has(#home) .desktop-home-seo {
    padding-top: 4.5rem !important;
    padding-bottom: 4.75rem !important;
  }

  body:has(#home) .desktop-home-seo > .max-w-7xl > .max-w-3xl {
    max-width: 64rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body:has(#home) .desktop-home-seo h2 {
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
    font-size: clamp(2.8rem, 4vw, 4.25rem) !important;
    line-height: 1 !important;
  }

  body:has(#home) .desktop-home-seo p {
    max-width: 58rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:has(#home) .desktop-journal {
    padding-top: 4.5rem !important;
    padding-bottom: 5rem !important;
  }

  body:has(#home) .desktop-journal > .max-w-7xl > .flex {
    position: relative !important;
    display: block !important;
    margin-bottom: 2.5rem !important;
  }

  body:has(#home) .desktop-journal > .max-w-7xl > .flex > div {
    max-width: none !important;
    text-align: center !important;
  }

  body:has(#home) .desktop-journal h2 {
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
    font-size: clamp(2.8rem, 4vw, 4.25rem) !important;
    line-height: 1 !important;
  }

  body:has(#home) .desktop-journal > .max-w-7xl > .flex > a {
    position: absolute !important;
    right: 0 !important;
    bottom: .2rem !important;
  }

  body:has(#home) .desktop-cta {
    padding-top: 4.25rem !important;
    padding-bottom: 4.75rem !important;
  }

  body:has(#home) .desktop-cta h2 {
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
    font-size: clamp(2.8rem, 4.2vw, 4.6rem) !important;
    line-height: 1 !important;
  }

  body:has(#home) .desktop-cta h2 br {
    display: none !important;
  }

  body:has(#home) .desktop-cta p {
    margin-bottom: 1.75rem !important;
  }
}

/* Prevent long editorial headings from overflowing on smaller desktop widths. */
@media (min-width:768px) and (max-width:1100px) {
  body:has(#home) #destinations > .max-w-7xl > .max-w-3xl h2,
  body:has(#home) .desktop-home-seo h2,
  body:has(#home) .desktop-journal h2,
  body:has(#home) .desktop-cta h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  }
}
