/* ==========================================================
   FLE JETS
   PRIVATE AVIATION WEBSITE
   COMPLETE FRONT-END STYLESHEET
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

:root {

    --navy: #071522;
    --navy-dark: #04101a;
    --navy-light: #10283b;

    --gold: #c9a45c;
    --gold-light: #e2c37d;

    --cream: #f7f3eb;
    --cream-dark: #eee8dc;

    --white: #ffffff;

    --text: #17202a;
    --muted: #718096;

    --line: #e5e7eb;

    --shadow:
        0 18px 55px rgba(7, 21, 34, .10);

    --container: 1240px;
}


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        "DM Sans",
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    background: #c0bfbc;

    line-height: 1.6;

    overflow-x: hidden;
    
}


img {

    max-width: 100%;

    display: block;
}


a {

    color: inherit;

    text-decoration: none;
}


button,
input,
select,
textarea {

    font: inherit;
}


h1,
h2,
h3,
h4 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    line-height: 1.15;

    margin-top: 0;
}


p {

    margin-top: 0;
}


/* ==========================================================
   CONTAINER
========================================================== */

.container {

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin-left: auto;

    margin-right: auto;
}


/* ==========================================================
   EYEBROW
========================================================== */

.eyebrow {

    color: var(--gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .20em;

    text-transform: uppercase;

    line-height: 1.4;
}


/* ==========================================================
   BUTTONS
========================================================== */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        0 22px;

    border:
        1px solid transparent;

    border-radius: 2px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .04em;

    cursor: pointer;

    transition:
        all .25s ease;
}


.btn:hover {

    transform:
        translateY(-2px);
}


.btn-gold {

    background:
        var(--gold);

    color:
        var(--navy);

    border-color:
        var(--gold);
}


.btn-gold:hover {

    background:
        var(--gold-light);

    border-color:
        var(--gold-light);

    color:
        var(--navy);
}


.btn-dark {

    background:
        var(--navy);

    color:
        #fff;

    border-color:
        var(--navy);
}


.btn-dark:hover {

    background:
        var(--navy-light);

    border-color:
        var(--navy-light);
}


/* ==========================================================
   HEADER
========================================================== */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(7, 21, 34, .98);

    color: #fff;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    backdrop-filter:
        blur(12px);
}


.nav-wrap {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.brand {

    display: flex;

    align-items: center;

    gap: 11px;

    color: #fff;

    font-weight: 700;

    letter-spacing: .04em;
}


.brand-mark {

    width: 36px;

    height: 36px;

    display: grid;

    place-items: center;

    border:
        1px solid var(--gold);

    color:
        var(--gold);

    border-radius: 50%;

    font-family: Georgia, serif;

    font-size: 18px;
}


.main-nav {

    display: flex;

    align-items: center;

    gap: 28px;
}


.main-nav a {

    position: relative;

    color:
        rgba(255,255,255,.86);

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition:
        color .25s ease;
}


.main-nav a:hover {

    color:
        var(--gold-light);
}


.nav-cta {

    background:
        var(--gold);

    color:
        var(--navy) !important;

    padding:
        12px 18px;

    border-radius: 2px;

    font-weight: 800 !important;
}


.nav-cta:hover {

    background:
        var(--gold-light);
}


.menu-toggle {

    display: none;

    border: 0;

    background: transparent;

    color: #fff;

    cursor: pointer;

    font-size: 26px;
}


/* ==========================================================
   HERO
========================================================== */

.hero {

    position: relative;

    min-height: 690px;

    display: flex;

    align-items: center;

    color: #fff;

    background:

        linear-gradient(
            90deg,
            rgba(3, 12, 20, .92) 0%,
            rgba(3, 12, 20, .76) 38%,
            rgba(3, 12, 20, .25) 100%
        ),

        url("https://images.unsplash.com/photo-1540962351504-03099e0a754b?auto=format&fit=crop&w=2000&q=90")
        center center /
        cover
        no-repeat;
}


.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(4, 13, 21, .55),
            transparent 40%
        );

    pointer-events: none;
}


.hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    padding:
        120px 0 170px;
}


.hero-copy {

    max-width: 720px;
}


.hero h1 {

    margin:
        18px 0 22px;

    font-size:
        clamp(48px, 7vw, 86px);

    font-weight: 500;

    letter-spacing:
        -.025em;

    color:
        #fff;
}


.hero p {

    max-width: 610px;

    margin-bottom: 34px;

    color:
        rgba(255,255,255,.84);

    font-size: 18px;

    line-height: 1.8;
}


.hero-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;
}


.hero-btn-outline {

    min-height: 48px;

    border:
        1px solid rgba(255,255,255,.45);

    color:
        #fff;

    background:
        rgba(255,255,255,.03);
}


.hero-btn-outline:hover {

    border-color:
        var(--gold);

    color:
        var(--gold-light);
}


/* ==========================================================
   BOOKING STRIP
========================================================== */

.booking-strip {

    position: relative;

    z-index: 10;

    margin-top: -72px;

    margin-bottom: 20px;
}

.booking-box {


    padding:
        28px 30px;

    background:
        #2e3b4a;

    border:
        1px solid rgba(7,21,34,.08);

    box-shadow:
        0 20px 55px rgba(0,0,0,.14);
}


.booking-title {

    margin-bottom: 22px;
}


.booking-title h2 {

    margin:
        6px 0 0;

    color:
        var(--navy);

    font-size: 30px;

    font-weight: 500;
}


.booking-form {

    display: grid;

    grid-template-columns:
        1.1fr
        1.1fr
        .9fr
        .9fr
        auto;

    gap: 0;

    border:
        1px solid var(--line);
}


.booking-field {

    min-width: 0;

    padding:
        13px 16px;

    border-right:
        1px solid var(--line);

    background:
        #fff;
}


.booking-field label {

    display: block;

    margin-bottom: 5px;

    color:
        var(--muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing:
        .16em;
}


.booking-field input,
.booking-field select {

    width: 100%;

    min-width: 0;

    padding: 0;

    border: 0;

    outline: 0;

    background:
        transparent;

    color:
        var(--navy);

    font-size: 13px;
}


.booking-field input::placeholder {

    color:
        #9aa3ad;
}


.booking-button {

    min-width: 165px;

    padding:
        0 22px;

    border: 0;

    background:
        var(--gold);

    color:
        var(--navy);

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition:
        background .25s ease;
}


.booking-button:hover {

    background:
        var(--gold-light);
}


/* ==========================================================
   GENERAL SECTIONS
========================================================== */

.section {

    padding:
        105px 0;
}


.fleet-section {

    padding-top:
        90px;
}


.featured-section {

    background:
        #5d4f25;
}


.section-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 35px;

    margin-bottom: 42px;
}


