/* Meem Ventures — Global CSS extracted from the original single-file frontend. */

09.01 DESIGN TOKENS
        ====================================================== */
        :root {
            --green: #092d27;
            --green-deep: #061f1b;
            --green-soft: #123f35;
            --ink: #11211c;
            --muted: #5c6b63;
            --gold: #c7a66a;
            --gold-light: #e4c98d;
            --ivory: #f4f0e8;
            --sand: #e8e2d5;
            --line: rgba(9,45,39,.14);
            --white-line: rgba(255,255,255,.14);
            --sans: 'DM Sans', sans-serif;
            --display: 'Manrope', sans-serif;
            --serif: 'Playfair Display', serif;
            --shadow: 0 22px 60px rgba(6,31,27,.13);
        }

        /* =====================================================
           09.02 RESET / GLOBAL
        ====================================================== */
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            background: var(--ivory);
            color: var(--ink);
            font-family: var(--sans);
            line-height: 1.6;
            overflow-x: hidden;
        }
        body.menu-open { overflow: hidden; }
        img { max-width: 100%; display: block; }
        a { color: inherit; text-decoration: none; }
        button, a { -webkit-tap-highlight-color: transparent; }
        button { font: inherit; }
        .wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
        .eyebrow {
            color: var(--gold);
            font: 600 10px/1.2 var(--sans);
            letter-spacing: .25em;
            text-transform: uppercase;
        }
        .line { width: 85px; height: 1px; background: var(--gold); margin: 28px 0; }
        .section { padding: 120px 0; }
        .dark { background: var(--green); color: #fff; }
        .dark .sectionhead p { color: #b9c9c0; }
        .sectionhead {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 40px;
            margin-bottom: 55px;
        }
        .sectionhead h2 {
            font: 500 clamp(37px, 5vw, 66px)/1 var(--serif);
            max-width: 700px;
            margin: 10px 0;
        }
        .sectionhead p { max-width: 330px; color: #6a766f; margin: 0; }

        /* =====================================================
           09.03 BUTTONS
        ====================================================== */
        .btn, .navcta {
            position: relative;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 21px;
            border: 1px solid transparent;
            border-radius: 999px;
            background: var(--gold);
            color: var(--green);
            font: 600 11px/1 var(--sans);
            letter-spacing: .12em;
            text-transform: uppercase;
            box-shadow: 0 8px 18px rgba(9,45,39,.10);
            transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
        }
        .btn::after, .navcta::after {
            content: '';
            position: absolute;
            inset: 0 auto 0 -80%;
            width: 45%;
            transform: skewX(-22deg);
            background: rgba(255,255,255,.28);
            transition: left .55s ease;
        }
        .btn:hover::after, .navcta:hover::after { left: 130%; }
        .btn:hover, .navcta:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(9,45,39,.20);
            background: var(--gold-light);
        }
        .btn.ghost {
            background: transparent;
            color: #fff;
            border-color: rgba(255,255,255,.32);
            box-shadow: none;
        }
        .btn.ghost:hover { background: rgba(255,255,255,.08); }

        /* =====================================================
           09.04 NAVIGATION
        ====================================================== */
        .nav {
            position: fixed;
            z-index: 1000;
            inset: 0 0 auto;
            padding: 22px 0;
            color: #fff;
            transition: background .35s ease, padding .35s ease, backdrop-filter .35s ease;
        }
        .nav.scrolled {
            padding: 13px 0;
            background: rgba(9,45,39,.94);
            backdrop-filter: blur(16px);
            box-shadow: 0 10px 35px rgba(0,0,0,.08);
        }
        .navin { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .brand { display: inline-flex; align-items: center; gap: 12px; font: 700 15px var(--display); letter-spacing: .06em; }
        .brandmark {
            width: 36px; height: 36px; flex: 0 0 36px;
            display: grid; place-items: center;
            border: 1px solid var(--gold);
            border-radius: 50%;
            color: var(--gold);
            font: 500 20px var(--serif);
        }
        .links { display: flex; align-items: center; gap: 25px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
        .links a:not(.navcta) { opacity: .78; transition: color .2s ease, opacity .2s ease; }
        .links a:not(.navcta):hover { color: var(--gold); opacity: 1; }
        .hamb {
            display: none;
            width: 44px; height: 44px;
            border: 1px solid rgba(255,255,255,.28);
            border-radius: 50%;
            background: transparent;
            color: #fff;
            cursor: pointer;
        }
        .hamb span, .hamb span::before, .hamb span::after {
            display: block; width: 17px; height: 1px; background: currentColor; margin: auto; transition: transform .25s ease;
        }
        .hamb span { position: relative; }
        .hamb span::before, .hamb span::after { content: ''; position: absolute; left: 0; }
        .hamb span::before { top: -6px; }
        .hamb span::after { top: 6px; }
        .hamb[aria-expanded="true"] span { background: transparent; }
        .hamb[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
        .hamb[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
        .mobilemenu {
            position: fixed; z-index: 999; inset: 0;
            display: grid; place-items: center;
            padding: 100px 30px 40px;
            background: rgba(6,31,27,.98);
            opacity: 0; visibility: hidden;
            transform: translateY(-10px);
            transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
        }
        .mobilemenu.open { opacity: 1; visibility: visible; transform: translateY(0); }
        .mobilemenu nav { display: grid; gap: 18px; width: min(420px,100%); text-align: center; }
        .mobilemenu a { color: #fff; font: 500 32px/1.05 var(--serif); padding: 7px; }
        .mobilemenu .mobilecta { margin-top: 12px; justify-content: center; font: 600 11px var(--sans); }

        /* =========================================================


09.05 HERO — PREMIUM CINEMATIC SYSTEM
========================================================= */

.hero {
    position: relative;
    min-height: 94vh;
    min-height: 94svh;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    background: #071f1b;
}


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

.hero-bg {
    position: absolute;
    inset: -4%;
    z-index: -5;

    background:
        url('/assets/hero.png')
        center center / cover
        no-repeat;

    transform: scale(1.02);
    animation: heroImageDrift 18s ease-in-out infinite alternate;
    will-change: transform;
}


.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: -4;

    background:
        linear-gradient(
            90deg,
            rgba(4, 27, 23, .97) 0%,
            rgba(5, 31, 27, .88) 25%,
            rgba(5, 31, 27, .46) 54%,
            rgba(5, 31, 27, .12) 78%,
            rgba(5, 31, 27, .20) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3, 24, 21, .36) 0%,
            transparent 34%,
            rgba(3, 23, 20, .68) 100%
        );
}


.hero-glow {
    position: absolute;
    z-index: -3;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .22;
}


.hero-glow-one {
    width: 360px;
    height: 360px;
    left: 42%;
    top: 18%;
    background: #c7a66a;
    animation: heroGlowOne 9s ease-in-out infinite alternate;
}


.hero-glow-two {
    width: 280px;
    height: 280px;
    right: 7%;
    bottom: 4%;
    background: #ffffff;
    opacity: .08;
    animation: heroGlowTwo 11s ease-in-out infinite alternate;
}


/* =========================================================
   SUBTLE FILM GRAIN
========================================================= */

.hero-grain {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .045;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

    mix-blend-mode: soft-light;
}


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

.hero-content {
    position: relative;
    z-index: 5;
    width: min(1200px, calc(100% - 64px));
    padding-top: 115px;
    padding-bottom: 110px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}


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

.hero-copy {
    max-width: 780px;
}


.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 15px;

    color: var(--gold-light, #e5c789);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;

    opacity: 0;
    transform: translateY(18px);

    animation: heroReveal .9s .15s cubic-bezier(.2,.7,.2,1) forwards;
}


.hero-eyebrow-line {
    width: 48px;
    height: 1px;
    background: var(--gold, #c7a66a);
}


.hero-eyebrow-year {
    opacity: .58;
    padding-left: 8px;
}


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

.hero-title {
    max-width: 850px;

    margin: 24px 0 26px;

    font:
        500 clamp(60px, 8.2vw, 112px)
        / .88
        var(--serif);

    letter-spacing: -.045em;

    opacity: 0;
    transform: translateY(35px);

    animation:
        heroTitleReveal 1.15s .25s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.hero-title span {
    display: inline-block;
}


.hero-title em {
    position: relative;

    color: var(--gold-light, #e5c789);
    font-style: italic;
}


.hero-title em::after {
    content: '';

    position: absolute;
    left: 4%;
    right: 0;
    bottom: -4px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(229,199,137,.8),
            transparent
        );

    transform: scaleX(0);
    transform-origin: left;

    animation: heroUnderline 1.2s 1.15s ease forwards;
}


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

.hero-description {
    max-width: 500px;

    margin: 0;

    color: rgba(239,246,241,.84);

    font-size: 16px;
    line-height: 1.75;

    opacity: 0;
    transform: translateY(18px);

    animation:
        heroReveal .9s .65s
        cubic-bezier(.2,.7,.2,1)
        forwards;
}


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

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;

    margin-top: 38px;

    opacity: 0;
    transform: translateY(18px);

    animation:
        heroReveal .9s .82s
        cubic-bezier(.2,.7,.2,1)
        forwards;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.hero-primary-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    min-width: 210px;
    padding: 7px 8px 7px 23px;

    border: 1px solid rgba(229,199,137,.75);
    border-radius: 999px;

    background:
        linear-gradient(
            110deg,
            #c7a66a,
            #e0bd78,
            #c7a66a
        );

    color: #092d27;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.35);

    overflow: hidden;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease;
}


.hero-primary-btn::before {
    content: '';

    position: absolute;
    top: 0;
    bottom: 0;
    left: -80px;

    width: 55px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.5),
            transparent
        );

    transform: skewX(-20deg);
    transition: left .7s ease;
}


.hero-primary-btn:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 45px rgba(0,0,0,.28),
        0 0 35px rgba(199,166,106,.18);
}


.hero-primary-btn:hover::before {
    left: 120%;
}


.hero-btn-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #092d27;
    color: #e5c789;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1);
}


.hero-primary-btn:hover .hero-btn-icon {
    transform: translateX(3px);
}


.hero-btn-icon svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   SECONDARY STORY / CONTACT BUTTON
========================================================= */

.hero-story-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    color: #fff;

    transition:
        transform .35s ease,
        color .35s ease;
}


.hero-story-btn:hover {
    transform: translateX(4px);
    color: var(--gold-light, #e5c789);
}


.hero-story-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(229,199,137,.72);
    border-radius: 50%;

    position: relative;
}


.hero-story-icon::before {
    content: '';

    position: absolute;
    inset: -6px;

    border: 1px solid rgba(229,199,137,.16);
    border-radius: 50%;

    animation: storyPulse 2.8s ease-out infinite;
}


.hero-story-icon svg {
    width: 13px;
    height: 13px;

    fill: currentColor;
    margin-left: 2px;
}


.hero-story-btn small {
    display: block;

    font-size: 8px;
    font-weight: 600;
    letter-spacing: .2em;

    opacity: .55;
}


.hero-story-btn strong {
    display: block;

    margin-top: 3px;

    font:
        500 16px var(--serif);

    letter-spacing: .01em;
}


/* =========================================================
   RIGHT SIDE CONTENT
========================================================= */

.hero-side-content {
    position: relative;

    width: 290px;
    min-width: 290px;

    align-self: flex-end;

    padding-bottom: 35px;

    opacity: 0;
    transform: translateY(25px);

    animation:
        heroReveal .9s 1s
        cubic-bezier(.2,.7,.2,1)
        forwards;
}


.hero-side-label {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 24px;

    color: rgba(239,246,241,.72);

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    line-height: 1.65;
    text-transform: uppercase;
}


.side-label-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(229,199,137,.55);
    border-radius: 50%;

    color: var(--gold-light, #e5c789);
}


.side-label-icon svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
}


