:root {
            --navy: #062B4A;
            --navy2: #0A3D66;
            --teal: #0FA3B1;
            --teal2: #0B7F8A;
            --sun: #FFB020;
            --coral: #FF5A5F;
            --violet: #7B61FF;
            --tint: #EAF6F8;
            --ink: #0D2233;
            --muted: #5B6E7C;
            --ease: cubic-bezier(.2, .7, .2, 1);
            /* PHOTOS: swap these for the best matching image of each topic */
            --p1: url('uploads/listing_page_pic14.webp');
            --p2: url('../../images/cruise-holiday-pic2.webp');
            --p3: url('../../images/cruise-holiday-pic3.webp');
            --p4: url('uploads/listing_page_pic2.webp');
            --p5: url('../../images/cruise-holiday-pic5.webp');
            --p6: url('../../images/cruise-holiday-pic6.webp');
        }
        
        * {
            box-sizing: border-box
        }
        
        html {
            scroll-behavior: smooth
        }
        
        body {
            margin: 0;
            background: #fff;
            color: var(--ink);
            font: 400 16px/1.6 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden
        }
        
        h1,
        h2,
        h3 {
            font-family: 'Plus Jakarta Sans', sans-serif;
            margin: 0;
            font-weight: 800;
            line-height: 1.08;
            letter-spacing: -.025em
        }
        
        p {
            margin: 0
        }
        
        a {
            color: inherit;
            text-decoration: none
        }
        
        ul {
            list-style: none;
            margin: 0;
            padding: 0
        }
        
        .script {
            font-family: 'Kaushan Script', cursive;
            font-weight: 400
        }
        
        .wrap {
            max-width: 1320px;
            margin: 0 auto;
            padding: 0 24px;
            position: relative
        }
        
        :focus-visible {
            outline: 3px solid var(--sun);
            outline-offset: 3px
        }
        
        .ic {
            width: 1.2em;
            height: 1.2em;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex: none
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 16px 30px;
            border-radius: 999px;
            border: 0;
            font: 700 1rem 'Inter', sans-serif;
            cursor: pointer;
            transition: transform .25s var(--ease)
        }
        
        .btn:hover {
            transform: translateY(-3px)
        }
        
        .sunb {
            background: linear-gradient(135deg, var(--sun), #FF8A1F);
            color: var(--navy);
            box-shadow: 0 10px 24px rgba(255, 176, 32, .38)
        }
        
        .glass {
            background: rgba(255, 255, 255, .12);
            border: 1.5px solid rgba(255, 255, 255, .5);
            color: #fff
        }
        
        .coral {
            background: linear-gradient(135deg, var(--coral), #FF8A5F);
            color: #fff;
            width: 100%
        }
        
        .pill {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 999px;
            background: var(--tint);
            color: var(--teal2);
            font-weight: 600;
            font-size: .88rem;
            margin-bottom: 16px
        }
        
        /* stacked, rounded sections */
        .sec {
            position: relative;
            border-radius: 48px 48px 0 0;
            margin-top: -48px;
            padding: 116px 0 108px;
            scroll-margin-top: 60px;
            background: #fff
        }
        
        .head {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 40px;
            margin-bottom: 52px
        }
        
        .head h2 {
            font-size: clamp(2.1rem, 4.6vw, 3.6rem);
            max-width: 15ch;
            text-wrap: balance
        }
        
        .head>p {
            max-width: 380px;
            color: var(--muted)
        }
        
        .dark {
            color: #fff
        }
        
        .dark .head>p {
            color: rgba(255, 255, 255, .78)
        }
        
        .dark .pill {
            background: rgba(255, 255, 255, .14);
            color: #fff
        }
        
        /* HERO */
        .hero {
            position: relative;
            overflow: hidden;
            color: #fff;
            padding: 32px 0 120px;
            background: radial-gradient(60% 50% at 82% 18%, rgba(15, 163, 177, .35), transparent), radial-gradient(40% 40% at 8% 92%, rgba(255, 176, 32, .15), transparent), linear-gradient(135deg, rgba(6, 43, 74, .9), rgba(10, 61, 102, .78) 65%, rgba(11, 127, 138, .7)), var(--p2) center/cover no-repeat, var(--navy)
        }
        
        .hero-grid {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 60px;
            align-items: center
        }
        
        .crumb {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 8px 18px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .12);
            font-size: .85rem;
            margin-bottom: 20px
        }
        
        .crumb a {
            color: rgba(255, 255, 255, .75)
        }
        
        .crumb a:hover {
            color: var(--sun)
        }
        
        .crumb b {
            color: var(--sun);
            font-weight: 600
        }
        
        .hero .script {
            display: block;
            color: var(--sun);
            font-size: 1.5rem;
            margin-bottom: 2px
        }
        
        .hero h1 {
            font-size: clamp(2.6rem, 4.8vw, 4.3rem);
            line-height: 1.04
        }
        
        .hero .lead {
            max-width: 520px;
            margin-top: 16px;
            color: rgba(255, 255, 255, .86);
            font-size: 1.1rem
        }
        
        .acts {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 26px
        }
        
        .pts {
            display: grid;
            gap: 12px
        }
        
        .pts li {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 20px;
            border-radius: 20px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .25)
        }
        
        .pts i {
            display: grid;
            place-items: center;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--sun);
            color: var(--navy);
            font-size: 1.1rem;
            flex: none
        }
        
        .pts b {
            display: block;
            font: 700 1.05rem 'Plus Jakarta Sans', sans-serif
        }
        
        .pts span {
            font-size: .9rem;
            color: rgba(255, 255, 255, .8)
        }
        
        /* BASICS: bento */
        .bento {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 18px
        }
        
        .bt {
            position: relative;
            overflow: hidden;
            border-radius: 32px;
            padding: 30px;
            min-height: 240px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end
        }
        
        .bt h3 {
            font-size: 1.6rem;
            margin-bottom: 8px
        }
        
        .bt p {
            font-size: .95rem;
            max-width: 30ch;
            opacity: .88
        }
        
        .bt .stk {
            position: absolute;
            right: 24px;
            top: 24px;
            display: grid;
            place-items: center;
            width: 62px;
            height: 62px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .22);
            font-size: 1.5rem
        }
        
        .b3 .stk,
        .b4 .stk {
            background: rgba(6, 43, 74, .1);
            color: var(--navy)
        }
        
        .b1 {
            grid-column: span 5;
            grid-row: span 2;
            color: #fff;
            background: linear-gradient(transparent 35%, rgba(6, 43, 74, .88)), var(--p1) center/cover
        }
        
        .b1 h3 {
            font-size: 2.3rem
        }
        
        .b2 {
            grid-column: span 4;
            color: #fff;
            background: linear-gradient(135deg, #0FA3B1, #0B7F8A)
        }
        
        .b3 {
            grid-column: span 3;
            background: #FFE9B8
        }
        
        .b4 {
            grid-column: span 3;
            background: #E3DCFF
        }
        
        .b5 {
            grid-column: span 4;
            color: #fff;
            background: var(--navy)
        }

        /* BOARDING: sticky story */
        .board {
            color: #fff;
            background: linear-gradient(180deg, rgba(6, 43, 74, .9), rgba(4, 29, 51, .96)), var(--p3) center/cover no-repeat, var(--navy)
        }
        
        .bd {
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            gap: 80px;
            align-items: start
        }
        
        .bd-l {
            position: sticky;
            top: 90px
        }
        
        .bd-l h2 {
            font-size: clamp(2.1rem, 4.6vw, 3.6rem);
            margin-bottom: 16px
        }
        
        .bd-l>p {
            color: rgba(255, 255, 255, .78);
            max-width: 380px
        }
        
        .bd-img {
            margin-top: 32px;
            height: 280px;
            max-width: 360px;
            border-radius: 999px 999px 32px 32px;
            background: var(--p6) center/cover;
            border: 6px solid rgba(255, 255, 255, .2)
        }
        
        .bs {
            display: grid;
            grid-template-columns: 110px 1fr;
            gap: 18px;
            align-items: center;
            padding: 32px 0;
            border-top: 1px solid rgba(255, 255, 255, .2)
        }
        
        .bs:last-child {
            border-bottom: 1px solid rgba(255, 255, 255, .2)
        }
        
        .bs b {
            font: 800 4.6rem/1 'Plus Jakarta Sans', sans-serif;
            color: transparent;
            -webkit-text-stroke: 2px var(--c)
        }
        
        .bs h3 {
            font-size: 1.6rem;
            margin-bottom: 6px
        }
        
        .bs p {
            color: rgba(255, 255, 255, .78)
        }

        /* COSTS: segmented tabs + editorial rows */
        .seg {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 4px;
            padding: 6px;
            border-radius: 999px;
            background: var(--tint);
            margin-bottom: 34px
        }
        
        .tab {
            padding: 12px 24px;
            border-radius: 999px;
            border: 0;
            background: transparent;
            font: 700 .95rem 'Inter', sans-serif;
            color: var(--navy2);
            cursor: pointer;
            transition: background .2s, color .2s
        }
        
        .tab[aria-selected=true] {
            background: var(--navy);
            color: #fff
        }
        
        .panel {
            display: none
        }
        
        .panel.on {
            display: block
        }
        
        .row {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 30px;
            align-items: baseline;
            padding: 30px 0;
            border-top: 1px solid #DCE7EB
        }
        
        .row:last-child {
            border-bottom: 1px solid #DCE7EB
        }
        
        .row h3 {
            font-size: clamp(1.7rem, 3.4vw, 2.6rem);
            display: flex;
            align-items: center;
            gap: 16px
        }
        
        .row h3::before {
            content: "";
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--c);
            flex: none
        }
        
        .row p {
            color: var(--muted);
            font-size: 1.05rem;
            max-width: 46ch
        }
        
        .up {
            text-align: center;
            margin-top: 40px
        }

        /* WHO: staggered arches on an image background */
        .who {
            color: #fff;
            background: linear-gradient(180deg, rgba(6, 43, 74, .86), rgba(4, 29, 51, .94)), var(--p3) center/cover no-repeat, var(--navy)
        }
        
        .arches {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px
        }
        
        .ar {
            position: relative;
            text-align: center
        }
        
        .ar:nth-child(even) {
            margin-top: 56px
        }
        
        .ar-i {
            aspect-ratio: 3/4;
            border-radius: 999px 999px 32px 32px;
            background: var(--img) center/cover;
            border: 6px solid rgba(255, 255, 255, .2);
            transition: transform .5s var(--ease)
        }
        
        .ar:hover .ar-i {
            transform: translateY(-8px)
        }
        
        .ar-t {
            position: relative;
            z-index: 1;
            display: grid;
            place-items: center;
            width: 58px;
            height: 58px;
            margin: -29px auto 0;
            border-radius: 50%;
            background: var(--sun);
            border: 4px solid var(--navy);
            font-size: 1.3rem;
            color: var(--navy)
        }
        
        .ar h3 {
            margin-top: 14px;
            font-size: 1.4rem;
            color: #fff
        }
        
        .ar p {
            margin-top: 6px;
            color: rgba(255, 255, 255, .8);
            font-size: .95rem
        }
        
        .ar a {
            display: inline-block;
            margin-top: 12px;
            font-weight: 700;
            color: var(--sun)
        }
        
        .ar a:hover {
            text-decoration: underline
        }
        
        .ar a::after {
            content: "";
            position: absolute;
            inset: 0
        }

        /* SEASONS */
        .sz {
            overflow-x: auto;
            padding-bottom: 6px
        }
        
        .sz-in {
            min-width: 820px
        }
        
        .sr,
        .sh {
            display: grid;
            grid-template-columns: 180px repeat(12, 1fr) 120px;
            gap: 6px;
            align-items: center
        }
        
        .sh {
            padding-bottom: 10px;
            font-size: .8rem;
            font-weight: 700;
            color: var(--muted);
            text-align: center
        }
        
        .sr {
            padding: 14px 0;
            border-top: 1px solid #DCE7EB
        }
        
        .sr:last-child {
            border-bottom: 1px solid #DCE7EB
        }
        
        .sr-n {
            font: 800 1.2rem 'Plus Jakarta Sans', sans-serif
        }
        
        .sr-n:hover {
            color: var(--teal2)
        }
        
        .sr i {
            display: block;
            height: 40px;
            border-radius: 12px;
            background: #EDF3F6
        }
        
        .sr i.on {
            background: var(--c)
        }
        
        .sr-t {
            font-size: .9rem;
            font-weight: 600;
            color: var(--navy2);
            text-align: right
        }
        
        .sz-note {
            margin-top: 18px;
            color: var(--muted);
            font-size: .92rem
        }

        /* ENQUIRY */
        .cta {
            color: #fff;
            background: linear-gradient(100deg, rgba(6, 43, 74, .92) 20%, rgba(6, 43, 74, .7)), var(--p5) center/cover no-repeat, var(--navy)
        }
        
        .cta .pill {
            background: rgba(255, 255, 255, .12);
            color: #fff
        }
        
        .cta-grid {
            display: grid;
            grid-template-columns: 1fr 1.05fr;
            gap: 60px;
            align-items: center
        }
        
        .cta-copy h2 {
            font-size: clamp(2.1rem, 4vw, 3.2rem)
        }
        
        .cta-copy p {
            color: rgba(255, 255, 255, .8);
            font-size: 1.05rem;
            margin-top: 18px;
            max-width: 460px
        }
        
        .cta-links {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 24px
        }
        
        .cta-links a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .14);
            border: 1px solid rgba(255, 255, 255, .35);
            color: #fff;
            font-weight: 600;
            font-size: .9rem;
            transition: background .25s
        }
        
        .cta-links a:hover {
            background: var(--teal)
        }
        
        .enquiry-form {
            position: relative;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            padding: 36px 32px 32px;
            border-radius: 28px;
            background: #fff;
            color: var(--ink);
            box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
            overflow: hidden
        }
        
        .enquiry-form::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, var(--teal), var(--sun), var(--coral), var(--violet))
        }
        
        .enquiry-form .full {
            grid-column: 1/-1
        }
        
        .enquiry-form label {
            display: block;
            font-size: .82rem;
            font-weight: 700;
            color: var(--navy2);
            margin-bottom: 6px
        }
        
        .enquiry-form input,
        .enquiry-form select,
        .enquiry-form textarea {
            width: 100%;
            padding: 13px 14px;
            font: inherit;
            font-size: .95rem;
            color: var(--ink);
            background: #F1F8FA;
            border: 2px solid transparent;
            border-radius: 14px;
            transition: border-color .2s, background .2s, box-shadow .2s
        }
        
        .enquiry-form input:focus,
        .enquiry-form select:focus,
        .enquiry-form textarea:focus {
            outline: none;
            background: #fff;
            border-color: var(--teal);
            box-shadow: 0 0 0 4px rgba(15, 163, 177, .18)
        }
        
        .form-msg {
            grid-column: 1/-1;
            display: none;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border-radius: 14px;
            font-size: .92rem;
            font-weight: 600
        }
        
        .form-msg.ok {
            display: flex;
            background: #E4F8EF;
            color: #0B7A52
        }
        
        .form-msg.err {
            display: flex;
            background: #FFE9EA;
            color: #B3262E
        }
        
        @media(max-width:960px) {
            .sec {
                border-radius: 32px 32px 0 0;
                margin-top: -32px;
                padding: 84px 0 76px
            }
            .head {
                flex-direction: column;
                align-items: flex-start;
                gap: 14px
            }
            .hero-grid,
            .cta-grid,
            .bd {
                grid-template-columns: 1fr;
                gap: 40px
            }
            .bento {
                grid-template-columns: 1fr 1fr
            }
            .bt,
            .b1,
            .b2,
            .b3,
            .b4,
            .b5 {
                grid-column: auto;
                grid-row: auto
            }
            .b1 {
                grid-column: 1/-1;
                min-height: 340px
            }
            .bd-l {
                position: static
            }
            .row {
                grid-template-columns: 1fr;
                gap: 10px
            }
            .arches {
                grid-template-columns: 1fr 1fr
            }
        }
        
        @media(max-width:560px) {
            .bento,
            .arches,
            .enquiry-form {
                grid-template-columns: 1fr
            }
            .enquiry-form {
                padding: 32px 20px 24px
            }
            .ar:nth-child(even) {
                margin-top: 0
            }
            .bs {
                grid-template-columns: 76px 1fr
            }
            .bs b {
                font-size: 3.2rem
            }
        }
        
        @media(prefers-reduced-motion:reduce) {
            *,
            *::before,
            *::after {
                animation: none!important;
                transition: none!important;
                scroll-behavior: auto!important
            }
        }