/* ==========================================================================
   TAAN — Trekking Agencies' Association of Nepal
   Home page stylesheet
   Design direction: "High Altitude Register"
   Palette : alpine forest green / snow / glacier blue / monastery marigold /
             rhododendron crimson  (Nepal-specific, not generic gov-portal)
   Type    : Archivo (variable width) display · Newsreader body · JetBrains Mono data
   Signature: contour-ridge motif + map-legend elevation tags
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
    --ink: #028929;
    --ink-2: #028929;
    --ink-3: #028929; /* brand green */
    --text: #000000; /* body copy: pure black, kept apart from the brand green */
    --snow: #ffffff; /* page ground, and text on the dark bands */
    --snow-2: #f3f6f3; /* alternating band tint, warmed towards the green */
    --glacier: #1e88b0;
    --glacier-d: #12617e;
    --glacier-l: #7fc6e0;
    --marigold: #ff9600;
    --marigold-d: #ff9600; /* legible orange for light backgrounds */
    --rhodo: #a32338;
    --stone: #7b8b9c;
    --stone-d: #222222;
    /* The footer's own ground: navy rather than the brand green, so the page
       closes on a different colour from the header it opened with. */
    --navy: #0e2440;
    --navy-d: #0a1b30;

    --line-dark: rgba(255, 255, 255, 0.14);
    --line-light: rgba(2, 137, 41, 0.14);

    /* One family site-wide. The three names are kept so every rule that asks
       for a display, body or label face keeps working; what changes is that
       they now all resolve to the same typeface, and hierarchy comes from
       weight, size and letter-spacing instead. */
    --ff-sans: "Roboto", sans-serif;
    --ff-display: var(--ff-sans);
    --ff-body: var(--ff-sans);
    --ff-mono: var(--ff-sans);

    --shell: 1280px;
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
    /* Section padding. At the old 7.5rem two adjacent bands put 240px of
       empty space between their content; the page read as a series of
       islands. Tightened so sections sit close enough to be read as one
       document, with colour and rules doing the separating instead. */
    --sec-y: clamp(2.5rem, 4.5vw, 4.25rem);

    --r-sm: 4px;
    --r-md: 10px;
    --r-lg: 20px;

    --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* ---------- 2. Base ------------------------------------------------------ */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    background: var(--snow);
    color: var(--text);
    font-family: var(--ff-body);
    font-size: 1.0625rem;
    line-height: 1.72;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
    background: var(--snow-2);
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ff-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}

::selection {
    background: var(--marigold);
    color: var(--text);
}

:focus-visible {
    outline: 3px solid var(--marigold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---------- 3. Layout helpers ------------------------------------------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.band {
    padding-block: var(--sec-y);
}
.band--dark {
    background: var(--ink);
    color: var(--snow);
}
.band--tint {
    background: var(--snow-2);
}
/* Sections are told apart by their background; where two plain ones follow
   each other there is no change of colour to do it, so a hairline does. */
.band + .band:not(.band--tint):not(.band--dark):not(.tims-apply-band) {
    border-top: 1px solid var(--line-light);
}
.tims-apply-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 55, 18, 0.92) 0%,
            rgba(0, 76, 22, 0.78) 48%,
            rgba(0, 20, 8, 0.42) 100%
        ),
        url("../images/layout-img/everest_cover.jpg");
    background-size: cover;
    background-position: center;
}
.home-support-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 76, 22, 0.9) 0%,
            rgba(0, 76, 22, 0.72) 50%,
            rgba(0, 20, 8, 0.42) 100%
        ),
        url("../images/layout-img/breadcumb.JPG");
    background-size: cover;
    background-position: center;
}

/* Section head — map-legend styling is the through-line of the page */
.legend {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--marigold-d);
    margin-bottom: 1.1rem;
}
.band--dark .legend,
.finder .legend,
.join .legend {
    color: var(--marigold);
}
.legend::before {
    content: "";
    width: 26px;
    height: 10px;
    flex: none;
    background: currentColor;
    clip-path: polygon(0 100%, 26% 22%, 44% 62%, 68% 0, 100% 100%);
}

.sec-title {
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    max-width: 24ch;
}
.sec-lede {
    max-width: 62ch;
    margin-top: 1.1rem;
    font-size: 1.125rem;
    color: var(--stone-d);
}
.band--dark .sec-lede,
.finder .sec-lede,
.join .sec-lede {
    color: #b9c8d6;
}

/* On dark grounds the brighter marigold reads better than the deep orange. */
.band--dark .legend,
.page-banner .legend,
.contact-band .legend,
.finder .legend,
.join .legend,
.tims .legend,
.notice-board .legend,
.site-foot .legend {
    color: var(--marigold);
}

.sec-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    margin-bottom: clamp(1.5rem, 2.4vw, 2.1rem);
}
/* The heading block was 12px too wide to sit beside its standfirst, so the
   pair wrapped and left half the row empty. Letting the heading give way
   keeps them on one line until there is genuinely no room. */
.sec-head--split > *:first-child {
    flex: 1 1 32ch;
    min-width: 0;
}
.sec-head--split > *:last-child:not(:first-child) {
    flex: 0 1 38ch;
}

