/* ================= BRAND TOKENS (blue/grey) ================= */
:root {
    --pan: #F5F6F7;
    --pan-deep: #E9EDEF;
    --ink: #1F262C;
    --ink-soft: #5A6671;
    --dune: #2F7FB5;
    --dune-deep: #22638F;
    --dusk: #22303C;
    --dusk-soft: #33434F;
    --grass: #A9C4D6;
    --sky: #2F6E96;
    --line: #DCE1E5;
    --display: 'Bricolage Grotesque', sans-serif;
    --body: 'Newsreader', serif;
    --mono: 'IBM Plex Mono', monospace;
    --maxw: 1120px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important
    }
}

body {
    font-family: var(--body);
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--pan)
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    color: var(--sky)
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--dune);
    outline-offset: 2px
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.25rem
}

.eyebrow {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dune);
    margin-bottom: .9rem
}

.dark .eyebrow {
    color: var(--grass)
}

/* ================= TOP BAR ================= */
.topbar {
    background: var(--dusk);
    color: var(--pan);
    border-bottom: 1px solid var(--dusk-soft);
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 1px 12px rgba(15, 22, 28, .35)
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--dune);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 50
}

.skip:focus {
    left: .5rem;
    top: .5rem
}

.topnav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap
}

.topnav a {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #C9D6DF;
    text-decoration: none;
    white-space: nowrap
}

.topnav a:hover {
    color: #fff
}

.topnav .nav-cta {
    font-family: var(--display);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    background: var(--dune);
    color: #fff;
    padding: .45rem 1rem;
    border-radius: 3px
}

.topnav .nav-cta:hover {
    background: var(--dune-deep);
    color: #fff
}

.topnav .nav-outline {
    font-family: var(--display);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #C9D6DF;
    border: 1px solid #6B7C89;
    padding: .42rem 1rem;
    border-radius: 3px
}

.topnav .nav-outline:hover {
    color: #fff;
    border-color: #fff
}

.topnav .nav-whatsapp {
    font-family: var(--display);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--grass);
    border: 1px solid var(--grass);
    padding: .42rem 1rem;
    border-radius: 3px
}

.topnav .nav-whatsapp:hover {
    color: #fff;
    border-color: #fff
}

@media(max-width:900px) {
    .top-promise {
        display: none
    }
}

@media(max-width:760px) {
    .topnav {
        gap: .8rem
    }

    .topbar .wrap {
        gap: .6rem
    }
}

@media(max-width:420px) {
    .topnav a:not(.nav-cta):not(.nav-whatsapp) {
        font-size: .66rem
    }
}

/* ---------- region filter + search ---------- */
.filterbar {
    position: sticky;
    top: var(--topbar-h, 58px);
    z-index: 20;
    background: var(--pan);
    padding: .85rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.4rem
}

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

.searchbox {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: .7rem
}

.searchbox .s-icon {
    position: absolute;
    left: .85rem;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none
}

.searchbox input {
    width: 100%;
    font-family: var(--body);
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .7rem 2.6rem;
    min-height: 46px;
    -webkit-appearance: none;
    appearance: none
}

.searchbox input::-webkit-search-cancel-button {
    display: none
}

.searchbox input::placeholder {
    color: var(--ink-soft)
}

.searchbox input:focus {
    border-color: var(--dune);
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 127, 181, .18)
}

.s-clear {
    position: absolute;
    right: .5rem;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--pan-deep);
    color: var(--ink-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.s-clear:hover {
    background: var(--line);
    color: var(--ink)
}

.s-clear svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round
}

.s-clear[hidden] {
    display: none
}

.filters {
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
}

.filters::-webkit-scrollbar {
    display: none
}

.chip {
    font-family: var(--display);
    font-weight: 600;
    font-size: .9rem;
    padding: .5rem 1.05rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px
}

.chip .n {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--ink-soft)
}

.chip:hover {
    border-color: var(--dune);
    color: var(--dune-deep)
}

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

.chip[aria-pressed="true"] .n {
    color: #D6E7F2
}

