/* =========================================================
   CUSTOM MOBILE LOGIN + PHONE BUTTONS
   Isolated from theme styles
   ========================================================= */

.custom-mobile-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin: 0;
    padding: 8px 0;
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* Remove any accidental spacing from the two custom links */
.custom-mobile-actions>.custom-login-btn,
.custom-mobile-actions>.custom-phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
    flex: 0 0 42px;

    border: 0;
    border-radius: 50%;

    background: #F98225;
    color: #FFFFFF;
    text-decoration: none;

    line-height: 1;
    vertical-align: middle;
}

/* Icons */
.custom-mobile-actions>.custom-login-btn>i,
.custom-mobile-actions>.custom-phone-btn>i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    margin: 0;
    padding: 0;

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

    color: #FFFFFF;
}

/* Hover / focus */
.custom-mobile-actions>.custom-login-btn:hover,
.custom-mobile-actions>.custom-phone-btn:hover {
    background: #F98225;
    color: #FFFFFF;
    text-decoration: none;
}

.custom-mobile-actions>.custom-login-btn:focus,
.custom-mobile-actions>.custom-phone-btn:focus {
    background: #F98225;
    color: #FFFFFF;
    text-decoration: none;
    outline: none;
}


/* =========================================================
   LARGE PHONES
   ========================================================= */

@media (max-width: 575px) {

    .custom-mobile-actions {
        gap: 10px;
        padding: 6px 0;
    }

    .custom-mobile-actions>.custom-login-btn,
    .custom-mobile-actions>.custom-phone-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        flex-basis: 38px;
    }

    .custom-mobile-actions>.custom-login-btn>i,
    .custom-mobile-actions>.custom-phone-btn>i {
        width: 15px;
        height: 15px;
        font-size: 15px;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .custom-mobile-actions {
        gap: 9px;
        padding: 5px 0;
    }

    .custom-mobile-actions>.custom-login-btn,
    .custom-mobile-actions>.custom-phone-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        flex-basis: 36px;
    }

    .custom-mobile-actions>.custom-login-btn>i,
    .custom-mobile-actions>.custom-phone-btn>i {
        width: 14px;
        height: 14px;
        font-size: 14px;
    }
}


/* =========================================================
   TABLETS
   iPad Mini, iPad, Surface and similar devices
   ========================================================= */

@media (min-width: 576px) and (max-width: 991px) {

    .custom-mobile-actions {
        gap: 12px;
        padding: 9px 0;
    }

    .custom-mobile-actions>.custom-login-btn,
    .custom-mobile-actions>.custom-phone-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        flex-basis: 42px;
    }

    .custom-mobile-actions>.custom-login-btn>i,
    .custom-mobile-actions>.custom-phone-btn>i {
        width: 17px;
        height: 17px;
        font-size: 17px;
    }
}


/* =========================================================
   VERY NARROW DEVICES
   ========================================================= */

@media (max-width: 320px) {

    .custom-mobile-actions {
        gap: 5px;
        padding: 4px 0;
    }

    .custom-mobile-actions>.custom-login-btn,
    .custom-mobile-actions>.custom-phone-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        flex-basis: 34px;
    }

    .custom-mobile-actions>.custom-login-btn>i,
    .custom-mobile-actions>.custom-phone-btn>i {
        width: 13px;
        height: 13px;
        font-size: 13px;
    }

}

/* =====================================================
   CUSTOM NAVIGATION SPACING
   ===================================================== */

/* ---------- LAPTOP / DESKTOP ---------- */
@media (min-width: 992px) {

    /* User icon + Let's Talk button */
    .nav-right {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        /* Reduce/increase this value */
    }

    /* Prevent template CSS from adding extra spacing */
    .nav-right .custom-mobile-actions {
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-right .nav-btn {
        margin: 0 !important;
        padding: 0 !important;
    }

}


/* ---------- MOBILE ---------- */
@media (max-width: 991px) {

    /* User + Phone */
    .mobile-menu-right .custom-mobile-actions {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* User and phone buttons */
    .mobile-menu-right .custom-login-btn,
    .mobile-menu-right .custom-phone-btn {
        margin: 0 !important;
    }

    /* User/phone group + hamburger */
    .mobile-menu-right {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Prevent old template navbar toggler margins */
    .mobile-menu-right .navbar-toggler {
        margin: 0 !important;
    }

}

/* Custom hero title */
.hero-section.hs-2 .hero-content .hero-title {
    font-size: 42px !important;
}

/* Make "Travel Better." slightly bigger */
.hero-section.hs-2 .hero-content .hero-title span {
    font-size: 48px !important;
}

/* Rome-Based Travel Agency Badge */
.hero-section.hs-2 .hero-agency-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    margin-bottom: 12px;

    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);

    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero-section.hs-2 .agency-badge-icon {
    font-size: 13px;
}

/* Mobile */
@media (max-width: 767px) {
    .hero-section.hs-2 .hero-agency-badge {
        font-size: 10px;
        padding: 6px 12px;
        gap: 6px;
        margin-bottom: 9px;
    }

    .hero-section.hs-2 .agency-badge-icon {
        font-size: 11px;
    }
}




.ttk-strip {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    padding: clamp(12px, 1.8vw, 18px) 0;
    margin: 0;
    background: linear-gradient(112deg,
            var(--theme-color2) 0%,
            color-mix(in srgb, var(--theme-color2) 78%, black) 55%,
            var(--theme-color2) 100%);
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -1px 0 rgba(0, 0, 0, .35);
    z-index: 1;
    box-sizing: border-box;
}

.ttk-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-35deg,
            rgba(255, 255, 255, .035) 0px,
            rgba(255, 255, 255, .035) 1px,
            transparent 1px,
            transparent 26px);
    pointer-events: none;
}

.ttk-strip::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: -8px;
    height: 8px;
    background: color-mix(in srgb, var(--theme-color2) 60%, black);
    border-radius: 0 0 10px 10px;
    z-index: -1;
    opacity: .55;
}

.ttk-strip__viewport {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
}

.ttk-strip__viewport:hover .ttk-strip__track {
    animation-play-state: paused;
}

.ttk-strip__track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: ttk-strip-scroll 34s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ttk-strip__track {
        animation-play-state: paused;
    }
}

@keyframes ttk-strip-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.ttk-strip__item {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 12px);
    margin: 0;
    padding: 3px clamp(14px, 1.8vw, 22px) 3px 0;
    transition: transform .35s ease;
}

.ttk-strip__item:hover {
    transform: translateY(-2px);
}

.ttk-strip__item::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    margin-left: clamp(14px, 1.8vw, 22px);
    background: var(--theme-color, #E8A33D);
    border-radius: 2px;
    transform: rotate(45deg);
    box-shadow:
        -10px 0 0 -2px rgba(255, 255, 255, .45),
        10px 0 0 -2px rgba(255, 255, 255, .45);
    flex-shrink: 0;
}

.ttk-strip__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(26px, 2.6vw, 32px);
    height: clamp(26px, 2.6vw, 32px);
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: box-shadow .35s ease, transform .35s ease;
}

.ttk-strip__item:hover .ttk-strip__badge {
    transform: rotate(-8deg) scale(1.06);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5),
        0 0 18px color-mix(in srgb, 70%, transparent);
}

.ttk-strip__glyph {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: block;
    margin: 0;
    padding: 0;
    font-size: clamp(11px, 1.2vw, 14px);
    line-height: 1;
    color: #ffffff;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .2));
    transition: color .35s ease;
}

.ttk-strip__item:hover .ttk-strip__glyph {
    color: var(--theme-color, #E8A33D);
}

.ttk-strip__label {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
    font-size: clamp(14px, 1.6vw, 22px);
    font-weight: 600;
    letter-spacing: .2px;
    color: #ffffff;
    white-space: nowrap;
    line-height: 1;
    transition: color .35s ease;
}

.ttk-strip__item:hover .ttk-strip__label {
    color: white;
}

@media (max-width: 767px) {
    .ttk-strip__item::after {
        box-shadow: none;
    }
}

@media (max-width: 480px) {
    .ttk-strip__badge {
        display: none;
    }
}


/* ------------Cards Section----------------------------------------------  */
/* ....................................................................... */

.rtx-content {
    --rtx-navy: #122C34;
    --rtx-coral: #F98225;
    --rtx-coral-dark: #C8532C;
    --rtx-gold: #C9962B;
    --rtx-ink: #16232B;
    --rtx-muted: #6E7F82;
    --rtx-line: #E7E0D2;

    padding: 18px 20px 20px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-sizing: border-box;
}

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

.rtx-content__title {
    display: block;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.3;
    color: var(--rtx-ink);
    margin: 0 0 10px;
    position: relative;
    padding-bottom: 10px;
}

.rtx-content__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--rtx-coral);
}

.rtx-content__title a {
    color: inherit;
    text-decoration: none;
}

.rtx-content__title a:hover {
    color: var(--rtx-coral-dark);
}

.rtx-content__location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--rtx-muted);
    font-size: 11px;
    margin: 0 0 12px;
}

.rtx-content__location i {
    color: var(--rtx-navy);
    font-size: 12px;
    flex-shrink: 0;
}

.rtx-content__rate {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.rtx-content__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F98225;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 50px;
}

.rtx-content__badge i {
    color: var(--rtx-line);
    font-size: 10px;
}

.rtx-content__review {
    font-size: 12px;
    color: var(--rtx-muted);
}

.rtx-content__divider {
    height: 1px;
    background: var(--rtx-line);
    margin: 0 0 14px;
}

.rtx-content__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.rtx-content__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: "Fraunces", Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--rtx-navy);
    flex-shrink: 0;
}

.rtx-content__price span {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    color: var(--rtx-muted);
}

.rtx-content__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    height: 42px;
    min-width: 132px;
    max-width: 145px;

    padding: 4px 5px 4px 17px;

    border-radius: 50px;
    background: var(--rtx-coral);
    color: #fff;

    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;
    flex-shrink: 1;

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

.rtx-content__btn span {
    display: block;
    white-space: nowrap;
}

.rtx-content__btn i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
    color: var(--rtx-navy);
    border-radius: 50%;
    font-size: 13px;
    transition: opacity 0.0005s ease, transform 0.35s ease;
}

/* Hide the right arrow normally */
.rtx-content__btn .hover-arrow {
    display: none;
}

/* On hover: hide ↗ and show → */
.rtx-content__btn:hover .normal-arrow {
    display: none;
}

.rtx-content__btn:hover .hover-arrow {
    display: flex;
}

.rtx-content__btn:hover {
    background: var(--rtx-navy);
    color: #fff;
    transform: translateX(2px);
}

.rtx-content__btn:hover i {
    color: var(--rtx-navy);

}

/* ---------------- Responsive tuning ---------------- */

@media (max-width: 575px) {
    .rtx-content {
        padding: 16px 16px 18px;
    }

    .rtx-content__title {
        font-size: 15px;
    }
}



/* =========================================================
   FLIGHT DETAILS PAGE 
   ========================================================= */

/* ---------- 0. Tokens + page wrapper ---------- */
.fd-page {
    --fd-orange: #ee6f12;
    --fd-orange-dark: #cf5d08;
    --fd-orange-soft: #fde9d8;
    --fd-orange-text: #b4520a;
    --fd-ink: #10283b;
    --fd-muted: #5b6a78;
    --fd-cream: #faf5ef;
    --fd-sand: #f3e8db;
    --fd-line: #e6dccf;
    --fd-white: #ffffff;

    background: var(--fd-cream);
    color: var(--fd-ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding: 48px 0 80px;
}

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

/* :where() keeps this reset below the component rules further down (it used to cancel their
   margins and padding, e.g. the intro text spacing and the padding of the "at a glance" box) */
.fd-page :where(h1, h2, h3, p, ul, dl, dd) {
    margin: 0;
    padding: 0;
}

.fd-page ul {
    list-style: none;
}

.fd-page a {
    text-decoration: none;
}

.fd-page :focus-visible {
    outline: 3px solid var(--fd-orange);
    outline-offset: 3px;
}

.fd-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.fd-page .fd-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--fd-ink);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* ---------- 1. Destination intro ---------- */
.fd-intro {
    padding-bottom: 36px;
}

.fd-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    font-size: 14px;
    color: var(--fd-muted);
}

.fd-page .fd-crumbs a {
    color: var(--fd-muted);
}

.fd-page .fd-crumbs a:hover {
    color: var(--fd-orange-text);
    text-decoration: underline;
}

.fd-crumbs i {
    font-size: 10px;
}

.fd-crumbs span[aria-current] {
    color: var(--fd-ink);
    font-weight: 600;
}

.fd-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
}

.fd-page .fd-h1 {
    font-size: clamp(2.2rem, 4.6vw, 3.5rem);
}

.fd-page .fd-h1::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 16px;
    border-radius: 4px;
    background: var(--fd-orange);
}

.fd-lead {
    max-width: 54ch;
    margin: 20px 0 18px;
    color: var(--fd-muted);
    font-size: 1.05rem;
}

.fd-places {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.fd-glance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--fd-white);
    border-radius: 24px;
    padding: 22px 8px;
    box-shadow: 0 14px 34px -22px rgba(16, 40, 59, .35);
}

.fd-glance div {
    padding: 0 16px;
    border-left: 1px solid var(--fd-line);
}

.fd-glance div:first-child {
    border-left: 0;
}

.fd-glance dt {
    font-size: 13px;
    color: var(--fd-muted);
}

.fd-glance dd {
    margin-top: 4px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
}

.fd-glance dd i {
    margin-right: 8px;
    font-size: .7em;
    color: var(--fd-orange);
    vertical-align: .1em;
}

.fd-glance small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: var(--fd-muted);
    margin-top: 2px;
}

/* ---------- 2. Filter bar ---------- */
.fd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 16px 0;
    margin-bottom: 28px;
    border-top: 1px solid var(--fd-line);
    border-bottom: 1px solid var(--fd-line);
}

.fd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fd-page .fd-chip {
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--fd-line);
    background: var(--fd-white);
    color: var(--fd-ink);
    padding: 10px 18px;
    border-radius: 999px;
    font: 600 14px/1 'Inter', sans-serif;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.fd-page .fd-chip:hover {
    border-color: var(--fd-ink);
}

.fd-page .fd-chip[aria-pressed="true"] {
    background: var(--fd-ink);
    border-color: var(--fd-ink);
    color: #fff;
}

.fd-count {
    font-size: 14px;
    color: var(--fd-muted);
}

/* ---------- 3. Route tickets ---------- */
.fd-list {
    display: grid;
    gap: 22px;
}

.fd-ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    background: var(--fd-white);
    border-radius: 26px;
    box-shadow: 0 16px 36px -24px rgba(16, 40, 59, .4);
}

.fd-ticket[hidden] {
    display: none;
}

.fd-ticket-main {
    padding: 28px 34px 26px;
}

.fd-ticket-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fd-airline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
}

.fd-airline-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fd-sand);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.fd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fd-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.fd-tag--direct {
    background: #e4f1ed;
    color: #1b5a4b;
}

.fd-tag--stop {
    background: var(--fd-sand);
    color: #6b4a25;
}

.fd-path {
    display: grid;
    grid-template-columns: auto minmax(90px, 1fr) auto;
    align-items: center;
    gap: 22px;
    margin: 26px 0 22px;
}

.fd-code {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: .02em;
}

.fd-city {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: var(--fd-muted);
}

.fd-time {
    display: block;
    margin-top: 2px;
    font-weight: 600;
    font-size: 1.05rem;
}

.fd-stop--end {
    text-align: right;
}

.fd-leg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.fd-dur,
.fd-stops {
    font-size: 13px;
    color: var(--fd-muted);
}

.fd-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}

.fd-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px dashed #d8c9b6;
}

.fd-track i {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fd-white);
    color: var(--fd-orange);
    font-size: 15px;
}

.fd-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 14px;
    color: var(--fd-muted);
}

.fd-perks li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fd-perks i {
    color: var(--fd-orange);
}

/* stub (price + button) with ticket perforation */
.fd-ticket-stub {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 28px;
    background: #fff8f1;
    border-left: 2px dashed var(--fd-line);
    border-radius: 0 26px 26px 0;
}

.fd-ticket-stub::before,
.fd-ticket-stub::after {
    content: "";
    position: absolute;
    left: -13px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fd-cream);
}

.fd-ticket-stub::before {
    top: -12px;
}

.fd-ticket-stub::after {
    bottom: -12px;
}

.fd-price-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fd-from {
    font-size: 14px;
    color: var(--fd-muted);
}

.fd-price {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 2.3rem;
    line-height: 1.1;
}

.fd-per {
    font-size: 13px;
    color: var(--fd-muted);
    margin-bottom: 14px;
}

.fd-page .fd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 6px 6px 22px;
    border-radius: 999px;
    background: var(--fd-orange);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    transition: background .25s ease;
}

.fd-page .fd-btn:hover {
    background: #10283b;
    color: #fff;
}

.fd-btn:hover .fd-btn-icon i {
    transform: rotate(0deg);
}

.fd-btn-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--fd-ink);
    font-size: 14px;
}

.fd-btn-icon i {
    transform: rotate(-45deg);
    transition: transform .3s ease;
}

.fd-empty {
    padding: 40px 20px;
    text-align: center;
    background: var(--fd-white);
    border-radius: 26px;
    color: var(--fd-muted);
}

.fd-empty[hidden] {
    display: none;
}

.fd-empty .fd-chip {
    margin-top: 14px;
}

.fd-note,
.fd-page .fd-note {
    margin-top: 20px;
    font-size: 14px;
    color: var(--fd-muted);
}

/* ---------- 4. Why book with us ---------- */
.fd-why {
    padding: 80px 0 16px;
}

.fd-page .fd-h2 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.fd-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 36px;
}

.fd-why-item {
    padding: 4px 28px;
    border-left: 1px solid var(--fd-line);
}

.fd-why-item:first-child {
    padding-left: 0;
    border-left: 0;
}

.fd-why-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--fd-sand);
    color: var(--fd-orange-text);
    font-size: 20px;
}

.fd-page .fd-h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.fd-why-item p {
    color: var(--fd-muted);
    font-size: 15px;
    max-width: 32ch;
}

/* ---------- 5. FAQ ---------- */
.fd-faq {
    padding: 72px 0 8px;
}

.fd-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 48px;
}

.fd-faq-intro p {
    margin-top: 14px;
    color: var(--fd-muted);
    max-width: 38ch;
}

.fd-faq-list details {
    border-bottom: 1px solid var(--fd-line);
}

.fd-faq-list details:first-child {
    border-top: 1px solid var(--fd-line);
}

.fd-faq-list summary {
    position: relative;
    display: block;
    padding: 20px 44px 20px 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.fd-faq-list summary::-webkit-details-marker {
    display: none;
}

.fd-faq-list summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fd-sand);
    font-size: 18px;
    line-height: 1;
}

.fd-faq-list details[open] summary::after {
    content: "\2212";
    background: var(--fd-orange);
    color: #fff;
}

.fd-faq-list details p {
    padding: 0 44px 22px 0;
    color: var(--fd-muted);
    max-width: 62ch;
}

/* ---------- 6. Help band ---------- */
.fd-help {
    padding-top: 72px;
}

.fd-help-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    padding: 44px 48px;
    border-radius: 32px;
    background: var(--fd-ink);
    color: #fff;
}

.fd-page .fd-help-box .fd-title {
    color: #fff;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.fd-help-box p {
    margin-top: 10px;
    max-width: 46ch;
    color: #c9d3dc;
}

.fd-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fd-page .fd-btn-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .45);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    transition: background .2s, color .2s;
}

.fd-page .fd-btn-line:hover {
    background: #fff;
    color: var(--fd-ink);
}

.fd-page .fd-btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    background: var(--fd-orange);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    transition: background .2s;
}

.fd-page .fd-btn-solid:hover {
    background: var(--fd-orange-dark);
    color: #fff;
}

/* ---------- 7. Responsive ---------- */
@media (max-width: 991px) {
    .fd-page {
        padding: 36px 0 64px;
    }

    .fd-intro-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: start;
    }

    .fd-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 36px;
    }

    .fd-why-item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .fd-faq-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .fd-ticket {
        grid-template-columns: 1fr;
    }

    .fd-ticket-main {
        padding: 22px 20px 20px;
    }

    .fd-ticket-stub {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 14px 16px;
        padding: 22px 20px;
        border-left: 0;
        border-top: 2px dashed var(--fd-line);
        border-radius: 0 0 26px 26px;
    }

    .fd-ticket-stub::before {
        top: -13px;
        left: -12px;
    }

    .fd-ticket-stub::after {
        top: -13px;
        bottom: auto;
        left: auto;
        right: -12px;
    }

    .fd-price-box {
        display: flex;
        flex-direction: column;
    }

    .fd-per {
        margin-bottom: 0;
    }

    .fd-code {
        font-size: 1.9rem;
    }

    .fd-path {
        gap: 12px;
    }

    .fd-help-box {
        padding: 32px 24px;
        border-radius: 26px;
    }

    .fd-glance dd {
        font-size: 1.25rem;
    }

    .fd-glance div {
        padding: 0 12px;
    }
}

@media (max-width: 575px) {
    .fd-why-grid {
        grid-template-columns: 1fr;
    }

    .fd-why-item,
    .fd-why-item:nth-child(3) {
        padding: 0 0 0 0;
        border-left: 0;
    }

    .fd-glance {
        grid-template-columns: 1fr;
        row-gap: 14px;
        padding: 20px 8px;
    }

    .fd-glance div {
        border-left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .fd-glance dd {
        margin-top: 0;
        text-align: right;
    }

    .fd-ticket-stub .fd-btn {
        width: 100%;
    }

    .fd-help-actions,
    .fd-help-actions a {
        width: 100%;
        justify-content: center;
    }
}

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

    .fd-page *,
    .fd-page *::before,
    .fd-page *::after {
        transition: none !important;
    }
}

/* ===== Clear boundary around each ticket ===== */
.fd-page .fd-list {
    gap: 24px;
}

.fd-page .fd-ticket {
    border: 1px solid #e3d5c3;
    box-shadow: 0 12px 30px -20px rgba(16, 40, 59, .3);
}

.fd-page .fd-ticket-main {
    border-radius: 24px 0 0 24px;
}

/* the perforation notches sit on the ticket's outer edge */
.fd-page .fd-ticket-stub::before {
    top: -13px;
}

.fd-page .fd-ticket-stub::after {
    bottom: -13px;
}

/* wide screens: two tickets per row instead of one ticket stretched across the page */
@media (min-width: 1200px) {
    .fd-page .fd-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fd-page .fd-ticket {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .fd-page .fd-ticket-main {
        padding: 24px 26px 22px;
    }

    .fd-page .fd-path {
        gap: 16px;
        margin: 22px 0 18px;
    }

    .fd-page .fd-code {
        font-size: 2rem;
    }

    .fd-page .fd-ticket-stub {
        padding: 24px 20px;
    }

    .fd-page .fd-price {
        font-size: 2rem;
    }

    .fd-page .fd-ticket-stub .fd-btn {
        width: 100%;
        gap: 10px;
        padding-left: 18px;
        font-size: 14px;
    }
}

/* phones: the notches move to the left and right sides */
@media (max-width: 767px) {
    .fd-page .fd-ticket-main {
        border-radius: 24px 24px 0 0;
    }

    .fd-page .fd-ticket-stub::before,
    .fd-page .fd-ticket-stub::after {
        top: -13px;
        bottom: auto;
    }

    .fd-page .fd-ticket-stub::before {
        left: -13px;
    }

    .fd-page .fd-ticket-stub::after {
        right: -13px;
        left: auto;
    }
}


/* =========================================================
   SINGLE FLIGHT DETAILS PAGE 
   ========================================================= */

/* ---------- 0. Tokens + page wrapper ---------- */
.sfd-page {
    --sfd-orange: #ee6f12;
    --sfd-blue: #10283b;
    /* hover colour for buttons (same navy as the rest of the page) */
    --sfd-orange-soft: #fde9d8;
    --sfd-orange-text: #b4520a;
    --sfd-ink: #10283b;
    --sfd-ink-2: #1c3a52;
    --sfd-body: #2b4054;
    --sfd-muted: #556676;
    --sfd-cream: #faf5ef;
    --sfd-sand: #f3e8db;
    --sfd-line: #e6dccf;
    --sfd-white: #ffffff;
    --sfd-green: #17614d;
    --sfd-red: #a83b22;
    --sfd-shadow: 0 22px 44px -30px rgba(16, 40, 59, .5);

    position: relative;
    background: var(--sfd-cream);
    color: var(--sfd-ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding: 44px 0 80px;
    overflow-x: clip;
}

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

/* :where() keeps this reset at zero strength, so the margins written
   in the classes below always win (this was the spacing bug). */
.sfd-page :where(h1, h2, h3, h4, p, ul, ol, dl, dd) {
    margin: 0;
    padding: 0;
}

.sfd-page :where(ul, ol) {
    list-style: none;
}

.sfd-page a {
    text-decoration: none;
}

.sfd-page img {
    display: block;
    max-width: 100%;
}

.sfd-page :focus-visible {
    outline: 3px solid var(--sfd-orange);
    outline-offset: 3px;
}

.sfd-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sfd-page .sfd-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--sfd-ink);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.sfd-page .sfd-h1 {
    font-size: clamp(1.9rem, 4vw, 3rem);
}

.sfd-page .sfd-h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}

.sfd-page .sfd-h3 {
    font-size: 1.1rem;
}

/* ---------- 1. Breadcrumb ---------- */
.sfd-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 22px;
    font-size: 14px;
    color: var(--sfd-muted);
}

.sfd-page .sfd-crumbs a {
    color: var(--sfd-muted);
}

.sfd-page .sfd-crumbs a:hover {
    color: var(--sfd-orange-text);
    text-decoration: underline;
}

.sfd-crumbs i {
    font-size: 10px;
}

.sfd-crumbs span[aria-current] {
    color: var(--sfd-ink);
    font-weight: 600;
}

/* ---------- 2. Hero: photo + boarding pass ---------- */
.sfd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    background: var(--sfd-white);
    border: 1px solid var(--sfd-line);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--sfd-shadow);
}

.sfd-hero-photo {
    position: relative;
    min-height: 320px;
    background: var(--sfd-ink-2);
}

.sfd-hero-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sfd-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 40, 59, 0) 55%, rgba(16, 40, 59, .55));
}

.sfd-hero-badge {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    font-size: 13px;
    font-weight: 700;
}

.sfd-hero-caption {
    position: absolute;
    z-index: 1;
    left: 22px;
    right: 22px;
    bottom: 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.sfd-hero-ticket {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: clamp(22px, 3.4vw, 38px);
}

.sfd-hero-ticket::before,
.sfd-hero-ticket::after {
    content: "";
    position: absolute;
    left: -14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sfd-cream);
    border: 1px solid var(--sfd-line);
}

.sfd-hero-ticket::before {
    top: -14px;
}

.sfd-hero-ticket::after {
    bottom: -14px;
}

.sfd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sfd-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.sfd-tag--direct {
    background: #e4f1ed;
    color: var(--sfd-green);
}

.sfd-tag--soft {
    background: var(--sfd-orange-soft);
    color: var(--sfd-orange-text);
}

.sfd-page .sfd-h1::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 14px;
    border-radius: 4px;
    background: var(--sfd-orange);
}

.sfd-hero-sub {
    max-width: 48ch;
    font-size: 15px;
    color: var(--sfd-muted);
}

.sfd-path {
    display: grid;
    grid-template-columns: auto minmax(60px, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 0;
    border-top: 2px dashed var(--sfd-line);
    border-bottom: 2px dashed var(--sfd-line);
}

.sfd-code {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: .02em;
}

.sfd-city {
    display: block;
    margin-top: 6px;
    color: var(--sfd-muted);
    font-size: 14px;
}

.sfd-time {
    display: block;
    margin-top: 2px;
    font-weight: 600;
    font-size: 1.05rem;
}

.sfd-stop--end {
    text-align: right;
}

.sfd-leg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: center;
    font-size: 13px;
    color: var(--sfd-muted);
}

.sfd-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}

.sfd-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px dashed #d8c9b6;
}

.sfd-track i {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sfd-white);
    color: var(--sfd-orange);
    font-size: 15px;
}

.sfd-hero-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
}

.sfd-hero-price small {
    display: block;
    font-size: 13px;
    color: var(--sfd-muted);
    line-height: 1.3;
}

.sfd-hero-price strong {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 2.2rem;
    line-height: 1.1;
}

/* ---------- 3. Buttons (arrow turns from up-right to right, colour to navy) ---------- */
.sfd-page .sfd-btn,
.sfd-page .sfd-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 6px 6px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--sfd-orange);
    color: #fff;
    font: 600 16px/1.2 'Inter', sans-serif;
    cursor: pointer;
    transition: background .25s ease;
}

.sfd-page .sfd-btn:hover,
.sfd-page .sfd-btn:focus-visible,
.sfd-page .sfd-bar-btn:hover,
.sfd-page .sfd-bar-btn:focus-visible {
    background: var(--sfd-blue);
    color: #fff;
}

.sfd-page .sfd-btn--block {
    display: flex;
    width: 100%;
}

.sfd-btn-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--sfd-ink);
    font-size: 14px;
}

.sfd-btn-icon i {
    transform: rotate(-45deg);
    transition: transform .3s ease;
}

