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

/* ==========================================================================
   Typography
   Font: Manrope (imported weights: 400 regular, 500 medium, 600 semibold,
   700 bold, 800 extrabold — enough range for body copy, nav/UI text and a
   confident hero heading without loading every weight in the family).

   Mobile-first scale: base values below are for phones, then stepped up
   at the tablet (768px) and desktop (1024px) cut-offs.
   ========================================================================== */

:root{
    --font-base:'Manrope', sans-serif;
    --font-heading:'Poppins', var(--font-base);

    --fw-regular:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-extrabold:800;

    --fs-eyebrow:11px;
    --fs-small:14px;
    --fs-body:16px;
    --fs-lead:16px;
    --fs-h5:18px;
    --fs-h4:20px;
    --fs-h3:23px;
    --fs-h2:27px;
    --fs-h1:32px;

    --lh-body:1.65;
    --lh-heading:1.25;

    --color-text:#1F2328;
    --color-text-muted:#5B6169;
    --color-accent-text:#A0621F;
}

@media(min-width:768px){
    :root{
        --fs-lead:17px;
        --fs-h5:19px;
        --fs-h4:22px;
        --fs-h3:26px;
        --fs-h2:33px;
        --fs-h1:40px;
    }
}

@media(min-width:1024px){
    :root{
        --fs-body:17px;
        --fs-eyebrow:12px;
        --fs-lead:19px;
        --fs-h5:20px;
        --fs-h4:24px;
        --fs-h3:30px;
        --fs-h2:40px;
        --fs-h1:52px;
    }
}

body{
    font-family:var(--font-base);
    font-size:var(--fs-body);
    font-weight:var(--fw-regular);
    line-height:var(--lh-body);
    color:var(--color-text);
}

h1,h2,h3,h4,h5{
    font-family:var(--font-heading);
    line-height:var(--lh-heading);
    color:#111;
}

h1{
    font-size:var(--fs-h1);
    font-weight:var(--fw-extrabold);
    letter-spacing:-.02em;
}

h2{
    font-size:var(--fs-h2);
    font-weight:var(--fw-extrabold);
    letter-spacing:-.02em;
}

h3{
    font-size:var(--fs-h3);
    font-weight:var(--fw-bold);
    letter-spacing:-.01em;
}

h4{
    font-size:var(--fs-h4);
    font-weight:var(--fw-semibold);
}

h5{
    font-size:var(--fs-h5);
    font-weight:var(--fw-semibold);
}

small,
.text-small{
    font-size:var(--fs-small);
}

.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;
}

a{
    text-decoration:none;
    color:#222;
}

/* ---------------------- */
/* Inline content links (Overview, FAQs, itinerary, etc.) — applies to any    */
/* plain link inside the main content area, in every current and future      */
/* template. Buttons and other componentised links keep their own styling    */
/* because they always carry a class (.btn, .tour-gallery-item, ...); this   */
/* rule only matches classless links, which is what CMS-authored HTML uses.  */
/* ---------------------- */

.site-main a:not([class]){
    color:var(--color-accent-text);
    font-weight:var(--fw-medium);
    text-decoration:underline;
    text-decoration-color:rgba(160,98,31,.4);
    text-underline-offset:2px;
    transition:.2s;
}

.site-main a:not([class]):hover{
    color:#EA580C;
    text-decoration-color:currentColor;
}

ul{
    list-style:none;
}

/* ==========================================================================
   Navbar — mobile-first. Base rules below are the phone layout; the menu
   is a slide-down panel behind the burger. Tablet (768px) only tweaks
   spacing — it keeps the burger. Desktop (1024px) switches to the
   horizontal hover menu and hides the burger.
   ========================================================================== */

