/* ==========================================================================
   ExcelJet — Inner Page Styles
   Loaded AFTER style.css. Reuses the same tokens (:root in style.css):
   --color-navy #0B192C | --color-navy-stats #051329 | --color-red #B30016
   --font-heading Oswald | --font-body Inter
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header additions — working services dropdown
   -------------------------------------------------------------------------- */
.main-nav ul > li {
    position: relative;
}

.main-nav .dropdown > a {
    display: inline-flex;
    align-items: center;
}

/* NOTE: style.css sets `.main-nav ul { display: flex; gap: 30px; }`, which also
   matches this nested <ul>. Every rule below is scoped under `.main-nav` so it
   outranks that and the submenu stacks vertically like a normal dropdown. */
.main-nav .dropdown-menu {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: -18px;
    min-width: 220px;
    gap: 0;
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(11, 25, 44, 0.16);
    border: 1px solid #e8eaee;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 200;
}

.main-nav .dropdown-menu::before {
    /* invisible bridge so the menu doesn't close as the cursor crosses the gap */
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.main-nav .dropdown:hover > .dropdown-menu,
.main-nav .dropdown.open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav .dropdown-menu li {
    display: block;
    margin: 0;
    width: 100%;
}

.main-nav .dropdown-menu a {
    display: block;
    padding: 9px 20px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4;
    white-space: nowrap;
    text-transform: none;
    color: var(--color-navy);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.main-nav .dropdown-menu a:hover {
    background: #f6f7f9;
    color: var(--color-red);
}

.main-nav .dropdown-menu a::after { display: none; }

.main-nav .dropdown > a i {
    transition: transform 0.3s ease;
}

.main-nav .dropdown:hover > a i,
.main-nav .dropdown.open > a i {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   1b. Home hero spacing corrections
   `.stats-wrapper` is pulled up with `margin-top: -120px` to overlap the hero,
   but `.hero-content` only reserves `padding-bottom: 20px` — so on desktop the
   stats bar covers the CTA buttons and the second phone button. These rules
   reserve enough clearance at each breakpoint. Loaded after style.css, so the
   later rule wins at equal specificity.
   -------------------------------------------------------------------------- */
@media (min-width: 993px) {
    .hero-content {
        /* 120px of overlap + 45px of breathing room */
        padding-bottom: 165px;
    }

    /* Space between the icon row, the CTAs and the phone buttons */
    .hero-buttons {
        margin-top: 10px;
    }

    .floating-phones {
        margin-top: 50px;
    }
}

@media (max-width: 992px) {
    /* Tablet: stats bar is static here, so it only needs modest clearance */
    .hero-content {
        padding-bottom: 40px;
    }

    .stats-wrapper {
        padding-top: 30px;
    }
}

@media (max-width: 768px) {
    /* style.css lays the hero out as:
         "title title" / "desc desc" / "icons rfeat" / "buttons rfeat" / "phones rfeat"
       Because `desc` spans BOTH columns, the space to its right sits empty while
       the features list starts a row lower and overruns the bottom of the hero.
       Moving `desc` into the left column lets `rfeat` start one row higher and
       fill that gap, which also shortens the overall hero. */
    .hero-content {
        grid-template-columns: minmax(0, 57%) minmax(0, 43%);
        grid-template-areas:
            "title   title"
            "desc    rfeat"
            "icons   rfeat"
            "buttons rfeat"
            "phones  rfeat";
        gap: 0 10px;
        /* Trimmed right down — style.css zeroes `.hero` padding at this width,
           so this was the only thing leaving dead space under the hero. */
        padding-bottom: 10px;
    }

    .hero-desc {
        max-width: 100%;
        font-size: 0.78rem;
        line-height: 1.45;
        margin-bottom: 14px;
    }

    /* Sit at the top of its 4-row span rather than stretching down it.
       `padding-left` pushes the whole block (red rule included) toward the
       right, widening the channel between the two columns. The tighter `gap`
       keeps this column from out-growing the left one — when it does, the
       spanned rows stretch and blow gaps between the icons, CTAs and phones. */
    .right-features-list {
        align-self: start;
        gap: 10px;
        padding-left: 16px;
    }

    .r-feat i {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .r-feat-text p {
        line-height: 1.25;
    }

    /* style.css sets `padding: 0 15px 30px` here — no top padding at all,
       which butts the stats box straight against the hero. */
    .stats-wrapper {
        padding-top: 22px;
    }

    .hero-features-icons {
        margin-bottom: 16px;
    }

    .hero-buttons {
        margin-bottom: 10px;
    }

    /* Dead space under the phone buttons.
       The `max-width: 992px` block sets `.floating-phones { margin-bottom: 40px;
       float: right; align-items: flex-end; }`. The `max-width: 768px` block
       re-declares the same selector but only resets `margin-top`, so on a phone
       — where BOTH queries match — that 40px bottom margin survives and leaves a
       gap between the phone buttons and the stats bar. Reset the leftovers. */
    .floating-phones {
        margin-bottom: 0;
        align-items: center;
        float: none;
    }

    /* Hero CTA + phone buttons: style.css sets these to 0.55rem at this width.
       Both are listed together so the two stacked rows stay consistent. */
    .hero-buttons .btn,
    .floating-phones .phone-btn {
        font-size: 0.4em;
    }

    /* The icon discs are sized off the button's own font-size, so they shrink
       with it — nudged back up so the arrows stay visible at this scale. */
    .hero-buttons .icon-circle-white,
    .hero-buttons .icon-circle-outline {
        width: 14px;
        height: 14px;
        margin-left: 5px;
        font-size: 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   2. Page hero banner (replaces the tall home hero on inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    background-color: var(--color-navy-stats);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 90px 0 80px;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 19, 41, 0.96) 0%, rgba(5, 19, 41, 0.85) 45%, rgba(5, 19, 41, 0.45) 100%);
    z-index: 1;
}

.page-hero .container {
    position: relative;
    z-index: 2;
}

.page-hero-inner {
    max-width: 720px;
    color: var(--color-white);
}

.page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ff5c6f;
    margin-bottom: 16px;
}

.page-eyebrow::before {
    content: '';
    width: 34px;
    height: 2px;
    background: var(--color-red);
}

.page-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
}

.page-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.82);
    max-width: 620px;
    margin-bottom: 28px;
}

