/* =========================================================
   HIMACHALRIDE — DESTINATIONS ROAD-MAP PAGE
   IMPORTANT: all selectors are scoped to .roadmap-page
   so this file cannot fight with homepage destinations.css.
   ========================================================= */

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

.roadmap-page {
    --green: #123f36;
    --green-dark: #082d27;
    --paper: #fbfaf5;
    --paper-dark: #eee8da;
    --gold: #b5965b;
    --gold-light: #d2b97d;
    --muted: #747c77;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: #25322e;
    font-family: Arial, "Manrope", sans-serif;
    overflow: hidden;
}

.roadmap-page img {
    max-width: none;
}

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

.rm-hero {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    background: var(--green-dark);
    color: #fff;
}

.rm-hero > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.rm-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(4,28,23,.94),
            rgba(4,28,23,.55) 50%,
            rgba(4,28,23,.18)
        ),
        linear-gradient(
            0deg,
            rgba(4,28,23,.72),
            transparent 60%
        );
}

.rm-hero-content {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 48px));
    height: 100%;
    margin: auto;
    padding-bottom: 78px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.rm-kicker,
.rm-label {
    color: var(--gold);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em;
}

.rm-hero h1 {
    margin: 18px 0 20px;
    color: #fff;
    font-size: clamp(58px, 7vw, 92px);
    line-height: .86;
    letter-spacing: -.065em;
}

.rm-hero h1 em,
.rm-intro h2 em,
.rm-section-head h2 em,
.rm-beyond h2 em,
.rm-cta h2 em {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 400;
}

.rm-hero p {
    max-width: 470px;
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    line-height: 1.8;
}

.rm-hero-line {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.rm-hero-line span {
    color: rgba(255,255,255,.65);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em;
}

.rm-hero-line i {
    width: 42px;
    height: 1px;
    background: var(--gold);
}

.rm-hero-bottom {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.65);
}

.rm-hero-bottom span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em;
}

.rm-hero-bottom b {
    color: var(--gold-light);
    font-size: 14px;
}

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

.rm-intro {
    width: min(1180px, calc(100% - 48px));
    margin: auto;
    padding: 82px 0;
    display: grid;
    grid-template-columns: .35fr 1.1fr .85fr;
    gap: 55px;
}

.rm-intro-index {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.rm-intro-index > span {
    color: var(--gold);
    font: 32px Georgia, serif;
}

.rm-intro-index small {
    color: #8b928d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em;
}

.rm-intro h2 {
    margin: 15px 0 0;
    color: var(--green);
    font-size: clamp(43px,4.8vw,62px);
    line-height: .91;
    letter-spacing: -.06em;
}

.rm-intro-copy {
    padding-top: 10px;
}

.rm-intro-copy p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.85;
}

/* =========================================================
   COLLECTION
   ========================================================= */

.rm-collection {
    padding: 75px max(16px,calc((100% - 1220px)/2)) 95px;
    background: var(--paper-dark);
}

.rm-section-head {
    width: min(1180px,100%);
    margin: 0 auto 38px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.rm-section-head h2 {
    margin: 14px 0 0;
    color: var(--green);
    font-size: clamp(46px,5vw,67px);
    line-height: .88;
    letter-spacing: -.06em;
}

.rm-section-head > p {
    margin: 0 0 4px;
    color: #858b86;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .15em;
}

/* EXACTLY TWO CARDS PER ROW ON DESKTOP/TABLET */
.rm-grid {
    width: min(1180px,100%);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px;
    align-items: start;
}

.rm-card {
    min-width: 0;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid rgba(18,63,54,.13);
    box-shadow: 0 10px 28px rgba(18,63,54,.055);
}

.rm-card-wide {
    grid-column: 1 / -1;
}

/* =========================================================
   PHOTO
   ========================================================= */

.rm-photo {
    position: relative;
    height: 285px;
    overflow: hidden;
    background: #ccc7b9;
}

.rm-card-wide .rm-photo {
    height: 310px;
}

.rm-photo > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform .55s ease;
}

.rm-card:hover .rm-photo > img {
    transform: scale(1.025);
}

.rm-photo-shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(0deg,rgba(4,28,23,.86),transparent 66%),
        linear-gradient(90deg,rgba(4,28,23,.16),transparent 60%);
}

