/* ── Lenis smooth scroll ── */
html.lenis, html.lenis-body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto; }
html.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis.lenis-stopped { overflow: hidden; }
html.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ── Airplane BG Container ── */
html body .airplane-bg-container {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--color-bg) !important;
    background-image:
        radial-gradient(
            circle at 70% 20%,
            color-mix(in srgb, var(--color-bg-secondary) 16%, transparent) 0%,
            transparent 38%
        ),
        linear-gradient(
            135deg,
            var(--color-bg) 0%,
            var(--color-bg) 25%,
            color-mix(in srgb, var(--color-bg) 55%, var(--color-bg-secondary)) 62%,
            var(--color-bg-deep) 100%
        ) !important;
}
html body #airplane-bg-canvas {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 0;
}
/* Airplane bg overlay + grain disabled so the backdrop behind the hero
   matches index.php (empty .airplane-bg-container = flat navy only). */
html body .airplane-bg-overlay {
    display: none;
}
html body .airplane-bg-grain {
    display: none;
}

/* ── Preloader ── */
html body .preloader {
    flex-direction: column;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
html body .preloader.loaded { opacity: 0; visibility: hidden; }

/* ── Transparency Overrides ── */
html, 
html body, 
html body.lenis {
    background-color: transparent !important;
    overflow-x: clip;
    width: 100%;
    margin: 0;
    padding: 0;
}
.dark {
    background-color: transparent !important;
}
html body div.page-wrapper.dark,
html body .page-wrapper.dark {
    position: relative;
    z-index: 2;
    background: transparent !important;
    width: 100% !important;
    overflow-x: clip !important;
}
html body .section--bg,
html body .footer-section.section--bg,
html body .package-section.section--bg {
    background-color: transparent;
    background-image: none;
}
html body .banner-section, 
html body .overview-section, 
html body .about-section,
html body .feature-section, 
html body .statistics-section, 
html body .charter-section,
html body .book-form-section, 
html body .package-section, 
html body .faq-section,
html body .client-section, 
html body .brand-section, 
html body .blog-section, 
html body .footer-section {
    background-color: transparent;
    background-image: none;
    background: transparent;
}
html { background: transparent !important; }
html body { background: transparent !important; }
html body .section--bg { background-color: transparent; }

/* ── Header inherits shared header.css + index.css (no page-specific overrides) ── */

/* ── Shared Button (sol-cta) ── */
html body .sol-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 42px;
    border: 1.5px solid var(--color-accent);
    color: var(--color-accent);
    font-family: 'Mulish', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: color 0.42s ease, box-shadow 0.42s ease;
}
html body .sol-cta-fill {
    position: absolute;
    inset: 0;
    background: var(--color-accent);
    transform: translateX(-102%);
    transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
    z-index: 0;
}
html body .sol-cta:hover .sol-cta-fill { transform: translateX(0); }
html body .sol-cta:hover { color: #111C26; text-decoration: none; box-shadow: 0 10px 34px rgba(250, 205, 81,0.3); }
html body .sol-cta span, html body .sol-cta i { position: relative; z-index: 1; }

/* ── Footer ── */
html body .footer-section { border: none; margin-top: -10px; }

/* =================================================================
   CLASSIC HERO — Matches index.css hero structure
   ================================================================= */

/* Hero Section — full-viewport.
   Height matches index.php: index's hero is content-driven (max(100vh, content)).
   Measured rendered heights: 1034px below ~1470px viewport width, 1001px at/above. */
html body .classic-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 520px; /* Reduced to prevent overflow on short viewports */
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 2;
  padding-top: var(--hero-pt);    /* shared token — same as index.css */
  padding-bottom: max(2vh, 20px);
}

/* Hero overlays (hero-dark-overlay, hero-left-gradient, hero-vignette)
   are inherited from shared index.css — no page-specific overrides. */

/* Grid — content left-aligned */
html body .hero-grid {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 4;
}

html body .hero-animation-area {
  display: none;
}

