/**
 * home-reference.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Homepage-only fidelity layer, ported 1:1 from the HyperFly reference:
 *   reference/Reference website code/…_files/a_data/hyperfly_kmXY.css
 *
 * Covers: typography (Manrope body / Inter headings + reference type scale),
 * the reference mobile breakpoint behaviour, and the `.bw-split-text`
 * scroll-driven text reveal (hyperfly-split_kmXY.js → vanilla port).
 *
 * Loaded LAST on index.html only. Colour is the single intentional deviation
 * (reference red #E11617/#EB6253 → brand blue, per tokens.css).
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. FONTS — reference :root (hyperfly_kmXY.css L16-18)
   --hyperfly-font: "Manrope"  /  --hyperfly-heading-font: "Inter"
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --font-body: "Manrope", sans-serif;
  --font-display: "Inter", sans-serif;
  --hyperfly-font: "Manrope", sans-serif;
  --hyperfly-heading-font: "Inter", sans-serif;

  /* reference text colours */
  --hyperfly-text: #566879;
  --hyperfly-text-rgb: 86, 104, 121;
  --hyperfly-black: #030D17;
  --hyperfly-black-rgb: 3, 13, 23;
  --hyperfly-white-rgb: 255, 255, 255;
  --hyperfly-letter-space: -0.038em;
}

/* reference body (hyperfly_kmXY.css L250-256) */
body {
  font-family: var(--hyperfly-font);
  color: var(--hyperfly-text);
  font-size: 16px;
  line-height: 1.875;
  font-weight: 400;
}

