/* ==========================================================================
   Home page sections
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: clamp(560px, calc(100vh - var(--header-h)), 820px);
  color: var(--white); text-align: center; overflow: hidden; background: var(--navy-950);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: hero-zoom 22s ease-out both; }
@keyframes hero-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(6, 18, 36, 0.55), rgba(6, 18, 36, 0) 70%),
    linear-gradient(180deg, rgba(6, 18, 36, 0.45) 0%, rgba(6, 18, 36, 0.1) 35%, rgba(6, 18, 36, 0.2) 65%, rgba(6, 18, 36, 0.85) 100%);
}
.hero__content { position: relative; z-index: 2; padding-block: 80px 110px; }
.hero__eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; }
.hero__title { font-size: clamp(40px, 6.6vw, 78px); margin-top: 14px; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35); }
.hero__text { max-width: 540px; margin: 18px auto 0; font-size: clamp(14.5px, 1.4vw, 16.5px); color: rgba(255, 255, 255, 0.9); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.hero__script {
  position: absolute; right: clamp(20px, 5vw, 64px); bottom: clamp(28px, 5vw, 56px); z-index: 2;
  font-size: clamp(26px, 3vw, 38px); color: rgba(255, 255, 255, 0.92); transform: rotate(-6deg); text-align: right; line-height: 0.95;
}
.hero__content > * { animation: rise 1s var(--ease) both; }
.hero__content > :nth-child(2) { animation-delay: 0.12s; }
.hero__content > :nth-child(3) { animation-delay: 0.24s; }
.hero__content > :nth-child(4) { animation-delay: 0.36s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .hero__script { display: none; } .hero__actions .btn { flex: 1 1 220px; } }

/* Intro (navy) ----------------------------------------------------------- */
.intro { background: var(--navy-900); color: var(--white); }
.intro__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.intro__title { font-size: clamp(30px, 3.6vw, 44px); font-weight: 500; line-height: 1.15; margin-top: 10px; }
.intro__text { margin-top: 18px; color: var(--text-on-dark); max-width: 480px; }
.intro__quote { margin-top: 20px; font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--gold-400); }
.intro__media { aspect-ratio: 16 / 10; }
.features {
  display: grid; grid-template-columns: repeat(6, 1fr);
  margin-top: clamp(48px, 6vw, 72px); padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.feature { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 4px 12px; font-size: 12.5px; color: var(--text-on-dark); line-height: 1.35; }
.feature + .feature { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.feature .icon { width: 30px; height: 30px; color: var(--gold-400); stroke-width: 1.4; }
@media (max-width: 900px) {
  .intro__grid { grid-template-columns: 1fr; }
  .features { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .feature:nth-child(4) { border-left: 0; }
}
@media (max-width: 480px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature:nth-child(odd) { border-left: 0; }
  .feature:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, 0.1); }
}

/* Newsletter band --------------------------------------------------------- */
.newsletter { background: var(--gray-50); text-align: center; }
.newsletter__title { font-size: clamp(22px, 2.4vw, 28px); color: var(--navy-800); }
.newsletter__text { margin-top: 6px; color: var(--text-muted); font-size: 14px; }
.newsletter .inline-form { max-width: 620px; margin: 24px auto 0; }
.newsletter .inline-form input { border-right: 1px solid var(--gray-200); border-radius: var(--radius-sm); margin-right: 10px; }
.newsletter .inline-form .btn { border-radius: var(--radius-sm); }
.newsletter .form-status { left: 0; right: 0; }
@media (max-width: 480px) {
  .newsletter .inline-form { flex-direction: column; gap: 10px; }
  .newsletter .inline-form input { margin-right: 0; }
}

/* Image banner ------------------------------------------------------------ */
.banner { position: relative; height: clamp(240px, 28vw, 340px); overflow: hidden; color: var(--white); background: var(--navy-800); }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.banner::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6, 18, 36, 0.78) 0%, rgba(6, 18, 36, 0.35) 45%, rgba(6, 18, 36, 0) 75%); }
.banner .container { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.banner__title { font-size: clamp(26px, 3.2vw, 40px); font-weight: 300; line-height: 1.2; }
.banner__title span { display: block; font-weight: 500; }
.banner .btn { align-self: flex-start; margin-top: 22px; }

/* Experience cards (Bring on the bold) ------------------------------------ */
.exp-card { display: flex; flex-direction: column; }
.exp-card__media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--gray-100); }
.exp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.exp-card:hover .exp-card__media img { transform: scale(1.05); }
.exp-card__title { margin-top: 20px; font-size: 16.5px; font-weight: 600; color: var(--navy-800); }
.exp-card__text { margin-top: 8px; font-size: 14px; color: var(--text-muted); flex: 1; }
.exp-card .text-link { margin-top: 14px; }