.result-count {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--ink-soft);
    margin-bottom: 1.2rem
}

.no-results {
    font-family: var(--display);
    font-weight: 650;
    color: var(--ink-soft);
    padding: 2rem 0
}

.region[hidden] {
    display: none
}

/* the blue promo box now sits where it appears in the markup (third) */
.region.promo {
    order: 0
}

.region.promo.at-end {
    order: 99
}

/* ---------- A–Z letter strip ---------- */
.alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: 1.3rem
}

.alphabet a,
.alphabet span {
    font-family: var(--mono);
    font-size: .78rem;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #fff;
    text-decoration: none;
    color: var(--sky)
}

.alphabet a:hover {
    border-color: var(--dune);
    background: var(--dune);
    color: #fff
}

.alphabet span {
    color: #C3CBD1;
    background: var(--pan-deep)
}

.letter-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 130px
}

.towns a[hidden] {
    display: none
}

.town-count {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--ink-soft);
    margin-top: 1rem
}

/* ---------- guides row ---------- */
.guide-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem
}

@media(max-width:900px) {
    .guide-row {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:520px) {
    .guide-row {
        grid-template-columns: 1fr
    }
}

.guide-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--dune);
    border-radius: 4px;
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: .35rem
}

.guide-card:hover {
    border-color: var(--dune);
    box-shadow: 0 3px 14px rgba(31, 38, 44, .08)
}

.guide-card .kicker {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dune)
}

.guide-card strong {
    font-family: var(--display);
    font-weight: 650;
    font-size: 1.02rem;
    color: var(--ink);
    line-height: 1.25
}

.guide-card span.blurb {
    font-size: .92rem;
    color: var(--ink-soft);
    line-height: 1.45
}

/* ---------- back to top ---------- */
.to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dune);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 4px 16px rgba(15, 22, 28, .35);
    cursor: pointer;
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s
}

.to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.to-top:hover {
    background: var(--dune-deep)
}

.to-top:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px
}

.to-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media(min-width:900px) {
    .to-top {
        right: 1.5rem;
        bottom: 1.5rem;
        width: 52px;
        height: 52px
    }
}

@media (prefers-reduced-motion:reduce) {
    .to-top {
        transition: none
    }
}

@media print {

    .to-top,
    .filterbar,
    .topbar {
        display: none !important
    }
}

.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .9rem;
    padding-bottom: .9rem;
    gap: 1rem
}

.brand {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--pan);
    text-decoration: none;
    letter-spacing: -.01em
}

.brand span {
    color: var(--grass)
}

.top-promise {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9DB0BD
}

@media(max-width:640px) {
    .top-promise {
        display: none
    }
}

/* ================= CROSSFADING PHOTO HERO =================
   Four images fade one to the next (24s full cycle, 6s each).
   Images load by RELATIVE PATH — save this file in the
   "madbookings - keeper skeleton" folder so front-page-images/
   resolves. Overlay shading matches the area pages
   (alphas .44 / .28 / .41). Reduced-motion users see the
   first image, static. */
.hero {
    position: relative;
    color: var(--pan);
    background: var(--dusk);
    overflow: hidden
}

.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0
}

.slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    animation: xfade 18s infinite
}

.slide:nth-child(1) {
    background-image: url("front-page-images/deadvlei-namibia.jpg");
    animation-delay: 0s
}

.slide:nth-child(2) {
    background-image: url("front-page-images/etosha-waterhole-namibia.jpg");
    animation-delay: 4s
}

.slide:nth-child(3) {
    background-image: url("front-page-images/skeleton-coast-shipwreck-namibia.jpg");
    animation-delay: 8s
}

.slide:nth-child(4) {
    background-image: url("front-page-images/spitzkoppe-arch-namibia.jpg");
    animation-delay: 12s
}

