/* ==========================================================================
   SS Hotels & Resorts — header
   Everything is scoped with the .ssh- prefix, so it will not clash with
   Bootstrap or the old #cssmenu / .top / .top-div rules (delete those).
   ========================================================================== */

:root {
    --ssh-navy: #0c2859;
    --ssh-coral: #f84b3c; /* brand coral: accents, icons, the summit mark */
    --ssh-coral-strong: #d63324; /* button fill: white text passes AA on this */
    --ssh-mist: #f3f6fb;
    --ssh-line: #e4e9f2;
    --ssh-muted: #5b6b8c;
    --why-bg: #f5f7f6;
    --why-ink: #12343b;
    --why-muted: #5a6b6f;
    --why-line: #d9e1df;
    --why-accent: #0f766e;
    --why-accent-soft: #dff1ee;
    --teal-950: #12241f;
    --teal-900: #16302b;
    --teal-800: #1f463d;
    --sand-100: #f2ebdd;
    --sand-50: #faf7f1;
    --brass-500: #b8874b;
    --brass-400: #cf9f63;
    --ink-900: #221f1a;
    --ink-600: #4a453c;
    --line: #ddd2ba;
}

.ssh-topbar,
.ssh-header {
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
}

    .ssh-topbar *, .ssh-topbar *::before, .ssh-topbar *::after,
    .ssh-header *, .ssh-header *::before, .ssh-header *::after {
        box-sizing: border-box;
    }

.ssh-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Top strip (scrolls away, only the main bar sticks) ---------- */
.ssh-topbar {
    background: var(--ssh-navy);
    color: #fff;
    font-size: 13.5px;
}

.ssh-topbar__inner {
    display: flex;
    justify-content: center;
    gap: 28px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.ssh-topbar__link,
.ssh-topbar__link:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    line-height: 1.2;
}

    .ssh-topbar__link:hover,
    .ssh-topbar__link:focus {
        color: #fff;
        text-decoration: none;
    }

    .ssh-topbar__link i {
        color: var(--ssh-coral);
        font-size: 13px;
    }

/* ---------- Main bar ---------- */
.ssh-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: #fff;
    border-bottom: 1px solid var(--ssh-line);
    transition: box-shadow .25s ease;
}

    .ssh-header.is-stuck {
        box-shadow: 0 6px 24px rgba(12, 40, 89, .10);
    }

.ssh-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
}

.ssh-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.ssh-brand__logo {
    display: block;
    height: 100px;
    width: auto;
    max-width: 100%;
}

/* ---------- Navigation (desktop) ---------- */
.ssh-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.ssh-menu,
.ssh-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ssh-menu {
    display: flex;
    align-items: center;
    gap: 2px;
}

    .ssh-menu > li {
        position: relative;
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
    }

.ssh-link,
.ssh-link:visited {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 12px 15px;
    margin: 0;
    border: 0;
    background: none;
    color: var(--ssh-navy);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

    .ssh-link:hover,
    .ssh-link:focus {
        color: var(--ssh-navy);
        text-decoration: none;
    }

    /* The one signature detail: a small summit that rises under the active link */
    .ssh-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 3px;
        width: 12px;
        height: 7px;
        margin-left: -6px;
        background: var(--ssh-coral);
        -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        transform: scale(0);
        transform-origin: 50% 100%;
        transition: transform .28s cubic-bezier(.3, 1.5, .5, 1);
    }

    .ssh-link:hover::after,
    .ssh-link[aria-current="page"]::after,
    .ssh-link.is-current::after,
    .ssh-has-sub.is-open > .ssh-link::after {
        transform: scale(1);
    }

.ssh-chevron {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    transition: transform .25s ease;
}

.ssh-has-sub.is-open > .ssh-link .ssh-chevron {
    transform: rotate(180deg);
}

/* ---------- Dropdown ---------- */
.ssh-sub {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    width: 300px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--ssh-line);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(12, 40, 89, .16);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

    /* invisible bridge so the pointer can cross the gap without closing it */
    .ssh-sub::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 14px;
    }

    /* notch */
    .ssh-sub::after {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        width: 11px;
        height: 11px;
        margin-left: -5px;
        background: #fff;
        border-top: 1px solid var(--ssh-line);
        border-left: 1px solid var(--ssh-line);
        transform: rotate(45deg);
    }

.ssh-has-sub.is-open > .ssh-sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.ssh-sub > li {
    position: relative;
    margin: 0;
    padding: 0;
}

