/* =========================================================
   TRAVEL09 — FAQ / HELP CENTRE
   ========================================================= */

.fq-page,
.fq-page *{
    box-sizing:border-box;
}

.fq-page{
    --fq-deep:#03131F;
    --fq-navy:#071E32;
    --fq-navy-2:#0B2D46;
    --fq-teal:#087E8B;
    --fq-aqua:#16B8C4;
    --fq-gold:#D6AD60;
    --fq-bg:#F5F8FA;
    --fq-soft:#EEF7F8;
    --fq-text:#173447;
    --fq-muted:#718391;
    --fq-border:#DFE8ED;

    color:var(--fq-text);
    background:#FFFFFF;

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

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.fq-page button,
.fq-page input{
    font:inherit;
}

.fq-shell{
    width:min(
        calc(100% - 80px),
        1440px
    );

    margin:0 auto;
}


/* =========================================================
   SHARED HEADERS
   ========================================================= */

.fq-section-head{
    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(300px,.72fr);

    gap:56px;

    align-items:end;
}

.fq-section-head > div > span,
.fq-final span{
    color:var(--fq-teal);

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

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

.fq-section-head h2,
.fq-final h2{
    margin:8px 0 0;

    color:var(--fq-navy);

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

    font-size:
        clamp(
            38px,
            4vw,
            56px
        );

    font-weight:600;

    line-height:1.06;
    letter-spacing:-.03em;
}

.fq-section-head > p{
    margin:0;

    color:var(--fq-muted);

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


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

.fq-hero{
    position:relative;
    overflow:hidden;

    padding:
        82px 0 48px;

    color:#FFFFFF;

    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(22,184,196,.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 92%,
            rgba(214,173,96,.10),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            var(--fq-deep),
            var(--fq-navy) 58%,
            var(--fq-navy-2)
        );
}

.fq-hero::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.15;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:48px 48px;

    pointer-events:none;
}

.fq-hero .fq-shell{
    position:relative;
    z-index:2;
}

.fq-hero__grid{
    display:grid;

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

    gap:65px;

    align-items:end;
}

.fq-kicker{
    color:#86E0E6;

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

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

.fq-hero h1{
    max-width:950px;

    margin:17px 0 0;

    color:#FFFFFF;

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

    font-size:
        clamp(
            56px,
            5.8vw,
            88px
        );

    font-weight:600;

    line-height:.97;
    letter-spacing:-.05em;
}

.fq-hero h1 span{
    display:block;

    margin-top:7px;

    background:
        linear-gradient(
            90deg,
            #A1EEF1,
            #72DCE3,
            #D7B66D
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
}

.fq-hero__grid > div > p{
    max-width:760px;

    margin-top:22px;

    color:#BDD0DA;

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

.fq-hero aside{
    padding:26px;

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

    border-radius:20px;

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

    backdrop-filter:blur(13px);
}

.fq-hero aside > span{
    color:#79DDE4;

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

    text-transform:uppercase;
}

.fq-hero aside strong{
    display:block;

    margin:10px 0;

    color:#FFFFFF;

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

    font-size:25px;
    font-weight:600;

    line-height:1.25;
}

.fq-hero aside p{
    margin-bottom:0;

    color:#A9BDC8;

    font-size:14px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.fq-search{
    width:100%;

    display:flex;
    align-items:stretch;

    gap:12px;

    margin-top:44px;

    padding:14px;

    border-radius:22px;

    background:#FFFFFF;

    box-shadow:
        0 28px 80px
        rgba(0,0,0,.22);
}

.fq-search label{
    flex:1 1 auto;

    min-width:0;
    min-height:92px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:
        13px 18px;

    border:
        1px solid
        #DCE6EB;

    border-radius:14px;

    background:#FAFCFD;
}

.fq-search label > span{
    display:block;

    margin-bottom:5px;

    color:#728795;

    font-size:12px;
    font-weight:800;
}

.fq-search label > div{
    display:flex;
    align-items:center;

    gap:10px;
}

.fq-search label b{
    color:var(--fq-teal);

    font-size:19px;
}

.fq-search input{
    width:100%;
    min-width:0;

    min-height:38px;

    padding:0;

    border:0;
    outline:0;

    background:transparent;

    color:var(--fq-text);

    font-size:16px;
    font-weight:600;
}

.fq-search input::placeholder{
    color:#7E878C;
    opacity:1;
}

.fq-search button{
    flex:
        0 0
        220px;

    min-height:92px;

    border:0;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--fq-teal),
            var(--fq-aqua)
        );

    color:#FFFFFF;

    cursor:pointer;

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

.fq-quick{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:14px;
}

.fq-quick > span{
    color:#8FA8B6;

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

.fq-quick a{
    padding:7px 11px;

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

    border-radius:999px;

    color:#B9CDD7;

    text-decoration:none;

    font-size:12px;
}


/* =========================================================
   TOPICS
   ========================================================= */

.fq-topics{
    padding:
        84px 0;
}

.fq-topic-grid{
    display:grid;

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

    gap:12px;

    margin-top:32px;
}

.fq-topic-grid a{
    min-height:175px;

    display:grid;

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

    gap:14px;

    padding:22px;

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

    border-radius:17px;

    color:var(--fq-text);

    text-decoration:none;

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #FAFCFD
        );

    transition:.2s ease;
}

.fq-topic-grid a:hover{
    transform:translateY(-3px);

    border-color:#B8DCE2;

    box-shadow:
        0 18px 42px
        rgba(7,30,50,.07);
}

.fq-topic-grid a > span{
    color:#93A5B0;

    font-size:11px;
}

.fq-topic-grid strong{
    color:var(--fq-navy);

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

    font-size:22px;
    font-weight:600;
}

.fq-topic-grid p{
    margin:
        6px 0 0;

    color:var(--fq-muted);

    font-size:12px;
}

.fq-topic-grid b{
    color:var(--fq-teal);
}


/* =========================================================
   FAQ CONTENT
   ========================================================= */

.fq-content{
    padding:
        76px 0;

    background:
        var(--fq-bg);
}

.fq-content__layout{
    display:grid;

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

    gap:42px;

    align-items:start;
}


/* SIDEBAR */

.fq-sidebar{
    position:sticky;

    top:110px;
}

.fq-sidebar > span{
    color:var(--fq-teal);

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

    text-transform:uppercase;
}

.fq-sidebar nav{
    display:grid;

    gap:4px;

    margin-top:12px;
}

.fq-sidebar nav a{
    padding:
        9px 11px;

    border-radius:8px;

    color:#607A89;

    text-decoration:none;

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

    transition:.2s ease;
}

.fq-sidebar nav a:hover,
.fq-sidebar nav a.active{
    background:#E7F4F5;

    color:var(--fq-teal);
}

.fq-sidebar__help{
    margin-top:20px;

    padding:17px;

    border-radius:14px;

    background:
        var(--fq-navy);

    color:#FFFFFF;
}

.fq-sidebar__help strong{
    font-size:13px;
}

.fq-sidebar__help p{
    margin:
        5px 0;

    color:#A8BDC9;

    font-size:11px;
}

.fq-sidebar__help a{
    color:#82E0E6;

    text-decoration:none;

    font-size:11px;
    font-weight:800;
}


/* GROUPS */

.fq-groups{
    min-width:0;
}

.fq-group{
    scroll-margin-top:105px;

    padding:
        30px;

    margin-bottom:18px;

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

    border-radius:22px;

    background:#FFFFFF;
}

.fq-group[hidden]{
    display:none !important;
}

.fq-group > header{
    padding-bottom:20px;

    border-bottom:
        1px solid
        #EDF2F4;
}

.fq-group > header > span{
    color:var(--fq-teal);

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

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

.fq-group > header h2{
    margin:
        7px 0 0;

    color:var(--fq-navy);

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

    font-size:
        clamp(
            30px,
            3vw,
            42px
        );

    font-weight:600;

    line-height:1.08;
}

.fq-group > header p{
    max-width:760px;

    margin:
        8px 0 0;

    color:var(--fq-muted);

    font-size:13px;
}


/* FAQ ITEM */

.fq-list{
    display:grid;

    gap:8px;

    margin-top:18px;
}

.fq-item{
    overflow:hidden;

    border:
        1px solid
        #E2EAEE;

    border-radius:13px;

    background:#FFFFFF;
}

.fq-item[hidden]{
    display:none !important;
}

.fq-item summary{
    min-height:70px;

    display:grid;

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

    gap:12px;

    align-items:center;

    padding:
        14px 16px;

    cursor:pointer;

    list-style:none;
}

.fq-item summary::-webkit-details-marker{
    display:none;
}

.fq-item summary > span{
    color:#97A8B1;

    font-size:10px;
    font-weight:800;
}

.fq-item summary strong{
    color:var(--fq-navy);

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

.fq-item summary b{
    width:28px;
    height:28px;

    display:grid;
    place-items:center;

    border-radius:8px;

    background:
        #EDF7F8;

    color:var(--fq-teal);

    font-size:16px;

    transition:
        transform .2s ease;
}

.fq-item[open] summary b{
    transform:rotate(45deg);
}

.fq-item[open] summary{
    background:#FBFDFD;
}

.fq-answer{
    padding:
        0 58px 18px 56px;
}

.fq-answer p{
    margin:0;

    color:#617A89;

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


/* NO RESULTS */

.fq-no-results{
    padding:
        60px 30px;

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

    border-radius:22px;

    background:#FFFFFF;

    text-align:center;
}

.fq-no-results > div{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    margin:auto;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            var(--fq-teal),
            var(--fq-aqua)
        );

    color:#FFFFFF;

    font-size:22px;
    font-weight:900;
}

.fq-no-results h2{
    color:var(--fq-navy);

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

    font-size:34px;
    font-weight:600;
}

.fq-no-results p{
    color:var(--fq-muted);
}

.fq-no-results a{
    display:inline-block;

    margin-top:12px;

    padding:
        11px 15px;

    border-radius:9px;

    background:
        var(--fq-navy);

    color:#FFFFFF;

    text-decoration:none;

    font-size:13px;
    font-weight:800;
}


/* =========================================================
   SUPPORT
   ========================================================= */

.fq-support{
    padding:
        82px 0;
}

.fq-support__panel{
    display:grid;

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

    gap:54px;

    padding:40px;

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

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #FAFCFD
        );
}

.fq-support__panel > div > span{
    color:var(--fq-teal);

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

    text-transform:uppercase;
}

.fq-support h2{
    margin:
        7px 0;

    color:var(--fq-navy);

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

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

    font-weight:600;

    line-height:1.08;
}

.fq-support__panel > div > p{
    max-width:760px;

    color:var(--fq-muted);
}

.fq-support aside{
    padding:24px;

    border-radius:17px;

    background:
        var(--fq-navy);

    color:#FFFFFF;
}

.fq-support aside strong{
    font-size:14px;
}

.fq-support aside ul{
    margin:
        12px 0;

    padding-left:18px;

    color:#A8BDC9;

    font-size:12px;
}

.fq-support aside a{
    color:#84E0E6;

    text-decoration:none;

    font-size:12px;
    font-weight:800;
}


/* =========================================================
   EXPLORE
   ========================================================= */

.fq-explore{
    padding:
        82px 0;

    background:
        var(--fq-bg);
}

.fq-explore__grid{
    display:grid;

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

    gap:12px;

    margin-top:30px;
}

.fq-explore__grid a{
    min-height:180px;

    display:grid;

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

    gap:14px;

    padding:22px;

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

    border-radius:16px;

    background:#FFFFFF;

    color:var(--fq-text);

    text-decoration:none;
}

.fq-explore__grid a > span{
    color:#94A6B0;

    font-size:11px;
}

.fq-explore__grid strong{
    color:var(--fq-navy);

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

    font-size:22px;
    font-weight:600;
}

.fq-explore__grid p{
    color:var(--fq-muted);

    font-size:12px;
}

.fq-explore__grid b{
    color:var(--fq-teal);
}


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

.fq-final{
    padding:
        82px 0;
}

.fq-final > .fq-shell > div{
    padding:44px;

    border-radius:25px;

    color:#FFFFFF;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(22,184,196,.18),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            var(--fq-deep),
            var(--fq-navy)
        );
}

.fq-final span{
    color:#86E0E6;
}

.fq-final h2{
    max-width:820px;

    color:#FFFFFF;
}

.fq-final p{
    max-width:760px;

    color:#A8BDC9;
}

.fq-final a{
    display:inline-block;

    margin-top:12px;

    padding:
        13px 17px;

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            var(--fq-teal),
            var(--fq-aqua)
        );

    color:#FFFFFF;

    text-decoration:none;

    font-weight:850;
}


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

@media(max-width:1100px){

    .fq-shell{
        width:
            calc(100% - 40px);
    }

    .fq-hero__grid{
        grid-template-columns:1fr;

        gap:32px;
    }

    .fq-hero aside{
        max-width:680px;
    }

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

    .fq-content__layout{
        grid-template-columns:
            210px
            minmax(0,1fr);

        gap:26px;
    }

    .fq-support__panel{
        grid-template-columns:1fr;
    }
}


@media(max-width:860px){

    .fq-section-head{
        grid-template-columns:1fr;

        gap:14px;
    }

    .fq-content__layout{
        grid-template-columns:1fr;
    }

    .fq-sidebar{
        position:static;
    }

    .fq-sidebar nav{
        display:flex;

        overflow-x:auto;

        gap:6px;

        padding-bottom:6px;
    }

    .fq-sidebar nav a{
        flex:none;

        border:
            1px solid
            #DDE7EB;

        background:#FFFFFF;
    }

    .fq-sidebar__help{
        display:none;
    }
}


@media(max-width:720px){

    .fq-shell{
        width:
            calc(100% - 24px);
    }

    .fq-hero{
        padding:
            54px 0 36px;
    }

    .fq-hero h1{
        font-size:
            clamp(
                44px,
                12vw,
                60px
            );
    }

    .fq-search{
        flex-direction:column;

        gap:9px;

        margin-top:30px;

        padding:10px;

        border-radius:18px;
    }

    .fq-search label{
        min-height:76px;

        padding:
            11px 15px;

        border-radius:11px;
    }

    .fq-search input{
        font-size:16px;
    }

    .fq-search button{
        flex:1 1 auto;

        width:100%;

        min-height:52px;
    }

    .fq-topics,
    .fq-content,
    .fq-support,
    .fq-explore,
    .fq-final{
        padding:
            56px 0;
    }

    .fq-topic-grid,
    .fq-explore__grid{
        grid-template-columns:1fr;
    }

    .fq-group{
        padding:
            22px 15px;

        border-radius:17px;
    }

    .fq-item summary{
        grid-template-columns:
            22px
            minmax(0,1fr)
            28px;

        padding:
            14px 10px;
    }

    .fq-item summary strong{
        font-size:13px;
    }

    .fq-answer{
        padding:
            0 42px 17px 42px;
    }

    .fq-support__panel{
        padding:
            27px 21px;
    }

    .fq-final > .fq-shell > div{
        padding:
            30px 22px;
    }
}


@media(max-width:460px){

    .fq-shell{
        width:
            calc(100% - 18px);
    }

    .fq-answer{
        padding:
            0 14px 17px 42px;
    }
}


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

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

    .fq-page *,
    .fq-page *::before,
    .fq-page *::after{
        transition:none !important;
        animation:none !important;
        scroll-behavior:auto !important;
    }
}