.section-head > div:first-child {

    max-width: 760px;
}


.section-head h2 {

    margin:
        8px 0 12px;

    color:
        var(--navy);

    font-size:
        clamp(36px, 4vw, 50px);

    font-weight: 500;

    letter-spacing:
        -.02em;
}


.section-intro {

    max-width: 670px;

    margin: 0;

    color:
        var(--muted);

    font-size: 15px;

    line-height: 1.8;
}


.section-link {

    flex-shrink: 0;

    color:
        var(--navy);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .03em;

    border-bottom:
        1px solid var(--gold);

    padding-bottom: 5px;

    transition:
        color .25s ease;
}


.section-link:hover {

    color:
        var(--gold);
}


/* ==========================================================
   CATEGORY GRID
========================================================== */

.category-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}


.category-card {

    position: relative;

    display: block;

    min-height: 285px;

    padding:
        28px;

    overflow: hidden;

    background:
        var(--cream);

    border:
        1px solid #e8e1d4;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.category-card::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 3px;

    background:
        var(--gold);

    transition:
        width .35s ease;
}


.category-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(201,164,92,.45);

    box-shadow:
        0 18px 45px rgba(7,21,34,.08);
}


.category-card:hover::before {

    width: 100%;
}


.category-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 45px;
}


.category-number {

    color:
        var(--gold);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .12em;
}


.category-arrow {

    color:
        var(--navy);

    font-size: 22px;

    transition:
        transform .25s ease;
}


.category-card:hover .category-arrow {

    transform:
        translateX(5px);
}


.category-icon {

    margin-bottom: 15px;

    color:
        var(--gold);

    font-size: 24px;
}


.category-card h3 {

    margin-bottom: 10px;

    color:
        var(--navy);

    font-size: 28px;

    font-weight: 500;
}


.category-card p {

    margin-bottom: 20px;

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.7;
}


.category-explore {

    display: inline-block;

    color:
        var(--navy);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ==========================================================
   EMPTY STATE
========================================================== */

.empty-state {

    padding:
        55px 30px;

    text-align: center;

    background:
        var(--cream);

    border:
        1px solid var(--line);
}


.empty-state h3 {

    margin-bottom: 8px;

    color:
        var(--navy);

    font-size: 27px;
}


.empty-state p {

    margin-bottom: 0;

    color:
        var(--muted);
}


/* ==========================================================
   AIRCRAFT GRID
========================================================== */

.jet-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;
}


.jet-card {

    overflow: hidden;

    background:
        #fff;

    border:
        1px solid var(--line);

    box-shadow:
        var(--shadow);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.jet-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 25px 65px rgba(7,21,34,.15);
}


.jet-photo {

    position: relative;

    height: 245px;

    overflow: hidden;

    background:
        var(--navy);
}


.jet-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .6s ease;
}


.jet-card:hover .jet-photo img {

    transform:
        scale(1.05);
}


.jet-label {

    position: absolute;

    left: 18px;

    top: 18px;

    padding:
        7px 10px;

    background:
        rgba(7,21,34,.90);

    color:
        var(--gold-light);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.jet-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-light)
        );

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 24px;
}


.jet-content {

    padding:
        25px;
}


.jet-category-name {

    margin-bottom: 7px;

    color:
        var(--gold);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.jet-content h3 {

    margin-bottom: 20px;

    color:
        var(--navy);

    font-size: 30px;

    font-weight: 500;
}


.jet-details {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

    padding:
        15px 0;

    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);
}


.jet-details div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.jet-details span {

    color:
        var(--muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .10em;
}


.jet-details strong {

    color:
        var(--navy);

    font-size: 14px;
}


.jet-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding-top: 21px;
}


.jet-price {

    min-width: 0;
}


.jet-price span {

    display: block;

    color:
        var(--muted);

    font-size: 10px;
}


.jet-price strong {

    color:
        var(--navy);

    font-size: 20px;
}


.jet-price small {

    color:
        var(--muted);

    font-size: 10px;
}


/* ==========================================================
   LUXURY BAND
========================================================== */

.luxury-band {

    position: relative;

    padding:
        105px 0;

    overflow: hidden;

    background:
        var(--navy);

    color:
        #fff;
}


.luxury-band::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -200px;

    top: -220px;

    border:
        1px solid rgba(201,164,92,.18);

    border-radius: 50%;
}


.luxury-band::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    right: -100px;

    top: -120px;

    border:
        1px solid rgba(201,164,92,.12);

    border-radius: 50%;
}


.luxury-band .container {

    position: relative;

    z-index: 2;
}


.luxury-content {

    max-width: 730px;
}


.luxury-band h2 {

    margin:
        12px 0 20px;

    color:
        #fff;

    font-size:
        clamp(40px, 5vw, 62px);

    font-weight: 500;
}


.luxury-band p {

    max-width: 620px;

    margin-bottom: 30px;

    color:
        rgba(255,255,255,.70);

    font-size: 16px;

    line-height: 1.8;
}


.stats {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin-top: 75px;
}


.stat {

    padding-left: 22px;

    border-left:
        1px solid rgba(255,255,255,.18);
}


.stat strong {

    display: block;

    margin-bottom: 4px;

    color:
        var(--gold);

    font-size: 31px;

    font-weight: 500;

    font-family:
        "Playfair Display",
        Georgia,
        serif;
}


.stat span {

    color:
        rgba(255,255,255,.62);

    font-size: 11px;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ==========================================================
   EXPERIENCE / BENEFITS
========================================================== */

.experience-section {

    background:
        #c7c6d4;
}


.centered {

    text-align: center;

    display: block;
}


.centered > div {

    margin-left: auto;

    margin-right: auto;
}


.centered .section-intro {

    margin-left: auto;

    margin-right: auto;
}


.benefits-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin-top: 50px;
}