/* Elevation tag — the recurring map-legend chip */
.elev {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--ff-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0.28rem 0.55rem;
    border: 1px solid currentColor;
    border-radius: var(--r-sm);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- 4. Buttons --------------------------------------------------- */
.btn-taan,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--ff-display);
    font-weight: 650;
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.95rem 1.6rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    transition:
        transform 0.3s var(--ease),
        background-color 0.3s var(--ease),
        color 0.3s var(--ease),
        border-color 0.3s var(--ease);
    cursor: pointer;
}
.btn-taan {
    background: var(--marigold);
    color: var(--text);
}
.btn-taan:hover {
    background: #f5b450;
    color: var(--text);
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: currentColor;
    border-color: currentColor;
}
.btn-ghost:hover {
    background: currentColor;
    transform: translateY(-2px);
}
.btn-ghost:hover span {
    color: var(--text);
}
.band--dark .btn-ghost:hover span,
.hero .btn-ghost:hover span {
    color: var(--text);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--ff-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: 2px;
    border-bottom: 1.5px solid currentColor;
    transition: gap 0.3s var(--ease);
}
.link-arrow:hover {
    gap: 0.95rem;
    color: var(--ink-3);
}
.band--dark .link-arrow {
    color: var(--marigold);
}

/* ---------- 5. Top utility bar ------------------------------------------ */
.util {
    background: var(--ink);
    color: var(--marigold);
    font-family: var(--ff-mono);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--line-dark);
}
.util .shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    min-height: 42px;
}
.util-left {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}
.util a {
    transition: color 0.25s var(--ease);
}
.util a:hover {
    color: var(--snow);
}
.util-official {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.util-flag {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    opacity: 0.95;
    background: none;
    flex: none;
}
.util-sep {
    color: rgba(233, 161, 59, 0.4);
}

/* ---------- 6. Header / nav --------------------------------------------- */
.site-head {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-light);
    transition:
        padding 0.35s var(--ease),
        background-color 0.35s var(--ease);
}
.site-head .shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1rem;
    transition: padding 0.35s var(--ease);
}
.site-head.is-stuck .shell {
    padding-block: 0.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: none;
}
.brand img {
    height: 72px;
    width: auto;
    background: none;
    transition: height 0.35s var(--ease);
}
.site-head.is-stuck .brand img {
    height: 54px;
}
.brand-txt {
    display: none;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
    color: var(--text);
    text-transform: uppercase;
    max-width: 15ch;
}
.brand-txt small {
    display: block;
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--marigold);
    margin-top: 0.25rem;
}
@media (min-width: 1200px) {
    .brand-txt {
        display: block;
    }
}

.nav-main {
    display: none;
}
@media (min-width: 992px) {
    .nav-main {
        display: block;
    }
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-list > li {
    position: relative;
}
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--stone-d);
    padding: 0.7rem 0.7rem;
    border-radius: var(--r-sm);
    transition: color 0.25s var(--ease);
}
.nav-link:hover,
.nav-list > li:hover > .nav-link {
    color: var(--ink-3);
}
.nav-link i {
    font-size: 0.7rem;
    opacity: 0.6;
}

.drop {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--snow);
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    padding: 0.55rem;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity 0.25s var(--ease),
        transform 0.25s var(--ease),
        visibility 0.25s;
    box-shadow: 0 24px 50px rgba(0, 76, 22, 0.16);
}
.nav-list > li:hover > .drop,
.nav-list > li:focus-within > .drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.drop--right {
    left: auto;
    right: 0;
}
.drop a {
    display: block;
    font-family: var(--ff-body);
    font-size: 0.92rem;
    color: var(--stone-d);
    padding: 0.5rem 0.7rem;
    border-radius: var(--r-sm);
    transition:
        background-color 0.2s,
        color 0.2s,
        padding-left 0.2s var(--ease);
}
.drop a:hover {
    background: var(--snow-2);
    color: var(--text);
    padding-left: 1rem;
}

/* Mega menu for trekking regions */
.drop--mega {
    left: 50%;
    transform: translate(-50%, 8px);
    width: min(720px, 90vw);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.1rem 0.5rem;
    padding: 1.1rem;
}
.nav-list > li:hover > .drop--mega,
.nav-list > li:focus-within > .drop--mega {
    transform: translate(-50%, 0);
}
/* A centred mega menu on a nav item in the right half of the bar hangs off
   the edge of the page. Those align to their item's right instead. */
.drop--mega.drop--right {
    left: auto;
    right: 0;
    transform: translate(0, 8px);
}
.nav-list > li:hover > .drop--mega.drop--right,
.nav-list > li:focus-within > .drop--mega.drop--right {
    transform: translate(0, 0);
}
.drop--mega .mega-head {
    grid-column: 1 / -1;
    font-family: var(--ff-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 0 0.7rem 0.6rem;
    border-bottom: 1px solid var(--line-light);
    margin-bottom: 0.5rem;
}

.head-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: none;
}
.head-actions .btn-taan {
    padding: 0.7rem 1.15rem;
    font-size: 0.76rem;
}
.head-actions .btn-ghost {
    padding: 0.7rem 1.15rem;
    font-size: 0.76rem;
    color: #cfdce7;
}

.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: transparent;
    border: 1.5px solid var(--line-light);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: 1.3rem;
}
@media (min-width: 992px) {
    .burger {
        display: none;
    }
}
@media (max-width: 767.98px) {
    .head-actions .btn-ghost {
        display: none;
    }
}
@media (max-width: 575.98px) {
    .head-actions .btn-taan {
        display: none;
    }
}