.sfd-btn:hover .sfd-btn-icon i,
.sfd-btn:focus-visible .sfd-btn-icon i,
.sfd-bar-btn:hover .sfd-btn-icon i,
.sfd-bar-btn:focus-visible .sfd-btn-icon i,
.sfd-dest:hover .sfd-btn-icon i,
.sfd-dest:focus-visible .sfd-btn-icon i {
    transform: rotate(0deg);
}

.sfd-page .sfd-btn-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding: 13px 20px;
    border-radius: 999px;
    border: 1.5px solid #25a55a;
    color: #17703c;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    transition: background .2s, color .2s;
}

.sfd-page .sfd-btn-wa:hover {
    background: #25a55a;
    color: #fff;
}

/* ---------- 4. Quick facts (separate tiles, clear gap from the hero) ---------- */
.sfd-facts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 36px;
}

.sfd-fact {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px 18px;
    background: var(--sfd-white);
    border: 1px solid var(--sfd-line);
    border-radius: 20px;
    box-shadow: 0 14px 30px -24px rgba(16, 40, 59, .5);
}

.sfd-fact-ic {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--sfd-orange-soft);
    color: var(--sfd-orange-text);
    font-size: 17px;
}

.sfd-fact-text {
    min-width: 0;
}

.sfd-fact-label {
    display: block;
    font-size: 12.5px;
    color: var(--sfd-muted);
    line-height: 1.3;
}

.sfd-fact-value {
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    color: var(--sfd-ink);
}

/* ---------- 5. In-page navigation ---------- */
.sfd-nav {
    display: flex;
    gap: 8px;
    margin: 32px 0 30px;
    padding: 2px 2px 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.sfd-page .sfd-nav a {
    flex: 0 0 auto;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--sfd-line);
    background: var(--sfd-white);
    color: var(--sfd-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s;
}

.sfd-page .sfd-nav a:hover {
    background: var(--sfd-ink);
    border-color: var(--sfd-ink);
    color: #fff;
}

/* ---------- 6. Two-column layout + panels ---------- */
.sfd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}

.sfd-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    min-width: 0;
}

.sfd-panel {
    min-width: 0;
    scroll-margin-top: 100px;
    padding: clamp(20px, 3vw, 32px);
    background: var(--sfd-white);
    border: 1px solid var(--sfd-line);
    border-radius: 26px;
    box-shadow: var(--sfd-shadow);
}

.sfd-panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}

.sfd-panel-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sfd-orange-soft);
    color: var(--sfd-orange-text);
    font-size: 17px;
}

.sfd-hint {
    margin: 0 0 22px 56px;
    font-size: 14px;
    color: var(--sfd-muted);
}

/* ---------- 7. Dates ---------- */
.sfd-dates {
    display: flex;
    gap: 10px;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px 4px 12px;
    margin: 0 -4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.sfd-page .sfd-date {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    min-width: 104px;
    padding: 12px 14px;
    border: 1.5px solid var(--sfd-line);
    border-radius: 18px;
    background: var(--sfd-white);
    color: var(--sfd-ink);
    font-family: 'Inter', sans-serif;
    text-align: left;
    line-height: 1.3;
    cursor: pointer;
    scroll-snap-align: start;
    transition: background .2s, border-color .2s, color .2s;
}

.sfd-page .sfd-date:hover {
    border-color: var(--sfd-ink);
}

.sfd-page .sfd-date[aria-pressed="true"] {
    background: var(--sfd-ink);
    border-color: var(--sfd-ink);
    color: #fff;
}

.sfd-date-day {
    display: block;
    font-size: 13px;
    opacity: .8;
}

.sfd-date-num {
    display: block;
    font-weight: 600;
    font-size: 15px;
}

.sfd-date-price {
    display: block;
    margin-top: 6px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.2rem;
}

.sfd-date-low {
    display: block;
    min-height: 18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sfd-orange-text);
}

.sfd-page .sfd-date[aria-pressed="true"] .sfd-date-low {
    color: #ffc79c;
}

/* ---------- 8. Fares (strong, readable text in every state) ---------- */
.sfd-fares {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.sfd-page .sfd-fare {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    color: var(--sfd-ink);
    cursor: pointer;
}

.sfd-fare input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.sfd-fare-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px 20px;
    border: 2px solid var(--sfd-line);
    border-radius: 22px;
    background: var(--sfd-white);
    opacity: 1;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.sfd-fare:hover .sfd-fare-body {
    border-color: #cdb99f;
}

.sfd-fare input:checked+.sfd-fare-body {
    border-color: var(--sfd-orange);
    background: #fff4e9;
    box-shadow: 0 0 0 4px rgba(238, 111, 18, .18);
}

.sfd-fare input:focus-visible+.sfd-fare-body {
    outline: 3px solid var(--sfd-ink);
    outline-offset: 3px;
}

.sfd-fare-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
}

.sfd-fare-dot {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 2px solid #b9a88f;
    border-radius: 50%;
    background: #fff;
    transition: background .2s, border-color .2s;
}

.sfd-fare input:checked+.sfd-fare-body .sfd-fare-dot {
    background: var(--sfd-orange);
    border-color: var(--sfd-orange);
}

.sfd-fare input:checked+.sfd-fare-body .sfd-fare-dot::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sfd-page .sfd-fare-name {
    font-weight: 700;
    font-size: 17px;
    color: var(--sfd-ink);
}

.sfd-page .sfd-fare-pop {
    margin-left: auto;
    padding: 6px 10px;
    border-radius: 950px;
    background: var(--sfd-ink);
    color: #fff;
    font-size: 9px;
    font-weight: 400;
    align-items: center;
    white-space: nowrap;
}

.sfd-page .sfd-fare-price {
    display: block;
    margin: 14px 0 2px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--sfd-ink);
}

.sfd-page .sfd-fare-per {
    display: block;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--sfd-body);
}

.sfd-page .sfd-fare-list {
    display: grid;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(16, 40, 59, .14);
    font-size: 15px;
    font-weight: 500;
    color: var(--sfd-ink);
}

.sfd-page .sfd-fare-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--sfd-ink);
    line-height: 1.45;
}

.sfd-fare-list i {
    flex: 0 0 14px;
    width: 14px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--sfd-green);
}

.sfd-page .sfd-fare-list .sfd-no i {
    color: var(--sfd-red);
}

/* ---------- 9. Itinerary timeline ---------- */
.sfd-leg-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sfd-ink);
}

.sfd-leg-title::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--sfd-line);
}

.sfd-timeline+.sfd-leg-title {
    margin-top: 28px;
}

.sfd-timeline li {
    display: grid;
    grid-template-columns: 62px 22px minmax(0, 1fr);
    gap: 0 12px;
    padding-bottom: 20px;
}

.sfd-timeline li:last-child {
    padding-bottom: 0;
}

.sfd-tl-time {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.5;
}

.sfd-tl-rail {
    position: relative;
}

.sfd-tl-rail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--sfd-orange);
    box-shadow: 0 0 0 4px var(--sfd-orange-soft);
}

.sfd-timeline li:not(:last-child) .sfd-tl-rail::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 26px;
    bottom: -20px;
    border-left: 2px dashed #d8c9b6;
}

.sfd-tl-text strong {
    display: block;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
}

.sfd-tl-text small {
    display: block;
    font-size: 13px;
    color: var(--sfd-muted);
}

.sfd-note {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--sfd-cream);
    font-size: 14px;
    color: var(--sfd-body);
}

.sfd-note i {
    margin-top: 4px;
    color: var(--sfd-orange);
}

/* ---------- 10. Included / not included (two equal halves, centre divider) ---------- */
.sfd-inc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border: 1px solid var(--sfd-line);
    border-radius: 22px;
    overflow: hidden;
}

.sfd-inc-col+.sfd-inc-col {
    border-left: 1px solid var(--sfd-line);
}

.sfd-page .sfd-inc-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.sfd-inc-yes .sfd-inc-title {
    background: #e4f1ed;
    color: var(--sfd-green);
}

.sfd-inc-no .sfd-inc-title {
    background: #fbe9e3;
    color: var(--sfd-red);
}

.sfd-inc-col li {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 14px 22px;
    border-top: 1px solid var(--sfd-line);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sfd-ink);
}

.sfd-inc-mark {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
}

.sfd-inc-yes .sfd-inc-mark {
    background: #e4f1ed;
    color: var(--sfd-green);
}

.sfd-inc-no .sfd-inc-mark {
    background: #fbe9e3;
    color: var(--sfd-red);
}

/* ---------- 11. Airports ---------- */
.sfd-airports {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border: 1px solid var(--sfd-line);
    border-radius: 20px;
    overflow: hidden;
}

.sfd-airport {
    min-width: 0;
    padding: 22px 24px;
    background: #fffdfa;
}

.sfd-airport+.sfd-airport {
    border-left: 2px dashed var(--sfd-line);
}

.sfd-airport-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sfd-orange-text);
}

.sfd-airport h3 {
    margin: 4px 0 12px;
}

.sfd-airport ul {
    display: grid;
    gap: 10px;
    font-size: 14px;
    color: var(--sfd-body);
}

.sfd-airport li {
    display: flex;
    gap: 10px;
}

.sfd-airport li i {
    flex: 0 0 14px;
    width: 14px;
    margin-top: 5px;
    color: var(--sfd-orange);
}

/* ---------- 12. About the route ---------- */
.sfd-places {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
}

.sfd-place {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--sfd-cream);
    border: 1px solid var(--sfd-line);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.sfd-place i {
    color: var(--sfd-orange);
}

.sfd-about-text {
    max-width: 68ch;
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--sfd-body);
}

.sfd-perks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sfd-perk {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--sfd-cream);
}

.sfd-perk i {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sfd-white);
    color: var(--sfd-orange-text);
    font-size: 16px;
}

.sfd-perk strong {
    display: block;
    font-size: 15px;
    line-height: 1.3;
    color: var(--sfd-ink);
}

.sfd-perk span {
    display: block;
    font-size: 13px;
    color: var(--sfd-muted);
    line-height: 1.3;
}

/* ---------- 13. FAQ (one open at a time, handled by the script) ---------- */
.sfd-acc details {
    border-bottom: 1px solid var(--sfd-line);
}

.sfd-acc details:first-child {
    border-top: 1px solid var(--sfd-line);
}

.sfd-acc summary {
    position: relative;
    display: block;
    padding: 18px 44px 18px 0;
    font-weight: 600;
    color: var(--sfd-ink);
    cursor: pointer;
    list-style: none;
}

.sfd-acc summary::-webkit-details-marker {
    display: none;
}

.sfd-acc summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sfd-sand);
    font-size: 18px;
    line-height: 1;
}

.sfd-acc details[open] summary::after {
    content: "\2212";
    background: var(--sfd-orange);
    color: #fff;
}

.sfd-acc details p {
    max-width: 66ch;
    padding: 0 44px 20px 0;
    color: var(--sfd-body);
}

/* ---------- 14. Sidebar ---------- */
.sfd-side {
    position: sticky;
    top: 110px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-width: 0;
}

.sfd-book {
    min-width: 0;
    padding: 28px 26px;
    background: var(--sfd-white);
    border: 1px solid var(--sfd-line);
    border-radius: 28px;
    box-shadow: var(--sfd-shadow);
}

.sfd-book-route {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.4rem;
}

.sfd-book-route i {
    font-size: 14px;
    color: var(--sfd-orange);
}

.sfd-book-sub {
    margin: 2px 0 20px;
    font-size: 14px;
    color: var(--sfd-muted);
}

.sfd-field {
    display: block;
    min-width: 0;
    margin: 0 0 14px;
}

.sfd-field>span {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sfd-ink);
}

.sfd-page .sfd-input {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--sfd-line);
    border-radius: 14px;
    background: #fff;
    color: var(--sfd-ink);
    font: 500 15px/1 'Inter', sans-serif;
    box-shadow: none;
    transition: border-color .2s;
}

.sfd-page .sfd-input:focus {
    border-color: var(--sfd-ink);
    outline: none;
}

.sfd-page .sfd-input:focus-visible {
    outline: 3px solid var(--sfd-orange);
    outline-offset: 2px;
}

.sfd-row2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sfd-seg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 999px;
    background: var(--sfd-sand);
}

.sfd-seg label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.sfd-seg input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.sfd-seg span {
    display: block;
    padding: 9px 10px;
    border-radius: 999px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--sfd-ink);
    transition: background .2s, color .2s;
}

.sfd-seg input:checked+span {
    background: var(--sfd-ink);
    color: #fff;
}

.sfd-seg input:focus-visible+span {
    outline: 3px solid var(--sfd-orange);
    outline-offset: 2px;
}

.sfd-sum {
    display: grid;
    gap: 8px;
    margin: 20px 0 20px;
    padding-top: 18px;
    border-top: 2px dashed var(--sfd-line);
    font-size: 14px;
}

.sfd-sum div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.sfd-sum dt {
    min-width: 0;
    color: var(--sfd-muted);
    font-weight: 400;
}

.sfd-sum dd {
    flex: 0 0 auto;
    font-weight: 600;
    text-align: right;
}

.sfd-sum .sfd-total {
    align-items: baseline;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--sfd-line);
}

.sfd-sum .sfd-total dt {
    color: var(--sfd-ink);
    font-weight: 600;
    font-size: 1rem;
}

.sfd-sum .sfd-total dd {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.9rem;
    line-height: 1.1;
}

.sfd-assure {
    display: grid;
    gap: 10px;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px dashed var(--sfd-line);
    font-size: 13.5px;
    color: var(--sfd-body);
}

.sfd-assure li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.sfd-assure i {
    margin-top: 4px;
    color: var(--sfd-green);
}

.sfd-help {
    min-width: 0;
    padding: 24px 24px 22px;
    border-radius: 26px;
    background: var(--sfd-ink);
    color: #fff;
}

.sfd-page .sfd-help .sfd-title {
    color: #fff;
    font-size: 1.2rem;
}

.sfd-help p {
    margin: 8px 0 18px;
    font-size: 14px;
    color: #d3dce4;
}

.sfd-help ul {
    display: grid;
    gap: 14px;
}

.sfd-help li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-size: 14px;
}

.sfd-help li i {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sfd-orange);
    font-size: 14px;
}

.sfd-page .sfd-help a {
    min-width: 0;
    color: #fff;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sfd-page .sfd-help a:hover {
    text-decoration: underline;
}

/* ---------- 15. Explore other destinations (photo cards) ---------- */
.sfd-explore {
    margin-top: 72px;
}

.sfd-explore-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px 20px;
}

.sfd-explore-sub {
    margin-top: 6px;
    font-size: 15px;
    color: var(--sfd-muted);
}

/* room above the cards for their hover lift; no fade or shadow around them */
.sfd-marquee {
    margin-top: 16px;
    padding: 10px 0 24px;
    overflow: hidden;
}

.sfd-marquee-track {
    display: flex;
    width: max-content;
    animation: sfd-marquee 40s linear infinite;
    will-change: transform;
}

.sfd-marquee-set {
    display: flex;
    flex: 0 0 auto;
    gap: 16px;
    padding-right: 16px;
}

/* pause while the visitor looks at a card */
.sfd-marquee:hover .sfd-marquee-track,
.sfd-marquee:focus-within .sfd-marquee-track,
.sfd-marquee:active .sfd-marquee-track {
    animation-play-state: paused;
}

@keyframes sfd-marquee {
    from {
        transform: translateX(0);
    }

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

.sfd-page .sfd-dest {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 250px;
    min-height: 330px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 26px;
    background: var(--sfd-ink-2);
    color: #fff;
    transition: transform .35s ease;
}

.sfd-page .sfd-dest:hover,
.sfd-page .sfd-dest:focus-visible {
    transform: translateY(-6px);
    color: #fff;
}

.sfd-dest img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.sfd-dest:hover img {
    transform: scale(1.08);
}

.sfd-dest-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 40, 59, .05) 30%, rgba(16, 40, 59, .92) 100%);
}

.sfd-dest-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--sfd-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.sfd-dest-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 18px 18px;
}

.sfd-dest-name {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.55rem;
    line-height: 1.1;
}

.sfd-dest-places {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #e6edf2;
}

.sfd-dest-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .28);
}

.sfd-dest-price {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.1;
}

.sfd-dest-price small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #d3dce4;
}

.sfd-dest .sfd-btn-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: var(--sfd-orange);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .9);
    transition: background .25s ease;
}

.sfd-dest:hover .sfd-btn-icon,
.sfd-dest:focus-visible .sfd-btn-icon {
    background: var(--sfd-blue);
}

/* ---------- 16. Mobile booking bar ---------- */
.sfd-bar {
    display: none;
}

/* ---------- 17. Responsive ---------- */
@media (min-width: 992px) and (max-width: 1199px) {
    .sfd-fares {
        grid-template-columns: minmax(0, 1fr);
    }

    .sfd-perks {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1199px) {
    .sfd-layout {
        grid-template-columns: minmax(0, 1fr) 350px;
        gap: 26px;
    }

    .sfd-facts {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sfd-fact {
        grid-column: span 2;
    }

    .sfd-fact:nth-child(n+4) {
        grid-column: span 3;
    }
}

@media (max-width: 991px) {
    .sfd-page {
        padding: 34px 0 110px;
    }

    .sfd-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .sfd-hero-photo {
        min-height: 240px;
    }

    /* cut-outs move to the left and right edges, on the photo / ticket seam */
    .sfd-hero-ticket::before {
        top: -14px;
        left: -14px;
    }

    .sfd-hero-ticket::after {
        top: -14px;
        bottom: auto;
        left: auto;
        right: -14px;
    }

    .sfd-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .sfd-side {
        position: static;
    }

    .sfd-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--sfd-white);
        box-shadow: 0 -10px 30px -12px rgba(16, 40, 59, .3);
    }

    .sfd-bar small {
        display: block;
        font-size: 12px;
        color: var(--sfd-muted);
        line-height: 1.2;
    }

    .sfd-bar strong {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.5rem;
        line-height: 1.1;
    }

    .sfd-page .sfd-bar-btn {
        padding: 5px 5px 5px 20px;
        font-size: 15px;
    }

    .sfd-bar-btn .sfd-btn-icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    /* keep the theme's scroll-to-top button above the booking bar (this page only) */
    body:has(.sfd-page) #scroll-top {
        bottom: 92px;
    }
}

@media (max-width: 767px) {
    .sfd-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 28px;
    }

    .sfd-fact,
    .sfd-fact:nth-child(n+4) {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .sfd-fact:last-child {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
    }

    .sfd-fares {
        grid-template-columns: minmax(0, 1fr);
    }

    .sfd-inc {
        grid-template-columns: minmax(0, 1fr);
    }

    .sfd-inc-col+.sfd-inc-col {
        border-left: 0;
        border-top: 1px solid var(--sfd-line);
    }

    .sfd-inc-col li {
        min-height: 60px;
        padding: 12px 18px;
    }

    .sfd-inc-title {
        padding: 14px 18px;
    }

    .sfd-airports {
        grid-template-columns: minmax(0, 1fr);
    }

    .sfd-airport+.sfd-airport {
        border-left: 0;
        border-top: 2px dashed var(--sfd-line);
    }

    .sfd-perks {
        grid-template-columns: minmax(0, 1fr);
    }

    .sfd-hint {
        margin-left: 0;
    }

    .sfd-about-text {
        font-size: 15px;
    }

    .sfd-hero-price .sfd-btn {
        width: 100%;
    }

    .sfd-nav {
        margin: 26px 0 24px;
    }

    .sfd-explore {
        margin-top: 56px;
    }
}

@media (max-width: 575px) {
    .sfd-code {
        font-size: 2rem;
    }

    .sfd-path {
        gap: 12px;
    }

    .sfd-page .sfd-dest {
        width: 220px;
        min-height: 300px;
    }

    .sfd-marquee-track {
        animation-duration: 34s;
    }
}

@media (max-width: 480px) {
    .sfd-page {
        padding: 26px 0 104px;
    }

    .sfd-hero {
        border-radius: 24px;
    }

    .sfd-hero-photo {
        min-height: 200px;
    }

    .sfd-hero-ticket {
        padding: 22px 18px;
    }

    .sfd-code {
        font-size: 1.75rem;
    }

    .sfd-path {
        grid-template-columns: auto minmax(40px, 1fr) auto;
        gap: 8px;
    }

    .sfd-city,
    .sfd-leg {
        font-size: 12px;
    }

    .sfd-hero-price strong {
        font-size: 1.9rem;
    }

    .sfd-panel {
        padding: 20px 16px;
        border-radius: 22px;
    }

    .sfd-panel-head {
        gap: 12px;
    }

    .sfd-panel-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .sfd-timeline li {
        grid-template-columns: 52px 18px minmax(0, 1fr);
        gap: 0 8px;
    }

    .sfd-tl-time {
        font-size: 1.05rem;
    }

    .sfd-airport {
        padding: 18px;
    }

    .sfd-row2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .sfd-book {
        padding: 24px 18px;
        border-radius: 24px;
    }

    .sfd-help {
        padding: 22px 18px;
    }

    .sfd-fact-value {
        font-size: 13.5px;
    }

}

@media (max-width: 359px) {
    .sfd-page .sfd-btn {
        padding-left: 18px;
        font-size: 15px;
    }

    .sfd-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .sfd-fact:last-child {
        grid-column: auto;
    }

    .sfd-bar strong {
        font-size: 1.25rem;
    }
}

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

    .sfd-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .sfd-marquee-track {
        animation: none;
    }

    .sfd-marquee-set[aria-hidden="true"] {
        display: none;
    }

    .sfd-page *,
    .sfd-page *::before,
    .sfd-page *::after {
        transition: none !important;
    }
}


/* =========================================================
   BOOKING PAGE  
   ========================================================= */

/* ---------- 0. Tokens + page wrapper ---------- */
.bkg-page {
    --bkg-orange: #ee6f12;
    --bkg-blue: #10283b;
    --bkg-orange-soft: #fde9d8;
    --bkg-orange-text: #b4520a;
    --bkg-ink: #10283b;
    --bkg-ink-2: #1c3a52;
    --bkg-body: #2b4054;
    --bkg-muted: #556676;
    --bkg-cream: #faf5ef;
    --bkg-sand: #f3e8db;
    --bkg-line: #e6dccf;
    --bkg-white: #ffffff;
    --bkg-green: #17614d;
    --bkg-red: #a83b22;
    --bkg-shadow: 0 22px 44px -30px rgba(16, 40, 59, .5);

    position: relative;
    background: var(--bkg-cream);
    color: var(--bkg-ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding: 44px 0 80px;
    overflow-x: clip;
}

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

.bkg-page :where(h1, h2, h3, h4, p, ul, ol, dl, dd) {
    margin: 0;
    padding: 0;
}

.bkg-page :where(ul, ol) {
    list-style: none;
}

.bkg-page a {
    text-decoration: none;
}

.bkg-page :focus-visible {
    outline: 3px solid var(--bkg-orange);
    outline-offset: 3px;
}

.bkg-page .bkg-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--bkg-ink);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.bkg-page .bkg-h2 {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.bkg-page .bkg-h3 {
    font-size: 1.2rem;
}

/* ---------- 1. Breadcrumb ---------- */
.bkg-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 26px;
    font-size: 14px;
    color: var(--bkg-muted);
}

.bkg-page .bkg-crumbs a {
    color: var(--bkg-muted);
}

.bkg-page .bkg-crumbs a:hover {
    color: var(--bkg-orange-text);
    text-decoration: underline;
}

.bkg-crumbs i {
    font-size: 10px;
}

.bkg-crumbs span[aria-current] {
    color: var(--bkg-ink);
    font-weight: 600;
}

/* ---------- 2. Progress steps (this genuinely is a 3-stage sequence) ---------- */
.bkg-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 34px;
    padding: 0;
}

.bkg-step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bkg-muted);
}

.bkg-step:not(:last-child)::after {
    content: "";
    width: clamp(28px, 5vw, 70px);
    height: 2px;
    margin: 0 12px;
    background: var(--bkg-line);
}

.bkg-step--done:not(:last-child)::after {
    background: var(--bkg-orange);
}

.bkg-step-mark {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bkg-white);
    border: 2px solid var(--bkg-line);
    color: var(--bkg-muted);
    font-size: 13px;
}

.bkg-step--done .bkg-step-mark {
    background: var(--bkg-orange);
    border-color: var(--bkg-orange);
    color: #fff;
}

.bkg-step--active .bkg-step-mark {
    border-color: var(--bkg-orange);
    color: var(--bkg-orange-text);
}

.bkg-step--active .bkg-step-label {
    color: var(--bkg-ink);
}

.bkg-step--done .bkg-step-label {
    color: var(--bkg-ink);
}

.bkg-step-label {
    white-space: nowrap;
}

/* ---------- 3. Two-column layout ---------- */
.bkg-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
}

.bkg-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.bkg-panel {
    min-width: 0;
    padding: clamp(20px, 3vw, 30px);
    background: var(--bkg-white);
    border: 1px solid var(--bkg-line);
    border-radius: 26px;
    box-shadow: var(--bkg-shadow);
}

.bkg-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.bkg-panel-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bkg-orange-soft);
    color: var(--bkg-orange-text);
    font-size: 17px;
}

.bkg-hint {
    margin-top: 4px;
    font-size: 14px;
    color: var(--bkg-muted);
}

/* ---------- 4. Trip summary card ---------- */
.bkg-tripcard-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 16px;
}

.bkg-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #e4f1ed;
    color: var(--bkg-green);
    font-size: 13px;
    font-weight: 600;
}

.bkg-page .bkg-tripcard-route .bkg-title {
    margin-top: 8px;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.bkg-tripcard-route i {
    font-size: .7em;
    color: var(--bkg-orange);
}

.bkg-page .bkg-tripcard-edit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 16px;
    border: 1.5px solid var(--bkg-line);
    border-radius: 999px;
    color: var(--bkg-ink);
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color .2s, background .2s;
}

.bkg-page .bkg-tripcard-edit:hover {
    background: var(--bkg-ink);
    border-color: var(--bkg-ink);
    color: #fff;
}

.bkg-tripcard-path {
    display: grid;
    grid-template-columns: auto minmax(60px, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-top: 2px dashed var(--bkg-line);
}

.bkg-tripcard-path--return {
    border-bottom: 2px dashed var(--bkg-line);
}

.bkg-code {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 1;
}

.bkg-time {
    display: block;
    margin-top: 4px;
    font-weight: 600;
    font-size: 15px;
}

.bkg-date {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--bkg-muted);
}

.bkg-stop--end {
    text-align: right;
}

.bkg-leg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: center;
    font-size: 12px;
    color: var(--bkg-muted);
}

.bkg-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
}

.bkg-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px dashed #d8c9b6;
}

.bkg-track i {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bkg-white);
    color: var(--bkg-orange);
    font-size: 13px;
}

.bkg-tripcard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--bkg-body);
    font-weight: 500;
}

.bkg-tripcard-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bkg-tripcard-meta i {
    color: var(--bkg-orange);
}

/* ---------- 5. Traveller cards ---------- */
.bkg-travellers-list {
    display: grid;
    gap: 18px;
}

.bkg-traveller {
    padding: 18px 20px 20px;
    border: 1.5px solid var(--bkg-line);
    border-radius: 20px;
    background: var(--bkg-cream);
}

.bkg-traveller-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.bkg-traveller-head strong {
    font-size: 15px;
    color: var(--bkg-ink);
}

.bkg-traveller-head span {
    display: block;
    font-size: 12.5px;
    color: var(--bkg-muted);
}

/* ---------- 6. Form fields (shared: contact, traveller, payment) ---------- */
.bkg-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.bkg-grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.bkg-field {
    display: block;
    min-width: 0;
    margin: 0 0 14px;
}

.bkg-field:last-child {
    margin-bottom: 0;
}

.bkg-field>span {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bkg-ink);
}

.bkg-page .bkg-input,
.bkg-page select.bkg-input {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--bkg-line);
    border-radius: 14px;
    background: #fff;
    color: var(--bkg-ink);
    font: 500 15px/1 'Inter', sans-serif;
    transition: border-color .2s;
}

.bkg-page .bkg-input:focus {
    border-color: var(--bkg-ink);
    outline: none;
}

.bkg-page .bkg-input:focus-visible {
    outline: 3px solid var(--bkg-orange);
    outline-offset: 2px;
}

.bkg-page .bkg-input:invalid:not(:placeholder-shown) {
    border-color: var(--bkg-red);
}

/* ---------- 7. Extras / add-ons ---------- */
.bkg-extras {
    display: grid;
    gap: 12px;
}

.bkg-page .bkg-extra {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.bkg-extra input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.bkg-extra-body {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1.5px solid var(--bkg-line);
    border-radius: 18px;
    background: var(--bkg-white);
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.bkg-extra:hover .bkg-extra-body {
    border-color: #cdb99f;
}

.bkg-extra input:checked+.bkg-extra-body {
    border-color: var(--bkg-orange);
    background: #fff4e9;
    box-shadow: 0 0 0 4px rgba(238, 111, 18, .14);
}

.bkg-extra input:focus-visible+.bkg-extra-body {
    outline: 3px solid var(--bkg-ink);
    outline-offset: 2px;
}

.bkg-extra-ic {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--bkg-orange-soft);
    color: var(--bkg-orange-text);
    font-size: 16px;
}

.bkg-extra-text {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.bkg-extra-text strong {
    font-size: 14.5px;
    color: var(--bkg-ink);
}

.bkg-extra-text small {
    font-size: 13px;
    color: var(--bkg-muted);
}

.bkg-extra-price {
    flex: 0 0 auto;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bkg-ink);
}

/* ---------- 8. Hotel cross-sell banner ---------- */
.bkg-hotel-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 22px;
    padding: 26px 28px;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--bkg-ink) 0%, var(--bkg-ink-2) 100%);
    color: #fff;
    box-shadow: var(--bkg-shadow);
}

