/* AVENTURA light launch theme — approved July 2026 */
:root {
  --av-ivory: #fff9ef;
  --av-sand: #f2e4cc;
  --av-sea: #dceff2;
  --av-taif-green: #dce8d6;
  --av-taif-rose: #ebcfd2;
  --av-gold: #c59a55;
  --av-ink: #17324a;
  --av-muted: #526979;
}

body {
  color: var(--av-ink);
  background: var(--av-ivory);
}

.section-muted {
  background: linear-gradient(180deg, #f8eedc 0%, var(--av-ivory) 100%);
}

.section-dark {
  color: var(--av-muted);
  background: linear-gradient(135deg, var(--av-sea) 0%, var(--av-ivory) 55%, var(--av-sand) 100%);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark .text-link,
.image-feature-content .text-link {
  color: var(--av-ink);
}

.section-dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow {
  color: #8a6531;
}

.section-dark .section-heading p,
.section-dark p {
  color: var(--av-muted);
}

/*
  Header system
  The logo is the visual anchor. Navigation deliberately uses a quieter slate
  tone, while gold is reserved for the active state and navy for the request
  action. This prevents the brand, links and controls from competing at once.
*/
.site-header,
.site-header.is-scrolled,
body:not([data-page="home"]) .site-header {
  color: #0f2742;
  background: rgba(255, 250, 242, 0.98);
  border-bottom: 1px solid rgba(15, 39, 66, 0.14);
  box-shadow: 0 10px 30px rgba(15, 39, 66, 0.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header .nav-shell {
  width: min(calc(100% - 40px), 1360px);
  gap: 28px;
}

.site-header .brand {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header .brand-logo {
  width: 190px;
}

.site-header .primary-nav {
  gap: 18px;
}

.site-header .nav-link,
.site-header.is-scrolled .nav-link,
body:not([data-page="home"]) .site-header .nav-link {
  padding: 30px 0 27px;
  color: #596978;
  font-size: 0.84rem;
  font-weight: 700;
}

html[lang="ar"] .site-header .nav-link {
  font-size: 0.88rem;
}

.site-header .nav-link::after {
  right: 0;
  bottom: 17px;
  left: 0;
  height: 2px;
  background: #b68d40;
}

.site-header .nav-link:hover,
.site-header .nav-link.is-active,
.site-header.is-scrolled .nav-link:hover,
.site-header.is-scrolled .nav-link.is-active,
body:not([data-page="home"]) .site-header .nav-link:hover,
body:not([data-page="home"]) .site-header .nav-link.is-active {
  color: #0f2742;
}

.site-header .lang-switch,
.site-header .nav-toggle,
.site-header.is-scrolled .lang-switch,
.site-header.is-scrolled .nav-toggle,
body:not([data-page="home"]) .site-header .lang-switch,
body:not([data-page="home"]) .site-header .nav-toggle {
  color: #0f2742;
  border-color: rgba(15, 39, 66, 0.22);
}

.site-header .lang-switch button,
.site-header.is-scrolled .lang-switch button,
body:not([data-page="home"]) .site-header .lang-switch button {
  color: #596978;
}

.site-header .lang-switch button:hover,
.site-header .lang-switch button.is-active,
.site-header.is-scrolled .lang-switch button:hover,
.site-header.is-scrolled .lang-switch button.is-active,
body:not([data-page="home"]) .site-header .lang-switch button:hover,
body:not([data-page="home"]) .site-header .lang-switch button.is-active {
  color: #fffaf2;
  background: #0f2742;
}

.site-header .header-plan {
  min-height: 42px;
  padding: 10px 17px;
  color: #fffaf2;
  background: #0f2742;
  border-color: #0f2742;
  box-shadow: 0 7px 16px rgba(15, 39, 66, 0.13);
  font-size: 0.78rem;
}

.site-header .header-plan:hover {
  color: #fffaf2;
  background: #173b61;
  border-color: #173b61;
}

.hero,
.page-hero {
  color: var(--av-ink);
  background: var(--av-sand);
}

.hero::before,
.page-hero::before {
  background: linear-gradient(90deg, rgba(255, 249, 239, 0.94) 0%, rgba(255, 249, 239, 0.76) 42%, rgba(255, 249, 239, 0.18) 75%, rgba(255, 249, 239, 0.24) 100%);
}

html[dir="rtl"] .hero::before,
html[dir="rtl"] .page-hero::before {
  background: linear-gradient(270deg, rgba(255, 249, 239, 0.94) 0%, rgba(255, 249, 239, 0.76) 42%, rgba(255, 249, 239, 0.18) 75%, rgba(255, 249, 239, 0.24) 100%);
}

.hero::after,
.page-hero::after {
  background: linear-gradient(transparent, rgba(255, 249, 239, 0.74));
}

.hero h1,
.page-hero h1 {
  color: var(--av-ink);
  text-shadow: 0 2px 24px rgba(255, 249, 239, 0.7);
}

.hero-description,
.page-hero-description {
  color: rgba(23, 50, 74, 0.82);
}

.hero .btn-outline,
.page-hero .btn-outline {
  color: var(--av-ink);
  background: rgba(255, 249, 239, 0.78);
  border-color: rgba(23, 50, 74, 0.25);
}

.hero .btn-outline:hover,
.page-hero .btn-outline:hover {
  color: var(--av-ink);
  background: var(--av-sea);
  border-color: var(--av-sea);
}

/* The four experience worlds keep their own visual character without returning
   to the dark, product-led treatment used before the launch reset. */
.world-sea .experience-detail-hero::before {
  background: linear-gradient(90deg, rgba(241, 251, 252, 0.94) 0%, rgba(233, 247, 249, 0.74) 43%, rgba(226, 244, 246, 0.18) 76%, rgba(226, 244, 246, 0.14) 100%);
}

.world-historic .experience-detail-hero::before {
  background: linear-gradient(90deg, rgba(255, 247, 236, 0.94) 0%, rgba(250, 235, 212, 0.76) 43%, rgba(247, 230, 202, 0.2) 76%, rgba(247, 230, 202, 0.14) 100%);
}

.world-jeddah .experience-detail-hero::before {
  background: linear-gradient(90deg, rgba(246, 247, 241, 0.94) 0%, rgba(232, 243, 240, 0.76) 43%, rgba(234, 220, 194, 0.2) 76%, rgba(234, 220, 194, 0.14) 100%);
}

.world-sea-to-balad .experience-detail-hero::before {
  background: linear-gradient(90deg, rgba(240, 249, 247, 0.95) 0%, rgba(224, 241, 239, 0.76) 43%, rgba(237, 221, 194, 0.22) 76%, rgba(237, 221, 194, 0.14) 100%);
}

.world-desert .experience-detail-hero::before {
  background: linear-gradient(90deg, rgba(255, 246, 231, 0.94) 0%, rgba(250, 225, 189, 0.75) 43%, rgba(247, 214, 165, 0.2) 76%, rgba(247, 214, 165, 0.14) 100%);
}

.world-taif .experience-detail-hero::before {
  background: linear-gradient(90deg, rgba(247, 250, 244, 0.94) 0%, rgba(230, 239, 224, 0.76) 43%, rgba(234, 214, 220, 0.2) 76%, rgba(234, 214, 220, 0.14) 100%);
}

html[dir="rtl"] .world-sea .experience-detail-hero::before {
  background: linear-gradient(270deg, rgba(241, 251, 252, 0.94) 0%, rgba(233, 247, 249, 0.74) 43%, rgba(226, 244, 246, 0.18) 76%, rgba(226, 244, 246, 0.14) 100%);
}

html[dir="rtl"] .world-historic .experience-detail-hero::before {
  background: linear-gradient(270deg, rgba(255, 247, 236, 0.94) 0%, rgba(250, 235, 212, 0.76) 43%, rgba(247, 230, 202, 0.2) 76%, rgba(247, 230, 202, 0.14) 100%);
}

html[dir="rtl"] .world-jeddah .experience-detail-hero::before {
  background: linear-gradient(270deg, rgba(246, 247, 241, 0.94) 0%, rgba(232, 243, 240, 0.76) 43%, rgba(234, 220, 194, 0.2) 76%, rgba(234, 220, 194, 0.14) 100%);
}

html[dir="rtl"] .world-sea-to-balad .experience-detail-hero::before {
  background: linear-gradient(270deg, rgba(240, 249, 247, 0.95) 0%, rgba(224, 241, 239, 0.76) 43%, rgba(237, 221, 194, 0.22) 76%, rgba(237, 221, 194, 0.14) 100%);
}

html[dir="rtl"] .world-desert .experience-detail-hero::before {
  background: linear-gradient(270deg, rgba(255, 246, 231, 0.94) 0%, rgba(250, 225, 189, 0.75) 43%, rgba(247, 214, 165, 0.2) 76%, rgba(247, 214, 165, 0.14) 100%);
}

html[dir="rtl"] .world-taif .experience-detail-hero::before {
  background: linear-gradient(270deg, rgba(247, 250, 244, 0.94) 0%, rgba(230, 239, 224, 0.76) 43%, rgba(234, 214, 220, 0.2) 76%, rgba(234, 214, 220, 0.14) 100%);
}

/* Utility elements in the experience heroes still inherited white text from
   the former dark treatment. Their own light surfaces keep them readable on
   every experience image without covering the imagery. */
.experience-detail-hero .detail-back {
  padding: 7px 11px;
  color: var(--av-ink);
  background: rgba(255, 249, 239, 0.78);
  border: 1px solid rgba(23, 50, 74, 0.16);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(23, 50, 74, 0.07);
}

.experience-detail-hero .tag {
  color: var(--av-ink);
  background: rgba(255, 249, 239, 0.8);
  border-color: rgba(23, 50, 74, 0.16);
}

.experience-detail-hero .text-link {
  color: var(--av-ink);
}

.experience-detail-hero .text-link::after {
  color: #8a6531;
}

.experience-detail-hero .journey-clarity {
  color: rgba(23, 50, 74, 0.86);
  background: rgba(255, 249, 239, 0.78);
  border-color: rgba(138, 101, 49, 0.28);
}

.hero-proof {
  background: rgba(255, 249, 239, 0.78);
  border-top-color: rgba(23, 50, 74, 0.12);
}

.proof-item {
  border-inline-end-color: rgba(23, 50, 74, 0.12);
}

.proof-item strong {
  color: var(--av-ink);
}

.proof-item span {
  color: rgba(23, 50, 74, 0.66);
}

.experience-card {
  color: var(--av-ink);
  background: var(--av-sand);
}

.experience-card::before {
  background: linear-gradient(180deg, rgba(255, 249, 239, 0.02) 35%, rgba(255, 249, 239, 0.92) 100%);
}

.experience-card-content {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 249, 239, 0.88) 34%, rgba(255, 249, 239, 0.97) 100%);
}

.experience-card h3,
.experience-card p,
.experience-card .text-link {
  color: var(--av-ink);
}

.experience-card p {
  color: rgba(23, 50, 74, 0.74);
}

.btn-dark {
  color: var(--av-ink);
  background: var(--av-sea);
  border-color: #b8dce1;
}

.btn-dark:hover,
.btn-ghost:hover {
  color: var(--av-ink);
  background: var(--av-sand);
  border-color: #dfc79f;
}

.card,
.service-card,
.value-card,
.product-card,
.event-card,
.process-step {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(23, 50, 74, 0.11);
  box-shadow: 0 16px 42px rgba(23, 50, 74, 0.07);
}

.site-footer,
footer {
  color: var(--av-ink);
  background: linear-gradient(135deg, var(--av-sand), var(--av-ivory));
  border-top: 1px solid rgba(23, 50, 74, 0.1);
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer a,
.site-footer strong,
footer h2,
footer h3,
footer h4,
footer a,
footer strong {
  color: var(--av-ink);
}

.site-footer p,
.site-footer span,
footer p,
footer span {
  color: rgba(23, 50, 74, 0.7);
}

@media (max-width: 980px) {
  .primary-nav {
    color: var(--av-ink);
    background: rgba(255, 249, 239, 0.98);
  }

  .primary-nav .nav-link {
    color: rgba(23, 50, 74, 0.8);
  }
}

/* Longer labels move navigation into its compact menu on laptop widths too.
   Keep that open state in the light Aventura palette, rather than inheriting
   the dark-theme link colour from the original header. */
@media (max-width: 1500px) {
  body.nav-open .site-header.menu-open {
    color: #0f2742;
    background: rgba(255, 250, 242, 0.99);
    border-bottom-color: rgba(15, 39, 66, 0.16);
    box-shadow: 0 10px 30px rgba(15, 39, 66, 0.1);
  }

  body.nav-open .site-header.menu-open .primary-nav {
    color: #0f2742;
    background: #fffaf2;
  }

  body.nav-open .site-header.menu-open .nav-link {
    padding: 15px 4px;
    color: #435869;
    border-bottom-color: rgba(15, 39, 66, 0.13);
    font-size: 1.1rem;
  }

  body.nav-open .site-header.menu-open .nav-link:hover,
  body.nav-open .site-header.menu-open .nav-link.is-active {
    color: #0f2742;
  }

  body.nav-open .site-header.menu-open .lang-switch,
  body.nav-open .site-header.menu-open .nav-toggle {
    color: #0f2742;
    border-color: rgba(15, 39, 66, 0.22);
  }

  body.nav-open .site-header.menu-open .lang-switch button {
    color: #596978;
  }

  body.nav-open .site-header.menu-open .lang-switch button.is-active {
    color: #fffaf2;
    background: #0f2742;
  }
}