/* Offcanvas (mobile nav) */
.offcanvas.taan-canvas {
    background: var(--ink);
    color: var(--snow);
    width: min(390px, 88vw);
}
.taan-canvas .offcanvas-header {
    border-bottom: 1px solid var(--line-dark);
}
.taan-canvas .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.7;
}
.taan-canvas .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--line-dark);
}
.taan-canvas .accordion-item {
    background: transparent;
    border-left: 0;
    border-right: 0;
}
.taan-canvas .accordion-button {
    background: transparent;
    color: var(--snow);
    font-family: var(--ff-display);
    font-weight: 650;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: none;
    padding: 1rem 0.25rem;
}
.taan-canvas .accordion-button::after {
    filter: invert(1);
    opacity: 0.55;
}
.taan-canvas .accordion-body {
    padding: 0.25rem 0.25rem 1rem;
}
.taan-canvas .accordion-body a {
    display: block;
    padding: 0.45rem 0;
    color: #b6c6d4;
    font-size: 0.95rem;
}
.taan-canvas .accordion-body a:hover {
    color: var(--marigold);
}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero {
    position: relative;
    /* Was 92vh: on a laptop that pushed the buttons under the fold and left
       the words floating in the middle of a photograph. */
    min-height: clamp(520px, 78vh, 780px);
    display: flex;
    align-items: flex-end;
    color: var(--snow);
    overflow: hidden;
    background: var(--ink);
}
.hero-stage {
    position: absolute;
    inset: 0;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s var(--ease);
}
.hero-slide.is-on {
    opacity: 1;
}
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 9s linear;
}
.hero-slide.is-on img {
    transform: scale(1);
}

/* A banner uploaded as a logo rather than a photograph: it sits as a
   watermark on the association's own photography instead of being stretched
   across the frame behind the words. */
.hero-slide.is-mark {
    background: url("../images/page-banner.jpg") center 40% / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.hero-slide.is-mark img {
    width: min(42%, 560px);
    height: auto;
    max-height: 68%;
    object-fit: contain;
    margin-right: clamp(1rem, 6vw, 6rem);
    opacity: 0.22;
    filter: grayscale(1) brightness(1.9);
    transform: none;
}

/* The wash that makes any photograph a background. Darkest where the words
   are, lifting across the frame so the picture still reads, and closing to
   ink at the foot so the next section starts cleanly. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(0, 20, 8, 0.9) 0%,
            rgba(0, 20, 8, 0.72) 42%,
            rgba(0, 20, 8, 0.3) 78%,
            rgba(0, 20, 8, 0.5) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 20, 8, 0.55) 0%,
            rgba(0, 20, 8, 0.1) 35%,
            rgba(0, 20, 8, 0.72) 100%
        );
}

.hero .shell {
    position: relative;
    z-index: 2;
    width: 100%;
    /* The scrim above does the work a text shadow used to do badly. */
    /* The quick-desk cards below are pulled up over the hero by 3.5rem, so
       the counter and dots have to clear them. */
    padding-bottom: clamp(5.5rem, 9vw, 7.5rem);
    padding-top: clamp(6rem, 12vw, 9rem);
}

.hero-copy {
    max-width: 46rem;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* Was #000 — black on a dark photograph, which is to say invisible. */
    color: var(--marigold);
    padding: 0.4rem 0.85rem 0.4rem 0.7rem;
    border: 1px solid rgba(233, 161, 59, 0.35);
    border-radius: 999px;
    background: rgba(0, 20, 8, 0.35);
    backdrop-filter: blur(4px);
    margin-bottom: 1.3rem;
}
.hero-typewriter::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 0.15em;
    background: currentColor;
    vertical-align: -0.15em;
    animation: twCaret 0.8s step-end infinite;
}
@keyframes twCaret {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.hero h1 {
    font-family: var(--ff-display);
    font-size: clamp(2.3rem, 5.2vw, 4.2rem);
    font-weight: 680;
    line-height: 1.04;
    letter-spacing: -0.015em;
    max-width: 17ch;
    margin: 0;
    color: var(--snow);
}
.hero h1 em {
    font-style: normal;
    color: var(--marigold);
}
.hero-sub {
    max-width: 52ch;
    margin: 1.1rem 0 0;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.65;
    color: #d7e3d9;
}

.hero-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 520px;
    margin-top: 2rem;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 999px;
    padding: 0.35rem 0.35rem 0.35rem 1.1rem;
    box-shadow: 0 18px 40px rgba(0, 20, 8, 0.35);
}
.hero-search-icon {
    display: inline-flex;
    color: var(--stone);
    font-size: 1rem;
    flex: none;
}
.hero-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--ff-body);
    font-size: 1rem;
    color: var(--text);
    padding: 0.7rem 0.2rem;
}
.hero-search input::placeholder {
    color: var(--stone);
}
.hero-search input:focus {
    outline: none;
}
.hero-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: none;
    height: 46px;
    padding: 0 1.25rem;
    border-radius: 999px;
    border: 0;
    background: var(--ink);
    color: var(--snow);
    font-family: var(--ff-display);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background-color 0.25s var(--ease),
        transform 0.25s var(--ease);
}
.hero-search-btn:hover {
    background: var(--marigold);
    color: var(--text);
    transform: translateY(-1px);
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.6rem;
}
.hero .btn-ghost {
    color: var(--snow);
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(0, 20, 8, 0.25);
    backdrop-filter: blur(4px);
}
.hero .btn-ghost:hover {
    background: var(--snow);
    border-color: var(--snow);
}

/* Slide counter + dots */
.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-counter {
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
}
.hero-counter b {
    color: var(--marigold);
    font-weight: 600;
}
.hero-dots {
    display: flex;
    gap: 0.45rem;
}
.hero-dots button {
    width: 30px;
    height: 3px;
    border: 0;
    padding: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition:
        background-color 0.3s var(--ease),
        width 0.3s var(--ease);
}
.hero-dots button:hover {
    background: rgba(255, 255, 255, 0.55);
}
.hero-dots button.is-on {
    width: 48px;
    background: var(--marigold);
}