.ssh-sub__item,
.ssh-sub__item:visited {
    position: relative;
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--ssh-navy);
    text-decoration: none;
}

    .ssh-sub__item:hover,
    .ssh-sub__item:focus {
        background: var(--ssh-mist);
        color: var(--ssh-navy);
        text-decoration: none;
    }

    .ssh-sub__item[aria-current="page"] {
        background: var(--ssh-mist);
        box-shadow: inset 3px 0 0 var(--ssh-coral);
    }

.ssh-sub__title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.ssh-sub__note {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ssh-muted);
}

/* ---------- PayU Money badge (replaces the Enquire now button) ---------- */
.ssh-pay,
.ssh-pay:visited {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    order: 3; /* desktop: after the nav, far right */
    line-height: 0;
    text-decoration: none;
    transition: transform .2s ease, opacity .2s ease;
}

    .ssh-pay img {
        display: block;
        height: 70px;
        width: auto;
        max-width: 100%;
    }

    .ssh-pay:hover,
    .ssh-pay:focus {
        transform: translateY(-1px);
        opacity: .92;
    }

.ssh-nav__contact {
    display: none;
}

/* ---------- Menu button (mobile only) ---------- */
.ssh-toggle {
    display: none;
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--ssh-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ssh-toggle__bars {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    margin: -1px 0 0 -10px;
    border-radius: 2px;
    background: var(--ssh-navy);
    transition: background-color .2s ease;
}

    .ssh-toggle__bars::before,
    .ssh-toggle__bars::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 2px;
        background: var(--ssh-navy);
        transition: top .25s ease, transform .25s ease;
    }

    .ssh-toggle__bars::before {
        top: -6px;
    }

    .ssh-toggle__bars::after {
        top: 6px;
    }

.ssh-toggle[aria-expanded="true"] .ssh-toggle__bars {
    background: transparent;
}

    .ssh-toggle[aria-expanded="true"] .ssh-toggle__bars::before {
        top: 0;
        transform: rotate(45deg);
    }

    .ssh-toggle[aria-expanded="true"] .ssh-toggle__bars::after {
        top: 0;
        transform: rotate(-45deg);
    }

/* ---------- Focus ---------- */
.ssh-header :focus-visible,
.ssh-topbar :focus-visible {
    outline: 3px solid rgba(248, 75, 60, .6);
    outline-offset: 2px;
    border-radius: 8px;
}

.ssh-topbar :focus-visible {
    outline-color: #fff;
}

.ssh-header a:focus:not(:focus-visible),
.ssh-header button:focus:not(:focus-visible) {
    outline: none;
}

/* ---------- Tighter desktop (1120–1279px) ---------- */
@media (min-width: 1120px) and (max-width: 1279.98px) {
    .ssh-nav {
        gap: 14px;
    }

    .ssh-link {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 15px;
    }

    .ssh-pay img {
        height: 36px;
    }
}

/* ---------- Mobile / tablet (below 1120px) ---------- */
@media (max-width: 1119.98px) {
    .ssh-bar {
        min-height: 66px;
        gap: 12px;
    }

    .ssh-brand__logo {
        height: 44px;
    }

    /* PayU sits beside the menu button; margin-left:auto pushes both to the right */
    .ssh-pay {
        order: 0;
        margin-left: auto;
    }

        .ssh-pay img {
            height: 50px;
        }

    .ssh-toggle {
        display: block;
    }

    .ssh-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: block;
        margin: 0;
        padding: 4px 20px 24px;
        background: #fff;
        border-bottom: 1px solid var(--ssh-line);
        box-shadow: 0 18px 30px rgba(12, 40, 89, .12);
        max-height: calc(100vh - 72px);
        max-height: calc(100dvh - 72px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }

        .ssh-nav.is-open {
            opacity: 1;
            visibility: visible;
            transform: none;
            transition-delay: 0s;
        }

    .ssh-menu {
        display: block;
    }

        .ssh-menu > li + li {
            border-top: 1px solid var(--ssh-line);
        }

    .ssh-link {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 17px 4px;
        font-size: 17px;
        text-align: left;
    }

        .ssh-link::after {
            display: none;
        }

        .ssh-link[aria-current="page"],
        .ssh-link.is-current {
            color: var(--ssh-coral-strong);
        }

    .ssh-chevron {
        width: 12px;
        height: 12px;
    }

    /* dropdown becomes an inline accordion */
    .ssh-sub {
        position: static;
        display: none;
        width: auto;
        padding: 0 0 12px 12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

        .ssh-sub::before,
        .ssh-sub::after {
            display: none;
        }

    .ssh-has-sub.is-open > .ssh-sub {
        display: block;
        transform: none;
    }

    .ssh-sub__item {
        padding: 12px;
    }

    .ssh-nav__contact {
        display: grid;
        gap: 14px;
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid var(--ssh-line);
        font-size: 14.5px;
    }

        .ssh-nav__contact a,
        .ssh-nav__contact a:visited {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--ssh-navy);
            text-decoration: none;
        }

        .ssh-nav__contact i {
            width: 16px;
            text-align: center;
            color: var(--ssh-coral-strong);
        }

    /* stop the page scrolling behind the open menu */
    html.ssh-menu-open {
        overflow: hidden;
    }
}