.benefit-card {

    padding:
        34px 27px;

    border:
        1px solid var(--line);

    background:
        #fff;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.benefit-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(201,164,92,.45);

    box-shadow:
        var(--shadow);
}


.benefit-icon {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 23px;

    border:
        1px solid rgba(201,164,92,.45);

    color:
        var(--gold);

    font-size: 19px;
}


.benefit-card h3 {

    margin-bottom: 11px;

    color:
        var(--navy);

    font-size: 23px;

    font-weight: 500;
}


.benefit-card p {

    margin-bottom: 0;

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.8;
}


/* ==========================================================
   PROCESS
========================================================== */

.process-section {

    background:
        #e5e3de;
}


.process-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 0;

    margin-top: 50px;
}


.process-item {

    position: relative;

    padding:
        20px 55px 20px 30px;

    border-left:
        1px solid #dcd5c8;
}


.process-item:first-child {

    border-left: 0;
}


.process-number {

    margin-bottom: 25px;

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 42px;

    font-weight: 500;
}


.process-item h3 {

    margin-bottom: 12px;

    color:
        var(--navy);

    font-size: 26px;

    font-weight: 500;
}


.process-item p {

    margin: 0;

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.8;
}


/* ==========================================================
   FINAL CTA
========================================================== */

.final-cta {

    padding:
        85px 0;

    background:
        var(--navy-dark);

    color:
        #fff;
}


.final-cta-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


.final-cta h2 {

    margin:
        9px 0 10px;

    color:
        #fff;

    font-size:
        clamp(37px, 5vw, 55px);

    font-weight: 500;
}


.final-cta p {

    margin: 0;

    color:
        rgba(255,255,255,.65);

    font-size: 15px;
}


/* ==========================================================
   PAGE HERO
========================================================== */

.page-hero {

    padding:
        90px 0;

    background:
        var(--navy);

    color:
        #fff;
}


.page-hero h1 {

    margin:
        10px 0 0;

    color:
        #fff;

    font-size:
        clamp(42px, 6vw, 65px);

    font-weight: 500;
}


/* ==========================================================
   FORMS
========================================================== */

.form-wrap {

    max-width: 850px;

    margin:
        0 auto;

    padding:
        35px;

    background:
        #fff;

    border:
        1px solid var(--line);

    box-shadow:
        var(--shadow);
}


.form-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;
}


.field {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.field.full {

    grid-column:
        1 / -1;
}


.field label {

    color:
        var(--text);

    font-size: 13px;

    font-weight: 700;
}


.field input,
.field select,
.field textarea {

    width: 100%;

    padding:
        13px 14px;

    border:
        1px solid #d7dce1;

    border-radius: 2px;

    outline: none;

    background:
        #fff;

    color:
        var(--text);

    font: inherit;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.field input:focus,
.field select:focus,
.field textarea:focus {

    border-color:
        var(--gold);

    box-shadow:
        0 0 0 3px rgba(201,164,92,.10);
}


.field textarea {

    min-height: 130px;

    resize: vertical;
}


.notice {

    padding:
        16px;

    background:
        #f6f7f8;

    border-left:
        4px solid var(--gold);

    margin:
        20px 0;
}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer {

    padding:
        65px 0 0;

    background:
        #050d15;

    color:
        #b8c1c8;
}


.footer-grid {

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 50px;
}


.footer-brand {

    margin-bottom:
        18px;

    color:
        #fff;
}


.site-footer h4 {

    margin-bottom:
        18px;

    color:
        #fff;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: .10em;
}


.site-footer a {

    display: block;

    margin:
        8px 0;

    color:
        #b8c1c8;

    font-size: 13px;

    transition:
        color .25s ease;
}


.site-footer a:hover {

    color:
        var(--gold-light);
}


.copyright {

    margin-top:
        50px;

    padding:
        20px;

    text-align:
        center;

    border-top:
        1px solid rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.48);

    font-size: 12px;
}


/* ==========================================================
   ADMIN
========================================================== */

.admin-body {

    background:
        #f5f6f8;
}


.admin-nav {

    padding:
        16px 0;

    background:
        var(--navy);

    color:
        #fff;
}


.admin-layout {

    display:
        grid;

    grid-template-columns:
        230px 1fr;

    min-height:
        calc(100vh - 58px);
}


.sidebar {

    padding:
        20px;

    background:
        #fff;

    border-right:
        1px solid var(--line);
}


.sidebar a {

    display: block;

    padding:
        11px 10px;

    border-radius:
        4px;

    color:
        var(--text);

    text-decoration:
        none;
}


.sidebar a:hover {

    background:
        #f0f2f4;
}


.admin-main {

    padding:
        30px;
}


.admin-card {

    padding:
        22px;

    margin-bottom:
        22px;

    background:
        #fff;

    border:
        1px solid var(--line);

    border-radius:
        6px;
}


.metrics {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        16px;
}


.metric {

    padding:
        20px;

    background:
        #fff;

    border:
        1px solid var(--line);
}


.metric strong {

    display:
        block;

    font-size:
        28px;
}


.table-wrap {

    overflow-x:
        auto;
}


.admin-table {

    width:
        100%;

    border-collapse:
        collapse;
}


.admin-table th,
.admin-table td {

    padding:
        12px;

    border-bottom:
        1px solid var(--line);

    text-align:
        left;

    white-space:
        nowrap;
}


.admin-table th {

    font-size:
        13px;
}


.alert {

    padding:
        13px;

    margin-bottom:
        18px;

    background:
        #fff4dc;

    border-left:
        4px solid var(--gold);
}


/* ==========================================================
   FLE-* HEADER COMPATIBILITY
   Keeps your existing FLE header working
========================================================== */

.fle-topbar {

    background:
        #05111d;

    color:
        rgba(255,255,255,.78);

    border-bottom:
        1px solid rgba(255,255,255,.07);

    font-size:
        12px;
}


.fle-topbar-inner {

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.fle-topbar-left,
.fle-topbar-right {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;
}


.fle-topbar-right a {

    color:
        rgba(255,255,255,.78);
}


.fle-topbar-right a:hover {

    color:
        var(--gold-light);
}


.fle-top-icon {

    color:
        var(--gold);
}


.fle-top-divider {

    width:
        1px;

    height:
        13px;

    background:
        rgba(255,255,255,.16);
}


.fle-header {

    position:
        relative;

    z-index:
        1000;

    width:
        100%;

    background:
        rgba(7,21,34,.97);

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.fle-nav-container {

    min-height:
        88px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;
}


.fle-logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    color:
        #fff;
}


.fle-logo-symbol {

    position:
        relative;

    width:
        47px;

    height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.fle-logo-letter {

    position:
        relative;

    z-index:
        3;

    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--gold);

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        23px;

    font-weight:
        700;

    transform:
        rotate(45deg);
}


.fle-wing {

    position:
        absolute;

    top:
        22px;

    width:
        25px;

    height:
        1px;

    background:
        var(--gold);
}


.fle-wing-left {

    left:
        -1px;

    transform:
        rotate(-18deg);
}


.fle-wing-right {

    right:
        -1px;

    transform:
        rotate(18deg);
}


.fle-logo-text {

    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;
}


.fle-logo-main {

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size:
        25px;

    font-weight:
        500;

    letter-spacing:
        .15em;

    color:
        #fff;
}


.fle-logo-main strong {

    color:
        var(--gold);

    font-weight:
        800;
}


.fle-logo-sub {

    margin-top:
        6px;

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        .34em;

    color:
        rgba(255,255,255,.62);
}


.fle-main-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        30px;
}


.fle-nav-link {

    position:
        relative;

    padding:
        33px 0;

    color:
        rgba(255,255,255,.82);

    font-size:
        13px;

    font-weight:
        600;
}


.fle-nav-link:hover {

    color:
        #fff;
}


.fle-nav-cta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        45px;

    padding:
        0 19px;

    background:
        var(--gold);

    color:
        var(--navy);

    font-size:
        12px;

    font-weight:
        800;

    border:
        1px solid var(--gold);
}