.navbar{

    position:sticky;
    top:0;

    width:100%;
    height:64px;

    background:#ffffff;

    z-index:1000;

    border-bottom:1px solid #ececec;

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

/* ---------------------- */

.navbar.scrolled{

    background:#ffffff;

    border-bottom:1px solid rgba(0,0,0,.06);

    box-shadow:0 6px 24px rgba(0,0,0,.05);

}
/* ---------------------- */

.nav-container{
    max-width:1600px;
    margin:auto;
    padding:0 20px;
    height:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* ---------------------- */

.logo img{
    height:60px;
    display:block;
}

/* Phones only: the logo PNG carries ~6px of transparent left margin at its
   60px display height; nudge it back so the visible mark sits on the same
   20px edge as the page content and footer text. */
@media(max-width:767px){

    .logo img{
        margin-left:-6px;
    }

}

/* ---------------------- */
/* Burger                 */
/* ---------------------- */

.burger{
    display:block;
    width:26px;
    height:26px;
    background:none;
    border:none;
    cursor:pointer;
}

.burger span{
    display:block;
    height:2px;
    background:#222;
    margin:5px 0;
    transition:.3s;
}

/* ---------------------- */
/* Menu panel (mobile/tablet default) */
/* ---------------------- */

.menu{
    position:absolute;
    top:64px;
    left:0;
    right:0;
    background:#fff;
    border-top:1px solid #ececec;
    display:none;
    max-height:calc(100vh - 64px);
    overflow-y:auto;
}

.menu.active{
    display:block;
}

.menu li{
    position:relative;
}

.menu>ul>li>a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    padding:16px 20px;
    font-size:var(--fs-body);
    font-weight:var(--fw-semibold);
    transition:.25s;
}

.menu>ul>li>a:hover{
    background:#f5f5f5;
}

.arrow{
    font-size:10px;
    margin-top:1px;
}

/* ---------------------- */
/* Dropdown / accordion   */
/* ---------------------- */

.submenu{
    position:static;
    min-width:100%;
    display:none;
    background:#fafafa;
}

.has-submenu.open>.submenu{
    display:block;
}

.submenu a,
.submenu-label{
    display:block;
    padding:14px 20px 14px 36px;
    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    transition:.2s;
}

.submenu a:hover{
    background:#f0f0f0;
}

/* Non-linked submenu entries (sections without a page yet) — shown, not clickable. */
.submenu-label{
    color:#9aa0a6;
    cursor:default;
}

/* ---------------------- */
/* Tablet ≥768px — burger stays, just breathe a bit more */
/* ---------------------- */

@media(min-width:768px){

    .navbar{
        height:72px;
    }

    .menu{
        top:72px;
        max-height:calc(100vh - 72px);
    }

    .logo img{
        height:60px;
    }

    .nav-container{
        padding:0 32px;
    }

}

/* ---------------------- */
/* Desktop ≥1024px — normal horizontal menu, burger hidden */
/* ---------------------- */

@media(min-width:1024px){

    .navbar{
        height:80px;
    }

    .logo img{
        height:75px;
    }

    .nav-container{
        padding:0 40px;
    }

    .burger{
        display:none;
    }

    .menu{
        position:static;
        display:block;
        background:none;
        border-top:none;
        max-height:none;
        overflow:visible;
    }

    .menu>ul{
        display:flex;
        align-items:center;
        gap:12px;
    }

    .menu>ul>li>a{
        justify-content:flex-start;
        padding:12px 16px;
        border-radius:8px;
        font-size:15px;
    }

    .submenu{
        position:absolute;
        top:100%;
        right:0;
        min-width:220px;
        display:block;
        background:#fff;
        border:1px solid #ececec;
        border-radius:12px;
        overflow:hidden;
        box-shadow:0 10px 30px rgba(0,0,0,.08);
        opacity:0;
        visibility:hidden;
        transform:translateY(10px);
        transition:.25s;
    }

    .has-submenu:hover>.submenu{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .submenu a,
    .submenu-label{
        padding:14px 20px;
        font-size:14px;
    }

    .submenu a:hover{
        background:#f6f6f6;
    }

}

/* ==========================================================================
   Footer — mobile-first. Base rules stack every block, with Explore,
   Resources, Contacts and Socials collapsed into an accordion (one open
   at a time). Tablet (768px) switches to a static two-column layout with
   no accordion. Desktop (1024px) lays the blocks out in a single row plus
   a social row underneath.
   ========================================================================== */

.site-footer{
    width:100%;
    background:linear-gradient(to bottom,#12344D,#0F172A);
    border-top:1px solid #E5E7EB;
}

.footer-container{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
        "brand"
        "explore"
        "resources"
        "contacts"
        "socials"
        "copyright";
    max-width:1600px;
    margin:auto;
    padding:0 20px;
}

.footer-block{
    padding:20px;
    color:#CBD5E1;
}

/* Phones only: the blocks and accordion headers already carry 20px of their
   own padding, so zeroing the container gutter puts the footer text on the
   same 20px edge as the header and page content. */
@media(max-width:767px){

    .footer-container{
        padding:0;
    }

}

.footer-brand{
    grid-area:brand;
}

.footer-explore{
    grid-area:explore;
    padding:0;
}

.footer-resources{
    grid-area:resources;
    padding:0;
}

.footer-contacts{
    grid-area:contacts;
    padding:0;
}

.footer-socials{
    grid-area:socials;
    padding:0;
}

.footer-copyright{
    grid-area:copyright;
    text-align:center;
}

/* ---------------------- */
/* Brand                  */
/* ---------------------- */

.footer-brand-heading{
    color:#fff;
    font-weight:var(--fw-bold);
    font-size:var(--fs-h5);
}

.footer-brand-text{
    margin-top:12px;
    font-weight:var(--fw-regular);
    color:#CBD5E1;
}

/* ---------------------- */
/* Link lists (Explore / Resources) */
/* ---------------------- */

.footer-links a,
.footer-links a:visited{
    display:block;
    line-height:2rem;
    color:#CBD5E1;
    font-weight:var(--fw-medium);
    transition:.2s;
}

.footer-links a:hover{
    color:#F97316;
}

/* ---------------------- */
/* Contact                */
/* ---------------------- */

.footer-contacts .footer-block-content p{
    display:flex;
    align-items:center;
    gap:8px;
}

.footer-contacts .footer-block-content p+p{
    margin-top:8px;
}

.footer-contacts a,
.footer-contacts a:visited{
    color:#CBD5E1;
    font-weight:var(--fw-medium);
}

.footer-contacts a:hover{
    color:#F97316;
}

/* ---------------------- */
/* Socials                */
/* ---------------------- */

.footer-socials-list{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.footer-social-icon,
.footer-social-icon:visited{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:8px;
    background:rgba(255,255,255,.12);
    color:#CBD5E1;
    font-size:18px;
    transition:.2s;
}

a.footer-social-icon:hover{
    background:rgba(255,255,255,.25);
    color:#F97316;
}

/* ---------------------- */
/* Accordion (mobile only, forced open from tablet up) */
/* ---------------------- */

.footer-block-header{
    display:flex;
    width:100%;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    padding:20px 20px 0;
    margin-bottom:12px;
    background:none;
    border:none;
    font-family:var(--font-base);
    font-size:var(--fs-body);
    font-weight:var(--fw-semibold);
    color:#fff;
    cursor:pointer;
}

.footer-toggle-icon{
    font-size:var(--fs-h4);
    line-height:1;
}

.footer-block-content{
    display:none;
    padding:0 20px 20px;
}

.footer-block.open .footer-block-content{
    display:block;
}

/* ---------------------- */
/* Tablet ≥768px — two columns, accordion disabled */
/* ---------------------- */

@media(min-width:768px){

    .footer-container{
        grid-template-columns:1fr 1fr;
        grid-template-areas:
            "brand brand"
            "explore resources"
            "contacts socials"
            "copyright copyright";
        padding:0 32px;
    }

    .footer-block-header{
        cursor:default;
    }

    .footer-toggle-icon{
        display:none;
    }

    .footer-block-content{
        display:block;
    }

}

/* ---------------------- */
/* Desktop ≥1024px — single row + social row underneath */
/* ---------------------- */

@media(min-width:1024px){

    .footer-container{
        grid-template-columns:repeat(4,1fr);
        grid-template-areas:
            "brand explore resources contacts"
            "socials . . ."
            "copyright copyright copyright copyright";
        padding:0 40px;
    }

}

/* ---------------------- */
/* Home template layout   */
/* ---------------------- */

.home-container{
    max-width:1600px;
    margin:auto;
    /* Mobile gutter matches the featured-adventures carousel (.featured-tours-
       carousel padding) so every home content row lines up on phones; the
       768/1024 steps below restore the wider desktop gutter. */
    padding:0 12px;
}

@media(min-width:768px){

    .home-container{
        padding:0 32px;
    }

}

@media(min-width:1024px){

    .home-container{
        padding:0 40px;
    }

}

.home-block{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:280px;
    color:#fff;
    font-size:1.25rem;
    font-weight:700;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.home-block picture{
    display:block;
    width:100%;
    min-width:0;
}

.home-block picture img{
    display:block;
    width:100%;
    height:auto;
}

/* ---------------------- */
/* Hero-1: image + overlay */
/* ---------------------- */

.home-block.hero-1{
    position:relative;
    overflow:hidden;
    min-height:0;
    /* matches mobile_hero_1 image (1200x600); switches to the desktop image's ratio at 1024px, where <picture> swaps sources */
    aspect-ratio:1200/600;
    max-height:600px;
}

.home-block.hero-1 picture{
    position:absolute;
    inset:0;
}

.home-block.hero-1 picture img{
    height:100%;
}

.hero-1-scrim{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(6,10,16,.82) 0%, rgba(6,10,16,.5) 32%, rgba(6,10,16,0) 65%);
    pointer-events:none;
}

.hero-1-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;

    /* Left/right inset comes from the .home-container class on this same
       element (12px mobile, 32/40px from 768px up). */
    padding-top:32px;
    padding-bottom:32px;
}

.hero-1-title{
    font-weight:800;
    text-transform:uppercase;
    line-height:var(--lh-heading);
    color:#fff;
    text-shadow:0 2px 16px rgba(0,0,0,.35);
    font-size:clamp(17px, 5.6vw, 44px);
    white-space:nowrap;
}

.hero-1-description{
    font-family:var(--font-base);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-lead);
    text-transform:none;
    color:rgba(255,255,255,.9);
    /* Wraps on small screens so the line isn't clipped at the viewport edges
       (~412px and below); stays a single line from 768px up where it fits. */
    text-wrap:balance;
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-top:6px;
    padding:14px 28px;
    border-radius:999px;
    border:2px solid transparent;

    background:#38BDF8;
    color:#0F172A;

    font-family:var(--font-base);
    font-weight:var(--fw-extrabold);
    font-size:var(--fs-small);
    text-transform:uppercase;
    letter-spacing:.06em;
    text-decoration:none;

    transition:.2s ease;
}

.btn:hover{
    background:#0EA5E9;
    transform:translateY(-2px);
    box-shadow:0 14px 30px -12px rgba(56,189,248,.6);
}

.btn-outline{
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.75);
}

.btn-outline:hover{
    background:rgba(255,255,255,.14);
    border-color:#fff;
    color:#fff;
    box-shadow:none;
}

@media(min-width:768px){

    .hero-1-overlay{
        padding-top:40px;
        padding-bottom:56px;
        gap:14px;
    }

    .hero-1-title{
        font-size:clamp(40px, 6vw, 56px);
    }

    .hero-1-description{
        white-space:nowrap;
    }

}

@media(min-width:1024px){

    .home-block.hero-1{
        /* matches hero_1 desktop image (1920x720) */
        aspect-ratio:1920/720;
        max-height:720px;
    }

    .hero-1-overlay{
        padding-bottom:72px;
        gap:18px;
    }

    .hero-1-title{
        font-size:clamp(48px, 4.5vw, 64px);
    }

}

/* ---------------------- */
/* Hero-2: image + overlay */
/* ---------------------- */

.home-block.hero-2{
    position:relative;
    overflow:hidden;
    min-height:0;
    /* matches mobile_hero_2 image (1200x500); switches to the desktop image's ratio at 1024px, where <picture> swaps sources */
    aspect-ratio:1200/500;
    max-height:500px;
}

.home-block.hero-2 picture{
    position:absolute;
    inset:0;
}

.home-block.hero-2 picture img{
    height:100%;
}

.hero-2-scrim{
    position:absolute;
    inset:0;
    background:rgba(6,10,16,.5);
    pointer-events:none;
}

.hero-2-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    /* Mobile hero-2 is a short letterbox (1200x500 ratio) — keep the copy
       stack compact so the image stays visible above and below it. The
       768/1024 steps below open the spacing back up. */
    gap:8px;

    padding:18px 20px;
}

.hero-2-title{
    font-weight:800;
    text-transform:uppercase;
    line-height:var(--lh-heading);
    color:#fff;
    text-shadow:0 2px 16px rgba(0,0,0,.35);
    /* Capped lower on mobile than hero-1 so the short letterbox hero isn't
       filled edge to edge; 768px up takes over with the larger clamp. */
    font-size:clamp(15px, 4vw, 22px);
    white-space:nowrap;
}

.hero-2-description{
    font-family:var(--font-base);
    font-weight:var(--fw-semibold);
    /* Smaller + tighter leading on mobile to keep the hero copy compact;
       restored to the lead size / body leading from 768px up. */
    font-size:14px;
    line-height:1.35;
    text-transform:none;
    color:rgba(255,255,255,.9);
    /* Wraps on small screens so the line isn't clipped at the viewport edges
       (~412px and below); stays a single line from 768px up where it fits. */
    text-wrap:balance;
}

/* Compact CTA on the short mobile hero-2 — smaller text and a tighter pill
   than the site default .btn; .btn's full size is restored at 768px up. */
.btn-hero-2{
    margin-top:0;
    gap:6px;
    padding:9px 20px;
    font-size:12px;
    letter-spacing:.04em;
}

.btn-hero-2:hover{
    background:#e67e00;
    box-shadow:0 14px 30px -12px rgba(255,140,0,.6);
}