.bkg-hotel-icon {
    display: grid;
    place-items: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    color: var(--bkg-orange-soft);
    font-size: 22px;
}

.bkg-hotel-copy {
    flex: 1 1 260px;
    min-width: 0;
}

.bkg-page .bkg-hotel-copy .bkg-title {
    color: #fff;
}

.bkg-hotel-copy p {
    margin-top: 6px;
    max-width: 52ch;
    font-size: 14px;
    line-height: 1.6;
    color: #d3dce4;
}

/* ---------- 9. Buttons ---------- */
.bkg-page .bkg-btn,
.bkg-page .bkg-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 6px 6px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--bkg-orange);
    color: #fff;
    font: 600 16px/1.2 'Inter', sans-serif;
    cursor: pointer;
    transition: background .25s ease;
}

.bkg-page .bkg-btn:hover,
.bkg-page .bkg-btn:focus-visible,
.bkg-page .bkg-bar-btn:hover,
.bkg-page .bkg-bar-btn:focus-visible {
    background: var(--bkg-blue);
    color: #fff;
}

.bkg-page .bkg-btn--block {
    display: flex;
    width: 100%;
}

.bkg-page .bkg-btn--light {
    flex: 0 0 auto;
    background: #fff;
    color: var(--bkg-ink);
}

.bkg-page .bkg-btn--light:hover,
.bkg-page .bkg-btn--light:focus-visible {
    background: var(--bkg-orange);
    color: #fff;
}

.bkg-page .bkg-btn--light .bkg-btn-icon {
    background: var(--bkg-orange-soft);
    color: var(--bkg-orange-text);
}

.bkg-btn-icon {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--bkg-ink);
    font-size: 14px;
}

.bkg-btn-icon i {
    transform: rotate(-45deg);
    transition: transform .3s ease;
}

.bkg-btn:hover .bkg-btn-icon i,
.bkg-btn:focus-visible .bkg-btn-icon i,
.bkg-bar-btn:hover .bkg-btn-icon i,
.bkg-bar-btn:focus-visible .bkg-btn-icon i {
    transform: rotate(0deg);
}

.bkg-page .bkg-btn-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding: 13px 20px;
    border-radius: 999px;
    border: 1.5px solid #25a55a;
    color: #17703c;
    font-weight: 600;
    font-size: 15px;
    transition: background .2s, color .2s;
}

.bkg-page .bkg-btn-wa:hover {
    background: #25a55a;
    color: #fff;
}

/* ---------- 10. Payment method + card fields ---------- */
.bkg-pay-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.bkg-page .bkg-pay-method {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.bkg-pay-method input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.bkg-pay-method span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 10px;
    border: 1.5px solid var(--bkg-line);
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bkg-body);
    text-align: center;
    transition: border-color .2s, background .2s, color .2s;
}

.bkg-pay-method input:checked+span {
    border-color: var(--bkg-orange);
    background: #fff4e9;
    color: var(--bkg-orange-text);
}

.bkg-pay-method input:focus-visible+span {
    outline: 3px solid var(--bkg-ink);
    outline-offset: 2px;
}

.bkg-card-fields {
    display: grid;
    gap: 14px;
}

.bkg-secure {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--bkg-line);
    font-size: 13px;
    color: var(--bkg-muted);
}

.bkg-secure i {
    margin-top: 2px;
    color: var(--bkg-green);
}

/* ---------- 11. Terms ---------- */
.bkg-page .bkg-terms {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    background: var(--bkg-white);
    border: 1.5px dashed var(--bkg-line);
    border-radius: 18px;
    font-size: 13.5px;
    color: var(--bkg-body);
    cursor: pointer;
}

.bkg-terms input {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--bkg-orange);
    flex: 0 0 auto;
}

.bkg-page .bkg-terms a {
    color: var(--bkg-orange-text);
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- 12. Sidebar / price summary ---------- */
.bkg-side {
    position: sticky;
    top: 110px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-width: 0;
}

.bkg-summary {
    min-width: 0;
    padding: 28px 26px;
    background: var(--bkg-white);
    border: 1px solid var(--bkg-line);
    border-radius: 28px;
    box-shadow: var(--bkg-shadow);
}

.bkg-promo {
    display: flex;
    gap: 8px;
    margin: 18px 0 20px;
}

.bkg-promo .bkg-input {
    flex: 1 1 auto;
}

.bkg-page .bkg-promo-btn {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1.5px solid var(--bkg-ink);
    border-radius: 14px;
    background: #fff;
    color: var(--bkg-ink);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.bkg-page .bkg-promo-btn:hover {
    background: var(--bkg-ink);
    color: #fff;
}

.bkg-sum {
    display: grid;
    gap: 10px;
    padding-top: 4px;
    font-size: 14px;
}

.bkg-sum div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.bkg-sum dt {
    min-width: 0;
    color: var(--bkg-muted);
    font-weight: 400;
}

.bkg-sum dd {
    flex: 0 0 auto;
    font-weight: 600;
    text-align: right;
}

.bkg-sum .bkg-total {
    align-items: baseline;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 2px dashed var(--bkg-line);
}

.bkg-sum .bkg-total dt {
    color: var(--bkg-ink);
    font-weight: 600;
    font-size: 1rem;
}

.bkg-sum .bkg-total dd {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.8rem;
    line-height: 1.1;
}

.bkg-summary>.bkg-btn {
    margin-top: 22px;
}

.bkg-assure {
    display: grid;
    gap: 10px;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px dashed var(--bkg-line);
    font-size: 13.5px;
    color: var(--bkg-body);
}

.bkg-assure li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.bkg-assure i {
    margin-top: 3px;
    color: var(--bkg-green);
    flex: 0 0 auto;
}

.bkg-help {
    min-width: 0;
    padding: 24px 24px 22px;
    border-radius: 26px;
    background: var(--bkg-sand);
}

.bkg-help p {
    margin: 8px 0 16px;
    font-size: 14px;
    color: var(--bkg-body);
}

.bkg-help ul {
    display: grid;
    gap: 12px;
}

.bkg-help li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-size: 14px;
}

.bkg-help li i {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--bkg-orange-text);
    font-size: 13px;
}

.bkg-page .bkg-help a {
    min-width: 0;
    color: var(--bkg-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.bkg-page .bkg-help a:hover {
    text-decoration: underline;
}

/* ---------- 13. Mobile booking bar ---------- */
.bkg-bar {
    display: none;
}

/* ---------- 14. Responsive ---------- */
@media (max-width: 1199px) {
    .bkg-layout {
        grid-template-columns: minmax(0, 1fr) 350px;
        gap: 26px;
    }
}

@media (max-width: 991px) {
    .bkg-page {
        padding: 34px 0 112px;
    }

    .bkg-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .bkg-side {
        position: static;
    }

    .bkg-pay-methods {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bkg-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--bkg-white);
        box-shadow: 0 -10px 30px -12px rgba(16, 40, 59, .3);
    }

    .bkg-bar small {
        display: block;
        font-size: 12px;
        color: var(--bkg-muted);
        line-height: 1.2;
    }

    .bkg-bar strong {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 1.5rem;
        line-height: 1.1;
    }

    .bkg-page .bkg-bar-btn {
        padding: 5px 5px 5px 20px;
        font-size: 15px;
    }

    .bkg-bar-btn .bkg-btn-icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    body:has(.bkg-page) #scroll-top {
        bottom: 92px;
    }
}

@media (max-width: 767px) {

    .bkg-grid2,
    .bkg-grid3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .bkg-tripcard-path {
        gap: 10px;
    }

    .bkg-code {
        font-size: 1.4rem;
    }

    .bkg-hotel-banner {
        padding: 22px 20px;
        text-align: left;
    }

    .bkg-hotel-banner .bkg-btn {
        width: 100%;
        justify-content: space-between;
    }

    .bkg-steps {
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .bkg-step-label {
        font-size: 12.5px;
    }
}

@media (max-width: 575px) {
    .bkg-pay-methods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bkg-step:nth-child(2)::after,
    .bkg-step:nth-child(1)::after {
        width: 20px;
        margin: 0 8px;
    }
}

@media (max-width: 480px) {
    .bkg-page {
        padding: 26px 0 106px;
    }

    .bkg-panel {
        padding: 20px 16px;
        border-radius: 22px;
    }

    .bkg-panel-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .bkg-tripcard-edit span {
        display: none;
    }

    .bkg-summary,
    .bkg-help {
        padding: 22px 18px;
    }

    .bkg-promo {
        flex-direction: column;
    }

    .bkg-page .bkg-promo-btn {
        height: 46px;
    }
}

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

    .bkg-page *,
    .bkg-page *::before,
    .bkg-page *::after {
        transition: none !important;
    }
}

/* =========================================================================
   HOTELS + HOTEL DETAILS  
   ========================================================================= */

.sgt-hotels,
.sgt-hotel-single {
    --sgt-primary: #F98225;
    --sgt-primary-dark: #e4701a;
    --sgt-primary-soft: #FFF2E7;
    --sgt-dark: #2A4456;
    --sgt-dark-soft: #EDF2F6;
    --sgt-body: #5A6B78;
    --sgt-border: #E2E8ED;
    --sgt-bg: #F6F8FA;
    --sgt-radius: 18px;
    --sgt-shadow: 0 4px 18px rgba(42, 68, 86, .07);
    --sgt-shadow-hover: 0 14px 38px rgba(42, 68, 86, .15);
}

.sgt-hotels *,
.sgt-hotel-single * {
    box-sizing: border-box;
}

.sgt-hotels img,
.sgt-hotel-single img {
    max-width: 100%;
}

.sgt-tagline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sgt-primary);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.sgt-section-title,
.sgt-search-title {
    color: var(--sgt-dark);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    font-size: clamp(20px, 2.2vw, 30px);
}

.sgt-center {
    text-align: center;
    margin-top: 18px;
}

/* =========================================================================
   THEME BUTTON 
   ========================================================================= */
.sgt-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--sgt-primary);
    color: #fff;
    border: 0;
    cursor: pointer;
    padding: 6px 8px 6px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
    font-family: inherit;
}

.sgt-theme-btn:hover,
.sgt-theme-btn:focus-visible {
    background: var(--sgt-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(42, 68, 86, .25);
}

.sgt-btn-arrow {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--sgt-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    overflow: hidden;
    transition: color .35s ease, background .35s ease;
}

.sgt-btn-arrow i {
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    display: block;
}

.sgt-theme-btn:hover .sgt-btn-arrow {
    color: var(--sgt-dark);
}

.sgt-theme-btn:hover .sgt-btn-arrow i {
    transform: rotate(45deg);
}

.sgt-btn-sm {
    font-size: 14px;
    padding: 5px 7px 5px 18px;
}

.sgt-btn-sm .sgt-btn-arrow {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    font-size: 11px;
}

.sgt-btn-xs {
    font-size: 12.5px;
    padding: 4px 5px 4px 14px;
    gap: 8px;
}

.sgt-btn-xs .sgt-btn-arrow {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    font-size: 10px;
}

.sgt-btn-block {
    width: 100%;
}

/* phone pill button — always one line */
.sgt-phone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #fff;
    color: var(--sgt-primary);
    border: 1.5px solid #fff;
    padding: 11px 18px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    font-size: clamp(13px, 1.4vw, 15px);
    white-space: nowrap;
    transition: .35s;
    max-width: 100%;
}

.sgt-phone-btn i {
    font-size: 13px;
    flex: 0 0 auto;
}

.sgt-phone-btn:hover i {
    color: white;
}

.sgt-phone-btn span {
    white-space: nowrap;
}

.sgt-phone-btn:hover {
    background: var(--sgt-primary);
    color: #fff;
    border-color: var(--sgt-primary);
}

.sgt-phone-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}

.sgt-phone-ghost:hover {
    background: #fff;
    color: var(--sgt-dark);
    border-color: #fff;
}

/* =========================================================================
   CUSTOM DROPDOWN 
   ========================================================================= */
.sgt-dd {
    position: relative;
    width: 100%;
}

.sgt-dd-btn {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1.5px solid var(--sgt-border);
    background: #fff;
    color: var(--sgt-dark);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    transition: .25s;
    line-height: 1;
}

.sgt-dd-sm {
    height: 44px;
    font-size: 13.5px;
    padding: 0 12px;
}

.sgt-dd-btn>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sgt-dd-btn>i {
    color: var(--sgt-primary);
    font-size: 11px;
    flex: 0 0 auto;
    transition: transform .3s ease;
}

.sgt-dd-btn:hover {
    border-color: var(--sgt-primary);
}

.sgt-dd.open .sgt-dd-btn {
    border-color: var(--sgt-primary);
    box-shadow: 0 0 0 3px rgba(249, 130, 37, .12);
}

.sgt-dd.open .sgt-dd-btn>i {
    transform: rotate(180deg);
}

.sgt-dd-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: 12px;
    box-shadow: var(--sgt-shadow-hover);
    padding: 6px;
    margin: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.sgt-dd.open .sgt-dd-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sgt-dd-list li {
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--sgt-body);
    cursor: pointer;
    transition: .18s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sgt-dd-list li:hover {
    background: var(--sgt-bg);
    color: var(--sgt-dark);
}

.sgt-dd-list li.active {
    background: var(--sgt-primary-soft);
    color: var(--sgt-primary);
    font-weight: 600;
}

/* =========================================================================
   1. SEARCH BAR
   ========================================================================= */
.sgt-search-wrap {
    background: var(--sgt-bg);
    padding: 50px 0 0;
}

.sgt-search-card {
    background: #fff;
    border-radius: 22px;
    padding: 28px;
    box-shadow: var(--sgt-shadow);
    border: 1px solid var(--sgt-border);
}

.sgt-search-head {
    margin-bottom: 20px;
}

.sgt-search-form {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr auto;
    align-items: end;
}

.sgt-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.sgt-field>label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sgt-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.sgt-field>label i {
    color: var(--sgt-primary);
    font-size: 12px;
}

.sgt-field input[type="text"],
.sgt-field input[type="date"] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1.5px solid var(--sgt-border);
    background: #fff;
    color: var(--sgt-dark);
    font-size: 14px;
    outline: none;
    transition: .25s;
    font-family: inherit;
}

.sgt-field input:focus {
    border-color: var(--sgt-primary);
    box-shadow: 0 0 0 3px rgba(249, 130, 37, .12);
}

.sgt-field-btn .sgt-theme-btn {
    height: 48px;
}

/* guests dropdown panel */
.sgt-guest-box {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--sgt-shadow-hover);
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.sgt-guest-box.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sgt-guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--sgt-border);
    font-size: 13.5px;
    color: var(--sgt-dark);
    font-weight: 600;
}

.sgt-guest-row:last-of-type {
    border-bottom: 0;
}

.sgt-guest-row small {
    display: block;
    font-weight: 400;
    color: var(--sgt-body);
    font-size: 11.5px;
}

.sgt-counter {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sgt-counter button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--sgt-border);
    background: #fff;
    color: var(--sgt-dark);
    font-size: 10px;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
}

.sgt-counter button:hover {
    background: var(--sgt-primary);
    color: #fff;
    border-color: var(--sgt-primary);
}

.sgt-counter input {
    width: 30px;
    text-align: center;
    border: 0;
    font-weight: 700;
    color: var(--sgt-dark);
    background: transparent;
    font-size: 14px;
    padding: 0;
}

.sgt-guest-done {
    width: 100%;
    margin-top: 10px;
    background: var(--sgt-dark);
    color: #fff;
    border: 0;
    padding: 10px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13.5px;
    transition: .3s;
    font-family: inherit;
}

.sgt-guest-done:hover {
    background: var(--sgt-primary);
}

/* chips + clear */
.sgt-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--sgt-border);
}

.sgt-chips-label {
    font-size: 13px;
    color: var(--sgt-body);
    font-weight: 600;
}

.sgt-chip {
    border: 1.5px solid var(--sgt-border);
    background: #fff;
    color: var(--sgt-dark);
    padding: 7px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
    font-family: inherit;
}

.sgt-chip:hover,
.sgt-chip.active {
    background: var(--sgt-primary);
    border-color: var(--sgt-primary);
    color: #fff;
}

.sgt-chip-clear {
    margin-left: auto;
    border: 1.5px solid var(--sgt-border);
    background: var(--sgt-bg);
    color: var(--sgt-body);
    padding: 7px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    white-space: nowrap;
}

.sgt-chip-clear i {
    font-size: 11px;
    transition: transform .4s ease;
}

.sgt-chip-clear:hover {
    border-color: var(--sgt-primary);
    color: var(--sgt-primary);
    background: var(--sgt-primary-soft);
}

.sgt-chip-clear:hover i {
    transform: rotate(-180deg);
}

/* =========================================================================
   2. LISTING AREA + FILTER SIDEBAR
   ========================================================================= */
.sgt-listing-area {
    background: var(--sgt-bg);
    padding: 45px 0 70px;
}

.sgt-filter-trigger {
    width: 100%;
    margin-bottom: 18px;
    background: var(--sgt-dark);
    color: #fff;
    border: 0;
    padding: 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    transition: .3s;
}

.sgt-filter-trigger:hover {
    background: var(--sgt-primary);
}

.sgt-filter-canvas .offcanvas-body {
    padding: 0;
}

.sgt-hotels .offcanvas-lg.offcanvas-start {
    max-width: 330px;
}

.sgt-hotels .offcanvas-lg .offcanvas-header {
    border-bottom: 1px solid var(--sgt-border);
}

.sgt-hotels .offcanvas-lg .offcanvas-body {
    padding: 16px;
}

@media (min-width: 992px) {
    .sgt-hotels .offcanvas-lg .offcanvas-body {
        padding: 0;
    }

    .sgt-hotels .offcanvas-lg.offcanvas-start {
        max-width: none;
    }
}

.sgt-filter {
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: var(--sgt-radius);
    padding: 22px;
    box-shadow: var(--sgt-shadow);
}

.sgt-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sgt-border);
}

.sgt-filter-head h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--sgt-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sgt-filter-head h4 i {
    color: var(--sgt-primary);
    font-size: 15px;
}

.sgt-clear {
    background: none;
    border: 0;
    color: var(--sgt-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.sgt-clear:hover {
    text-decoration: underline;
}

.sgt-filter-block {
    padding: 16px 0;
    border-bottom: 1px solid var(--sgt-border);
}

.sgt-filter-block:last-of-type {
    border-bottom: 0;
    padding-bottom: 4px;
}

.sgt-filter-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--sgt-dark);
    margin: 0 0 12px;
}

.sgt-filter-search {
    position: relative;
}

.sgt-filter-search i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sgt-body);
    font-size: 13px;
}

.sgt-filter-search input {
    width: 100%;
    height: 44px;
    padding: 0 12px 0 36px;
    border-radius: 10px;
    border: 1.5px solid var(--sgt-border);
    font-size: 14px;
    outline: none;
    color: var(--sgt-dark);
    font-family: inherit;
}

.sgt-filter-search input:focus {
    border-color: var(--sgt-primary);
}

.sgt-range-values {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--sgt-dark);
    margin-bottom: 8px;
}

.sgt-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: var(--sgt-dark-soft);
    outline: none;
}

.sgt-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sgt-primary);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(42, 68, 86, .3);
}

.sgt-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sgt-primary);
    cursor: pointer;
    border: 3px solid #fff;
}

.sgt-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sgt-check-list li+li {
    margin-top: 10px;
}

.sgt-check-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--sgt-body);
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.sgt-check-list input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sgt-box {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border-radius: 6px;
    border: 1.5px solid var(--sgt-border);
    background: #fff;
    position: relative;
    transition: .2s;
}

.sgt-check-list input:checked+.sgt-box {
    background: var(--sgt-primary);
    border-color: var(--sgt-primary);
}

.sgt-check-list input:checked+.sgt-box::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sgt-check-list input:checked~* {
    color: var(--sgt-dark);
}

.sgt-cnt {
    font-style: normal;
    margin-left: auto;
    font-size: 12px;
    color: #9AA7B1;
}

/* an option no hotel has */
.sgt-check-list li.is-empty label {
    opacity: .45;
    cursor: default;
}

/* Below 992px the filters open in a drawer that has its own "Filters" header: the filters sit
   flat in it (no card inside the drawer), with a bar at the bottom to clear them or to close the
   drawer and see the hotels. */
@media (max-width: 991.98px) {
    .sgt-filter-canvas .sgt-filter {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .sgt-filter-canvas .sgt-filter-head {
        display: none;
    }

    .sgt-filter-canvas .sgt-filter-head + .sgt-filter-block {
        padding-top: 0;
    }

    /* sticks to the drawer's bottom edge (-16px cancels the drawer's own padding) */
    .sgt-filter-foot {
        position: sticky;
        bottom: -16px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin: 18px -16px -16px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--sgt-border);
    }

    .sgt-filter-foot .sgt-filter-apply {
        flex: 1;
        padding: 14px 20px;
    }
}

.sgt-help-box {
    margin-top: 18px;
    background: var(--sgt-dark);
    border: 1px solid var(--sgt-dark);
    border-radius: 14px;
    padding: 24px 16px;
    text-align: center;
    color: #fff;
}

/* only the headset icon at the top (not the phone icon inside the button) */
.sgt-help-box > i {
    font-size: 26px;
    color: var(--sgt-primary);
    margin-bottom: 10px;
    display: block;
}

.sgt-help-box h5 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #fff;
}

.sgt-help-box p {
    font-size: 13px;
    opacity: .8;
    margin: 0 0 14px;
    line-height: 1.6;
}

/* toolbar */
.sgt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.sgt-result-count {
    margin: 0;
    font-size: 14px;
    color: var(--sgt-body);
}

.sgt-result-count strong {
    color: var(--sgt-dark);
    font-size: 16px;
}

.sgt-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgt-sort-label {
    font-size: 13px;
    color: var(--sgt-body);
    font-weight: 600;
    white-space: nowrap;
}

.sgt-sort .sgt-dd {
    width: 190px;
}

.sgt-active-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.sgt-active-tags:empty {
    margin: 0;
}

.sgt-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--sgt-primary-soft);
    color: var(--sgt-dark);
    border: 1px solid rgba(249, 130, 37, .35);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: capitalize;
}

.sgt-tag button {
    background: none;
    border: 0;
    color: var(--sgt-primary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* =========================================================================
   3. HOTEL CARD
   ========================================================================= */
.sgt-hotel-card {
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: var(--sgt-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sgt-shadow);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.sgt-hotel-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sgt-shadow-hover);
    border-color: rgba(249, 130, 37, .5);
}

.sgt-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--sgt-dark-soft);
}

.sgt-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
    display: block;
}

.sgt-hotel-card:hover .sgt-card-media img {
    transform: scale(1.08);
}

.sgt-card-deal {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--sgt-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 50px;
    z-index: 2;
}

.sgt-deal-alt {
    background: var(--sgt-dark);
}

.sgt-card-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    z-index: 2;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .92);
    color: var(--sgt-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .25s;
    font-size: 14px;
}

.sgt-card-fav:hover,
.sgt-card-fav.active {
    background: var(--sgt-primary);
    color: #fff;
}

.sgt-card-score {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    background: rgba(42, 68, 86, .92);
    color: #fff;
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sgt-card-score strong {
    font-size: 13px;
}

.sgt-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sgt-card-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--sgt-primary);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.sgt-card-type {
    margin-left: auto;
    background: var(--sgt-dark-soft);
    color: var(--sgt-dark);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
}

.sgt-card-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 7px;
    line-height: 1.35;
}

.sgt-card-title a {
    color: var(--sgt-dark);
    text-decoration: none;
    transition: .25s;
}

.sgt-card-title a:hover {
    color: var(--sgt-primary);
}

.sgt-card-location {
    font-size: 13px;
    color: var(--sgt-body);
    margin: 0 0 12px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.45;
}

.sgt-card-location i {
    color: var(--sgt-primary);
    font-size: 12px;
    margin-top: 3px;
}

.sgt-card-features {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sgt-card-features li {
    font-size: 11.5px;
    color: var(--sgt-body);
    background: var(--sgt-bg);
    border: 1px solid var(--sgt-border);
    padding: 4px 9px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sgt-card-features i {
    color: var(--sgt-primary);
    font-size: 11px;
}

.sgt-card-divider {
    height: 1px;
    background: var(--sgt-border);
    margin: auto 0 13px;
}

.sgt-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
}

.sgt-card-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: nowrap;
}

.sgt-card-price del {
    font-size: 11px;
    color: #9AA7B1;
}

.sgt-price-now {
    font-size: 20px;
    font-weight: 700;
    color: var(--sgt-primary);
    line-height: 1;
}

.sgt-card-price small {
    font-size: 11.5px;
    color: var(--sgt-body);
    white-space: nowrap;
}

/* empty state + pagination */
.sgt-empty {
    display: none;
    text-align: center;
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: var(--sgt-radius);
    padding: 50px 20px;
}

.sgt-empty.show {
    display: block;
}

.sgt-empty>i {
    font-size: 40px;
    color: var(--sgt-primary);
    margin-bottom: 14px;
}

.sgt-empty h4 {
    color: var(--sgt-dark);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
}

.sgt-empty p {
    color: var(--sgt-body);
    font-size: 14px;
    margin: 0 0 18px;
}

.sgt-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.sgt-page {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 50px;
    border: 1.5px solid var(--sgt-border);
    background: #fff;
    color: var(--sgt-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: .25s;
}

.sgt-page:hover,
.sgt-page.active {
    background: var(--sgt-primary);
    border-color: var(--sgt-primary);
    color: #fff;
}

/* =========================================================================
   4. WHY BOOK + CTA
   ========================================================================= */
.sgt-why {
    background: #fff;
    padding: 70px 0;
}

.sgt-why-head {
    text-align: center;
    margin-bottom: 34px;
}

.sgt-why-item {
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: var(--sgt-radius);
    padding: 26px 20px;
    height: 100%;
    text-align: center;
    transition: .3s;
    box-shadow: var(--sgt-shadow);
}

.sgt-why-item:hover {
    box-shadow: var(--sgt-shadow-hover);
    transform: translateY(-4px);
    border-color: rgba(249, 130, 37, .5);
}

.sgt-why-item i {
    font-size: 24px;
    color: var(--sgt-primary);
    background: var(--sgt-primary-soft);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.sgt-why-item h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--sgt-dark);
    margin: 0 0 8px;
}

.sgt-why-item p {
    font-size: 13.5px;
    color: var(--sgt-body);
    margin: 0;
    line-height: 1.6;
}

.sgt-cta {
    background: var(--sgt-bg);
    padding: 0 0 70px;
}