@media (max-width: 640px) {
    .hero {
        min-height: clamp(480px, 86vh, 640px);
    }
    .hero-search {
        padding-left: 0.9rem;
    }
    .hero-search-btn span {
        display: none;
    }
    .hero-search-btn {
        width: 46px;
        padding: 0;
        justify-content: center;
    }
    .hero-slide.is-mark img {
        width: 70%;
        opacity: 0.1;
    }
}

/* Ridge divider — the page signature */
.ridge {
    display: block;
    width: 100%;
    height: auto;
}
.ridge--hero {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 3;
}

/* ---------- 8. Quick desk (overlapping action cards) -------------------- */
.desk {
    margin-top: -3.5rem;
    position: relative;
    z-index: 5;
}
.desk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--line-light);
    border: 1px solid var(--line-light);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 76, 22, 0.16);
}
.desk-card {
    background: #fff;
    padding: 2rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition:
        background-color 0.35s var(--ease),
        transform 0.35s var(--ease);
}
.desk-card:hover {
    background: var(--ink);
    color: var(--snow);
}
.desk-card i {
    font-size: 1.55rem;
    color: var(--ink-3);
    transition: color 0.35s var(--ease);
}
.desk-card:hover i {
    color: var(--marigold);
}
.desk-card h3 {
    font-size: 1.05rem;
    letter-spacing: 0;
}
.desk-card p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--stone-d);
}
.desk-card:hover p {
    color: #b9c8d6;
}
.desk-card .desk-go {
    margin-top: auto;
    padding-top: 0.8rem;
    font-family: var(--ff-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.desk-card:hover .desk-go {
    color: var(--marigold);
}

/* ---------- 9. Intro / about -------------------------------------------- */
.intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}
@media (min-width: 992px) {
    .intro-grid {
        grid-template-columns: 1.05fr 0.95fr;
    }
}

.intro-figures {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.intro-figures img {
    border-radius: var(--r-md);
    height: 100%;
    object-fit: cover;
}
.intro-figures .fig-tall {
    grid-row: span 2;
    aspect-ratio: 3 / 4.4;
}
.intro-figures .fig-wide {
    aspect-ratio: 4 / 3;
}
.est-stamp {
    position: absolute;
    right: -14px;
    bottom: -22px;
    width: 118px;
    height: 118px;
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: 50%;
    background: var(--rhodo);
    color: #fff;
    font-family: var(--ff-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    line-height: 1.6;
    box-shadow: 0 14px 34px rgba(163, 35, 56, 0.35);
}
.est-stamp b {
    display: block;
    font-family: var(--ff-display);
    font-size: 1.6rem;
    letter-spacing: 0.02em;
}
.intro-points {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 2rem;
    display: grid;
    gap: 0.8rem;
}
.intro-points li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 1rem;
}
.intro-points i {
    color: var(--ink-3);
    margin-top: 0.35rem;
    flex: none;
}

/* ---------- 10. Counter band -------------------------------------------- */
.count-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem 1.25rem;
}
.count-item {
    min-width: 0;
    border-left: 1px solid var(--line-dark);
    padding-left: 1.1rem;
}
.count-num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 1.8vw, 1.9rem);
    line-height: 1;
    color: var(--marigold);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .count-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .count-grid {
        grid-template-columns: 1fr;
    }
}
.count-label {
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* Read against the green band these sit on, not the ink one they were
       picked for. */
    color: rgba(255, 255, 255, 0.92);
    margin-top: 0.7rem;
}
.count-note {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 0.35rem;
    line-height: 1.5;
}
.count-item {
    border-left-color: rgba(255, 255, 255, 0.22);
}

/* ---------- 11. President ------------------------------------------------ */
.prez {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (min-width: 992px) {
    .prez {
        grid-template-columns: 260px 1fr;
        gap: clamp(2rem, 4vw, 3.25rem);
        align-items: start;
    }
}
.prez-photo {
    position: relative;
    /* The portrait on file is only 200px square, so the frame is kept close
       to that rather than blowing it up to fill the column. */
    max-width: 260px;
}
.prez-photo img {
    /* Without a width the photograph sits at its intrinsic size — 200px —
       inside a 320px frame, and the marigold outline reads as an empty box
       beside it. */
    display: block;
    width: 100%;
    border-radius: var(--r-md);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
}
.prez-photo::before {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 1.5px solid var(--marigold);
    border-radius: var(--r-md);
    z-index: -1;
}
.prez blockquote {
    margin: 0;
    font-size: clamp(1.12rem, 1.9vw, 1.4rem);
    line-height: 1.62;
    color: var(--text);
}
.prez blockquote::before {
    content: "“";
    display: block;
    font-family: var(--ff-display);
    font-size: 4.5rem;
    line-height: 0.6;
    color: var(--marigold);
    margin-bottom: 0.6rem;
}
.prez-sign {
    margin-top: 1.8rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.prez-sign .n {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.15rem;
}
.prez-sign .r {
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
}

/* ---------- 12. What TAAN does ------------------------------------------ */
.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}
.work-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    padding: 2rem 1.7rem 1.8rem;
    overflow: hidden;
    transition:
        transform 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}
.work-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: var(--marigold);
    transition: height 0.45s var(--ease);
}
.work-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(0, 76, 22, 0.1);
}
.work-card:hover::after {
    height: 100%;
}
.work-card i {
    font-size: 1.7rem;
    color: var(--ink-3);
}
.work-card h3 {
    font-size: 1.18rem;
    margin: 1rem 0 0.55rem;
}
.work-card p {
    margin: 0;
    font-size: 0.96rem;
    color: var(--stone-d);
}

/* ---------- 13. Regions -------------------------------------------------- */
.region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.15rem;
}
/* There are nine trekking sections, so three across fills every row. The
   mosaic's wide and tall tiles were leaving a ragged last row. */