@keyframes xfade {
    0% {
        opacity: 0
    }

    5% {
        opacity: 1
    }

    25% {
        opacity: 1
    }

    33% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@media (prefers-reduced-motion:reduce) {
    .slide {
        opacity: 0
    }

    .slide:nth-child(1) {
        opacity: 1
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(34, 48, 60, .44) 0%, rgba(34, 48, 60, .28) 45%, rgba(34, 48, 60, .41) 100%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    padding: 0 0 3rem
}

.crumbs {
    padding: .9rem 0 2.2rem
}

.crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    font-family: var(--mono);
    font-size: .72rem
}

.crumbs a {
    color: #E4EBF0;
    text-decoration: none
}

.crumbs a:hover {
    color: #fff;
    text-decoration: underline
}

.crumbs li {
    color: #C9D6DF
}

.crumbs li+li::before {
    content: "›";
    margin-right: .45rem;
    color: #C9D6DF
}

.hero .eyebrow {
    text-shadow: 0 1px 10px rgba(15, 22, 28, .7)
}

.hero h1 {
    font-family: var(--display);
    font-weight: 750;
    font-size: clamp(2.4rem, 5.6vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.025em;
    margin-bottom: 1.1rem;
    text-shadow: 0 2px 22px rgba(15, 22, 28, .65)
}

.hero h1 em {
    font-style: normal;
    color: var(--grass)
}

.hero .standfirst {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: #F0F4F7;
    font-weight: 300;
    max-width: 38em;
    margin-bottom: 1.8rem;
    text-shadow: 0 1px 14px rgba(15, 22, 28, .7)
}

.hero-ctas {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap
}

.btn {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    padding: .85rem 1.6rem;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    border: 1px solid transparent;
    cursor: pointer
}

.btn-dune {
    background: var(--dune);
    color: #fff
}

.btn-dune:hover {
    background: var(--dune-deep)
}

.btn-ghost {
    border-color: rgba(255, 255, 255, .65);
    color: #fff;
    background: rgba(34, 48, 60, .30)
}

.btn-ghost:hover {
    border-color: var(--grass);
    color: var(--grass)
}

/* ============ SIGNATURE: THE CLASSIC LOOP ============
   Namibia trips are loops. The ring diagram shows the
   classic self-drive circuit every region hangs off. */
.loop {
    background: var(--dusk);
    padding: 1.6rem 0 2.2rem
}

.loop svg {
    width: 100%;
    height: auto;
    display: block;
    max-width: 900px;
    margin: 0 auto
}

.loop-caption {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #78909C;
    text-align: center;
    margin-top: .7rem
}

/* ================= FACTS ================= */
.facts {
    background: var(--pan-deep);
    border-bottom: 1px solid var(--line)
}

.facts .wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0
}

@media(max-width:900px) {
    .facts .wrap {
        grid-template-columns: repeat(2, 1fr)
    }
}

.fact {
    padding: 1.3rem 1.1rem;
    border-left: 1px solid var(--line)
}

.fact:first-child {
    border-left: none
}

@media(max-width:900px) {
    .fact:nth-child(odd) {
        border-left: none
    }
}

.fact dt {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: .35rem
}

.fact dd {
    font-family: var(--display);
    font-weight: 650;
    font-size: 1.05rem;
    line-height: 1.3
}

/* ================= SECTIONS ================= */
section.block {
    padding: 4rem 0
}

section.block.alt {
    background: var(--pan-deep)
}

h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 1.3rem
}

.section-lead {
    max-width: 40em;
    color: var(--ink-soft);
    margin-bottom: 2rem
}

.aside {
    border-left: 3px solid var(--grass);
    padding: .4rem 0 .4rem 1.1rem;
    font-style: italic;
    color: var(--ink-soft);
    margin: 1.6rem 0;
    max-width: 40em
}

/* ---------- region cards ---------- */
.region-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem
}

@media(max-width:980px) {
    .region-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:620px) {
    .region-grid {
        grid-template-columns: 1fr
    }
}