.sgt-cta-inner {
    background: linear-gradient(120deg, var(--sgt-dark) 0%, #1c303d 100%);
    border: 1px solid var(--sgt-dark);
    border-radius: 22px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

/* soft orange light in the corner (a glow, so no hard edge crosses the text or buttons) */
.sgt-cta-inner::after {
    content: "";
    position: absolute;
    right: -140px;
    top: -160px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(249, 130, 37, .2) 0%, rgba(249, 130, 37, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.sgt-cta-text {
    position: relative;
    z-index: 1;
}

.sgt-cta-text h3 {
    color: #fff;
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    margin: 0 0 8px;
}

.sgt-cta-text p {
    color: rgba(255, 255, 255, .78);
    margin: 0;
    font-size: 14.5px;
    max-width: 640px;
    text-wrap: pretty;
}

.sgt-cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    align-items: center;
}

/* =========================================================================
   5. HOTEL DETAILS — HEADER
   ========================================================================= */
.sgt-hd-head-area {
    background: var(--sgt-bg);
    padding: 34px 0 0;
}

.sgt-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--sgt-body);
    margin-bottom: 16px;
}

.sgt-crumbs a {
    color: var(--sgt-body);
    text-decoration: none;
}

.sgt-crumbs a:hover {
    color: var(--sgt-primary);
}

.sgt-crumbs i {
    font-size: 9px;
    color: #B6C1C9;
}

.sgt-crumbs span {
    color: var(--sgt-dark);
    font-weight: 600;
}

.sgt-hd-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.sgt-hd-head-left {
    flex: 1 1 380px;
    min-width: 0;
}

.sgt-hd-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.sgt-badge-type {
    background: var(--sgt-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

.sgt-hd-stars {
    color: var(--sgt-primary);
    font-size: 12px;
    display: inline-flex;
    gap: 2px;
}

.sgt-badge-deal {
    background: var(--sgt-primary-soft);
    color: var(--sgt-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.sgt-hd-title {
    font-size: clamp(24px, 3.2vw, 38px);
    font-weight: 700;
    color: var(--sgt-dark);
    margin: 0 0 10px;
    line-height: 1.22;
}

.sgt-hd-address {
    font-size: 14.5px;
    color: var(--sgt-body);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sgt-hd-address i {
    color: var(--sgt-primary);
}

.sgt-map-link {
    color: var(--sgt-primary);
    font-weight: 600;
    text-decoration: underline;
    font-size: 13.5px;
}

.sgt-hd-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sgt-hd-score {
    background: var(--sgt-primary);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    padding: 7px 13px;
    border-radius: 12px 12px 12px 3px;
}

.sgt-hd-score-text {
    font-weight: 700;
    color: var(--sgt-dark);
    font-size: 14.5px;
}

.sgt-hd-score-text small {
    display: block;
    font-weight: 400;
    color: var(--sgt-body);
    font-size: 12.5px;
}

.sgt-hd-head-right {
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: var(--sgt-radius);
    padding: 20px 24px;
    box-shadow: var(--sgt-shadow);
    flex: 0 1 300px;
}

.sgt-hd-price {
    margin-bottom: 14px;
}

.sgt-hd-from {
    display: block;
    font-size: 12.5px;
    color: var(--sgt-body);
}

.sgt-hd-price del {
    font-size: 15px;
    color: #9AA7B1;
    margin-right: 6px;
}

.sgt-hd-price strong {
    font-size: 30px;
    font-weight: 700;
    color: var(--sgt-primary);
}

.sgt-hd-price small {
    display: block;
    font-size: 12.5px;
    color: var(--sgt-body);
    margin-top: 3px;
}

.sgt-hd-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sgt-icon-btn {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    border: 1.5px solid var(--sgt-border);
    background: #fff;
    color: var(--sgt-dark);
    cursor: pointer;
    transition: .25s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sgt-icon-btn:hover,
.sgt-icon-btn.active {
    border-color: var(--sgt-primary);
    color: var(--sgt-primary);
    background: var(--sgt-primary-soft);
}

/* =========================================================================
   6. HOTEL DETAILS — GALLERY (image left, labelled cards right)
   ========================================================================= */
.sgt-gallery-area {
    background: var(--sgt-bg);
    padding: 26px 0 0;
}

.sgt-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* Fills its column at the height of the photo list beside it. (A 4:3 ratio capped at 460px high used
   to shrink it to 613px wide, leaving an empty gap before the list.) */
.sgt-gallery-main {
    position: relative;
    border-radius: var(--sgt-radius);
    overflow: hidden;
    border: 1px solid var(--sgt-border);
    background: var(--sgt-dark-soft);
    height: 460px;
}

.sgt-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: sgtFade .45s ease;
}

@keyframes sgtFade {
    from {
        opacity: .35;
        transform: scale(1.02);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.sgt-gallery-label {
    position: absolute;
    left: 16px;
    top: 16px;
    background: var(--sgt-primary);
    color: #fff;
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
}

.sgt-gallery-count {
    position: absolute;
    right: 16px;
    bottom: 16px;
    background: rgba(42, 68, 86, .92);
    color: #fff;
    padding: 8px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* right column of labelled thumb cards */
.sgt-gallery-side {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 2px;
    grid-auto-rows: 1fr;
}

.sgt-gallery-side::-webkit-scrollbar {
    width: 5px;
}

.sgt-gallery-side::-webkit-scrollbar-thumb {
    background: var(--sgt-border);
    border-radius: 5px;
}

.sgt-thumb {
    display: grid;
    grid-template-columns: 74px 1fr auto;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1.5px solid var(--sgt-border);
    border-radius: 14px;
    padding: 8px 12px 8px 8px;
    cursor: pointer;
    transition: .3s;
    text-align: left;
    font-family: inherit;
    width: 100%;
    min-height: 76px;
}

.sgt-thumb:hover {
    border-color: var(--sgt-primary);
    transform: translateX(3px);
}

.sgt-thumb.active {
    border-color: var(--sgt-primary);
    background: var(--sgt-primary-soft);
}

.sgt-thumb-img {
    display: block;
    width: 74px;
    height: 58px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--sgt-dark-soft);
}

.sgt-thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sgt-thumb-text {
    min-width: 0;
}

.sgt-thumb-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--sgt-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sgt-thumb-text small {
    display: block;
    font-size: 12px;
    color: var(--sgt-body);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sgt-thumb>i {
    color: var(--sgt-primary);
    font-size: 12px;
    opacity: 0;
    transform: translateX(-4px);
    transition: .3s;
}

.sgt-thumb:hover>i,
.sgt-thumb.active>i {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================================================
   7. HOTEL DETAILS — BODY BLOCKS
   ========================================================================= */
.sgt-hd-body {
    background: var(--sgt-bg);
    padding: 34px 0 70px;
    position: sticky;

}

.sgt-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    background: #fff;
    padding: 8px;
    border: 1px solid var(--sgt-border);
    border-radius: 50px;
    margin-bottom: 22px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.sgt-tabs::-webkit-scrollbar {
    display: none;
}

.sgt-tabs a {
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sgt-body);
    text-decoration: none;
    white-space: nowrap;
    transition: .25s;
}

.sgt-tabs a:hover {
    background: var(--sgt-bg);
    color: var(--sgt-dark);
}

.sgt-tabs a.active {
    background: var(--sgt-primary);
    color: #fff;
}

/* sticky ONLY on desktop — on mobile it scrolls away with the page */
@media (min-width: 992px) {
    .sgt-tabs {
        position: sticky;
        top: 12px;
        z-index: 20;
        box-shadow: var(--sgt-shadow);
    }
}

.sgt-quick-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.sgt-fact {
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    box-shadow: var(--sgt-shadow);
}

.sgt-fact i {
    color: var(--sgt-primary);
    font-size: 18px;
    margin-bottom: 8px;
    display: block;
}

.sgt-fact span {
    display: block;
    font-size: 12px;
    color: var(--sgt-body);
    margin-bottom: 3px;
}

.sgt-fact strong {
    font-size: 14px;
    color: var(--sgt-dark);
    font-weight: 700;
}

.sgt-block {
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: var(--sgt-radius);
    padding: 28px;
    margin-bottom: 22px;
    scroll-margin-top: 20px;
    box-shadow: var(--sgt-shadow);
}

@media (min-width: 992px) {
    .sgt-block {
        scroll-margin-top: 90px;
    }
}

.sgt-block-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--sgt-dark);
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sgt-border);
    position: relative;
}

.sgt-block-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 52px;
    height: 3px;
    background: var(--sgt-primary);
    border-radius: 3px;
}

.sgt-block p {
    font-size: 14.8px;
    color: var(--sgt-body);
    line-height: 1.75;
    margin: 0 0 14px;
}

.sgt-highlights {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.sgt-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--sgt-dark);
}

.sgt-highlights i {
    color: var(--sgt-primary);
    background: var(--sgt-primary-soft);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex: 0 0 20px;
    margin-top: 3px;
}

/* amenities */
.sgt-amenity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.sgt-amenity {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--sgt-dark);
    transition: .25s;
}

.sgt-amenity:hover {
    background: var(--sgt-primary-soft);
    border-color: rgba(249, 130, 37, .45);
}

.sgt-amenity i {
    color: var(--sgt-primary);
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex: 0 0 18px;
}

/* rooms */
.sgt-room {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    gap: 18px;
    align-items: center;
    border: 1px solid var(--sgt-border);
    border-radius: 14px;
    padding: 14px;
    transition: .3s;
}

.sgt-room+.sgt-room {
    margin-top: 14px;
}

.sgt-room:hover {
    border-color: var(--sgt-primary);
    box-shadow: var(--sgt-shadow);
}

.sgt-room-img {
    border-radius: 11px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--sgt-dark-soft);
}

.sgt-room-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sgt-room-info {
    min-width: 0;
}

.sgt-room-info h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--sgt-dark);
    margin: 0 0 10px;
}

.sgt-room-specs {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.sgt-room-specs li {
    font-size: 13px;
    color: var(--sgt-body);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sgt-room-specs i {
    color: var(--sgt-primary);
    font-size: 12px;
}

.sgt-room-note {
    font-size: 13px;
    color: #2E9E6B;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sgt-room-book {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.sgt-room-price strong {
    font-size: 22px;
    font-weight: 700;
    color: var(--sgt-primary);
}

.sgt-room-price small {
    font-size: 12px;
    color: var(--sgt-body);
    margin-left: 3px;
}

/* map + nearby */
.sgt-map {
    border-radius: 14px;
    overflow: hidden;
    height: 320px;
    margin-bottom: 20px;
    background: var(--sgt-dark-soft);
    border: 1px solid var(--sgt-border);
}

.sgt-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.sgt-nearby {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sgt-nearby-col {
    border: 1px solid var(--sgt-border);
    border-radius: 13px;
    padding: 16px;
}

.sgt-nearby-col h5 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sgt-dark);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sgt-nearby-col h5 i {
    color: var(--sgt-primary);
    font-size: 13px;
}

.sgt-nearby-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sgt-nearby-col li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    color: var(--sgt-body);
    padding: 8px 0;
    border-bottom: 1px dashed var(--sgt-border);
}

.sgt-nearby-col li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.sgt-nearby-col li span {
    color: var(--sgt-dark);
    font-weight: 600;
    white-space: nowrap;
}

/* policies */
.sgt-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.sgt-policy {
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: 13px;
    padding: 18px;
    transition: .3s;
}

.sgt-policy:hover {
    border-color: rgba(249, 130, 37, .5);
    box-shadow: var(--sgt-shadow);
}

.sgt-policy i {
    color: var(--sgt-primary);
    font-size: 17px;
    margin-bottom: 9px;
    display: block;
}

.sgt-policy h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--sgt-dark);
    margin: 0 0 6px;
}

.sgt-policy p {
    font-size: 13.5px;
    color: var(--sgt-body);
    margin: 0;
    line-height: 1.65;
}

/* reviews */
.sgt-review-summary {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 24px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 22px;
}

.sgt-review-score {
    text-align: center;
}

.sgt-review-score strong {
    display: block;
    font-size: 42px;
    font-weight: 700;
    color: var(--sgt-primary);
    line-height: 1;
}

.sgt-review-score span {
    display: block;
    font-weight: 700;
    color: var(--sgt-dark);
    margin: 6px 0 2px;
}

.sgt-review-score small {
    color: var(--sgt-body);
    font-size: 12.5px;
}

.sgt-review-bars {
    display: grid;
    gap: 10px;
}

.sgt-bar {
    display: grid;
    grid-template-columns: 120px 1fr 34px;
    align-items: center;
    gap: 12px;
}

.sgt-bar span {
    font-size: 13px;
    color: var(--sgt-body);
}

.sgt-bar-track {
    height: 7px;
    background: var(--sgt-dark-soft);
    border-radius: 7px;
    overflow: hidden;
}

.sgt-bar-track i {
    display: block;
    height: 100%;
    background: var(--sgt-primary);
    border-radius: 7px;
}

.sgt-bar b {
    font-size: 13px;
    color: var(--sgt-dark);
    text-align: right;
}

.sgt-review-list {
    display: grid;
    gap: 14px;
}

.sgt-review {
    border: 1px solid var(--sgt-border);
    border-radius: 13px;
    padding: 18px;
    transition: .3s;
}

.sgt-review:hover {
    border-color: rgba(249, 130, 37, .5);
}

.sgt-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.sgt-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: var(--sgt-dark);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.sgt-review-head h6 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sgt-dark);
    margin: 0;
}

.sgt-review-head small {
    font-size: 12.5px;
    color: var(--sgt-body);
}

.sgt-review-rating {
    margin-left: auto;
    background: var(--sgt-primary-soft);
    color: var(--sgt-primary);
    font-weight: 700;
    font-size: 13px;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap;
}

.sgt-review p {
    font-size: 14px;
    color: var(--sgt-body);
    margin: 0;
    line-height: 1.7;
}

/* faq accordion (scoped) */
.sgt-accordion .accordion-item {
    border: 1px solid var(--sgt-border);
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 10px;
    background: #fff;
}

.sgt-accordion .accordion-button {
    font-size: 15px;
    font-weight: 600;
    color: var(--sgt-dark);
    background: #fff;
    padding: 16px 18px;
    box-shadow: none;
}

.sgt-accordion .accordion-button:not(.collapsed) {
    background: var(--sgt-primary-soft);
    color: var(--sgt-primary);
}

.sgt-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.sgt-accordion .accordion-body {
    font-size: 14px;
    color: var(--sgt-body);
    line-height: 1.7;
    padding: 0 18px 18px;
}

/* =========================================================================
   8. HOTEL DETAILS — BOOKING SIDEBAR
   ========================================================================= */
.sgt-sidebar,
.sgt-sidebar-sticky {
    display: grid;
    gap: 18px;
}

/* The booking card scrolls with the page: it is taller than most screens, so a sticky card kept its
   own "Request Booking" button out of reach. The contact box and trust list below it (short enough to
   fit) stay in view instead, below the sticky site header. */
@media (min-width: 992px) {
    .sgt-sidebar {
        height: 100%;
        align-content: start;
    }

    .sgt-sidebar-sticky {
        position: sticky;
        top: 104px;
    }
}

.sgt-book-card {
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: var(--sgt-radius);
    padding: 22px;
    box-shadow: var(--sgt-shadow);
    scroll-margin-top: 90px;
}

.sgt-book-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sgt-border);
    margin-bottom: 16px;
}

.sgt-book-head span {
    font-size: 12.5px;
    color: var(--sgt-body);
    display: block;
}

.sgt-book-head strong {
    font-size: 27px;
    font-weight: 700;
    color: var(--sgt-primary);
}

.sgt-book-head small {
    font-size: 12.5px;
    color: var(--sgt-body);
    margin-left: 3px;
}

.sgt-book-score {
    background: var(--sgt-primary-soft);
    color: var(--sgt-primary);
    font-weight: 700;
    font-size: 13.5px;
    padding: 7px 12px;
    border-radius: 50px;
    white-space: nowrap;
}

.sgt-book-form {
    display: grid;
    gap: 13px;
}

.sgt-book-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.sgt-book-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sgt-book-field label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sgt-dark);
    margin: 0;
}

.sgt-book-field input,
.sgt-book-field textarea {
    width: 100%;
    border: 1.5px solid var(--sgt-border);
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    color: var(--sgt-dark);
    outline: none;
    background: #fff;
    transition: .25s;
    font-family: inherit;
    resize: vertical;
}

.sgt-book-field input:focus,
.sgt-book-field textarea:focus {
    border-color: var(--sgt-primary);
    box-shadow: 0 0 0 3px rgba(249, 130, 37, .12);
}

.sgt-price-summary {
    background: var(--sgt-bg);
    border: 1px solid var(--sgt-border);
    border-radius: 12px;
    padding: 14px;
    display: grid;
    gap: 9px;
}

.sgt-sum-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    color: var(--sgt-body);
}

.sgt-sum-row b {
    color: var(--sgt-dark);
    white-space: nowrap;
}

.sgt-sum-total {
    border-top: 1px solid var(--sgt-border);
    padding-top: 9px;
    font-weight: 700;
    color: var(--sgt-dark);
}

.sgt-sum-total b {
    color: var(--sgt-primary);
    font-size: 17px;
}

/* fixed: lock icon no longer overlaps the text */
.sgt-book-note {
    font-size: 12.5px;
    color: var(--sgt-body);
    margin: 2px 0 0;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    text-align: left;
}

.sgt-book-note i {
    color: #2E9E6B;
    font-size: 12px;
    flex: 0 0 auto;
    margin-top: 3px;
}

.sgt-book-note span {
    flex: 1 1 auto;
}

.sgt-agent-card {
    background: var(--sgt-dark);
    border: 1px solid var(--sgt-dark);
    border-radius: var(--sgt-radius);
    padding: 24px 18px;
    text-align: center;
    color: #fff;
}

.sgt-agent-card>i {
    font-size: 26px;
    color: var(--sgt-primary);
    margin-bottom: 10px;
    display: block;
}

.sgt-agent-card h5 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #fff;
}

.sgt-agent-card p {
    font-size: 13px;
    opacity: .78;
    margin: 0 0 14px;
    line-height: 1.6;
}

.sgt-agent-card .sgt-phone-btn {
    width: 100%;
}

.sgt-agent-mail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    word-break: break-word;
    transition: .25s;
}

.sgt-agent-mail:hover {
    color: var(--sgt-primary);
}

.sgt-trust {
    list-style: none;
    margin: 0;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--sgt-border);
    border-radius: var(--sgt-radius);
    display: grid;
    gap: 12px;
    box-shadow: var(--sgt-shadow);
}

.sgt-trust li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.8px;
    color: var(--sgt-dark);
}

.sgt-trust i {
    color: var(--sgt-primary);
    width: 18px;
    text-align: center;
    flex: 0 0 18px;
}

.sgt-similar {
    background: #fff;
    padding: 60px 0 70px;
}

/* =========================================================================
   9. RESPONSIVE
   ========================================================================= */
@media (max-width: 1199.98px) {
    .sgt-search-form {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .sgt-field-btn {
        grid-column: 1 / -1;
    }

    .sgt-field-btn .sgt-theme-btn {
        width: 100%;
    }

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

    .sgt-room {
        grid-template-columns: 150px 1fr;
    }

    .sgt-room-book {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .sgt-gallery {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .sgt-search-wrap {
        padding-top: 36px;
    }

    .sgt-search-card {
        padding: 20px;
    }

    .sgt-hd-head-right {
        width: 100%;
        flex: 1 1 100%;
    }

    .sgt-hd-actions .sgt-theme-btn {
        flex: 1 1 auto;
    }

    /* gallery stacks: big image on top, thumb cards scroll horizontally */
    .sgt-gallery {
        grid-template-columns: 1fr;
    }

    .sgt-gallery-main {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .sgt-gallery-side {
        display: flex;
        grid-template-rows: none;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        gap: 10px;
    }

    .sgt-gallery-side::-webkit-scrollbar {
        height: 4px;
    }

    .sgt-thumb {
        flex: 0 0 230px;
        min-height: 0;
    }

    .sgt-thumb>i {
        display: none;
    }

    .sgt-thumb {
        grid-template-columns: 62px 1fr;
    }

    .sgt-thumb-img {
        width: 62px;
        height: 50px;
    }

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

    .sgt-block {
        padding: 22px;
    }
}

@media (max-width: 767.98px) {
    .sgt-search-form {
        grid-template-columns: 1fr 1fr;
    }

    .sgt-field:first-child,
    .sgt-guest-field {
        grid-column: 1 / -1;
    }

    .sgt-chip-clear {
        margin-left: 0;
    }

    .sgt-quick-facts {
        grid-template-columns: repeat(2, 1fr);
    }

    .sgt-policy-grid {
        grid-template-columns: 1fr;
    }

    .sgt-review-summary {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sgt-bar {
        grid-template-columns: 96px 1fr 30px;
    }

    .sgt-room {
        grid-template-columns: 1fr;
    }

    .sgt-room-img {
        aspect-ratio: 16 / 9;
    }

    .sgt-cta-inner {
        padding: 28px 22px;
    }

    .sgt-cta-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .sgt-cta-actions>* {
        width: 100%;
    }

    .sgt-toolbar {
        padding: 12px 14px;
    }

    .sgt-sort {
        width: 100%;
    }

    .sgt-sort .sgt-dd {
        width: auto;
        flex: 1;
    }

    .sgt-listing-area {
        padding: 30px 0 55px;
    }

    .sgt-why,
    .sgt-similar {
        padding: 50px 0;
    }

    .sgt-hd-body {
        padding: 24px 0 55px;
    }

    .sgt-gallery-main {
        aspect-ratio: 4 / 3;
    }
}

/* small phones — cards stay 2 per row */
@media (max-width: 575.98px) {
    .sgt-card-body {
        padding: 12px;
    }

    .sgt-card-title {
        font-size: 14.5px;
    }

    .sgt-card-location {
        font-size: 12px;
    }

    .sgt-card-features {
        display: none;
    }

    .sgt-price-now {
        font-size: 17px;
    }

    .sgt-card-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .sgt-card-foot .sgt-theme-btn {
        width: 100%;
        justify-content: space-between;
        padding-left: 14px;
    }

    .sgt-card-deal {
        font-size: 10.5px;
        padding: 4px 9px;
    }

    .sgt-card-score {
        font-size: 10.5px;
        padding: 4px 8px;
    }

    .sgt-card-type {
        display: none;
    }

    .sgt-nearby {
        grid-template-columns: 1fr;
    }

    /* two short columns instead of one long list of 16 */
    .sgt-amenity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sgt-amenity {
        padding: 10px 12px;
        font-size: 13px;
    }

    .sgt-book-row {
        grid-template-columns: 1fr;
    }

    .sgt-hd-head-right {
        padding: 16px;
    }

    .sgt-block-title {
        font-size: 18px;
    }

    .sgt-block {
        padding: 18px;
    }

    /* the form keeps the two-column tablet layout: check-in and check-out share a row */

    /* one card per row: icon on the left, title and text on the right */
    .sgt-why-item {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
        padding: 18px;
        text-align: left;
    }

    .sgt-why-item i {
        grid-row: span 2;
        width: 48px;
        height: 48px;
        font-size: 20px;
        margin-bottom: 0;
    }

    .sgt-why-item h5 {
        margin: 3px 0 4px;
    }

    .sgt-thumb {
        flex: 0 0 200px;
    }

    .sgt-room-book {
        flex-direction: column;
        align-items: stretch;
    }

    .sgt-room-book .sgt-theme-btn {
        justify-content: space-between;
        padding-left: 18px;
    }

    .sgt-phone-btn {
        font-size: 13px;
        padding: 11px 14px;
    }
}

/* highlight pulse when a room is selected from the room list */
.sgt-flash {
    animation: sgtFlash .9s ease;
}

@keyframes sgtFlash {

    0%,
    100% {
        box-shadow: var(--sgt-shadow);
        border-color: var(--sgt-border);
    }

    35% {
        box-shadow: 0 0 0 4px rgba(249, 130, 37, .22);
        border-color: var(--sgt-primary);
    }
}


/* ==========================================================================
   packages-pages
   ========================================================================== */

:root {
    --pk-orange: #F98225;
    --pk-navy: #2A4456;
    --pk-navy-deep: #1C303D;
    --pk-ink: #233642;
    --pk-muted: #6C7A82;
    --pk-line: #E7E2DA;
    --pk-bg-soft: #F7F5F1;
    --pk-white: #FFFFFF;
    --pk-radius: 16px;
}

/* ---------- small reusable bits ---------- */
.pk-card__tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--pk-orange);
    color: var(--pk-white);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    padding: 6px 14px;
    border-radius: 30px;
    z-index: 2;
}

/* ==========================================================================
   PACKAGES INTRO SECTION
   ========================================================================== */
.pk-intro {
    background: var(--pk-white);
}

.pk-intro__img {
    position: relative;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    overflow: hidden;
}

.pk-intro__img img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    display: block;
}

.pk-intro__badge {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: var(--pk-navy);
    color: var(--pk-white);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 30px rgba(28, 48, 61, .25);
}

.pk-intro__badge-num {
    font-family: 'Fraunces', serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    color: var(--pk-white);
}

.pk-intro__badge-text {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--pk-white);
    opacity: .9;
}

.pk-intro__eyebrow-wrap {
    margin-bottom: 16px;
}

.pk-intro__title.site-title {
    margin: 14px 0 0;
    line-height: 1.25;
    color: var(--pk-navy);
}

.pk-intro__lead {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--pk-ink);
    margin: 18px 0 14px;
}

.pk-intro__text {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--pk-muted);
    margin-bottom: 22px;
}

.pk-intro__points {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}

.pk-intro__points li {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--pk-ink);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.pk-intro__points li i {
    color: var(--pk-orange);
    margin-top: 4px;
    flex-shrink: 0;
}

.pk-tour-area .rtx-content {
    padding-top: 18px !important;
}

.pk-tour-area .rtx-content__title {
    margin-top: 0 !important;
}



/* ==========================================================================
   WHY BOOK A PACKAGE SECTION
   ========================================================================== */
.pk-why {
    background: var(--pk-bg-soft);
}

.pk-why__card {
    background: var(--pk-white);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    padding: 28px 22px;
    height: 100%;
    transition: border-color .25s ease, transform .25s ease;
}

.pk-why__card:hover {
    border-color: var(--pk-orange);
    transform: translateY(-4px);
}

.pk-why__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(249, 130, 37, .12);
    color: var(--pk-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

/* phones: one card per row, icon on the left of the title and text */
@media (max-width: 575.98px) {
    .pk-why__card {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 14px;
        padding: 18px;
    }

    .pk-why__icon {
        grid-row: span 2;
        width: 48px;
        height: 48px;
        margin-bottom: 0;
    }

    .pk-why__title {
        margin-top: 3px;
    }
}

.pk-why__title {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--pk-navy);
    margin-bottom: 8px;
}

.pk-why__text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--pk-muted);
    margin: 0;
}

/* ==========================================================================
   FAQ SECTION 
   ========================================================================== */
.pk-faq {
    background: var(--pk-bg-soft);
    padding-top: 70px !important;
    padding-bottom: 100px !important;
}

.pk-faq .site-heading {
    margin-bottom: 36px;
}

/* a centred heading: centre the heading block itself, not only the text inside it
   (.site-heading.inline is a flex row that kept the block at the left of the column) */
.site-heading.inline.text-center {
    justify-content: center;
}

.pk-faq .site-title {
    font-size: 28px;
}

.pk-accordion__item {
    border: 1px solid var(--pk-line);
    border-radius: 14px !important;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--pk-white);
    box-shadow: 0 4px 16px rgba(28, 48, 61, .05);
    transition: border-color .2s ease;
}

.pk-accordion__item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--pk-orange);
}

.pk-accordion__item .accordion-button {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--pk-navy);
    background: var(--pk-white);
    padding: 20px 24px;
    box-shadow: none !important;
}

.pk-accordion__item .accordion-button:not(.collapsed) {
    color: var(--pk-orange);
}

.pk-accordion__item .accordion-button::after {
    filter: none;
}

.pk-accordion__item .accordion-body {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--pk-muted);
    padding: 0 24px 22px;
}

.pk-accordion__item .accordion-body a {
    color: var(--pk-orange);
    font-weight: 600;
}

/* ==========================================================================
   PACKAGES CTA SECTION
   ========================================================================== */
.pk-cta {
    padding-bottom: 100px;
}

.pk-cta__box {
    background: var(--pk-navy);
    border-radius: var(--pk-radius);
    padding: 44px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.pk-cta__text h3 {
    font-family: 'Fraunces', serif;
    color: var(--pk-white) !important;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 8px;
}

.pk-cta__text p {
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
    margin: 0;
}

.pk-cta__btn {
    flex-shrink: 0;
}

/* ==========================================================================
   PACKAGE-DETAILS: HERO / GALLERY
   ========================================================================== */
.pkd-hero__gallery {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 14px;
    height: 400px;
}

.pkd-hero__main {
    min-height: 0;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    overflow: hidden;
}

.pkd-hero__main img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    display: block;
}

.pkd-hero__side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    min-height: 0;
}

.pkd-hero__side img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    display: block;
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
}

/* ---------- quick facts bar ---------- */
.pkd-facts {
    margin-top: 28px;
    background: var(--pk-white);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    padding: 26px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.pkd-facts__title {
    position: relative;
}

.pkd-facts__title .pk-card__tag {
    position: static;
    display: inline-block;
    margin-bottom: 10px;
}

.pkd-facts__title h3 {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--pk-navy) !important;
    margin: 0 0 6px;
}

.pkd-facts__title p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--pk-muted);
    margin: 0;
}

.pkd-facts__title p i {
    color: var(--pk-orange);
    margin-right: 6px;
}

/* each fact is now its own small, clearly separated, bordered box */
.pkd-facts__list {
    list-style: none;
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.pkd-facts__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--pk-line);
    border-radius: 12px;
    background: var(--pk-bg-soft);
    padding: 12px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--pk-muted);
}

.pkd-facts__list li i {
    color: var(--pk-orange);
    font-size: 18px;
}

.pkd-facts__list li strong {
    display: block;
    color: var(--pk-navy);
    font-size: 14px;
    font-weight: 600;
}

/* ==========================================================================
   PACKAGE-DETAILS: BODY (overview / itinerary / inclusions / booking card)
   ========================================================================== */
.pkd-block {
    background: var(--pk-white);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    padding: 32px;
    margin-bottom: 24px;
}

.pkd-block__title {
    font-family: 'Fraunces', serif;
    font-size: 21px;
    font-weight: 600;
    color: var(--pk-navy) !important;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pk-line);
}

.pkd-block p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: var(--pk-ink);
}

.pkd-block__highlights {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.pkd-block__highlights li {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: var(--pk-ink);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.pkd-block__highlights li i {
    color: var(--pk-orange);
    margin-top: 3px;
}

/* itinerary accordion reuses .pk-accordion__item, just tighter titles */
.pkd-itinerary .accordion-button {
    font-size: 15px;
}

/* inclusions / exclusions checklist */
.pkd-check {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--pk-line);
    border-radius: 12px;
    padding: 6px 18px;
}

.pkd-check li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: var(--pk-ink);
    padding: 9px 0;
    border-bottom: 1px dashed var(--pk-line);
}

.pkd-check li:last-child {
    border-bottom: none;
}

.pkd-check--in li i {
    color: #2E9E5B;
    margin-top: 3px;
}

.pkd-check--out li {
    color: var(--pk-muted);
}

.pkd-check--out li i {
    color: #C6544A;
    margin-top: 3px;
}

/* ---------- sticky booking sidebar card ---------- */
/* sticks below the sticky site header (84px) instead of sliding under it */
.pkd-booking {
    position: sticky;
    top: 104px;
    scroll-margin-top: 100px;
    background: var(--pk-navy);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--pk-radius);
    padding: 30px;
}

.pkd-booking__price {
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    padding-bottom: 18px;
    margin-bottom: 18px;
}

.pkd-booking__price-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, .65) !important;
    display: block;
    margin-bottom: 6px;
}

.pkd-booking__price-value {
    font-family: 'Fraunces', serif;
    font-size: 34px;
    font-weight: 600;
    color: var(--pk-white) !important;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pkd-booking__price-value small {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, .65) !important;
}