@media(min-width:768px){

    .hero-2-overlay{
        padding:40px 32px;
        gap:14px;
    }

    .hero-2-title{
        font-size:clamp(32px, 5vw, 44px);
    }

    .hero-2-description{
        font-size:var(--fs-lead);
        line-height:var(--lh-body);
        white-space:nowrap;
    }

    .btn-hero-2{
        margin-top:6px;
        gap:10px;
        padding:14px 28px;
        font-size:var(--fs-small);
        letter-spacing:.06em;
    }

}

@media(min-width:1024px){

    .home-block.hero-2{
        /* matches hero_2 desktop image (1920x560) */
        aspect-ratio:1920/560;
        max-height:560px;
    }

    .hero-2-overlay{
        padding:48px 40px;
        gap:18px;
    }

    .hero-2-title{
        font-size:clamp(36px, 3.6vw, 52px);
    }

}

.js-swiper{
    width:100%;
}

.js-swiper.has-pagination{
    padding-bottom:40px;
}

/* swiper-bundle's default .swiper-slide{width:100%} defeats
   slidesPerView:"auto" (every slide stretches to the full container
   instead of shrink-wrapping its content) — override so slides size to
   whatever width their own content (e.g. a card component) declares. */
.js-swiper .swiper-slide{
    width:auto;
}

/* When slidesPerView:"auto" slides all fit without scrolling, center them
   as a group instead of leaving them flush left. Gated on .swiper-fits
   (js/main.js toggles it from swiper.isLocked) rather than applied
   unconditionally — plain CSS justify-content:center on an overflowing
   swiper-wrapper fights swiper's own translate-based positioning and
   desyncs the visible slide from swiper's active-slide state. */
.js-swiper.swiper-fits .swiper-wrapper{
    justify-content:center;
}

.card{
    background:#fff;
    color:#0F172A;
    border-radius:8px;
    min-height:160px;
    padding:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}

/* ==========================================================================
   Category divs group — @components/groups/category-divs.php
   Wraps the .category-card-grid in the section background from the design
   reference (matches the container that holds the Kayaking/Rafting/etc.
   activity cards) — sits inside .home-block, so it resets the text
   alignment/transform that block imposes for its placeholder sections.

   The section in @templates/home.php has no .home-container of its own
   (unlike the other home sections) so this background runs full viewport
   width; category-divs.php nests its own .home-container around the card
   grid so the cards stay aligned with the header/footer gaps.
   ========================================================================== */

/* .home-block's base rule centers its content in a 280px-min flex box —
   fine for the single-line placeholder sections it was written for, but the
   4-column desktop row here is shorter than 280px, so that centering opened
   up empty space above .category-divs (visible as a gap under the hero).
   Drop back to plain block flow so the card grid sits flush at the top. */
.home-block.home-categories-block{
    display:block;
    min-height:0;
}

/* Same reset as .home-categories-block above — the featured carousel is a
   multi-card row, not the single-line placeholder .home-block was built for.
   Also drop .home-block's uppercase/centered text styling: it was written
   for the placeholder label, but it was leaking into the tour card titles
   and text underneath (neither sets its own text-transform/text-align, so
   they inherited it) — .featured-tours-heading opts back into centering
   for itself alone. */
.home-block.home-featured-block{
    display:block;
    min-height:0;
    text-align:left;
    text-transform:none;
}

.category-divs{
    width:100%;
    padding:32px 0;

    background:#f6f5f2;

    text-align:left;
    text-transform:none;
}

/* ==========================================================================
   Category card — @components/cards/category-card.php
   Text-only card (Kayaking, River Rafting, Treks, ...) used to let visitors
   pick an activity before browsing individual tours.

   Mobile-first: base rules below apply from phone up. The grid wrapper
   (.category-card-grid) shows 2 cards per row on mobile/tablet and steps up
   to 4 per row at 1024px — the card itself doesn't need its own breakpoints,
   the grid tracks size it.
   ========================================================================== */

.category-card{
    display:flex;
    flex-direction:column;
    gap:6px;

    padding:18px 16px 16px;

    background:#fffefb;
    border:1px solid #dcdad4;
    border-radius:3px;

    text-decoration:none;
    cursor:pointer;
}

.category-card:hover{
    border-color:#16191c;
}

.category-card-eyebrow{
    font-family:var(--font-base);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-eyebrow);
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--color-accent-text);
}

.category-card-title{
    font-weight:600;
    font-size:var(--fs-h5);
    letter-spacing:-.01em;
    line-height:1.2;
    color:#16191c;
}

.category-card-description{
    font-family:var(--font-base);
    font-weight:var(--fw-regular);
    font-size:var(--fs-small);
    line-height:1.45;
    color:var(--color-text-muted);
}

/* ---------------------- */
/* Grid wrapper — 2 cards/row on mobile & tablet, 4 cards/row on desktop */
/* ---------------------- */

.category-card-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
}

@media(min-width:1024px){

    .category-card-grid{
        grid-template-columns:repeat(4, 1fr);
        gap:16px;
    }

}

/* ==========================================================================
   About us — @templates/home.php
   Mobile-first: image stacked above the text block, both full width inside
   .home-container. Desktop (1024px) switches to a two-column split (image
   left, copy right) with a navy offset panel behind the photo for a bit of
   editorial depth — the placeholder debug colors this section used to have
   (#0E7490) are gone, this owns the section's real background now.
   ========================================================================== */

.about-us{
    width:100%;
    padding:48px 0;
    background:#F5F1EA;
}

/* This div carries both .home-container and .about-us-container, so the
   padding set here replaces (not adds to) .home-container's own gutter.
   Mobile uses the 12px carousel gutter so this section lines up with the
   other home rows on phones; 768/1024 go back to 52/60 (20px past the
   standard container) so the copy lines up with the footer's actual text
   edge below it — see the .tour-container comment for why that offset
   exists (only .footer-brand keeps .footer-block's own 20px padding). */
.about-us-container{
    display:flex;
    flex-direction:column;
    gap:28px;
    padding:0 12px;
}

.about-us-media{
    position:relative;
}

.about-us-media img{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:16px;
}

.about-us-badge{
    position:absolute;
    z-index:2;
    left:16px;
    bottom:16px;

    padding:8px 14px;
    border-radius:8px;
    background:#0F172A;

    font-family:'Poppins', var(--font-base);
    font-weight:600;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#fff;

    box-shadow:0 10px 24px -8px rgba(15,23,42,.5);
}

.about-us-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    /* Nudge just the copy in from the mobile viewport edges (the image keeps
       the container's own 12px gutter); removed at 768px where the section
       gets its wider padding and a two-column layout. */
    padding:0 7px;
}

.about-us-eyebrow{
    font-family:var(--font-base);
    font-weight:600;
    font-size:var(--fs-eyebrow);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--color-accent-text);
}

.about-us-title{
    margin:0;
}

.about-us-text{
    color:var(--color-text);
}

.about-us-text p+p{
    margin-top:16px;
}

@media(min-width:768px){

    .about-us{
        padding:64px 0;
    }

    .about-us-container{
        gap:36px;
        padding:0 52px;
    }

    .about-us-content{
        padding:0;
    }

    .about-us-badge{
        left:24px;
        bottom:24px;
        padding:10px 18px;
        font-size:12px;
    }

}

@media(min-width:1024px){

    .about-us{
        padding:88px 0;
    }

    .about-us-container{
        display:grid;
        grid-template-columns:5fr 6fr;
        align-items:center;
        gap:72px;
        padding:0 60px;
    }

    /* Offset navy panel behind the photo. Sits on .about-us-media (not the
       img) so it can extend past the image's own box without disturbing the
       aspect-ratio/object-fit sizing above; z-index puts it under the photo
       but above the section background. */
    .about-us-media::before{
        content:"";
        position:absolute;
        z-index:0;
        top:-24px;
        left:-24px;
        right:24px;
        bottom:24px;
        border-radius:16px;
        background:#0F172A;
    }

    .about-us-badge{
        left:32px;
        bottom:32px;
    }

    .about-us-text{
        font-size:var(--fs-h5);
    }

}

/* ==========================================================================
   Breadcrumb — rendered by render_breadcrumb() (@templates/partials/seo.php)
   on the category hero and the tour hero panel, both dark backgrounds.
   Separators are drawn in CSS so the markup stays a plain <ol>.
   ========================================================================== */

.breadcrumb{
    font-weight:var(--fw-semibold);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
}

.breadcrumb ol{
    display:flex;
    flex-wrap:wrap;
    list-style:none;
}

.breadcrumb li+li::before{
    content:"/";
    padding:0 .45em;
}

.breadcrumb-link,
.breadcrumb-link:visited{
    color:rgba(255,255,255,.65);
}

.breadcrumb-link:hover{
    color:#EA580C;
}

/* Sits above the eyebrow inside .tour-hero-panel-inner (gap 20px); pull the
   two closer so the crumb reads as part of the heading block. */