/* =========================================================
   FLOATING CARD
========================================================= */

.hero-floating-card {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 88px;

    padding: 8px;

    border: 1px solid rgba(229,199,137,.25);
    border-radius: 18px;

    background:
        rgba(5,31,27,.72);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 20px 55px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.07);

    overflow: hidden;

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        background .4s ease;
}


.hero-floating-card::before {
    content: '';

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(229,199,137,.08),
            transparent 80%
        );

    transform: translateX(-100%);
    transition: transform .8s ease;
}


.hero-floating-card:hover {
    transform: translateY(-7px);
    border-color: rgba(229,199,137,.55);
    background: rgba(5,31,27,.84);
}


.hero-floating-card:hover::before {
    transform: translateX(100%);
}


.hero-card-image {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    border-radius: 12px;

    overflow: hidden;
}


.hero-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1);
}


.hero-floating-card:hover .hero-card-image img {
    transform: scale(1.09);
}


.hero-card-content {
    min-width: 0;

    padding: 0 12px;
}


.hero-card-content span {
    display: block;

    color: var(--gold-light, #e5c789);

    font-size: 8px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}


.hero-card-content strong {
    display: block;

    margin-top: 5px;

    color: #fff;

    font:
        500 18px/1.1 var(--serif);
}


.hero-card-arrow {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    margin-left: auto;

    display: grid;
    place-items: center;

    border: 1px solid rgba(229,199,137,.42);
    border-radius: 50%;

    color: var(--gold-light, #e5c789);

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


.hero-floating-card:hover .hero-card-arrow {
    transform: translateX(3px);
    background: rgba(229,199,137,.1);
}


.hero-card-arrow svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   ANIMATED FLIGHT ROUTE
========================================================= */

.hero-route {
    position: absolute;
    z-index: 1;

    inset: auto -2% 3% 0;

    height: 58%;

    pointer-events: none;

    opacity: .7;
}


.hero-route svg {
    width: 100%;
    height: 100%;

    overflow: visible;
}


.hero-route-path {
    fill: none;

    stroke: rgba(229,199,137,.55);
    stroke-width: 1.5;

    stroke-dasharray: 7 13;
    stroke-linecap: round;

    animation:
        heroRouteMove 18s linear infinite;
}


.route-dot {
    fill: #e5c789;

    filter:
        drop-shadow(0 0 7px rgba(229,199,137,.65));

    animation:
        routeDotPulse 3s ease-in-out infinite;
}


.route-dot-two {
    animation-delay: .7s;
}


.route-dot-three {
    animation-delay: 1.4s;
}


.route-dot-four {
    animation-delay: 2.1s;
}


/* =========================================================
   AIRPLANE
========================================================= */

.hero-plane {
    position: absolute;

    z-index: 3;

    left: 56%;
    top: 22%;

    width: 74px;
    height: 74px;

    transform:
        rotate(-10deg);

    animation:
        planeJourney 9s
        cubic-bezier(.45,.05,.55,.95)
        infinite alternate;

    filter:
        drop-shadow(0 8px 18px rgba(0,0,0,.3));
}


.hero-plane svg {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    fill: #eee5d3;
}


.plane-trail {
    position: absolute;

    left: -105px;
    top: 43px;

    width: 115px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(229,199,137,.65)
        );

    transform:
        rotate(-15deg);

    transform-origin: right center;

    opacity: .7;
}


.plane-trail::after {
    content: '';

    position: absolute;

    right: 0;
    top: -2px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #e5c789;

    box-shadow:
        0 0 12px rgba(229,199,137,.8);
}


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

.hero-bottom {
    position: absolute;

    z-index: 5;

    left: 0;
    right: 0;
    bottom: 34px;

    width: min(1200px, calc(100% - 64px));
    margin: auto;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    color: rgba(239,246,241,.58);

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}


.hero-scroll {
    display: flex;
    align-items: center;
    gap: 13px;
}


.hero-scroll-line {
    position: relative;

    width: 1px;
    height: 42px;

    overflow: hidden;

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


.hero-scroll-line span {
    position: absolute;

    top: -100%;
    left: 0;

    width: 100%;
    height: 45%;

    background: #e5c789;

    animation:
        scrollLine 2.2s ease-in-out infinite;
}


.hero-location {
    display: flex;
    align-items: center;
    gap: 12px;
}


.location-line {
    width: 35px;
    height: 1px;

    background: rgba(229,199,137,.45);
}


.location-dot {
    width: 7px;
    height: 7px;

    border: 1px solid #e5c789;
    border-radius: 50%;

    box-shadow:
        0 0 0 5px rgba(229,199,137,.08);
}


/* =========================================================
   VERTICAL INDEX
========================================================= */

.hero-index {
    position: absolute;

    z-index: 5;

    left: 28px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    gap: 18px;

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

    font-size: 10px;
    letter-spacing: .12em;
}


.hero-index span {
    position: relative;

    transition:
        color .3s ease,
        transform .3s ease;
}


.hero-index span.active {
    color: #e5c789;
    transform: translateX(5px);
}


.hero-index span.active::before {
    content: '';

    position: absolute;

    left: -17px;
    top: 50%;

    width: 9px;
    height: 1px;

    background: #e5c789;
}


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

@keyframes heroImageDrift {

    0% {
        transform: scale(1.02) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.075) translate3d(-1.2%, -1%, 0);
    }

}


@keyframes heroReveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes heroTitleReveal {

    0% {
        opacity: 0;
        transform: translateY(42px);
        clip-path: inset(100% 0 0 0);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }

}


@keyframes heroUnderline {

    to {
        transform: scaleX(1);
    }

}


@keyframes heroGlowOne {

    0% {
        transform: translate3d(-20px, 10px, 0);
    }

    100% {
        transform: translate3d(35px, -25px, 0);
    }

}


@keyframes heroGlowTwo {

    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-35px, -20px, 0);
    }

}