.pkd-booking__meta {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.pkd-booking__meta li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 12px;
}

.pkd-booking__meta li i {
    color: var(--pk-orange);
    width: 18px;
    text-align: center;
}

.pkd-booking__btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 16px;
}

.pkd-booking__call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
}

.pkd-booking__call i {
    color: var(--pk-orange);
}

.pkd-booking__call:hover {
    color: var(--pk-white);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    .pk-intro__img img {
        min-height: 260px;
    }

    .pkd-hero__gallery {
        height: 320px;
    }

    .pkd-booking {
        position: static;
        margin-top: 8px;
    }
}

@media (max-width: 767.98px) {
    .pk-intro__badge {
        padding: 12px 16px;
    }

    .pk-intro__badge-num {
        font-size: 24px;
    }

    .pk-why__card {
        padding: 22px 16px;
    }

    .pk-why__title {
        font-size: 15px;
    }

    .pk-why__text {
        font-size: 13px;
    }

    .pk-faq {
        padding-top: 50px !important;
        padding-bottom: 70px !important;
    }

    .pk-faq .site-title {
        font-size: 23px;
    }

    .pk-cta__box {
        padding: 32px 24px;
        flex-direction: column;
        text-align: center;
    }

    .pk-cta__text h3 {
        font-size: 21px;
    }

    .pkd-hero__gallery {
        grid-template-columns: 1fr;
        height: auto;
    }

    .pkd-hero__main {
        height: 220px;
    }

    .pkd-hero__side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        height: 110px;
    }

    .pkd-facts {
        padding: 22px 18px;
    }

    .pkd-facts__list {
        gap: 10px;
        width: 100%;
    }

    .pkd-facts__list li {
        flex: 1 1 auto;
        padding: 10px 14px;
    }

    .pkd-block {
        padding: 22px 18px;
    }

    .pkd-block__title {
        font-size: 18px;
    }
}

@media (max-width: 575.98px) {
    .pkd-facts__list li {
        flex: 1 1 40%;
    }
}

.um-custom-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    min-height: 260px;
    padding: 32px 28px;
    border: 1.5px dashed rgba(42, 68, 86, 0.25);
    border-radius: 16px;
    background: #fbfbfb;
}

.um-custom-card__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(249, 130, 37, 0.12);
    color: #F98225;
    font-size: 20px;
    margin-bottom: 18px;
}

.um-custom-card__title {
    font-family: 'Fraunces', serif;
    font-size: 19px;
    font-weight: 600;
    color: #2A4456;
    margin-bottom: 8px;
}

.um-custom-card__text {
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    .um-custom-card {
        min-height: 220px;
        padding: 26px 22px;
    }
}

/* Small "included / excluded" note chip above the itinerary, purely cosmetic */
.um-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(249, 130, 37, 0.08);
    border: 1px solid rgba(249, 130, 37, 0.2);
    margin-bottom: 28px;
}

.um-note i {
    color: #F98225;
    font-size: 16px;
    margin-top: 3px;
}

.um-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #2A4456;
}

/* Cross-sell strip heading tweak so it doesn't read like another package list */
.um-cross-sell .site-title-tagline i {
    margin-right: 6px;
}

@media (min-width: 992px) {
    .pkd-facts.um-facts-inline {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }

    .um-facts-inline .pkd-facts__title {
        flex: 0 0 auto;
        max-width: 360px;
        margin-bottom: 0;
    }

    .um-facts-inline .pkd-facts__list {
        flex: 1 1 auto;
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .um-facts-inline .pkd-facts__list li {
        flex: 1 1 0;
    }
}

/* Below 992px keep the theme's original stacked behaviour — no override needed. */


.sgt-inquiry {
    --sgt-ink: #16242f;
    --sgt-ink-soft: #1f3547;
    --sgt-gold: #c79a3d;
    --sgt-gold-soft: rgba(199, 154, 61, .35);

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    width: 100%;
    /* sits in a grid column: 16px + the row's 24px gutter keeps it 40px below the cards */
    margin: 16px 0 0;
    padding: clamp(26px, 4vw, 40px) clamp(26px, 5vw, 52px);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--sgt-ink) 0%, var(--sgt-ink-soft) 100%);
    overflow: hidden;
    box-shadow:
        0 20px 40px -22px rgba(22, 36, 47, .55),
        0 0 0 1px rgba(199, 154, 61, .16);
}

.sgt-inquiry::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(199, 154, 61, .05) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(-45deg, rgba(199, 154, 61, .05) 0 1px, transparent 1px 26px);
    pointer-events: none;
}

.sgt-inquiry::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 280px;
    height: 280px;
    right: -90px;
    top: -110px;
    background: radial-gradient(circle, rgba(199, 154, 61, .32), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}

.sgt-inquiry__badge {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(199, 154, 61, .28), rgba(199, 154, 61, .06));
    border: 1px solid var(--sgt-gold-soft);
    color: var(--sgt-gold);
    font-size: 20px;
    animation: sgtPulse 3.4s ease-in-out infinite;
}

@keyframes sgtPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(199, 154, 61, .28);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(199, 154, 61, 0);
    }
}

.sgt-inquiry__body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
}

.sgt-inquiry__title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.3;
    color: #fff;
    margin: 0 0 6px;
}

.sgt-inquiry__text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
    margin: 0;
    max-width: 54ch;
}

.sgt-inquiry__btn {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    white-space: nowrap;
}

.sgt-inquiry__btn:focus-visible {
    outline: 2px solid var(--sgt-gold);
    outline-offset: 3px;
    border-radius: 999px;
}

/* =========================================================
   Orange buttons on dark boxes
   The orange buttons turn navy on hover. Inside the navy boxes (package price box, dark banners
   and panels) that is the box's own colour, so the button disappeared. There they fill with
   white instead, with navy text and an orange arrow circle.
   ========================================================= */
:is(.pkd-booking, .pk-cta__box, .sgt-inquiry) .theme-btn::before {
    background: #fff;
}

:is(.pkd-booking, .pk-cta__box, .sgt-inquiry) .theme-btn:hover {
    color: var(--color-dark);
}

:is(.pkd-booking, .pk-cta__box, .sgt-inquiry) .theme-btn:hover i {
    background: var(--theme-color);
    color: #fff;
}

.sgt-cta-inner .sgt-theme-btn:hover,
.sgt-cta-inner .sgt-theme-btn:focus-visible {
    background: #fff;
    color: var(--sgt-dark);
}

.sgt-cta-inner .sgt-theme-btn:hover .sgt-btn-arrow,
.sgt-cta-inner .sgt-theme-btn:focus-visible .sgt-btn-arrow {
    background: var(--sgt-primary);
    color: #fff;
}

/* The hover fill of .theme-btn is a 300px circle growing from the centre, so on buttons wider than
   that (the full-width booking buttons) the two ends stayed orange. Size it from the button instead,
   never smaller than before. */
:is(a, button).theme-btn::before {
    width: max(300px, 110%);
    height: auto;
    aspect-ratio: 1 / 1;
}

@media (max-width: 767px) {
    .sgt-inquiry {
        flex-direction: column;
        text-align: center;
        padding: 30px 24px;
    }

    .sgt-inquiry__text {
        max-width: 100%;
    }

    .sgt-inquiry__btn {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .sgt-inquiry__badge {
        width: 50px;
        height: 50px;
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sgt-inquiry__badge {
        animation: none;
    }
}

/* ==========================================================================
   Pakistan Special Fares 
   ========================================================================== */

/* City chips shown under the intro text on pakistan-fares.html */
.pkf-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 22px 0 26px;
}

.pkf-city-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--theme-color, #0a5c46);
    background: rgba(10, 92, 70, 0.06);
    border: 1px solid rgba(10, 92, 70, 0.16);
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.25s ease, transform 0.25s ease;
}

.pkf-city-chip i {
    font-size: 12px;
    color: var(--theme-color, #0a5c46);
}

.pkf-city-chip:hover {
    background: var(--theme-color, #0a5c46);
    color: #fff;
    transform: translateY(-2px);
}

.pkf-city-chip:hover i {
    color: #fff;
}

/* Small screens: let chips wrap tightly and stay readable */
@media (max-width: 575.98px) {
    .pkf-cities {
        gap: 8px;
        margin: 16px 0 20px;
    }

    .pkf-city-chip {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* =========================================================
   Pakistan Special Fares section
   ========================================================= */

.skpk {
    --skpk-orange: #F98225;
    --skpk-orange-soft: #FFF1E6;
    --skpk-navy: #2A4456;
    --skpk-navy-deep: #1D3242;
    --skpk-text: #55697a;
    --skpk-line: #E8EDF1;
    position: relative;
    box-sizing: border-box;
    padding: 90px 0;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    overflow: hidden;
    padding-bottom: 0px;
    padding-top: 0px;
}

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

.skpk__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------- Main card ---------- */
.skpk__card {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    border-radius: 36px;
    background: linear-gradient(135deg, #ffffff 0%, var(--skpk-orange-soft) 100%);
    border: 1px solid #FBE3D0;
    box-shadow: 0 30px 70px -30px rgba(42, 68, 86, .35);
    overflow: hidden;
}

/* ---------- Left: content ---------- */
.skpk__content {
    padding: 64px 56px 64px 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.skpk__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    margin: 0 0 22px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid #FBE3D0;
    color: var(--skpk-navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.skpk__badge-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--skpk-orange);
    color: #fff;
    font-size: 12px;
}

.skpk__title {
    margin: 0 0 18px;
    color: var(--skpk-navy);
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(30px, 4.2vw, 50px);
    line-height: 1.12;
    letter-spacing: -0.5px;
}

.skpk__text {
    margin: 0 0 28px;
    max-width: 520px;
    color: var(--skpk-text);
    font-size: 17px;
    line-height: 1.7;
}

.skpk__points {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: grid;
    gap: 14px;
}

.skpk__points li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--skpk-navy);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

.skpk__points i {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(249, 130, 37, .14);
    color: var(--skpk-orange);
    font-size: 13px;
}

/* ---------- Button (same style as the theme button) ---------- */
.skpk__btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 6px 6px 6px 30px;
    border-radius: 50px;
    background: var(--skpk-orange);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease;
    box-shadow: 0 14px 28px -12px rgba(249, 130, 37, .7);
}

.skpk__btn-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--skpk-navy);
    font-size: 18px;
}

.skpk__btn-icon i {
    transform: rotate(-45deg);
    /* arrow up-right */
    transition: transform .35s ease;
}

.skpk__btn:hover,
.skpk__btn:focus-visible {
    background: var(--skpk-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(42, 68, 86, .7);
}

.skpk__btn:hover .skpk__btn-icon i,
.skpk__btn:focus-visible .skpk__btn-icon i {
    transform: rotate(0deg);
    /* arrow straight right */
}

.skpk__btn:focus-visible {
    outline: 3px solid rgba(249, 130, 37, .45);
    outline-offset: 3px;
}

/* ---------- Right: route panel ---------- */
.skpk__panel {
    position: relative;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    background:
        radial-gradient(circle at 85% 12%, rgba(249, 130, 37, .38) 0, rgba(249, 130, 37, 0) 46%),
        linear-gradient(160deg, var(--skpk-navy) 0%, var(--skpk-navy-deep) 100%);
    color: #fff;
    overflow: hidden;
}

.skpk__panel::before {
    /* subtle dotted texture */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.4px);
    background-size: 22px 22px;
    pointer-events: none;
}

.skpk__panel>* {
    position: relative;
    z-index: 1;
}

.skpk__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 4px;
}

.skpk__panel-title {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    opacity: .8;
}

.skpk__plane {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--skpk-orange);
    color: #fff;
    font-size: 18px;
    animation: skpk-float 4s ease-in-out infinite;
}

.skpk__route {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    text-decoration: none;
    transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}

.skpk__route:hover {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(249, 130, 37, .8);
    transform: translateX(6px);
    color: #fff;
}

.skpk__route-code {
    flex: 0 0 auto;
    min-width: 78px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
}

.skpk__route-code i {
    color: var(--skpk-orange);
    font-size: 12px;
}

.skpk__route-city {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
}

.skpk__route-city small {
    font-size: 13px;
    font-weight: 400;
    opacity: .7;
}

.skpk__route-tag {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 50px;
    background: var(--skpk-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.skpk__note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    line-height: 1.5;
}

.skpk__note i {
    color: var(--skpk-orange);
}

@keyframes skpk-float {

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

    50% {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .skpk__plane {
        animation: none;
    }

    .skpk__btn,
    .skpk__btn-icon i,
    .skpk__route {
        transition: none;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .skpk__content {
        padding: 52px 40px 52px 48px;
    }

    .skpk__panel {
        padding: 48px 36px;
    }
}

@media (max-width: 991px) {
    .skpk {
        padding: 70px 0;
    }

    .skpk__card {
        grid-template-columns: 1fr;
        border-radius: 28px;
    }

    .skpk__content {
        padding: 48px 40px 40px;
    }

    .skpk__text {
        max-width: 620px;
    }

    .skpk__panel {
        padding: 40px;
    }
}

@media (max-width: 575px) {
    .skpk {
        padding: 50px 0;
    }

    .skpk__card {
        border-radius: 22px;
    }

    .skpk__content {
        padding: 34px 22px 30px;
    }

    .skpk__text {
        font-size: 16px;
        margin-bottom: 22px;
    }

    .skpk__points {
        margin-bottom: 28px;
        gap: 12px;
    }

    .skpk__points li {
        font-size: 15px;
    }

    .skpk__btn {
        font-size: 16px;
        padding-left: 24px;
        gap: 12px;
    }

    .skpk__btn-icon {
        width: 46px;
        height: 46px;
        font-size: 16px;
    }

    .skpk__panel {
        padding: 30px 20px;
        gap: 14px;
    }

    .skpk__route {
        padding: 14px;
        gap: 10px;
        border-radius: 16px;
        flex-wrap: wrap;
    }

    .skpk__route-code {
        min-width: 66px;
        font-size: 14px;
    }

    .skpk__route-city {
        font-size: 16px;
    }

    .skpk__route-tag {
        font-size: 11px;
        padding: 6px 10px;
    }
}

@media (max-width: 374px) {
    .skpk__content {
        padding: 28px 16px 26px;
    }

    .skpk__btn {
        font-size: 15px;
        padding-left: 20px;
    }

    .skpk__route-tag {
        display: none;
    }
}


/* =========================================================
   Contact page
   ========================================================= */

.skct {
    --skct-orange: #F98225;
    --skct-navy: #2A4456;
    --skct-navy-deep: #1D3242;
    --skct-text: #55697a;
    --skct-line: #E8EDF1;
    --skct-soft: #FFF1E6;
    --skct-field: #F6F8FA;
    position: relative;
    box-sizing: border-box;
    background: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--skct-text);
    overflow: hidden;
}

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

.skct a,
.skct a:hover,
.skct a:focus {
    text-decoration: none;
}

.skct__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------------- Buttons (same style as the theme button) ---------------- */
.skct__btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 6px 6px 6px 30px;
    border: 0;
    border-radius: 50px;
    background: var(--skct-orange);
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 14px 28px -12px rgba(249, 130, 37, .7);
    transition: background-color .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.skct__btn-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--skct-navy);
    font-size: 18px;
}

.skct__btn-icon i {
    transform: rotate(-45deg);
    transition: transform .35s ease;
}

.skct__btn:hover,
.skct__btn:focus-visible {
    background: var(--skct-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(42, 68, 86, .7);
}

.skct__btn:hover .skct__btn-icon i,
.skct__btn:focus-visible .skct__btn-icon i {
    transform: rotate(0deg);
}

.skct__btn:focus-visible {
    outline: 3px solid rgba(249, 130, 37, .45);
    outline-offset: 3px;
}

.skct__btn--ghost {
    padding: 0 30px;
    height: 64px;
    gap: 12px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .55);
    box-shadow: none;
}

.skct__btn--ghost:hover,
.skct__btn--ghost:focus-visible {
    background: #fff;
    color: var(--skct-navy);
    border-color: #fff;
    box-shadow: none;
}

/* on the navy hero a navy hover would hide the orange button: it turns white there */
.skct__hero .skct__btn:not(.skct__btn--ghost):hover,
.skct__hero .skct__btn:not(.skct__btn--ghost):focus-visible {
    background: #fff;
    color: var(--skct-navy);
    box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .45);
}

.skct__hero .skct__btn:not(.skct__btn--ghost):hover .skct__btn-icon,
.skct__hero .skct__btn:not(.skct__btn--ghost):focus-visible .skct__btn-icon {
    background: var(--skct-orange);
    color: #fff;
}

/* ---------------- Hero ---------------- */
.skct__hero {
    position: relative;
    padding: 190px 0 150px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 82% 18%, rgba(249, 130, 37, .35) 0, rgba(249, 130, 37, 0) 42%),
        linear-gradient(160deg, var(--skct-navy) 0%, var(--skct-navy-deep) 100%);
}

.skct__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.4px);
    background-size: 24px 24px;
}

.skct__ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    border: 1.5px dashed rgba(255, 255, 255, .18);
}

.skct__ring--a {
    width: 520px;
    height: 520px;
    left: -180px;
    bottom: -260px;
}

.skct__ring--b {
    width: 320px;
    height: 320px;
    right: -90px;
    top: 70px;
    border-color: rgba(249, 130, 37, .4);
}

.skct__hero .skct__container {
    position: relative;
    z-index: 1;
}

.skct__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 9px 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.skct__crumbs a {
    color: #fff;
    opacity: .8;
    transition: opacity .25s ease;
}

.skct__crumbs a:hover {
    opacity: 1;
    color: #fff;
}

.skct__crumbs i {
    font-size: 10px;
    color: var(--skct-orange);
}

.skct__hero-title {
    margin: 0 auto 20px;
    max-width: 800px;
    color: #fff;
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(34px, 5.6vw, 64px);
    line-height: 1.1;
    letter-spacing: -.6px;
}

.skct__hero-text {
    margin: 0 auto 36px;
    max-width: 620px;
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    line-height: 1.7;
}

.skct__hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* ---------------- Info cards (compact) ---------------- */
.skct__info {
    position: relative;
    z-index: 2;
    margin-top: -64px;
}

/* one panel split by hairlines (the 1px gaps let the panel colour show between the cells) */
.skct__info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--skct-line);
    border-radius: 24px;
    background: var(--skct-line);
    box-shadow: 0 24px 48px -28px rgba(29, 50, 66, .45);
}

.skct .skct__card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "icon arrow" "body body";
    align-items: start;
    align-content: start;
    row-gap: 18px;
    padding: 26px 26px 28px;
    background: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease-out;
}

.skct .skct__card:hover,
.skct .skct__card:focus-visible {
    background: #FBF7F0;
    text-decoration: none;
    outline: 0;
}

.skct .skct__card:focus-visible {
    box-shadow: inset 0 0 0 2px var(--skct-orange);
}

/* thin line icon, no tile */
.skct__card-icon {
    grid-area: icon;
    display: block;
    color: var(--skct-orange);
    font-size: 28px;
    line-height: 1;
}

/* small arrow without a circle: turns orange on hover */
.skct__card-arrow {
    grid-area: arrow;
    display: inline-flex;
    color: rgba(42, 68, 86, .45);
    font-size: 13px;
    line-height: 1;
    transition: color .2s ease-out;
}

.skct .skct__card:hover .skct__card-arrow,
.skct .skct__card:focus-visible .skct__card-arrow {
    color: var(--skct-orange);
}

.skct__card-arrow i {
    transform: rotate(-45deg);
    transition: transform .3s ease;
}

.skct .skct__card:hover .skct__card-arrow i,
.skct .skct__card:focus-visible .skct__card-arrow i {
    transform: rotate(0deg);
}

.skct__card-body {
    grid-area: body;
    min-width: 0;
}

.skct__card-label {
    margin: 0 0 6px;
    color: var(--skct-navy);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
}

.skct__card-value {
    margin: 0;
    color: var(--skct-text);
    font-size: 14.5px;
    line-height: 1.55;
    overflow-wrap: break-word;
}

/* text colours stay in the brand palette on hover */
.skct .skct__card:hover .skct__card-label {
    color: var(--skct-navy);
}

.skct .skct__card:hover .skct__card-value {
    color: var(--skct-text);
}

/* ---------------- Form + side ---------------- */
.skct__main {
    padding: 90px 0 30px;
}

.skct__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: 30px;
    align-items: stretch;
}

.skct__form-card {
    padding: 48px;
    border-radius: 32px;
    background: #fff;
    border: 1px solid var(--skct-line);
    box-shadow: 0 30px 70px -36px rgba(42, 68, 86, .4);
}

.skct__title {
    margin: 0 0 12px;
    color: var(--skct-navy);
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.15;
    letter-spacing: -.3px;
}

.skct__sub {
    margin: 0 0 28px;
    font-size: 16.5px;
    line-height: 1.7;
}

.skct__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.skct__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.skct__field--full {
    grid-column: 1 / -1;
}

.skct__label {
    margin: 0;
    color: var(--skct-navy);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
}

.skct__label span {
    color: var(--skct-orange);
}

.skct__input,
.skct__select,
.skct__textarea {
    display: block;
    width: 100%;
    height: 58px;
    margin: 0;
    padding: 0 18px;
    border: 1.5px solid var(--skct-field);
    border-radius: 16px;
    background: var(--skct-field);
    color: var(--skct-navy);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    box-shadow: none;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.skct__textarea {
    height: auto;
    min-height: 150px;
    padding: 16px 18px;
    resize: vertical;
}

.skct__select {
    padding-right: 46px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F98225' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}

.skct__input::placeholder,
.skct__textarea::placeholder {
    color: #98a7b3;
}

.skct__input:focus,
.skct__select:focus,
.skct__textarea:focus {
    border-color: var(--skct-orange);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(249, 130, 37, .14);
}

.skct__input:focus-visible,
.skct__select:focus-visible,
.skct__textarea:focus-visible {
    outline: 0;
}

.skct__form-foot {
    display: flex;
    margin-top: 26px;
}

.skct__msg {
    margin: 16px 0 0;
    font-size: 14.5px;
    font-weight: 500;
    color: #c0392b;
}

.skct__msg:empty {
    display: none;
}

/* side column */
.skct__side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.skct__live {
    position: relative;
    padding: 36px 32px;
    border-radius: 30px;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 8%, rgba(249, 130, 37, .4) 0, rgba(249, 130, 37, 0) 50%),
        linear-gradient(160deg, var(--skct-navy) 0%, var(--skct-navy-deep) 100%);
}

.skct__live::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1.2px, transparent 1.4px);
    background-size: 22px 22px;
}

.skct__live>* {
    position: relative;
    z-index: 1;
}

.skct__live-title {
    margin: 0 0 8px;
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2;
}

.skct__live-text {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .8);
    font-size: 15.5px;
    line-height: 1.6;
}

.skct__hours {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.skct__hours li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: 15px;
    line-height: 1.4;
}

.skct__hours span {
    opacity: .75;
}

.skct__hours strong {
    font-weight: 600;
    text-align: right;
}

.skct__help {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    border-radius: 30px;
    background: #FBF7F0;
    border: 1px solid #EFE4D6;
}

.skct__help-title {
    margin: 0 0 16px;
    color: var(--skct-navy);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

/* services (first column) and destinations (second column) as a bulleted list: they are not
   links, so no button-like pills */
.skct__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 10px 16px;
    width: 100%;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.skct__help .skct__btn {
    margin-top: auto;
}

.skct__chips li {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--skct-navy);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
}

.skct__chips li::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--skct-orange);
}

/* ---------------- Map ---------------- */
.skct__map-wrap {
    padding: 60px 0 100px;
}

.skct__map {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 32px;
    background: #fff;
    border: 1px solid var(--skct-line);
    box-shadow: 0 30px 70px -36px rgba(42, 68, 86, .4);
}

.skct__map-frame {
    position: relative;
    min-height: 460px;
}

.skct__map iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(.85);
}

.skct__place {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 44px 40px;
    border-right: 1px solid var(--skct-line);
}

.skct__place-title {
    margin: 0 0 26px;
    color: var(--skct-navy);
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.15;
}

.skct__place-list {
    display: grid;
    gap: 20px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.skct__place-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
}

.skct__place-list strong {
    display: block;
    margin-bottom: 2px;
    color: var(--skct-navy);
    font-size: 14px;
    font-weight: 700;
}

.skct__place-list a {
    color: var(--skct-text);
    transition: color .25s ease;
}

.skct__place-list a:hover {
    color: var(--skct-orange);
}

/* thin line icon, no tile */
.skct__place-icon {
    flex: 0 0 24px;
    display: inline-flex;
    justify-content: center;
    padding-top: 2px;
    color: var(--skct-orange);
    font-size: 20px;
    line-height: 1;
}

.skct__place .skct__btn {
    margin-top: auto;
    font-size: 16px;
    padding-left: 24px;
    gap: 12px;
}

.skct__place .skct__btn-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .skct__btn,
    .skct__btn-icon i,
    .skct__card,
    .skct__card-link i {
        transition: none;
    }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1199px) {

    .skct__card-value {
        font-size: 14px;
    }

    .skct .skct__card {
        padding: 20px 18px 22px;
    }

    .skct__form-card {
        padding: 40px 34px;
    }

    .skct__map {
        grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    }

    .skct__place {
        padding: 36px 30px;
    }
}

@media (max-width: 991px) {
    .skct__hero {
        padding: 150px 0 130px;
    }

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

    .skct__main {
        padding-top: 70px;
    }

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

    .skct__side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .skct__map-wrap {
        padding: 40px 0 70px;
    }

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

    .skct__place {
        border-right: 0;
        border-bottom: 1px solid var(--skct-line);
    }

    .skct__place .skct__btn {
        margin-top: 0;
    }

    .skct__map-frame {
        min-height: 380px;
    }
}

@media (max-width: 767px) {
    .skct__side {
        grid-template-columns: 1fr;
    }

    .skct__map-frame {
        min-height: 320px;
    }
}

@media (max-width: 575px) {
    .skct__hero {
        padding: 130px 0 110px;
    }

    .skct__hero-text {
        font-size: 16.5px;
        margin-bottom: 28px;
    }

    .skct__hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .skct__hero-actions .skct__btn {
        width: 100%;
        justify-content: space-between;
    }

    .skct__hero-actions .skct__btn--ghost {
        justify-content: center;
    }

    .skct__info {
        margin-top: -50px;
    }

    .skct__info-grid {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .skct .skct__card {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "icon body arrow";
        align-items: center;
        column-gap: 16px;
        row-gap: 0;
        padding: 16px 18px;
    }

    .skct .skct__card:hover,
    .skct .skct__card:focus-visible {
        transform: none;
    }

    .skct__card-icon {
        width: 26px;
        font-size: 24px;
        text-align: center;
    }

    .skct__card-label {
        font-size: 15.5px;
        margin-bottom: 3px;
    }

    .skct__card-value {
        font-size: 14px;
        line-height: 1.45;
    }



    .skct__main {
        padding: 56px 0 20px;
    }

    .skct__form-card {
        padding: 30px 20px;
        border-radius: 24px;
    }

    .skct__fields {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .skct__input,
    .skct__select {
        height: 54px;
    }

    .skct__form-foot {
        display: flex;
        margin-top: 26px;
    }

    .skct__form-foot .skct__btn {
        width: 100%;
        justify-content: space-between;
        font-size: 16px;
        padding-left: 24px;
    }

    .skct__live,
    .skct__help {
        padding: 28px 22px;
        border-radius: 24px;
    }

    .skct__map {
        border-radius: 24px;
    }

    .skct__place {
        padding: 30px 22px;
    }

    .skct__place-title {
        font-size: 28px;
    }

    .skct__map-wrap {
        padding: 30px 0 56px;
    }
}

@media (max-width: 374px) {
    .skct__crumbs {
        font-size: 13px;
        padding: 8px 14px;
    }

    .skct__form-card {
        padding: 26px 16px;
    }

    .skct__hours li {
        flex-direction: column;
        gap: 2px;
    }

    .skct__hours strong {
        text-align: left;
    }
}


/* =========================================================
   FAQ page
   ========================================================= */

.skfq {
    --skfq-orange: #F98225;
    --skfq-navy: #2A4456;
    --skfq-navy-deep: #1D3242;
    --skfq-text: #55697a;
    --skfq-line: #E8EDF1;
    --skfq-soft: #FFF1E6;
    --skfq-field: #F6F8FA;
    position: relative;
    box-sizing: border-box;
    background: #fff;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--skfq-text);
    overflow-x: clip;
    max-width: 100%;
}

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

.skfq a,
.skfq a:hover,
.skfq a:focus {
    text-decoration: none;
}

.skfq__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------------- Hero ---------------- */
.skfq__hero {
    position: relative;
    overflow: hidden;
    padding: 180px 0 120px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 15% 85%, rgba(249, 130, 37, .32) 0, rgba(249, 130, 37, 0) 42%),
        linear-gradient(160deg, var(--skfq-navy) 0%, var(--skfq-navy-deep) 100%);
}

.skfq__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.4px);
    background-size: 24px 24px;
}

.skfq__ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    border: 1.5px dashed rgba(255, 255, 255, .18);
}

.skfq__ring--a {
    width: 480px;
    height: 480px;
    right: -160px;
    top: -120px;
}

.skfq__ring--b {
    width: 300px;
    height: 300px;
    left: -100px;
    bottom: -150px;
    border-color: rgba(249, 130, 37, .4);
}