.page-hero .divider-airplane {
    max-width: 320px;
    margin-bottom: 22px;
}

.page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.page-hero-actions .btn {
    padding: 12px 24px;
    font-size: 0.9rem;
}

/* Breadcrumb */
.breadcrumb-bar {
    background: #f4f5f7;
    border-bottom: 1px solid #e7e9ee;
    padding: 14px 0;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    list-style: none;
    font-size: 0.8rem;
}

.breadcrumb a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.25s;
}

.breadcrumb a:hover { color: var(--color-red); }

.breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 10px;
    color: #c3c7cf;
}

.breadcrumb li:last-child {
    color: var(--color-navy);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. Generic section scaffolding
   -------------------------------------------------------------------------- */
.section {
    padding: 80px 0;
}

.section-sm { padding: 55px 0; }
.section-gray { background-color: var(--color-gray); }
.section-navy {
    background-color: var(--color-navy);
    color: var(--color-white);
}

.section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 50px;
}

.section-head.left {
    text-align: left;
    margin-left: 0;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    line-height: 1.15;
    color: var(--color-navy);
    margin-bottom: 16px;
}

.section-navy .section-title { color: var(--color-white); }

.section-sub {
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
}

.section-navy .section-sub { color: #b8c1cd; }

.section-kicker {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-red);
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   4. Grids and cards
   -------------------------------------------------------------------------- */
.grid {
    display: grid;
    gap: 26px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--color-white);
    border: 1px solid #e9ebf0;
    border-radius: 14px;
    padding: 32px 28px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    height: 100%;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(11, 25, 44, 0.12);
    border-color: transparent;
}