@media (max-width: 640px) {
    .ssh-wrap {
        padding: 5px 16px;
    }

    .ssh-nav {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ssh-topbar__inner {
        justify-content: center;
    }

    .ssh-topbar__link--email {
        display: block;
    }
}

/* very narrow phones */
@media (max-width: 380px) {
    .ssh-pay img {
        height: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssh-header *, .ssh-header *::before, .ssh-header *::after {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}
/* ==========================================================================
   SS Hotels & Resorts — footer
   Scoped with .ssh-foot / .ssh-office. Delete the old `footer { … }` rules
   (footer ul, footer a, footer img, footer h4, footer address, footer p) —
   they are element selectors and would otherwise leak into this markup.
   ========================================================================== */

footer.ssh-footer {
    --f-bg: #071a3d;
    --f-text: #c9d3e8;
    --f-muted: #92a3c7;
    --f-line: rgba(255, 255, 255, .13);
    --f-coral: #f84b3c;
    --f-coral-strong: #d63324;
    position: relative;
    margin: clamp(40px, 6vw, 72px) 0 0;
    padding: 0;
    background: var(--f-bg);
    color: var(--f-text);
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    font-variant-ligatures: none;
    -webkit-font-smoothing: antialiased;
}

    /* Mountain ridge along the top edge — echoes the summit mark in the header */
    footer.ssh-footer::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% - 1px);
        height: clamp(28px, 4vw, 56px);
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23071a3d' d='M0 60 L0 36 L110 20 L200 34 L330 4 L430 30 L520 18 L640 42 L760 12 L880 36 L1000 22 L1120 40 L1240 14 L1340 32 L1440 18 L1440 60 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
        pointer-events: none;
    }

.ssh-footer *,
.ssh-footer *::before,
.ssh-footer *::after {
    box-sizing: border-box;
}

.ssh-foot__wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Links (beats the old `footer a` / `footer a:visited` rules) ---------- */
.ssh-footer a,
.ssh-footer a:visited {
    color: var(--f-text);
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

    .ssh-footer a:hover,
    .ssh-footer a:focus {
        color: #fff;
        text-decoration: none;
    }

.ssh-footer :focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: 6px;
}

.ssh-footer a:focus:not(:focus-visible) {
    outline: none;
}

.ssh-footer img {
    padding: 0;
    max-width: 100%;
}

/* ---------- Headings ---------- */
.ssh-foot__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

    .ssh-foot__title::before {
        content: "";
        flex: 0 0 auto;
        width: 12px;
        height: 7px;
        background: var(--f-coral);
        -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

/* ---------- Brand strip: logo left, social right ---------- */
.ssh-foot__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 32px;
    padding: 52px 0 36px;
    border-bottom: 1px solid var(--f-line);
}

.ssh-foot__logo,
.ssh-foot__logo:visited {
    display: inline-flex;
    margin: 0;
    padding: 12px 16px;
    background: #fff;
    border-radius: 14px;
}

    .ssh-foot__logo img {
        display: block;
        height: 56px;
        width: auto;
    }

.ssh-foot__follow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
}

    .ssh-foot__follow .ssh-foot__title {
        margin: 0;
    }

.ssh-foot__social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
}

    .ssh-foot__social li {
        margin: 0;
        padding: 0;
    }

    .ssh-foot__social a,
    .ssh-foot__social a:visited {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .24);
        border-radius: 50%;
        color: #fff;
        font-size: 19px;
        line-height: 1;
    }

        .ssh-foot__social a:hover,
        .ssh-foot__social a:focus {
            background: var(--f-coral-strong);
            border-color: var(--f-coral-strong);
            color: #fff;
        }

/* ---------- Two columns: packages | contact ---------- */
.ssh-foot__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 44px 0 52px;
}

.ssh-foot__col {
    min-width: 0;
}