@keyframes heroRouteMove {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -300;
    }

}


@keyframes planeJourney {

    0% {
        transform:
            translate3d(-10px, 8px, 0)
            rotate(-10deg);
    }

    100% {
        transform:
            translate3d(52px, -22px, 0)
            rotate(-7deg);
    }

}


@keyframes routeDotPulse {

    0%,
    100% {
        opacity: .55;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

}


@keyframes storyPulse {

    0% {
        opacity: .8;
        transform: scale(.8);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(1.35);
    }

}


@keyframes scrollLine {

    0% {
        transform: translateY(-100%);
    }

    60%,
    100% {
        transform: translateY(260%);
    }

}


/* =========================================================
   HERO RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {

    .hero-content {
        width: min(100% - 70px, 1200px);
    }

    .hero-side-content {
        width: 250px;
        min-width: 250px;
    }

    .hero-title {
        font-size: clamp(58px, 8vw, 90px);
    }

    .hero-index {
        left: 15px;
    }

}


/* =========================================================
   HERO RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 760px) {

    .hero {
        min-height: 100svh;
        align-items: flex-end;
    }


    .hero-bg {
        background-position:
            62% center;

        animation-duration: 22s;
    }


    .hero-vignette {
        background:
            linear-gradient(
                180deg,
                rgba(4,27,23,.42) 0%,
                rgba(4,27,23,.62) 38%,
                rgba(4,27,23,.96) 100%
            ),
            linear-gradient(
                90deg,
                rgba(4,27,23,.62),
                rgba(4,27,23,.18)
            );
    }


    .hero-content {
        width: calc(100% - 36px);

        padding-top: 135px;
        padding-bottom: 125px;

        display: block;
    }


    .hero-copy {
        max-width: 100%;
    }


    .hero-eyebrow {
        gap: 10px;

        font-size: 8px;
        letter-spacing: .19em;
    }


    .hero-eyebrow-line {
        width: 28px;
    }


    .hero-eyebrow-year {
        display: none;
    }


    .hero-title {
        max-width: 100%;

        margin-top: 19px;
        margin-bottom: 22px;

        font-size: clamp(52px, 16vw, 72px);
        line-height: .9;

        letter-spacing: -.045em;
    }


    .hero-description {
        max-width: 360px;

        font-size: 14px;
        line-height: 1.65;
    }


    .hero-actions {
        gap: 20px;

        margin-top: 30px;
    }


    .hero-primary-btn {
        min-width: 190px;

        padding-left: 18px;

        font-size: 9px;
    }


    .hero-btn-icon {
        width: 38px;
        height: 38px;
    }


    .hero-story-btn {
        gap: 10px;
    }


    .hero-story-icon {
        width: 42px;
        height: 42px;
    }


    .hero-story-btn strong {
        font-size: 14px;
    }


    .hero-side-content {
        display: none;
    }


    .hero-route {
        inset: auto -30% 8% -20%;

        height: 48%;

        opacity: .48;
    }


    .hero-plane {
        width: 52px;
        height: 52px;

        left: 62%;
        top: 29%;
    }


    .plane-trail {
        left: -70px;
        width: 78px;
    }


    .hero-index {
        display: none;
    }


    .hero-bottom {
        width: calc(100% - 36px);

        bottom: 25px;

        font-size: 8px;
    }


    .hero-location {
        display: none;
    }


    .hero-scroll-line {
        height: 32px;
    }

}


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

@media (max-width: 390px) {

    .hero-content {
        padding-bottom: 115px;
    }


    .hero-title {
        font-size: 50px;
    }


    .hero-description {
        font-size: 13px;
    }


    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }


    .hero-primary-btn {
        min-width: 185px;
    }


    .hero-story-btn {
        margin-left: 2px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero *,
    .hero::before,
    .hero::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}

        /* =========================================================
   HOME — ABOUT EDITORIAL SECTION
========================================================= */

.about-editorial {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f7f3eb 0%,
            #f1ece2 52%,
            #ebe5d8 100%
        );

    color: var(--ink);

    padding: 135px 0 105px;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND DETAILS
========================================================= */

.about-pattern {
    position: absolute;
    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: .24;

    background-image:
        radial-gradient(
            circle at 72% 30%,
            rgba(199,166,106,.16) 1px,
            transparent 1px
        );

    background-size: 24px 24px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 40%,
            #000 100%
        );
}


.about-orbit {
    position: absolute;

    z-index: -2;

    border: 1px solid rgba(199,166,106,.18);

    border-radius: 50%;

    pointer-events: none;
}


.about-orbit-one {
    width: 700px;
    height: 700px;

    right: -390px;
    top: 90px;

    transform: rotate(-22deg);
}


.about-orbit-two {
    width: 480px;
    height: 480px;

    right: -260px;
    top: 205px;

    border-color: rgba(9,45,39,.08);
}


/* =========================================================
   MAIN GRID
========================================================= */

.about-editorial-inner {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, .94fr)
        minmax(470px, 1.06fr);

    align-items: center;

    gap: 80px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.about-content {
    position: relative;

    z-index: 3;

    padding-left: 8px;
}


.about-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    color: #9b7a3e;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .25em;
    text-transform: uppercase;
}


.about-eyebrow-line {
    width: 46px;
    height: 1px;

    background: var(--gold);
}


.about-title {
    margin: 25px 0 28px;

    max-width: 650px;

    font:
        500 clamp(50px, 6vw, 82px)
        / .91
        var(--serif);

    letter-spacing: -.045em;

    color: #10251f;
}


.about-title span {
    display: inline-block;
}


.about-title em {
    color: var(--gold);

    font-style: italic;
}


.about-lead {
    max-width: 560px;

    margin: 0 0 14px;

    color: #30453d;

    font-size: 17px;
    line-height: 1.75;
}


.about-description {
    max-width: 530px;

    margin: 0;

    color: #65736b;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   ABOUT ACTIONS
========================================================= */

.about-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 28px;

    margin-top: 36px;
}


/* =========================================================
   PRIMARY ABOUT BUTTON
========================================================= */

.about-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    min-width: 225px;

    padding: 7px 8px 7px 23px;

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

    border-radius: 999px;

    background: var(--green);

    color: #fff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .14em;
    text-transform: uppercase;

    box-shadow:
        0 12px 28px rgba(9,45,39,.14);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        background .4s ease;
}


.about-primary-btn:hover {
    transform: translateY(-4px);

    background: #123f35;

    box-shadow:
        0 18px 38px rgba(9,45,39,.22);
}


.about-btn-circle {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(229,199,137,.65);

    border-radius: 50%;

    color: #e5c789;

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


.about-primary-btn:hover .about-btn-circle {
    transform: translateX(3px);

    background:
        rgba(229,199,137,.08);
}


.about-btn-circle svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   SECONDARY ACTION
========================================================= */

.about-secondary-btn {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--green);

    transition:
        transform .35s ease,
        color .35s ease;
}