.card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-navy);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 22px;
    transition: background-color 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover .card-icon {
    background: var(--color-red);
    transform: scale(1.08) rotate(-6deg);
}

.card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-navy);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.card p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #666;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-red);
    text-decoration: none;
}

.card-link i { transition: transform 0.3s ease; }
.card-link:hover i { transform: translateX(5px); }

/* Service card with image */
.service-card {
    background: var(--color-white);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e9ebf0;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(11, 25, 44, 0.15);
}

.service-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.service-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.service-card:hover .service-card-media img { transform: scale(1.07); }

.service-card-tag {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: rgba(11, 25, 44, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--color-white);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 20px;
}

.service-card-body {
    padding: 26px 24px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.service-card-body h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-navy);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.service-card-body p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #666;
    margin-bottom: 18px;
    flex: 1;
}

/* --------------------------------------------------------------------------
   5. Split content (text + image)
   -------------------------------------------------------------------------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
}

.split.reverse .split-media { order: -1; }

.split-media {
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 50px rgba(11, 25, 44, 0.16);
}

.split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.split-body h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1.18;
    color: var(--color-navy);
    margin-bottom: 18px;
}

.split-body p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #666;
    margin-bottom: 18px;
}

.section-navy .split-body h2 { color: var(--color-white); }
.section-navy .split-body p { color: #b8c1cd; }

/* Floating badge over an image */
.media-badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    background: rgba(11, 25, 44, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    border-radius: 12px;
    padding: 16px 22px;
    text-align: center;
}

.media-badge strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.7rem;
    line-height: 1;
}

.media-badge span {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.75;
}

/* --------------------------------------------------------------------------
   6. Lists
   -------------------------------------------------------------------------- */
.check-list {
    list-style: none;
    display: grid;
    gap: 14px;
}

.check-list.cols-2 { grid-template-columns: repeat(2, 1fr); }

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-navy);
}

.check-list li i {
    color: var(--color-red);
    font-size: 1.05rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.section-navy .check-list li { color: #dbe1e9; }

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}

.pill-list li {
    background: var(--color-white);
    border: 1px solid #e2e5ea;
    border-radius: 30px;
    padding: 9px 18px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-navy);
    transition: all 0.3s ease;
}

.pill-list li:hover {
    background: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
}

.section-navy .pill-list li {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
}

.section-navy .pill-list li:hover {
    background: var(--color-red);
    border-color: var(--color-red);
}

/* --------------------------------------------------------------------------
   7. Numbered process steps
   -------------------------------------------------------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 0 22px;
    text-align: center;
}

.step::after {
    content: '';
    position: absolute;
    top: 28px;
    right: -28px;
    width: 56px;
    height: 1px;
    border-top: 1px dashed #cfd4dc;
}

.step:last-child::after { display: none; }

.step-num {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-red);
    color: var(--color-red);
    font-family: var(--font-heading);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.step:hover .step-num {
    background: var(--color-red);
    color: var(--color-white);
    transform: translateY(-4px);
}

.step h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-navy);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.step p {
    font-size: 0.84rem;
    line-height: 1.6;
    color: #666;
}

/* --------------------------------------------------------------------------
   8. Stats strip (reusable, lighter than the home stats-wrapper)
   -------------------------------------------------------------------------- */
.stats-strip {
    background: var(--color-navy-stats);
    padding: 46px 0;
}

.stats-strip-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.strip-stat {
    flex: 1;
    text-align: center;
    color: var(--color-white);
    padding: 0 12px;
}

.strip-stat i {
    font-size: 1.6rem;
    color: var(--color-red);
    margin-bottom: 12px;
    display: block;
}

.strip-stat h3 {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: 8px;
}