/* ---------- Packages list (flows into 2 columns when there is room) ---------- */
.ssh-foot__list {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.4;
    -webkit-columns: 2 165px;
    columns: 2 165px;
    -webkit-column-gap: 32px;
    column-gap: 32px;
}

    .ssh-foot__list li {
        margin: 0;
        padding: 0;
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
    }

    .ssh-foot__list a,
    .ssh-foot__list a:visited {
        position: relative;
        display: block;
        padding: 8px 0 8px 20px;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.4;
    }

        /* bullet sits on the first line, even when a package name wraps */
        .ssh-foot__list a::before {
            content: "";
            position: absolute;
            left: 2px;
            top: 15px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--f-coral);
            transition: transform .2s ease;
        }

        .ssh-foot__list a:hover::before,
        .ssh-foot__list a:focus::before {
            transform: scale(1.5);
        }

/* ---------- Offices: 2 x 2 ---------- */
.ssh-offices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 40px;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.55;
}

.ssh-office {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 6px;
    margin: 0;
    padding: 20px 0 22px;
    border-top: 1px solid var(--f-line);
}

.ssh-office__name {
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

.ssh-office__body {
    min-width: 0;
}

    .ssh-office__body address {
        margin: 0;
        padding: 0;
        color: var(--f-text);
        font-family: inherit;
        font-size: 15px;
        font-style: normal;
        line-height: 1.6;
    }

.ssh-office__link,
.ssh-office__link:visited {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 0;
    padding: 0;
    color: #fff;
    font-weight: 600;
    line-height: 1.5;
    word-break: break-word;
}

.ssh-office__body address + .ssh-office__link {
    margin-top: 8px;
}

.ssh-office__link i {
    flex: 0 0 auto;
    width: 16px;
    color: var(--f-coral);
    font-size: 14px;
    text-align: center;
}

.ssh-office__link:hover,
.ssh-office__link:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Bottom bar ---------- */
.ssh-foot__bottom {
    border-top: 1px solid var(--f-line);
    background: rgba(0, 0, 0, .2);
}

.ssh-foot__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: var(--f-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.ssh-foot__legal {
    margin: 0;
    padding: 0;
    color: var(--f-muted);
    font-size: 13.5px;
    text-align: left;
}

    .ssh-foot__legal a,
    .ssh-foot__legal a:visited {
        margin-right: 14px;
        padding-right: 14px;
        border-right: 1px solid var(--f-line);
        color: var(--f-text);
    }

        .ssh-foot__legal a:hover,
        .ssh-foot__legal a:focus {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

.ssh-foot__credit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    color: var(--f-muted);
    font-size: 13.5px;
    text-align: left;
}

    .ssh-foot__credit a,
    .ssh-foot__credit a:visited {
        display: inline-flex;
        padding: 0px;
        background: none;
        border-radius: 0px;
    }

    .ssh-foot__credit img {
        display: block;
        width: 104px;
        height: auto;
    }

/* ---------- Tablet: offices go 2 x 2 ---------- */
@media (min-width: 640px) {
    .ssh-offices {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Desktop: packages | contact side by side ---------- */
@media (min-width: 1000px) {
    .ssh-foot__main {
        grid-template-columns: 5fr 7fr;
        gap: 64px;
    }
}

@media (max-width: 640px) {
    .ssh-foot__wrap {
        padding: 0 16px;
    }

    .ssh-foot__brand {
        padding-top: 44px;
        padding-bottom: 30px;
    }

    .ssh-foot__main {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .ssh-foot__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssh-footer *,
    .ssh-footer *::before,
    .ssh-footer *::after {
        transition-duration: 0s !important;
    }
}
/* ===== Package cards ===== */
.trip-section {
    --trip-ink: #1d2b28;
    --trip-muted: #66736f;
    --trip-line: #e4eae7;
    --trip-pine: #1f4d43;
    --trip-pine-dark: #163a32;
    --trip-amber: #e4a809;
    /* font sizes - change here */
    --trip-fs-heading: 2.25rem;
    --trip-fs-heading-sm: 1.75rem;
    --trip-fs-sub: 1.05rem;
    --trip-fs-title: 1.3rem;
    --trip-fs-price: 1.6rem;
    --trip-fs-note: .85rem;
    --trip-fs-chip: .9rem;
    --trip-fs-btn: 1rem;
    max-width: 1170px;
    margin: 0 auto;
    padding: 56px 15px;
    color: var(--trip-ink);
}

/* Header row: title left, link right */
.trip-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.trip-heading {
    margin: 0 0 6px;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--trip-ink);
}

.trip-sub {
    margin: 0;
    color: var(--trip-muted);
    font-size: 1.5rem;
    max-width: 56ch;
}

.trip-all {
    padding: 10px 20px;
    border: 1.5px solid var(--trip-pine);
    border-radius: 999px;
    color: var(--trip-pine);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

    .trip-all:hover,
    .trip-all:focus-visible {
        background: var(--trip-pine);
        color: #fff;
        text-decoration: none;
    }

/* Grid: replaces the Bootstrap col-md-4 floats, equal-height cards */
.trip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

/* Card */
.trip-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--trip-line);
    border-radius: 18px;
    overflow: hidden;
    transition: box-shadow .25s ease, border-color .25s ease;
}

    .trip-card:hover {
        border-color: transparent;
        box-shadow: 0 14px 34px rgba(22, 58, 50, .14);
    }

/* Image */
.trip-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef2f0;
}

    .trip-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1);
        transition: transform .8s ease;
    }