.tour-breadcrumb{
    margin-bottom:-8px;
}

/* ==========================================================================
   Tour template — @templates/tour.php
   Mobile-first: hero stacks image-over-panel on phones and splits into two
   columns at 1024px. Content sections below the hero share one 1140px
   container and alternate a white / tinted-cream background.
   ========================================================================== */

/* Horizontal padding here is 20px more than .home-container's at every
   breakpoint (40/52/60 vs 20/32/40) — .footer-brand is the only footer
   column that keeps .footer-block's own 20px padding (its siblings zero it
   out), so the footer's actual leftmost text sits 20px past the standard
   container edge. Matching that offset here is what lines up tour.php's
   content with the footer text below it, left edge to left edge. */
.tour-container{
    max-width:1600px;
    margin:auto;
    padding:0 40px;
}

@media(min-width:768px){

    .tour-container{
        padding:0 52px;
    }

}

@media(min-width:1024px){

    .tour-container{
        padding:0 60px;
    }

}

/* Phones only: the content sections (overview, itinerary, inc/exc, gallery,
   FAQs — everything wrapped in .tour-section) drop to the hero panel's 20px
   gutter so their text lines up with .tour-hero-panel-inner above and with
   the header/footer text edge on phones. The CTA band isn't a .tour-section and
   keeps the default. */
@media(max-width:767px){

    .tour-section > .tour-container{
        padding:0 20px;
    }

}

.tour-section{
    padding:48px 0;
}

.tour-section-tint{
    background:#F5F1EA;
}

.tour-container h2{
    margin-bottom:24px;
}

@media(min-width:768px){

    .tour-section{
        padding:64px 0;
    }

}

/* ---------------------- */
/* Hero                   */
/* ---------------------- */

.tour-hero{
    display:flex;
    flex-direction:column;
}

.tour-hero-media{
    position:relative;
    overflow:hidden;
    min-height:260px;
}

.tour-hero-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.tour-hero-badge{
    position:absolute;
    left:16px;
    bottom:16px;

    padding:8px 14px;
    border-radius:6px;
    background:#F97316;

    font-family:var(--font-base);
    font-weight:var(--fw-extrabold);
    font-size:12px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#fff;
}

.tour-hero-panel{
    background:#0F172A;
}

.tour-hero-panel-inner{
    padding:32px 20px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.tour-hero-eyebrow{
    font-family:'Poppins', var(--font-base);
    font-weight:600;
    font-size:13px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#F97316;
}

.tour-hero-title{
    font-family:'Poppins', var(--font-base);
    font-weight:800;
    font-size:clamp(28px, 5vw, 42px);
    color:#fff;
}

.tour-hero-description{
    color:rgba(255,255,255,.75);
}

.tour-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.btn-accent{
    background:#F97316;
    color:#fff;
}

.btn-accent:hover{
    background:#E8670F;
    box-shadow:0 14px 30px -12px rgba(249,115,22,.6);
}

.btn-small{
    padding:clamp(5px,1.6vw,10px) clamp(6px,2.4vw,18px);
    font-size:clamp(8.5px,2.2vw,12px);
    white-space:nowrap;
}

.tour-hero-actions .btn,
.tour-departure-actions .btn,
.tour-cta .btn{
    border-radius:8px;
}

.tour-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:clamp(6px,2vw,16px);
    width:100%;

    padding:clamp(10px,2.5vw,20px);
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
}

.tour-stat{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.tour-stat-label{
    font-size:clamp(8px,2vw,11px);
    font-weight:var(--fw-bold);
    letter-spacing:0;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}

.tour-stat-value{
    font-size:clamp(10.5px,2.9vw,16px);
    font-weight:var(--fw-bold);
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}

.tour-price{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:8px;
}

.tour-price-amount{
    font-family:'Poppins', var(--font-base);
    font-weight:800;
    font-size:var(--fs-h2);
    color:#fff;
}

.tour-price-unit{
    color:rgba(255,255,255,.6);
}

.tour-price-note{
    flex-basis:100%;
    font-size:12px;
    font-style:italic;
    color:rgba(255,255,255,.45);
}

.tour-departure{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:clamp(4px,2vw,16px);
    width:100%;

    padding:clamp(6px,2.5vw,20px);
    border-radius:12px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
}

.tour-departure-info{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.tour-departure-label{
    font-family:var(--font-base);
    font-size:clamp(8px,2vw,11px);
    color:rgb(255, 157, 110);
    text-transform:uppercase;
    letter-spacing:0.3px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}

.tour-departure-date{
    font-weight:var(--fw-bold);
    font-size:clamp(10px,3vw,var(--fs-h5));
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}

.tour-departure-seats{
    font-size:clamp(9.5px,2.2vw,13px);
    color:rgba(255,255,255,.6);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}

.tour-departure-seats.tour-departure-soldout{
    color:#ff6b6b;
    font-weight:700;
    letter-spacing:.3px;
}

.tour-departure-discount{
    flex-basis:100%;
    width:100%;
    order:1;

    margin-top:clamp(4px,1.5vw,10px);
    padding-top:clamp(6px,1.8vw,12px);
    border-top:1px solid rgba(255,255,255,.12);

    font-size:clamp(10px,2.4vw,13px);
    font-weight:700;
    color:#ffd23f;
    text-align:left;
}

.tour-departure-discount[hidden]{
    display:none;
}

.tour-departure-actions{
    display:flex;
    flex-wrap:nowrap;
    flex:0 0 auto;
    gap:clamp(4px,1.5vw,12px);
}

/* ---- Departure picker modal (mobile-first) ---- */

.departure-modal-overlay{
    position:fixed;
    inset:0;
    z-index:1000;

    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow-y:auto;

    padding:32px 10px;
    background:rgba(6,10,16,.6);
}

.departure-modal-overlay[hidden]{
    display:none;
}

.departure-modal{
    position:relative;
    width:100%;
    max-width:680px;
    margin:auto;

    background:#fff;
    border-radius:16px;
    padding:22px 12px;
    box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
}

.departure-modal-close{
    position:absolute;
    top:12px;
    right:12px;

    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:none;
    border:none;
    font-size:22px;
    line-height:1;
    color:#666;
    cursor:pointer;
}

.departure-modal-close:hover{
    color:#111;
}

.departure-modal-title{
    font-size:var(--fs-h5);
    margin-bottom:14px;
    padding-right:28px;
}

.departure-table{
    display:flex;
    flex-direction:column;

    border:1px solid #e2e2e2;
    border-radius:12px;
    overflow:hidden;
}

/* Every row — header and options — shares the SAME fixed column tracks so the
   headings and the data below them line up as a real table, on mobile and
   desktop alike. Tracks must be length/fr (not content-based), otherwise each
   independent row grid would size its columns differently and drift. */
.departure-row{
    display:grid;
    grid-template-columns:5.4rem 2.9rem 3.6rem minmax(0,1fr);
    align-items:center;
    gap:6px;
    width:100%;

    padding:10px 9px;
    border:none;
    border-bottom:1px solid #ececec;
    background:#fff;

    font-family:var(--font-base);
    font-size:clamp(11px,3vw,13px);
    color:#111;
    text-align:left;
    cursor:pointer;

    transition:background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.departure-row:last-child{
    border-bottom:none;
}

.departure-row:hover,
.departure-row:focus-visible{
    background:#f0f9ff;
    box-shadow:inset 3px 0 0 #38BDF8;
    outline:none;
}

.departure-row:active{
    transform:scale(.997);
}

/* Sold-out departures are shown for context but cannot be picked */
.departure-row-soldout,
.departure-row-soldout:hover,
.departure-row-soldout:focus-visible{
    background:#fafafa;
    color:#9a9a9a;
    box-shadow:none;
    cursor:not-allowed;
    transform:none;
}

.departure-row-soldout .departure-cell[data-label="Deal"]{
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    color:#c94b4b;
}

.departure-row-head{
    background:#f6f6f6;
    font-size:clamp(8.5px,2.4vw,10.5px);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0;
    color:#555;
    cursor:default;
}

.departure-row-head:hover{
    background:#f6f6f6;
    box-shadow:none;
}

.departure-cell{
    min-width:0;
    overflow-wrap:anywhere;
}

/* Departure / Booked / Available keep to their own width and never wrap;
   only the Deal column (4th) flexes and wraps. */
.departure-row > .departure-cell:nth-child(1),
.departure-row > .departure-cell:nth-child(2),
.departure-row > .departure-cell:nth-child(3){
    white-space:nowrap;
}

/* Booked + Available are single numbers — centre them under their headings */
.departure-row > .departure-cell:nth-child(2),
.departure-row > .departure-cell:nth-child(3){
    text-align:center;
}

.departure-cell[data-label]::before{
    display:none;
}

.departure-cell-date{
    font-weight:700;
}

@media(min-width:1024px){

    .tour-hero{
        flex-direction:row;
    }

    .tour-hero-media,
    .tour-hero-panel{
        width:50%;
    }

    .tour-hero-media{
        min-height:auto;
    }

    .tour-hero-panel{
        display:flex;
        align-items:center;
    }

    .tour-hero-panel-inner{
        width:100%;
        padding:56px 48px;
        gap:24px;
    }


}

/* ---------------------- */
/* Overview                */
/* ---------------------- */

.tour-overview-text p+p,
.tour-overview-text p+ul,
.tour-overview-text ul+p{
    margin-top:16px;
}

.tour-overview-text h3{
    margin-top:32px;
    font-size:var(--fs-h4);
}

.tour-overview-text h3+p,
.tour-overview-text h3+ul{
    margin-top:8px;
}

.tour-overview-text li{
    margin-left:18px;
    list-style:disc;
}

/* ---------------------- */
/* Detailed itinerary — numbered timeline */
/* ---------------------- */

.tour-itinerary-day{
    position:relative;
    display:flex;
    gap:20px;
    padding-bottom:32px;
}

.tour-itinerary-day:last-child{
    padding-bottom:0;
}

.tour-itinerary-day:not(:last-child)::before{
    content:"";
    position:absolute;
    left:19px;
    top:40px;
    bottom:0;
    width:1px;
    background:#E5E7EB;
}

.tour-itinerary-index{
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:#0F172A;
    color:#fff;
    font-weight:var(--fw-bold);
    font-size:13px;
}

.tour-itinerary-body h3{
    font-size:var(--fs-h4);
    font-weight:var(--fw-semibold);
    letter-spacing:0;
    margin-bottom:6px;
}

/* ---------------------- */
/* Inclusions / Exclusions */
/* ---------------------- */

.tour-inc-exc{
    display:grid;
    grid-template-columns:1fr;
    gap:32px;
}

.tour-inc-exc-col h3{
    margin-bottom:16px;
}

.tour-inc-list li,
.tour-exc-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:8px 0;
    padding-left:20px;
}

.tour-inc-icon{
    color:#16A34A;
    font-weight:var(--fw-bold);
}

.tour-exc-icon{
    color:#DC2626;
    font-weight:var(--fw-bold);
}

@media(min-width:768px){

    .tour-inc-exc{
        grid-template-columns:1fr 1fr;
    }

}

/* ---------------------- */
/* Image gallery           */
/* ---------------------- */

.tour-gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.tour-gallery-item{
    display:block;
    aspect-ratio:1;
    border-radius:10px;
    overflow:hidden;
}

.tour-gallery-item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.2s ease;
}

.tour-gallery-item:hover img{
    transform:scale(1.05);
}

@media(min-width:640px){

    .tour-gallery{
        grid-template-columns:repeat(4,1fr);
    }

}

@media(min-width:1024px){

    .tour-gallery{
        grid-template-columns:repeat(7,1fr);
        gap:16px;
    }

}

/* ---------------------- */
/* Enquire CTA band        */
/* ---------------------- */

.tour-cta{
    padding:56px 0;
    background:#0F172A;
    text-align:center;
}

.tour-cta-title{
    color:#fff;
}

.tour-cta-subtitle{
    margin-top:8px;
    margin-bottom:24px;
    color:rgba(255,255,255,.65);
}

/* ---------------------- */
/* FAQ accordion           */
/* ---------------------- */

.tour-faq-item{
    border-bottom:1px solid rgb(228, 224, 216);
}

.tour-faq-question{
    display:flex;
    width:100%;
    justify-content:space-between;
    align-items:center;
    gap:12px;

    padding:20px 0;
    background:none;
    border:none;
    text-align:left;
    cursor:pointer;

    font-family:var(--font-base);
    font-size:var(--fs-body);
    font-weight:var(--fw-bold);
    color:#111;
}

.tour-faq-chevron{
    flex:none;
    color:#F97316;
    transition:transform .2s ease;
}

.tour-faq-item.open .tour-faq-chevron{
    transform:rotate(180deg);
}

.tour-faq-answer{
    display:none;
    padding-left:20px;
    padding-bottom:20px;
    color:#444;
}

.tour-faq-item.open .tour-faq-answer{
    display:block;
}

.tour-faq-answer li{
    margin-left:18px;
    list-style:disc;
}

.tour-faq-answer p+p,
.tour-faq-answer p+ul,
.tour-faq-answer ul+p{
    margin-top:12px;
}

/* ==========================================================================
   Query Form Modal
   Shared modal injected once in index.php, opened via displayQueryForm()
   from CTAs across the site.
   ========================================================================== */

.query-form-overlay{
    position:fixed;
    inset:0;
    z-index:1000;

    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow-y:auto;

    padding:32px 16px;
    background:rgba(6,10,16,.6);
}

.query-form-overlay[hidden]{
    display:none;
}

body.query-form-open{
    overflow:hidden;
}

.query-form-modal{
    position:relative;
    width:100%;
    max-width:420px;
    margin:auto;

    background:#fff;
    border-radius:16px;
    padding:28px 24px;
    box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
}

.query-form-close{
    position:absolute;
    top:14px;
    right:14px;

    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:none;
    border:none;
    font-size:22px;
    line-height:1;
    color:#666;
    cursor:pointer;
}

.query-form-close:hover{
    color:#111;
}

.query-form-title{
    font-size:var(--fs-h4);
    margin-bottom:6px;
    padding-right:24px;
}

.query-form-departure-info{
    font-size:var(--fs-small);
    color:#555;
    margin-bottom:18px;
}

.query-form-field{
    margin-bottom:14px;
}

.query-form-field input,
.query-form-field textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid #ddd;
    border-radius:10px;

    font-family:var(--font-base);
    font-size:var(--fs-body);
    color:#111;
}