.about-secondary-btn:hover {
    transform: translateX(4px);

    color: #876a37;
}


.about-secondary-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(9,45,39,.28);

    border-radius: 50%;

    position: relative;
}


.about-secondary-icon::before {
    content: '';

    position: absolute;

    inset: -5px;

    border:
        1px solid
        rgba(199,166,106,.22);

    border-radius: 50%;

    transition:
        transform .4s ease,
        opacity .4s ease;
}


.about-secondary-btn:hover
.about-secondary-icon::before {
    transform: scale(1.16);

    opacity: .7;
}


.about-secondary-icon svg {
    width: 12px;
    height: 12px;

    fill: currentColor;

    margin-left: 2px;
}


.about-secondary-copy small {
    display: block;

    color: #8a938d;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: .2em;
}


.about-secondary-copy strong {
    display: block;

    margin-top: 3px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .12em;
}


/* =========================================================
   VALUE ITEMS
========================================================= */

.about-values {
    display: grid;

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

    max-width: 570px;

    margin-top: 58px;

    border-top:
        1px solid
        rgba(9,45,39,.12);

    padding-top: 28px;
}


.about-value {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 0 22px;

    text-align: center;
}


.about-value:first-child {
    padding-left: 0;
}


.about-value + .about-value {
    border-left:
        1px solid
        rgba(9,45,39,.12);
}


.about-value-icon {
    width: 34px;
    height: 34px;

    margin: 0 auto 12px;

    display: grid;
    place-items: center;

    color: var(--gold);

    border:
        1px solid
        rgba(199,166,106,.42);

    border-radius: 50%;
}


.about-value-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.25;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.about-value strong {
    color: #18352d;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .02em;
}


.about-value > span:last-child {
    margin-top: 2px;

    color: #78827c;

    font-size: 11px;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.about-visual {
    position: relative;

    min-height: 660px;

    z-index: 2;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.about-main-image {
    position: absolute;

    top: 0;
    right: 5%;

    width: min(460px, 78%);

    height: 610px;

    overflow: hidden;

    border-radius:
        230px 230px 18px 18px;

    box-shadow:
        0 30px 70px rgba(6,31,28,.20);
}


.about-main-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform: scale(1.03);

    transition:
        transform 1.2s
        cubic-bezier(.2,.8,.2,1);
}


.about-main-image:hover img {
    transform: scale(1.08);
}


.about-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(9,45,39,.05),
            transparent 48%,
            rgba(4,27,23,.42)
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.about-image-label {
    position: absolute;

    left: 34px;
    top: 38px;

    color: #fff;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .24em;
    line-height: 1.7;

    text-transform: uppercase;
}


.about-image-label::before {
    content: '';

    display: block;

    width: 35px;
    height: 1px;

    margin-bottom: 13px;

    background: var(--gold-light, #e5c789);
}


.about-image-label strong {
    display: block;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .27em;
}


/* =========================================================
   GOLD FRAME
========================================================= */

.about-image-frame {
    position: absolute;

    top: -14px;
    right: calc(5% - 14px);

    width: min(460px, 78%);
    height: 610px;

    border:
        1px solid
        rgba(199,166,106,.62);

    border-radius:
        230px 230px 18px 18px;

    pointer-events: none;
}


/* =========================================================
   FLOATING MADINAH IMAGE
========================================================= */

.about-floating-image {
    position: absolute;

    left: 0;
    bottom: 75px;

    width: 180px;
    height: 205px;

    padding: 7px;

    background: #f7f3eb;

    border:
        1px solid
        rgba(199,166,106,.45);

    border-radius: 18px;

    box-shadow:
        0 25px 50px rgba(6,31,28,.18);

    transform: rotate(-2deg);

    transition:
        transform .5s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .5s ease;
}


.about-floating-image:hover {
    transform:
        rotate(0deg)
        translateY(-7px);

    box-shadow:
        0 30px 60px rgba(6,31,28,.24);
}


.about-floating-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 12px;
}


.about-floating-label {
    position: absolute;

    left: 20px;
    bottom: 18px;

    color: #fff;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .2em;

    text-shadow:
        0 2px 8px rgba(0,0,0,.45);
}


/* =========================================================
   FLOATING INFO CARD
========================================================= */

.about-info-card {
    position: absolute;

    right: -2%;
    bottom: 55px;

    width: 285px;

    padding: 22px 22px 24px;

    border:
        1px solid
        rgba(229,199,137,.35);

    border-radius: 17px;

    background:
        rgba(9,45,39,.94);

    color: #fff;

    box-shadow:
        0 25px 55px rgba(6,31,28,.26);

    backdrop-filter: blur(12px);

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}


.about-info-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 32px 65px rgba(6,31,28,.34);
}


.about-info-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;

    color: #e5c789;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .2em;
}


.about-info-arrow {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(229,199,137,.48);

    border-radius: 50%;

    transition:
        transform .35s ease;
}


.about-info-card:hover .about-info-arrow {
    transform: translateX(3px);
}


.about-info-arrow svg {
    width: 14px;
    height: 14px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.4;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.about-info-card strong {
    display: block;

    font:
        500 27px/1.08
        var(--serif);

    color: #fff;
}


/* =========================================================
   LOCATION MARKER
========================================================= */

.about-location-marker {
    position: absolute;

    right: 3%;
    top: 40px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #6d766f;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .2em;
}


.about-location-ring {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(199,166,106,.65);

    border-radius: 50%;

    color: var(--gold);
}


.about-location-ring svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.2;
}


/* =========================================================
   BOTTOM EDITORIAL STRIP
========================================================= */

.about-bottom-line {
    width: min(1200px, calc(100% - 64px));

    margin:
        95px auto 0;

    display: flex;
    align-items: center;

    gap: 25px;

    color: #8b918b;
}


.about-bottom-rule {
    flex: 1;

    height: 1px;

    background:
        rgba(9,45,39,.13);
}


.about-bottom-line p {
    margin: 0;

    white-space: nowrap;

    font:
        italic 500 19px
        var(--serif);

    color: #526159;
}


.about-bottom-brand {
    white-space: nowrap;

    color: #9a7a43;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .22em;
}


/* =========================================================
   ABOUT REVEAL ANIMATION
========================================================= */

.about-content,
.about-main-image,
.about-floating-image,
.about-info-card {
    opacity: 0;

    transform: translateY(28px);

    animation:
        aboutReveal .9s
        cubic-bezier(.2,.7,.2,1)
        forwards;
}


.about-main-image {
    animation-delay: .12s;
}


.about-floating-image {
    animation-delay: .28s;
}


.about-info-card {
    animation-delay: .4s;
}


@keyframes aboutReveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


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

@media (max-width: 1100px) {

    .about-editorial {
        padding: 110px 0 85px;
    }


    .about-editorial-inner {
        grid-template-columns:
            minmax(0, .9fr)
            minmax(390px, 1.1fr);

        gap: 45px;
    }


    .about-title {
        font-size: clamp(48px, 6vw, 70px);
    }


    .about-visual {
        min-height: 590px;
    }


    .about-main-image,
    .about-image-frame {
        width: 390px;
        height: 550px;
    }


    .about-info-card {
        right: -4%;

        width: 255px;
    }


    .about-floating-image {
        width: 155px;
        height: 180px;
    }

}


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