.trip-card:hover .trip-media img {
    transform: scale(1.06);
}

/* Duration chip on the image */
.trip-days {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--trip-ink);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

    .trip-days i {
        color: var(--trip-amber);
    }

/* Body */
.trip-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
}

.trip-title {
    margin: 0px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--trip-ink);
    /* keep every card the same height: 2 lines max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

/* Price + button, pinned to the bottom */
.trip-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--trip-line);
}

.trip-price {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

    .trip-price strong {
        font-size: 2rem;
        font-weight: 800;
        color: #bd2a1d;
    }

        .trip-price strong i {
            font-size: .95em;
        }

.trip-price-note {
    font-size: 1.3rem;
    color: var(--trip-muted);
}

/* Button (asp:LinkButton renders as <a>) */
.trip-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 50px;
    background: #387DEC;
    color: #fff;
    font-size: 1.5rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s;
}

    .trip-btn:hover,
    .trip-btn:focus-visible {
        background: var(--trip-pine-dark);
        color: #fff;
        text-decoration: none;
    }

    /* Keyboard focus */
    .trip-media:focus-visible,
    .trip-btn:focus-visible,
    .trip-all:focus-visible {
        outline: 3px solid var(--trip-amber);
        outline-offset: 2px;
    }

/* Mobile */
@media (max-width: 575px) {
    .trip-section {
        padding: 36px 15px;
    }

    .trip-heading {
        font-size: var(--trip-fs-heading-sm);
    }

    .trip-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trip-media img,
    .trip-card,
    .trip-btn,
    .trip-all {
        transition: none;
    }

        .trip-card:hover .trip-media img {
            transform: none;
        }
}

.welcome {
    --pine: #0f3d3a;
    --pine-soft: #17524e;
    --marigold: #e8a33d;
    --ink: #1d2b29;
    --muted: #55665f;
    --paper: #f3f6f4;
    padding: 72px 0;
    background: var(--paper);
    font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--ink);
}

.welcome__card {
    display: grid;
    grid-template-columns: 5fr 7fr;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 60px -30px rgba(15, 61, 58, .35);
    text-align: left;
}

/* Left panel */
/* Swap this for your own photo, e.g. url("images/scenic-hotel.jpg") */
.welcome {
    --scene: url("../images/-616496154istockphoto-1322194619-612x612.jpg");
}

.welcome__intro {
    position: relative;
    isolation: isolate;
    padding: 56px 44px;
    min-height: 460px;
    background-color: var(--pine);
    background-image: linear-gradient(180deg, rgba(10,46,44,.78) 0%, rgba(10,46,44,.25) 45%, rgba(10,46,44,.55) 100%), var(--scene);
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

.welcome .headi {
    margin: 0;
    font-family: "Young Serif", Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
}

.welcome__btn {
    align-self: flex-start;
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--marigold);
    color: #2a1c00;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

    .welcome__btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px -8px rgba(232,163,61,.8);
        color: #2a1c00;
        text-decoration: none;
    }

    .welcome__btn:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }

/* Right panel */
.welcome__body {
    padding: 25px 35px;
}

.welcome__lead {
    margin: 0 0 32px;
    padding-top: 5px;
    border-bottom: 0px solid #dfe7e3;
    font-weight: 500;
    color: #333;
    max-width: 62ch;
}

.welcome__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 22px;
}

    .welcome__points li {
        padding-left: 20px;
        border-left: 3px solid var(--marigold);
        max-width: 62ch;
    }

    .welcome__points strong {
        display: block;
        margin-bottom: 4px;
        font-size: 1.7rem;
        color: var(--pine);
    }

    .welcome__points span {
        color: var(--muted);
        line-height: 1.65;
    }

.welcome__closing {
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid #dfe7e3;
    font-weight: 500;
    color: var(--pine);
    max-width: 62ch;
}