html body .hero-content-col {
  margin-left: max(40px, calc((100vw - 1340px) / 2 + 40px));
  /* Fluid responsive width that expands on shorter viewports to prevent text wrapping */
  width: clamp(480px, calc(38vw + max(0px, 750px - 100vh) * 1.5), 800px);
  flex-shrink: 0;
  padding: var(--hero-col-pt) 0; /* shared token — matches all other hero slides */
  /* margin-top removed: positioning is governed by --hero-pt on .classic-hero */
}

/* Hero content typography */
html body .hero-eyebrow {
  display: inline-block;
  font-family: var(--label-md-font-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 24px;
  opacity: 0.85;
}

html body .hero-heading {
  font-family: var(--headline-lg-font-family);
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 52px;
}

html body .heading-accent {
  color: var(--color-accent);
  font-weight: 700;
}

html body .heading-light {
  display: block;
  margin-top: 18px;
  color: var(--color-text);
  font-weight: 300;
  letter-spacing: 0.04em;
}

html body .hero-body-wrapper {
  margin-bottom: 42px;
  max-width: 580px;
}

html body .hero-paragraph {
  font-family: var(--body-lg-font-family);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.75;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 100%;
  margin: 0;
}

html body .hero-paragraph + .hero-paragraph {
  margin-top: 36px;
}

/* CTA button & contact wrapper */
html body .hero-cta-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

html body .hero-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 62px;
  padding: 18px 44px;
  white-space: nowrap;
  background: var(--color-accent);
  color: #111C26;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  text-decoration: none;
  border-radius: 14px;
  border: 1px solid rgba(250, 205, 81, 0.2);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html body .cta-arrow {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html body .hero-cta-link:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.22),
    0 14px 40px rgba(0, 0, 0, 0.22);
}

html body .hero-cta-link:hover .cta-arrow {
  transform: translateX(4px);
}

html body .hero-cta-link:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 4px var(--border-medium);
}

/* ── Hero Direct Contact Information Card ── */
/* ── Hero Direct Contact (Airy Luxury Inline Style Below CTA) ── */
html body .hero-cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

html body .hero-contact-inline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 5;
  padding-top: 2px;
}

html body .contact-inline-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  padding: 6px 2px;
  transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  outline: none;
  cursor: pointer;
}

html body .contact-inline-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(250, 205, 81, 0.12);
  border: 1px solid rgba(250, 205, 81, 0.3);
  color: var(--color-accent);
  font-size: 12px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

html body .contact-inline-text {
  font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.25px;
  white-space: nowrap;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

html body .contact-inline-item:hover .contact-inline-icon {
  background: var(--color-accent);
  color: #031F3B;
  border-color: var(--color-accent);
  box-shadow: 0 0 14px rgba(250, 205, 81, 0.5);
  transform: scale(1.08);
}

html body .contact-inline-item:hover .contact-inline-text {
  color: var(--color-accent);
  text-shadow: 0 0 10px rgba(250, 205, 81, 0.35);
}

html body .contact-inline-dot {
  color: rgba(250, 205, 81, 0.5);
  font-size: 13px;
}

/* Continuation cue */
html body .hero-continuation-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  animation: hero-fade-up 0.8s ease forwards;
  animation-delay: 1.4s;
}

html body .cue-arrow {
  font-size: 10px;
  color: var(--color-text);
  opacity: 0.2;
}

/* Hero CSS animations — matching index */
html body .classic-hero .hero-eyebrow {
  opacity: 0;
  transform: translateY(24px);
  animation: hero-fade-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  animation-delay: 0.05s;
}

html body .classic-hero .hero-heading {
  opacity: 0;
  transform: translateY(24px);
  animation: hero-fade-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  animation-delay: 0.15s;
}

html body .classic-hero .hero-body-wrapper {
  opacity: 0;
  transform: translateY(24px);
  animation: hero-fade-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  animation-delay: 0.35s;
}

html body .classic-hero .hero-cta-wrapper {
  opacity: 0;
  transform: translateY(24px);
  animation: hero-fade-up 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
  animation-delay: 0.55s;
}