.region {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.region img {
    width: 100%;
    height: auto;
    aspect-ratio: 600/340;
    object-fit: cover;
    border-bottom: 1px solid var(--line);
    background: var(--pan-deep)
}

.region img.logo-img {
    object-fit: contain;
    background: #fff;
    padding: 1.1rem
}

.region .ph {
    aspect-ratio: 16/9;
    background: var(--pan-deep);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem
}

.region-body {
    padding: 1.1rem 1.2rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1
}

.region h3 {
    font-family: var(--display);
    font-weight: 650;
    font-size: 1.15rem;
    line-height: 1.2
}

.region h3 a {
    color: var(--ink);
    text-decoration: none
}

.region h3 a:hover {
    color: var(--dune)
}

.region .tagline {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--dune);
    text-transform: uppercase
}

.region p {
    font-size: .98rem;
    color: var(--ink-soft);
    line-height: 1.5;
    flex: 1
}

.region .more {
    font-family: var(--display);
    font-weight: 600;
    font-size: .92rem;
    color: var(--sky);
    text-decoration: none;
    border-top: 1px solid var(--line);
    padding-top: .7rem;
    margin-top: .4rem
}

.region .more:hover {
    text-decoration: underline
}

.region.promo {
    background: var(--dusk);
    border-color: var(--dusk-soft)
}

.region.promo h3,
.region.promo h3 a {
    color: #fff
}

.region.promo p {
    color: #B9C9D4
}

.region.promo .tagline {
    color: var(--grass)
}

.region.promo .more {
    color: var(--grass);
    border-top-color: var(--dusk-soft)
}

/* ---------- towns A–Z ---------- */
.towns {
    columns: 4;
    column-gap: 2rem;
    max-width: 100%
}

@media(max-width:900px) {
    .towns {
        columns: 3
    }
}

@media(max-width:640px) {
    .towns {
        columns: 2
    }
}

.towns a {
    display: block;
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--ink);
    text-decoration: none;
    padding: .4rem 0;
    border-bottom: 1px solid var(--line);
}

.towns a:hover {
    color: var(--dune)
}

/* ---------- plan / FAQ ---------- */
.plan-steps {
    list-style: none;
    max-width: 44em
}

.plan-steps li {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1.2rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--line)
}

.plan-steps .leg {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--dune);
    letter-spacing: .05em;
    padding-top: .2rem
}

.plan-steps p {
    font-size: 1.02rem
}

.faq {
    max-width: 46em
}

.faq details {
    border-top: 1px solid var(--line);
    padding: .4rem 0
}

.faq details:last-child {
    border-bottom: 1px solid var(--line)
}

.faq summary {
    font-family: var(--display);
    font-weight: 650;
    font-size: 1.1rem;
    padding: .9rem 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem
}

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

.faq summary::after {
    content: "+";
    font-family: var(--mono);
    color: var(--dune);
    font-size: 1.2rem
}

.faq details[open] summary::after {
    content: "–"
}

.faq details p {
    padding: 0 0 1.1rem;
    color: var(--ink-soft);
    font-size: 1.02rem;
    max-width: 40em
}

/* ================= ENQUIRY / TRUST / FOOTER ================= */
.enquire {
    background: var(--dusk);
    color: var(--pan);
    padding: 4.5rem 0
}

.enquire h2 {
    color: var(--pan)
}

.enquire .lead {
    color: #D6E0E7;
    max-width: 36em;
    margin-bottom: 2.2rem;
    font-weight: 300
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
    max-width: 720px
}

@media(max-width:640px) {
    .form-grid {
        grid-template-columns: 1fr
    }
}

.field {
    display: flex;
    flex-direction: column;
    gap: .4rem
}

.field.full {
    grid-column: 1/-1
}

.field label {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9DB0BD
}

.field input,
.field select,
.field textarea {
    font-family: var(--body);
    font-size: 1.05rem;
    color: var(--pan);
    background: var(--dusk-soft);
    border: 1px solid #465866;
    border-radius: 3px;
    padding: .75rem .9rem
}

.field input::placeholder,
.field textarea::placeholder {
    color: #78909C
}