.rm-photo-top {
    position: absolute;
    z-index: 4;
    top: 17px;
    left: 18px;
    right: 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.rm-photo-top span {
    color: #efd69b;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .14em;
}

.rm-photo-top b {
    padding: 7px 9px;
    background: rgba(255,255,255,.92);
    color: var(--green);
    font-size: 6px;
    letter-spacing: .10em;
}

.rm-photo-title {
    position: absolute;
    z-index: 4;
    left: 21px;
    bottom: 32px;
}

.rm-photo-title h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(40px,4vw,53px);
    line-height: .87;
    letter-spacing: -.065em;
}

.rm-photo-title p {
    margin: 0;
    color: rgba(255,255,255,.75);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .13em;
}

/* WAVE TRANSITION */
.rm-wave {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 65px;
    display: block;
}

.rm-wave path {
    fill: var(--paper);
}

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

.rm-card-body {
    padding: 15px 22px 20px;
}

.rm-card-wide .rm-card-body {
    padding-left: 30px;
    padding-right: 30px;
}

.rm-route-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.rm-route-head > div > span {
    color: var(--gold);
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .15em;
}

.rm-route-head h4 {
    margin: 5px 0 0;
    color: var(--green);
    font-size: 19px;
    line-height: 1;
    letter-spacing: -.025em;
}

.rm-route-head > small {
    color: #929994;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .10em;
}

/* =========================================================
   MAP — IMPORTANT FIX
   The original CSS had .rm-map but did NOT position the
   .rm-stop elements. That made all five stops stack.
   ========================================================= */

.rm-map {
    position: relative;
    height: 220px;
    margin: 3px 0 2px;
    overflow: hidden;
}

.rm-road {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rm-road path {
    fill: none;
    stroke: var(--green);
    stroke-width: 7;
    stroke-dasharray: 9 8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rm-map::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    background:
        radial-gradient(circle at 12% 22%,rgba(181,150,91,.16) 0 1px,transparent 1.5px),
        radial-gradient(circle at 83% 68%,rgba(181,150,91,.13) 0 1px,transparent 1.5px),
        radial-gradient(circle at 36% 82%,rgba(18,63,54,.09) 0 1px,transparent 1.5px);
    background-size: 42px 42px,51px 51px,37px 37px;
}

/* Each stop sits along the zig-zag road */
.rm-stop {
    position: absolute;
    z-index: 3;
    width: 94px;
    text-align: center;
    font-style: normal;
}

.rm-stop i {
    width: 29px;
    height: 29px;
    margin: 0 auto 6px;
    display: grid;
    place-items: center;
    border: 2px solid var(--paper);
    outline: 1px solid var(--gold);
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-size: 6px;
    font-style: normal;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(18,63,54,.12);
}

.rm-stop strong {
    display: block;
    color: var(--green);
    font-size: 6.5px;
    line-height: 1.1;
    font-weight: 800;
}

.rm-stop small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 5.2px;
    line-height: 1.2;
}

/* Normal 360px map */
.rm-stop.stop-1 {
    left: calc(50% - 47px);
    top: 1px;
}

.rm-stop.stop-2 {
    left: 1%;
    top: 39px;
}

.rm-stop.stop-3 {
    right: 1%;
    top: 78px;
}

.rm-stop.stop-4 {
    left: 1%;
    top: 121px;
}

.rm-stop.stop-5 {
    right: 1%;
    top: 162px;
}

/* Wide Lahaul & Spiti map */
.rm-map-wide .stop-1 {
    left: calc(50% - 47px);
}

.rm-map-wide .stop-2 {
    left: 7%;
}

.rm-map-wide .stop-3 {
    right: 7%;
}

.rm-map-wide .stop-4 {
    left: 25%;
    top: 121px;
}

.rm-map-wide .stop-5 {
    right: 25%;
    top: 162px;
}

/* =========================================================
   HIGHLIGHTS / FOOT
   ========================================================= */

.rm-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rm-highlights span {
    padding: 6px 8px;
    border: 1px solid rgba(18,63,54,.13);
    color: #69736e;
    font-size: 6px;
    font-weight: 800;
}