@keyframes hero-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .classic-hero .hero-eyebrow,
  html body .classic-hero .hero-heading,
  html body .classic-hero .hero-body-wrapper,
  html body .classic-hero .hero-cta-wrapper {
    opacity: 1;
    transform: none;
    animation: none;
  }
  html body .hero-continuation-cue {
    opacity: 0.1;
    animation: none;
  }
}

/* ---- Form section — no overlap, clean spacing after hero ---- */

html body .partner-form-section {
    padding: 120px 0 160px 0;
    position: relative;
    z-index: 20;
    background: transparent;
    min-height: auto;
}

html body .partner-form-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle 380px at 50% 380px,
            color-mix(in srgb, var(--color-accent) 4%, transparent) 0%,
            transparent 70%
        ),
        radial-gradient(
            circle 400px at 50% 400px,
            color-mix(in srgb, var(--overlay-light) 55%, transparent) 0%,
            transparent 65%
        );
    pointer-events: none;
    z-index: 1;
}

/* Subtle atmospheric noise texture overlay for background depth */
html body .partner-form-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.018; /* Nearly invisible premium grain */
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================================
   DECORATIVE AVIATION GRAPHICS — subtle atmosphere behind the form
   Softened so the #01569C brand blue reads clearly and the form card
   remains the strongest visual element.
   ========================================================================== */

/* Radar instrument (left) — quiet, recognizable aviation detail */
html body .hero-radar {
    opacity: 0.9;
}
html body .hero-radar-svg circle[fill="none"],
html body .hero-radar-svg line {
    stroke: rgba(250, 205, 81, 0.30);
    opacity: 1;
}
html body .hero-radar-svg circle[fill="#FACD51"] {
    fill: rgba(250, 205, 81, 0.55);
}
html body .hero-radar-svg #radar-sweep-group path {
    fill: rgba(250, 205, 81, 0.45);
    opacity: 1;
}
html body .hero-radar-svg #radar-sweep-group line {
    stroke: rgba(250, 205, 81, 0.85);
    opacity: 1;
}

/* Curved flight-path map (bottom-right) — premium detail */
html body .ce-decor-map {
    opacity: 1;
}
html body .ce-decor-map svg path {
    stroke: rgba(250, 205, 81, 0.55);
    stroke-width: 0.6;
}
html body .ce-decor-map svg path[stroke-dasharray] {
    stroke: rgba(250, 205, 81, 0.60);
    stroke-width: 0.45;
}
html body .ce-decor-map svg circle {
    fill: rgba(250, 205, 81, 0.65);
    opacity: 1;
}

/* Taxiway network (JS-generated) — constellation lines + glowing dots */
html body .taxiway-network {
    opacity: 0.9;
}
html body .taxiway-network .tw-paths path {
    stroke: rgba(250, 205, 81, 0.40);
    stroke-opacity: 1;
}
html body .taxiway-network .tw-nodes circle {
    fill: rgba(250, 205, 81, 0.55);
}

/* Remove the old standalone image section styles (no longer used) */
html body .partner-visual-section,
html body .immersive-image-wrapper,
html body .partner-showcase-image,
html body .partner-image-overlay {
    display: none;
}

/* Centered Executive Form Card */
html body .executive-form-card {
    background: var(--color-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-lg);
    padding: 92px 64px 94px;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    max-width: 940px;
    margin: 0 auto;
    margin-top: -110px;
    position: relative;
    z-index: 25;
    overflow: hidden;

    /* Premium scroll entrance animation integration with AOS */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1) !important;
}

html body .executive-form-card.aos-animate {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    html body .executive-form-card {
        padding: 40px 24px;
    }
}

html body .form-card-header {
    margin-bottom: 48px;
    text-align: center;
}

html body .form-card-title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-text);
    text-transform: uppercase;
    margin-bottom: 10px;
}

html body .form-card-subtitle {
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--color-text-soft);
    letter-spacing: 0.05em;
    line-height: 1.62;
    max-width: 580px;
    margin: 8px auto 0;
}

/* Form Fields */
html body .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 40px;
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    html body .form-row {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 28px;
    }
}

@media (min-width: 769px) {
    html body .form-row.centered-row {
        grid-template-columns: repeat(4, 1fr);
    }
    html body .form-row.centered-row .field-group {
        grid-column: 2 / span 2;
    }
}