/* reference headings (hyperfly_kmXY.css L284-289) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hyperfly-heading-font);
  letter-spacing: var(--hyperfly-letter-space);
}

/* reference: no forced line breaks below 575px */
@media (max-width: 575px) {
  h1 br, h2 br, h3 br, h4 br, h5 br, h6 br, p br { display: none; }
}
@media (max-width: 991px) {
  .sec-title__text br, .section-subtitle br { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SECTION TITLES — reference .sec-title (hyperfly_kmXY.css L1075-1140)
   ═══════════════════════════════════════════════════════════════════════════ */
.section-header,
.trust-section-intro,
.sec-title {
  position: relative;
  z-index: 1;
  line-height: 1;
  padding-bottom: 40px;
  margin-top: -7px;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .section-header,
  .trust-section-intro,
  .sec-title {
    padding-bottom: 64px;
    margin-top: -9px;
  }
}

/* reference caps its centred headers far wider than 650px */
.section-header,
.trust-section-intro {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

/* .sec-title__title — 35/45 mobile, 55/65 from 768px, weight 600 */
.section-title,
.sec-title__title {
  font-family: var(--hyperfly-heading-font);
  margin: 0 0 12px;
  font-size: 35px;
  line-height: 45px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--hyperfly-black);
}

@media (min-width: 768px) {
  .section-title,
  .sec-title__title {
    font-size: 55px;
    line-height: 65px;
    margin: 0 0 19px;
  }
}

.section-title.white,
.sec-title__title.white,
.section-dark .section-title,
.section-dark .sec-title__title {
  color: #fff;
}

/* .sec-title__text — 16/30, weight 600 */
.section-subtitle,
.sec-title__text,
.trust-intro-text,
.explorer-intro-text {
  margin: 0;
  font-family: var(--hyperfly-font);
  color: var(--hyperfly-text);
  font-size: 16px;
  line-height: 30px;
  font-weight: 600;
  max-width: none;
}

.section-subtitle.white,
.sec-title__text.white,
.trust-intro-text.white,
.section-dark .section-subtitle,
.section-dark .trust-intro-text {
  color: #fff;
}

/* the reference home sec-titles carry no eyebrow/tagline row */
.section-header .eyebrow,
.trust-section-intro .eyebrow,
.sec-title .eyebrow,
.explorer-intro-left .eyebrow {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. bw-split-text / bw-hero-line
   Now shared site-wide — see assets/css/split-text.css. The reference derives
   its fill from a hard-coded colour per component; the shared file derives it
   from currentColor, and the .section-title / .white rules above supply that.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   4. SECTION RHYTHM — reference sections are 120px / 80px @767 flat,
   not fluid clamps (see .service-one, .tab-one, .destinations-one, …)
   ═══════════════════════════════════════════════════════════════════════════ */
main > .section {
  padding-block: 120px;
}

@media (max-width: 767px) {
  main > .section {
    padding-block: 80px;
  }
}

.trust-strip {
  padding: 120px 0;
}

@media (max-width: 767px) {
  .trust-strip {
    padding: 80px 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. HERO — reference .main-slider-one (L: 330px top, -115px overlap)
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-section .hero-eyebrow {
  font-family: var(--hyperfly-heading-font);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  gap: 19px;
  margin: 0 0 23px;
}

.hero-section .hero-eyebrow::before {
  display: none;
}

.hero-section .hero-eyebrow svg {
  flex-shrink: 0;
  width: 45px;
  height: 45px;
}

.hero-section .hero-title {
  font-family: var(--hyperfly-heading-font);
  font-size: 85px;
  line-height: 95px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 36px;
}

@media (max-width: 1199px) {
  .hero-section .hero-title {
    font-size: 75px;
    line-height: 90px;
  }
}

@media (max-width: 767px) {
  .hero-section .hero-title {
    font-size: 50px;
    line-height: 60px;
    margin-bottom: 24px;
  }
  .hero-section .hero-eyebrow {
    font-size: 18px;
    gap: 12px;
    margin-bottom: 18px;
  }
  .hero-section .hero-eyebrow svg {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 575px) {
  .hero-section .hero-title {
    font-size: 40px;
    line-height: 50px;
  }
  .hero-section .hero-eyebrow {
    font-size: 16px;
  }
}

.booking-tab-btn {
  font-family: var(--hyperfly-heading-font);
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
}

.trip-mode-option {
  font-family: var(--hyperfly-heading-font);
  font-size: 16px;
  font-weight: 500;
}

/* reference .bottom — 5-up desktop, 3-up ≤991, 1-up ≤767 */
.booking-fields-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 991px) {
  .booking-fields-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .booking-fields-grid {
    grid-template-columns: 1fr;
  }
}

.booking-fields-grid .form-field {
  height: 50px;
  font-family: var(--hyperfly-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 35px;
  border-radius: 5px;
  padding-left: 47px;
  padding-right: 30px;
}

.btn-booking-submit {
  font-family: var(--hyperfly-heading-font);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 7px;
  height: 50px;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. NO MOBILE SLIDERS — the reference stacks these as bootstrap columns
   (col-lg-4 col-md-6 → 3-up / 2-up / 1-up). The carousel system is not
   loaded on this page; these rules neutralise its leftover styling.
   ═══════════════════════════════════════════════════════════════════════════ */
.carousel-dots,
.fable-carousel-dots,
.carousel-container-outer .carousel-dots {
  display: none !important;
}

.trust-grid,
.process-grid,
.testimonials-grid,
.destinations-grid,
.fleet-grid,
.why-choose-one__list,
.flight-one__list {
  display: grid !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  flex-wrap: wrap;
  padding-bottom: 0;
}

.trust-card,
.process-card,
.testimonial-card,
.destination-card,
.fleet-card,
.why-choose-one__box {
  flex: 1 1 auto !important;
  scroll-snap-align: none !important;
  min-width: 0;
}

/* 3-up → 2-up (≤991) → 1-up (≤767), reference gutter-y-30 */
.trust-grid,
.process-grid,
.testimonials-grid,
.fleet-grid,
.destinations-grid,
.why-choose-one__list,
.flight-one__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

@media (max-width: 991px) {
  .trust-grid,
  .process-grid,
  .testimonials-grid,
  .fleet-grid,
  .destinations-grid,
  .why-choose-one__list,
  .flight-one__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
}

@media (max-width: 767px) {
  .trust-grid,
  .process-grid,
  .testimonials-grid,
  .fleet-grid,
  .destinations-grid,
  .why-choose-one__list,
  .flight-one__list {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. CARD TYPOGRAPHY — reference values, per component
   ═══════════════════════════════════════════════════════════════════════════ */

/* .feature-two__item (trust cards) */
.trust-title {
  font-family: var(--hyperfly-heading-font);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.trust-desc {
  font-family: var(--hyperfly-font);
  font-size: 16px;
  line-height: 1.875;
  margin: 0;
  color: #fff;
  opacity: 0.65;
}

.trust-card:hover .trust-desc { opacity: 1; }

.trust-card-header { gap: 25px; padding: 29px 35px; }
.trust-desc-wrapper { padding: 30px 35px; }

@media (max-width: 767px) {
  .trust-card-header { padding: 26px 24px; }
  .trust-desc-wrapper { padding: 24px 24px 28px; }
}

/* .feature-one__item (booking process) */
.process-card .process-card-title,
.process-card-title {
  font-family: var(--hyperfly-heading-font);
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--heading-on-light, #030D17) !important;
}

.process-card .process-card-desc,
.process-card-desc {
  font-family: var(--hyperfly-font);
  font-size: 16px;
  line-height: 1.875;
  margin: 0;
  color: var(--text-on-light, #566879) !important;
}

/* .service-one__item (fleet cards) */
.fleet-card-title {
  font-family: var(--hyperfly-heading-font);
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.fleet-spec-item {
  font-family: var(--hyperfly-font);
  font-size: 14px;
  font-weight: 500;
}

/* .why-choose-one__box */
.why-choose-one__box__title {
  font-family: var(--hyperfly-heading-font);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.6px;
  margin: 0 0 9px;
}

.why-choose-one__box__sub-title {
  font-family: var(--hyperfly-heading-font);
  font-size: 18px;
  font-weight: 500;
  color: var(--hyperfly-text);
  margin: 0 0 22px;
}

.why-choose-one__box__text {
  font-family: var(--hyperfly-font);
  font-size: 16px;
  line-height: 1.875;
  margin: 0;
}

.why-choose-one__box__icon svg {
  width: 55px;
  height: 55px;
}

@media (max-width: 767px) {
  .why-choose-one__box__icon {
    margin-bottom: 20px;
  }
}

/* .testimonials-card */
.testimonial-quote {
  font-family: var(--hyperfly-heading-font);
  font-size: 20px;
  line-height: 35px;
  font-weight: 600;
  color: var(--hyperfly-black);
  margin: 0 0 30px;
}

.author-name {
  font-family: var(--hyperfly-heading-font);
  font-size: 18px;
  font-weight: 700;
  text-transform: capitalize;
  margin: 0;
}

.author-meta {
  font-family: var(--hyperfly-font);
  font-size: 16px;
  margin: 0;
}

/* .destinations-one__item */
.destination-name {
  font-family: var(--hyperfly-heading-font);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 5px;
  color: #fff;
}

.destination-route {
  font-family: var(--hyperfly-font);
  font-size: 14px;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. FLEET EXPLORER — reference .tab-one
   ═══════════════════════════════════════════════════════════════════════════ */
.explorer-intro-split {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 64px;
  margin-bottom: 0;
}

@media (max-width: 1199px) {
  .explorer-intro-split {
    display: block;
    padding-bottom: 40px;
  }
  .explorer-intro-right {
    margin-top: 30px;
  }
}

.explorer-intro-text {
  max-width: 525px;
  font-size: 18px;
  line-height: 35px;
  font-weight: 500;
}

@media (max-width: 1199px) {
  .explorer-intro-text { max-width: 100%; }
}

/* .tab-one__tabs — one bordered strip, grid-collapsed on smaller screens.
   NOT a horizontal scroller. */
.explorer-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  margin: 0 0 70px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid rgba(var(--hyperfly-black-rgb), 0.07);
  overflow: visible;
}

@media (max-width: 1199px) {
  .explorer-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 50px;
  }
}

@media (max-width: 574px) {
  .explorer-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 40px;
  }
}

.explorer-tabs-container { margin-bottom: 0; }

.explorer-tab-btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  cursor: pointer;
  border: none;
  border-right: 1px solid rgba(var(--hyperfly-black-rgb), 0.07);
  border-radius: 0;
  background: transparent;
  padding: 29px 10px 23px;
  font-family: var(--hyperfly-heading-font);
  font-size: 18px;
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--hyperfly-black);
  transition: all 0.4s ease;
}

.explorer-tab-btn:last-child { border-right: none; }

.explorer-tab-btn svg {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
  color: var(--blue);
  transition: all 0.4s ease;
}

.explorer-tab-btn::after {
  position: absolute;
  content: "";
  height: calc(100% - 8px);
  width: 0;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: -1;
  background-image: var(--gradient-primary);
  transition: all 0.5s ease;
  border-radius: 7px;
}

.explorer-tab-btn.active,
.explorer-tab-btn:hover {
  color: #fff;
  background: transparent;
}

.explorer-tab-btn.active::after,
.explorer-tab-btn:hover::after {
  width: calc(100% - 8px);
}

.explorer-tab-btn.active svg,
.explorer-tab-btn:hover svg {
  color: #fff;
}

@media (max-width: 767px) {
  .explorer-tab-btn {
    padding: 20px 6px 16px;
    font-size: 15px;
  }
  .explorer-tab-btn svg {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 574px) {
  /* keep a clean grid: the 3rd row divider would otherwise dangle */
  .explorer-tab-btn:nth-child(2n) { border-right: none; }
}

/* .tab-one__content */
.explorer-panel-title {
  font-family: var(--hyperfly-heading-font);
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 25px;
}

.explorer-description {
  font-family: var(--hyperfly-font);
  font-size: 16px;
  line-height: 1.875;
  margin: 0 0 36px;
}

.explorer-bullet {
  font-family: var(--hyperfly-heading-font);
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 4px;
}

/* reference .tab-one__image stacks below the copy under 1199px */
@media (max-width: 1199px) {
  .explorer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. BUTTONS — reference .hyperfly-btn typography
   ═══════════════════════════════════════════════════════════════════════════ */
.btn,
.btn-primary,
.btn-secondary {
  font-family: var(--hyperfly-heading-font);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 7px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. MOBILE OVERFLOW GUARDS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .explorer-stat-badge {
    padding: 0.75rem 1.25rem;
  }
  .destinations-cta-box .btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. ICON TREATMENT — reference renders icons as bare gradient-clipped
   glyphs (55px for .why-choose-one__box__icon, 40px for .tab-one__tabs li i),
   never as filled chips.
   ═══════════════════════════════════════════════════════════════════════════ */
.why-choose-one__box__icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.why-choose-one__box__icon svg {
  width: 55px;
  height: 55px;
  stroke-width: 1.2;
}

.why-choose-one__box__sub-title {
  text-transform: none;
  letter-spacing: normal;
}

.why-choose-one__box {
  background-color: #fff;
  border: 1px solid var(--hyperfly-border-color, #EFEFEF);
  border-radius: 7px;
  padding: 28px 30px 22px;
}

.trust-icon-box {
  width: 45px;
  height: 45px;
}

.trust-icon-box svg {
  width: 26px;
  height: 26px;
}

.explorer-tab-btn.active {
  box-shadow: none;
  border-color: transparent;
}

.explorer-tab-btn.active,
.explorer-tab-btn:hover {
  background-color: transparent;
}

.explorer-tab-btn:not(:last-child) {
  border-right: 1px solid rgba(var(--hyperfly-black-rgb), 0.07);
}

/* dark-section body copy defaults to the reference white/opacity treatment */
.section-dark p,
.trust-strip p {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. UTILITIES + SPLIT-INTRO FLEX SIZING (reference .tab-one .sec-title)
   ═══════════════════════════════════════════════════════════════════════════ */
.text-center { text-align: center; }
.text-left { text-align: left; }

.sec-title.text-center { margin-inline: auto; }
.sec-title.text-center .sec-title__text { margin-inline: auto; max-width: 900px; }

.explorer-intro-left {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.explorer-intro-right {
  flex: 0 1 525px;
  min-width: 0;
}

@media (max-width: 1199px) {
  .explorer-intro-left,
  .explorer-intro-right {
    flex: 1 1 100%;
  }
}