.rm-card-foot {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid rgba(18,63,54,.11);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.rm-card-foot > span {
    color: #8b928d;
    font-size: 5.6px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.45;
}

.rm-card-foot > a {
    flex: 0 0 auto;
    color: var(--green);
    text-decoration: none;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .1em;
}

/* =========================================================
   BEYOND HIMACHAL — LARGER ROUTE CARDS
   ========================================================= */

.roadmap-page .rm-beyond {
    position: relative;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 78px 0 82px;
    overflow: hidden;
    background: var(--green);
    color: #fff;
    transform: none !important;
}

.roadmap-page .rm-beyond-inner {
    width: min(1320px, calc(100% - 48px));
    max-width: 1320px;
    margin: 0 auto;

    display: grid;

    /* Give the route cards more horizontal space */
    grid-template-columns: minmax(285px, .62fr) minmax(0, 1.38fr);

    column-gap: 55px;
    row-gap: 28px;

    align-items: center;
}

.roadmap-page .rm-beyond-copy {
    min-width: 0;
}

.roadmap-page .rm-beyond-copy .rm-label {
    display: block;
    margin: 0 0 17px;
    color: var(--gold-light);
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .17em;
}

.roadmap-page .rm-beyond-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(45px, 4.6vw, 64px);
    line-height: .89;
    letter-spacing: -.06em;
}

.roadmap-page .rm-beyond-copy h2 em {
    color: var(--gold-light);
    font-family: Georgia, serif;
    font-weight: 400;
    font-style: italic;
}

.roadmap-page .rm-beyond-copy p {
    max-width: 350px;
    margin: 20px 0 0;
    color: rgba(255,255,255,.63);
    font-size: 10.5px;
    line-height: 1.8;
}


/* =========================
   ROUTE
   ========================= */

.roadmap-page .rm-beyond-route {
    width: 100%;
    min-width: 0;

    display: grid;

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

    align-items: center;
}

.roadmap-page .rm-beyond-route > div {
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.025);

    box-sizing: border-box;

    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.roadmap-page .rm-beyond-route > div:hover {
    border-color: rgba(210,185,125,.55) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}


/* =========================
   IMAGE AREA
   ========================= */

.roadmap-page .rm-beyond-route > div > img {
    display: block !important;

    width: 100% !important;

    /* Increased from 78px */
    height: 110px !important;

    min-width: 0 !important;
    max-width: none !important;

    min-height: 110px !important;
    max-height: 110px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: cover !important;

    background: #214f46;
}

/* Hide broken-image icon/alt text until the user adds the real image. */
.roadmap-page .rm-beyond-route > div > img.image-missing {
    display: none !important;
}

.roadmap-page .rm-beyond-route > div:has(> img.image-missing)::before {
    content: "ADD IMAGE";

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

    width: 100%;

    height: 110px;

    background:
        linear-gradient(
            135deg,
            #214f46,
            #163f37
        );

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

    font-size: 7px;
    font-weight: 800;
    letter-spacing: .18em;
}


/* =========================
   TEXT
   ========================= */

.roadmap-page .rm-beyond-route > div > small {
    display: block;

    margin: 0 !important;

    padding: 11px 14px 0 !important;

    color: var(--gold-light) !important;

    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .15em;
}

.roadmap-page .rm-beyond-route > div > strong {
    display: block;

    margin: 0 !important;

    padding: 8px 14px 14px !important;

    color: #fff !important;

    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}


/* =========================
   CONNECTORS
   ========================= */

.roadmap-page .rm-beyond-route > i {
    display: block;

    width: 100% !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        repeating-linear-gradient(
            to right,
            var(--gold) 0 5px,
            transparent 5px 9px
        ) !important;

    opacity: .85;
}


/* =========================
   TAGS
   ========================= */

.roadmap-page .rm-beyond-tags {
    grid-column: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin: 0;
}

.roadmap-page .rm-beyond-tags span {
    display: inline-flex;
    align-items: center;

    min-height: 29px;
    padding: 0 10px;

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

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

    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .12em;
}


/* =========================================================
   CTA — FORCE TRUE CENTER
   ========================================================= */

.roadmap-page .rm-cta {
    position: relative !important;
    left: 0 !important;
    right: auto !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding: 82px 20px 90px !important;

    text-align: center !important;

    background: var(--paper);

    transform: none !important;
}

.roadmap-page .rm-cta > .rm-label,
.roadmap-page .rm-cta > h2,
.roadmap-page .rm-cta > p,
.roadmap-page .rm-cta > .rm-cta-buttons {
    position: relative;
    left: auto !important;
    right: auto !important;
}