html body .form-group-full {
    grid-column: 1 / -1;
}

html body .field-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

html body .field-group label {
    font-family: var(--font-label);
    font-size: 15px; /* Increased by 0.5px for stronger presence */
    font-weight: 800;
    color: #A8DFF2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
}

/* ── Field Validation States ── */
html body .field-error {
    display: none;
    color: #f44336;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.4;
    margin-top: 6px;
    animation: field-error-in 0.25s ease;
}

html body .field-group.invalid .field-error {
    display: block;
}

html body .field-group.invalid .form-input-field,
html body .field-group.invalid .form-select-field,
html body .field-group.invalid .form-textarea-field,
html body .field-group.invalid .nice-select {
    border-color: rgba(244, 67, 54, 0.65) !important;
    background-color: rgba(244, 67, 54, 0.05) !important;
}

html body .field-group.invalid .form-input-field:focus,
html body .field-group.invalid .form-select-field:focus,
html body .field-group.invalid .form-textarea-field:focus {
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.12) !important;
}

@keyframes field-error-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

html body .form-input-field,
html body .form-select-field,
html body .form-textarea-field {
    width: 100%;
    background: var(--color-card-deep);
    border: 1px solid var(--border-light);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 17px;
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--transition-normal), 
                background-color var(--transition-normal), 
                box-shadow var(--transition-normal);
    -webkit-appearance: none;
    appearance: none;
}

html body .form-input-field:hover,
html body .form-select-field:hover,
html body .form-textarea-field:hover {
    border-color: var(--border-medium);
}

html body .form-input-field,
html body .form-select-field {
    height: 66px; /* Raised from 62px to 66px for luxury breathing room */
    padding: 0 28px;
}

html body .form-textarea-field {
    padding: 20px 24px;
}

html body .form-input-field::placeholder,
html body .form-textarea-field::placeholder {
    color: var(--color-text-muted);
    font-size: 17px;
}

html body .form-input-field:focus,
html body .form-select-field:focus,
html body .form-textarea-field:focus {
    border-color: var(--border-strong) !important;
    background-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 0 20px rgba(250, 205, 81, 0.15) !important;
}

html body .form-select-field {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FACD51' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    padding-right: 56px;
    line-height: 64px; /* Centering the text inside nice-select container vertically */
}

/* Remove nice-select or third-party default border-chevron to keep only the custom cyan background icon */
html body .form-select-field::after {
    display: none !important;
}

html body .form-select-field option {
    background: var(--overlay-light);
    color: var(--color-text);
}

/* ==========================================================================
   Luxury Custom Dropdown (Nice Select Overrides)
   ========================================================================== */

/* Closed/Default State */
html body .nice-select {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    height: 66px !important;
    line-height: 64px !important;
    padding: 0 28px !important;
    color: var(--color-text) !important;
    font-size: 17px !important;
    font-family: var(--font-body) !important;
    position: relative;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal), background-image var(--transition-normal) !important;
    box-shadow: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FACD51' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 24px center !important;
}

/* Hover State */
html body .nice-select:hover {
    border-color: var(--border-medium) !important;
    box-shadow: 0 0 15px rgba(250, 205, 81, 0.08) !important;
}

/* Open State Container adjustments */
html body .nice-select.open {
    border-color: var(--border-strong) !important;
    box-shadow: 0 0 18px rgba(250, 205, 81, 0.12) !important;
    transform: translateY(-1px);
    /* Raise the whole open select (and its dropdown list) above sibling fields
       so the menu never hides behind the PHONE NUMBER field or other content. */
    z-index: 100;
    /* Inverts the chevron icon to upward facing on open */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 7l5-5 5 5' stroke='%23FACD51' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* Open Dropdown List Panel — floating overlay anchored to the select field.
   Anchored directly under the trigger, layered above all surrounding fields,
   never clipped by the form/container, scrollbar belongs to the menu itself. */
html body .nice-select .list {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    z-index: 1000 !important;
    padding: 18px 6px 6px 6px !important;
    background: var(--color-card-deep) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-6px) scale(0.98) !important;
    transform-origin: top center !important;
    transition: opacity 180ms ease-out, transform 180ms ease-out !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--border-light) rgba(0, 0, 0, 0.35) !important;
}