.field textarea {
    min-height: 6rem;
    resize: vertical
}

.form-actions {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-top: .4rem
}

.whatsapp {
    font-family: var(--display);
    font-weight: 600;
    color: var(--grass);
    text-decoration: none;
    border-bottom: 1px solid var(--grass);
    padding-bottom: .1rem
}

.whatsapp:hover {
    color: var(--pan);
    border-color: var(--pan)
}

.form-note {
    font-family: var(--mono);
    font-size: .72rem;
    color: #78909C;
    grid-column: 1/-1
}

.trust {
    background: var(--dusk);
    border-top: 1px solid var(--dusk-soft);
    padding: 2.4rem 0
}

.trust .wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem
}

@media(max-width:700px) {
    .trust .wrap {
        grid-template-columns: 1fr
    }
}

.trust h3 {
    font-family: var(--display);
    font-weight: 650;
    font-size: 1rem;
    color: var(--grass);
    margin-bottom: .35rem
}

.trust p {
    font-size: .95rem;
    color: #9DB0BD;
    line-height: 1.5
}

footer {
    background: var(--dusk);
    color: #78909C;
    padding: 1.6rem 0 2.2rem;
    border-top: 1px solid var(--dusk-soft)
}

footer .wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-family: var(--mono);
    font-size: .72rem
}

footer a {
    color: #9DB0BD;
    text-decoration: none
}

footer a:hover {
    color: var(--pan)
}

/* ---------- the map + panel ---------- */
.areamap {
    display: block
}

.am-map {
    position: relative;
    background: #EAF1F6;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: .8rem;
    max-width: 900px;
    margin: 0 auto
}

.am-map-inner {
    position: relative
}

.am-map svg {
    width: 100%;
    height: auto;
    display: block
}

.am-base {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px
}

.am-svg {
    position: absolute;
    inset: 0
}

.rgn {
    fill: rgba(47, 127, 181, .10);
    stroke: rgba(34, 99, 143, .55);
    stroke-width: 1.5;
    cursor: pointer;
    transition: fill .15s ease, stroke .15s ease
}

.rgn:hover {
    fill: rgba(47, 127, 181, .30);
    stroke: var(--dune-deep);
    stroke-width: 2
}

.rgn:focus-visible {
    outline: none;
    fill: rgba(47, 127, 181, .30);
    stroke: var(--dusk);
    stroke-width: 2.5
}

.rgn.active {
    fill: rgba(194, 74, 59, .34);
    stroke: #C24A3B;
    stroke-width: 2.5
}

.rgn-lab {
    font-family: var(--display);
    font-weight: 700;
    font-size: 13px;
    fill: #1B2B38;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 3.5px;
    stroke-linejoin: round;
    pointer-events: none;
    transition: font-size .15s ease
}

.rgn-lab.on {
    font-size: 15px;
    fill: #8C2F22
}

.am-hint {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4A6E86;
    text-align: center;
    padding-top: .6rem
}

/* ---------- the panel ---------- */
.am-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 1.6rem
}

.am-panel:empty {
    display: none
}

.am-empty {
    padding: 2.2rem 1.6rem;
    color: var(--ink-soft)
}

.am-empty h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: .5rem
}

.am-empty ul {
    list-style: none;
    margin-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem
}

.am-empty li button {
    font-family: var(--mono);
    font-size: .72rem;
    border: 1px solid var(--line);
    background: var(--pan);
    color: var(--dune-deep);
    border-radius: 999px;
    padding: .35rem .8rem;
    cursor: pointer
}

.am-empty li button:hover {
    border-color: var(--dune);
    background: #EAF2F8
}

.am-body {
    display: none
}

.am-body.on {
    display: block
}

.am-head {
    padding: 1.3rem 1.6rem .9rem;
    border-bottom: 1px solid var(--line)
}

.am-kicker {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dune);
    margin-bottom: .3rem
}

.am-head h3 {
    font-family: var(--display);
    font-weight: 750;
    font-size: 1.6rem;
    letter-spacing: -.015em;
    margin-bottom: .4rem
}