.skfq__hero .skfq__container {
    position: relative;
    z-index: 1;
}

.skfq__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 9px 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.skfq .skfq__crumbs a {
    color: #fff;
    opacity: .8;
    transition: opacity .25s ease;
}

.skfq .skfq__crumbs a:hover {
    color: #fff;
    opacity: 1;
}

.skfq__crumbs i {
    font-size: 10px;
    color: var(--skfq-orange);
}

.skfq__hero-title {
    margin: 0 auto 18px;
    max-width: 780px;
    color: #fff;
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(34px, 5.4vw, 60px);
    line-height: 1.1;
    letter-spacing: -.5px;
}

.skfq__hero-text {
    margin: 0 auto;
    max-width: 600px;
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    line-height: 1.7;
}

/* ---------------- Search ---------------- */
.skfq__search-wrap {
    position: relative;
    z-index: 2;
    margin-top: -38px;
}

.skfq__search {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.skfq__search i {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--skfq-orange);
    font-size: 18px;
    pointer-events: none;
}

.skfq__search-input {
    display: block;
    width: 100%;
    height: 76px;
    margin: 0;
    padding: 0 28px 0 62px;
    border: 1.5px solid var(--skfq-line);
    border-radius: 50px;
    background: #fff;
    color: var(--skfq-navy);
    font-family: inherit;
    font-size: 17px;
    line-height: 1.4;
    box-shadow: 0 24px 50px -24px rgba(42, 68, 86, .5);
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.skfq__search-input::placeholder {
    color: #98a7b3;
    text-overflow: ellipsis;
}

.skfq__search-input {
    text-overflow: ellipsis;
}

.skfq__search-input:focus {
    border-color: var(--skfq-orange);
    box-shadow: 0 0 0 5px rgba(249, 130, 37, .14), 0 24px 50px -24px rgba(42, 68, 86, .5);
}

/* ---------------- Main area ---------------- */
.skfq__main {
    position: relative;
    padding: 70px 0 90px;
    background:
        radial-gradient(circle at 92% 8%, rgba(249, 130, 37, .10) 0, rgba(249, 130, 37, 0) 34%),
        radial-gradient(circle at 4% 72%, rgba(42, 68, 86, .07) 0, rgba(42, 68, 86, 0) 36%),
        #fff;
}

.skfq__main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .6;
    background-image: radial-gradient(rgba(42, 68, 86, .10) 1.1px, transparent 1.3px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 55%);
    mask-image: linear-gradient(180deg, #000 0, transparent 55%);
}

.skfq__main .skfq__container {
    position: relative;
    z-index: 1;
}

.skfq__grid {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

.skfq__grid>*,
.skfq__side>*,
.skfq__list,
.skfq__items,
.skfq__item {
    min-width: 0;
    max-width: 100%;
}

/* side */
.skfq__side {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 22px;
}

.skfq__cats {
    padding: 12px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid var(--skfq-line);
    box-shadow: 0 24px 50px -30px rgba(42, 68, 86, .4);
}

.skfq__cats-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.skfq__cats-list li {
    margin: 0;
    padding: 0;
}

.skfq__cat {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    color: var(--skfq-navy);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    transition: background-color .25s ease, color .25s ease;
}

.skfq__cat-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--skfq-soft);
    color: var(--skfq-orange);
    font-size: 14px;
    transition: background-color .25s ease, color .25s ease;
}

.skfq__cat-count {
    margin-left: auto;
    min-width: 26px;
    padding: 4px 8px;
    border-radius: 50px;
    background: var(--skfq-field);
    color: var(--skfq-text);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}

.skfq__cat:hover {
    background: var(--skfq-field);
}

.skfq__cat.is-active {
    background: var(--skfq-navy);
    color: #fff;
}

.skfq__cat.is-active .skfq__cat-icon {
    background: var(--skfq-orange);
    color: #fff;
}

.skfq__cat.is-active .skfq__cat-count {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.skfq__cat:focus-visible {
    outline: 3px solid rgba(249, 130, 37, .45);
    outline-offset: 2px;
}

.skfq__help {
    padding: 28px 26px;
    border-radius: 26px;
    border: 1px solid #FBE3D0;
    background: linear-gradient(135deg, #fff 0%, var(--skfq-soft) 100%);
}

.skfq__help-title {
    margin: 0 0 8px;
    color: var(--skfq-navy);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.skfq__help-text {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.6;
}

/* theme-style button */
.skfq .skfq__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 5px 5px 5px 24px;
    border: 0;
    border-radius: 50px;
    background: var(--skfq-orange);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 14px 28px -12px rgba(249, 130, 37, .7);
    transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.skfq__cta-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--skfq-navy);
    font-size: 16px;
}

.skfq__cta-icon i {
    transform: rotate(-45deg);
    transition: transform .35s ease;
}

.skfq .skfq__cta:hover,
.skfq .skfq__cta:focus-visible {
    background: var(--skfq-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(42, 68, 86, .7);
}

.skfq .skfq__cta:hover .skfq__cta-icon i,
.skfq .skfq__cta:focus-visible .skfq__cta-icon i {
    transform: rotate(0deg);
}

.skfq .skfq__cta:focus-visible {
    outline: 3px solid rgba(249, 130, 37, .45);
    outline-offset: 3px;
}

/* ---------------- Accordion ---------------- */
.skfq__list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
}

.skfq__list-title {
    margin: 0;
    color: var(--skfq-navy);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.15;
}

.skfq__count {
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
}

.skfq__items {
    display: grid;
    gap: 14px;
}

.skfq__item {
    position: relative;
    border-radius: 24px;
    background: #fff;
    border: 1.5px solid var(--skfq-line);
    box-shadow: 0 14px 34px -26px rgba(42, 68, 86, .5);
    transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.skfq__item[hidden] {
    display: none;
}

.skfq__item:hover {
    border-color: #F6CBA6;
}

.skfq__item.is-open {
    border-color: var(--skfq-orange);
    box-shadow: 0 26px 50px -28px rgba(249, 130, 37, .55);
    background: linear-gradient(180deg, #fff 0%, #FFF9F4 100%);
}

.skfq__q {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.skfq__trigger {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 20px 22px;
    border: 0;
    border-radius: 24px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: var(--skfq-navy);
    font-family: inherit;
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.4;
}

.skfq__trigger:focus-visible {
    outline: 3px solid rgba(249, 130, 37, .45);
    outline-offset: -3px;
}

.skfq__q-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--skfq-soft);
    color: var(--skfq-orange);
    font-size: 18px;
    transition: background-color .3s ease, color .3s ease;
}

.skfq__q-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.skfq__toggle {
    position: relative;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--skfq-field);
    transition: background-color .3s ease, transform .3s ease;
}

.skfq__toggle::before,
.skfq__toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    border-radius: 2px;
    background: var(--skfq-navy);
    transition: transform .3s ease, background-color .3s ease;
}

.skfq__toggle::after {
    transform: rotate(90deg);
}

.skfq__item.is-open .skfq__q-icon {
    background: var(--skfq-orange);
    color: #fff;
}

.skfq__item.is-open .skfq__toggle {
    background: var(--skfq-orange);
}

.skfq__item.is-open .skfq__toggle::before,
.skfq__item.is-open .skfq__toggle::after {
    background: #fff;
}

.skfq__item.is-open .skfq__toggle::after {
    transform: rotate(0deg);
}

.skfq__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .4s ease, visibility 0s linear .4s;
}

.skfq__item.is-open .skfq__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .4s ease, visibility 0s;
}

.skfq__panel-inner {
    overflow: hidden;
    min-height: 0;
}

.skfq__answer {
    margin: 0;
    padding: 0 28px 26px 84px;
    font-size: 16.5px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.skfq .skfq__answer a {
    color: var(--skfq-orange);
    font-weight: 600;
    transition: color .25s ease;
}

.skfq .skfq__answer a:hover {
    color: var(--skfq-navy);
}

.skfq__empty {
    display: none;
    padding: 46px 24px;
    border-radius: 24px;
    text-align: center;
    background: var(--skfq-field);
    border: 1.5px dashed #D5DEE5;
}

.skfq__empty.is-visible {
    display: block;
}

.skfq__empty i {
    display: block;
    margin-bottom: 14px;
    color: var(--skfq-orange);
    font-size: 30px;
}

.skfq__empty h3 {
    margin: 0 0 6px;
    color: var(--skfq-navy);
    font-size: 20px;
    font-weight: 700;
}

.skfq__empty p {
    margin: 0;
    font-size: 15.5px;
}

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

    .skfq__panel,
    .skfq__item,
    .skfq__toggle,
    .skfq__toggle::before,
    .skfq__toggle::after,
    .skfq__cta,
    .skfq__cta-icon i {
        transition: none;
    }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1199px) {
    .skfq__grid {
        grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 991px) {
    .skfq__hero {
        padding: 150px 0 110px;
    }

    .skfq__main {
        padding: 56px 0 70px;
    }

    .skfq__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .skfq__side {
        display: contents;
        position: static;
    }

    .skfq__cats {
        order: 1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 10px;
        border-radius: 22px;
        overflow: hidden;
    }

    .skfq__list {
        order: 2;
        width: 100%;
    }

    .skfq__help {
        order: 3;
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
    }

    .skfq__help-text {
        margin-bottom: 0;
    }

    /* category tiles: everything visible at once, no sideways scrolling */
    .skfq__cats-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        padding: 0;
    }

    .skfq__cats-list li:first-child {
        grid-column: 1 / -1;
    }

    .skfq__cat {
        width: 100%;
        height: 100%;
        white-space: normal;
        padding: 12px;
        border-radius: 16px;
        background: var(--skfq-field);
        font-size: 14.5px;
    }

    .skfq__cat.is-active {
        background: var(--skfq-navy);
    }

    .skfq__cat-count {
        margin-left: auto;
        flex: 0 0 auto;
        background: #fff;
    }

    .skfq__cat.is-active .skfq__cat-count {
        background: rgba(255, 255, 255, .16);
    }
}

@media (max-width: 767px) {
    .skfq__help {
        flex-direction: column;
        align-items: flex-start;
    }

    .skfq__help-text {
        margin-bottom: 4px;
    }

    .skfq__answer {
        padding: 0 24px 24px 24px;
    }
}

@media (max-width: 575px) {
    .skfq__cats-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .skfq__cat {
        gap: 9px;
        padding: 11px 10px;
        font-size: 14px;
    }

    .skfq__cat-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 13px;
    }

    .skfq__hero {
        padding: 128px 0 100px;
    }

    .skfq__hero-text {
        font-size: 16.5px;
    }

    .skfq__search-wrap {
        margin-top: -32px;
    }

    .skfq__search-input {
        height: 62px;
        padding: 0 18px 0 50px;
        font-size: 16px;
    }

    .skfq__search i {
        left: 20px;
        font-size: 16px;
    }

    .skfq__main {
        padding: 44px 0 56px;
    }

    .skfq__list-head {
        flex-direction: column;
        gap: 4px;
    }

    .skfq__items {
        gap: 12px;
    }

    .skfq__item {
        border-radius: 20px;
    }

    .skfq__trigger {
        padding: 16px 14px;
        gap: 12px;
        font-size: 16px;
        border-radius: 20px;
    }

    .skfq__q-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 13px;
        font-size: 16px;
    }

    .skfq__toggle {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .skfq__answer {
        padding: 0 18px 20px;
        font-size: 15.5px;
        line-height: 1.7;
    }

    .skfq__help {
        padding: 24px 20px;
        border-radius: 22px;
    }

    .skfq .skfq__cta {
        font-size: 15.5px;
    }
}

@media (max-width: 374px) {
    .skfq__cat {
        font-size: 13px;
    }

    .skfq__cat-count {
        display: none;
    }

    .skfq__crumbs {
        font-size: 13px;
        padding: 8px 14px;
    }

    .skfq__q-icon {
        display: none;
    }

    .skfq__trigger {
        font-size: 15.5px;
    }
}

@media (min-width: 1400px) {
    .skfq__container {
        max-width: 1320px;
    }

    .skfq__grid {
        grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
        gap: 44px;
    }

    .skfq__hero {
        padding: 200px 0 140px;
    }

    .skfq__trigger {
        font-size: 18.5px;
        padding: 22px 26px;
    }

    .skfq__answer {
        font-size: 17px;
    }
}

@media (min-width: 1800px) {
    .skfq__container {
        max-width: 1480px;
    }
}

/* =========================================================
   (Privacy and Booking Policy + Terms and Conditions)
   ========================================================= */

.sklg {
    --sklg-orange: #F98225;
    --sklg-navy: #2A4456;
    --sklg-navy-deep: #1D3242;
    --sklg-text: #4d6273;
    --sklg-line: #E8EDF1;
    --sklg-soft: #FFF1E6;
    --sklg-field: #F6F8FA;
    position: relative;
    box-sizing: border-box;
    background: #fff;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--sklg-text);
    overflow-x: clip;
    max-width: 100%;
}

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

.sklg a,
.sklg a:hover,
.sklg a:focus {
    text-decoration: none;
}

.sklg__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------------- Hero ---------------- */
.sklg__hero {
    position: relative;
    overflow: hidden;
    padding: 180px 0 120px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 84% 20%, rgba(249, 130, 37, .32) 0, rgba(249, 130, 37, 0) 42%),
        linear-gradient(160deg, var(--sklg-navy) 0%, var(--sklg-navy-deep) 100%);
}

.sklg__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.4px);
    background-size: 24px 24px;
}

.sklg__ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    border: 1.5px dashed rgba(255, 255, 255, .18);
}

.sklg__ring--a {
    width: 480px;
    height: 480px;
    left: -170px;
    top: -130px;
}

.sklg__ring--b {
    width: 300px;
    height: 300px;
    right: -90px;
    bottom: -150px;
    border-color: rgba(249, 130, 37, .4);
}

.sklg__hero .sklg__container {
    position: relative;
    z-index: 1;
}

.sklg__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 9px 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.sklg .sklg__crumbs a {
    color: #fff;
    opacity: .8;
    transition: opacity .25s ease;
}

.sklg .sklg__crumbs a:hover {
    color: #fff;
    opacity: 1;
}

.sklg__crumbs i {
    font-size: 10px;
    color: var(--sklg-orange);
}

.sklg__hero-title {
    margin: 0 auto 18px;
    max-width: 820px;
    color: #fff;
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(32px, 5.2vw, 58px);
    line-height: 1.12;
    letter-spacing: -.5px;
}

.sklg__hero-text {
    margin: 0 auto 24px;
    max-width: 620px;
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    line-height: 1.7;
}

.sklg__updated {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 18px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.sklg__updated i {
    color: var(--sklg-orange);
}

/* ---------------- Page switch ---------------- */
.sklg__switch-wrap {
    position: relative;
    z-index: 2;
    margin-top: -30px;
}

.sklg__switch {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 6px;
    gap: 6px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid var(--sklg-line);
    box-shadow: 0 24px 50px -24px rgba(42, 68, 86, .5);
}

.sklg .sklg__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 50px;
    color: var(--sklg-navy);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    transition: background-color .3s ease, color .3s ease;
}

.sklg .sklg__tab i {
    color: var(--sklg-orange);
    transition: color .3s ease;
}

.sklg .sklg__tab:hover {
    background: var(--sklg-soft);
    color: var(--sklg-navy);
}

.sklg .sklg__tab.is-active,
.sklg .sklg__tab.is-active:hover {
    background: var(--sklg-navy);
    color: #fff;
}

.sklg .sklg__tab.is-active i {
    color: var(--sklg-orange);
}

/* ---------------- Layout ---------------- */
.sklg__main {
    position: relative;
    padding: 64px 0 90px;
    background:
        radial-gradient(circle at 94% 6%, rgba(249, 130, 37, .10) 0, rgba(249, 130, 37, 0) 32%),
        radial-gradient(circle at 3% 60%, rgba(42, 68, 86, .06) 0, rgba(42, 68, 86, 0) 34%),
        #fff;
}

.sklg__main .sklg__container {
    position: relative;
    z-index: 1;
}

.sklg__grid {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

.sklg__grid>*,
.sklg__content,
.sklg__sec {
    min-width: 0;
    max-width: 100%;
}

/* ---------------- Table of contents ---------------- */
.sklg__toc {
    position: sticky;
    top: 24px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid var(--sklg-line);
    box-shadow: 0 24px 50px -30px rgba(42, 68, 86, .45);
    overflow: hidden;
}

.sklg__toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 20px 22px 12px;
    border: 0;
    background: transparent;
    cursor: default;
    text-align: left;
    color: var(--sklg-navy);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.sklg__toc-chevron {
    display: none;
    color: var(--sklg-orange);
    transition: transform .3s ease;
}

.sklg__toc-list {
    list-style: none;
    margin: 0;
    padding: 4px 12px 14px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d5dee5 transparent;
}

.sklg__toc-list li {
    margin: 0;
    padding: 0;
}

.sklg__toc-part {
    margin: 10px 0 4px;
    padding: 6px 10px;
    color: var(--sklg-orange);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.sklg .sklg__toc-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 14px;
    color: var(--sklg-text);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    transition: background-color .25s ease, color .25s ease;
}

.sklg__toc-no {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--sklg-field);
    color: var(--sklg-navy);
    font-size: 12px;
    font-weight: 700;
    transition: background-color .25s ease, color .25s ease;
}

.sklg .sklg__toc-link:hover {
    background: var(--sklg-field);
    color: var(--sklg-navy);
}

.sklg .sklg__toc-link.is-active {
    background: var(--sklg-soft);
    color: var(--sklg-navy);
    font-weight: 600;
}

.sklg .sklg__toc-link.is-active .sklg__toc-no {
    background: var(--sklg-orange);
    color: #fff;
}

/* ---------------- Content ---------------- */
.sklg__summary {
    display: flex;
    gap: 20px;
    margin: 0 0 30px;
    padding: 28px;
    border-radius: 26px;
    border: 1px solid #FBE3D0;
    background: linear-gradient(135deg, #fff 0%, var(--sklg-soft) 100%);
}

.sklg__summary-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--sklg-orange);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 12px 22px -10px rgba(249, 130, 37, .8);
}

.sklg__summary-title {
    margin: 0 0 12px;
    color: var(--sklg-navy);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.sklg__part {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 44px 0 22px;
}

.sklg__part--first {
    margin-top: 0;
}

.sklg__part-title {
    margin: 0;
    color: var(--sklg-navy);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.15;
    white-space: nowrap;
}

.sklg__part-line {
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--sklg-orange), rgba(249, 130, 37, 0));
}

.sklg__sec {
    scroll-margin-top: 24px;
    margin: 0 0 20px;
    padding: 34px 38px;
    border-radius: 26px;
    background: #fff;
    border: 1.5px solid var(--sklg-line);
    box-shadow: 0 16px 38px -28px rgba(42, 68, 86, .5);
    transition: border-color .3s ease, box-shadow .3s ease;
}

.sklg__sec:hover {
    border-color: #F6CBA6;
}

.sklg__sec-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
}

.sklg__num {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--sklg-soft);
    color: var(--sklg-orange);
    font-size: 16px;
    font-weight: 700;
}

.sklg__sec-title {
    margin: 0;
    color: var(--sklg-navy);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(22px, 2.6vw, 28px);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.sklg__body p {
    margin: 0 0 14px;
    font-size: 16.5px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.sklg__body p:last-child,
.sklg__body ul:last-child,
.sklg__body ol:last-child {
    margin-bottom: 0;
}

.sklg .sklg__body a {
    color: var(--sklg-orange);
    font-weight: 600;
    transition: color .25s ease;
}

.sklg .sklg__body a:hover {
    color: var(--sklg-navy);
}

.sklg__body strong {
    color: var(--sklg-navy);
    font-weight: 600;
}

.sklg__list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 12px;
}

.sklg__list li {
    position: relative;
    margin: 0;
    padding: 0 0 0 36px;
    font-size: 16.5px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.sklg__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sklg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' fill='none' stroke='%23F98225' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
}

.sklg__summary .sklg__list li {
    font-size: 16px;
}

.sklg__steps {
    list-style: none;
    counter-reset: sklg-step;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 16px;
}

.sklg__steps li {
    position: relative;
    counter-increment: sklg-step;
    margin: 0;
    padding: 4px 0 0 56px;
    font-size: 16.5px;
    line-height: 1.7;
}

.sklg__steps li::before {
    content: counter(sklg-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sklg-navy);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.sklg__steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: -14px;
    width: 2px;
    background: var(--sklg-line);
}

/* ---------------- Contact card ---------------- */
.sklg__contact {
    margin-top: 40px;
    padding: 38px;
    border-radius: 30px;
    border: 1px solid #FBE3D0;
    background: linear-gradient(135deg, #fff 0%, var(--sklg-soft) 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px 36px;
    align-items: center;
}

.sklg__contact-title {
    margin: 0 0 8px;
    color: var(--sklg-navy);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
}

.sklg__contact-text {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.7;
}

.sklg__contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.sklg__contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--sklg-navy);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.sklg__contact-list i {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--sklg-orange);
    color: #fff;
    font-size: 13px;
}

.sklg .sklg__contact-list a {
    color: var(--sklg-navy);
}

.sklg .sklg__contact-list a:hover {
    color: var(--sklg-orange);
}

/* theme-style button */
.sklg .sklg__cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 6px 6px 6px 30px;
    border: 0;
    border-radius: 50px;
    background: var(--sklg-orange);
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 14px 28px -12px rgba(249, 130, 37, .7);
    transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.sklg__cta-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--sklg-navy);
    font-size: 18px;
}

.sklg__cta-icon i {
    transform: rotate(-45deg);
    transition: transform .35s ease;
}

.sklg .sklg__cta:hover,
.sklg .sklg__cta:focus-visible {
    background: var(--sklg-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(42, 68, 86, .7);
}

.sklg .sklg__cta:hover .sklg__cta-icon i,
.sklg .sklg__cta:focus-visible .sklg__cta-icon i {
    transform: rotate(0deg);
}

.sklg .sklg__cta:focus-visible,
.sklg__toc-toggle:focus-visible,
.sklg .sklg__toc-link:focus-visible,
.sklg .sklg__tab:focus-visible {
    outline: 3px solid rgba(249, 130, 37, .45);
    outline-offset: 3px;
}

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

    .sklg__sec,
    .sklg__cta,
    .sklg__cta-icon i,
    .sklg__toc-chevron,
    .sklg .sklg__toc-link,
    .sklg .sklg__tab {
        transition: none;
    }
}

/* ---------------- Responsive ---------------- */
@media (min-width: 1400px) {
    .sklg__container {
        max-width: 1320px;
    }

    .sklg__grid {
        grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
        gap: 44px;
    }

    .sklg__hero {
        padding: 200px 0 140px;
    }

    .sklg__sec {
        padding: 38px 44px;
    }
}

@media (min-width: 1800px) {
    .sklg__container {
        max-width: 1480px;
    }
}

@media (max-width: 1199px) {
    .sklg__grid {
        grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
        gap: 28px;
    }

    .sklg__sec {
        padding: 30px 30px;
    }
}

@media (max-width: 991px) {
    .sklg__hero {
        padding: 150px 0 110px;
    }

    .sklg__main {
        padding: 50px 0 70px;
    }

    .sklg__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .sklg__toc {
        position: static;
        border-radius: 22px;
    }

    .sklg__toc-toggle {
        cursor: pointer;
        padding: 18px 20px;
    }

    .sklg__toc-chevron {
        display: inline-block;
    }

    .sklg__toc.is-open .sklg__toc-chevron {
        transform: rotate(180deg);
    }

    .sklg__toc-list {
        display: none;
        max-height: 60vh;
        padding-top: 0;
        border-top: 1px solid var(--sklg-line);
        padding-top: 10px;
    }

    .sklg__toc.is-open .sklg__toc-list {
        display: block;
    }

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

@media (max-width: 767px) {
    .sklg__sec {
        padding: 26px 22px;
        border-radius: 22px;
    }

    .sklg__summary {
        padding: 22px;
        gap: 16px;
        border-radius: 22px;
    }

    .sklg__contact {
        padding: 28px 22px;
        border-radius: 24px;
    }
}

@media (max-width: 575px) {
    .sklg__hero {
        padding: 128px 0 100px;
    }

    .sklg__hero-text {
        font-size: 16.5px;
    }

    .sklg__switch {
        width: 100%;
        flex-direction: column;
        border-radius: 26px;
    }

    .sklg .sklg__tab {
        padding: 14px 18px;
        font-size: 15px;
    }

    .sklg__main {
        padding: 40px 0 56px;
    }

    .sklg__part {
        margin: 34px 0 18px;
        gap: 12px;
    }

    .sklg__part-title {
        white-space: normal;
    }

    .sklg__sec {
        padding: 22px 18px;
        margin-bottom: 16px;
    }

    .sklg__sec-head {
        gap: 12px;
        margin-bottom: 14px;
    }

    .sklg__num {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 13px;
        font-size: 14px;
    }

    .sklg__body p,
    .sklg__list li,
    .sklg__steps li {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .sklg__list li {
        padding-left: 34px;
    }

    .sklg__summary {
        flex-direction: column;
        gap: 14px;
        padding: 20px 18px;
    }

    .sklg__contact-list li {
        font-size: 15px;
    }

    .sklg .sklg__cta {
        width: 100%;
        justify-content: space-between;
        font-size: 16px;
        padding-left: 24px;
    }

    .sklg__cta-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 16px;
    }
}

@media (max-width: 374px) {
    .sklg__crumbs {
        font-size: 13px;
        padding: 8px 14px;
    }

    .sklg__updated {
        font-size: 13px;
        padding: 8px 14px;
    }

    .sklg__sec {
        padding: 20px 14px;
    }

    .sklg__steps li {
        padding-left: 50px;
    }
}


/* =========================================================
   LOGIN & SIGNUP PAGES
   ========================================================= */

.skau {
    --skau-orange: #F98225;
    --skau-orange-deep: #E36F14;
    --skau-navy: #2A4456;
    --skau-navy-deep: #1D3242;
    --skau-text: #4d6273;
    --skau-line: #E8EDF1;
    --skau-soft: #FFF1E6;
    --skau-field: #F6F8FA;
    --skau-ok: #1FA97A;
    position: relative;
    box-sizing: border-box;
    background: #fff;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--skau-text);
    overflow-x: clip;
    max-width: 100%;
}

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

.skau a,
.skau a:hover,
.skau a:focus {
    text-decoration: none;
}

.skau__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------------- Hero ---------------- */
.skau__hero {
    position: relative;
    overflow: hidden;
    padding: 170px 0 90px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 84% 20%, rgba(249, 130, 37, .32) 0, rgba(249, 130, 37, 0) 42%),
        linear-gradient(160deg, var(--skau-navy) 0%, var(--skau-navy-deep) 100%);
}

.skau__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.4px);
    background-size: 24px 24px;
}

.skau__ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    border: 1.5px dashed rgba(255, 255, 255, .18);
}

.skau__ring--a {
    width: 480px;
    height: 480px;
    left: -170px;
    top: -130px;
}

.skau__ring--b {
    width: 300px;
    height: 300px;
    right: -90px;
    bottom: -150px;
    border-color: rgba(249, 130, 37, .4);
}

.skau__hero .skau__container {
    position: relative;
    z-index: 1;
}

.skau__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 9px 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.skau .skau__crumbs a {
    color: #fff;
    opacity: .8;
    transition: opacity .25s ease;
}

.skau .skau__crumbs a:hover {
    color: #fff;
    opacity: 1;
}

.skau__crumbs i {
    font-size: 10px;
    color: var(--skau-orange);
}

.skau__hero-title {
    margin: 0 auto 16px;
    max-width: 720px;
    color: #fff;
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(30px, 5vw, 50px);
    line-height: 1.15;
    letter-spacing: -.5px;
}

.skau__hero-text {
    margin: 0 auto;
    max-width: 560px;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------------- Page switch (Login / Sign up) ---------------- */
.skau__switch-wrap {
    position: relative;
    z-index: 2;
    margin-top: -28px;
}

.skau__switch {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 6px;
    gap: 6px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid var(--skau-line);
    box-shadow: 0 24px 50px -24px rgba(42, 68, 86, .5);
}

.skau .skau__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 50px;
    color: var(--skau-navy);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    transition: background-color .3s ease, color .3s ease;
}

.skau .skau__tab i {
    color: var(--skau-orange);
    transition: color .3s ease;
}

.skau .skau__tab:hover {
    background: var(--skau-soft);
    color: var(--skau-navy);
}

.skau .skau__tab.is-active,
.skau .skau__tab.is-active:hover {
    background: var(--skau-navy);
    color: #fff;
}

.skau .skau__tab.is-active i {
    color: var(--skau-orange);
}

/* ---------------- Body / layout ---------------- */
.skau__body {
    position: relative;
    padding: 60px 0 100px;
    background:
        radial-gradient(circle at 94% 6%, rgba(249, 130, 37, .10) 0, rgba(249, 130, 37, 0) 32%),
        radial-gradient(circle at 3% 70%, rgba(42, 68, 86, .06) 0, rgba(42, 68, 86, 0) 34%),
        #fff;
}

.skau__panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    border-radius: 32px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--skau-line);
    box-shadow: 0 40px 80px -40px rgba(42, 68, 86, .35);
}

/* ---------------- Showcase (left) side ---------------- */
.skau__show {
    position: relative;
    overflow: hidden;
    padding: 52px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 12%, rgba(249, 130, 37, .35) 0, rgba(249, 130, 37, 0) 46%),
        linear-gradient(155deg, var(--skau-navy) 0%, var(--skau-navy-deep) 100%);
}