html body .nice-select.open .list {
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important; /* Re-enables pointer focus for clicking and wheel scroll */
    opacity: 1 !important;
}

/* ── Ancestor overflow safety: never let the form, grid, or card clip the open menu ── */
html body .executive-form-card,
html body .executive-form-card .form-row,
html body .executive-form-card .form-row .field-group {
    overflow: visible !important;
}

/* Dropdown Menu Option Elements */
html body .nice-select .option {
    height: 62px !important;
    line-height: 62px !important;
    padding: 0 24px !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 450 !important;
    color: var(--color-text) !important;
    border-radius: 12px !important;
    margin-bottom: 6px !important;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

html body .nice-select .option:last-child {
    margin-bottom: 0 !important;
}

/* Option Hover & Keypress Focus State - Subtle Cyan Tint & Slide */
html body .nice-select .option:hover,
html body .nice-select .option.focus {
    background-color: rgba(250, 205, 81, 0.08) !important;
    color: #A8DFF2 !important;
    border-radius: 12px !important;
    transform: translateX(4px) !important;
    box-shadow: none !important;
}

/* Selected Option Item */
html body .nice-select .option.selected {
    background-color: rgba(250, 205, 81, 0.12) !important;
    color: var(--color-accent) !important;
    font-weight: 700 !important;
    position: relative !important;
    padding-left: 38px !important;
}

/* Left Vertical Luxury Gold Accent Bar for Selected Item */
html body .nice-select .option.selected::before {
    content: '' !important;
    position: absolute !important;
    left: 16px !important;
    top: 25% !important;
    bottom: 25% !important;
    width: 3px !important;
    background-color: var(--color-accent) !important;
    border-radius: 99px !important;
    display: block !important;
}

/* Disabled/Placeholder Option - Hides duplicate placeholder select items from the open dropdown */
html body .nice-select .option.disabled {
    display: none !important;
}

/* Custom Scrollbar Styling inside Dropdown Panel */
html body .nice-select .list::-webkit-scrollbar {
    width: 5px !important; /* Custom thin scrollbar */
}

html body .nice-select .list::-webkit-scrollbar-track {
    background: var(--overlay-light) !important;
    border-radius: 999px !important;
}

html body .nice-select .list::-webkit-scrollbar-thumb {
    background: var(--border-light) !important;
    border-radius: 999px !important;
}

html body .nice-select .list::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong) !important;
}

html body .form-textarea-field {
    resize: vertical;
    min-height: 210px; /* Raised from 180px for visual breathing room and confidence */
    line-height: 1.6;
}

/* Submit Button */
html body .executive-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 66px;
  background: var(--color-accent);
  border: none;
  color: #111C26;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);
    outline: none;
    margin-top: 40px !important;
}

html body .executive-submit-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 34px rgba(250, 205, 81, 0.3);
    background-color: var(--color-accent-hover);
}

html body .executive-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

html body .executive-submit-btn i {
    font-size: 20px;
    transition: transform var(--transition-normal);
}

html body .executive-submit-btn:hover i {
    transform: translateX(6px);
}

html body .btn-note {
    font-family: var(--font-body);
    font-size: 13px; /* Reduced from 13.5px */
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
    display: block;
    opacity: 0.70; /* 70% opacity to keep it as support content */
}

html body .fb2-section, 
html body .f6-promises-section,
html body .sol-section, 
html body .fleet-section,
html body .advantage-section, 
html body .testimonial-section,
html body .partner-benefits-section, 
html body .partner-visual-section {
    background-color: transparent;
    background-image: none;
}

/* ==========================================================================
   RESPONSIVE TABLET & MOBILE — CLASSIC HERO + FORM OVERRIDES
   ========================================================================== */