.am-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .7rem
}

.am-facts span {
    font-family: var(--mono);
    font-size: .66rem;
    background: var(--pan-deep);
    border-radius: 3px;
    padding: .28rem .6rem;
    color: var(--ink-soft)
}

.am-inner {
    padding: 1.2rem 1.6rem 1.6rem
}

.am-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: start
}

@media(max-width:820px) {
    .am-cols {
        grid-template-columns: 1fr;
        gap: 1rem
    }
}

.am-inner p {
    font-size: 1rem;
    color: var(--ink-soft);
    margin-bottom: .9rem
}

/* big rotating gallery */
.am-gal {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 4px;
    overflow: hidden;
    background: var(--pan-deep);
    margin-bottom: 1.3rem
}

.am-gal .gslide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
    background-size: cover;
    background-position: center
}

.am-gal .gslide.on {
    opacity: 1
}

.am-gal .ph {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
    background: linear-gradient(135deg, #DCE6EC, #C9D8E2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: .85rem;
    color: #6B8299
}

.am-gal .ph.on {
    opacity: 1
}

.am-gal .gcap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 1.6rem 1.1rem .8rem;
    background: linear-gradient(180deg, rgba(20, 30, 38, 0), rgba(20, 30, 38, .72));
    color: #fff;
    font-family: var(--body);
    font-size: .95rem
}

.gnav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    color: var(--dusk);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.gnav:hover {
    background: #fff
}

.gprev {
    left: .7rem
}

.gnext {
    right: .7rem
}

.gdots {
    position: absolute;
    bottom: .7rem;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: .35rem
}

.gdots button {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    padding: 0
}

.gdots button.on {
    background: #fff;
    width: 1.4rem
}

@media(max-width:640px) {
    .am-gal {
        aspect-ratio: 4/3
    }
}

.am-links {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem
}

.btn {
    font-family: var(--display);
    font-weight: 600;
    font-size: .95rem;
    padding: .7rem 1.2rem;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    border: 1px solid transparent
}

.btn-dune {
    background: var(--dune);
    color: #fff
}

.btn-dune:hover {
    background: var(--dune-deep)
}

.btn-ghost {
    border-color: var(--line);
    color: var(--ink);
    background: #fff
}

.btn-ghost:hover {
    border-color: var(--dune);
    color: var(--dune-deep)
}

.am-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    margin-top: 1.6rem;
    padding: .95rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--pan);
    font-family: var(--display);
    font-weight: 650;
    font-size: 1rem;
    color: var(--dune-deep);
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease
}

.am-back:hover {
    background: #EAF2F8;
    border-color: var(--dune);
    transform: translateY(-2px)
}

.am-back:focus-visible {
    outline: 3px solid var(--dune);
    outline-offset: 2px
}

.am-back span {
    transition: transform .16s ease;
    display: inline-block
}

.am-back:hover span {
    transform: translateY(-3px)
}

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

    .am-back,
    .am-back span {
        transition: none
    }

    .am-back:hover {
        transform: none
    }
}

.am-close {
    float: right;
    border: none;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 0 0 0 .6rem
}

.am-close:hover {
    color: #C24A3B
}

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

    .rgn,
    .rgn-lab {
        transition: none
    }
}

/* ---------- add to trip ---------- */
.btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    background: var(--dune);
    color: #fff;
    border: 1px solid var(--dune);
    cursor: pointer;
    margin-bottom: .7rem;
    font-family: var(--display);
    font-weight: 650;
    font-size: 1rem;
    padding: .85rem 1.2rem;
    border-radius: 3px;
    transition: background .16s ease
}

.btn-add:hover {
    background: var(--dune-deep)
}

.btn-add.added {
    background: #2E7D52;
    border-color: #2E7D52
}

.btn-add .tick {
    font-size: 1.1rem;
    line-height: 1
}

.am-links {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem
}

.am-links .btn {
    width: 100%;
    text-align: center
}

.am-sum {
    font-size: .98rem;
    color: var(--ink-soft)
}

