:root{
    --zpe-navy:#044C48;
    --zpe-dark:#041e36;
    --zpe-gold:#d9a62d;
    --zpe-gold-light:#e6b944;
    --zpe-text:#19384e;
    --zpe-muted:#657b89;
    --zpe-line:#dfe6e9;
    --zpe-soft:#f4f6f5;
    --zpe-white:#fff;
}

.zpe-about{
    width:100%;
    overflow:hidden;

    background:#fff;

    color:var(--zpe-text);

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

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

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

.zpe-wrap{
    width:min(1320px,calc(100% - 70px));
    margin:0 auto;
}


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

.zpe-hero{
    position:relative;

    min-height:760px;

    display:flex;
    align-items:flex-end;

    overflow:hidden;

    background:var(--zpe-dark);
}

.zpe-hero-media{
    position:absolute;
    inset:0;
}

.zpe-hero-media img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center 45%;
}

.zpe-hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,25,46,.97) 0%,
            rgba(3,29,52,.87) 38%,
            rgba(3,29,52,.40) 72%,
            rgba(3,29,52,.25) 100%
        );
}

.zpe-hero-inner{
    position:relative;
    z-index:3;

    padding:150px 0 135px;

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

    align-items:end;

    gap:130px;
}

.zpe-hero-left{
    max-width:930px;
}

.zpe-overline{
    display:inline-block;

    margin-bottom:25px;

    color:#e8bb44;

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

    letter-spacing:2.2px;
}

.zpe-hero h1{
    margin:0;

    color:#fff;

    font-family:'Cormorant Garamond',serif;

    font-size:98px;
    line-height:.92;

    letter-spacing:-3px;

    font-weight:600;
}

.zpe-hero h1 em{
    display:block;

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

    font-style:italic;
}

.zpe-hero-left > p{
    max-width:620px;

    margin:30px 0 0;

    color:#d9e4ea;

    font-size:17px;
    line-height:1.85;

    font-weight:500;
}