.strip-stat p {
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.7;
}

.strip-divider {
    width: 1px;
    height: 62px;
    background: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   9. Fleet / spec table
   -------------------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid #e6e9ee;
    background: var(--color-white);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.data-table thead {
    background: var(--color-navy);
    color: var(--color-white);
}

.data-table th {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 500;
    text-align: left;
    padding: 16px 22px;
}

.data-table td {
    padding: 15px 22px;
    font-size: 0.88rem;
    color: #4b5563;
    border-bottom: 1px solid #eef0f4;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background-color 0.25s ease; }
.data-table tbody tr:hover { background: #f8f9fb; }

.data-table td:first-child {
    font-weight: 600;
    color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   10. FAQ accordion
   -------------------------------------------------------------------------- */
.accordion {
    max-width: 860px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.acc-item {
    background: var(--color-white);
    border: 1px solid #e6e9ee;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.acc-item.open {
    border-color: rgba(179, 0, 22, 0.35);
    box-shadow: 0 12px 30px rgba(11, 25, 44, 0.08);
}

.acc-head {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-navy);
    padding: 20px 56px 20px 24px;
    cursor: pointer;
    position: relative;
    line-height: 1.5;
}

.acc-head::after {
    content: '\f067'; /* plus */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--color-red);
    transition: transform 0.3s ease;
}

.acc-item.open .acc-head::after {
    content: '\f068'; /* minus */
}

.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.acc-body p {
    padding: 0 24px 22px;
    font-size: 0.9rem;
    line-height: 1.75;
    color: #666;
}

/* --------------------------------------------------------------------------
   11. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
    position: relative;
    background: var(--color-navy);
    overflow: hidden;
    padding: 62px 0;
}

.cta-band::before {
    content: '\f072'; /* plane */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%) rotate(-20deg);
    font-size: 16rem;
    color: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

.cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.cta-text h2 {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: 10px;
}

.cta-text p {
    color: #b8c1cd;
    font-size: 0.95rem;
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cta-actions .btn { padding: 13px 26px; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   12. Founders / team
   -------------------------------------------------------------------------- */
.team-card {
    background: var(--color-white);
    border: 1px solid #e9ebf0;
    border-radius: 16px;
    padding: 34px 30px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(11, 25, 44, 0.12);
}

.team-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-red);
}

.team-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--color-navy);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.team-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-navy);
    margin-bottom: 4px;
}

.team-role {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-red);
    margin-bottom: 16px;
}

.team-card p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #666;
    margin-bottom: 14px;
}

.team-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin-top: 18px;
}

.team-meta li {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: #f4f5f7;
    color: var(--color-navy);
    border-radius: 20px;
    padding: 6px 14px;
}

/* Mission / vision panels */
.mv-card {
    background: var(--color-navy);
    color: var(--color-white);
    border-radius: 16px;
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
}

.mv-card.alt { background: var(--color-red); }

.mv-card i {
    font-size: 2.1rem;
    margin-bottom: 20px;
    display: block;
    opacity: 0.9;
}

.mv-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.mv-card p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   13. Contact page
   -------------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.contact-card {
    background: var(--color-white);
    border: 1px solid #e9ebf0;
    border-radius: 14px;
    padding: 34px 28px;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(11, 25, 44, 0.12);
}

.contact-card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: rgba(179, 0, 22, 0.08);
    color: var(--color-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.4s ease;
}

.contact-card:hover .contact-card-icon {
    background: var(--color-red);
    color: var(--color-white);
}

.contact-card h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: var(--color-navy);
    margin-bottom: 14px;
}

.contact-card a,
.contact-card p {
    display: block;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #666;
    text-decoration: none;
    transition: color 0.25s;
    word-break: break-word;
}

.contact-card a:hover { color: var(--color-red); }

.contact-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 45px;
    align-items: start;
}