/* Tablet Breakpoint */
@media (max-width: 991px) {
    html body .classic-hero {
        min-height: 90vh !important;
        padding-top: 100px !important;
        padding-bottom: 50px !important;
    }

    html body .hero-content-col {
        margin-left: max(15px, calc((100% - 1340px) / 2 + 15px)) !important;
        width: min(45vw, 480px) !important;
        padding: 40px 0 !important;
        margin-top: max(6vh, 50px) !important;
    }

    /* Tablet Form Card spacing adjustments */
    html body .executive-form-card {
        padding: 64px 44px 74px !important;
    }

    html body .form-card-title {
        font-size: 30px !important;
    }

    html body .form-card-subtitle {
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html body .form-card-header {
        margin-bottom: 26px !important;
    }

    html body .field-group {
        gap: 8px !important;
    }

    html body .form-row {
        gap: 28px 32px !important;
        margin-bottom: 28px !important;
    }

    html body .form-input-field:focus,
    html body .form-select-field:focus,
    html body .form-textarea-field:focus {
        border-color: var(--border-strong) !important;
        box-shadow: 0 0 12px rgba(250, 205, 81, 0.10) !important;
    }

    html body .form-textarea-field {
        min-height: 180px !important;
    }

    html body .btn-note {
        margin-top: 12px !important;
        color: var(--color-text-soft) !important;
    }

    html body .executive-submit-btn {
        height: 62px !important;
        line-height: 62px !important;
    }

    html body .executive-submit-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(250, 205, 81, 0.25) !important;
        background-color: color-mix(in srgb, var(--color-accent) 90%, white) !important;
    }

    html body .executive-submit-btn:active {
        transform: translateY(0px) !important;
        box-shadow: 0 4px 12px rgba(250, 205, 81, 0.15) !important;
    }

    html body .scrollToTop {
        right: 20px !important;
    }

    html body .scrollToTop.active {
        bottom: 45px !important;
    }
}

/* Tablet Portrait & Small Landscape (e.g. 600x800) */
@media (max-width: 850px) {
    html body .classic-hero {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 85px !important;
        padding-bottom: 70px !important;
    }

    html body .hero-content-col {
        width: min(58vw, 440px) !important;
        padding: 20px 0 !important;
        margin-top: 40px !important;
    }

    html body .hero-heading {
        font-size: clamp(26px, 5.5vw, 36px) !important;
        margin-bottom: 28px !important;
    }

    html body .hero-body-wrapper {
        margin-bottom: 28px !important;
    }

    html body .hero-paragraph {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    html body .hero-paragraph + .hero-paragraph {
        margin-top: 18px !important;
    }

    html body .hero-cta-link {
        height: 56px !important;
        padding: 14px 36px !important;
        font-size: 15px !important;
    }

    /* Fix Hero Text/Image Alignment */
    html body .hero-aircraft-wrap {
        align-items: flex-start !important;
        padding-top: 105px !important;
    }

    html body .hero-aircraft-img {
        height: 75% !important;
        object-position: 25% 85% !important;
    }

    html body .hero-aircraft-glow {
        top: 40% !important;
        height: 70% !important;
    }
}

/* Mobile Breakpoint */
@media (max-width: 575px) {
    html body .classic-hero {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 76px !important;
        padding-bottom: 30px !important;
    }

    html body .hero-heading {
        font-size: clamp(23px, 6.8vw, 29px) !important;
        margin-bottom: 14px !important;
    }

    html body .hero-body-wrapper {
        margin-bottom: 18px !important;
    }

    html body .hero-paragraph {
        font-size: 15px !important;
        line-height: 1.52 !important;
    }

    html body .hero-paragraph + .hero-paragraph {
        margin-top: 10px !important;
    }

    html body .hero-cta-link {
        height: 52px !important;
        font-size: 14.5px !important;
        gap: 10px !important;
        padding: 12px 28px !important;
    }

    html body .hero-grid {
        justify-content: center !important;
    }

    html body .hero-cta-wrapper {
        padding-left: 0 !important;
    }

    html body .hero-content-col {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 480px !important;
        padding: 16px 16px !important;
        margin-top: 10px !important;
    }

    html body .hero-continuation-cue {
        display: none !important;
    }

    /* Mobile Form Card spacing adjustments */
    html body .executive-form-card {
        padding: 48px 20px 48px !important;
    }

    html body .form-card-title {
        font-size: 26px !important;
    }

    html body .form-card-header {
        margin-bottom: 20px !important;
    }

    html body .field-group {
        gap: 7px !important;
    }

    html body .scrollToTop {
        right: 12px !important;
        transform: scale(0.80) !important;
        transform-origin: bottom right !important;
    }

    html body .scrollToTop.active {
        bottom: 16px !important;
    }

    html body .form-input-field:focus,
    html body .form-select-field:focus,
    html body .form-textarea-field:focus {
        border-color: var(--border-strong) !important;
        box-shadow: 0 0 8px rgba(250, 205, 81, 0.08) !important;
    }

    html body .form-input-field::placeholder,
    html body .form-textarea-field::placeholder {
        color: var(--color-text-muted) !important;
    }

    html body .form-textarea-field {
        min-height: 170px !important;
    }

    html body .btn-note {
        margin-top: 22px !important;
        color: var(--color-text-soft) !important;
        font-weight: 500 !important;
    }

    html body .executive-submit-btn {
        height: 60px !important;
        line-height: 60px !important;
        font-size: 13.5px !important;
        letter-spacing: 0.08em !important;
        padding: 0 16px !important;
    }

    html body .executive-submit-btn span {
        white-space: nowrap !important;
    }

    html body .executive-submit-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(250, 205, 81, 0.25) !important;
        background-color: color-mix(in srgb, var(--color-accent) 90%, white) !important;
    }

    html body .executive-submit-btn:active {
        transform: translateY(0px) !important;
        box-shadow: 0 4px 12px rgba(250, 205, 81, 0.15) !important;
    }
}