.skau__show-decor--top {
    top: -30px;
    left: 0px;
    right: auto;
    bottom: auto;
    font-size: 180px;
    transform: rotate(10deg);
}

.skau__show::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1.2px, transparent 1.4px);
    background-size: 22px 22px;
}

.skau__show-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    border: 1.5px dashed rgba(255, 255, 255, .16);
    width: 260px;
    height: 260px;
    right: -90px;
    bottom: -110px;
    z-index: 0;
}

/* big faint decorative icon to fill empty vertical space */
.skau__show-decor {
    position: absolute;
    right: -34px;
    bottom: -34px;
    font-size: 260px;
    line-height: 1;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
    z-index: 0;
    transform: rotate(-8deg);
}

.skau__show-top {
    position: relative;
    z-index: 1;
}

.skau__show-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 8px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
}

.skau__show-badge i {
    color: var(--skau-orange);
}

.skau__show-title {
    margin: 0 0 14px;
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.25;
    max-width: 380px;
}

.skau__show-text {
    margin: 0;
    max-width: 380px;
    color: rgba(255, 255, 255, .78);
    font-size: 15.5px;
    line-height: 1.75;
}

.skau__show-list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.skau__show-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
}

.skau__show-ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--skau-orange);
    font-size: 14px;
}

/* stat strip — fills the extra vertical space next to the taller signup form */
.skau__show-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 22px 4px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.skau__show-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.skau__show-num {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(19px, 2.2vw, 25px);
    color: #fff;
    line-height: 1.2;
}

.skau__show-statlabel {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .7);
    line-height: 1.4;
}

.skau__show-quote {
    position: relative;
    z-index: 1;
    padding: 20px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
}

.skau__show-quote p {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
    font-style: italic;
}

.skau__show-quote span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

/* ---------------- Form (right) side ---------------- */
.skau__form-wrap {
    padding: 52px 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.skau__form-head {
    margin: 0 0 28px;
}

.skau__title {
    margin: 0 0 8px;
    color: var(--skau-navy);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.25;
}

.skau__sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--skau-text);
}

.skau .skau__sub a {
    color: var(--skau-orange);
    font-weight: 600;
}

.skau .skau__sub a:hover {
    color: var(--skau-navy);
}

/* ---------------- Social login (Google only) ---------------- */
.skau__social {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.skau .skau__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1.5px solid var(--skau-line);
    background: #fff;
    color: var(--skau-navy);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.skau .skau__social-btn:hover {
    border-color: var(--skau-orange);
    background: var(--skau-soft);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -14px rgba(42, 68, 86, .4);
}

.skau__social-btn svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.skau__divider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    color: var(--skau-orange);
    font-size: 13px;
    font-weight: 600;
}

.skau__divider::before,
.skau__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--skau-line);
}

.skau__fields {
    display: grid;
    gap: 18px;
}

.skau__fields--two {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.skau__field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

/* label sits close to its text; a separate row handles labels that
   also carry a right-aligned link (e.g. Forgot password?) */
.skau__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.skau__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: var(--skau-navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.skau__label span {
    color: var(--skau-orange);
}

.skau .skau__forgot {
    color: var(--skau-orange);
    font-size: 13.5px;
    font-weight: 600;
}

.skau .skau__forgot:hover {
    color: var(--skau-navy);
}

.skau__input-wrap {
    position: relative;
}

.skau__input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--skau-line);
    background: var(--skau-field);
    color: var(--skau-navy);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.3;
    transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.skau__input-wrap .skau__input {
    padding-right: 46px;
}

.skau__input::placeholder {
    color: #9AABB6;
}

.skau__input:hover {
    border-color: #D7E0E7;
}

.skau__input:focus {
    outline: none;
    border-color: var(--skau-orange);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(249, 130, 37, .14);
}

.skau .skau__pass-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #9AABB6;
    cursor: pointer;
    z-index: 2;
    transition: color .2s ease, background-color .2s ease;
}

.skau .skau__pass-toggle:hover {
    color: var(--skau-navy);
    background: var(--skau-line);
}

.skau__hint {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #8FA0AC;
}

/* strength meter (signup only) */
.skau__strength {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.skau__strength span {
    height: 4px;
    flex: 1 1 auto;
    border-radius: 4px;
    background: var(--skau-line);
    transition: background-color .25s ease;
}

/* checkboxes */
.skau__check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 2px 0 0;
}

.skau__check-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 6px;
    border: 1.5px solid #C9D4DB;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, background-color .2s ease;
}

.skau__check-row input[type="checkbox"]:checked {
    background: var(--skau-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
    border-color: var(--skau-orange);
}

.skau__check-row label {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--skau-text);
    cursor: pointer;
}

.skau__check-row a {
    color: var(--skau-orange);
    font-weight: 600;
}

.skau__check-row a:hover {
    color: var(--skau-navy);
}

.skau__remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: -2px;
}

.skau__remember .skau__check-row {
    margin: 0;
    align-items: center;
}

/* ---------------- Theme-style pill button (matches "Let's Talk") ---------------- */
.skau .skau__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border: 0;
    border-radius: 50px;
    padding: 6px 6px 6px 30px;
    background: var(--skau-orange);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 14px 28px -12px rgba(249, 130, 37, .7);
    transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.skau__btn-row {
    text-align: center;
    margin-top: 28px;
}

.skau__btn {
    width: 270px;
    justify-content: space-between;
}

.skau__btn-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--skau-navy);
    font-size: 17px;
}

.skau__btn-icon i {
    transform: rotate(-45deg);
    transition: transform .35s ease;
}

.skau .skau__btn:hover,
.skau .skau__btn:focus-visible {
    background: var(--skau-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(42, 68, 86, .7);
}

.skau .skau__btn:hover .skau__btn-icon i,
.skau .skau__btn:focus-visible .skau__btn-icon i {
    transform: rotate(0deg);
}

.skau .skau__btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

.skau__msg {
    display: none;
    margin: 14px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.skau__msg.is-visible {
    display: block;
}

.skau__msg.is-error {
    background: #FDECEC;
    color: #B4232C;
    border: 1px solid #F6CACD;
}

.skau__msg.is-success {
    background: #E9F8F1;
    color: #157A54;
    border: 1px solid #BFEBD8;
}

.skau__switch-text {
    margin: 24px 0 0;
    text-align: center;
    font-size: 14.5px;
    color: var(--skau-text);
}

.skau .skau__switch-text a {
    color: var(--skau-orange);
    font-weight: 700;
}

.skau .skau__switch-text a:hover {
    color: var(--skau-navy);
}

.skau__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--skau-line);
    font-size: 12.5px;
    color: #8FA0AC;
}

.skau__trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.skau__trust i {
    color: var(--skau-ok);
}

.skau .skau__tab:focus-visible,
.skau .skau__btn:focus-visible,
.skau .skau__social-btn:focus-visible,
.skau .skau__pass-toggle:focus-visible,
.skau__input:focus-visible {
    outline: 3px solid rgba(249, 130, 37, .45);
    outline-offset: 2px;
}

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

    .skau__panel,
    .skau .skau__btn,
    .skau__btn-icon i,
    .skau .skau__social-btn,
    .skau .skau__tab {
        transition: none;
    }
}

/* ---------------- Responsive ---------------- */
@media (min-width: 1400px) {
    .skau__container {
        max-width: 1280px;
    }

    .skau__hero {
        padding: 190px 0 110px;
    }

    .skau__show,
    .skau__form-wrap {
        padding: 60px 56px;
    }
}

@media (max-width: 1199px) {

    .skau__show,
    .skau__form-wrap {
        padding: 44px 38px;
    }

    .skau__show-decor {
        font-size: 200px;
    }
}

@media (max-width: 991px) {
    .skau__hero {
        padding: 145px 0 90px;
    }

    .skau__body {
        padding: 44px 0 70px;
    }

    .skau__panel {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 26px;
    }

    .skau__show {
        padding: 38px 32px;
        gap: 26px;
    }

    .skau__show-list {
        gap: 12px;
    }

    .skau__show-quote {
        display: none;
    }

    .skau__show-decor {
        font-size: 160px;
        opacity: .7;
    }

    .skau__form-wrap {
        padding: 38px 32px;
    }

    .skau__fields--two {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .skau__hero {
        padding: 128px 0 80px;
    }

    .skau__hero-text {
        font-size: 15.5px;
    }

    .skau__switch {
        width: 100%;
        border-radius: 22px;
    }

    .skau .skau__tab {
        flex: 1 1 0;
        padding: 13px 12px;
        font-size: 14px;
    }

    .skau__panel {
        border-radius: 22px;
    }

    .skau__show {
        padding: 32px 24px;
    }

    .skau__show-title {
        font-size: 22px;
        max-width: none;
    }

    .skau__show-text {
        max-width: none;
    }

    .skau__show-stats {
        gap: 10px;
    }

    .skau__form-wrap {
        padding: 32px 22px;
    }

    .skau__fields--two {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}

@media (max-width: 575px) {
    .skau__hero {
        padding: 118px 0 76px;
    }

    .skau__crumbs {
        font-size: 13px;
        padding: 8px 14px;
    }

    .skau__show {
        padding: 28px 20px;
        gap: 22px;
    }

    .skau__show-badge {
        font-size: 12px;
        padding: 7px 14px;
    }

    .skau__show-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 18px 2px;
    }

    .skau__show-statlabel {
        font-size: 10.5px;
    }

    .skau__form-wrap {
        padding: 28px 18px;
    }

    .skau__title {
        font-size: 23px;
    }

    .skau__input {
        padding: 13px 14px;
        font-size: 14.5px;
    }

    .skau .skau__btn {
        font-size: 15.5px;
        padding: 6px 6px 6px 22px;
    }

    .skau__btn-icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 15px;
    }

    .skau__remember {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .skau__fields--two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 374px) {
    .skau__show-list li {
        font-size: 14px;
    }

    .skau__form-wrap,
    .skau__show {
        padding: 24px 16px;
    }

    .skau__show-stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .skau__show-num {
        font-size: 17px;
    }
}


/* =========================================================
   Blogs + Single Blogs
   ========================================================= */
.skb {
    --o: #F98225;
    --n: #2A4456;
    --nd: #1D3242;
    --tx: #4d6273;
    --ln: #E8EDF1;
    --soft: #FFF1E6;
    --fd: #F6F8FA;
    position: relative;
    background: #fff;
    color: var(--tx);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    overflow-x: clip;
    max-width: 100%
}

.skb *,
.skb *::before,
.skb *::after {
    box-sizing: border-box
}

.skb a,
.skb a:hover,
.skb a:focus {
    text-decoration: none
}

.skb img {
    max-width: 100%;
    height: auto;
    display: block
}

.skb [hidden] {
    display: none !important
}

.skb__wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px
}

.skb h1,
.skb h2,
.skb h3,
.skb h4 {
    overflow-wrap: anywhere
}

/* ---------- reading progress ---------- */
.skb__progress {
    position: fixed;
    left: 0;
    top: 0;
    height: 4px;
    width: 100%;
    background: var(--o);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 9999
}

/* ---------- hero (shared) ---------- */
.skb__hero {
    position: relative;
    overflow: hidden;
    padding: 175px 0 120px;
    color: #fff;
    background: radial-gradient(circle at 88% 12%, rgba(249, 130, 37, .34) 0, rgba(249, 130, 37, 0) 40%), linear-gradient(160deg, var(--n) 0%, var(--nd) 100%)
}

.skb__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
    mask-image: linear-gradient(180deg, #000, transparent 85%)
}

.skb__hero::after {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -1px;
    height: 56px;
    background: #fff;
    border-radius: 50% 50% 0 0/100% 100% 0 0
}

.skb__hero .skb__wrap {
    position: relative;
    z-index: 1
}

.skb__crumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 9px 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2
}

.skb .skb__crumbs a {
    color: #fff;
    opacity: .8
}

.skb .skb__crumbs a:hover {
    opacity: 1;
    color: #fff
}

.skb__crumbs i {
    font-size: 10px;
    color: var(--o)
}

.skb__crumbs span {
    overflow-wrap: anywhere
}

.skb__title {
    margin: 0 0 18px;
    color: #fff;
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(32px, 4.8vw, 56px);
    line-height: 1.12;
    letter-spacing: -.5px
}

.skb__lead {
    margin: 0 0 28px;
    max-width: 600px;
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    line-height: 1.7
}

/* ---------- listing hero: centred on the search (the topics are the filter chips below) ---------- */
.skb__hero--list {
    text-align: center
}

.skb__hero--list .skb__lead {
    margin-left: auto;
    margin-right: auto
}

.skb__hero--list .skb__search {
    margin: 0 auto
}

.skb__search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    padding: 6px 6px 6px 24px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 24px 46px -24px rgba(0, 0, 0, .6)
}

.skb__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--n);
    font: 500 16px/1 inherit;
    font-family: inherit
}

.skb__search input::placeholder {
    color: #8a9aa6
}

.skb__search button {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: var(--o);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    transition: background-color .3s ease
}

.skb__search button:hover {
    background: var(--n)
}

/* ---------- listing body ---------- */
.skb__main {
    padding: 44px 0 90px;
    background: #fff
}

.skb__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 34px
}

.skb__chip {
    padding: 11px 22px;
    border: 1px solid #DCE3E8;
    border-radius: 50px;
    background: #fff;
    color: var(--n);
    font: 600 15px/1.2 inherit;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease
}

.skb__chip:hover {
    border-color: var(--o)
}

.skb__chip.is-active {
    background: var(--n);
    border-color: var(--n);
    color: #fff
}

.skb__feature {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 24px 52px;
    align-items: center;
    margin: 0 0 72px
}

.skb__feature .skb__thumb {
    border-radius: 24px
}

.skb__feature-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.skb__feature .skb__meta {
    margin: 0 0 26px
}

.skb__feature-title {
    margin: 0 0 14px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.18
}

.skb .skb__feature-title a,
.skb .skb__card-title a {
    color: var(--n)
}

.skb .skb__feature-title a:hover,
.skb .skb__card-title a:hover {
    color: var(--o)
}

.skb__excerpt {
    margin: 0 0 18px;
    font-size: 16.5px;
    line-height: 1.75
}

.skb__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 28px
}

.skb__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.skb__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 18px;
    background: var(--fd)
}

.skb__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1)
}

.skb__card:hover .skb__thumb img,
.skb__feature:hover .skb__thumb img {
    transform: scale(1.04)
}

.skb__card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 0 0
}

/* topic, date and reading time, separated by dots */
.skb__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: auto 0 0;
    color: var(--tx);
    font-size: 13.5px;
    line-height: 1.5
}

.skb__meta>*+*::before {
    content: "\00B7";
    margin: 0 8px;
    color: #A3B0BA
}

.skb__meta-tag {
    color: var(--n);
    font-weight: 600
}

.skb__card-title {
    margin: 0 0 8px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 1.3
}

.skb .skb__card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 18px
}

.skb .skb__card-title a:focus-visible {
    outline: 0
}

.skb .skb__card-title a:focus-visible::after {
    outline: 2px solid var(--o);
    outline-offset: 6px
}

.skb__card .skb__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
    font-size: 15.5px;
    line-height: 1.7
}

.skb__none {
    margin: 24px 0 0;
    padding: 34px;
    border-radius: 24px;
    background: var(--fd);
    text-align: center;
    font-size: 17px
}

/* ---------- CTA band ---------- */
.skb__band {
    margin-top: 70px;
    padding: 44px;
    border-radius: 32px;
    color: #fff;
    background: radial-gradient(circle at 92% 10%, rgba(249, 130, 37, .35) 0, rgba(249, 130, 37, 0) 45%), linear-gradient(150deg, var(--n), var(--nd));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px 36px;
    align-items: center
}

.skb__band-title {
    margin: 0 0 8px;
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2
}

.skb__band-text {
    margin: 0;
    max-width: 560px;
    color: rgba(255, 255, 255, .82);
    font-size: 16.5px;
    line-height: 1.7
}

/* ---------- theme button (same as legal pages) ---------- */
.skb .skb__cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 6px 6px 6px 30px;
    border: 0;
    border-radius: 50px;
    background: var(--o);
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 14px 28px -12px rgba(249, 130, 37, .7);
    transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease
}

.skb__cta-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--n);
    font-size: 18px
}

.skb__cta-icon i {
    transform: rotate(-45deg);
    transition: transform .35s ease
}

.skb .skb__cta:hover,
.skb .skb__cta:focus-visible {
    background: var(--n);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(42, 68, 86, .7)
}

.skb__band .skb__cta:hover {
    background: #fff;
    color: var(--n)
}

.skb .skb__cta:hover .skb__cta-icon i,
.skb .skb__cta:focus-visible .skb__cta-icon i {
    transform: rotate(0)
}

.skb .skb__cta:focus-visible,
.skb__chip:focus-visible,
.skb__toc-toggle:focus-visible,
.skb .skb__toc-link:focus-visible,
.skb__search input:focus-visible,
.skb__search button:focus-visible {
    outline: 3px solid rgba(249, 130, 37, .5);
    outline-offset: 3px
}

/* =========================================================
   SINGLE POST
   ========================================================= */
.skb__hero--post {
    padding: 170px 0 150px
}

.skb__hero--post .skb__title {
    max-width: 900px;
    font-size: clamp(30px, 4.4vw, 50px)
}

.skb__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 15px
}

.skb__byline>span+span::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 14px 0 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    vertical-align: middle
}

.skb__author {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600
}

/* the Sky Global globe in a white circle */
.skb .skb__avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain
}

.skb__cover {
    position: relative;
    z-index: 2;
    margin: -96px 0 0
}

.skb__cover figure {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--fd);
    box-shadow: 0 30px 50px -36px rgba(29, 50, 66, .55)
}

.skb__cover img {
    width: 100%;
    aspect-ratio: 16/8;
    object-fit: cover
}

.skb__post {
    padding: 56px 0 90px
}

.skb__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 52px;
    align-items: start
}

.skb__article {
    min-width: 0;
    order: 1
}

.skb__side {
    order: 2;
    position: sticky;
    top: 24px;
    display: grid;
    gap: 20px;
    min-width: 0
}

/* toc */
.skb__toc {
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--ln);
    overflow: hidden
}

.skb__toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 20px 22px 10px;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--n);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700
}

.skb__toc-toggle {
    cursor: pointer
}

.skb__toc-chevron {
    flex: 0 0 auto;
    color: #8A9AA6;
    font-size: 12px;
    transition: transform .3s ease, color .2s ease
}

.skb__toc-toggle:hover .skb__toc-chevron {
    color: var(--o)
}

.skb__toc.is-open .skb__toc-chevron {
    transform: rotate(180deg)
}

.skb__toc-list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 10px 12px 14px;
    border-top: 1px solid var(--ln);
    max-height: calc(100vh - 380px);
    overflow-y: auto;
    scrollbar-width: thin
}

.skb__toc.is-open .skb__toc-list {
    display: block
}

.skb .skb__toc-link {
    position: relative;
    display: block;
    padding: 9px 12px 9px 24px;
    border-radius: 10px;
    color: var(--tx);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color .2s ease, color .2s ease
}

.skb .skb__toc-link:hover {
    background: var(--fd);
    color: var(--n)
}

/* the section you are reading: navy text with an orange dot */
.skb .skb__toc-link.is-active {
    color: var(--n);
    font-weight: 600
}

.skb .skb__toc-link.is-active::before {
    content: "";
    position: absolute;
    left: 10px;
    top: calc(9px + .5lh - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--o)
}

.skb__sidecta {
    padding: 28px;
    border-radius: 24px;
    color: #fff;
    background: radial-gradient(circle at 90% 8%, rgba(249, 130, 37, .4) 0, rgba(249, 130, 37, 0) 50%), linear-gradient(150deg, var(--n), var(--nd))
}

.skb__sidecta h3 {
    margin: 0 0 8px;
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25
}

.skb__sidecta p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    line-height: 1.65
}

.skb__sidecta .skb__cta {
    font-size: 16px;
    padding-left: 24px;
    gap: 12px
}

.skb__sidecta .skb__cta-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 16px
}

.skb__sidecta .skb__cta:hover {
    background: #fff;
    color: var(--n)
}

/* takeaways */
.skb__take {
    margin: 0 0 38px;
    padding: 26px 28px;
    border-radius: 20px;
    border: 1px solid var(--ln);
    background: var(--fd)
}

.skb__take .skb__checks {
    margin-bottom: 0
}

.skb__take h2 {
    margin: 0 0 12px;
    color: var(--n);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3
}

/* prose */
.skb__prose {
    font-size: 17.5px;
    line-height: 1.85;
    overflow-wrap: anywhere
}

.skb__prose>*:first-child {
    margin-top: 0
}

.skb__prose h2 {
    scroll-margin-top: 28px;
    margin: 52px 0 16px;
    color: var(--n);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2
}

.skb__prose h3 {
    scroll-margin-top: 28px;
    margin: 34px 0 12px;
    color: var(--n);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(21px, 2.4vw, 25px);
    line-height: 1.25
}

.skb__prose p {
    margin: 0 0 18px
}

.skb__prose strong {
    color: var(--n);
    font-weight: 600
}

.skb .skb__prose a {
    color: var(--o);
    font-weight: 600;
    border-bottom: 1.5px solid rgba(249, 130, 37, .35)
}

.skb .skb__prose a:hover {
    color: var(--n);
    border-color: var(--n)
}

.skb__prose ul,
.skb__prose ol,
.skb__checks {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px
}

.skb__prose ol {
    counter-reset: skb
}

.skb__checks {
    font-size: 16px;
    line-height: 1.7
}

.skb__prose li,
.skb__checks li {
    position: relative;
    margin: 0;
    padding-left: 24px
}

/* a small orange dot, centred on the first line */
.skb__prose ul li::before,
.skb__checks li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: calc(.5lh - 3.5px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--o)
}

/* steps: plain orange numerals in the heading face */
.skb__prose ol li {
    counter-increment: skb;
    padding-left: 30px
}

.skb__prose ol li::before {
    content: counter(skb) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--o);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600
}

.skb__prose figure {
    margin: 32px 0
}

.skb__prose figure img {
    width: 100%;
    border-radius: 22px;
    background: var(--fd)
}

.skb__prose figcaption {
    margin-top: 10px;
    color: #6b7f8e;
    font-size: 14px;
    line-height: 1.5;
    text-align: center
}

.skb__prose blockquote {
    margin: 30px 0;
    padding: 24px 28px;
    border-left: 5px solid var(--o);
    border-radius: 0 22px 22px 0;
    background: var(--fd);
    color: var(--n);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 21px;
    line-height: 1.55
}

.skb__note {
    margin: 28px 0;
    padding: 20px 24px;
    border-radius: 18px;
    background: var(--soft)
}

.skb__note p {
    margin: 0 !important;
    font-size: 16.5px;
    line-height: 1.7
}

.skb__tablewrap {
    margin: 30px 0;
    border-radius: 18px;
    border: 1px solid var(--ln);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.skb__tablewrap table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 15.5px;
    line-height: 1.55
}

.skb__tablewrap caption {
    padding: 16px 20px;
    color: #6b7f8e;
    font-size: 14px;
    text-align: left;
    caption-side: bottom
}

.skb__tablewrap th {
    padding: 14px 20px;
    background: var(--fd);
    color: var(--n);
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap
}

.skb__tablewrap td {
    padding: 15px 20px;
    border-top: 1px solid var(--ln);
    vertical-align: top
}

.skb__tablewrap td:first-child {
    color: var(--n);
    font-weight: 600
}

.skb__pc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 30px 0
}

.skb__pc>div {
    padding: 24px;
    border-radius: 18px;
    border: 1px solid var(--ln)
}

.skb__pc h3 {
    margin: 0 0 12px !important;
    font-size: 20px !important
}

.skb__pc ul {
    margin: 0 !important
}

.skb__pc li {
    padding-left: 26px;
    font-size: 16px;
    line-height: 1.6
}

/* pros get a check, the con a dash (drawn strokes, no badge behind them); "ul" to outrank the
   dot of .skb__prose ul li */
.skb__pc ul li::before {
    left: 0;
    top: calc(.5lh - 6px);
    width: 14px;
    height: 12px;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M1.5 6.4l3.6 3.6L12.5 2' fill='none' stroke='%23F98225' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 12px no-repeat
}

.skb__pc ul li.skb__con::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M2.5 6h9' stroke='%238A9AA6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
}

/* faq */
/* questions divided by hairlines; the plus turns into a cross when open */
.skb__faq {
    margin: 0 0 10px;
    border-top: 1px solid var(--ln)
}

.skb__faq details {
    border-bottom: 1px solid var(--ln)
}

.skb__faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 2px;
    cursor: pointer;
    list-style: none;
    color: var(--n);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45
}

.skb__faq summary::-webkit-details-marker {
    display: none
}

.skb__faq summary::after {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23F98225' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
    transition: transform .25s ease
}

.skb__faq details[open] summary::after {
    transform: rotate(45deg)
}

.skb__faq summary:hover {
    color: var(--o)
}

.skb__faq summary:focus-visible {
    outline: 2px solid var(--o);
    outline-offset: 2px;
    border-radius: 6px
}

.skb__faq details p {
    margin: 0;
    padding: 0 40px 22px 2px;
    font-size: 16.5px;
    line-height: 1.75
}

/* tags, share, author box */
.skb__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 20px 0 0;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--ln)
}

.skb__tags,
.skb__share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}

.skb__tags a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    background: var(--fd);
    color: var(--n);
    font-size: 14px;
    font-weight: 600
}

.skb__tags a:hover {
    background: var(--soft);
    color: var(--o)
}

.skb__share>span {
    color: var(--n);
    font-weight: 600;
    font-size: 15px
}

.skb__share a,
.skb__share button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--fd);
    color: var(--n);
    font-size: 16px;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease
}

.skb__share a:hover,
.skb__share button:hover {
    background: var(--o);
    color: #fff
}

.skb__authorbox {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    margin: 36px 0 0;
    padding: 30px;
    border-radius: 20px;
    background: var(--fd);
    border: 1px solid var(--ln)
}

.skb .skb__authorbox .skb__avatar {
    flex-basis: 60px;
    width: 60px;
    height: 60px;
    padding: 8px;
    border: 1px solid var(--ln)
}

.skb__authorbox h2 {
    margin: 0 0 6px;
    color: var(--n);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 600
}

.skb__authorbox p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.7
}

.skb .skb__authorbox a {
    color: var(--o);
    font-weight: 600
}

.skb__related {
    padding: 70px 0 0
}

.skb__related-title {
    margin: 0 0 28px;
    color: var(--n);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.2
}

.skb__endcta {
    margin-top: 56px
}

@media (prefers-reduced-motion:reduce) {
    .skb * {
        transition: none !important;
        scroll-behavior: auto !important
    }
}

/* ---------- responsive ---------- */
@media (min-width:1400px) {
    .skb__wrap {
        max-width: 1320px
    }

    .skb__layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 60px
    }
}

@media (min-width:1800px) {
    .skb__wrap {
        max-width: 1480px
    }
}

@media (max-width:1199px) {
    .skb__grid {
        gap: 40px 22px
    }

    .skb__layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 36px
    }

    .skb__feature {
        column-gap: 36px
    }
}

@media (max-width:991px) {
    .skb__hero {
        padding: 150px 0 110px
    }

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

    .skb__feature {
        grid-template-columns: minmax(0, 1fr)
    }

    .skb__feature {
        margin-bottom: 56px
    }

    .skb__feature .skb__thumb {
        aspect-ratio: 16/9
    }

    .skb__band {
        grid-template-columns: minmax(0, 1fr)
    }

    .skb__hero--post {
        padding: 150px 0 130px
    }

    .skb__cover {
        margin-top: -80px
    }

    .skb__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px
    }

    .skb__side {
        order: 0;
        position: static
    }

    .skb__article {
        order: 1
    }

    .skb__sidecta {
        display: none
    }

    .skb__toc-toggle {
        padding: 18px 20px
    }

    .skb__toc-list {
        max-height: 50vh
    }
}

@media (max-width:767px) {
    .skb__main {
        padding: 32px 0 70px
    }

    .skb__band {
        padding: 32px 24px;
        border-radius: 26px
    }

    .skb__take {
        padding: 22px;
        border-radius: 18px
    }

    .skb__pc {
        grid-template-columns: minmax(0, 1fr)
    }

    .skb__authorbox {
        padding: 24px 20px
    }

    .skb__cover figure {
        border-radius: 20px
    }

    .skb__cover img {
        aspect-ratio: 16/10
    }
}