.form-panel {
    background: var(--color-white);
    border: 1px solid #e6e9ee;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 18px 44px rgba(11, 25, 44, 0.07);
}

.form-panel h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--color-navy);
    margin-bottom: 8px;
}

.form-panel > p.form-intro {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 28px;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.field-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.field-full { grid-column: 1 / -1; }

.field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-navy);
    margin-bottom: 8px;
}

.field label .req { color: var(--color-red); }

.field-input {
    position: relative;
}

.field-input > i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa1ad;
    font-size: 0.9rem;
    pointer-events: none;
}

.field-input > i.arrow-down {
    left: auto;
    right: 15px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid #dcdfe5;
    border-radius: 8px;
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-dark-gray);
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    appearance: none;
}

.field input,
.field select {
    height: 48px;
    padding: 0 15px 0 42px;
}

.field select { cursor: pointer; }

.field textarea {
    padding: 14px 15px;
    min-height: 130px;
    resize: vertical;
    line-height: 1.6;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgba(11, 25, 44, 0.07);
}

.field input.invalid,
.field select.invalid,
.field textarea.invalid {
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px rgba(179, 0, 22, 0.08);
}

.field-note {
    font-size: 0.75rem;
    color: #8b919c;
    margin-top: 7px;
    line-height: 1.5;
}

.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 6px 0 22px;
}

.consent-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--color-red);
    flex-shrink: 0;
    cursor: pointer;
}

.consent-row label {
    font-size: 0.8rem;
    line-height: 1.6;
    color: #666;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin: 0;
}

.consent-row label a {
    color: var(--color-red);
    text-decoration: underline;
}

.form-panel .btn {
    padding: 14px 30px;
    font-size: 0.9rem;
}

/* Side info panel */
.info-panel {
    background: var(--color-navy);
    color: var(--color-white);
    border-radius: 16px;
    padding: 36px 32px;
}

.info-panel h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 1px;
    margin-bottom: 22px;
}

.info-list {
    list-style: none;
    display: grid;
    gap: 20px;
}

.info-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.info-list i {
    color: var(--color-red);
    font-size: 1rem;
    margin-top: 4px;
    flex-shrink: 0;
}

.info-list span { display: block; }

.info-list strong {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 5px;
    font-weight: 600;
}

.info-list a,
.info-list p {
    color: var(--color-white);
    font-size: 0.9rem;
    line-height: 1.55;
    text-decoration: none;
    display: block;
    word-break: break-word;
}

.info-list a:hover { color: #ff8492; }

.info-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 26px 0;
}

.map-embed {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e6e9ee;
    line-height: 0;
    box-shadow: 0 18px 40px rgba(11, 25, 44, 0.08);
}

.map-embed iframe {
    width: 100%;
    height: 420px;
    border: 0;
    display: block;
}

/* --------------------------------------------------------------------------
   14. Booking page
   -------------------------------------------------------------------------- */
.booking-layout {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 40px;
    align-items: start;
}

.form-block {
    border-bottom: 1px solid #eef0f4;
    padding-bottom: 26px;
    margin-bottom: 26px;
}

.form-block:last-of-type {
    border-bottom: none;
    margin-bottom: 8px;
}

.form-block-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}

.form-block-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-navy);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-block-head h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.8px;
    color: var(--color-navy);
}