.query-form-field input:focus,
.query-form-field textarea:focus{
    outline:2px solid #0284C7;
    outline-offset:1px;
    border-color:#38BDF8;
}

/* Read-only "Selected tour" — shown only when the form is opened from a
   specific tour (see displayQueryForm()); fixed, not editable. */
.query-form-tour-label{
    display:block;
    font-size:11px;
    font-weight:var(--fw-bold);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#8A8F98;
    margin-bottom:5px;
}

.query-form-field input[readonly]{
    background:#F4F3F0;
    border-color:#E4E2DC;
    font-weight:var(--fw-semibold);
    cursor:default;
}

.query-form-field input[readonly]:focus{
    outline:none;
    border-color:#E4E2DC;
}

.query-form-field textarea{
    resize:vertical;
}

.query-form-submit{
    width:100%;
    border-radius:10px;
    padding:14px;
    font-size:var(--fs-small);
}

.query-form-response{
    text-align:center;
    padding:16px 0 4px;
}

.query-form-response-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    margin-bottom:16px;

    border-radius:50%;
    background:rgba(56,189,248,.15);
    color:#0EA5E9;
    font-size:24px;
}

.query-form-response.is-error .query-form-response-icon{
    background:rgba(249,115,22,.15);
    color:#F97316;
}

.query-form-response-message{
    color:#333;
    margin-bottom:20px;
}

.query-form-response-close{
    border-radius:10px;
    padding:12px 28px;
    font-size:var(--fs-small);
}

/* ==========================================================================
   Tour card — @components/cards/tour-card.php
   Quick-view card for a single tour product (image, category, duration,
   title, one-liner, next departure, from-price). The whole card is the
   click target — no separate CTA button.

   No fixed width here on purpose: the card fills whatever column a grid or
   carousel wrapper gives it (single card on mobile, up to 3-4 columns on
   desktop) — same convention as .category-card.
   ========================================================================== */

.tour-card{
    display:flex;
    flex-direction:column;

    background:#fffefb;
    border:1px solid #dcdad4;
    border-radius:3px;
    overflow:hidden;

    text-decoration:none;
    cursor:pointer;
    transition:border-color .18s ease, transform .18s ease;
}

.tour-card:hover{
    border-color:#16191c;
    transform:translateY(-3px);
}

.tour-card-image{
    position:relative;
    aspect-ratio:1.6/1;
    overflow:hidden;

    background:#dcdad4;
}

.tour-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.tour-card-badge-category{
    position:absolute;
    top:0;
    left:0;

    padding:6px 10px;

    background:#16191c;
    color:#f6f5f2;

    font-family:var(--font-base);
    font-weight:var(--fw-regular);
    font-size:var(--fs-eyebrow);
    letter-spacing:.16em;
    text-transform:uppercase;
}

.tour-card-badge-duration{
    position:absolute;
    bottom:0;
    right:0;

    padding:6px 10px;

    background:rgba(246,245,242,.94);
    color:#16191c;

    font-family:var(--font-base);
    font-weight:600;
    font-size:var(--fs-eyebrow);
    letter-spacing:.08em;
    text-transform:uppercase;
}

.tour-card-content{
    display:flex;
    flex-direction:column;
    gap:9px;
    flex:1;

    padding:16px 16px 14px;
}

.tour-card-title{
    font-weight:600;
    font-size:var(--fs-h5);
    line-height:1.22;
    letter-spacing:-.015em;
    color:#16191c;
    margin:0;
}