@media (max-width:575px) {
    .skb__hero {
        padding: 128px 0 96px
    }

    .skb__hero--post {
        padding: 128px 0 120px
    }

    .skb__lead {
        font-size: 16.5px
    }

    /* article list: small square photo beside the title, like a news app */
    .skb__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px
    }

    .skb__card {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px
    }

    .skb__card .skb__thumb {
        flex: 0 0 104px;
        aspect-ratio: 1;
        border-radius: 14px
    }

    .skb__card-body {
        padding: 0
    }

    .skb__card-title {
        margin-bottom: 6px;
        font-size: 17.5px
    }

    .skb__card .skb__excerpt {
        display: none
    }

    .skb .skb__card-title a::after {
        border-radius: 14px
    }

    .skb__meta {
        font-size: 12.5px
    }

    .skb__bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -15px;
        padding-right: 15px;
        padding-bottom: 6px;
        scrollbar-width: none
    }

    .skb__bar::-webkit-scrollbar {
        display: none
    }

    .skb__chip {
        flex: 0 0 auto
    }

    .skb__search {
        padding-left: 18px
    }

    .skb__post {
        padding: 40px 0 64px
    }

    .skb__prose {
        font-size: 16.5px;
        line-height: 1.8
    }

    .skb__prose ol li {
        padding-left: 26px
    }

    .skb__prose blockquote {
        padding: 18px 20px;
        font-size: 18px
    }

    /* comparison table: one card per row instead of a hidden third column */
    .skb__tablewrap table {
        min-width: 0
    }

    .skb__tablewrap thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0)
    }

    .skb__tablewrap tr,
    .skb__tablewrap td {
        display: block
    }

    .skb__tablewrap tbody tr {
        padding: 16px 18px;
        border-top: 1px solid var(--ln)
    }

    .skb__tablewrap tbody tr:first-child {
        border-top: 0
    }

    .skb__tablewrap td {
        padding: 0;
        border-top: 0
    }

    .skb__tablewrap td:first-child {
        margin: 0 0 6px;
        font-size: 16.5px
    }

    .skb__tablewrap td+td {
        margin-top: 8px
    }

    .skb__tablewrap td+td::before {
        content: attr(data-label);
        display: block;
        color: #6b7f8e;
        font-size: 13px;
        font-weight: 600
    }

    .skb__authorbox {
        flex-direction: column;
        gap: 14px
    }

    .skb__foot {
        flex-direction: column;
        align-items: flex-start
    }

    .skb__faq summary {
        padding: 16px 2px;
        font-size: 16px
    }

    .skb__faq details p {
        padding: 0 24px 18px 2px
    }

    .skb .skb__cta {
        width: 100%;
        justify-content: space-between;
        font-size: 16px;
        padding-left: 24px
    }

    .skb__cta-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 16px
    }

    .skb__byline {
        gap: 12px 14px
    }

    /* the author on its own line, so the next line doesn't start with a dot */
    .skb__author {
        flex-basis: 100%
    }

    .skb__byline>.skb__author+span::before {
        display: none
    }
}

@media (max-width:374px) {
    .skb__crumbs {
        font-size: 13px;
        padding: 8px 14px
    }

    .skb__card .skb__thumb {
        flex-basis: 88px
    }
}


/* =========================================================
    About page 
   ========================================================= */
.ska {
    --o: #F98225;
    --n: #2A4456;
    --nd: #1D3242;
    --tx: #4d6273;
    --ln: #E8EDF1;
    --soft: #FFF1E6;
    --fd: #F6F8FA;
    position: relative;
    background: #fff;
    color: var(--tx);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    overflow-x: clip;
    max-width: 100%
}

.ska *,
.ska *::before,
.ska *::after {
    box-sizing: border-box
}

.ska a,
.ska a:hover,
.ska a:focus {
    text-decoration: none
}

.ska img {
    max-width: 100%;
    height: auto;
    display: block
}

.ska h1,
.ska h2,
.ska h3 {
    overflow-wrap: anywhere
}

.ska__wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px
}

.ska__sec {
    padding: 90px 0
}

.ska__head {
    max-width: 640px;
    margin: 0 0 44px
}

.ska__head--c {
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.ska__h2 {
    margin: 0 0 14px;
    color: var(--n);
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.15;
    letter-spacing: -.3px
}

.ska__p {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.8
}

/* ---------- buttons (same as site) ---------- */
.ska .ska__cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 6px 6px 6px 30px;
    border: 0;
    border-radius: 50px;
    background: var(--o);
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 14px 28px -12px rgba(249, 130, 37, .7);
    transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease
}

.ska__cta-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--n);
    font-size: 18px
}

.ska__cta-icon i {
    transform: rotate(-45deg);
    transition: transform .35s ease
}

.ska .ska__cta:hover,
.ska .ska__cta:focus-visible {
    background: var(--n);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(42, 68, 86, .7)
}

.ska .ska__cta:hover .ska__cta-icon i,
.ska .ska__cta:focus-visible .ska__cta-icon i {
    transform: rotate(0)
}

.ska .ska__cta--ghost {
    padding: 0 28px;
    height: 64px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .4);
    box-shadow: none
}

.ska .ska__cta--ghost:hover {
    background: #fff;
    color: var(--n);
    border-color: #fff;
    box-shadow: none
}

.ska .ska__cta--light:hover,
.ska .ska__cta--light:focus-visible {
    background: #fff;
    color: var(--n)
}

/* on the navy hero a navy hover made the button disappear: it turns white there instead */
.ska .ska__hero .ska__cta:not(.ska__cta--ghost):hover,
.ska .ska__hero .ska__cta:not(.ska__cta--ghost):focus-visible {
    background: #fff;
    color: var(--n);
    box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .45)
}

.ska__hero .ska__cta:not(.ska__cta--ghost):hover .ska__cta-icon,
.ska__hero .ska__cta:not(.ska__cta--ghost):focus-visible .ska__cta-icon,
.ska .ska__cta--light:hover .ska__cta-icon,
.ska .ska__cta--light:focus-visible .ska__cta-icon {
    background: var(--o);
    color: #fff
}

.ska .ska__cta:focus-visible {
    outline: 3px solid rgba(249, 130, 37, .5);
    outline-offset: 3px
}

.ska__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

/* ---------- hero ---------- */
.ska__hero {
    position: relative;
    overflow: hidden;
    padding: 175px 0 130px;
    color: #fff;
    background: radial-gradient(circle at 88% 12%, rgba(249, 130, 37, .34) 0, rgba(249, 130, 37, 0) 40%), linear-gradient(160deg, var(--n) 0%, var(--nd) 100%)
}

.ska__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.4px);
    background-size: 24px 24px
}

.ska__hero::after {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -1px;
    height: 56px;
    background: #fff;
    border-radius: 50% 50% 0 0/100% 100% 0 0
}

.ska__ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    border: 1.5px dashed rgba(255, 255, 255, .18)
}

.ska__ring--a {
    width: 460px;
    height: 460px;
    left: -160px;
    top: -140px
}

.ska__ring--b {
    width: 300px;
    height: 300px;
    right: -90px;
    bottom: -140px;
    border-color: rgba(249, 130, 37, .4)
}

.ska__hero .ska__wrap {
    position: relative;
    z-index: 1
}

.ska__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 56px;
    align-items: center
}

.ska__crumbs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 9px 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2
}

.ska .ska__crumbs a {
    color: #fff;
    opacity: .8
}

.ska .ska__crumbs a:hover {
    opacity: 1;
    color: #fff
}

.ska__crumbs i {
    font-size: 10px;
    color: var(--o)
}

.ska__title {
    margin: 0 0 18px;
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.1;
    letter-spacing: -.5px
}

.ska__lead {
    margin: 0 0 30px;
    max-width: 580px;
    color: rgba(255, 255, 255, .84);
    font-size: 18px;
    line-height: 1.75
}

/* hero facts: one panel with ruled rows and thin line icons
   (was three glass cards with orange icon tiles) */
.ska__note {
    margin: 0;
    padding: 4px 28px;
    list-style: none;
    border-radius: 22px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14)
}

.ska__note li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0
}

.ska__note li + li {
    border-top: 1px solid rgba(255, 255, 255, .12)
}

.ska__note i {
    margin-top: 2px;
    color: var(--o);
    font-size: 23px;
    line-height: 1;
    text-align: center
}

.ska__note strong {
    display: block;
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3
}

.ska__note span {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    line-height: 1.5
}

.ska .ska__note a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .35);
    text-underline-offset: 3px
}

.ska .ska__note a:hover {
    color: var(--o);
    text-decoration-color: currentColor
}

/* ---------- story ---------- */
.ska__story {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: center
}

.ska__pic {
    position: relative;
    padding: 0 0 26px 26px
}

.ska__pic::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 26px;
    top: 26px;
    border-radius: 32px;
    background: var(--soft);
    border: 1.5px dashed #F6CBA6
}

.ska__pic-img {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--n), var(--nd));
    box-shadow: 0 34px 60px -34px rgba(42, 68, 86, .6)
}

.ska__pic-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* the frame is shorter than the poster: crop the blank top, not the word "ITALY" at the bottom */
    object-position: center bottom
}

.ska__badge {
    position: absolute;
    right: -14px;
    top: 30px;
    z-index: 2;
    width: 132px;
    height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--o);
    color: #fff;
    text-align: center;
    border: 7px solid #fff;
    box-shadow: 0 18px 34px -16px rgba(249, 130, 37, .8)
}

.ska__badge b {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 38px;
    font-weight: 600;
    line-height: 1
}

.ska__badge span {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2
}

.ska__list {
    list-style: none;
    margin: 22px 0 30px;
    padding: 0;
    display: grid;
    gap: 12px
}

.ska__list li {
    position: relative;
    padding-left: 36px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--n);
    font-weight: 500
}

.ska__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' fill='none' stroke='%23F98225' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 10px no-repeat
}

/* ---------- CEO ---------- */
.ska__ceo {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 8% 90%, rgba(249, 130, 37, .28) 0, rgba(249, 130, 37, 0) 40%), linear-gradient(155deg, var(--n) 0%, var(--nd) 100%)
}

.ska__ceo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1.2px, transparent 1.4px);
    background-size: 24px 24px
}

.ska__ceo-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 72px;
    align-items: center
}

.ska__portrait {
    position: relative;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px 24px 0
}

.ska__portrait::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 24px;
    top: 24px;
    border-radius: 32px;
    background: var(--o)
}

.ska__portrait-img {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(135deg, #3b566a, var(--nd));
    border: 6px solid #fff
}

.ska__portrait-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.ska__nameplate {
    position: absolute;
    left: -14px;
    bottom: 0;
    z-index: 2;
    padding: 16px 22px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6)
}

.ska__nameplate strong {
    display: block;
    color: var(--n);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2
}

.ska__nameplate span {
    display: block;
    margin-top: 2px;
    color: var(--o);
    font-size: 14px;
    font-weight: 600
}

.ska__qicon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px;
    border-radius: 18px;
    background: var(--o);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 14px 26px -12px rgba(249, 130, 37, .8)
}

.ska__ceo .ska__h2 {
    color: #fff
}

.ska__ceo .ska__p {
    color: rgba(255, 255, 255, .84)
}

.ska__quote {
    margin: 0 0 22px;
    padding-left: 22px;
    border-left: 4px solid var(--o);
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(20px, 2.3vw, 26px);
    line-height: 1.5
}

.ska__sign {
    margin: 26px 0 0;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff
}

.ska__sign b {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px;
    font-style: italic;
    font-weight: 600
}

.ska__sign span {
    color: rgba(255, 255, 255, .7);
    font-size: 15px
}

/* ---------- services ----------
   One panel split into four by hairlines (the 1px grid gaps let the panel colour show between the
   cells), with thin line icons; the whole cell is the link. (Was four floating cards with icon tiles.) */
.ska__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--ln);
    border-radius: 24px;
    background: var(--ln)
}

.ska__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 30px 30px;
    background: #fff;
    transition: background-color .2s ease-out
}

.ska__card:hover {
    background: #FBF7F0
}

.ska__icon {
    display: block;
    margin: 0 0 22px;
    color: var(--o);
    font-size: 30px;
    line-height: 1
}

.ska__card h3 {
    margin: 0 0 10px;
    color: var(--n);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25
}

.ska__card p {
    margin: 0 0 22px;
    font-size: 15.5px;
    line-height: 1.7
}

.ska .ska__more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--n);
    font-size: 15.5px;
    font-weight: 600
}

/* the link covers the whole cell */
.ska .ska__more::after {
    content: "";
    position: absolute;
    inset: 0
}

.ska .ska__more i {
    color: var(--o);
    transition: transform .2s ease-out
}

.ska .ska__card:hover .ska__more i {
    transform: translateX(4px)
}

.ska .ska__more:focus-visible {
    outline: 2px solid var(--o);
    outline-offset: 4px;
    border-radius: 4px
}

/* ---------- why us ----------
   Three open columns divided by hairlines, with thin line icons; destinations as a row of photos.
   (Was three cards with an orange top bar and navy icon tiles, and a row of pill chips.) */
.ska__why {
    background: var(--fd)
}

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

.ska__why-item {
    padding: 8px 40px;
    text-align: center
}

.ska__why-item + .ska__why-item {
    border-left: 1px solid rgba(42, 68, 86, .14)
}

.ska__why-item i {
    display: block;
    margin: 0 0 18px;
    color: var(--o);
    font-size: 30px;
    line-height: 1
}

.ska__why-item h3 {
    margin: 0 0 10px;
    color: var(--n);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 22px
}

.ska__why-item p {
    max-width: 32ch;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.75
}

/* destinations: a photo per destination with its main cities, linking to the page that sells it.
   Six across from 992px; below that a row you swipe, running to the screen edges with the next
   photo peeking in. */
.ska__dest {
    margin: 88px 0 0;
    padding: 64px 0 0;
    border-top: 1px solid rgba(42, 68, 86, .14)
}

.ska__dest-title {
    margin: 0 0 36px;
    text-align: center;
    color: var(--n);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.2;
    text-wrap: balance
}

.ska__dest-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none
}

.ska__dest-list li {
    margin: 0
}

.ska .ska__dest-link {
    display: block;
    color: var(--n);
    border-radius: 16px
}

.ska__dest-photo {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    background: #E3E9EE;
    box-shadow: 0 1px 2px rgba(29, 50, 66, .06), 0 16px 28px -20px rgba(29, 50, 66, .55)
}

.ska .ska__dest-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1)
}

.ska__dest-link:hover .ska__dest-photo img {
    transform: scale(1.045)
}

.ska__dest-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 3px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25
}

/* the arrow slides in on hover and focus, like the other About links */
.ska__dest-name i {
    color: var(--o);
    font-size: 15px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s ease-out, transform .25s ease-out
}

.ska__dest-link:hover .ska__dest-name i,
.ska__dest-link:focus-visible .ska__dest-name i {
    opacity: 1;
    transform: none
}

.ska__dest-cities {
    display: block;
    color: var(--tx);
    font-size: 14px;
    line-height: 1.45
}

.ska .ska__dest-link:focus-visible {
    outline: 2px solid var(--o);
    outline-offset: 5px
}

@media (prefers-reduced-motion: reduce) {
    .ska .ska__dest-photo img,
    .ska__dest-name i {
        transition: none
    }

    .ska__dest-link:hover .ska__dest-photo img {
        transform: none
    }
}

@media (max-width:1199px) {
    .ska__dest-list {
        gap: 16px
    }

    .ska__dest-name {
        font-size: 18px
    }

    .ska__dest-cities {
        font-size: 13px
    }
}

@media (max-width:991px) {
    .ska__dest {
        margin-top: 56px;
        padding-top: 48px
    }

    .ska__dest-title {
        margin-bottom: 24px
    }

    /* one row that scrolls sideways past the page gutter (15px, .ska__wrap); photos snap to it */
    .ska__dest-list {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(66vw, 250px);
        gap: 14px;
        margin: 0 -15px;
        padding: 4px 15px 16px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 15px;
        scrollbar-width: thin;
        scrollbar-color: rgba(42, 68, 86, .28) transparent
    }

    .ska__dest-list li {
        scroll-snap-align: start
    }

    .ska__dest-name {
        margin-top: 14px;
        font-size: 19px
    }

    .ska__dest-cities {
        font-size: 13.5px
    }
}

/* touch screens swipe the row, so no scrollbar there */
@media (hover: none) {
    .ska__dest-list {
        scrollbar-width: none
    }

    .ska__dest-list::-webkit-scrollbar {
        display: none
    }
}

/* ---------- visit / CTA ----------
   The last card on the page, above the site footer: text and button on the left, a dotted globe of
   our destinations on the right. The address, phone and hours are in the footer right below it. */

.ska__visit {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1200px;
    min-height: 320px;
    margin: 0 auto;
    padding: 48px 56px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(460px 300px at 0% 100%, rgba(249, 130, 37, .2), transparent 70%),
        linear-gradient(150deg, #2f4b60 0%, #1f3546 100%);
    box-shadow: 0 34px 60px -30px rgba(8, 18, 26, .65)
}

.ska__visit-text {
    position: relative;
    z-index: 1;
    max-width: 440px
}

.ska__visit h2 {
    margin: 0 0 14px;
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(28px, 2.8vw, 38px);
    line-height: 1.15;
    letter-spacing: -0.01em
}

.ska__visit p {
    margin: 0 0 26px;
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    line-height: 1.7
}

/* a smaller button than the hero's */
.ska .ska__visit .ska__cta {
    padding: 5px 5px 5px 24px;
    font-size: 16px
}

.ska__visit .ska__cta-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    font-size: 15px
}

.ska .ska__globe {
    position: absolute;
    right: -22px;
    bottom: -1px;
    width: min(46%, 560px);
    max-width: none;
    height: auto;
    pointer-events: none
}

@media (prefers-reduced-motion:reduce) {
    .ska * {
        transition: none !important
    }
}

/* ---------- responsive ---------- */
@media (min-width:1400px) {
    .ska__wrap {
        max-width: 1320px
    }
}

@media (min-width:1800px) {
    .ska__wrap {
        max-width: 1480px
    }
}

@media (max-width:1199px) {
    .ska__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    /* narrower desktop: keep the text and the globe apart */
    .ska__visit-text {
        max-width: 380px
    }

    .ska .ska__globe {
        width: 46%
    }

    .ska__story {
        gap: 44px
    }

    .ska__ceo-grid {
        gap: 48px
    }
}

@media (max-width:991px) {
    .ska__sec {
        padding: 70px 0
    }

    .ska__hero {
        padding: 150px 0 110px
    }

    .ska__hero-grid,
    .ska__story,
    .ska__ceo-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .ska__hero-grid {
        gap: 34px
    }

    .ska__story,
    .ska__ceo-grid {
        gap: 56px
    }

    .ska__pic {
        max-width: 520px;
        margin: 0 auto;
        width: 100%
    }

    .ska__why-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    /* stacked: the dividers run between the rows instead of the columns */
    .ska__why-item {
        padding: 26px 0
    }

    .ska__why-item + .ska__why-item {
        border-left: 0;
        border-top: 1px solid rgba(42, 68, 86, .14)
    }


    .ska__visit {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 40px 32px 0
    }

    .ska .ska__globe {
        position: relative;
        right: auto;
        bottom: auto;
        align-self: center;
        width: min(100%, 480px);
        margin: 32px 0 -1px
    }
}

@media (max-width:767px) {
    .ska__sec {
        padding: 56px 0
    }

    .ska__head {
        margin-bottom: 32px
    }

    .ska__cards {
        grid-template-columns: minmax(0, 1fr)
    }

    .ska__badge {
        width: 112px;
        height: 112px;
        right: -6px;
        border-width: 5px
    }

    .ska__badge b {
        font-size: 32px
    }
}

@media (max-width:575px) {
    .ska__hero {
        padding: 128px 0 96px
    }

    .ska__lead,
    .ska__p {
        font-size: 16.5px
    }

    .ska__btns {
        flex-direction: column;
        align-items: stretch
    }

    .ska .ska__cta {
        width: 100%;
        justify-content: space-between;
        font-size: 16px;
        padding-left: 24px
    }

    .ska .ska__cta--ghost {
        justify-content: center;
        height: 58px
    }

    .ska__cta-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 16px
    }


    .ska__visit {
        padding: 32px 22px 0;
        border-radius: 20px
    }

    .ska__card {
        padding: 28px 24px 26px
    }

    .ska__nameplate {
        left: 0;
        padding: 12px 16px
    }

    .ska__nameplate strong {
        font-size: 17px
    }

    .ska__portrait {
        padding: 0 16px 16px 0
    }

    .ska__portrait::before {
        left: 16px;
        top: 16px
    }

    .ska__pic {
        padding: 0 0 16px 16px
    }

    .ska__pic::before {
        right: 16px;
        top: 16px
    }

    /* name above the title: side by side they squeezed each other onto several lines */
    .ska__sign {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }

    .ska__note {
        padding: 2px 20px
    }

    .ska__note li {
        gap: 14px;
        padding: 18px 0
    }

    .ska__note strong {
        font-size: 18px
    }
}

@media (max-width:374px) {
    .ska__crumbs {
        font-size: 13px;
        padding: 8px 14px
    }

    .ska__card {
        padding: 26px 20px
    }
}


/* =========================================================
   FORGOT PASSWORD PAGE
   ========================================================= */

.skau__hero--fp {
    padding-bottom: 150px;
}

.skau__fp-body {
    display: flow-root;
    position: relative;
    padding: 0 0 100px;
    background:
        radial-gradient(circle at 94% 10%, rgba(249, 130, 37, .10) 0, rgba(249, 130, 37, 0) 30%),
        radial-gradient(circle at 4% 70%, rgba(42, 68, 86, .06) 0, rgba(42, 68, 86, 0) 32%),
        #fff;
}

.skau__fp-wrap {
    position: relative;
    z-index: 2;
    margin-top: -92px;
}

.skau__fp-card {
    max-width: 620px;
    margin: 0 auto;
    border-radius: 32px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--skau-line);
    box-shadow: 0 40px 80px -36px rgba(42, 68, 86, .45);
}

/* ---------- top band ---------- */
.skau__fp-top {
    position: relative;
    overflow: hidden;
    padding: 42px 32px 34px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 15% 8%, rgba(249, 130, 37, .38) 0, rgba(249, 130, 37, 0) 46%),
        linear-gradient(155deg, var(--skau-navy) 0%, var(--skau-navy-deep) 100%);
}

.skau__fp-top::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1.2px, transparent 1.4px);
    background-size: 22px 22px;
}

.skau__fp-top::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -110px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, .16);
    pointer-events: none;
}

.skau__fp-top>* {
    position: relative;
    z-index: 1;
}

.skau__fp-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26px;
    background: var(--skau-orange);
    color: #fff;
    font-size: 34px;
    border: 5px solid rgba(255, 255, 255, .2);
    box-shadow: 0 18px 34px -14px rgba(249, 130, 37, .9);
    transform: rotate(-6deg);
}

.skau__fp-top-title {
    margin: 0 0 10px;
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.25;
}

.skau__fp-top-text {
    margin: 0 auto;
    max-width: 400px;
    color: rgba(255, 255, 255, .8);
    font-size: 15.5px;
    line-height: 1.7;
}

/* ---------- steps ---------- */
.skau__fp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.skau__fp-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

.skau__fp-steps li::after {
    content: "";
    position: absolute;
    top: 17px;
    left: calc(50% + 26px);
    right: calc(-50% + 26px);
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .2);
}

.skau__fp-steps li:last-child::after {
    display: none;
}

.skau__fp-steps b {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transition: background-color .3s ease, border-color .3s ease;
}

.skau__fp-steps li.is-active {
    color: #fff;
}

.skau__fp-steps li.is-active b {
    background: var(--skau-orange);
    border-color: var(--skau-orange);
}

.skau__fp-steps li.is-done {
    color: #fff;
}

.skau__fp-steps li.is-done b {
    font-size: 0;
    border-color: #fff;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.2L11 1.6' fill='none' stroke='%232A4456' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 11px no-repeat;
}

.skau__fp-steps li.is-done::after {
    background: var(--skau-orange);
}

/* ---------- content ---------- */
.skau__fp-content {
    padding: 38px 42px 34px;
}

.skau__fp-state[hidden] {
    display: none;
}

.skau__fp-lead {
    margin: 0 0 24px;
    text-align: center;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--skau-text);
}

.skau__fp-lead strong {
    color: var(--skau-navy);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.skau__fp-card .skau__btn-row {
    margin-top: 24px;
}

/* leading icon inside the email input */
.skau__fp-card .skau__input--icon {
    padding-left: 46px;
    padding-right: 16px;
}

.skau__input-ico {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9AABB6;
    font-size: 15px;
    pointer-events: none;
    transition: color .25s ease;
}

.skau__input--icon:focus~.skau__input-ico {
    color: var(--skau-orange);
}

/* ---------- success state ---------- */
.skau__fp-ok {
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #E9F8F1;
    color: var(--skau-ok);
    font-size: 32px;
    box-shadow: 0 0 0 10px rgba(31, 169, 122, .08);
}

.skau__fp-ok-title {
    margin: 0 0 10px;
    text-align: center;
    color: var(--skau-navy);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(22px, 2.6vw, 27px);
    line-height: 1.25;
}

.skau__fp-tips {
    display: grid;
    gap: 10px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.skau__fp-tips li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--skau-field);
    border: 1px solid var(--skau-line);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--skau-text);
}

.skau__fp-tips i {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--skau-soft);
    color: var(--skau-orange);
    font-size: 14px;
}

.skau__fp-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin: 24px 0 0;
    font-size: 14.5px;
}

.skau .skau__fp-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--skau-orange);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: color .25s ease;
}

.skau .skau__fp-link:hover {
    color: var(--skau-navy);
}

.skau .skau__fp-link:disabled {
    color: #9AABB6;
    cursor: not-allowed;
}

.skau__fp-back {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.skau .skau__fp-back a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 50px;
    border: 1.5px solid var(--skau-line);
    color: var(--skau-navy);
    font-size: 14.5px;
    font-weight: 600;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.skau .skau__fp-back a i {
    color: var(--skau-orange);
    transition: transform .3s ease;
}

.skau .skau__fp-back a:hover {
    border-color: var(--skau-orange);
    background: var(--skau-soft);
    color: var(--skau-navy);
}

.skau .skau__fp-back a:hover i {
    transform: translateX(-4px);
}

/* ---------- help strip ---------- */
.skau__fp-help {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 42px;
    background: var(--skau-field);
    border-top: 1px solid var(--skau-line);
}

.skau__fp-help-ico {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--skau-orange);
    color: #fff;
    font-size: 22px;
}

.skau__fp-help strong {
    display: block;
    color: var(--skau-navy);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.skau__fp-help span {
    display: block;
    font-size: 13.5px;
    line-height: 1.55;
}

.skau .skau__fp-help a {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--skau-orange);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.skau .skau__fp-help a:hover {
    color: var(--skau-navy);
}

.skau__fp-trust {
    justify-content: center;
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
}

.skau .skau__fp-link:focus-visible,
.skau .skau__fp-back a:focus-visible,
.skau .skau__fp-help a:focus-visible {
    outline: 3px solid rgba(249, 130, 37, .45);
    outline-offset: 3px;
    border-radius: 8px;
}

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

    .skau__fp-steps b,
    .skau .skau__fp-back a,
    .skau .skau__fp-back a i {
        transition: none;
    }
}

/* ---------- responsive ---------- */
@media (min-width: 1400px) {
    .skau__fp-card {
        max-width: 660px;
    }
}

@media (max-width: 991px) {
    .skau__hero--fp {
        padding-bottom: 130px;
    }

    .skau__fp-wrap {
        margin-top: -80px;
    }

    .skau__fp-body {
        padding-bottom: 70px;
    }
}

@media (max-width: 767px) {
    .skau__hero--fp {
        padding-bottom: 116px;
    }

    .skau__fp-wrap {
        margin-top: -72px;
    }

    .skau__fp-card {
        border-radius: 26px;
    }

    .skau__fp-top {
        padding: 36px 24px 30px;
    }

    .skau__fp-content {
        padding: 32px 26px 28px;
    }

    .skau__fp-help {
        padding: 20px 26px;
    }
}

@media (max-width: 575px) {
    .skau__hero--fp {
        padding-bottom: 104px;
    }

    .skau__fp-wrap {
        margin-top: -64px;
    }

    .skau__fp-body {
        padding-bottom: 56px;
    }

    .skau__fp-card {
        border-radius: 22px;
    }

    .skau__fp-top {
        padding: 30px 18px 26px;
    }

    .skau__fp-icon {
        width: 72px;
        height: 72px;
        font-size: 29px;
        border-radius: 22px;
    }

    .skau__fp-top-text {
        font-size: 14.5px;
    }

    .skau__fp-steps {
        margin-top: 24px;
    }

    .skau__fp-steps li {
        font-size: 11.5px;
        padding: 0 2px;
    }

    .skau__fp-steps b {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .skau__fp-steps li::after {
        top: 15px;
        left: calc(50% + 22px);
        right: calc(-50% + 22px);
    }

    .skau__fp-content {
        padding: 28px 18px 24px;
    }

    .skau__fp-card .skau__btn {
        width: 100%;
    }

    .skau__fp-links {
        flex-direction: column;
        align-items: center;
    }

    .skau__fp-help {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px 18px;
    }

    .skau .skau__fp-help a {
        margin-left: 0;
    }
}

@media (max-width: 374px) {
    .skau__fp-steps li {
        font-size: 10.5px;
    }

    .skau__fp-tips li {
        padding: 12px;
        gap: 10px;
    }
}

/* Home FAQ: the two highlight boxes over the photo ("24/7 Travel Support", "Rome Based Agency") are
   compact, so they don't cover most of the picture. */
.faq-area .faq-counter .counter-box {
    min-width: 0;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 20px 12px 12px;
    border-radius: 12px;
}

.faq-area .faq-counter .counter-box .icon {
    width: 48px;
    height: 48px;
    line-height: 44px;
}

.faq-area .faq-counter .counter-box .icon img {
    width: 26px;
}

.faq-area .faq-counter .faq-counter__value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: #2A4456;
}

.faq-area .faq-counter .counter-box .title {
    margin-top: 2px;
    font-size: 14px;
}