@media (max-width: 860px) {
    .welcome {
        padding: 40px 15px;
    }

    .mship {
        padding: 40px 15px;
    }

    .welcome__card {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .welcome__intro, .welcome__body {
        padding: 36px 26px;
    }

    .welcome__intro {
        gap: 28px;
    }
}

.why {
    padding: 72px 0;
    background: var(--why-bg);
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

    .why .headi {
        margin: 0 0 8px;
        text-align: center;
        font-size: clamp(1.75rem, 3vw, 2.5rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--why-ink);
    }

    .why .why-sub {
        margin: 0 auto 48px;
        max-width: 46ch;
        text-align: center;
        color: var(--why-muted);
        line-height: 1.6;
    }

/* One connected panel, split by hairlines, instead of four separate boxes */
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border: 1px solid var(--why-line);
    border-radius: 20px;
    overflow: hidden;
}

.why-item {
    position: relative;
    padding: 36px 28px 32px;
    text-align: left;
    border-left: 1px solid var(--why-line);
    transition: background-color .25s ease;
}

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

    .why-item:hover,
    .why-item:focus-within {
        background: var(--why-accent-soft);
    }

.why-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 16px;
    background: var(--why-accent-soft);
    color: var(--why-accent);
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

    .why-icon svg {
        width: 28px;
        height: 28px;
    }

.why-item:hover .why-icon,
.why-item:focus-within .why-icon {
    background: var(--why-accent);
    color: #fff;
    transform: translateY(-3px);
}

.why-item h4 {
    margin: 0 0 8px;
    font-size: 2rem;
    font-weight: 700;
    color: var(--why-ink);
}

.why-item p {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--why-muted);
}

/* Tablet: 2 x 2 */
@media (max-width: 991px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .why-item:nth-child(n+3) {
        border-top: 1px solid var(--why-line);
    }
}

/* Mobile: stacked list with icon beside text */
@media (max-width: 575px) {
    .why {
        padding: 48px 15px !important;
    }

    .why-grid {
        grid-template-columns: 1fr;
        border-radius: 16px;
    }

    .why-item,
    .why-item:nth-child(3) {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        padding: 22px 20px;
        border-left: 0;
        border-top: 1px solid var(--why-line);
    }

        .why-item:first-child {
            border-top: 0;
        }

    .why-icon {
        flex: none;
        width: 48px;
        height: 48px;
        margin: 0;
    }

        .why-icon svg {
            width: 24px;
            height: 24px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .why-item, .why-icon {
        transition: none;
    }

        .why-item:hover .why-icon {
            transform: none;
        }
}

.mship {
    position: relative;
    background: url(../images/mship-bg.jpg) no-repeat center fixed;
    background-size: cover;
    padding: 100px 15px !important;
}
    /* dark overlay so content is readable on the background */
    .mship::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .55);
    }

    .mship .container {
        position: relative;
        z-index: 1;
    }

/* heading */
.gallery-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .gallery-head h2 {
        margin: 0;
        color: #fff;
        font-size: 26px;
        font-weight: 600;
        position: relative;
        padding-bottom: 8px;
    }

        .gallery-head h2::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background: #f5a623;
            border-radius: 2px;
        }

.gallery-all {
    color: #fff;
    border: 1px solid rgba(255,255,255,.6);
    padding: 6px 16px;
    border-radius: 30px;
    text-decoration: none !important;
    transition: .3s;
}

    .gallery-all:hover {
        background: #f5a623;
        border-color: #f5a623;
        color: #fff;
        text-decoration: none !important;
    }

/* slider */
.gallery-slider {
    padding: 10px 5px 45px;
}

.gallery-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    border: 3px solid rgba(255,255,255,.9);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    aspect-ratio: 4 / 3;
}

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

    .gallery-card:hover img {
        transform: scale(1.12);
    }

    .gallery-card:hover .gallery-overlay i {
        transform: scale(1);
    }

/* arrows & dots */
.gallery-slider .swiper-button-prev,
.gallery-slider .swiper-button-next {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,.9);
    border-radius: 50%;
    color: #222;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

    .gallery-slider .swiper-button-prev::after,
    .gallery-slider .swiper-button-next::after {
        font-size: 16px;
        font-weight: 700;
    }

    .gallery-slider .swiper-button-prev:hover,
    .gallery-slider .swiper-button-next:hover {
        background: #f5a623;
        color: #fff;
    }

.gallery-slider .swiper-pagination-bullet {
    background: #fff;
    opacity: .6;
}

.gallery-slider .swiper-pagination-bullet-active {
    background: #f5a623;
    opacity: 1;
    width: 22px;
    border-radius: 6px;
}

@media (max-width: 575px) {
    .gallery-slider .swiper-button-prev,
    .gallery-slider .swiper-button-next {
        display: none;
    }
}
/* ---------- Breadcrumb ---------- */
.crumb-bar {
    background: var(--sand-100);
    border-bottom: 1px solid var(--line);
}