/* Extra small viewport optimizations (iPhone SE and similar <= 360px) */
@media (max-width: 360px) {
  html body .executive-form-card {
        padding-top: 56px !important; /* Extra spacing at top on small viewports so content is not pressed */
    }
}

/* Very small viewport height / width optimizations (e.g. 320x568, 329x568) */
@media (max-width: 340px), (max-width: 400px) and (max-height: 600px) {
    html body .classic-hero {
        padding-top: 76px !important; /* Reduce hero top padding */
        padding-bottom: 76px !important; /* Safe clearance for BOOK NOW floating CTA */
        min-height: 100vh !important;
    }
    html body .hero-content-col {
        padding: 12px 16px 16px 16px !important; /* Reduce unnecessary top/bottom padding */
        margin-top: 25px !important;
    }
    html body .hero-heading {
        font-size: 24px !important;
        margin-bottom: 14px !important; /* Reduce gap between heading and first paragraph */
    }
    html body .hero-body-wrapper {
        margin-bottom: 16px !important; /* Reduce bottom padding below paragraphs */
    }
    html body .hero-paragraph {
        font-size: 14.5px !important; /* Slightly reduce typography */
        line-height: 1.45 !important; /* Slightly reduce line-height */
    }
    html body .hero-paragraph + .hero-paragraph {
        margin-top: 10px !important; /* Reduce gap between the two paragraphs */
    }
    html body .hero-cta-link {
        height: 46px !important;
        font-size: 13.5px !important;
        padding: 10px 24px !important;
    }
}

/* ── Hero Premium Overrides (From Index) ── */
.classic-hero.hero-premium .hero-dark-overlay {
  background: transparent !important;
  opacity: 1;
}
/* Scoped gradient overlay — covers ONLY the text column (left ~44% of viewport).
   Never extends over the aircraft, so the jet is never painted over with blue.
   The image mask handles the actual blend. */