/* Trip type segmented control */
.trip-toggle {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.trip-toggle input { display: none; }

.trip-toggle label {
    border: 1px solid #dcdfe5;
    border-radius: 8px;
    padding: 11px 22px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-navy);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.trip-toggle label i { color: #9aa1ad; transition: color 0.3s ease; }

.trip-toggle input:checked + label {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

.trip-toggle input:checked + label i { color: var(--color-white); }

.leg-row {
    position: relative;
    padding: 20px;
    border: 1px dashed #dcdfe5;
    border-radius: 12px;
    margin-bottom: 16px;
    background: #fcfcfd;
}

.leg-row .leg-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-red);
    margin-bottom: 14px;
    display: block;
}

.leg-remove {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: #b0b6c0;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.25s;
}

.leg-remove:hover { color: var(--color-red); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: 1px dashed #c8ccd4;
    border-radius: 8px;
    padding: 11px 20px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-navy);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-ghost:hover {
    border-color: var(--color-red);
    color: var(--color-red);
}

/* Booking sidebar */
.booking-aside {
    position: sticky;
    top: 20px;
    display: grid;
    gap: 22px;
}

.aside-card {
    background: var(--color-white);
    border: 1px solid #e6e9ee;
    border-radius: 14px;
    padding: 28px 26px;
}

.aside-card h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: var(--color-navy);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef0f4;
}

.summary-list {
    list-style: none;
    display: grid;
    gap: 13px;
}

.summary-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.summary-list span:first-child { color: #7b828e; }

.summary-list span:last-child {
    color: var(--color-navy);
    font-weight: 600;
    text-align: right;
}

.aside-card.navy {
    background: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
}

.aside-card.navy h3 {
    color: var(--color-white);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.aside-card.navy .assure-list {
    list-style: none;
    display: grid;
    gap: 15px;
}

.assure-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #c8d0da;
}

.assure-list i {
    color: var(--color-red);
    margin-top: 3px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   15. Legal / policy pages
   -------------------------------------------------------------------------- */
.legal-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 50px;
    align-items: start;
}

.legal-toc {
    position: sticky;
    top: 20px;
    background: var(--color-white);
    border: 1px solid #e6e9ee;
    border-radius: 14px;
    padding: 26px 24px;
}

.legal-toc h4 {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-navy);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef0f4;
}

.legal-toc ul {
    list-style: none;
    display: grid;
    gap: 4px;
}

.legal-toc a {
    display: block;
    font-size: 0.83rem;
    line-height: 1.5;
    color: #666;
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 6px;
    border-left: 2px solid transparent;
    transition: all 0.25s ease;
}

.legal-toc a:hover,
.legal-toc a.active {
    background: #f6f7f9;
    color: var(--color-red);
    border-left-color: var(--color-red);
}

.legal-body {
    background: var(--color-white);
    border: 1px solid #e6e9ee;
    border-radius: 16px;
    padding: 48px 52px;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding-bottom: 26px;
    margin-bottom: 32px;
    border-bottom: 1px solid #eef0f4;
    font-size: 0.82rem;
    color: #7b828e;
}

.legal-meta strong {
    color: var(--color-navy);
    font-weight: 600;
}

.legal-body h2 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--color-navy);
    letter-spacing: 0.5px;
    margin: 40px 0 16px;
    scroll-margin-top: 24px;
}

.legal-body h2:first-of-type { margin-top: 0; }

.legal-body h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 26px 0 12px;
}

.legal-body p {
    font-size: 0.93rem;
    line-height: 1.85;
    color: #55595f;
    margin-bottom: 16px;
}

.legal-body ul,
.legal-body ol {
    margin: 0 0 20px 20px;
}

.legal-body li {
    font-size: 0.93rem;
    line-height: 1.85;
    color: #55595f;
    margin-bottom: 9px;
}

.legal-body a {
    color: var(--color-red);
    text-decoration: underline;
}

.legal-body strong { color: var(--color-navy); }

.legal-callout {
    background: #f6f7f9;
    border-left: 3px solid var(--color-red);
    border-radius: 0 10px 10px 0;
    padding: 20px 24px;
    margin: 26px 0;
}

.legal-callout p {
    margin: 0;
    font-size: 0.88rem;
    color: #4b5563;
}

/* --------------------------------------------------------------------------
   16. Misc utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-30 { margin-top: 30px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }

.divider-airplane.dark .line { background-color: var(--color-navy); opacity: 0.25; }
.divider-airplane.dark i { color: var(--color-navy); }

/* Sticky call bar for mobile */
.mobile-call-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: var(--color-navy);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 9px 12px;
    gap: 9px;
}