.zpe-hero-right{
    padding-left:30px;

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

.zpe-hero-right > span{
    display:block;

    margin-bottom:18px;

    color:#becdd6;

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

    letter-spacing:1.4px;

    text-transform:uppercase;
}

.zpe-hero-right a{
    min-height:50px;

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

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

    color:#fff;

    text-decoration:none;

    font-family:'Cormorant Garamond',serif;

    font-size:24px;
}

.zpe-hero-right a i{
    color:var(--zpe-gold);
    font-size:11px;
}

.zpe-hero-bottom{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:5;

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

    background:rgba(3,25,46,.28);

    backdrop-filter:blur(5px);
}

.zpe-hero-bottom .zpe-wrap{
    min-height:72px;

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

    align-items:center;
}

.zpe-hero-bottom span{
    color:#d9e3e9;

    font-size:11px;

    text-align:center;

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

.zpe-hero-bottom span:last-child{
    border-right:0;
}


/* ==========================================================
   COMMON TYPOGRAPHY
========================================================== */

.zpe-label{
    display:inline-block;

    color:#a97711;

    font-size:11px;
    line-height:1.4;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;
}

.zpe-label-light{
    color:#e2ae2d;
}

.zpe-intro-heading h2,
.zpe-story-content h2,
.zpe-section-head h2,
.zpe-philosophy-title h2,
.zpe-final h2{
    margin:0;

    color:var(--zpe-navy);

    font-family:'Cormorant Garamond',serif;

    font-size:64px;
    line-height:1.02;

    letter-spacing:-1.5px;

    font-weight:600;
}

.zpe-intro-heading h2 em,
.zpe-story-content h2 em,
.zpe-section-head h2 em,
.zpe-philosophy-title h2 em,
.zpe-final h2 em{
    display:block;

    color:#b98317;

    font-style:italic;
}


/* ==========================================================
   INTRO
========================================================== */

.zpe-intro{
    padding:135px 0 145px;

    background:#fff;
}

.zpe-intro-grid{
    display:grid;

    grid-template-columns:70px minmax(0,1.1fr) minmax(0,.75fr);

    gap:75px;

    align-items:start;
}

.zpe-intro-index{
    padding-top:7px;

    color:#b98a25;

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

.zpe-intro-heading h2{
    margin-top:15px;

    max-width:680px;
}

.zpe-intro-copy p{
    margin:0;

    color:var(--zpe-muted);

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

.zpe-intro-copy .zpe-lead{
    margin-bottom:22px;

    color:var(--zpe-text);

    font-size:18px;
    line-height:1.8;

    font-weight:600;
}


/* ==========================================================
   STORY
========================================================== */

.zpe-story{
    padding:0 0 150px;

    background:#fff;
}

.zpe-story-layout{
    position:relative;

    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);

    gap:110px;

    align-items:center;
}

.zpe-story-main{
    height:720px;

    overflow:hidden;

    background:#eef2f3;
}

.zpe-story-main img,
.zpe-story-small img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.zpe-story-content{
    padding-right:30px;
}

.zpe-story-content h2{
    margin-top:16px;
}

.zpe-story-content > p{
    margin:25px 0 0;

    color:var(--zpe-muted);

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

.zpe-story-content > p + p{
    margin-top:16px;
}

.zpe-quote{
    margin-top:38px;
    padding-top:30px;

    display:grid;
    grid-template-columns:45px 1fr;

    gap:15px;

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

.zpe-quote > span{
    color:var(--zpe-gold);

    font-family:'Cormorant Garamond',serif;

    font-size:72px;
    line-height:.7;
}

.zpe-quote p{
    margin:0;

    color:var(--zpe-navy);

    font-family:'Cormorant Garamond',serif;

    font-size:27px;
    line-height:1.35;

    font-style:italic;
}

.zpe-story-small{
    position:absolute;

    left:42%;
    bottom:-65px;

    width:290px;
    height:340px;

    border:12px solid #fff;

    box-shadow:0 24px 55px rgba(5,40,69,.13);
}


/* ==========================================================
   SIGNATURE
========================================================== */

.zpe-signature{
    padding:150px 0 140px;

    background:#f3f5f4;
}

.zpe-section-head{
    margin-bottom:65px;

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

    gap:80px;

    align-items:end;
}

.zpe-section-head h2{
    max-width:720px;

    margin-top:14px;
}

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

    color:var(--zpe-muted);

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

.zpe-signature-grid{
    display:grid;

    grid-template-columns:1.05fr 1.05fr .9fr;

    gap:16px;
}

.zpe-signature-item{
    position:relative;

    min-height:620px;

    overflow:hidden;

    background:var(--zpe-dark);

    text-decoration:none;
}

.zpe-item-bg,
.zpe-item-overlay{
    position:absolute;
    inset:0;
}

.zpe-item-bg img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .8s ease;
}

.zpe-signature-item:hover .zpe-item-bg img{
    transform:scale(1.045);
}

.zpe-item-overlay{
    background:
        linear-gradient(
            180deg,
            rgba(3,27,48,.05) 10%,
            rgba(3,27,48,.86) 90%
        );
}

.zpe-item-top{
    position:absolute;

    top:28px;
    right:28px;

    z-index:2;

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

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

.zpe-item-bottom{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:2;

    padding:38px;
}

.zpe-item-bottom > span{
    color:#e1ad2b;

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

    letter-spacing:1.5px;
}

.zpe-item-bottom h3{
    margin:10px 0 22px;

    color:#fff;

    font-family:'Cormorant Garamond',serif;

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

.zpe-item-bottom > div{
    padding-top:18px;

    display:flex;
    justify-content:space-between;

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

    color:#fff;

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


/* ==========================================================
   PHILOSOPHY
========================================================== */

.zpe-philosophy{
    padding:150px 0;

    background:var(--zpe-navy);
}

.zpe-philosophy-grid{
    display:grid;

    grid-template-columns:.75fr 1.25fr;

    gap:120px;
}

.zpe-philosophy-title h2{
    margin-top:15px;

    color:#fff;
}

.zpe-philosophy-list{
    border-top:1px solid rgba(255,255,255,.18);
}

.zpe-philosophy-list article{
    padding:37px 0;

    display:grid;
    grid-template-columns:65px 1fr;

    gap:20px;

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

.zpe-philosophy-list article > span{
    color:#e0ac2d;

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

.zpe-philosophy-list h3{
    margin:0 0 8px;

    color:#fff;

    font-family:'Cormorant Garamond',serif;

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

.zpe-philosophy-list p{
    max-width:650px;

    margin:0;

    color:#c8d6df;

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


/* ==========================================================
   MOMENT
========================================================== */

.zpe-moment{
    position:relative;

    min-height:760px;

    display:flex;
    align-items:center;

    overflow:hidden;
}

.zpe-moment-image,
.zpe-moment-overlay{
    position:absolute;
    inset:0;
}

.zpe-moment-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;
}

.zpe-moment-overlay{
    background:
        linear-gradient(
            90deg,
            rgba(3,28,51,.88),
            rgba(3,28,51,.42),
            rgba(3,28,51,.14)
        );
}

.zpe-moment-content{
    position:relative;
    z-index:3;
}

.zpe-moment-content > span{
    color:#e4b135;

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

    letter-spacing:2px;
}

.zpe-moment h2{
    max-width:800px;

    margin:22px 0;

    color:#fff;

    font-family:'Cormorant Garamond',serif;

    font-size:76px;
    line-height:.98;

    font-weight:600;
}

.zpe-moment h2 em{
    display:block;

    color:#e5b543;

    font-style:italic;
}

.zpe-moment a{
    margin-top:22px;

    display:inline-flex;
    align-items:center;

    gap:12px;

    color:#fff;

    text-decoration:none;

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


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

.zpe-final{
    padding:135px 0;

    background:#fff;
}

.zpe-final-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 430px;

    gap:110px;

    align-items:center;
}

.zpe-final h2{
    margin-top:15px;
}

.zpe-final-right p{
    margin:0;

    color:var(--zpe-muted);

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

.zpe-final-links{
    margin-top:28px;

    display:flex;
    flex-direction:column;

    gap:17px;
}

.zpe-contact-primary{
    width:max-content;

    min-height:52px;

    padding:0 23px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:var(--zpe-gold);

    color:var(--zpe-navy);

    border-radius:5px;

    text-decoration:none;

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

.zpe-contact-secondary{
    width:max-content;

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--zpe-navy);

    text-decoration:none;

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


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

@media(max-width:1100px){

    .zpe-hero h1{
        font-size:82px;
    }

    .zpe-intro-grid{
        grid-template-columns:50px 1fr;
    }

    .zpe-intro-copy{
        grid-column:2;
    }

    .zpe-story-layout{
        gap:60px;
    }

    .zpe-signature-grid{
        grid-template-columns:1fr 1fr;
    }

    .zpe-item-transfer{
        grid-column:1/-1;
        min-height:500px;
    }
}


@media(max-width:850px){

    .zpe-wrap{
        width:calc(100% - 36px);
    }

    .zpe-hero{
        min-height:660px;
    }

    .zpe-hero-inner{
        grid-template-columns:1fr;

        padding:100px 0 130px;
    }

    .zpe-hero-right{
        display:none;
    }

    .zpe-hero-bottom .zpe-wrap{
        grid-template-columns:1fr 1fr;
    }

    .zpe-hero-bottom span{
        padding:12px;
    }

    .zpe-intro-grid,
    .zpe-story-layout,
    .zpe-philosophy-grid,
    .zpe-final-grid{
        grid-template-columns:1fr;
    }

    .zpe-intro-index,
    .zpe-intro-copy{
        grid-column:auto;
    }

    .zpe-story-small{
        display:none;
    }

    .zpe-section-head{
        grid-template-columns:1fr;
        gap:22px;
    }

    .zpe-signature-grid{
        grid-template-columns:1fr;
    }

    .zpe-item-transfer{
        grid-column:auto;
    }
}


@media(max-width:650px){

    .zpe-hero h1{
        font-size:58px;
        line-height:.98;
    }

    .zpe-hero-left > p{
        font-size:15px;
    }

    .zpe-hero-bottom{
        display:none;
    }

    .zpe-intro,
    .zpe-signature,
    .zpe-philosophy,
    .zpe-final{
        padding-top:90px;
        padding-bottom:90px;
    }

    .zpe-story{
        padding-bottom:90px;
    }

    .zpe-intro-heading h2,
    .zpe-story-content h2,
    .zpe-section-head h2,
    .zpe-philosophy-title h2,
    .zpe-final h2{
        font-size:46px;
    }

    .zpe-story-main{
        height:520px;
    }

    .zpe-signature-item{
        min-height:500px;
    }

    .zpe-moment{
        min-height:620px;
    }

    .zpe-moment h2{
        font-size:53px;
    }

}


/* ==========================================================
   ZAN PEARL MODERN DESIGN OVERRIDE
   Zanzibar-first / modern / clean
========================================================== */

.zpe-about,
.zpe-about h1,
.zpe-about h2,
.zpe-about h3,
.zpe-about h4,
.zpe-about h5,
.zpe-about h6,
.zpe-about p,
.zpe-about a,
.zpe-about span{
    font-family:'Manrope',Arial,sans-serif !important;
}

.zpe-about em{
    font-family:'Manrope',Arial,sans-serif !important;
    font-style:normal !important;
}


/* remove old-fashioned heading appearance */

.zpe-intro-heading h2,
.zpe-story-content h2,
.zpe-section-head h2,
.zpe-philosophy-title h2,
.zpe-final h2,
.zpe-moment h2{
    font-family:'Manrope',Arial,sans-serif !important;

    font-weight:800 !important;

    letter-spacing:-2px !important;
}

.zpe-intro-heading h2 em,
.zpe-story-content h2 em,
.zpe-section-head h2 em,
.zpe-philosophy-title h2 em,
.zpe-final h2 em,
.zpe-moment h2 em{
    font-family:'Manrope',Arial,sans-serif !important;

    font-style:normal !important;

    font-weight:800 !important;
}


/* ==========================================================
   MODERN EXPERIENCES
========================================================== */

.zpm-experiences{
    padding:110px 0 120px !important;

    background:#f7f9fa !important;
}

.zpm-exp-heading{
    margin-bottom:48px;

    display:grid;

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

    align-items:end;

    gap:80px;
}

.zpm-eyebrow{
    display:block;

    margin-bottom:14px;

    color:#d69f1f;

    font-size:11px;

    line-height:1.4;

    font-weight:800;

    letter-spacing:1.8px;
}

.zpm-exp-heading h2{
    max-width:730px;

    margin:0;

    color:#044C48;

    font-family:'Manrope',Arial,sans-serif !important;

    font-size:48px;

    line-height:1.12;

    letter-spacing:-2px;

    font-weight:800;
}

.zpm-exp-heading h2 span{
    display:block;

    color:#496778;

    font-weight:600;
}

.zpm-exp-heading > p{
    margin:0;

    color:#657b89;

    font-size:14px;

    line-height:1.85;

    font-weight:500;
}


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

.zpm-exp-layout{
    display:grid;

    grid-template-columns:1.25fr .75fr;

    gap:18px;
}

.zpm-exp-side{
    display:grid;

    grid-template-rows:1fr 1fr;

    gap:18px;
}


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

.zpm-exp-card{
    position:relative;

    display:block;

    overflow:hidden;

    border-radius:20px;

    background:#044C48;

    text-decoration:none;

    box-shadow:
        0 12px 35px
        rgba(6,43,79,.08);
}

.zpm-exp-main{
    min-height:650px;
}

.zpm-exp-small{
    min-height:316px;
}

.zpm-exp-card > img{
    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .55s ease,
        filter .55s ease;
}

.zpm-exp-card:hover > img{
    transform:scale(1.035);
}


/* ==========================================================
   IMAGE OVERLAY
========================================================== */

.zpm-exp-shade{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(3,28,50,.03) 20%,
            rgba(3,28,50,.18) 48%,
            rgba(3,28,50,.90) 100%
        );
}


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

.zpm-exp-content{
    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:3;

    padding:36px;
}

.zpm-exp-main .zpm-exp-content{
    max-width:610px;

    padding:48px;
}

.zpm-exp-tag{
    display:inline-flex;

    min-height:30px;

    padding:0 12px;

    align-items:center;

    border-radius:100px;

    background:#dda928;

    color:#044C48;

    font-size:9px;

    font-weight:800;

    letter-spacing:1px;
}

.zpm-exp-content h3{
    margin:15px 0 0;

    color:#fff;

    font-family:'Manrope',Arial,sans-serif !important;

    font-size:27px;

    line-height:1.25;

    letter-spacing:-.7px;

    font-weight:800;
}

.zpm-exp-main .zpm-exp-content h3{
    max-width:530px;

    font-size:43px;

    line-height:1.13;

    letter-spacing:-1.5px;
}

.zpm-exp-content p{
    max-width:520px;

    margin:15px 0 0;

    color:#e0e8ed;

    font-size:14px;

    line-height:1.75;

    font-weight:500;
}


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

.zpm-exp-button{
    width:max-content;

    min-height:43px;

    margin-top:23px;

    padding:0 17px;

    display:inline-flex;

    align-items:center;

    gap:11px;

    border-radius:100px;

    background:#fff;

    color:#044C48;

    font-size:11px;

    font-weight:800;

    transition:.25s ease;
}

.zpm-exp-button i{
    color:#d39b16;
}

.zpm-exp-card:hover .zpm-exp-button{
    background:#dda928;
}


/* ==========================================================
   MODERNIZE OTHER EXISTING SECTIONS
========================================================== */

.zpe-story-main,
.zpe-story-small{
    border-radius:22px !important;
}

.zpe-philosophy{
    background:#044C48 !important;
}

.zpe-philosophy-list h3{
    font-family:'Manrope',Arial,sans-serif !important;

    font-size:22px !important;

    font-weight:700 !important;
}

.zpe-moment h2{
    font-size:62px !important;

    line-height:1.08 !important;
}

.zpe-final h2{
    font-size:52px !important;

    line-height:1.1 !important;
}


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

@media(max-width:900px){

    .zpm-exp-heading{
        grid-template-columns:1fr;

        gap:20px;
    }

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

    .zpm-exp-side{
        grid-template-columns:1fr 1fr;

        grid-template-rows:auto;
    }

}


@media(max-width:650px){

    .zpm-experiences{
        padding:75px 0 80px !important;
    }

    .zpm-exp-heading{
        margin-bottom:30px;
    }

    .zpm-exp-heading h2{
        font-size:34px;

        letter-spacing:-1.2px;
    }

    .zpm-exp-layout,
    .zpm-exp-side{
        display:grid;

        grid-template-columns:1fr;
    }

    .zpm-exp-main{
        min-height:500px;
    }

    .zpm-exp-small{
        min-height:390px;
    }

    .zpm-exp-main .zpm-exp-content,
    .zpm-exp-content{
        padding:25px;
    }

    .zpm-exp-main .zpm-exp-content h3{
        font-size:32px;
    }

    .zpm-exp-content h3{
        font-size:24px;
    }

}


/* ==========================================================
   ZANZIBAR-FIRST PRIORITY
========================================================== */

/* Tours remains dominant */

.zpm-exp-main{
    min-height:680px !important;
}

/* Transfer gets stronger visual presence */

.zpm-exp-side .zpm-exp-small:first-child{
    min-height:380px !important;
}

/* Safari stays secondary */

.zpm-exp-side .zpm-exp-small:last-child{
    min-height:250px !important;
}

.zpm-exp-side{
    grid-template-rows:1.35fr .85fr !important;
}


/* Safari card visually quieter */

.zpm-exp-side .zpm-exp-small:last-child .zpm-exp-content h3{
    font-size:22px !important;
}

.zpm-exp-side .zpm-exp-small:last-child .zpm-exp-tag{
    background:rgba(255,255,255,.90) !important;
    color:#044C48 !important;
}


/* Main page tone: Zanzibar / transport first */

.zpe-philosophy-list article:nth-child(3) h3::after{
    content:" & transfers";
}