.classic-hero.hero-premium .hero-left-gradient {
  background: linear-gradient(
    90deg,
    #01569C 0%,
    #01569C 36%,
    rgba(1, 86, 156, 0.70) 44%,
    rgba(1, 86, 156, 0.20) 50%,
    transparent 56%
  ) !important;
  /* Fade out at the bottom to blend seamlessly into the next section */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* Mobile: Aircraft image is hidden. The blue gradient should cover full width 
   and fade naturally toward the bottom into the dark fixed background. */
@media (max-width: 991px) {
  .classic-hero.hero-premium .hero-left-gradient {
    background: linear-gradient(
      180deg,
      #01569C 0%,
      #01569C 70%,
      transparent 100%
    ) !important;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .classic-hero.hero-premium .hero-aircraft-wrap {
    display: none !important;
  }
}
.classic-hero.hero-premium .hero-aircraft-img {
  object-position: 20% center;
}
@media (min-width: 992px) {
  .classic-hero.hero-premium .hero-aircraft-wrap {
    width: 58%;
    /* Also mask aircraft wrap at the bottom to prevent a hard edge on desktop */
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  }
  .classic-hero.hero-premium .hero-content-col {
    /* Fluid responsive width that expands on shorter viewports to prevent text wrapping */
    width: clamp(480px, calc(34vw + max(0px, 750px - 100vh) * 1.5), 800px);
    margin-left: max(40px, calc((100vw - 1340px) / 2 + 40px));
  }
  /* Mask fades the image itself (not a painted overlay) so the aircraft
     remains visible. Very wide fade zone (0 → 62%) — no rectangular edge. */
  .classic-hero.hero-premium .hero-aircraft-img {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,0.05) 10%,
      rgba(0,0,0,0.20) 22%,
      rgba(0,0,0,0.45) 34%,
      rgba(0,0,0,0.72) 46%,
      rgba(0,0,0,0.90) 54%,
      black 62%,
      black 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,0.05) 10%,
      rgba(0,0,0,0.20) 22%,
      rgba(0,0,0,0.45) 34%,
      rgba(0,0,0,0.72) 46%,
      rgba(0,0,0,0.90) 54%,
      black 62%,
      black 100%
    );
  }
}
.classic-hero.hero-premium .hero-vignette {
  background: transparent !important;
}
.hero-premium .hero-flight-path {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.hero-premium .hero-flight-path-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-premium .fp-halo {
  opacity: 0.06;
}
.hero-premium .fp-glow {
  opacity: 0.15;
}
.hero-premium .fp-core {
  opacity: 0.9;
}
@media (max-width: 575px) {
  .hero-premium .hero-flight-path {
    display: none;
  }
}

/* Prevent full-page animation from overlapping the hero section */
.taxiway-network {
  clip-path: inset(100vh 0 0 0);
}

/* ── Targeted Fix for Short Desktop Viewports (e.g., 1024x768, 1366x768, 1440x650) ── */
@media (min-width: 992px) and (max-height: 800px) {
  .classic-hero {
    height: auto !important; /* Allow container to grow if content is tall */
    min-height: 100vh;
    padding-top: 130px !important; /* Fixed start position below navbar */
    padding-bottom: 40px !important; /* Ensure space after CTA */
    align-items: flex-start !important; /* Force top alignment to prevent center-bleed into navbar */
  }

  .classic-hero .hero-content-col {
    padding: 0;
  }

  .classic-hero .hero-heading {
    margin-bottom: 16px;
  }
  
  .classic-hero .heading-light {
    margin-top: 6px;
  }

  .classic-hero .hero-body-wrapper {
    margin-bottom: 20px;
  }
  
  .classic-hero .hero-paragraph {
    line-height: 1.5;
  }

  .classic-hero .hero-paragraph + .hero-paragraph {
    margin-top: 10px;
  }
}

/* ==========================================================================
   HERO ACTION & CONTACT BAR RESPONSIVE LAYOUT SYSTEM
   Desktop side-by-side, compact desktop/tablet horizontal stack above form,
   mobile clean vertical card with full tap targets.
   ========================================================================== */

/* Desktop & Tablet (>= 576px): Clean column alignment below CTA button */
@media (min-width: 576px) {
  html body .hero-cta-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* Mobile Devices (<= 575px / 425px / 375px / 320px): Clean vertical stack */
@media (max-width: 575px) {
  html body .hero-cta-wrapper {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  html body .hero-cta-link {
    width: 100%;
    justify-content: center;
  }
  html body .hero-contact-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 6px 2px 0;
  }
  html body .contact-inline-dot {
    display: none;
  }
  html body .contact-inline-text {
    font-size: 13.8px;
  }
}