.tour-card-text{
    font-family:var(--font-base);
    font-weight:var(--fw-regular);
    font-size:var(--fs-small);
    line-height:1.5;
    color:var(--color-text-muted);
    margin:0;
}

.tour-card-meta{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;

    margin-top:auto;
    padding-top:12px;
    border-top:1px solid #e6e4de;
}

.tour-card-departure,
.tour-card-price{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.tour-card-price{
    align-items:flex-end;
    text-align:right;
}

.tour-card-meta-label{
    font-family:var(--font-base);
    font-weight:var(--fw-regular);
    font-size:var(--fs-eyebrow);
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--color-text-muted);
}

.tour-card-departure .tour-card-meta-value{
    font-family:var(--font-base);
    font-weight:600;
    font-size:var(--fs-small);
    color:#16191c;
}

.tour-card-price .tour-card-meta-value{
    font-family:var(--font-base);
    font-weight:600;
    font-size:var(--fs-h5);
    line-height:1.1;
    letter-spacing:-.01em;
    color:var(--color-accent-text);
}

/* ==========================================================================
   Featured tours carousel — @components/carousels/featured-tours-carousel.php
   Mobile/tablet: a "peek" carousel — cards start flush left and the next
   card shows ~15% of itself at the right edge, so slides are sized in vw
   (not %) to avoid the circular percentage-of-auto-width problem: the slide
   shrink-wraps its card via slidesPerView:"auto", so the card can't size
   itself as a % of that same slide. A couple of px of edge padding keep the
   card border/shadow off the viewport edge without reintroducing a real
   margin. Desktop drops the peek entirely — slidesPerView switches to a
   fixed card count (see the PHP) and the row centers in a max-width rail
   like the rest of the home sections, with prev/next arrows instead.
   ========================================================================== */

.featured-tours-carousel{
    width:100%;
    padding:32px 12px 32px;
}

.featured-tours-heading{
    text-align:center;
    margin:0 0 20px;
}

.featured-tours-carousel .tour-card{
    width:85vw;
}

.featured-tours-carousel .swiper-button-prev,
.featured-tours-carousel .swiper-button-next{
    display:none;
}

/* Dots — mobile/tablet only (see the display:none above for the arrows
   they stand in for there, and the display:none below for these once the
   arrows take back over at desktop). Colors pull from the site's own
   palette rather than swiper-bundle's default theme blue. */
.featured-tours-carousel .js-swiper{
    /* swiper-bundle's own .swiper rule clips at its padding edge (overflow:
       hidden's clip box includes padding, excludes only the border) — this
       reserves a buffer above the row so .tour-card:hover's translateY(-3px)
       lift has room to rise into without its top border (and the sliver of
       card above it) getting sliced off by that clip. Same fix applied to
       .testimonial-carousel .js-swiper further down this file. */
    padding-top:8px;

    --swiper-pagination-color:#16191c;
    --swiper-pagination-bullet-inactive-color:#c7c4bb;
    --swiper-pagination-bullet-inactive-opacity:1;
}

@media(min-width:768px){

    .featured-tours-carousel{
        padding:40px 20px 40px;
    }

    .featured-tours-heading{
        margin-bottom:24px;
    }

    .featured-tours-carousel .tour-card{
        width:44vw;
    }

}

@media(min-width:1024px){

    .featured-tours-carousel{
        max-width:1600px;
        margin:auto;
        padding:48px 40px 56px;
    }

    .featured-tours-heading{
        margin-bottom:32px;
    }

    .featured-tours-carousel .tour-card{
        width:auto;
    }

    /* Arrows need to live outside the area Swiper clips, not just outside
       the visible cards. Padding on .js-swiper doesn't do that: Swiper's
       overflow:hidden clips at the element's own border edge, which still
       includes its padding, so an off-screen card can render into that
       "gutter" and sit under the arrow (confirmed by inspecting the
       rendered slide rects — the next card's box started under the arrow
       even with padding reserved for it). A margin instead of padding
       actually narrows the clipped box itself, so nothing can bleed past
       it. The margin box, though, is no help for the arrows — .swiper-
       button-prev/next are positioned relative to their nearest positioned
       ancestor, which by default is .swiper itself (clipped again). Opting
       .swiper out of that (position:static) lets them fall back to
       .featured-tours-carousel-track — same height as the swiper, not
       clipped — so left/right position them in the real margin gutter. */
    .featured-tours-carousel-track{
        position:relative;
    }

    .featured-tours-carousel .js-swiper{
        width:auto;
        margin:0 64px;
        position:static;
    }

    .featured-tours-carousel .swiper-button-prev,
    .featured-tours-carousel .swiper-button-next{
        display:flex;
    }

    .featured-tours-carousel .swiper-button-prev{
        left:8px;
    }

    .featured-tours-carousel .swiper-button-next{
        right:8px;
    }

    /* Swiper already toggles .swiper-button-disabled + pointer-events:none
       at the start/end (nothing to wire up), but its default treatment —
       opacity:.35 on the same theme-blue icon — reads as "still enabled,
       just faint" against a photo, not "can't click this". Push it to a
       flat, desaturated gray so the disabled state can't be mistaken for
       an active one. */
    .featured-tours-carousel .swiper-button-disabled{
        color:#c7c4bb;
        opacity:1;
        cursor:not-allowed;
    }

    /* Dots are the mobile/tablet affordance; arrows cover it here, so free
       the bottom padding .has-pagination reserved for them. */
    .featured-tours-carousel .js-swiper.has-pagination{
        padding-bottom:0;
    }

    .featured-tours-carousel .swiper-pagination{
        display:none;
    }

}

/* ==========================================================================
   Testimonial card — @components/cards/testimonial-card.php
   Customer review pulled from Google/Facebook/Tripadvisor (reviewer photo
   or initials, source badge, star rating, review text). Meant to sit in a
   grid/carousel inside a white/light section — same "no fixed width, no
   own breakpoints" convention as .tour-card/.category-card.

   Message text is clamped to 5 lines so cards stay a consistent height in a
   row — reviews vary a lot in length and there's no "read more" affordance
   here (keeps the card a single static click target, same as .tour-card).
   ========================================================================== */

.testimonial-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:14px;

    background:#fffefb;
    border:1px solid #dcdad4;
    border-radius:3px;
    padding:20px 20px 18px;

    overflow:hidden;
}

a.testimonial-card{
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:border-color .18s ease, transform .18s ease;
}

a.testimonial-card:hover{
    border-color:#16191c;
    transform:translateY(-3px);
}

.testimonial-card-quote-mark{
    position:absolute;
    top:-14px;
    right:10px;
    z-index:0;

    font-family:var(--font-heading);
    font-size:76px;
    line-height:1;
    color:rgba(160, 98, 31, .14);

    user-select:none;
    pointer-events:none;
}

.testimonial-card-header{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:12px;
}

.testimonial-card-avatar{
    position:relative;
    flex:0 0 auto;
    width:52px;
    height:52px;
}

.testimonial-card-avatar img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    display:block;
    background:#dcdad4;
}

.testimonial-card-avatar-initials{
    width:100%;
    height:100%;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;

    background:#16191c;
    color:#f6f5f2;

    font-family:var(--font-base);
    font-weight:600;
    font-size:16px;
    letter-spacing:.02em;
}

.testimonial-card-source-badge{
    position:absolute;
    right:-3px;
    bottom:-3px;
    width:20px;
    height:20px;
    border-radius:50%;

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

    background:#fff;
    box-shadow:0 0 0 2px #fffefb, 0 0 0 3px #dcdad4;
}

.testimonial-card-source-badge img{
    width:20px;
    height:20px;
    object-fit:contain;
    display:block;
}