@media (min-width: 992px) {
    .region-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .region-grid .region--wide {
        grid-column: auto;
    }
    .region-grid .region--tall {
        min-height: 310px;
    }
}
.region {
    position: relative;
    display: block;
    border-radius: var(--r-md);
    overflow: hidden;
    min-height: 310px;
    color: var(--snow);
    background: var(--ink-2);
    isolation: isolate;
}
.region--tall {
    min-height: 420px;
}
@media (min-width: 992px) {
    .region--wide {
        grid-column: span 2;
    }
}
.region img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
    z-index: -2;
}
.region::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(0, 76, 22, 0.06) 22%,
        rgba(0, 76, 22, 0.88) 100%
    );
    transition: background 0.4s var(--ease);
}
.region:hover img {
    transform: scale(1.07);
}
.region:hover::after {
    background: linear-gradient(
        180deg,
        rgba(0, 76, 22, 0.3) 0%,
        rgba(0, 76, 22, 0.94) 100%
    );
}
.region-body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5rem 1.5rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.region-body h3 {
    font-size: 1.35rem;
    /* Two-line section names were running up into the trail-count chip. */
    margin: 0;
    line-height: 1.24;
}
.region-body .elev {
    align-self: flex-start;
}
.region-body p {
    margin: 0;
    font-size: 0.93rem;
    color: #c9d7e2;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height 0.45s var(--ease),
        opacity 0.35s var(--ease);
}
.region:hover .region-body p,
.region:focus-visible .region-body p {
    max-height: 7rem;
    opacity: 1;
}
@media (hover: none) {
    .region-body p {
        max-height: 7rem;
        opacity: 1;
    }
}
.region .elev {
    align-self: flex-start;
    color: var(--marigold);
}

/* ---------- 14. Member finder ------------------------------------------- */
.finder {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ink-2);
    color: var(--snow);
    padding: clamp(2.25rem, 5vw, 4rem);
}
.finder::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("https://www.taan.org.np/public/images/search-cover.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.22;
}
.finder > * {
    position: relative;
}
.finder-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1.9rem;
    max-width: 900px;
}
@media (min-width: 768px) {
    .finder-form {
        grid-template-columns: 1.4fr 1fr auto;
    }
}
.finder-form .fld {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    padding: 0.35rem 0.35rem 0.35rem 1.15rem;
}
.finder-form .fld i {
    color: var(--marigold);
}
.finder-form input,
.finder-form select {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--snow);
    font-family: var(--ff-body);
    font-size: 1rem;
    padding: 0.78rem 0;
}
.finder-form input::placeholder {
    color: #93a7b8;
}
.finder-form select option {
    background: var(--ink);
}
.finder-form input:focus,
.finder-form select:focus {
    outline: none;
}
.finder-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.3rem;
}
.finder-tags span {
    font-family: var(--ff-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b6c6d4;
}
.finder-tags a {
    font-family: var(--ff-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    transition:
        border-color 0.25s,
        color 0.25s;
}
.finder-tags a:hover {
    border-color: var(--marigold);
    color: var(--marigold);
}

/* ---------- 15. Permits (tabs + table) ---------------------------------- */
.permit-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}
.permit-tabs button {
    font-family: var(--ff-display);
    font-weight: 620;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    border: 1.5px solid var(--line-light);
    background: transparent;
    color: var(--stone-d);
    cursor: pointer;
    transition: all 0.3s var(--ease);
}
.permit-tabs button.is-on {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--snow);
}
.permit-panel {
    display: none;
}
.permit-panel.is-on {
    display: block;
    animation: fadeUp 0.5s var(--ease) both;
}

.fee-table {
    width: 100%;
    border-collapse: collapse;
}
.fee-table th,
.fee-table td {
    text-align: left;
    padding: 1rem 1rem;
    border-bottom: 1px solid var(--line-light);
    vertical-align: top;
}
.fee-table thead th {
    font-family: var(--ff-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom-width: 1.5px;
}
.fee-table tbody tr {
    transition: background-color 0.25s;
}
.fee-table tbody tr:hover {
    background: #fff;
}
.fee-table td.amt {
    font-family: var(--ff-mono);
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
}
.fee-note {
    font-family: var(--ff-mono);
    font-size: 0.74rem;
    color: var(--stone);
    margin-top: 1.1rem;
    letter-spacing: 0.04em;
}
.table-scroll {
    overflow-x: auto;
}

/* ---------- 16. TIMS ----------------------------------------------------- */
.tims {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (min-width: 992px) {
    .tims {
        grid-template-columns: 1.05fr 0.95fr;
    }
}
.tims-card {
    background: linear-gradient(140deg, var(--glacier-d), var(--ink-2) 78%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--r-md);
    padding: 1.9rem;
    color: var(--snow);
    box-shadow: 0 28px 60px rgba(0, 76, 22, 0.3);
}
.tims-card .row-k {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    font-family: var(--ff-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}
.tims-card .row-k:last-child {
    border-bottom: 0;
}
.tims-card .row-k span:first-child {
    color: #b6c6d4;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
}
.tims-chip {
    width: 46px;
    height: 34px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--marigold), #c9821f);
    margin-bottom: 1.3rem;
}
.steps {
    list-style: none;
    counter-reset: s;
    padding: 0;
    margin: 1.75rem 0 0;
    display: grid;
    gap: 1.1rem;
}
.steps li {
    display: flex;
    gap: 1rem;
    counter-increment: s;
}
.steps li::before {
    content: counter(s, decimal-leading-zero);
    font-family: var(--ff-mono);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--marigold);
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-content: center;
    flex: none;
}
.steps b {
    display: block;
    font-family: var(--ff-display);
    font-weight: 650;
    font-size: 1rem;
}
.steps p {
    margin: 0.2rem 0 0;
    font-size: 0.94rem;
    color: #b9c8d6;
}

/* ---------- 17. Sustainability pledge ----------------------------------- */
.pledge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}
.pledge {
    border-top: 2px solid var(--ink);
    padding-top: 1.2rem;
}
.pledge .k {
    font-family: var(--ff-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rhodo);
    margin-bottom: 0.6rem;
}
.pledge h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.pledge p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--stone-d);
}