@media (max-width: 760px) {

    .about-editorial {
        padding: 82px 0 65px;
    }


    .about-pattern {
        opacity: .13;
    }


    .about-editorial-inner {
        width: calc(100% - 36px);

        display: flex;
        flex-direction: column;

        gap: 65px;
    }


    .about-content {
        padding-left: 0;
    }


    .about-eyebrow {
        font-size: 8px;
        letter-spacing: .19em;
    }


    .about-eyebrow-line {
        width: 30px;
    }


    .about-title {
        margin-top: 20px;
        margin-bottom: 23px;

        font-size: clamp(47px, 14vw, 66px);

        line-height: .91;
    }


    .about-lead {
        font-size: 15px;
        line-height: 1.7;
    }


    .about-description {
        font-size: 13px;
        line-height: 1.75;
    }


    .about-actions {
        align-items: flex-start;

        gap: 21px;

        margin-top: 31px;
    }


    .about-primary-btn {
        min-width: 205px;

        padding-left: 18px;

        font-size: 9px;
    }


    .about-btn-circle {
        width: 39px;
        height: 39px;

        flex-basis: 39px;
    }


    .about-values {
        margin-top: 43px;

        padding-top: 22px;
    }


    .about-value {
        padding: 0 8px;
    }


    .about-value strong {
        font-size: 10px;
    }


    .about-value > span:last-child {
        font-size: 9px;
    }


    .about-value-icon {
        width: 30px;
        height: 30px;
    }


    .about-visual {
        width: 100%;

        min-height: 570px;
    }


    .about-main-image {
        top: 0;
        right: 5%;

        width: 77%;
        height: 470px;

        border-radius:
            150px 150px 16px 16px;
    }


    .about-image-frame {
        top: -10px;
        right: calc(5% - 10px);

        width: 77%;
        height: 470px;

        border-radius:
            150px 150px 16px 16px;
    }


    .about-image-label {
        left: 24px;
        top: 27px;
    }


    .about-floating-image {
        left: 0;
        bottom: 70px;

        width: 145px;
        height: 170px;
    }


    .about-info-card {
        right: 0;
        bottom: 20px;

        width: 235px;

        padding: 18px;
    }


    .about-info-card strong {
        font-size: 22px;
    }


    .about-info-card-top {
        margin-bottom: 12px;
    }


    .about-location-marker {
        top: 15px;
        right: 0;

        font-size: 7px;
    }


    .about-location-ring {
        width: 30px;
        height: 30px;
    }


    .about-bottom-line {
        width: calc(100% - 36px);

        margin-top: 45px;

        gap: 12px;
    }


    .about-bottom-line p {
        font-size: 14px;

        text-align: center;

        white-space: normal;
    }


    .about-bottom-brand {
        display: none;
    }

}


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

@media (max-width: 390px) {

    .about-editorial-inner {
        gap: 50px;
    }


    .about-title {
        font-size: 47px;
    }


    .about-values {
        gap: 0;
    }


    .about-value {
        padding: 0 5px;
    }


    .about-value strong {
        font-size: 9px;
    }


    .about-value > span:last-child {
        font-size: 8px;
    }


    .about-visual {
        min-height: 525px;
    }


    .about-main-image,
    .about-image-frame {
        height: 425px;
    }


    .about-floating-image {
        width: 125px;
        height: 150px;

        bottom: 65px;
    }


    .about-info-card {
        width: 210px;
    }


    .about-info-card strong {
        font-size: 20px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .about-content,
    .about-main-image,
    .about-floating-image,
    .about-info-card {
        animation: none;

        opacity: 1;
        transform: none;
    }


    .about-main-image img,
    .about-primary-btn,
    .about-secondary-btn,
    .about-floating-image,
    .about-info-card {
        transition: none;
    }

}

        /* =========================================================
   SERVICES — PREMIUM EDITORIAL SYSTEM
========================================================= */

.services-premium {
    position: relative;

    overflow: hidden;

    padding: 140px 0 125px;

    background:
        linear-gradient(
            135deg,
            #f5f1e9 0%,
            #eee8dc 55%,
            #e7dfd1 100%
        );

    color: var(--ink);

    isolation: isolate;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.services-orbit {
    position: absolute;

    z-index: -2;

    border:
        1px solid
        rgba(199,166,106,.17);

    border-radius: 50%;

    pointer-events: none;
}


.services-orbit-one {
    width: 720px;
    height: 720px;

    right: -410px;
    top: 70px;
}


.services-orbit-two {
    width: 470px;
    height: 470px;

    right: -280px;
    top: 195px;

    border-color:
        rgba(9,45,39,.08);
}


/* =========================================================
   SECTION HEADING
========================================================= */

.services-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, .75fr);

    gap: 80px;

    align-items: end;

    margin-bottom: 58px;
}


.services-heading-left {
    max-width: 750px;
}


.services-eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    color: #9b7a3e;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .26em;

    text-transform: uppercase;
}


.services-eyebrow-line {
    width: 47px;
    height: 1px;

    background: var(--gold);
}


.services-heading h2 {
    margin: 23px 0 0;

    font:
        500 clamp(48px, 6vw, 78px)
        / .92
        var(--serif);

    letter-spacing: -.045em;

    color: #10251f;
}


.services-heading h2 em {
    color: var(--gold);

    font-style: italic;
}


.services-heading-right {
    padding-bottom: 6px;
}


.services-heading-index {
    display: block;

    margin-bottom: 17px;

    color: #a1844f;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .18em;
}


.services-heading-right p {
    max-width: 340px;

    margin: 0;

    color: #66736c;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   SERVICES LAYOUT
========================================================= */

.services-layout {
    display: grid;

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

    gap: 18px;
}


/* =========================================================
   FEATURED SERVICE
========================================================= */

.service-featured {
    position: relative;

    grid-row: span 2;

    min-height: 570px;

    overflow: hidden;

    border-radius: 24px;

    background: var(--green);

    color: #fff;

    box-shadow:
        0 25px 65px rgba(9,45,39,.15);

    transition:
        transform .55s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .55s ease;
}


.service-featured:hover {
    transform: translateY(-8px);

    box-shadow:
        0 35px 80px rgba(9,45,39,.23);
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.service-featured-image {
    position: absolute;

    inset: 0;
}


.service-featured-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform: scale(1.04);

    transition:
        transform 1.1s
        cubic-bezier(.2,.8,.2,1);
}


.service-featured:hover
.service-featured-image img {
    transform: scale(1.1);
}


.service-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5,31,27,.05) 15%,
            rgba(5,31,27,.18) 38%,
            rgba(5,31,27,.91) 100%
        );
}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.service-featured-content {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 35px;
}


.service-number {
    position: absolute;

    top: 30px;
    left: 32px;

    color: #e5c789;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .2em;
}


.service-number::after {
    content: '';

    display: inline-block;

    width: 30px;
    height: 1px;

    margin-left: 10px;

    vertical-align: middle;

    background:
        rgba(229,199,137,.6);
}


.service-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    border:
        1px solid
        rgba(229,199,137,.55);

    border-radius: 50%;

    color: #e5c789;

    font-size: 22px;

    background:
        rgba(9,45,39,.35);

    backdrop-filter: blur(8px);
}


.service-featured-text {
    max-width: 500px;
}


.service-kicker {
    color: #e5c789;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .22em;

    text-transform: uppercase;
}


.service-featured h3 {
    margin: 10px 0 12px;

    font:
        500 clamp(34px, 4vw, 52px)
        / 1
        var(--serif);

    letter-spacing: -.025em;
}


.service-featured p {
    max-width: 430px;

    margin: 0;

    color:
        rgba(239,246,241,.78);

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   FEATURED ARROW
========================================================= */

.service-arrow {
    position: absolute;

    right: 32px;
    bottom: 32px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(229,199,137,.55);

    border-radius: 50%;

    color: #e5c789;

    background:
        rgba(9,45,39,.3);

    backdrop-filter: blur(8px);

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


.service-featured:hover .service-arrow {
    transform: translateX(5px);

    background:
        rgba(229,199,137,.1);
}


.service-arrow svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   STANDARD SERVICE CARD
========================================================= */

.service-card-premium {
    position: relative;

    min-height: 275px;

    display: grid;

    grid-template-columns:
        110px 1fr;

    grid-template-rows:
        auto 1fr auto;

    column-gap: 25px;

    padding: 23px;

    border:
        1px solid
        rgba(9,45,39,.12);

    border-radius: 20px;

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

    color: var(--ink);

    overflow: hidden;

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1),
        border-color .45s ease,
        box-shadow .45s ease,
        background .45s ease;
}


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

    border-color:
        rgba(199,166,106,.55);

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

    box-shadow:
        0 22px 45px rgba(9,45,39,.12);
}


/* =========================================================
   CARD TOP
========================================================= */

.service-card-top {
    position: absolute;

    top: 21px;
    left: 23px;
    right: 23px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 3;
}


.service-card-number {
    color: #9d804b;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .18em;
}