.mobile-call-bar a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 8px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.mobile-call-bar .call {
    background: var(--color-red);
    color: var(--color-white);
}

.mobile-call-bar .quote {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .legal-layout { grid-template-columns: 220px 1fr; gap: 34px; }
    .legal-body { padding: 38px 34px; }
    .booking-layout { grid-template-columns: 1fr; }
    .booking-aside { position: static; }
}

@media (max-width: 992px) {
    .page-hero { padding: 60px 0 55px; }
    .page-title { font-size: 2.2rem; }
    .page-lead { font-size: 0.95rem; }

    .section { padding: 55px 0; }
    .section-title { font-size: 1.8rem; }

    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }

    .split { grid-template-columns: 1fr; gap: 32px; }
    .split.reverse .split-media { order: 0; }
    .split-body h2 { font-size: 1.6rem; }

    .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .step::after { display: none; }

    .stats-strip-inner { flex-wrap: wrap; row-gap: 30px; }
    .strip-stat { flex: 0 0 45%; }
    .strip-divider { display: none; }

    .contact-grid { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; gap: 30px; }

    .cta-inner { flex-direction: column; text-align: center; }
    .cta-actions { justify-content: center; }

    .legal-layout { grid-template-columns: 1fr; }
    .legal-toc { position: static; }
}

@media (max-width: 768px) {
    /* Mobile nav: dropdown becomes a plain expandable list */
    .main-nav.active .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid #eee;
        border-radius: 0;
        padding: 6px 0 6px 14px;
        margin-top: 8px;
        display: none;
        min-width: 0;
    }

    .main-nav.active .dropdown.open .dropdown-menu { display: block; }
    .main-nav.active .dropdown-menu a { padding: 8px 0; font-size: 0.78rem; }
    .main-nav.active .dropdown-menu a:hover { background: none; }

    .page-hero { padding: 45px 0 42px; }
    .page-title { font-size: 1.75rem; }
    .page-lead { font-size: 0.88rem; }
    .page-hero-actions .btn { padding: 10px 16px; font-size: 0.78rem; flex: 1; }

    .section { padding: 42px 0; }
    .section-sm { padding: 34px 0; }
    .section-head { margin-bottom: 32px; }
    .section-title { font-size: 1.45rem; }
    .section-sub { font-size: 0.9rem; }

    .grid { gap: 18px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

    .card { padding: 26px 22px; }
    .check-list.cols-2 { grid-template-columns: 1fr; }

    .steps { grid-template-columns: 1fr; row-gap: 30px; }
    .step { text-align: left; display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; }
    .step-num { margin: 0; grid-row: 1 / 3; }

    .strip-stat { flex: 0 0 47%; }
    .strip-stat h3 { font-size: 1.4rem; }

    .form-panel { padding: 26px 20px; }
    .field-grid, .field-grid.cols-3 { grid-template-columns: 1fr; gap: 15px; }
    .form-panel .btn { width: 100%; }

    .legal-body { padding: 28px 22px; }
    .legal-body h2 { font-size: 1.15rem; }
    .legal-meta { gap: 12px; flex-direction: column; }

    .cta-band { padding: 42px 0; }
    .cta-text h2 { font-size: 1.4rem; }
    .cta-actions { width: 100%; }
    .cta-actions .btn { flex: 1; padding: 11px 14px; font-size: 0.8rem; }

    .map-embed iframe { height: 300px; }

    .mv-card { padding: 30px 24px; }

    /* Sticky call bar on phones + room so it never covers the footer.
       Scoped with :has() so pages without the bar (e.g. index.html) don't
       get a phantom gap at the bottom. */
    .mobile-call-bar { display: flex; }
    body:has(.mobile-call-bar) { padding-bottom: 62px; }
}