/* ---------- 18. News / notices ------------------------------------------ */
.news-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 992px) {
    .news-layout {
        grid-template-columns: 1.55fr 0.95fr;
        gap: 3rem;
        /* The board is as tall as the notices in it, rather than stretching
           to match the stories beside it. */
        align-items: start;
    }
}

.news-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--line-light);
}
@media (min-width: 600px) {
    .news-card {
        grid-template-columns: 220px 1fr;
        gap: 1.6rem;
    }
}
.news-card:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.news-thumb {
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.news-card:hover .news-thumb img {
    transform: scale(1.06);
}
.news-date {
    font-family: var(--ff-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.6rem;
}
.news-card h3 {
    font-size: 1.28rem;
    line-height: 1.22;
}
.news-card h3 a:hover {
    color: var(--ink-3);
}
.news-card p {
    font-size: 0.96rem;
    color: var(--stone-d);
    margin: 0.7rem 0 0.9rem;
}

.notice-board {
    background: var(--ink);
    color: var(--snow);
    border-radius: var(--r-md);
    padding: 1.75rem;
}
.notice-board h3 {
    font-size: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line-dark);
}
.notice-list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
    max-height: 380px;
    overflow-y: auto;
}
.notice-list li {
    padding: 0.95rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
}
.notice-list a {
    display: block;
    font-size: 0.96rem;
    color: #d3dfe9;
    transition: color 0.25s;
}
.notice-list a:hover {
    color: var(--marigold);
}
.notice-list .d {
    display: block;
    font-family: var(--ff-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0.3rem;
}
.notice-list::-webkit-scrollbar {
    width: 4px;
}
.notice-list::-webkit-scrollbar-thumb {
    background: var(--glacier-d);
    border-radius: 4px;
}
.tag-new {
    font-family: var(--ff-mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    background: var(--rhodo);
    color: #fff;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* ---------- 19. Gallery -------------------------------------------------- */
.gal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .gal {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 190px;
    }
}
.gal a {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    display: block;
}
@media (min-width: 768px) {
    .gal a:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }
    .gal a:nth-child(6) {
        grid-column: span 2;
    }
}
.gal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
    transition: transform 0.9s var(--ease);
}
@media (min-width: 768px) {
    .gal img {
        aspect-ratio: auto;
    }
}
.gal a::after {
    content: "+";
    font-family: var(--ff-display);
    font-weight: 400;
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    font-size: 2.4rem;
    line-height: 1;
    color: #fff;
    background: rgba(0, 76, 22, 0.55);
    opacity: 0;
    transition: opacity 0.35s var(--ease);
}
.gal a:hover img {
    transform: scale(1.08);
}
.gal a:hover::after {
    opacity: 1;
}

/* ---------- 20. Membership CTA ------------------------------------------ */
.join {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    color: var(--snow);
    background: var(--ink);
}
.join img.join-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}
.join-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: clamp(2.25rem, 5vw, 4rem);
}
@media (min-width: 992px) {
    .join-inner {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 4rem;
        align-items: center;
    }
}
.join-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    gap: 0.75rem;
}
.join-list li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-size: 1rem;
    line-height: 1.55;
    /* A cool grey picked for an ink panel; over the green photograph these
       benefits are what the section is selling, so they read at full strength. */
    color: rgba(255, 255, 255, 0.94);
}
.join-list i {
    color: var(--marigold);
    margin-top: 0.3rem;
    flex: none;
}
.join-panel {
    background: rgba(0, 76, 22, 0.72);
    border: 1px solid var(--line-dark);
    border-radius: var(--r-md);
    padding: 1.75rem;
    backdrop-filter: blur(6px);
}
.join-panel h3 {
    font-size: 1.2rem;
    margin-bottom: 1.1rem;
}
/* The steps inside the panel sit on a green wash, not the ink the shared
   .steps colours were chosen for. */
.join-panel .steps p {
    color: rgba(255, 255, 255, 0.8);
}
.join-panel .steps b {
    color: var(--snow);
}

/* ---------- 21. Partners marquee ---------------------------------------- */
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 8%,
        #000 92%,
        transparent
    );
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 8%,
        #000 92%,
        transparent
    );
}
.marquee-track {
    display: flex;
    gap: 3.5rem;
    padding-right: 3.5rem;
    width: max-content;
    animation: slide 34s linear infinite;
}
.marquee:hover .marquee-track {
    animation-play-state: paused;
}
/* The logos are supplied as JPEGs with their own white ground, so on a tinted
   band each one shows as a white rectangle anyway. Given an even tile and a
   hairline, that reads as deliberate rather than as a loading artefact. */
.marquee img {
    /* The supplied files carry a lot of white margin around the mark, so the
       tile has to be tall enough for what is left to be readable. */
    height: 74px;
    width: auto;
    object-fit: contain;
    padding: 0.35rem 0.9rem;
    background: #fff;
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    filter: grayscale(1);
    opacity: 0.9;
    transition:
        filter 0.35s,
        opacity 0.35s,
        border-color 0.35s;
}
.marquee img:hover {
    filter: none;
    opacity: 1;
    border-color: var(--marigold);
}
@keyframes slide {
    to {
        transform: translateX(-50%);
    }
}