.service-card-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(199,166,106,.5);

    border-radius: 50%;

    color: #a28145;

    font-size: 16px;

    background:
        rgba(245,241,233,.85);

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


.service-card-premium:hover
.service-card-icon {
    transform: rotate(8deg);

    background:
        rgba(199,166,106,.15);
}


/* =========================================================
   CARD IMAGE
========================================================= */

.service-card-image {
    grid-column: 1;

    grid-row: 1 / span 3;

    width: 110px;
    height: 225px;

    margin-top: 27px;

    overflow: hidden;

    border-radius: 14px;

    background: #d9d2c5;
}


.service-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s
        cubic-bezier(.2,.8,.2,1);
}


.service-card-premium:hover
.service-card-image img {
    transform: scale(1.1);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.service-card-content {
    grid-column: 2;

    grid-row: 2;

    align-self: center;

    padding-top: 38px;
}


.service-card-content h3 {
    margin: 0 0 9px;

    color: #17352d;

    font:
        500 25px/1.05
        var(--serif);

    letter-spacing: -.015em;
}


.service-card-content p {
    margin: 0;

    color: #68756e;

    font-size: 12px;

    line-height: 1.7;
}


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

.service-card-footer {
    grid-column: 2;

    grid-row: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 13px;

    border-top:
        1px solid
        rgba(9,45,39,.1);

    color: #8c774e;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;
}


.service-card-arrow {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(199,166,106,.45);

    border-radius: 50%;

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


.service-card-premium:hover
.service-card-arrow {
    transform: translateX(4px);

    background:
        rgba(199,166,106,.12);
}


.service-card-arrow svg {
    width: 13px;
    height: 13px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   AIRLINES
========================================================= */

.airline-premium {
    position: relative;

    margin-top: 82px;

    padding-top: 48px;

    border-top:
        1px solid
        rgba(9,45,39,.14);
}


.airline-header {
    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 32px;
}


.airline-eyebrow {
    display: block;

    margin-bottom: 9px;

    color: #9a7a43;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .23em;

    text-transform: uppercase;
}


.airline-header h3 {
    margin: 0;

    color: #17352d;

    font:
        500 clamp(31px, 4vw, 47px)
        / 1
        var(--serif);

    letter-spacing: -.03em;
}


.airline-header h3 em {
    color: var(--gold);

    font-style: italic;
}


.airline-header p {
    max-width: 360px;

    margin: 0;

    color: #7a827d;

    font-size: 10px;

    line-height: 1.7;

    text-align: right;
}


/* =========================================================
   AIRLINE MOVING TRACK
========================================================= */

.airline-track-window {
    position: relative;

    overflow: hidden;

    margin:
        0 -100vw;

    padding:
        10px 100vw 12px;

    border-top:
        1px solid
        rgba(9,45,39,.08);

    border-bottom:
        1px solid
        rgba(9,45,39,.08);

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );
}


.airline-track {
    width: max-content;

    display: flex;

    align-items: center;

    animation:
        airlineMove 32s
        linear infinite;

    will-change: transform;
}


.airline-track-window:hover
.airline-track {
    animation-play-state: paused;
}


.airline-item {
    display: flex;

    align-items: center;

    gap: 17px;

    padding:
        19px 35px;

    color: #405149;

    font:
        500 19px
        var(--serif);

    white-space: nowrap;
}


.airline-symbol {
    color: var(--gold);

    font-size: 13px;
}


.airline-bottom-line {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 18px;
}


.airline-bottom-line span {
    width: 35px;
    height: 1px;

    background:
        rgba(199,166,106,.5);
}


.airline-bottom-line span:first-child {
    width: 55px;
}


.airline-bottom-line small {
    color: #9a9182;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: .2em;
}


@keyframes airlineMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


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

@media (max-width: 1050px) {

    .services-premium {
        padding: 110px 0 100px;
    }


    .services-heading {
        gap: 45px;
    }


    .services-heading h2 {
        font-size: clamp(46px, 6vw, 68px);
    }


    .services-layout {
        grid-template-columns: 1fr 1fr;
    }


    .service-featured {
        min-height: 530px;
    }


    .service-card-premium {
        grid-template-columns: 90px 1fr;

        min-height: 250px;
    }


    .service-card-image {
        width: 90px;
        height: 205px;
    }


    .service-card-content h3 {
        font-size: 22px;
    }

}


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

@media (max-width: 760px) {

    .services-premium {
        padding: 85px 0 75px;
    }


    .services-heading {
        display: block;

        margin-bottom: 40px;
    }


    .services-eyebrow {
        font-size: 8px;

        letter-spacing: .19em;
    }


    .services-eyebrow-line {
        width: 30px;
    }


    .services-heading h2 {
        margin-top: 19px;

        font-size:
            clamp(45px, 13vw, 62px);

        line-height: .93;
    }


    .services-heading-right {
        margin-top: 24px;

        padding-left: 43px;
    }


    .services-heading-index {
        font-size: 8px;
    }


    .services-heading-right p {
        font-size: 12px;
    }


    .services-layout {
        display: flex;

        flex-direction: column;

        gap: 14px;
    }


    .service-featured {
        min-height: 500px;

        border-radius: 20px;
    }


    .service-featured-content {
        padding: 25px;
    }


    .service-number {
        top: 24px;
        left: 25px;
    }


    .service-icon {
        width: 43px;
        height: 43px;

        margin-bottom: 18px;
    }


    .service-featured h3 {
        font-size: 37px;
    }


    .service-featured p {
        font-size: 12px;
    }


    .service-arrow {
        right: 24px;
        bottom: 24px;

        width: 43px;
        height: 43px;
    }


    .service-card-premium {
        min-height: 220px;

        grid-template-columns:
            90px 1fr;

        padding: 17px;

        border-radius: 17px;
    }


    .service-card-top {
        top: 17px;
        left: 17px;
        right: 17px;
    }


    .service-card-image {
        width: 90px;
        height: 185px;

        margin-top: 26px;

        border-radius: 12px;
    }


    .service-card-content {
        padding-top: 34px;
    }


    .service-card-content h3 {
        font-size: 22px;
    }


    .service-card-content p {
        font-size: 11px;
    }


    .service-card-footer {
        padding-top: 9px;

        font-size: 7px;
    }


    .service-card-arrow {
        width: 27px;
        height: 27px;
    }


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

    .airline-premium {
        margin-top: 58px;

        padding-top: 35px;
    }


    .airline-header {
        display: block;

        margin-bottom: 25px;
    }


    .airline-header h3 {
        font-size: 34px;
    }


    .airline-header p {
        margin-top: 15px;

        max-width: 330px;

        text-align: left;

        font-size: 9px;
    }


    .airline-item {
        padding:
            16px 24px;

        font-size: 17px;
    }


    .airline-track-window {
        margin:
            0 -18px;

        padding:
            5px 18px;
    }


    .airline-bottom-line {
        margin-top: 15px;
    }

}


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

@media (max-width: 390px) {

    .services-heading h2 {
        font-size: 45px;
    }


    .service-featured {
        min-height: 465px;
    }


    .service-featured h3 {
        font-size: 34px;
    }


    .service-card-premium {
        grid-template-columns: 78px 1fr;
    }


    .service-card-image {
        width: 78px;
        height: 180px;
    }


    .service-card-content h3 {
        font-size: 20px;
    }


    .service-card-content p {
        font-size: 10px;
    }


    .airline-header h3 {
        font-size: 31px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .service-featured,
    .service-card-premium,
    .service-featured-image img,
    .service-card-image img,
    .service-arrow,
    .service-card-arrow,
    .service-card-icon {
        transition: none;
    }


    .airline-track {
        animation: none;
    }

}

        /* =====================================================


09.08 AIRLINE MARQUEE
        ====================================================== */
        .marquee { margin-top: 55px; overflow: hidden; white-space: nowrap; border-top: 1px solid var(--white-line); border-bottom: 1px solid var(--white-line); }
        .marquee-track { display: flex; width: max-content; animation: marquee 24s linear infinite; }
        .marquee:hover .marquee-track { animation-play-state: paused; }
        .marquee span { padding: 27px 28px; color: #d8e0d9; font: 500 23px var(--serif); }
        .marquee i { color: var(--gold); font-style: normal; }
        .disclaimer { margin: 15px 0 0; color: #9eafa5; font-size: 11px; }

        /* =====================================================
           09.09 ROUTE VISUAL
        ====================================================== */
        .route { position: relative; overflow: hidden; background: #0d362e; }
        .route svg { display: block; width: 100%; height: 220px; overflow: visible; }
        .route-path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 8 10; animation: dash 16s linear infinite; }
        .plane { fill: var(--gold); animation: fly 8s ease-in-out infinite alternate; }
        .route-label { fill: #dfe9e1; font-size: 11px; letter-spacing: .2em; }

        /* =====================================================
           09.10 EDITORIAL UMRAH
        ====================================================== */
        .editorial { display: grid; grid-template-columns: 1fr 1.18fr; min-height: 570px; }
        .editorial .photo { background: url('/assets/umrah.png') center/cover; }
        .editorial .copy { display: flex; flex-direction: column; justify-content: center; padding: 70px 9%; background: var(--sand); }
        .editorial h2 { margin: 15px 0; font: 500 56px/1.02 var(--serif); }
        .editorial p { max-width: 400px; color: #58675e; }

        /* =====================================================


09.12 SPLIT / QUOTE
        ====================================================== */
        .split { display: grid; grid-template-columns: 1fr 1fr; }
        .split .visual { min-height: 520px; background: url('/assets/madinah.png') center/cover; }
        .split .copy { padding: 80px 12%; background: var(--green); color: #fff; }
        .split h2 { margin: 15px 0; font: 500 55px/1.02 var(--serif); }
        .split p { max-width: 500px; color: #c5d1ca; }
        .quote { max-width: 900px; margin: auto; text-align: center; font: 500 clamp(30px,4vw,54px)/1.2 var(--serif); }
        .quote em { color: var(--gold); }

        /* =====================================================


09.13 INNER PAGES / DETAIL
        ====================================================== */
        .pagehero { padding: 180px 0 90px; background: var(--green); color: #fff; }
        .pagehero h1 { max-width: 850px; margin: 15px 0; font: 500 clamp(55px,8vw,100px)/.95 var(--serif); }
        .pagehero p { max-width: 560px; color: #c9d5cf; }
        .detailhero { min-height: 70vh; display: flex; align-items: flex-end; padding: 170px 0 75px; background-position: center; background-size: cover; color: #fff; }
        .detailhero h1 { max-width: 850px; margin: 18px 0; font: 500 clamp(48px,7vw,90px)/.95 var(--serif); }
        .detailhero p { max-width: 540px; color: #e6eee9; }
        .detail { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; padding: 100px 0; }
        .detail h2 { margin: 15px 0 25px; font: 500 48px/1.05 var(--serif); }
        .detail p { color: #53635a; }
        .facts { border-left: 1px solid var(--line); padding-left: 35px; }
        .fact { padding: 18px 0; border-bottom: 1px solid var(--line); }
        .fact small { display: block; color: #6d786f; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
        .fact strong { display: block; margin-top: 4px; font: 500 22px var(--serif); }
        .detail-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 60px; }
        .info-card { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.28); }
        .info-card h3 { margin: 0 0 16px; font: 500 26px var(--serif); }
        .info-card ul { margin: 0; padding-left: 18px; color: #53635a; }
        .notice { margin-top: 35px; padding: 18px 22px; border-left: 3px solid var(--gold); background: #e4ddd0; font-size: 13px; }
        .rich { width: min(800px, calc(100% - 64px)); margin: auto; padding: 90px 0; }
        .rich h2 { margin: 55px 0 18px; font: 500 42px var(--serif); }
        .rich p, .rich li { color: #53635a; }
        .rich .teamgrid { width: min(1100px, calc(100vw - 64px)); margin-left: 50%; transform: translateX(-50%); }
        .teamgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 30px; }
        .teamcard { overflow: hidden; border-radius: 18px; background: #e8e2d5; border: 1px solid var(--line); }
        .teamphoto { aspect-ratio: 4/4.7; background-position: center; background-size: cover; transition: transform .5s ease; }
        .teamcard:hover .teamphoto { transform: scale(1.04); }
        .teamcopy { padding: 22px; }
        .teamcopy h3 { margin: 7px 0 4px; font: 500 25px var(--serif); }
        .teamcopy p { margin: 8px 0 0; color: #65736b; font-size: 13px; }
        .faq { padding: 22px 0; border-top: 1px solid var(--line); }
        .faq summary { cursor: pointer; font: 500 20px var(--serif); }
        .faq p { margin-bottom: 0; }

        /* =====================================================


09.14 FOOTER
        ====================================================== */
        .footer { padding: 70px 0 30px; background: var(--green-deep); color: #d5ded8; }
        .footergrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
        .footer h4 { color: var(--gold); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; }
        .footer a, .footer p { display: block; margin: 11px 0; color: #aabbb1; font-size: 13px; }
        .footer a:hover { color: #fff; }
        .footbottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 60px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: #82988d; font-size: 11px; }

        /* =====================================================
           09.15 ANIMATIONS
        ====================================================== */
        @keyframes marquee { to { transform: translateX(-50%); } }
        @keyframes dash { to { stroke-dashoffset: -500; } }
        @keyframes fly { from { transform: translate(0,20px); } to { transform: translate(58px,-15px); } }
        @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .hero .eyebrow, .hero h1, .hero p, .hero-actions { animation: rise .8s ease both; }
        .hero h1 { animation-delay: .1s; }
        .hero p { animation-delay: .2s; }
        .hero-actions { animation-delay: .3s; }

        /* =====================================================
           09.16 RESPONSIVE
        ====================================================== */
        @media (max-width: 1020px) {
            .links { gap: 15px; }
            .intro { gap: 45px; }
            .servicegrid { grid-template-columns: repeat(2,1fr); }
            .footergrid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 760px) {
            .wrap { width: min(100% - 36px, 1200px); }
            .links { display: none; }
            .hamb { display: block; }
            .hero { min-height: 92vh; padding: 145px 0 65px; }
            .hero h1 { font-size: clamp(52px, 16vw, 70px); }
            .hero-actions { flex-direction: column; align-items: flex-start; }
            .scrollhint { display: none; }
            .section { padding: 78px 0; }
            .sectionhead, .intro, .editorial, .split, .detail { display: grid; grid-template-columns: 1fr; gap: 30px; }
            .sectionhead { margin-bottom: 35px; }
            .intro { gap: 35px; }
            .portrait { min-height: 380px; }
            .servicegrid { grid-template-columns: 1fr; }
            .marquee span { padding-inline: 16px; font-size: 19px; }
            .editorial .photo, .split .visual { min-height: 340px; }
            .editorial .copy, .split .copy { padding: 55px 28px; }
            .editorial h2, .split h2 { font-size: 46px; }
            .packagegrid { grid-template-columns: 1fr; }
            .package:first-child { grid-row: auto; min-height: 370px; }
            .package { min-height: 370px; }
            .detailhero { min-height: 66vh; padding: 145px 0 60px; }
            .detail { padding: 65px 0; }
            .facts { border-top: 1px solid var(--line); border-left: 0; padding: 20px 0 0; }
            .detail-columns { grid-template-columns: 1fr; }
            .rich { width: min(100% - 36px, 800px); padding: 65px 0; }
            .rich .teamgrid { width: 100%; margin-left: 0; transform: none; }
            .teamgrid { grid-template-columns: 1fr; }
            .footergrid { grid-template-columns: 1fr 1fr; gap: 28px; }
            .footbottom { display: block; }
            .footbottom span { display: block; margin-top: 8px; }
            .pagehero { padding: 140px 0 70px; }
        }
        @media (max-width: 440px) {
            .footergrid { grid-template-columns: 1fr; }
            .hero h1 { font-size: 54px; }
            .mobilemenu a { font-size: 28px; }
        }

        /* =====================================================
           09.17 ACCESSIBILITY / REDUCED MOTION
        ====================================================== */
        :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
        }
    
/* =========================================================


09.92 — MOBILE / TABLET FINAL OVERRIDES
========================================================= */

@media (max-width: 900px) {

    .services-heading,
    .travel-planning-heading,
    .how-heading,
    .service-intro-grid,
    .service-detail-heading,
    .about-page-intro-grid,
    .contact-grid {
        gap: 45px;
    }

    .services-heading {
        grid-template-columns: 1fr;
    }

    .service-card-premium {
        grid-template-columns: 90px 1fr;
    }

    .service-card-image {
        width: 90px;
    }

    .home-feature,
    .home-feature-reverse {
        grid-template-columns: 1fr 1fr;
    }

    .home-feature-copy {
        padding: 65px 45px;
    }

    .home-feature-copy h2 {
        font-size: clamp(42px, 5vw, 58px);
    }

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

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

    .how-step,
    .how-step + .how-step {
        min-height: auto;
        padding: 30px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.13);
    }

    .how-step:last-child {
        border-bottom: 0;
    }

    .how-step-icon {
        margin-top: 25px;
    }

    .destination-preview-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 300px 300px;
    }

    .destination-preview-0 {
        grid-row: 1 / span 2;
    }

    .service-detail-grid,
    .visa-process-grid {
        grid-template-columns: 1fr 1fr;
    }

    .service-detail-grid article:nth-child(2),
    .visa-process-grid article:nth-child(2) {
        border-right: 0;
    }

    .service-detail-grid article:nth-child(n+3),
    .visa-process-grid article:nth-child(n+3) {
        border-top: 1px solid rgba(9,45,39,.13);
    }

    .sacred-cities,
    .flight-hotel-grid {
        grid-template-columns: 1fr;
    }

    .sacred-city,
    .sacred-city img {
        min-height: 520px;
    }

    .service-page-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 40px;
    }

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

    .about-principles-grid article,
    .about-principles-grid article + article {
        min-height: auto;
        padding: 28px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(9,45,39,.13);
    }

    .about-principles-grid article:last-child {
        border-bottom: 0;
    }

    .inner-cinematic-hero {
        min-height: 70svh;
        padding: 150px 0 70px;
    }

}


@media (max-width: 760px) {

    .home-feature,
    .home-feature-reverse {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .home-feature-image,
    .home-feature-reverse .home-feature-image {
        order: 1;
        min-height: 420px;
    }

    .home-feature-copy,
    .home-feature-reverse .home-feature-copy {
        order: 2;
        padding: 70px 28px;
    }

    .home-feature-copy h2 {
        font-size: 48px;
    }

    .home-feature-number {
        top: 24px;
        left: 24px;
    }

    .home-feature-location {
        right: 24px;
        bottom: 24px;
    }

    .home-feature-stamp {
        right: 24px;
        bottom: 24px;
        width: 72px;
        height: 72px;
    }

    .home-feature-stamp strong {
        font-size: 16px;
    }

    .travel-planning,
    .home-destinations,
    .how-it-works {
        padding: 85px 0;
    }

    .travel-planning-heading,
    .how-heading {
        display: block;
        margin-bottom: 40px;
    }

    .travel-planning-heading > p,
    .how-heading > p {
        margin-top: 22px;
    }

    .planning-card,
    .planning-card-large {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .planning-card-image {
        min-height: 260px;
        height: 260px;
    }

    .planning-card-copy {
        min-height: 280px;
    }

    .planning-cta {
        display: block;
        padding: 22px;
    }

    .planning-cta > a {
        display: inline-flex;
        margin-top: 18px;
    }

    .home-destinations-heading {
        display: block;
    }

    .home-destinations-heading .premium-outline-btn {
        margin-top: 24px;
    }

    .destination-preview-grid {
        display: flex;
        flex-direction: column;
    }

    .destination-preview,
    .destination-preview-0 {
        min-height: 390px;
    }

    .destination-preview-copy h3 {
        font-size: 36px;
    }

    .journeys-cta {
        min-height: 520px;
    }

    .journeys-cta-number {
        top: -25px;
        right: 18px;
    }

    .home-closing {
        padding: 90px 0 105px;
    }

    .service-detail-grid,
    .visa-process-grid {
        grid-template-columns: 1fr;
    }

    .service-detail-grid article,
    .service-detail-grid article + article,
    .visa-process-grid article,
    .visa-process-grid article + article {
        min-height: auto;
        padding: 27px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(9,45,39,.13);
    }

    .service-detail-grid article:last-child,
    .visa-process-grid article:last-child {
        border-bottom: 0;
    }

    .service-detail-grid h3,
    .visa-process-grid h3 {
        margin-top: 27px;
    }

    .service-intro,
    .service-detail-section,
    .visa-process,
    .flight-hotel-showcase,
    .about-page-intro,
    .about-principles,
    .contact-grid-section {
        padding: 80px 0;
    }

    .service-intro-grid,
    .service-detail-heading,
    .about-page-intro-grid,
    .contact-grid {
        display: block;
    }

    .service-intro-grid > div:last-child,
    .about-page-intro-grid > div:last-child {
        padding-top: 28px;
    }

    .service-detail-heading > p {
        margin-top: 24px;
    }

    .sacred-city,
    .sacred-city img {
        min-height: 470px;
    }

    .service-page-cta {
        padding: 80px 0;
    }

    .visa-note {
        padding: 60px 0;
    }

    .flight-hotel-card-image {
        height: 250px;
    }

    .flight-hotel-card-copy {
        padding: 28px;
    }

    .contact-method {
        grid-template-columns: 34px 1fr 22px;
    }

    .contact-method strong {
        font-size: 18px;
    }

    .inner-cinematic-hero h1 {
        font-size: clamp(49px, 14vw, 70px);
    }

    .inner-cinematic-hero p {
        font-size: 12px;
    }

    .inner-hero-actions {
        gap: 17px;
    }

}


@media (max-width: 440px) {

    .service-featured {
        min-height: 500px;
    }

    .service-featured-content {
        padding: 24px;
    }

    .service-featured h3 {
        font-size: 35px;
    }

    .service-featured .service-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .service-card-premium {
        grid-template-columns: 78px 1fr;
        padding: 15px;
    }

    .service-card-image {
        width: 78px;
        height: 180px;
    }

    .service-card-top {
        left: 15px;
        right: 15px;
        top: 15px;
    }

    .service-card-content h3 {
        font-size: 20px;
    }

    .service-card-content p {
        font-size: 10px;
    }

    .service-card-footer {
        gap: 7px;
    }

    .service-card-whatsapp {
        padding-inline: 9px;
        font-size: 7px;
    }

    .home-feature-copy {
        padding: 60px 22px;
    }

    .home-feature-copy h2 {
        font-size: 43px;
    }

    .home-feature-points span {
        font-size: 7px;
    }

    .premium-gold-btn,
    .premium-outline-btn {
        min-height: 46px;
        padding-inline: 17px;
        font-size: 8px;
    }

    .service-page-cta-actions {
        width: 100%;
    }

    .service-page-cta-actions .premium-gold-btn,
    .service-page-cta-actions .premium-outline-btn {
        width: 100%;
    }

    .visa-note-inner {
        gap: 15px;
    }

}


/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

    .home-feature-image img,
    .planning-card-image img,
    .destination-preview img,
    .journeys-cta-bg,
    .sacred-city img,
    .flight-hotel-card-image img {
        transition: none;
    }

    .premium-gold-btn::after {
        display: none;
    }

}


09.11 PACKAGE CARDS
        ====================================================== */
        .packagegrid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
        .package {
            position: relative; min-height: 330px;
            display: flex; align-items: flex-end;
            overflow: hidden; border-radius: 20px;
            background-size: cover; background-position: center;
            color: #fff;
            isolation: isolate;
        }
        .package:first-child { grid-row: span 2; min-height: 680px; }
        .package::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,31,27,.03) 15%, rgba(6,31,27,.82) 100%); transition: transform .5s ease; }
        .package::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(199,166,106,.06); opacity: 0; transition: opacity .35s ease; }
        .package:hover::before { transform: scale(1.05); }
        .package:hover::after { opacity: 1; }
        .pcopy { position: relative; z-index: 1; padding: 32px; }
        .package h3 { margin: 10px 0; font: 500 35px/1.05 var(--serif); }
        .package span { color: #f0e6d2; font-size: 12px; letter-spacing: .06em; }

        /* =====================================================