.crumb-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-600);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

    .crumb-inner a {
        text-decoration: none;
        color: var(--ink-600);
        transition: color .15s ease;
    }

        .crumb-inner a:hover {
            color: var(--brass-500);
        }

.crumb-sep {
    color: var(--line);
}

.crumb-current {
    color: var(--ink-900);
    font-weight: 500;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(207,159,99,.35), transparent 60%), linear-gradient(155deg, var(--teal-800) 0%, var(--teal-900) 55%, var(--teal-950) 100%);
    /* To use your original banner photo instead of the gradient:
       background: url(../images/about-bnr.jpg) no-repeat bottom;
       background-size: cover;
       then add a dark overlay via .hero::after below for text contrast. */
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 82% 20%, rgba(255,255,255,.06) 0, transparent 45%), radial-gradient(circle at 68% 75%, rgba(255,255,255,.05) 0, transparent 40%);
        opacity: .9;
    }

    .hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40%;
        background: linear-gradient(to top, rgba(0,0,0,.28), transparent);
    }

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
    padding: 64px 32px 44px;
}

.hero-eyebrow {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    font-style: italic;
    color: var(--brass-400);
    margin: 0 0 10px;
}

.hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: clamp(34px, 5.4vw, 58px);
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--sand-50);
    margin: 0;
    max-width: 14ch;
}

/* ---------- Body ---------- */
.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 72px 32px 96px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--ink-900);
}

.profile-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 56px;
    margin-bottom: 76px;
}

.since-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.since-year {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 72px;
    line-height: 1;
    color: var(--teal-900);
}

.since-label {
    font-size: 14px;
    color: var(--ink-600);
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-top: 10px;
    max-width: 16ch;
}

.profile-text h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 30px;
    color: var(--teal-900);
    margin: 0 0 20px;
}

.profile-text p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-900);
    max-width: 68ch;
    margin: 0 0 18px;
}

    .profile-text p:last-child {
        margin-bottom: 0;
    }

.amenities-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 26px;
}

.amenity-pill {
    font-size: 13px;
    color: var(--teal-900);
    background: var(--sand-100);
    border: 1px solid var(--line);
    padding: 7px 14px;
    border-radius: 100px;
}

.divider {
    border: none;
    border-top: 1px solid var(--line);
    margin: 0 0 76px;
}

.beliefs {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 56px;
}

.beliefs-label {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--brass-500);
    padding-top: 4px;
}

.beliefs-text h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 30px;
    color: var(--teal-900);
    margin: 0 0 20px;
}

.beliefs-text p {
    font-size: 19px;
    line-height: 1.7;
    color: var(--ink-900);
    max-width: 66ch;
    margin: 0;
}

    .beliefs-text p::first-letter {
        font-family: 'Fraunces', serif;
        font-size: 1.6em;
        color: var(--teal-900);
    }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .hero {
        min-height: 260px;
    }

    .hero-inner {
        padding: 44px 20px 32px;
    }

    .wrap {
        padding: 48px 20px 64px;
    }

    .crumb-inner {
        padding: 12px 20px;
    }

    .profile-grid, .beliefs {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .since-block {
        flex-direction: row;
        align-items: baseline;
        gap: 14px;
    }

    .since-label {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }

    .divider {
        margin-bottom: 48px;
    }

    .profile-grid {
        margin-bottom: 48px;
    }
}

:focus-visible {
    outline: 2px solid var(--brass-500);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}
/* ---------- Breadcrumb ---------- */
.crumb-bar {
    background: var(--sand-100);
    border-bottom: 1px solid var(--line);
}

.crumb-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-600);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

    .crumb-inner a {
        text-decoration: none;
        color: var(--ink-600);
        transition: color .15s ease;
    }

        .crumb-inner a:hover {
            color: var(--brass-500);
        }

.crumb-sep {
    color: #555;
}

.crumb-current {
    color: var(--ink-900);
    font-weight: 500;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: url(../images/about-bnr.jpg) no-repeat center;
    background-size: cover;
}

    .hero::before {
        /* darkens the photo evenly so the eyebrow/heading stay readable */
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(18,36,31,.38);
    }

    .hero::after {
        /* extra gradient toward the bottom, where the heading sits */
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 55%;
        background: linear-gradient(to top, rgba(12,22,19,.65), transparent);
    }

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
    padding: 64px 32px 44px;
}

.hero-eyebrow {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    font-style: italic;
    color: var(--brass-400);
    margin: 0 0 10px;
}

.hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: clamp(34px, 5.4vw, 58px);
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--sand-50);
    margin: 0;
    max-width: 100%;
}

/* ---------- Body ---------- */
.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 72px 32px 96px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--ink-900);
}