/* So much to see (blue) --------------------------------------------------- */
.see-do {
  position: relative; color: var(--white); overflow: hidden;
  background: radial-gradient(ellipse at 20% 0%, var(--blue-600) 0%, transparent 55%), linear-gradient(160deg, var(--blue-700) 0%, var(--blue-800) 60%, #061f4a 100%);
}
.see-do .section-title { color: var(--white); }
.see-do .section-sub { color: rgba(255, 255, 255, 0.85); max-width: 640px; font-size: 15px; }
.see-do__grid { max-width: 1000px; margin-inline: auto; }
.dark-card {
  display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform 0.4s var(--ease), background 0.4s;
}
.dark-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.08); }
.dark-card__media { aspect-ratio: 16 / 8.5; overflow: hidden; }
.dark-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.dark-card:hover .dark-card__media img { transform: scale(1.05); }
.dark-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.dark-card__title { font-size: 18px; font-weight: 600; }
.dark-card__text { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.8); flex: 1; }
.dark-card .text-link { margin-top: 16px; }

/* Experience India virtually ------------------------------------------------ */
.virtual { position: relative; }
.virtual__script { position: absolute; right: var(--gutter); top: -14px; font-size: clamp(26px, 2.6vw, 34px); color: var(--gold-500); transform: rotate(-8deg); text-align: right; line-height: 0.9; }
.virtual__grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 20px; }
.virtual__main { aspect-ratio: 16 / 9; height: 100%; }
.virtual__main .media-play__caption { flex-direction: column; align-items: flex-start; gap: 2px; bottom: 20px; }
.virtual__main .media-play__caption strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: 0.04em; }
.virtual__main .play-btn { width: 76px; height: 76px; }
.virtual__list { display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px; }
.dest-item {
  display: flex; align-items: center; gap: 16px; padding: 8px; width: 100%; text-align: left;
  border-radius: var(--radius); border: 1px solid var(--gray-100); background: var(--white); transition: box-shadow 0.3s, border-color 0.3s;
}
.dest-item:hover { box-shadow: var(--shadow); border-color: transparent; }
.dest-item__thumb { position: relative; width: 42%; max-width: 150px; aspect-ratio: 3 / 2; border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.dest-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dest-item__thumb::after { content: ''; position: absolute; inset: 0; background: rgba(6, 18, 36, 0.15); transition: background 0.3s; }
.dest-item__thumb .icon { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%) scale(0.6); width: 28px; height: 28px; color: var(--white); opacity: 0; transition: all 0.3s var(--ease); }
.dest-item:hover .dest-item__thumb .icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dest-item:hover .dest-item__thumb::after { background: rgba(6, 18, 36, 0.35); }
.dest-item__title { font-weight: 600; color: var(--navy-800); font-size: 15px; }
.dest-item__sub { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 900px) {
  .virtual__grid { grid-template-columns: 1fr; }
  .virtual__list { grid-template-rows: none; }
  .virtual__script { display: none; }
}

/* Spotlight -------------------------------------------------------------- */
.spotlight {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr auto; gap: 28px; align-items: center;
  padding: 14px; border: 1px solid var(--gray-100); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm);
}
.spotlight__media { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; }
.spotlight__media img { width: 100%; height: 100%; object-fit: cover; }
.spotlight__title { font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; color: var(--navy-800); }
.spotlight__text { margin-top: 4px; font-size: 14px; color: var(--text-muted); }
.spotlight .meta-list { margin-top: 14px; }
.spotlight__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-right: 14px; text-align: right; }
.rating { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.rating b { color: var(--navy-800); }
@media (max-width: 900px) {
  .spotlight { grid-template-columns: 1fr; }
  .spotlight__aside { align-items: flex-start; text-align: left; padding: 0 6px 8px; }
  .spotlight__body { padding: 0 6px; }
}

/* Testimonials ------------------------------------------------------------ */
.testimonials__title { font-size: 15px; font-weight: 600; color: var(--navy-800); margin: clamp(40px, 5vw, 56px) 0 18px; }
.review {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px;
  border: 1px solid var(--gray-100); border-radius: var(--radius); background: var(--white);
}
.review__quote-icon { position: absolute; right: 20px; top: 18px; width: 30px; height: 30px; color: var(--gold-100); }
.review__title { font-weight: 600; color: var(--navy-800); font-size: 15px; }
.review__text { font-size: 13.5px; color: var(--text-muted); flex: 1; }
.review__author { font-size: 13px; color: var(--navy-800); font-weight: 500; }
.review__author span { color: var(--text-muted); font-weight: 400; }

/* Explore more tiles --------------------------------------------------------- */
.tile { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; color: var(--white); background: var(--navy-800); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 18, 36, 0) 40%, rgba(6, 18, 36, 0.85) 100%); transition: background 0.4s; }
.tile:hover img { transform: scale(1.07); }
.tile__label { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 14.5px; }
.tile__label .icon { width: 18px; height: 18px; color: var(--gold-400); transition: transform 0.3s var(--ease); }
.tile:hover .tile__label .icon { transform: translateX(4px); }
.virtual__inner { position: relative; }