/* a chosen area shows a tick on the map */
.rgn.chosen {
    fill: rgba(46, 125, 82, .30);
    stroke: #2E7D52;
    stroke-width: 2.5
}

.rgn.chosen.active {
    fill: rgba(46, 125, 82, .45)
}

.rgn-tick {
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    fill: #1E6B44;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linejoin: round;
    pointer-events: none;
    opacity: 0
}

.rgn-tick.on {
    opacity: 1
}

/* ---------- the trip bar ---------- */
.tripbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--dusk);
    color: #fff;
    box-shadow: 0 -4px 20px rgba(15, 22, 28, .28);
    transform: translateY(110%);
    transition: transform .28s ease
}

.tripbar.on {
    transform: translateY(0)
}

.tripbar .tb-in {
    max-width: 1120px;
    margin: 0 auto;
    padding: .85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap
}

.tb-count {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grass)
}

.tb-list {
    flex: 1 1 auto;
    min-width: 12rem;
    font-size: .95rem;
    color: #D6E0E7;
    line-height: 1.4
}

.tb-list b {
    color: #fff;
    font-family: var(--display);
    font-weight: 650
}

.tb-go {
    background: var(--dune);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: .75rem 1.3rem;
    font-family: var(--display);
    font-weight: 650;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap
}

.tb-go:hover {
    background: #3C90C8
}

.tb-clear {
    background: none;
    border: none;
    color: #9DB0BD;
    font-family: var(--mono);
    font-size: .72rem;
    text-decoration: underline;
    cursor: pointer
}

.tb-clear:hover {
    color: #fff
}

@media(max-width:640px) {
    .tripbar .tb-in {
        padding: .7rem 1rem;
        gap: .6rem
    }

    .tb-go {
        width: 100%;
        text-align: center
    }

    .tb-list {
        font-size: .88rem
    }
}

body.has-tripbar {
    padding-bottom: 5.5rem
}

@media (prefers-reduced-motion:reduce) {
    .tripbar {
        transition: none
    }
}



/* ============ REGION FILTER BAR ============ */
.filterbar {
    padding: .4rem 0 1.2rem
}

.searchbox {
    position: relative;
    max-width: 38rem
}

.searchbox .s-icon {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.05rem;
    height: 1.05rem;
    color: var(--ink-soft);
    pointer-events: none
}

.searchbox input {
    width: 100%;
    font-family: var(--body);
    font-size: 1.02rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .75rem 2.6rem .75rem 2.6rem
}

.searchbox input:focus {
    outline: 3px solid var(--dune);
    outline-offset: 1px
}

.searchbox .s-clear {
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    padding: .15rem .35rem
}

.searchbox .s-clear:hover {
    color: #C24A3B
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

/* ================= PLAN / JOURNEY TRACK ================= */
#plan .plan-lead {
    max-width: 44em;
    color: var(--ink-soft);
    font-size: 1.05rem;
    margin-bottom: 2.4rem
}

.journey {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    position: relative;
    margin: 0 0 2rem;
    counter-reset: step
}

@media(max-width:1000px) {
    .journey {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.1rem
    }
}

@media(max-width:620px) {
    .journey {
        grid-template-columns: 1fr
    }
}

/* the connecting line, behind the cards */
.journey::before {
    content: "";
    position: absolute;
    top: 2.05rem;
    left: 6%;
    right: 6%;
    height: 2px;
    background: var(--line);
    z-index: 0
}

.journey::after {
    content: "";
    position: absolute;
    top: 2.05rem;
    left: 6%;
    height: 2px;
    width: 0;
    background: var(--dune);
    z-index: 1;
    transition: width 1.4s ease
}

.journey.in-view::after {
    width: 88%
}

@media(max-width:1000px) {

    .journey::before,
    .journey::after {
        display: none
    }
}

.journey li {
    position: relative;
    z-index: 2;
    display: flex
}

.step-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1.2rem 1.15rem 1.15rem;
    width: 100%;
    text-decoration: none;
    color: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease
}