.roadmap-page .rm-cta > .rm-label {
    display: block;
}

.roadmap-page .rm-cta > h2 {
    width: 100%;
    margin: 17px auto 23px !important;

    color: var(--green);

    text-align: center !important;

    font-size: clamp(45px,5vw,68px);
    line-height: .9;
    letter-spacing: -.06em;
}

.roadmap-page .rm-cta > h2 em {
    display: block;
    color: var(--gold);
}

.roadmap-page .rm-cta > p {
    width: 100%;
    max-width: 620px;

    margin: 0 auto !important;

    color: var(--muted);

    text-align: center !important;

    font-size: 10.5px;
    line-height: 1.7;
}

.roadmap-page .rm-cta-buttons {
    width: 100%;

    margin: 28px auto 0 !important;

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

    gap: 10px;
    flex-wrap: wrap;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .roadmap-page .rm-beyond-inner {
        width: calc(100% - 40px);

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

        column-gap: 30px;
    }

    .roadmap-page .rm-beyond-copy h2 {
        font-size: 52px;
    }

    .roadmap-page .rm-beyond-route {
        grid-template-columns:
            minmax(0,1fr) 16px
            minmax(0,1fr) 16px
            minmax(0,1fr) 16px
            minmax(0,1fr);
    }

    .roadmap-page .rm-beyond-route > div > img,
    .roadmap-page .rm-beyond-route > div:has(> img.image-missing)::before {
        height: 90px !important;
        min-height: 90px !important;
        max-height: 90px !important;
    }

    .roadmap-page .rm-beyond-route > div > small {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    .roadmap-page .rm-beyond-route > div > strong {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 900px) {

    .roadmap-page .rm-beyond {
        padding: 65px 0 70px;
    }

    .roadmap-page .rm-beyond-inner {
        width: calc(100% - 40px);

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

        gap: 30px;
    }

    .roadmap-page .rm-beyond-tags {
        grid-column: auto;
    }

    .roadmap-page .rm-beyond-copy h2 {
        font-size: 55px;
    }

    .roadmap-page .rm-beyond-route {
        grid-template-columns:
            minmax(0,1fr) 20px
            minmax(0,1fr) 20px
            minmax(0,1fr) 20px
            minmax(0,1fr);
    }

    .roadmap-page .rm-beyond-route > div > img,
    .roadmap-page .rm-beyond-route > div:has(> img.image-missing)::before {
        height: 105px !important;
        min-height: 105px !important;
        max-height: 105px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .roadmap-page .rm-beyond {
        padding: 58px 16px 66px;
    }

    .roadmap-page .rm-beyond-inner {
        width: 100%;
        display: block;
    }

    .roadmap-page .rm-beyond-copy {
        margin-bottom: 30px;
    }

    .roadmap-page .rm-beyond-copy h2 {
        font-size: 44px;
    }

    .roadmap-page .rm-beyond-copy p {
        font-size: 10px;
    }

    .roadmap-page .rm-beyond-route {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 14px;
    }

    .roadmap-page .rm-beyond-route > i {
        display: none;
    }

    .roadmap-page .rm-beyond-route > div > img,
    .roadmap-page .rm-beyond-route > div:has(> img.image-missing)::before {
        height: 110px !important;
        min-height: 110px !important;
        max-height: 110px !important;
    }

    .roadmap-page .rm-beyond-route > div > small {
        padding: 10px 12px 0 !important;
        font-size: 7px !important;
    }

    .roadmap-page .rm-beyond-route > div > strong {
        padding: 7px 12px 13px !important;
        font-size: 10px !important;
    }

    .roadmap-page .rm-beyond-tags {
        margin-top: 25px;
    }

    .roadmap-page .rm-cta {
        padding: 62px 17px 70px !important;
    }

    .roadmap-page .rm-cta h2 {
        font-size: 43px;
    }

    .roadmap-page .rm-cta-buttons {
        flex-direction: column;
    }

    .roadmap-page .rm-cta-buttons a {
        width: 100%;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .roadmap-page .rm-beyond {
        padding-left: 14px;
        padding-right: 14px;
    }

    .roadmap-page .rm-beyond-copy h2 {
        font-size: 40px;
    }

    .roadmap-page .rm-beyond-route {
        grid-template-columns: 1fr;
    }

    .roadmap-page .rm-beyond-route > div > img,
    .roadmap-page .rm-beyond-route > div:has(> img.image-missing)::before {
        height: 115px !important;
        min-height: 115px !important;
        max-height: 115px !important;
    }
}

/* =========================================================
   FINAL SIX DESTINATION ROAD-MAP LAYOUT
   ========================================================= */

.roadmap-page .rm-grid {
    width: min(1180px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;

    align-items: start;
}


/* Compact road-map cards */

.roadmap-page .rm-card {
    width: 100%;
    min-width: 0;
    overflow: hidden;

    background: var(--paper);
    border: 1px solid rgba(18,63,54,.13);
    box-shadow: 0 10px 28px rgba(18,63,54,.055);
}


/* Smaller image area */

.roadmap-page .rm-card .rm-photo {
    height: 230px;
}


/* Smaller card body */

.roadmap-page .rm-card .rm-card-body {
    padding: 14px 18px 17px;
}


/* Keep the road-map concept but make the map compact */

.roadmap-page .rm-card .rm-map {
    height: 195px;
}


/* Slightly smaller card title */

.roadmap-page .rm-card .rm-route-head h4 {
    font-size: 17px;
}


.roadmap-page .rm-card .rm-photo-title h3 {
    font-size: clamp(35px, 3vw, 46px);
}


/* =========================================================
   SACRED HIMACHAL
   TEMPLE IMAGE COLLECTION
   ========================================================= */

.sacred-himachal {
    width: 100%;

    padding:
        88px
        max(16px, calc((100% - 1220px) / 2))
        94px;

    background: var(--paper);
    color: #25322e;
}


.sacred-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}


/* Section heading */

.sacred-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(260px, .65fr);

    align-items: end;

    gap: 55px;

    margin-bottom: 38px;
}


.sacred-label {
    display: inline-block;

    color: var(--gold);

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

    letter-spacing: .17em;
}


.sacred-head h2 {
    margin: 14px 0 0;

    color: var(--green);

    font-size: clamp(44px, 5vw, 64px);
    line-height: .89;

    letter-spacing: -.06em;
}


.sacred-head h2 em {
    color: var(--gold);

    font-family: Georgia, serif;
    font-weight: 400;
}


.sacred-head > p {
    max-width: 360px;

    margin: 0 0 3px;

    color: var(--muted);

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


/* =========================================================
   TEMPLE GRID
   ========================================================= */

.temple-grid {
    display: grid;

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

    gap: 18px;
}


.temple-card {
    min-width: 0;

    overflow: hidden;

    background: var(--paper-dark);

    border:
        1px solid
        rgba(18,63,54,.12);

    box-shadow:
        0 10px 28px
        rgba(18,63,54,.045);
}


.temple-card > a {
    display: block;

    color: inherit;
    text-decoration: none;
}


/* Temple image */

.temple-photo {
    position: relative;

    height: 285px;

    overflow: hidden;

    background: #ccc7b9;
}


.temple-photo > img {
    position: absolute;

    inset: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    display: block;

    transition:
        transform .55s ease;
}


.temple-card:hover
.temple-photo > img {
    transform: scale(1.035);
}


/* Dark image overlay */

.temple-overlay {
    position: absolute;

    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(4,28,23,.88),
            transparent 67%
        ),
        linear-gradient(
            90deg,
            rgba(4,28,23,.18),
            transparent 65%
        );
}


/* Top labels */

.temple-top {
    position: absolute;

    z-index: 3;

    top: 15px;
    left: 15px;
    right: 15px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 8px;
}


.temple-top span {
    color: #efd69b;

    font-size: 6.5px;

    font-weight: 800;

    letter-spacing: .13em;
}


.temple-top b {
    padding: 6px 8px;

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

    color: var(--green);

    font-size: 5.5px;

    letter-spacing: .08em;
}


/* Temple title */

.temple-title {
    position: absolute;

    z-index: 3;

    left: 17px;
    right: 14px;

    bottom: 18px;
}


.temple-title h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size:
        clamp(25px, 2.2vw, 34px);

    line-height: .95;

    letter-spacing: -.045em;
}


.temple-title p {
    margin: 0;

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

    font-size: 6px;

    font-weight: 800;

    letter-spacing: .12em;
}


/* =========================================================
   TEMPLE FOOTER LINE
   ========================================================= */

.sacred-foot {
    margin-top: 22px;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(18,63,54,.12);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.sacred-foot span {
    color: #8b928d;

    font-size: 6.5px;

    font-weight: 800;

    letter-spacing: .1em;
}


.sacred-foot a {
    color: var(--green);

    text-decoration: none;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .1em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .roadmap-page .rm-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    .roadmap-page .rm-card .rm-photo {
        height: 250px;
    }


    .roadmap-page .rm-card .rm-map {
        height: 200px;
    }


    .sacred-head {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .sacred-head > p {
        max-width: 620px;
    }


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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    /* One road-map card per row */

    .roadmap-page .rm-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .roadmap-page .rm-card .rm-photo {
        height: 285px;
    }


    .roadmap-page .rm-card .rm-card-body {
        padding: 15px 18px 18px;
    }


    .roadmap-page .rm-card .rm-map {
        height: 205px;
    }


    /* Sacred section */

    .sacred-himachal {
        padding: 68px 17px 72px;
    }


    .sacred-head {
        margin-bottom: 28px;
    }


    .sacred-head h2 {
        font-size: 43px;
    }


    .sacred-head > p {
        font-size: 10px;
    }


    /* Two temple cards on mobile */

    .temple-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    .temple-photo {
        height: 235px;
    }


    .temple-top {
        top: 11px;
        left: 11px;
        right: 11px;
    }


    .temple-top span {
        font-size: 5.5px;
    }


    .temple-top b {
        padding: 5px 6px;

        font-size: 4.8px;
    }


    .temple-title {
        left: 12px;
        right: 10px;

        bottom: 13px;
    }


    .temple-title h3 {
        font-size: 23px;
    }


    .temple-title p {
        font-size: 5px;
    }


    .sacred-foot {
        align-items: flex-start;

        flex-direction: column;

        gap: 11px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .roadmap-page .rm-card .rm-photo {
        height: 260px;
    }


    .temple-grid {
        grid-template-columns: 1fr;
    }


    .temple-photo {
        height: 270px;
    }


    .sacred-head h2 {
        font-size: 39px;
    }

}

/* =========================================================
   SEO DESTINATION SECTION — FULL WIDTH / 3 COLUMN
   ========================================================= */

.roadmap-page .destination-seo {
    padding: 86px max(24px, calc((100% - 1280px) / 2)) 92px;
    background: var(--paper);
}

.roadmap-page .destination-seo-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}


/* Main heading */

.roadmap-page .destination-seo h2 {
    max-width: 900px;
}


/* Route grid */

.roadmap-page .destination-route-grid {
    width: 100%;

    display: grid;

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

    gap: 12px;

    margin-top: 24px;
}


/* Individual route cards */

.roadmap-page .destination-route-item {
    min-width: 0;

    min-height: 92px;

    padding: 17px 18px;

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

    border:
        1px solid
        rgba(18,63,54,.12);

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

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.roadmap-page .destination-route-item:hover {
    transform: translateY(-2px);

    border-color:
        rgba(181,150,91,.45);

    box-shadow:
        0 10px 24px
        rgba(18,63,54,.055);
}


/* Route title */

.roadmap-page .destination-route-item strong {
    margin-bottom: 6px;

    color: var(--green);

    font-size: 13px;

    line-height: 1.2;

    letter-spacing: -.015em;
}


/* Route description */

.roadmap-page .destination-route-item span {
    color: var(--muted);

    font-size: 10px;

    line-height: 1.55;
}


/* Make section headings tighter */

.roadmap-page .destination-seo h3 {
    margin-top: 42px;
    margin-bottom: 9px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .roadmap-page .destination-seo {
        padding-left: 28px;
        padding-right: 28px;
    }

    .roadmap-page .destination-route-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    .roadmap-page .destination-seo {
        padding: 62px 17px 70px;
    }

    .roadmap-page .destination-route-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .roadmap-page .destination-route-item {
        min-height: 82px;

        padding: 15px 16px;
    }

    .roadmap-page .destination-route-item strong {
        font-size: 12px;
    }

    .roadmap-page .destination-route-item span {
        font-size: 10px;
    }

}
.destination-seo-mini-label {
    margin-top: 22px;

    color: var(--gold);

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

    letter-spacing: .16em;
}