/* ---------- 22. Support strip ------------------------------------------- */
.support {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 768px) {
    .support {
        grid-template-columns: 1.3fr 0.7fr;
    }
}
.support-num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--marigold);
    letter-spacing: -0.01em;
}

/* ---------- 23. Footer --------------------------------------------------- */
.site-foot {
    background: var(--navy);
    color: #b7c6d8;
    padding-top: clamp(3.5rem, 7vw, 5.5rem);
}
/* The closing strip sits a shade deeper than the footer above it, so the
   small print reads as a separate band rather than a stray line. */
.site-foot .foot-bottom {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.foot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.75rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--line-dark);
}
.foot-grid h4 {
    font-size: 0.8rem;
    font-family: var(--ff-mono);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--marigold);
    margin-bottom: 1.25rem;
}
.foot-logo {
    margin-bottom: 1.25rem;
}
.foot-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}
.foot-grid ul a {
    font-size: 0.95rem;
    transition:
        color 0.25s,
        padding-left 0.25s var(--ease);
}
.foot-grid ul a:hover {
    color: var(--marigold);
    padding-left: 0.35rem;
}
.foot-grid p {
    font-size: 0.95rem;
    margin: 0 0 1rem;
}
.foot-contact {
    display: grid;
    gap: 0.7rem;
    font-family: var(--ff-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}
.foot-contact div {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}
.foot-contact i {
    color: var(--marigold);
    margin-top: 0.15rem;
}

.subscribe {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.subscribe input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    padding: 0.8rem 1.1rem;
    color: var(--snow);
    font-family: var(--ff-body);
}
.subscribe input::placeholder {
    color: #7b8b9c;
}
.subscribe input:focus {
    outline: none;
    border-color: var(--marigold);
}
.subscribe button {
    border: 0;
    border-radius: 999px;
    width: 48px;
    flex: none;
    background: var(--marigold);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}
.subscribe button:hover {
    background: #f5b450;
}
.form-msg {
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    margin-top: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    min-height: 1rem;
}

.socials {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.4rem;
}
.socials a {
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    transition: all 0.3s var(--ease);
}
.socials a:hover {
    background: var(--marigold);
    color: var(--text);
    border-color: var(--marigold);
    transform: translateY(-3px);
}

.foot-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    align-items: center;
    padding-block: 1.6rem 2rem;
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #7b8b9c;
}
.foot-bottom a:hover {
    color: var(--marigold);
}
.site-foot .foot-grid h4 {
    color: var(--snow);
}
.site-foot .foot-grid ul a,
.site-foot .foot-bottom a {
    color: #b7c6d8;
}
.site-foot .foot-contact i {
    color: var(--marigold);
}

/* ---------- 24. Back to top --------------------------------------------- */
.to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--marigold);
    color: var(--snow);
    font-size: 1.15rem;
    display: grid;
    place-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: all 0.35s var(--ease);
    box-shadow: 0 12px 28px rgba(0, 76, 22, 0.3);
}
.to-top.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ---------- 25. Motion --------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.8s var(--ease),
        transform 0.8s var(--ease);
}
.reveal.is-in {
    opacity: 1;
    transform: none;
}
.reveal[data-d="1"] {
    transition-delay: 0.09s;
}
.reveal[data-d="2"] {
    transition-delay: 0.18s;
}
.reveal[data-d="3"] {
    transition-delay: 0.27s;
}
.reveal[data-d="4"] {
    transition-delay: 0.36s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *:not(.marquee-track),
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
    .hero-slide img {
        transform: none;
    }
}

/* Short pages used to leave the page background showing under the footer,
   so the body fills the viewport and main takes up the slack. */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
}

body > .site-foot {
    flex-shrink: 0;
}

/* Footer logo sits on a white plate so the full-colour mark stays legible
   against the green. */
.foot-logo {
    background: #fff;
    padding: 0.7rem 1rem;
    border-radius: var(--r-md);
    height: auto;
    max-width: 260px;
    width: 100%;
}

/* ---------- Legacy CMS page hero ---------------------------------------
   17 templates (page, faq, newsletter, committees, galleries …) still use
   this markup, whose styles lived in the disabled scss/style.css. Without
   them the banner image just flowed and the white <h1> landed on the light
   page background, invisible. This restores the overlay used elsewhere. */
.section-bg-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(220px, 32vw, 400px);
    overflow: clip;
    background: var(--ink);
}

.section-bg-banner .hero-bg {
    position: absolute;
    inset: 0;
}

.section-bg-banner .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section-bg-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 20, 8, 0.55) 0%,
        rgba(0, 20, 8, 0.35) 45%,
        rgba(0, 20, 8, 0.85) 100%
    );
}

.section-bg-banner > .container {
    position: relative;
    z-index: 1;
    padding-block: clamp(1.6rem, 4vw, 3rem);
}

.section-hero-title h1 {
    font-family: var(--ff-display);
    font-weight: 650;
    font-size: clamp(1.8rem, 4.4vw, 3rem);
    line-height: 1.06;
    color: var(--snow);
    margin: 0;
}

/* ---------- Digital TIMS band, plain white ------------------------------
   Same block as the image-backed CTA bands, but on a plain white ground.
   Only the copy that was hardcoded light needs restating; everything else
   inherits the light-context colours now that .band--dark is gone. */
.tims-band--plain {
    background: #fff;
}

.tims-band--plain .steps p,
.tims-band--plain .fee-note {
    color: var(--stone-d);
}