.step-card:hover,
.step-card:focus-visible {
    border-color: var(--dune);
    box-shadow: 0 6px 18px rgba(34, 48, 60, .09);
    transform: translateY(-3px)
}

.step-card:focus-visible {
    outline: 3px solid var(--dune);
    outline-offset: 2px
}

.step-card .num {
    font-family: var(--mono);
    font-size: .82rem;
    color: #fff;
    background: var(--dune);
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
    flex: none;
    box-shadow: 0 0 0 5px #fff
}

/* white ring so the line passes cleanly behind */
.step-card:hover .num {
    background: var(--dusk)
}

.step-card .stage {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--dune);
    margin-bottom: .35rem
}

.step-card h3 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.06rem;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin-bottom: .45rem
}

.step-card p {
    font-size: .95rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-bottom: 1rem
}

.step-card .go {
    margin-top: auto;
    font-family: var(--display);
    font-weight: 650;
    font-size: .92rem;
    color: var(--dune);
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.step-card:hover .go {
    color: var(--dusk)
}

.step-card .go span {
    transition: transform .16s ease
}

.step-card:hover .go span {
    transform: translateX(3px)
}

@media (prefers-reduced-motion:reduce) {
    .journey::after {
        transition: none;
        width: 88%
    }

    .step-card,
    .step-card .go span {
        transition: none
    }

    .step-card:hover {
        transform: none
    }
}

/* ---- area panel extras ---- */
.am-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .7rem
}

.am-facts span {
    font-family: var(--mono);
    font-size: .66rem;
    background: var(--pan-deep);
    border-radius: 3px;
    padding: .28rem .6rem;
    color: var(--ink-soft)
}

.am-sum {
    font-size: .98rem;
    color: var(--ink-soft)
}

.am-soon {
    background: #FBF6EC;
    border: 1px solid #EADCC8;
    border-left: 3px solid #A8672E;
    border-radius: 0 4px 4px 0;
    padding: .9rem 1.1rem;
    font-size: .97rem;
    color: var(--ink-soft)
}

.am-soon strong {
    font-family: var(--display);
    font-weight: 650;
    color: var(--ink)
}

.am-inner p {
    margin-bottom: .9rem
}

.am-inner p:last-child {
    margin-bottom: 0
}

.am-links .btn {
    width: 100%;
    text-align: center
}

/* ---- area pills in the empty panel ---- */
.am-empty .am-pills {
    list-style: none;
    margin-top: 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: 0
}

.am-empty .am-pills li {
    margin: 0
}

.am-empty .am-pills button {
    font-family: var(--mono);
    font-size: .72rem;
    border: 1px solid var(--line);
    background: var(--pan);
    color: var(--dune-deep);
    border-radius: 999px;
    padding: .4rem .85rem;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease
}

.am-empty .am-pills button:hover {
    border-color: var(--dune);
    background: #EAF2F8
}

.am-empty .am-pills button:focus-visible {
    outline: 3px solid var(--dune);
    outline-offset: 2px
}

.am-empty .am-pills button.soon {
    color: var(--ink-soft);
    border-style: dashed
}

.am-empty .am-pills button.soon::after {
    content: " · soon";
    font-size: .62rem;
    opacity: .75
}

@media (prefers-reduced-motion:reduce) {
    .am-empty .am-pills button {
        transition: none
    }
}

/* placeholders are a fallback only — hide them as soon as real photos exist,
   and keep them behind the photos in any case */
.am-gal.has-photos .ph {
    display: none
}

.am-gal .gslide {
    z-index: 2
}

.am-gal .ph {
    z-index: 1
}

/* The caption is a <p>, so the general paragraph margin was pushing it ~14px
   up off the bottom of the photo. Absolutely positioned elements still honour
   margins, so it must be cleared explicitly. */
.am-gal .gcap {
    margin: 0;
    padding: 2rem 1.1rem .95rem
}

.am-gal .gdots {
    bottom: .55rem
}