.testimonial-card-identity{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.testimonial-card-name{
    font-weight:600;
    font-size:var(--fs-small);
    color:#16191c;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.testimonial-card-about{
    font-family:var(--font-base);
    font-weight:var(--fw-regular);
    font-size:12px;
    color:var(--color-text-muted);
}

.testimonial-card-rating-row{
    position:relative;
    z-index:1;
    /* .testimonial-card's own flex gap (14px) fits the header-to-stars
       spacing but leaves the message sitting too far below the stars —
       pull just that gap in instead of shrinking the gap globally. */
    margin-bottom:-6px;
}

.testimonial-card-rating{
    letter-spacing:0px;
    font-size:21px;
    line-height:1;
}

.testimonial-card-star{
    color:#dcdad4;
}

.testimonial-card-star.is-filled{
    color:#fcbf02;
}

.testimonial-card-message{
    position:relative;
    z-index:1;
    margin:0;
    margin-top:-5px;

    font-family:var(--font-base);
    font-weight:var(--fw-regular);
    font-size:var(--fs-small);
    line-height:1.55;
    color:var(--color-text);

    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.testimonial-card-grid{
    display:grid;
    grid-template-columns:repeat(1, 1fr);
    gap:14px;
}

@media(min-width:768px){

    .testimonial-card-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:16px;
    }

}

@media(min-width:1024px){

    .testimonial-card-grid{
        grid-template-columns:repeat(3, 1fr);
        gap:20px;
    }

}

/* ==========================================================================
   Testimonials section — @templates/home.php
   Full-viewport tint (same convention as .category-divs) wrapping the
   heading + @components/carousels/testimonial-carousel.php, both aligned to
   the header/footer gaps via .home-container.
   ========================================================================== */

.testimonials{
    width:100%;
    padding:32px 0;
    background:#fff;
}

.testimonials-heading{
    text-align:center;
    margin:0 0 20px;
}

@media(min-width:768px){

    .testimonials{
        padding:40px 0;
    }

    .testimonials-heading{
        margin-bottom:24px;
    }

}

@media(min-width:1024px){

    .testimonials{
        padding:48px 0;
    }

    .testimonials-heading{
        margin-bottom:32px;
    }

}

/* ==========================================================================
   Testimonial carousel — @components/carousels/testimonial-carousel.php
   One .testimonial-card per slide, 2/3/4/5 up as the viewport grows (see the
   breakpoints in the PHP). Unlike .featured-tours-carousel this shows both
   arrows AND dots on every breakpoint — there's no "peek" layout here to
   act as its own mobile paging hint, so the arrows have to carry that job
   from the smallest screens up.

   Arrows are a light disc with a visible drop shadow — the same "floating
   chip" treatment as the reviews widget arrows on the current live site —
   rather than swiper-bundle's bare theme-blue glyphs.

   swiper-bundle's own .swiper rule is `position:relative; overflow:hidden`,
   so it's both the containing block AND the clip box for its two button
   children. Any negative left/right pushing a button outside that box got
   clipped by the same overflow:hidden that hides off-screen slides — visible
   as the buttons getting cut off at the carousel's edge on both sides.
   Dropping .js-swiper to position:static removes it as the containing
   block, so the buttons' left/right resolve against the next positioned
   ancestor up — .testimonial-carousel-track below, which has no overflow
   set — and they're no longer clipped. (Slides themselves are unaffected:
   they're normal-flow children, not absolutely positioned, so their
   clipping is plain DOM containment, not this containing-block lookup.)
   Same technique @components/carousels/featured-tours-carousel.php uses,
   just needed here on every breakpoint since these arrows show on all of
   them, not just desktop.

   .testimonial-carousel-track carries its own left/right padding so the
   card row (the swiper, a normal-flow child) renders narrower than the
   track — that reserves a gutter the arrows mostly live in. The arrows
   themselves are absolutely positioned against the track's padding box
   (unaffected by the track's own padding, since that only insets normal-
   flow content), so a small, deliberately fixed -2px offset only lets them
   dip slightly past the card row's edge instead of sitting half over it —
   before this padding existed that same offset put roughly half the arrow
   on top of the card, covering its text, worst on the narrow mobile cards. */

.testimonial-carousel .js-swiper{
    position:static;
    /* swiper-bundle's own .swiper rule clips at its padding edge (overflow:
       hidden's clip box includes padding, excludes only the border) — this
       reserves a buffer above the row so a.testimonial-card:hover's
       translateY(-3px) lift has room to rise into without its top border
       (and the sliver of card above it) getting sliced off by that clip.
       Same reasoning the codebase already applies at the bottom for dots,
       see .js-swiper.has-pagination's padding-bottom further up this file. */
    padding-top:8px;

    --swiper-pagination-color:#16191c;
    --swiper-pagination-bullet-inactive-color:#c7c4bb;
    --swiper-pagination-bullet-inactive-opacity:1;
}

.testimonial-carousel-track{
    position:relative;
    padding:0 26px;
}

.testimonial-carousel-track .swiper-button-prev,
.testimonial-carousel-track .swiper-button-next{
    width:36px;
    height:36px;

    background:#fff;
    border-radius:50%;
    box-shadow:0 3px 10px rgba(22,25,28,.25), 0 0 0 1px rgba(22,25,28,.04);
    color:#4b5563;

    transition:background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.testimonial-carousel-track .swiper-button-prev svg,
.testimonial-carousel-track .swiper-button-next svg{
    width:15px;
    height:15px;
}

.testimonial-carousel-track .swiper-button-prev{
    left:-2px;
}

.testimonial-carousel-track .swiper-button-next{
    right:-2px;
}

.testimonial-carousel-track .swiper-button-prev:hover,
.testimonial-carousel-track .swiper-button-next:hover{
    background:#16191c;
    color:#fffefb;
    box-shadow:0 5px 14px rgba(22,25,28,.35), 0 0 0 1px rgba(22,25,28,.04);
    transform:scale(1.08);
}

.testimonial-carousel-track .swiper-button-disabled{
    background:#fff;
    color:#c7c4bb;
    box-shadow:0 2px 6px rgba(22,25,28,.12);
    cursor:not-allowed;
}

.testimonial-carousel-track .swiper-button-disabled:hover{
    background:#fff;
    color:#c7c4bb;
    box-shadow:0 2px 6px rgba(22,25,28,.12);
    transform:none;
}

@media(min-width:768px){

    .testimonial-carousel-track{
        padding:0 30px;
    }

    .testimonial-carousel-track .swiper-button-prev,
    .testimonial-carousel-track .swiper-button-next{
        width:40px;
        height:40px;
    }

}

@media(min-width:1024px){

    .testimonial-carousel-track{
        padding:0 36px;
    }

    .testimonial-carousel-track .swiper-button-prev,
    .testimonial-carousel-track .swiper-button-next{
        width:46px;
        height:46px;
    }

    .testimonial-carousel-track .swiper-button-prev svg,
    .testimonial-carousel-track .swiper-button-next svg{
        width:17px;
        height:17px;
    }

}

/* Two cards per row at mobile widths needs a tighter card than the default
   @components/cards/testimonial-card.php sizing — scoped to this carousel
   only, the standalone .testimonial-card-grid usage keeps full size. */
@media(max-width:767px){

    .testimonial-carousel-track .testimonial-card{
        gap:10px;
        padding:14px 14px 12px;
    }

    .testimonial-carousel-track .testimonial-card-avatar{
        width:38px;
        height:38px;
    }

    .testimonial-carousel-track .testimonial-card-avatar-initials{
        font-size:13px;
    }

    .testimonial-carousel-track .testimonial-card-name{
        font-size:13px;
    }

    .testimonial-carousel-track .testimonial-card-about{
        font-size:11px;
    }

    .testimonial-carousel-track .testimonial-card-rating{
        font-size:18px;
    }

    .testimonial-carousel-track .testimonial-card-message{
        font-size:var(--fs-small);
        -webkit-line-clamp:4;
    }

    .testimonial-carousel-track .testimonial-card-quote-mark{
        font-size:52px;
        top:-8px;
        right:6px;
    }

}

/* ==========================================================================
   Category template — @templates/category.php
   Mobile-first: hero is image + full scrim with breadcrumb/title/description/
   stat-strip stacked left-aligned (content-driven height, no fixed banner
   ratio — unlike hero-1/hero-2 this section carries a variable amount of
   copy). Sections below alternate a white / tinted-cream background, same
   convention as @templates/tour.php's .tour-section/.tour-section-tint —
   and use the same .category-container gutter as .tour-container (20px
   more than .home-container at 768px+) so this template's left edge lines
   up with the footer's actual text edge, same reasoning as the comment on
   .tour-container above. Exception: below 768px the gutter is deliberately
   narrower (20px) and matches the phone header/footer text edge, giving the
   content more width on small phones.
   ========================================================================== */

.category-container{
    max-width:1600px;
    margin:auto;
    padding:0 20px;
}

@media(min-width:768px){

    .category-container{
        padding:0 52px;
    }

}

@media(min-width:1024px){

    .category-container{
        padding:0 60px;
    }

}

.category-hero{
    position:relative;
    overflow:hidden;
    color:#fff;
}

.category-hero picture{
    position:absolute;
    inset:0;
}

.category-hero picture img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.category-hero-scrim{
    position:absolute;
    inset:0;
    background:rgba(6,10,16,.68);
}

.category-hero-content{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.category-hero-content.category-container{
    padding-top:32px;
    padding-bottom:28px;
}

.category-hero-title{
    font-family:'Poppins', var(--font-base);
    color:#fff;
}

.category-hero-description{
    max-width:640px;
    color:rgba(255,255,255,.85);
}

.category-stats{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:18px 28px;

    margin-top:8px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.25);
}

.category-stat{
    display:flex;
    flex:0 0 auto;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.category-stat-value{
    font-family:'Poppins', var(--font-base);
    font-weight:600;
    font-size:clamp(16px,4vw,20px);
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.category-stat-label{
    font-size:10.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.6);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media(min-width:768px){

    .category-hero-content.category-container{
        padding-top:44px;
        padding-bottom:40px;
        gap:16px;
    }

    .category-stats{
        gap:20px 36px;
    }

    .category-stat-value{
        font-size:22px;
    }

}

@media(min-width:1024px){

    .category-hero-content.category-container{
        padding-top:64px;
        padding-bottom:56px;
        gap:18px;
    }

    .category-stat-value{
        font-size:24px;
    }

}

/* ---------------------- */
/* Section rhythm — same alternating tint convention as .tour-section       */
/* ---------------------- */

.category-section{
    padding:28px 0;
    background:#f6f5f2;
}

.category-section-tint{
    background:#f6f5f2;
}

@media(min-width:768px){

    .category-section{
        padding:40px 0;
    }

}

@media(min-width:1024px){

    .category-section{
        padding:56px 0;
    }

}

/* ---------------------- */
/* Intro — overview copy + "who these trips are for" tag cards              */
/* ---------------------- */

.category-intro{
    display:flex;
    flex-direction:column;
    gap:36px;
}

.category-overview-text{
    margin-top:14px;
    font-weight:var(--fw-regular);
}

.category-overview-text b,
.category-overview-text strong{
    font-weight:var(--fw-regular);
}

.category-overview-text p+p{
    margin-top:16px;
}

.category-suitability h2{
    margin:0;
}

.category-tag-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:16px;
}

.category-tag-card{
    display:flex;
    gap:14px;
    align-items:flex-start;

    padding:16px 18px;
    background:#fffefb;
    border:1px solid #dcdad4;
    border-radius:8px;
}

.category-tag{
    flex:0 0 76px;
    font-family:'Poppins', var(--font-base);
    font-weight:700;
    font-size:13px;
    line-height:1.3;
    color:#a0621f;
}

.category-tag-text{
    margin:0;
    font-weight:var(--fw-regular);
    color:#3f434a;
    font-size:14px;
    line-height:1.5;
}

@media(min-width:1024px){

    .category-intro{
        display:grid;
        grid-template-columns:1.1fr 1fr;
        gap:64px;
        align-items:start;
    }

}

/* ---------------------- */
/* Tour carousel                                                            */
/* ---------------------- */

.category-carousel-header{
    padding-bottom:14px;
    margin-bottom:24px;
    border-bottom:1px solid #dcdad4;
}

.category-carousel-subtext{
    margin-top:6px;
    color:#6d7278;
    font-size:13px;
}

/* Styling + navigation here mirror .featured-tours-carousel exactly (see that
   block earlier in this file, and @components/carousels/featured-tours-carousel.php):
   a "peek" carousel with dots and no arrows on mobile/tablet, switching at
   desktop to a fixed card count with prev/next arrows in a margin gutter and
   the dots hidden. Keep the two in sync.
   Difference from the featured carousel: this one sits inside .category-container
   (padding 20/52px each side on mobile/tablet), not full-bleed like the home
   section. A bare 85vw/44vw slide is then wider than — or level with — the
   padded swiper, so the next card never peeks. Subtract the container gutter
   from the viewport first, then take the same 85% / 44% of what's left, so the
   peek proportion matches home. */
.category-carousel-track .tour-card{
    width:calc((100vw - 40px) * .85);
}

.category-carousel-track .swiper-button-prev,
.category-carousel-track .swiper-button-next{
    display:none;
}

.category-carousel-track .js-swiper{
    padding-top:8px;

    --swiper-pagination-color:#16191c;
    --swiper-pagination-bullet-inactive-color:#c7c4bb;
    --swiper-pagination-bullet-inactive-opacity:1;
}

@media(min-width:768px){

    .category-carousel-track .tour-card{
        width:calc((100vw - 104px) * .44);
    }

}

@media(min-width:1024px){

    .category-carousel-track{
        position:relative;
    }

    .category-carousel-track .tour-card{
        width:auto;
    }

    .category-carousel-track .js-swiper{
        width:auto;
        margin:0 64px;
        position:static;
    }

    .category-carousel-track .swiper-button-prev,
    .category-carousel-track .swiper-button-next{
        display:flex;
    }

    .category-carousel-track .swiper-button-prev{
        left:8px;
    }

    .category-carousel-track .swiper-button-next{
        right:8px;
    }

    .category-carousel-track .swiper-button-disabled{
        color:#c7c4bb;
        opacity:1;
        cursor:not-allowed;
    }

    .category-carousel-track .js-swiper.has-pagination{
        padding-bottom:0;
    }

    .category-carousel-track .swiper-pagination{
        display:none;
    }

}

/* ---------------------- */
/* Season strip                                                             */
/* ---------------------- */

.category-season-strip{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    background:#fffefb;
    border:1px solid #dcdad4;
    border-radius:8px;
}

.category-season-item{
    padding:20px;
    border-bottom:1px solid #dcdad4;
}

.category-season-item:nth-child(odd){
    border-right:1px solid #dcdad4;
}

.category-season-item--last-row{
    border-bottom:none;
}

.category-season-eyebrow{
    display:block;
    font-family:var(--font-base);
    font-weight:var(--fw-semibold);
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#a0621f;
}

.category-season-title{
    margin-top:6px;
}

.category-season-description{
    margin-top:8px;
    font-weight:var(--fw-regular);
    color:#6d7278;
}

@media(min-width:1024px){

    .category-season-strip{
        display:flex;
        flex-direction:row;
    }

    .category-season-item{
        flex:1;
        padding:28px 32px;
        border-bottom:none;
        border-right:none;
    }

    .category-season-item + .category-season-item{
        border-left:1px solid #dcdad4;
    }

}

/* ---------------------- */
/* "How our courses are run" — numbered feature list + supporting image     */
/* ---------------------- */

.category-features{
    display:flex;
    flex-direction:column;
    gap:32px;
}

.category-feature-list{
    margin-top:20px;
}

.category-feature-item{
    display:flex;
    gap:16px;
    padding:18px 0;
    border-bottom:1px solid #dcdad4;
}

.category-feature-item:last-child{
    border-bottom:none;
}

.category-feature-index{
    flex:0 0 32px;
    font-family:var(--font-base);
    font-weight:var(--fw-bold);
    font-size:16px;
    letter-spacing:.06em;
    color:#8b9096;
}

.category-feature-body{
    min-width:0;
}

/* Feature titles are h3 (under the section h2) but keep the h4 look. */
.category-feature-body h3{
    font-size:var(--fs-h4);
    font-weight:var(--fw-semibold);
    letter-spacing:0;
}

.category-feature-item p{
    margin-top:6px;
    font-weight:var(--fw-regular);
    color:#6d7278;
}

.category-feature-media img{
    display:block;
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:12px;
}

.category-feature-caption{
    margin-top:12px;
    color:#6d7278;
    font-size:14px;
}

@media(min-width:1024px){

    .category-features{
        flex-direction:row;
        gap:56px;
        align-items:center;
    }

    .category-feature-list-wrap,
    .category-feature-media{
        flex:1;
        min-width:0;
    }

    .category-feature-media img{
        aspect-ratio:auto;
        height:100%;
    }

}

/* ---------------------- */
/* FAQ — static grid (not an accordion; every answer is shown at once)      */
/* ---------------------- */

.category-faq-heading{
    padding-bottom:14px;
    border-bottom:1px solid #dcdad4;
}

.category-faq-grid{
    display:grid;
    grid-template-columns:1fr;
    margin-top:8px;
}

.category-faq-item{
    padding:18px 0;
    border-bottom:1px solid #dcdad4;
}

.category-faq-item h3{
    font-size:var(--fs-h5);
    font-weight:var(--fw-semibold);
    letter-spacing:0;
}

.category-faq-item p{
    margin-top:8px;
    font-weight:var(--fw-regular);
    color:#6d7278;
}

@media(min-width:768px){

    .category-faq-grid{
        grid-template-columns:repeat(2,1fr);
        column-gap:32px;
    }

}

@media(min-width:1024px){

    .category-faq-grid{
        grid-template-columns:repeat(4,1fr);
        column-gap:32px;
    }

}

/* ---------------------- */
/* CTA band                                                                 */
/* ---------------------- */

.category-cta-box{
    display:flex;
    flex-direction:column;
    gap:24px;

    padding:32px 24px;
    background:#16191c;
    border-radius:8px;
}

.category-cta-copy{
    max-width:680px;
}

.category-cta-title{
    font-size:var(--fs-h3);
    color:#fff;
}

.category-cta-description{
    margin-top:8px;
    color:rgba(255,255,255,.65);
}

.category-cta-actions{
    display:flex;
    flex-wrap:wrap;
    flex:none;
    gap:12px;
}

.category-cta-actions .btn{
    border-radius:8px;
}

.category-btn-enquire{
    background:#ff8c00;
    color:#fff;
}

.category-btn-enquire:hover{
    background:#e67e00;
    box-shadow:0 14px 30px -12px rgba(255,140,0,.6);
}

@media(min-width:768px){

    .category-cta-box{
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        gap:40px;
        padding:36px 40px;
    }

}

@media(min-width:1024px){

    .category-cta-box{
        padding:48px 56px;
    }

}