.fle-nav-cta:hover {

    background:
        transparent;

    color:
        var(--gold-light);
}


.fle-menu-toggle {

    display:
        none;

    width:
        45px;

    height:
        45px;

    padding:
        0;

    border:
        1px solid rgba(255,255,255,.15);

    background:
        transparent;

    cursor:
        pointer;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;
}


.fle-menu-toggle span {

    width:
        21px;

    height:
        1px;

    background:
        #fff;

    transition:
        all .25s ease;
}


.fle-mobile-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        998;

    background:
        rgba(0,0,0,.55);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.fle-mobile-overlay.fle-overlay-open {

    opacity:
        1;

    visibility:
        visible;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

    .booking-form {

        grid-template-columns:
            1fr 1fr;

        border:
            1px solid var(--line);
    }


    .booking-field {

        border-bottom:
            1px solid var(--line);
    }


    .booking-field:nth-child(2) {

        border-right:
            0;
    }


    .booking-field:nth-child(4) {

        border-right:
            0;
    }


    .booking-button {

        min-height:
            55px;

        grid-column:
            1 / -1;
    }


    .category-grid,
    .jet-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .benefits-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .fle-main-nav {

        gap:
            20px;
    }

}


@media (max-width: 900px) {

    .container {

        width:
            calc(100% - 36px);
    }


    .menu-toggle {

        display:
            block;
    }


    .main-nav {

        display:
            none;

        position:
            absolute;

        top:
            78px;

        left:
            0;

        right:
            0;

        padding:
            20px;

        background:
            var(--navy);

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        border-top:
            1px solid rgba(255,255,255,.08);
    }


    .main-nav.open {

        display:
            flex;
    }


    .main-nav a {

        padding:
            14px 0;

        border-bottom:
            1px solid rgba(255,255,255,.08);
    }


    .hero {

        min-height:
            620px;
    }


    .hero-content {

        padding:
            100px 0 130px;
    }


    .hero h1 {

        font-size:
            clamp(44px, 10vw, 65px);
    }


    .section {

        padding:
            75px 0;
    }


    .section-head {

        display:
            block;
    }


    .section-link {

        display:
            inline-block;

        margin-top:
            20px;
    }


    .stats {

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            30px;
    }


    .process-grid {

        grid-template-columns:
            1fr;
    }


    .process-item {

        padding:
            30px 0;

        border-left:
            0;

        border-bottom:
            1px solid #dcd5c8;
    }


    .process-item:last-child {

        border-bottom:
            0;
    }


    .final-cta-content {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .admin-layout {

        grid-template-columns:
            1fr;
    }


    .sidebar {

        border-right:
            0;

        border-bottom:
            1px solid var(--line);
    }


    .metrics {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .fle-topbar {

        display:
            none;
    }


    .fle-nav-container {

        min-height:
            76px;
    }


    .fle-menu-toggle {

        display:
            flex;

        position:
            relative;

        z-index:
            1002;
    }


    .fle-main-nav {

        position:
            fixed;

        z-index:
            1001;

        top:
            0;

        right:
            0;

        width:
            min(340px,86vw);

        height:
            100vh;

        padding:
            105px 30px 35px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        justify-content:
            flex-start;

        gap:
            0;

        background:
            var(--navy);

        border-left:
            1px solid rgba(255,255,255,.10);

        box-shadow:
            -20px 0 60px rgba(0,0,0,.25);

        transform:
            translateX(105%);

        transition:
            transform .3s ease;
    }


    .fle-main-nav.fle-nav-open {

        transform:
            translateX(0);
    }


    .fle-nav-link {

        display:
            block;

        padding:
            18px 0;

        border-bottom:
            1px solid rgba(255,255,255,.08);
    }


    .fle-nav-cta {

        margin-top:
            24px;

        min-height:
            52px;
    }

}


@media (max-width: 650px) {

    .container {

        width:
            calc(100% - 30px);
    }


    .hero {

        min-height:
            590px;

        background-position:
            62% center;
    }


    .hero-content {

        padding:
            90px 0 120px;
    }


    .hero h1 {

        margin-top:
            14px;

        font-size:
            47px;
    }


    .hero p {

        font-size:
            15px;

        line-height:
            1.7;
    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .hero-buttons .btn {

        width:
            100%;
    }


    .booking-strip {

        margin-top:
            -45px;
    }


    .booking-box {

        padding:
            22px 18px;
    }


    .booking-form {

        grid-template-columns:
            1fr;
    }


    .booking-field {

        border-right:
            0;

        border-bottom:
            1px solid var(--line);
    }


    .booking-button {

        grid-column:
            auto;
    }


    .category-grid,
    .jet-grid {

        grid-template-columns:
            1fr;
    }


    .category-card {

        min-height:
            245px;
    }


    .jet-photo {

        height:
            220px;
    }


    .jet-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .jet-bottom .btn {

        width:
            100%;
    }


    .benefits-grid {

        grid-template-columns:
            1fr;
    }


    .stats {

        grid-template-columns:
            1fr 1fr;

        gap:
            25px 15px;

        margin-top:
            50px;
    }


    .stat {

        padding-left:
            15px;
    }


    .stat strong {

        font-size:
            27px;
    }


    .footer-grid {

        grid-template-columns:
            1fr;
    }


    .form-grid {

        grid-template-columns:
            1fr;
    }


    .field.full {

        grid-column:
            auto;
    }


    .form-wrap {

        padding:
            22px 18px;
    }


    .admin-main {

        padding:
            18px;
    }


    .metrics {

        grid-template-columns:
            1fr;
    }


    .fle-container {

        width:
            calc(100% - 30px);
    }


    .fle-nav-container {

        min-height:
            70px;
    }


    .fle-logo {

        gap:
            9px;
    }


    .fle-logo-symbol {

        width:
            38px;

        height:
            38px;
    }


    .fle-logo-letter {

        width:
            28px;

        height:
            28px;

        font-size:
            18px;
    }


    .fle-logo-main {

        font-size:
            18px;

        letter-spacing:
            .12em;
    }


    .fle-logo-sub {

        margin-top:
            5px;

        font-size:
            6px;

        letter-spacing:
            .25em;
    }


    .fle-menu-toggle {

        width:
            42px;

        height:
            42px;
    }

}


@media (max-width: 420px) {

    .hero h1 {

        font-size:
            42px;
    }


    .section-head h2 {

        font-size:
            34px;
    }


    .booking-title h2 {

        font-size:
            26px;
    }


    .stats {

        grid-template-columns:
            1fr;
    }

}

/* =========================================================
   TRUST STRIP
========================================================= */

.trust-strip {
    width: 100%;
    background: var(--fle-primary, #071522);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 24px 28px;

    border-right: 1px solid rgba(255, 255, 255, 0.10);

    min-width: 0;
}

.trust-item:last-child {
    border-right: none;
}

.trust-item i {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(216, 170, 82, 0.12);
    color: var(--fle-gold, #d8aa52);

    font-size: 19px;
}

.trust-item div {
    min-width: 0;
}

.trust-item strong {
    display: block;

    margin-bottom: 4px;

    color: var(--fle-text, #ffffff);

    font-size: 14px;
    font-weight: 700;
}

.trust-item span {
    display: block;

    color: var(--fle-muted, #9faab5);

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-item {
        padding: 22px 20px;
    }

    .trust-item:nth-child(2) {
        border-right: none;
    }

    .trust-item:nth-child(1),
    .trust-item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .trust-strip {
        padding: 0;
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .trust-item {
        padding: 18px 15px;
        gap: 13px;

        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .trust-item:last-child {
        border-bottom: none;
    }

    .trust-item i {
        width: 42px;
        height: 42px;

        flex: 0 0 42px;

        font-size: 17px;
    }

    .trust-item strong {
        font-size: 14px;
    }

    .trust-item span {
        font-size: 12px;
    }

}

/* =========================================================
   CHARTER OPTIONS
========================================================= */

.charter-options {
    width: 100%;
    background: var(--fle-primary, #071522);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.charter-options-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.charter-option {
    display: flex;
    align-items: center;
    gap: 15px;

    min-width: 0;
    padding: 25px 24px;

    border-right: 1px solid rgba(255, 255, 255, 0.10);

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.charter-option:last-child {
    border-right: none;
}

.charter-option:hover {
    background: rgba(255, 255, 255, 0.025);
}

.charter-option-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(216, 170, 82, 0.12);

    border: 1px solid rgba(216, 170, 82, 0.18);

    color: var(--fle-gold, #d8aa52);

    font-size: 18px;
}

.charter-option-content {
    min-width: 0;
}

.charter-option-content strong {
    display: block;

    margin-bottom: 5px;

    color: var(--fle-text, #ffffff);

    font-size: 14px;
    font-weight: 700;
}

.charter-option-content span {
    display: block;

    color: var(--fle-muted, #9faab5);

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    .charter-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .charter-option {
        padding: 22px 20px;
    }

    .charter-option:nth-child(1),
    .charter-option:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .charter-option:nth-child(2) {
        border-right: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .charter-options-grid {
        grid-template-columns: 1fr;
    }

    .charter-option {
        padding: 18px 15px;

        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .charter-option:last-child {
        border-bottom: none;
    }

    .charter-option-icon {
        width: 42px;
        height: 42px;

        flex: 0 0 42px;

        font-size: 16px;
    }

    .charter-option-content strong {
        font-size: 14px;
    }

    .charter-option-content span {
        font-size: 12px;
    }

}

/* ==========================================================
   LUXURY BAND - PREMIUM LAYOUT
========================================================== */

.luxury-band {
    background:
        linear-gradient(
            135deg,
            #06131f,
            #0b1d2d
        );

    color: #ffffff;

    padding: 100px 0 70px;
}


/* TOP TWO COLUMN LAYOUT */

.luxury-top {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(350px, .9fr);

    gap: 80px;

    align-items: center;
}


/* LEFT CONTENT */

.luxury-content {
    max-width: 650px;
}

.luxury-content h2 {
    color: #f1ede4;

    font-size: clamp(42px, 5vw, 62px);

    margin: 15px 0 22px;
}

.luxury-content p {
    max-width: 580px;

    color: #aeb8c0;

    font-size: 17px;

    margin-bottom: 30px;
}


/* ==========================================================
   RIGHT FEATURE LIST
========================================================== */

.feature-list {
    display: flex;

    flex-direction: column;

    gap: 0;

    border-top:
        1px solid rgba(255,255,255,.12);
}


.feature-item {
    display: flex;

    align-items: flex-start;

    gap: 20px;

    padding: 25px 0;

    border-bottom:
        1px solid rgba(255,255,255,.12);

    transition:
        transform .25s ease,
        background .25s ease;
}


.feature-item:hover {
    transform:
        translateX(8px);
}


/* ICON */

.feature-icon {
    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(201,164,92,.45);

    color: #c9a45c;

    font-size: 20px;

    background:
        rgba(255,255,255,.03);
}


/* FEATURE TEXT */

.feature-text {
    display: flex;

    flex-direction: column;

    gap: 6px;

    padding-top: 2px;
}


.feature-text strong {
    color: #f1ede4;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 22px;

    font-weight: 600;
}


.feature-text span {
    color: #9da8b0;

    font-size: 14px;

    line-height: 1.7;
}


/* ==========================================================
   STATS
========================================================== */

.luxury-band .stats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin-top: 80px;

    padding-top: 35px;

    border-top:
        1px solid rgba(255,255,255,.10);
}


.luxury-band .stat {
    border-left:
        1px solid rgba(201,164,92,.35);

    padding-left: 20px;
}


.luxury-band .stat strong {
    display: block;

    color: #e0c17c;

    font-size: 32px;

    line-height: 1.2;

    margin-bottom: 6px;
}


.luxury-band .stat span {
    color: #9da8b0;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .08em;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .luxury-band {
        padding: 80px 0 60px;
    }

    .luxury-top {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .luxury-content {
        max-width: 100%;
    }

    .feature-list {
        max-width: 100%;
    }

    .luxury-band .stats {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 35px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .luxury-band {
        padding: 65px 0 50px;
    }

    .luxury-top {
        gap: 40px;
    }

    .luxury-content h2 {
        font-size: 40px;
    }

    .luxury-content p {
        font-size: 15px;
    }

    .feature-item {
        gap: 15px;

        padding: 22px 0;
    }

    .feature-icon {
        width: 45px;

        height: 45px;

        font-size: 17px;
    }

    .feature-text strong {
        font-size: 20px;
    }

    .feature-text span {
        font-size: 13px;
    }

    .luxury-band .stats {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-top: 55px;

        padding-top: 30px;
    }

    .luxury-band .stat {
        padding-left: 16px;
    }

}

/* ==========================================================
   AIRCRAFT PAGE
========================================================== */

.aircraft-page-hero {
    background:
        linear-gradient(
            90deg,
            rgba(4,15,24,.96),
            rgba(7,21,34,.78)
        ),
        url('https://images.unsplash.com/photo-1540962351504-03099e0a754b?auto=format&fit=crop&w=1800&q=85')
        center / cover;
}

.aircraft-page-hero .container {
    max-width: 900px;
}

.aircraft-page-hero h1 {
    color: #f1ede4;
}

.aircraft-page-hero p {
    max-width: 650px;
    color: #b7c0c7;
    font-size: 17px;
}


/* ==========================================================
   AIRCRAFT SECTION
========================================================== */

.aircraft-section {
    background: #f1ede4;
}


/* INTRO */

.aircraft-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;

    margin-bottom: 35px;
}

.aircraft-intro h2 {
    color: #071522;
    font-size: 44px;
    margin: 10px 0 12px;
}

.aircraft-intro p {
    max-width: 650px;
    color: #687582;
    margin: 0;
}


/* AIRCRAFT COUNT */

.aircraft-count {
    min-width: 150px;

    padding-left: 25px;

    border-left:
        1px solid #c9a45c;
}

.aircraft-count strong {
    display: block;

    color: #071522;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 40px;

    line-height: 1;
}

.aircraft-count span {
    color: #7d8790;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .1em;
}


/* ==========================================================
   FILTER
========================================================== */

.aircraft-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 40px;

    padding-bottom: 25px;

    border-bottom:
        1px solid #d8d1c5;
}

.filter-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 18px;

    border:
        1px solid #cfc7ba;

    color: #53606b;

    background:
        rgba(255,255,255,.25);

    font-size: 12px;

    font-weight: 700;

    transition:
        all .25s ease;
}

.filter-btn:hover {
    border-color: #c9a45c;

    color: #071522;
}

.filter-btn.active {
    background: #071522;

    border-color: #071522;

    color: #e0c17c;
}


/* ==========================================================
   AIRCRAFT GRID
========================================================== */

.aircraft-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 26px;
}


/* CARD */

.aircraft-card {
    height: 100%;

    display: flex;

    flex-direction: column;

    background: #f7f3eb;

    border:
        1px solid #d8d1c5;

    box-shadow:
        0 15px 40px rgba(7,19,31,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.aircraft-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 25px 60px rgba(7,19,31,.15);
}


/* IMAGE */

.aircraft-card .jet-photo {
    overflow: hidden;
}

.aircraft-card .jet-photo img {
    width: 100%;
    height: 230px;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;
}

.aircraft-card:hover .jet-photo img {
    transform:
        scale(1.05);
}


/* CONTENT */

.aircraft-card .jet-content {
    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 25px;
}

.aircraft-card h3 {
    color: #071522;

    font-size: 29px;

    margin:
        7px 0 12px;
}

.jet-description {
    color: #718096;

    font-size: 14px;

    line-height: 1.7;

    margin:
        0 0 20px;
}


/* ==========================================================
   THREE COLUMN DETAILS
========================================================== */

.jet-details.three-column {
    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-top: auto;

    padding:
        18px 0;

    border-top:
        1px solid #ddd6ca;

    border-bottom:
        1px solid #ddd6ca;
}

.jet-details.three-column > div {
    min-width: 0;
}

.jet-details.three-column span {
    font-size: 9px;
}

.jet-details.three-column strong {
    font-size: 14px;

    white-space: nowrap;
}


/* ==========================================================
   BOTTOM
========================================================== */

.aircraft-card .jet-bottom {
    margin-top: 20px;
}

.aircraft-card .btn {
    white-space: nowrap;
}


/* ==========================================================
   CTA
========================================================== */

.aircraft-cta {
    padding: 85px 0;

    background:
        linear-gradient(
            135deg,
            #06131f,
            #0b1d2d
        );
}

.aircraft-cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}

.aircraft-cta h2 {
    color: #f1ede4;

    font-size: 42px;

    margin:
        10px 0 15px;
}

.aircraft-cta p {
    max-width: 700px;

    color: #9da8b0;

    margin: 0;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .aircraft-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .aircraft-intro {
        display: block;
    }

    .aircraft-intro h2 {
        font-size: 36px;
    }

    .aircraft-count {
        margin-top: 30px;

        padding-left: 18px;
    }

    .aircraft-grid {
        grid-template-columns: 1fr;
    }

    .aircraft-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

    .aircraft-cta h2 {
        font-size: 35px;
    }

}


@media (max-width: 480px) {

    .aircraft-filter {
        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 15px;
    }

    .filter-btn {
        flex-shrink: 0;
    }

    .aircraft-card .jet-content {
        padding: 20px;
    }

    .jet-details.three-column {
        gap: 8px;
    }

    .jet-details.three-column strong {
        font-size: 12px;
    }

}

/* ==========================================================
   ABOUT US PAGE
========================================================== */


/* ==========================================================
   HERO
========================================================== */

.about-page-hero {
    min-height: 580px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(4,15,24,.94),
            rgba(4,15,24,.55)
        ),
        url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=1800&q=85')
        center / cover;
}

.about-hero-content {
    max-width: 760px;
}

.about-page-hero h1 {
    color: #f1ede4;

    font-size:
        clamp(50px, 7vw, 82px);

    margin: 18px 0;
}

.about-page-hero p {
    max-width: 620px;

    color: #c2c9ce;

    font-size: 18px;
}


/* ==========================================================
   INTRODUCTION
========================================================== */

.about-intro-section {
    background: #f1ede4;
}

.about-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: 100px;

    align-items: start;
}

.about-intro-title h2 {
    color: #071522;

    font-size:
        clamp(42px, 5vw, 62px);

    margin: 15px 0;
}

.about-intro-content {
    max-width: 650px;
}

.about-intro-content p {
    color: #687582;

    font-size: 16px;

    line-height: 1.9;

    margin-top: 0;
    margin-bottom: 22px;
}

.about-intro-content .about-lead {
    color: #1e2d39;

    font-size: 20px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    line-height: 1.7;
}


/* ==========================================================
   EXPERIENCE
========================================================== */

.about-experience {
    padding: 100px 0;

    background:
        linear-gradient(
            135deg,
            #06131f,
            #0b1d2d
        );

    color: #ffffff;
}

.about-experience-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, 1fr);

    gap: 100px;

    align-items: center;
}

.about-experience-content h2 {
    color: #f1ede4;

    font-size:
        clamp(42px, 5vw, 62px);

    margin: 15px 0 25px;
}

.about-experience-content p {
    max-width: 600px;

    color: #9da8b0;

    line-height: 1.9;

    margin-bottom: 20px;
}


/* FEATURES */

.about-feature-list {
    border-top:
        1px solid rgba(255,255,255,.12);
}

.about-feature {
    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 20px;

    padding: 25px 0;

    border-bottom:
        1px solid rgba(255,255,255,.12);

    transition:
        transform .25s ease;
}

.about-feature:hover {
    transform:
        translateX(8px);
}

.about-feature-number {
    color: #c9a45c;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .1em;

    padding-top: 4px;
}

.about-feature h3 {
    color: #f1ede4;

    font-size: 25px;

    margin: 0 0 8px;
}

.about-feature p {
    color: #9da8b0;

    font-size: 14px;

    line-height: 1.7;

    margin: 0;
}


/* ==========================================================
   VALUES
========================================================== */

.about-values-section {
    background: #eae4d9;
}

.about-section-head {
    align-items: end;
}

.about-section-head h2 {
    color: #071522;

    max-width: 700px;
}

.about-section-head > p {
    max-width: 420px;

    color: #687582;

    margin: 0;
}

.about-values-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 22px;
}

.about-value-card {
    padding: 32px 28px;

    background: #f7f3eb;

    border:
        1px solid #d7cfc1;

    min-height: 280px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.about-value-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 20px 45px rgba(7,19,31,.10);
}

.about-value-icon {
    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #c9a45c;

    border:
        1px solid #c9a45c;

    font-size: 20px;

    margin-bottom: 28px;
}

.about-value-card h3 {
    color: #071522;

    font-size: 25px;

    margin-bottom: 12px;
}

.about-value-card p {
    color: #687582;

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================================
   PROMISE
========================================================== */

.about-promise {
    padding: 120px 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,15,24,.92),
            rgba(4,15,24,.65)
        ),
        url('https://images.unsplash.com/photo-1517479149777-5f3b1511d5ad?auto=format&fit=crop&w=1800&q=85')
        center / cover;
}

.about-promise-content {
    max-width: 800px;
}

.about-promise h2 {
    color: #f1ede4;

    font-size:
        clamp(45px, 6vw, 72px);

    margin: 18px 0 25px;
}

.about-promise p {
    max-width: 650px;

    color: #b4bec5;

    font-size: 17px;

    line-height: 1.9;
}

.about-text-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 20px;

    color: #e0c17c;

    font-weight: 700;

    transition:
        gap .25s ease;
}

.about-text-link:hover {
    gap: 18px;
}


/* ==========================================================
   INFORMATION
========================================================== */

.about-information-section {
    background: #f1ede4;
}

.about-information-box {
    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 25px;

    max-width: 1000px;

    margin: auto;

    padding: 45px;

    background: #e8e1d5;

    border-left:
        3px solid #c9a45c;
}

.about-information-icon {
    color: #c9a45c;

    font-size: 32px;
}

.about-information-box h3 {
    color: #071522;

    font-size: 30px;

    margin: 8px 0 15px;
}

.about-information-box p {
    color: #687582;

    line-height: 1.8;

    margin-bottom: 15px;
}


/* ==========================================================
   FINAL CTA
========================================================== */

.about-final-cta {
    background: #071522;
}

.about-cta-buttons {
    display: flex;

    align-items: center;

    gap: 15px;
}

.about-outline-btn {
    color: #f1ede4;

    border:
        1px solid rgba(255,255,255,.3);

    background: transparent;
}

.about-outline-btn:hover {
    border-color: #c9a45c;

    color: #e0c17c;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .about-intro-grid {
        gap: 60px;
    }

    .about-experience-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

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

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .about-page-hero {
        min-height: 500px;
    }

    .about-intro-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .about-intro-content .about-lead {
        font-size: 18px;
    }

    .about-experience {
        padding: 70px 0;
    }

    .about-feature {
        grid-template-columns:
            45px 1fr;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-value-card {
        min-height: auto;
    }

    .about-promise {
        padding: 90px 0;
    }

    .about-information-box {
        grid-template-columns: 1fr;

        padding: 30px 25px;
    }

    .about-cta-buttons {
        flex-direction: column;

        align-items: stretch;

        width: 100%;
    }

    .about-cta-buttons .btn {
        text-align: center;
    }

}


@media (max-width: 480px) {

    .about-page-hero h1 {
        font-size: 48px;
    }

    .about-intro-title h2,
    .about-experience-content h2 {
        font-size: 40px;
    }

    .about-promise h2 {
        font-size: 42px;
    }

    .about-information-box h3 {
        font-size: 26px;
    }

}

/* ==========================================================
   CONTACT PAGE
========================================================== */


/* HERO */

.contact-page-hero {
    min-height: 560px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(4,15,24,.94),
            rgba(4,15,24,.55)
        ),
        url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=1800&q=85')
        center / cover;
}

.contact-hero-content {
    max-width: 760px;
}

.contact-page-hero h1 {
    color: #f1ede4;

    font-size:
        clamp(50px, 7vw, 80px);

    margin: 18px 0;
}

.contact-page-hero p {
    max-width: 620px;

    color: #c2c9ce;

    font-size: 18px;

    line-height: 1.8;
}


/* ==========================================================
   MAIN CONTACT SECTION
========================================================== */

.contact-section {
    background: #eae4d9;
}

.contact-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(500px, 1.1fr);

    gap: 80px;

    align-items: start;
}


/* ==========================================================
   CONTACT INFORMATION
========================================================== */

.contact-info h2 {
    color: #071522;

    font-size:
        clamp(40px, 5vw, 58px);

    margin: 15px 0 20px;
}

.contact-info > p {
    max-width: 550px;

    color: #687582;

    line-height: 1.9;
}


/* CONTACT DETAILS */

.contact-details {
    margin-top: 45px;

    border-top:
        1px solid #d0c8bb;
}

.contact-detail {
    display: flex;

    align-items: center;

    gap: 18px;

    padding: 22px 0;

    border-bottom:
        1px solid #d0c8bb;
}

.contact-icon {
    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid #c9a45c;

    color: #a78342;

    font-size: 18px;
}

.contact-detail > div:last-child {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.contact-detail span {
    color: #7d8790;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .1em;
}

.contact-detail strong,
.contact-detail strong a {
    color: #071522;

    font-size: 15px;

    font-weight: 600;
}

.contact-detail strong a:hover {
    color: #a78342;
}


/* ==========================================================
   QUICK BOOKING BOX
========================================================== */

.contact-booking-box {
    margin-top: 40px;

    padding: 32px;

    background:
        #071522;

    color: #ffffff;

    border-left:
        3px solid #c9a45c;
}

.contact-booking-box h3 {
    color: #f1ede4;

    font-size: 28px;

    margin: 12px 0;
}

.contact-booking-box p {
    color: #9da8b0;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 22px;
}


/* ==========================================================
   CONTACT FORM
========================================================== */

.contact-form-wrapper {
    padding: 45px;

    background:
        #f7f3eb;

    border:
        1px solid #d7cfc1;

    box-shadow:
        0 25px 70px rgba(7,19,31,.10);
}

.contact-form-header {
    margin-bottom: 30px;
}

.contact-form-header h2 {
    color: #071522;

    font-size: 40px;

    margin: 10px 0;
}

.contact-form-header p {
    color: #718096;

    margin: 0;
}


/* FORM ROW */

.contact-form-row {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}


/* FORM FIELDS */

.contact-form .field {
    margin-bottom: 20px;
}

.contact-form .field label {
    display: block;

    color: #1d2a35;

    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 700;
}

.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea {
    width: 100%;

    background:
        #efe9df;

    border:
        1px solid #d4ccbf;

    border-radius: 0;

    color: #17202a;

    padding: 14px 15px;

    font-family:
        inherit;

    font-size: 14px;

    outline: none;

    transition:
        border-color .25s ease,
        background .25s ease;
}

.contact-form .field input:focus,
.contact-form .field select:focus,
.contact-form .field textarea:focus {
    border-color:
        #c9a45c;

    background:
        #f7f3eb;
}

.contact-form .field textarea {
    min-height: 150px;

    resize: vertical;
}


/* SUBMIT BUTTON */

.contact-submit {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        15px 26px;
}


/* ==========================================================
   SUCCESS / ERROR
========================================================== */

.contact-success,
.contact-error {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 16px 18px;

    margin-bottom: 25px;

    font-size: 14px;
}

.contact-success {
    background:
        #e6efe8;

    border-left:
        3px solid #4f7b5b;

    color:
        #2e5638;
}

.contact-error {
    background:
        #f5e5e2;

    border-left:
        3px solid #9c4b42;

    color:
        #73342e;
}


/* ==========================================================
   FINAL SECTION
========================================================== */

.contact-final-section {
    padding: 85px 0;

    background:
        linear-gradient(
            135deg,
            #06131f,
            #0b1d2d
        );
}

.contact-final-content {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}

.contact-final-content h2 {
    color: #f1ede4;

    font-size:
        clamp(36px, 5vw, 55px);

    margin: 12px 0;
}

.contact-final-content p {
    color: #9da8b0;

    margin: 0;
}

.contact-outline-btn {
    color: #f1ede4;

    border:
        1px solid rgba(255,255,255,.30);

    background:
        transparent;

    white-space: nowrap;
}

.contact-outline-btn:hover {
    color: #e0c17c;

    border-color:
        #c9a45c;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .contact-grid {
        grid-template-columns:
            1fr;

        gap: 60px;
    }

    .contact-info {
        max-width: 700px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .contact-page-hero {
        min-height: 500px;
    }

    .contact-form-wrapper {
        padding: 30px 22px;
    }

    .contact-form-row {
        grid-template-columns:
            1fr;
    }

    .contact-final-content {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 480px) {

    .contact-page-hero h1 {
        font-size: 46px;
    }

    .contact-info h2 {
        font-size: 39px;
    }

    .contact-form-header h2 {
        font-size: 34px;
    }

    .contact-booking-box {
        padding: 25px 20px;
    }

    .contact-detail {
        align-items: flex-start;
    }

    .contact-final-content .btn {
        width: 100%;

        text-align: center;
    }

}