/* ---------- Breadcrumbs -------------------------------------------------
   One breadcrumb for the whole site, the permit pages' one: small mono type
   above the page title, the current page in marigold, no home icon. The
   templates got there by four different routes — a hand-rolled trail, two
   copies of it under other names, and Bootstrap's own — so all four are
   named here rather than rewritten one page at a time. */
.crumbs,
.permit-crumbs,
.breadcrumb-trail,
.departments-breadcrumb,
.committee-breadcrumb,
.breadcrumb-modern,
.page-banner .breadcrumb,
.section-bg-banner .breadcrumb,
.bg-breadcrumd .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.7rem;
    padding: 0;
    list-style: none;
    background: none;
    font-family: var(--ff-mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: #cfdce7;
}

.crumbs a,
.permit-crumbs a,
.breadcrumb-trail a,
.departments-breadcrumb a,
.committee-breadcrumb a,
.breadcrumb-modern a,
.page-banner .breadcrumb a,
.section-bg-banner .breadcrumb a,
/* These older heroes paint their links with Bootstrap's .text-white, which
   carries !important, so this has to answer in kind. */
.bg-breadcrumd .breadcrumb a {
    color: #cfdce7 !important;
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

.crumbs a:hover,
.permit-crumbs a:hover,
.breadcrumb-trail a:hover,
.departments-breadcrumb a:hover,
.committee-breadcrumb a:hover,
.breadcrumb-modern a:hover,
.page-banner .breadcrumb a:hover,
.section-bg-banner .breadcrumb a:hover,
.bg-breadcrumd .breadcrumb a:hover {
    color: var(--marigold) !important;
}

.crumbs .sep,
.permit-crumbs .sep,
.breadcrumb-trail .sep,
.departments-breadcrumb .sep,
.committee-breadcrumb .sep {
    opacity: 0.45;
}

.crumbs .is-current,
.permit-crumbs .is-current,
.breadcrumb-trail .is-current,
.departments-breadcrumb .is-current,
.committee-breadcrumb .is-current,
.breadcrumb-modern .active,
.page-banner .breadcrumb .active,
.section-bg-banner .breadcrumb .active,
.bg-breadcrumd .breadcrumb .active {
    color: var(--marigold) !important;
}

/* The Bootstrap markup keeps its list items; only the separator and the
   colours need saying, since the rules above already lay the list out. */
.breadcrumb-modern .breadcrumb-item,
.page-banner .breadcrumb-item,
.section-bg-banner .breadcrumb-item,
.bg-breadcrumd .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #cfdce7;
}

.breadcrumb-modern .breadcrumb-item + .breadcrumb-item::before,
.page-banner .breadcrumb-item + .breadcrumb-item::before,
.section-bg-banner .breadcrumb-item + .breadcrumb-item::before,
.bg-breadcrumd .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0;
    color: inherit;
    opacity: 0.45;
}

/* The house icon several pages open with says nothing the word "Home" does
   not, and the permit pages never had one. */
.crumbs .bi-house-door-fill,
.permit-crumbs .bi-house-door-fill,
.breadcrumb-trail .bi-house-door-fill,
.departments-breadcrumb .bi-house-door-fill,
.committee-breadcrumb .bi-house-door-fill {
    display: none;
}

/* The trail belongs above the title. Most heroes print it underneath, so any
   hero holding one is laid out as a column and the trail moved to the front —
   one rule, rather than the same edit in nineteen templates. Written with
   :has() so it finds the bespoke heroes too, whatever they call themselves. */
.shell:has(> .crumbs),
.shell:has(> .permit-crumbs),
.shell:has(> .breadcrumb-trail),
.shell:has(> .departments-breadcrumb),
.shell:has(> .committee-breadcrumb),
.shell:has(> .breadcrumb),
.shell:has(> nav > .breadcrumb) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.shell > .crumbs,
.shell > .permit-crumbs,
.shell > .breadcrumb-trail,
.shell > .departments-breadcrumb,
.shell > .committee-breadcrumb,
.shell > .breadcrumb,
.shell > nav:has(> .breadcrumb) {
    order: -1;
}

/* Same again for the older heroes, which wrap their trail in a nav inside
   .bg-breadcrumd rather than in a .shell. */
.bg-breadcrumd:has(> nav > .breadcrumb) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bg-breadcrumd > nav:has(> .breadcrumb) {
    order: -1;
}

/* ---------- Legacy hero banners ----------------------------------------
   A handful of older templates (a post, a member profile, a trail package)
   draw their hero as .inner-banner with the photo as a plain <img> and the
   title over it. That layout lived in scss/style.css, which is commented out
   of the layout, so these pages had no hero at all — a white band with white
   text in it. This gives them the same hero as everywhere else, so their
   breadcrumbs read the same way too. */
.inner-banner {
    position: relative;
    display: grid;
    isolation: isolate;
    background: var(--ink);
    overflow: clip;
}

.inner-banner > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inner-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(0, 20, 8, 0.74) 0%,
        rgba(0, 20, 8, 0.58) 50%,
        rgba(0, 20, 8, 0.78) 100%
    );
}

.inner-banner__navbar {
    min-height: clamp(220px, 26vw, 320px);
    padding-block: clamp(2.5rem, 6vw, 4rem);
    color: var(--snow);
}

.bg-breadcrumd h1 {
    font-family: var(--ff-display);
    font-weight: 650;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.08;
    color: var(--snow);
    margin: 0 0 0.6rem;
}

/* The quick links that sit beside the title on those pages. */
.inner-banner .quick-view {
    gap: 1.4rem;
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inner-banner .quick-view a {
    color: #cfdce7;
    text-decoration: none;
}

.inner-banner .quick-view a:hover {
    color: var(--marigold);
}
.inner-banner .quick-view span {
    color: var(--marigold);
}