.profile-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 56px;
    margin-bottom: 76px;
}

.since-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.since-year {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 72px;
    line-height: 1;
    color: var(--teal-900);
}

.since-label {
    font-size: 14px;
    color: var(--ink-600);
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-top: 10px;
    max-width: 16ch;
}

.profile-text h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 30px;
    color: var(--teal-900);
    margin: 0 0 20px;
}

.profile-text p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-900);
    max-width: 68ch;
    margin: 0 0 18px;
}

    .profile-text p:last-child {
        margin-bottom: 0;
    }

.amenities-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 26px;
}

.amenity-pill {
    font-size: 13px;
    color: var(--teal-900);
    background: var(--sand-100);
    border: 1px solid var(--line);
    padding: 7px 14px;
    border-radius: 100px;
}

.divider {
    border: none;
    border-top: 1px solid var(--line);
    margin: 0 0 76px;
}

.beliefs {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 56px;
}

.beliefs-label {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--brass-500);
    padding-top: 4px;
}

.beliefs-text h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 30px;
    color: var(--teal-900);
    margin: 0 0 20px;
}

.beliefs-text p {
    font-size: 19px;
    line-height: 1.7;
    color: var(--ink-900);
    max-width: 66ch;
    margin: 0;
}

    .beliefs-text p::first-letter {
        font-family: 'Fraunces', serif;
        font-size: 1.6em;
        color: var(--teal-900);
    }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .hero {
        min-height: 260px;
    }

    .hero-inner {
        padding: 44px 20px 32px;
    }

    .wrap {
        padding: 48px 20px 64px;
    }

    .crumb-inner {
        padding: 12px 20px;
    }

    .profile-grid, .beliefs {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .since-block {
        flex-direction: row;
        align-items: baseline;
        gap: 14px;
    }

    .since-label {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }

    .divider {
        margin-bottom: 48px;
    }

    .profile-grid {
        margin-bottom: 48px;
    }
}

:focus-visible {
    outline: 2px solid var(--brass-500);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.filter-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #eef0f3;
    overflow: hidden;
}

.filter-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f3;
    background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}

.filter-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #1a1d29;
    text-transform: uppercase;
    font-size: 13px;
    opacity: 0.85;
}

.filter-card-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
}

.scat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: 10px;
    text-decoration: none;
    color: #3a3f4b;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

    .scat:hover,
    .scat:focus {
        background: #f2f5ff;
        color: #3b5bfd;
        text-decoration: none;
        transform: translateX(2px);
    }

.scat-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge {
    background: #eef0ff;
    color: #3b5bfd;
    font-size: 12px;
    font-weight: 600;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.scat:hover .badge {
    background: #3b5bfd;
    color: #ffffff;
}

.sticky {
    position: sticky;
    top: 20px;
}
/* Shared layout for every block, no root or wrapper needed */
.policy-lead,
.policy-heading,
.policy-text,
.policy-list {
    box-sizing: border-box;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1d2b2a;
}

.policy-lead {
    margin-top: 40px;
    margin-bottom: 40px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    line-height: 1.5;
}

.policy-heading {
    margin-top: 48px;
    margin-bottom: 14px;
    padding-top: 22px;
    border-top: 1px solid #e2ddd2;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    color: #0f5c54;
}

.policy-text {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.5rem;
    line-height: 1.75;
}

.policy-link {
    color: #0f5c54;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .policy-link:hover {
        text-decoration-thickness: 2px;
    }

    .policy-link:focus-visible {
        outline: 2px solid #a8792b;
        outline-offset: 3px;
        border-radius: 2px;
    }

.policy-list {
    list-style: none;
    margin-top: 8px;
    margin-bottom: 8px;
    counter-reset: policy-item;
    display: grid;
    gap: 14px;
}

.policy-item {
    position: relative;
    counter-increment: policy-item;
    padding: 20px 22px 20px 64px;
    background: #f7f5f0;
    border: 1px solid #e2ddd2;
    border-left: 3px solid #a8792b;
    border-radius: 10px;
    font-size: 1.4rem;
    line-height: 1.7;
    text-align: justify;
}

    .policy-item::before {
        content: counter(policy-item);
        position: absolute;
        left: 22px;
        top: 17px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 2rem;
        line-height: 1;
        color: #a8792b;
    }

.policy-term {
    display: block;
    margin-bottom: 4px;
    font-size: 1.7rem;
    font-weight: 700;
    color: #0f5c54;
}

@media (max-width: 520px) {
    .policy-item {
        padding: 18px 18px 18px 52px;
    }

        .policy-item::before {
            left: 16px;
        }
}