/* ============================================================
   NSIM Marketing Agency — Design System v2
   Style: Editorial Minimalism + Liquid Glass (premium hospitality)
   Palette: #0E0E0E ink | #F5F5F3 off-white | #115C46 green
            #E8E5E0 sand | #555 mid
   Fonts: Plus Jakarta Sans (primary) + Playfair Display (serif italic)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    /* Colors — Ensoro palette (deep teal-green, warm amber, pampas cream) */
    --ink:        #020e0d;   /* primary-900 near-black */
    --ink-soft:   #0a1a18;
    --green:      #003d36;   /* theme-900 deep teal green */
    --green-dark: #002a25;
    --gold:       #e9a65c;   /* porsche-900 warm amber accent */
    --gold-soft:  #f0b978;
    --off-white:  #f5f4ef;   /* pampas cream (body bg) */
    --cream:      #faf9f4;
    --warm-ivory: #f5f4ef;
    --light-bg:   #ecebe4;   /* alt section */
    --sand:       #f5f4ef;
    --sand-dark:  #e2e2e2;
    --sea-mist:   #cfe0db;   /* light green tint */
    --mid:        #5d6c7b;   /* slate body text */
    --mid-light:  #8a96a1;
    --sage:       #5d6c7b;
    --white:      #FFFFFF;

    /* Typography — Inter sitewide */
    --sans:  'Inter', system-ui, -apple-system, sans-serif;
    --serif: 'Inter', system-ui, -apple-system, sans-serif;

    /* Borders */
    --pill-border:       1px solid rgba(0,0,0,.16);
    --pill-border-light: 1px solid rgba(255,255,255,.32);
    --border-subtle:     1px solid rgba(0,0,0,.08);
    --border-sand:       1px solid var(--sand);

    /* Elevation */
    --shadow-xs:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm:  0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
    --shadow-md:  0 8px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
    --shadow-lg:  0 20px 60px rgba(0,0,0,.10), 0 8px 20px rgba(0,0,0,.05);

    /* Radius */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  28px;
    --radius-full: 999px;

    /* Layout */
    --max-w:   1240px;
    --gutter:  clamp(1.25rem, 4vw, 2.5rem);

    /* Motion */
    --ease:      cubic-bezier(.22,.68,0,1.2);
    --ease-out:  cubic-bezier(.16,1,.3,1);
    --ease-in:   cubic-bezier(.4,0,1,1);
    --t-fast:    .15s;
    --t-base:    .22s;
    --t-slow:    .4s;
}

/* ── Base ──────────────────────────────────────────────────── */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--off-white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img  { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; cursor: pointer; }
ul   { list-style: none; }
button { cursor: pointer; font-family: var(--sans); }

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Utilities ─────────────────────────────────────────────── */
.container {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

/* ── Headings: Agrisol scale — weight 400, tight fixed tracking ── */
h1, h2 {
    font-family: var(--sans);
    font-weight: 400;
    letter-spacing: -.04rem;
    line-height: 1.1;
}
h3, h4, h5, h6 {
    font-family: var(--sans);
    font-weight: 400;
    letter-spacing: -.02rem;
    line-height: 1.2;
}
body { letter-spacing: -.0125rem; }
/* Accent words in warm amber, same weight as the heading */
h1 em, h2 em, h3 em, .h-mix em {
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
    color: var(--gold);
}

/* ── Section labels: Agrisol eyebrow (text, not bordered pill) ── */
.pill {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    border: none;
    border-radius: 0;
    padding: 0;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mid-light);
    background: transparent;
    line-height: 1.5;
    white-space: nowrap;
}
.pill--light { border: none; color: rgba(255,255,255,.55); }
.pill--white { background: transparent; border: none; color: rgba(255,255,255,.75); box-shadow: none; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    /* circular arrow badge colours (overridden per variant) */
    --badge-bg: var(--white);
    --badge-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003d36' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='18.5' y2='12'/%3E%3Cpolyline points='12.5 6 19 12 12.5 18'/%3E%3C/svg%3E");
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .4rem .45rem .4rem 1.5rem;
    border-radius: var(--radius-full);
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 500;
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition:
        background var(--t-base) var(--ease-out),
        color var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out),
        transform var(--t-fast) var(--ease-out),
        box-shadow var(--t-base) var(--ease-out);
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

/* Filled primary buttons: green, with an amber-on-hover (the two theme colours) */
.btn--dark,
.btn--green,
.btn--accent {
    background: var(--green);
    color: var(--white);
    border-color: var(--green);
    box-shadow: 0 4px 14px rgba(0,61,54,.28);
}
.btn--dark:hover,
.btn--green:hover,
.btn--accent:hover {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
    box-shadow: 0 6px 20px rgba(233,166,92,.4);
}
/* Keep the arrow badge readable on the amber hover */
.btn--dark:hover, .btn--green:hover, .btn--accent:hover {
    --badge-bg: var(--ink);
    --badge-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='18.5' y2='12'/%3E%3Cpolyline points='12.5 6 19 12 12.5 18'/%3E%3C/svg%3E");
}

.btn--outline {
    background: transparent;
    color: var(--green);
    border-color: rgba(0,61,54,.28);
}
.btn--outline:hover {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--ink);
}

.btn--outline-dark {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.btn--outline-dark:hover {
    background: var(--ink);
    color: var(--white);
}

.btn--outline-light {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,.38);
}
.btn--outline-light:hover {
    border-color: var(--white);
    background: rgba(255,255,255,.08);
}

.btn--white {
    background: var(--white);
    color: var(--ink);
    border-color: var(--white);
    box-shadow: var(--shadow-sm);
}
.btn--white:hover {
    background: var(--off-white);
    box-shadow: var(--shadow-md);
}

.btn--sm  { padding: .3rem .35rem .3rem 1.1rem; font-size: .875rem; gap: .6rem; }
.btn--lg  { padding: .5rem .55rem .5rem 1.9rem; font-size: 1rem; }

/* Light-surfaced buttons get a green badge with a white arrow */
.btn--white, .btn--outline, .btn--outline-dark {
    --badge-bg: var(--green);
    --badge-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='18.5' y2='12'/%3E%3Cpolyline points='12.5 6 19 12 12.5 18'/%3E%3C/svg%3E");
}

/* ── Section headings ──────────────────────────────────────── */
.section-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: .75rem;
}

/* ── NAV (Go Culture style: light bar, centered links, dropdown) ── */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--off-white);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition:
        background var(--t-base) ease,
        box-shadow var(--t-base) ease;
}
.site-header.scrolled {
    background: rgba(247,248,238,.92);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

.nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: .9rem var(--gutter);
    max-width: calc(var(--max-w) + var(--gutter) * 2);
    margin-inline: auto;
    gap: 1rem;
}

/* Left: logo */
.nav__logo {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    transition: opacity var(--t-base) ease;
}
.nav__logo:hover { opacity: .8; }
.nav__logo-img {
    height: 48px;
    width: auto;
    display: block;
}

/* Center: links */
.nav__links {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.nav__link {
    color: var(--ink);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .01em;
    transition: color var(--t-base) ease, background var(--t-base) ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .95rem;
    border-radius: var(--radius-full);
}
.nav__link:hover { color: var(--green); background: rgba(0,61,54,.07); }
.nav__link--active,
.nav__link--active:hover {
    color: var(--white);
    background: var(--green);
}

/* Services dropdown */
.nav__item { position: relative; }
.nav__caret {
    width: 14px; height: 14px;
    transition: transform var(--t-base) var(--ease-out);
}
.nav__item--dropdown:hover .nav__caret,
.nav__item--dropdown:focus-within .nav__caret { transform: rotate(180deg); }

/* invisible hover bridge so the menu doesn't close in the gap */
.nav__item--dropdown::after {
    content: '';
    position: absolute;
    top: 100%; left: -1rem; right: -1rem;
    height: 18px;
}

.nav__dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 320px;
    background: var(--white);
    border: 1px solid rgba(0,0,0,.07);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: .6rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) ease, transform var(--t-base) var(--ease-out);
    z-index: 60;
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav__dropdown-link {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem .85rem;
    border-radius: var(--radius-sm);
    transition: background var(--t-base) ease;
}
.nav__dropdown-link:hover { background: var(--off-white); }
.nav__dropdown-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
}
.nav__dropdown-desc {
    font-size: .78rem;
    color: var(--mid);
    line-height: 1.45;
}

/* Right: CTA pill */
.nav__cta-wrap {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
}
.nav__cta-plus {
    font-weight: 400;
    margin-left: .1rem;
    font-size: 1.05em;
    line-height: 0;
}

/* Hamburger */
.nav__toggle {
    grid-column: 3;
    justify-self: end;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: .35rem .25rem;
    z-index: 210;
}
.nav__toggle span {
    display: block;
    width: 22px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform var(--t-base) var(--ease-out),
        opacity var(--t-fast) ease;
}
/* Open state: animate to X */
.nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile CTA item (inside open drawer) */
.nav__cta-mobile { display: none; }

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: var(--ink);
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
    will-change: transform;
}

/* Dual-layer overlay: global tint + bottom-heavy gradient */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(14,14,14,.32) 0%,
            rgba(14,14,14,.12) 40%,
            rgba(14,14,14,.80) 100%
        );
    z-index: 1;
}

.hero__body {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-end;
    gap: 4rem;
    padding: 0 var(--gutter) 5.5rem;
    max-width: var(--max-w);
    margin-inline: auto;
    width: 100%;
}

/* Left col: floating pills + huge headline */
.hero__badges {
    position: relative;
    padding-top: 4rem;
}

.hero__badge {
    position: absolute;
    z-index: 3;
}
.hero__badge--tl {
    top: 0;
    left: 0;
}
.hero__badge--mr {
    top: 50%;
    right: -3rem;
    transform: translateY(-50%);
}

.hero__title {
    font-size: clamp(2.75rem, 6.5vw, 5.5rem);
    font-weight: 500;
    color: var(--white);
    line-height: 1.06;
    letter-spacing: -.03em;
    margin-top: 1.25rem;
}
.hero__title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    display: block;
}

/* Right col: body copy + CTA */
.hero__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2rem;
    padding-bottom: .75rem;
}
.hero__sub {
    font-size: 1rem;
    color: rgba(255,255,255,.65);
    line-height: 1.8;
    max-width: 30ch;
    text-align: right;
    font-weight: 300;
}

/* Scroll hint at very bottom */
.hero__scroll {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: rgba(255,255,255,.4);
    font-size: .6875rem;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.hero__scroll-line {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
    animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%,100% { opacity: .5; transform: scaleY(1); }
    50%      { opacity: 1;  transform: scaleY(1.15); }
}

/* ── ABOUT STRIP (white, 2-col) ────────────────────────────── */
.about-strip {
    background: var(--white);
    padding: 7rem var(--gutter);
}
.about-strip__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 6rem;
    align-items: start;
}

.about-strip__left {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    position: sticky;
    top: 6rem;
}

.about-strip__title {
    font-size: clamp(1.875rem, 4vw, 3.25rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.about-strip__right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-strip__photo {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.about-strip__body {
    font-size: 1rem;
    color: var(--mid);
    line-height: 1.85;
}

/* ── SERVICES SECTION (off-white, accordion rows) ──────────── */
.services-section {
    background: var(--light-bg);
    padding: 7rem var(--gutter);
}
.services-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}
.services-section__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
    margin-bottom: 4rem;
}
.services-section__title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.03em;
}

/* Accordion rows */
.service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.875rem 0;
    border-bottom: 1px solid rgba(0,0,0,.09);
    transition:
        background var(--t-base) ease,
        padding var(--t-base) ease;
    cursor: default;
}
.service-row:first-of-type { border-top: 1px solid rgba(0,0,0,.09); }
.service-row:hover { padding-left: .5rem; padding-right: .5rem; }

.service-row__content { flex: 1; }
.service-row__num {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--mid-light);
    margin-bottom: .4rem;
    font-variant-numeric: tabular-nums;
}
.service-row__title {
    font-size: clamp(1.0625rem, 2vw, 1.375rem);
    font-weight: 500;
    letter-spacing: -.015em;
    margin-bottom: .35rem;
    transition: color var(--t-base) ease;
}
.service-row__desc {
    font-size: .9375rem;
    color: var(--mid);
    line-height: 1.65;
    max-width: 68ch;
    transition: color var(--t-base) ease;
}

/* Circle arrow */
.service-row__arrow {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: var(--ink);
    text-decoration: none;
    transition:
        background var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out),
        color var(--t-base) var(--ease-out),
        transform var(--t-base) var(--ease-out);
}
.service-row:hover .service-row__arrow {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
    transform: rotate(45deg);
}

/* ── HOTELS GRID (white, portrait cards) ───────────────────── */
.hotels-section {
    background: var(--white);
    padding: 7rem var(--gutter);
}
.hotels-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}
.hotels-section__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
    margin-bottom: 4rem;
}
.hotels-section__title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.hotels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.hotel-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hotel-card__img-wrap {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--sand);
    box-shadow: var(--shadow-xs);
}
.hotel-card__img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    transition: transform var(--t-slow) var(--ease-out);
}
.hotel-card:hover .hotel-card__img {
    transform: scale(1.05);
}

.hotel-card__meta {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 0 .25rem;
}
.hotel-card__name {
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -.01em;
}
.hotel-card__location {
    font-size: .8125rem;
    color: var(--gold);
    font-weight: 500;
}
.hotel-card__actions {
    display: flex;
    gap: .75rem;
    padding: 0 .25rem;
    flex-wrap: wrap;
}

/* ── STATS SECTION (dark photo bg) ────────────────────────── */
.stats-section {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    padding: 7rem var(--gutter);
}
.stats-section__bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .28;
}
.stats-section__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            110deg,
            rgba(14,14,14,.82) 35%,
            rgba(14,14,14,.28) 100%
        );
}
.stats-section__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.stats-section__left {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.stats-section__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 500;
    color: var(--white);
    line-height: 1.12;
    letter-spacing: -.025em;
}

.stats-section__right {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    border-left: 1px solid rgba(255,255,255,.1);
    padding-left: 4rem;
}

.stat-item__num {
    font-size: clamp(4rem, 9vw, 7rem);
    font-weight: 300;
    color: var(--white);
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.stat-item__label {
    font-size: .8125rem;
    color: rgba(255,255,255,.45);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: .4rem;
}

/* ── CTA BAND ──────────────────────────────────────────────── */
.cta-band {
    background: var(--green);
    padding: 6rem var(--gutter);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 80% at 50% 120%, rgba(255,255,255,.06) 0%, transparent 70%);
    pointer-events: none;
}
.cta-band__inner {
    max-width: 640px;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}
.cta-band__title {
    font-size: clamp(1.75rem, 4.5vw, 2.875rem);
    font-weight: 500;
    color: var(--white);
    letter-spacing: -.025em;
    line-height: 1.15;
    margin-bottom: 1rem;
}
.cta-band__sub {
    font-size: 1rem;
    color: rgba(255,255,255,.68);
    margin-bottom: 2.5rem;
    line-height: 1.75;
    font-weight: 300;
}
.cta-band__actions {
    display: flex;
    gap: .875rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── PAGE HEADER (inner pages) ─────────────────────────────── */
/* Agrisol-style page header: centered, deep green, image marquee below */
.page-header {
    background: var(--green);
    color: var(--white);
    text-align: center;
    padding: clamp(7.5rem, 16vw, 10.5rem) var(--gutter) clamp(3.5rem, 8vw, 6rem);
    position: relative;
    overflow: hidden;
}
.page-header__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page-header .pill { margin-bottom: 1.25rem; }
.page-header__title {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 400;
    letter-spacing: -.04rem;
    line-height: 1.2;
    margin-bottom: 1.1rem;
    max-width: 32ch;
    margin-inline: auto;
    color: var(--white);
}
.page-header__sub {
    font-size: 1rem;
    color: rgba(255,255,255,.55);
    max-width: 52ch;
    margin-inline: auto;
    font-weight: 300;
    line-height: 1.7;
}

/* Auto-scrolling image marquee inside page headers */
.page-header__marquee {
    margin-top: clamp(3rem, 6vw, 5.25rem);
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
}
.page-header__track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: pageHeaderMarquee 32s linear infinite;
}
.page-header__marquee:hover .page-header__track { animation-play-state: paused; }
.page-header__track figure {
    flex: none;
    width: clamp(200px, 18vw, 270px);
    aspect-ratio: 3 / 4;
    border-radius: 1.25rem;
    overflow: hidden;
    margin: 0;
    box-shadow: 0 11px 60px rgba(0,0,0,.28);
    background: var(--white);
}
.page-header__track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@keyframes pageHeaderMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .page-header__track { animation: none; }
}

/* ── ABOUT PAGE ─────────────────────────────────────────────── */
.about-body {
    background: var(--white);
    padding: 6rem var(--gutter);
}
.about-body__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 6rem;
    align-items: start;
}
.about-body__lead {
    font-size: 1.0625rem;
    color: var(--mid);
    line-height: 1.9;
    margin-bottom: 1.25rem;
}
.about-body__lead:last-child { margin-bottom: 0; }

.values-section {
    background: var(--light-bg);
    padding: 6rem var(--gutter);
}
.values-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--sand-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 3rem;
}
.value-card {
    background: var(--white);
    padding: 2.75rem 2.25rem;
    transition: background var(--t-base) ease;
}
.value-card:hover { background: var(--off-white); }
.value-card__num {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 1rem;
}
.value-card__title {
    font-size: 1.0625rem;
    font-weight: 500;
    margin-bottom: .65rem;
    letter-spacing: -.01em;
}
.value-card__body {
    font-size: .9375rem;
    color: var(--mid);
    line-height: 1.75;
}

.team-section {
    background: var(--white);
    padding: 6rem var(--gutter);
}
.team-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 1.5rem;
    margin-top: 3.5rem;
}
.team-card {
    background: var(--white);
    border: 1px solid rgba(2,14,13,.07);
    border-radius: var(--radius-lg);
    padding: 1rem 1rem 1.75rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) ease;
}
.team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.team-card__photo {
    background: #eef0f1;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    margin-bottom: 1.25rem;
}
.team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform var(--t-slow) var(--ease-out);
}
.team-card:hover .team-card__photo img { transform: scale(1.04); }
.team-card__name {
    font-size: 1.1875rem;
    font-weight: 600;
    margin-bottom: .35rem;
    letter-spacing: -.01em;
    color: var(--ink);
}
.team-card__role {
    font-size: .875rem;
    color: var(--green);
    font-weight: 500;
}

/* ── SERVICES PAGE ─────────────────────────────────────────── */
.services-page {
    background: var(--white);
    padding: 6rem var(--gutter);
}
.services-page__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}
.service-block {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 3.5rem;
    padding: 4.5rem 0;
    border-bottom: var(--border-sand);
    scroll-margin-top: 100px;
}
.service-block:last-child { border-bottom: none; }
.service-block__num {
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 500;
    color: var(--sand);
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    padding-top: .25rem;
}
.service-block__title {
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    font-weight: 500;
    letter-spacing: -.02em;
    margin-bottom: 1.25rem;
    line-height: 1.2;
}
.service-block__body {
    font-size: 1rem;
    color: var(--mid);
    line-height: 1.85;
    margin-bottom: 1.25rem;
    max-width: 68ch;
}
.service-block__list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 1rem;
}
.service-block__list li {
    font-size: .9375rem;
    color: var(--mid);
    padding-left: 1.35rem;
    position: relative;
    line-height: 1.6;
}
.service-block__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
}

/* ── HOTEL DETAIL ──────────────────────────────────────────── */
.hotel-hero {
    position: relative;
    height: 72vh;
    min-height: 500px;
    overflow: hidden;
    background: var(--ink);
}
.hotel-hero__img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .7;
    transition: transform 8s ease;
}
.hotel-hero:hover .hotel-hero__img { transform: scale(1.04); }
.hotel-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem var(--gutter) 4rem;
    background: linear-gradient(
        to top,
        rgba(14,14,14,.9) 0%,
        rgba(14,14,14,.3) 50%,
        transparent 100%
    );
    max-width: calc(var(--max-w) + var(--gutter) * 2);
    margin-inline: auto;
    left: 0; right: 0;
}
.hotel-hero__location {
    font-size: .6875rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-bottom: .75rem;
}
.hotel-hero__name {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 500;
    color: var(--white);
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 1.75rem;
}
.hotel-hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hotel-body-section {
    background: var(--white);
    padding: 5.5rem var(--gutter);
}
.hotel-body-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}
.hotel-body-grid {
    display: grid;
    grid-template-columns: 1.9fr 1fr;
    gap: 5rem;
    align-items: start;
}
.hotel-body-main > h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -.025em;
    margin-bottom: 1.5rem;
}
.hotel-desc {
    font-size: 1rem;
    color: var(--mid);
    line-height: 1.9;
    margin-bottom: 1.25rem;
}

.hotel-sidebar {
    position: sticky;
    top: 6rem;
    background: var(--light-bg);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    box-shadow: var(--shadow-xs);
}
.hotel-sidebar__title {
    font-size: .9375rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    letter-spacing: -.01em;
}
.hotel-sidebar__item {
    display: flex;
    gap: .875rem;
    font-size: .9375rem;
    color: var(--mid);
    padding: .8rem 0;
    border-bottom: var(--border-sand);
    line-height: 1.55;
}
.hotel-sidebar__item:last-of-type { border-bottom: none; }
.hotel-sidebar__label {
    font-weight: 600;
    color: var(--ink);
    min-width: 82px;
    flex-shrink: 0;
}

.rooms-section {
    background: var(--light-bg);
    padding: 5rem var(--gutter);
}
.rooms-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}
.rooms-section > .rooms-section__inner > h2,
.amenities-section > .amenities-section__inner > h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -.02em;
    margin-bottom: 2rem;
}
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.room-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid rgba(2,14,13,.06);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t-base) ease, transform var(--t-base) var(--ease-out);
}
.room-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.room-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--light-bg);
}
.room-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.room-card:hover .room-card__media img { transform: scale(1.05); }
.room-card__body {
    padding: 1.375rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}
.room-card__name {
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -.01em;
}
.room-card__desc {
    font-size: .9rem;
    color: var(--mid);
    line-height: 1.65;
    flex: 1;
}
.room-card__inquire {
    margin-top: .75rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--green);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: gap var(--t-base) var(--ease-out);
}
.room-card__inquire:hover { gap: .7rem; }

.amenities-section {
    background: var(--white);
    padding: 5rem var(--gutter);
}
.amenities-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.amenity-pill {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--light-bg);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    font-size: .9375rem;
    transition: background var(--t-base) ease;
}
.amenity-pill:hover { background: var(--sand); }
.amenity-pill__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sea-mist);
    color: var(--green);
    display: grid;
    place-items: center;
}
.amenity-pill__icon svg { width: 18px; height: 18px; }

/* Photo strip */
.gallery-strip {
    display: grid;
    gap: 3px;
    background: var(--ink);
}
.gallery-strip--3 { grid-template-columns: 2fr 1fr 1fr; }
.gallery-strip--2 { grid-template-columns: 1fr 1fr; }
.gallery-strip img {
    width: 100%; height: 300px;
    object-fit: cover;
    display: block;
    transition: opacity var(--t-base) ease;
}
.gallery-strip img:hover { opacity: .88; }
.gallery-strip--3 img:first-child { height: 420px; }

/* ── BOOKING PAGE (pro layout) ────────────────────────────── */
.booking-layout {
    background: var(--off-white);
    padding: 6rem var(--gutter);
}
.booking-layout__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
.booking-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: var(--shadow-sm);
}
.booking-card__head { margin-bottom: 2rem; }
.booking-card__title { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: .5rem; }
.booking-card__sub { font-size: .9375rem; color: var(--mid); line-height: 1.7; max-width: 52ch; }
.booking-fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; }
.booking-fieldset__legend {
    font-family: var(--sans);
    font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 1rem; padding: 0; width: 100%;
    display: flex; align-items: center; gap: .75rem;
}
.booking-fieldset__legend::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,.09); }
.booking-card .req { color: var(--gold); margin-left: .1rem; }
.booking-card__submit { width: 100%; justify-content: center; margin-top: 1rem; }

/* Aside — forest-green steps card */
.booking-aside {
    position: sticky;
    top: 6rem;
    background: var(--green);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    overflow: hidden;
}
.booking-aside__title { font-family: var(--serif); font-size: 1.375rem; margin-bottom: 1.25rem; }
.booking-step {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.booking-step:last-of-type { border-bottom: none; }
.booking-step__num {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink);
    font-size: .8125rem; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
}
.booking-step__text { font-size: .9rem; color: rgba(255,255,255,.8); line-height: 1.5; }
.booking-help {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.14);
}
.booking-help__label {
    font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold); margin-bottom: .5rem;
}
.booking-help__value { font-size: .9375rem; color: rgba(255,255,255,.85); line-height: 1.8; }
.booking-help__value a { color: rgba(255,255,255,.85); }
.booking-help__value a:hover { color: var(--gold); }

/* ── CONTACT PAGE ─────────────────────────────────────────── */
.contact-section {
    background: var(--white);
    padding: 5.5rem var(--gutter);
}
.contact-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1.75fr;
    gap: 6rem;
    align-items: start;
}
.contact-info {
    position: sticky;
    top: 6rem;
}
.contact-info__group { margin-bottom: 2.25rem; }
.contact-info__label {
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: .5rem;
}
.contact-info__value {
    font-size: .9375rem;
    color: var(--mid);
    line-height: 1.85;
}
.contact-info__value a:hover { color: var(--green); }
.contact-form-title {
    font-size: clamp(1.375rem, 2.5vw, 2rem);
    font-weight: 500;
    letter-spacing: -.02em;
    margin-bottom: 2rem;
}

/* ── FORMS ────────────────────────────────────────────────── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-bottom: 1.375rem;
}
.form-group label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .01em;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: .8rem 1rem;
    border: 1.5px solid var(--sand);
    border-radius: var(--radius-sm);
    font-family: var(--sans);
    font-size: .9375rem;
    color: var(--ink);
    background: var(--white);
    transition:
        border-color var(--t-base) ease,
        box-shadow var(--t-base) ease;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1.5;
    min-height: 46px;
}
/* Native date inputs have an intrinsic min-width — neutralise it so they never overflow */
.form-group input[type="date"] { min-width: 0; }
.form-group input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(17,92,70,.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--mid-light);
}
.form-row     { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; }
.form-row--3  { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 1rem; }
.form-group { min-width: 0; }

/* ── ALERTS ──────────────────────────────────────────────── */
.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.75rem;
    font-size: .9375rem;
    line-height: 1.6;
}
.alert--success {
    background: #e9f7ef;
    color: #1a5e35;
    border-left: 3px solid #28a745;
}
.alert--error {
    background: #fdf3f3;
    color: #7a1a1a;
    border-left: 3px solid #dc3545;
}
.alert ul { padding-left: 1.25rem; margin-top: .4rem; }
.alert li { margin-bottom: .2rem; }

/* ── 404 / ERROR PAGES ───────────────────────────────────── */
.error-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem var(--gutter);
}
.error-page__code {
    font-size: clamp(5rem, 15vw, 9rem);
    font-weight: 500;
    color: var(--sand);
    line-height: 1;
    letter-spacing: -.05em;
}
.error-page__title {
    font-size: 1.75rem;
    font-weight: 500;
    margin: .5rem 0 1rem;
    letter-spacing: -.02em;
}
.error-page__body {
    color: var(--mid);
    margin-bottom: 2rem;
    max-width: 38ch;
    margin-inline: auto;
    line-height: 1.7;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.footer {
    background: var(--ink);
    color: rgba(255,255,255,.55);
}
.footer__main {
    display: grid;
    grid-template-columns: 1.85fr 1fr 1fr 1fr;
    gap: 3.5rem;
    padding: 5.5rem var(--gutter) 4.5rem;
    max-width: var(--max-w);
    margin-inline: auto;
}
.footer__brand { display: flex; flex-direction: column; gap: 1.25rem; }
.footer__logo-img { height: 52px; width: auto; display: block; }

/* Footer contact column with icons */
.footer__contact { display: flex; flex-direction: column; gap: 1.1rem; }
.footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255,255,255,.6);
}
.footer__contact-icon {
    flex-shrink: 0;
    color: var(--gold);
    margin-top: .15rem;
}
.footer__contact-icon svg { width: 18px; height: 18px; display: block; }
.footer__contact-item a { color: rgba(255,255,255,.6); transition: color var(--t-base) ease; }
.footer__contact-item a:hover { color: var(--gold); }
.footer__tagline {
    font-size: .9375rem;
    line-height: 1.75;
    max-width: 26ch;
}
.footer__heading {
    color: var(--white);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.footer__links {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.footer__links a {
    font-size: .9375rem;
    transition: color var(--t-base) ease;
}
.footer__links a:hover { color: var(--white); }
.footer address {
    font-style: normal;
    font-size: .9375rem;
    line-height: 1.85;
}
.footer address a:hover { color: var(--white); }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 1.5rem var(--gutter);
    max-width: var(--max-w);
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .875rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.footer__bottom a:hover { color: var(--white); }

/* ── RESPONSIVE — 1024px ─────────────────────────────────── */
@media (max-width: 1024px) {
    .hero__body          { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 4.5rem; }
    .hero__right         { align-items: flex-start; }
    .hero__sub           { text-align: left; max-width: 48ch; }
    .hero__badge--mr     { display: none; }
    .about-strip__inner  { grid-template-columns: 1fr; gap: 3.5rem; }
    .about-strip__left   { position: static; }
    .hotels-grid         { grid-template-columns: 1fr 1fr; }
    .stats-section__inner { grid-template-columns: 1fr; gap: 3.5rem; }
    .stats-section__right { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.1); padding-top: 3rem; flex-direction: row; flex-wrap: wrap; gap: 2rem; }
    .hotel-body-grid     { grid-template-columns: 1fr; }
    .hotel-sidebar       { position: static; }
    .booking-layout__inner { grid-template-columns: 1fr; }
    .booking-aside       { position: static; }
    .contact-section__inner { grid-template-columns: 1fr; gap: 3.5rem; }
    .contact-info        { position: static; }
    .about-body__inner   { grid-template-columns: 1fr; gap: 3.5rem; }
    .footer__main        { grid-template-columns: 1fr 1fr; gap: 2.75rem; }
}

/* ── RESPONSIVE — Nav collapse 900px ─────────────────────── */
@media (max-width: 900px) {
    .nav__links    { display: none; }
    .nav__cta-wrap { display: none; }
    .nav__toggle   { display: flex; }

    /* Blur on the header creates a containing block that would trap the
       fixed drawer at header height — disable it on mobile. */
    .site-header.scrolled {
        background: var(--off-white);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Full-screen mobile drawer (clean, premium) */
    .nav__links.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: var(--off-white);
        padding: 5.5rem var(--gutter) 2.5rem;
        z-index: 190;
        gap: 0;
        overflow-y: auto;
        animation: drawerIn var(--t-slow) var(--ease-out);
    }
    .nav__links.is-open .nav__item {
        width: 100%;
        border-bottom: 1px solid rgba(2,14,13,.08);
    }
    .nav__links.is-open .nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-size: 1.0625rem;
        font-weight: 500;
        letter-spacing: -.01em;
        color: var(--ink);
        padding: 1.05rem 0;
    }
    .nav__links.is-open .nav__link {
        padding-inline: 0;
        border-radius: 0;
    }
    .nav__links.is-open .nav__link:hover { background: transparent; }
    .nav__links.is-open .nav__link--active,
    .nav__links.is-open .nav__link--active:hover {
        color: var(--green);
        background: transparent;
        font-weight: 600;
    }
    .nav__links.is-open .nav__link::after { display: none; }
    .nav__links.is-open .nav__caret { width: 18px; height: 18px; color: var(--mid); }

    /* Dropdown becomes a static, indented list in the drawer */
    .nav__item--dropdown::after { display: none; }
    .nav__links.is-open .nav__dropdown {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        padding: 0 0 .85rem 1rem;
        background: transparent;
        border: none;
        box-shadow: none;
        gap: 0;
        border-left: 2px solid var(--gold);
        margin-left: .1rem;
    }
    .nav__links.is-open .nav__dropdown-link { padding: .5rem 0; }
    .nav__links.is-open .nav__dropdown-title { font-size: .9375rem; font-weight: 500; color: var(--mid); }
    .nav__links.is-open .nav__dropdown-desc { display: none; }

    .nav__links.is-open .nav__cta-mobile {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        border-bottom: none;
        margin-top: 1.75rem;
    }
    .nav__cta-mobile-btn { width: 100%; justify-content: center; }
    .nav__cta-mobile { display: none; }
}
@keyframes drawerIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVE — 768px ──────────────────────────────────── */
@media (max-width: 768px) {
    /* Grid collapses */
    .hotels-grid     { grid-template-columns: 1fr; }
    .team-grid       { grid-template-columns: 1fr 1fr; }
    .values-grid     { grid-template-columns: 1fr; }
    .form-row,
    .form-row--3     { grid-template-columns: 1fr; }
    .gallery-strip--3 { grid-template-columns: 1fr; }
    .gallery-strip--3 img:first-child { height: 260px; }
    .gallery-strip img { height: 220px; }
    .footer__main    { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer__bottom  { flex-direction: column; text-align: center; gap: .5rem; }
    .service-block   { grid-template-columns: 1fr; gap: .75rem; }
    .service-block__num { font-size: 2.75rem; }
    .stats-section__right { flex-direction: column; gap: 2rem; }
}

/* ── RESPONSIVE — 480px ──────────────────────────────────── */
@media (max-width: 480px) {
    .team-grid  { grid-template-columns: 1fr; }
    .rooms-grid { grid-template-columns: 1fr; }
    .amenities-grid { grid-template-columns: 1fr 1fr; }
    .cta-band__actions { flex-direction: column; align-items: center; }
    .hero__badge--tl { display: none; }
}

/* ============================================================
   STRAVOREX-INSPIRED HOME SECTIONS
   ============================================================ */

/* Nav: always solid dark on home (applied via body class) */
.site-header--solid {
    background: rgba(10,10,10,.96) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── Sitewide button: pill + chevron + hover slide ─────────── */
/* Primary accent (dark pill, matches reference) */
/* Auto chevron after every button label */
/* Circular arrow badge (screenshot style) — sitewide */
.btn::after {
    content: "";
    width: 2em;
    height: 2em;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--badge-bg);
    background-image: var(--badge-arrow);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 44%;
    transition: transform var(--t-base) var(--ease);
}
.btn:hover::after { transform: rotate(-45deg); }
.btn--sm::after { width: 1.7em; height: 1.7em; }

/* Opt-out (kept for any button that should stay text-only) */
.btn--no-badge::after { display: none; }

/* ── HERO V2 ─────────────────────────────────────────────── */
.hero-v2 {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: var(--ink);
}
/* Solid deep-green hero with a subtle premium glow */
.hero-v2--solid {
    background: var(--green);
}
.hero-v2--solid::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 85% 15%, rgba(233,166,92,.10) 0%, transparent 55%),
        radial-gradient(90% 70% at 0% 100%, rgba(255,255,255,.05) 0%, transparent 60%);
    pointer-events: none;
}
.hero-v2__bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 25%;
}
.hero-v2__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.35) 55%, rgba(8,8,8,.55) 100%);
    z-index: 1;
}
.hero-v2__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-w);
    margin-inline: auto;
    width: 100%;
    padding: 8rem var(--gutter) 5rem;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 4rem;
    align-items: center;
}
.hero-v2__left {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.hero-v2__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}
.hero-v2__eyebrow::before {
    content: '';
    display: block;
    width: 20px; height: 1px;
    background: rgba(255,255,255,.3);
}
.hero-v2__title {
    font-size: clamp(2.75rem, 6vw, 5rem);
    font-weight: 500;
    color: var(--white);
    line-height: 1.06;
    letter-spacing: -.035em;
}
.hero-v2__title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
}
.hero-v2__sub {
    font-size: 1rem;
    color: rgba(255,255,255,.55);
    line-height: 1.8;
    max-width: 44ch;
    font-weight: 300;
}
.hero-v2__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Booking widget */
.booking-widget {
    background: rgba(14,14,14,.82);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.booking-widget__label {
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
}
.booking-widget__chart-wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.booking-widget__donut {
    flex-shrink: 0;
    width: 90px; height: 90px;
}
.booking-widget__legend {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    flex: 1;
}
.bw-legend-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: rgba(255,255,255,.65);
}
.bw-legend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bw-legend-pct {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--white);
    font-size: .8125rem;
}
.booking-widget__divider {
    height: 1px;
    background: rgba(255,255,255,.08);
}
.booking-widget__cta {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.booking-widget__cta-label {
    font-size: .75rem;
    color: rgba(255,255,255,.4);
    letter-spacing: .04em;
}

/* ── PARTNER STRIP ─────────────────────────────────────────── */
.partner-strip {
    background: var(--ink-soft);
    padding: 1.75rem var(--gutter);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.partner-strip__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.partner-strip__inner::-webkit-scrollbar { display: none; }
.partner-strip__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    flex-shrink: 0;
    white-space: nowrap;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(255,255,255,.1);
}
.partner-strip__names {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}
.partner-strip__name {
    font-size: .9375rem;
    font-weight: 500;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
    letter-spacing: .02em;
    transition: color var(--t-base) ease;
}
.partner-strip__name:hover { color: rgba(255,255,255,.8); }

/* ── BENTO FEATURES ─────────────────────────────────────────── */
.bento-section {
    background: var(--white);
    padding: 7rem var(--gutter);
}
.bento-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}
.bento-section__header {
    margin-bottom: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.bento-section__title {
    font-size: clamp(1.875rem, 4vw, 2.875rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.03em;
    max-width: 22ch;
}
.bento-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 1rem;
}
.bento-card {
    background: var(--light-bg);
    border-radius: var(--radius-xl);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 280px;
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) ease;
}
.bento-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.bento-card--dark {
    background: var(--ink);
    color: var(--white);
}
.bento-card__visual {
    flex: 1;
    display: flex;
    align-items: flex-end;
}
.bento-card__icon-circle {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bento-card__icon-circle svg {
    width: 24px; height: 24px;
    stroke: white;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bento-card__title {
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.3;
}
.bento-card--dark .bento-card__title { color: var(--white); }
.bento-card__sub {
    font-size: .875rem;
    color: var(--mid);
    line-height: 1.7;
}
.bento-card--dark .bento-card__sub { color: rgba(255,255,255,.5); }

/* Mini area chart SVG in bento card */
.bento-area-chart {
    width: 100%;
    height: 80px;
}

/* Country stats mini table */
.bento-table {
    width: 100%;
    font-size: .8125rem;
    border-collapse: collapse;
}
.bento-table th {
    text-align: left;
    color: rgba(255,255,255,.3);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .6875rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.bento-table td {
    padding: .5rem 0;
    color: rgba(255,255,255,.7);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.bento-table td:last-child { text-align: right; color: var(--white); font-weight: 600; }
.bento-table tr:last-child td { border-bottom: none; }

/* ── SERVICES SPLIT ─────────────────────────────────────────── */
.services-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.services-split__photo {
    position: relative;
    overflow: hidden;
    min-height: 600px;
}
.services-split__photo img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
.services-split__panel {
    background: #003d36;
    padding: 5.5rem clamp(2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
}
.services-split__eyebrow {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #e9a65c;
}
.services-split__title {
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    font-weight: 500;
    color: var(--white);
    letter-spacing: -.03em;
    line-height: 1.1;
}
.services-split__title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
}
.services-split__list {
    display: flex;
    flex-direction: column;
}
.split-service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    cursor: default;
    transition: padding-left var(--t-base) var(--ease-out);
}
.split-service-row:first-child { border-top: 1px solid rgba(255,255,255,.08); }
.split-service-row:hover { padding-left: .5rem; }
.split-service-row__name {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,.8);
    transition: color var(--t-base) ease;
}
.split-service-row:hover .split-service-row__name { color: var(--white); }
.split-service-row__arrow {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.5);
    font-size: 1rem;
    transition:
        background var(--t-base) var(--ease-out),
        border-color var(--t-base) ease,
        color var(--t-base) ease,
        transform var(--t-base) var(--ease-out);
}
.split-service-row:hover .split-service-row__arrow {
    background: #e9a65c;
    border-color: #e9a65c;
    color: var(--ink);
    transform: rotate(45deg);
}

/* ── METRICS BENTO ─────────────────────────────────────────── */
.metrics-section {
    background: var(--light-bg);
    padding: 7rem var(--gutter);
}
.metrics-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
/* Top row: left big stat card spans 1 col, right = 2 stacked */
.metrics-top {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 1rem;
}
/* Bottom row */
.metrics-bottom {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.m-card {
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.m-card--dark {
    background: var(--ink);
    color: var(--white);
}
.m-card--green {
    background: var(--green);
    color: var(--white);
}
.m-card__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mid);
}
.m-card--dark .m-card__label { color: rgba(255,255,255,.35); }
.m-card--green .m-card__label { color: rgba(255,255,255,.55); }
.m-card__num {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 500;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--ink);
}
.m-card--dark .m-card__num { color: var(--white); }
.m-card--green .m-card__num { color: var(--white); }
.m-card__sub {
    font-size: .875rem;
    color: var(--mid);
    line-height: 1.6;
}
.m-card--dark .m-card__sub { color: rgba(255,255,255,.45); }
.m-card--green .m-card__sub { color: rgba(255,255,255,.65); }
.m-card__quote {
    font-size: .9375rem;
    font-style: italic;
    color: rgba(255,255,255,.65);
    line-height: 1.7;
    margin-top: .5rem;
    font-family: var(--serif);
}
.m-card__stars {
    display: flex;
    gap: 3px;
    margin-top: auto;
}
.m-card__stars span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #e9a65c;
}
/* Avatar row */
.m-card__avatars {
    display: flex;
    margin-top: auto;
}
.m-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2.5px solid var(--white);
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--white);
    margin-left: -10px;
}
.m-avatar:first-child { margin-left: 0; }

/* Bottom-right: photo card */
.m-photo-card {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 280px;
}
.m-photo-card img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.m-photo-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14,14,14,.75) 0%, transparent 55%);
}
.m-photo-card__badge {
    position: absolute;
    bottom: 1.5rem; left: 1.5rem;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-md);
    padding: .75rem 1.125rem;
    color: var(--white);
}
.m-photo-card__badge-title {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .2rem;
}
.m-photo-card__badge-sub {
    font-size: .6875rem;
    color: rgba(255,255,255,.55);
    letter-spacing: .02em;
}

/* ── SHOWCASE SECTION ───────────────────────────────────────── */
.showcase-section {
    background: #003d36;
    padding: 7rem var(--gutter);
}
.showcase-section__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}
/* Floating CTA bar */
.showcase-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-xl);
    padding: 2rem 2.5rem;
    flex-wrap: wrap;
}
.showcase-cta-bar__title {
    font-size: clamp(1.375rem, 3vw, 2rem);
    font-weight: 500;
    color: var(--white);
    letter-spacing: -.025em;
    line-height: 1.2;
    max-width: 36ch;
}
.showcase-cta-bar__title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
}
/* Hotel showcase cards */
.showcase-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 1rem;
}
.showcase-photo-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-height: 420px;
}
.showcase-photo-card img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.showcase-photo-card:hover img { transform: scale(1.04); }
.showcase-photo-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8,8,8,.78) 0%, transparent 55%);
}
.showcase-photo-card__content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.75rem;
}
.showcase-photo-card__name {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: -.015em;
    margin-bottom: .3rem;
}
.showcase-photo-card__loc {
    font-size: .8125rem;
    color: rgba(255,255,255,.5);
    letter-spacing: .04em;
}
.showcase-photo-card__btn {
    margin-top: 1rem;
}
.showcase-info-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-xl);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 195px;
}
.showcase-info-card__hotel {
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
}
.showcase-info-card__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: -.015em;
    line-height: 1.3;
}
.showcase-info-card__sub {
    font-size: .875rem;
    color: rgba(255,255,255,.45);
    line-height: 1.65;
}
.showcase-info-card__link {
    margin-top: auto;
    font-size: .8125rem;
    font-weight: 600;
    color: #e9a65c;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    transition: gap var(--t-base) var(--ease-out);
}
.showcase-info-card__link:hover { gap: .7rem; }

/* Right column in showcase: stack 2 info cards */
.showcase-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── STRAVOREX RESPONSIVE ──────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-v2__inner        { grid-template-columns: 1fr; }
    .booking-widget        { max-width: 380px; }
    .bento-grid            { grid-template-columns: 1fr 1fr; }
    .services-split        { grid-template-columns: 1fr; }
    .services-split__photo { min-height: 380px; position: relative; }
    .metrics-top           { grid-template-columns: 1fr 1fr; }
    .showcase-grid         { grid-template-columns: 1fr 1fr; }
    .showcase-col          { flex-direction: row; }
}

@media (max-width: 768px) {
    .bento-grid            { grid-template-columns: 1fr; }
    .metrics-top           { grid-template-columns: 1fr; }
    .metrics-bottom        { grid-template-columns: 1fr; }
    .showcase-grid         { grid-template-columns: 1fr; }
    .showcase-col          { flex-direction: column; }
    .showcase-cta-bar      { flex-direction: column; align-items: flex-start; }
    .partner-strip__inner  { gap: 1.5rem; }
}

@media (max-width: 480px) {
    .hero-v2__title        { font-size: 2.5rem; }
    .hero-v2__actions      { flex-direction: column; align-items: flex-start; }
    .booking-widget        { max-width: 100%; }
}

/* ============================================================
   STRAVOREX TYPOGRAPHY NORMALIZATION
   Display titles + large numerals → Marcellus 400 (size over weight)
   ============================================================ */
.hero__title, .hero-v2__title,
.about-strip__title, .services-section__title, .hotels-section__title,
.stats-section__title, .cta-band__title, .page-header__title,
.bento-section__title, .services-split__title, .showcase-cta-bar__title,
.booking-form-title, .contact-form-title, .hotel-hero__name,
.error-page__title, .error-page__code,
.stat-item__num, .m-card__num, .service-block__num {
    font-family: var(--sans) !important;
    font-weight: 400 !important;
    letter-spacing: -.04rem;
}

/* Agrisol h-section scale: one restrained size for ALL section titles */
.about-strip__title, .services-section__title, .hotels-section__title,
.stats-section__title, .cta-band__title,
.bento-section__title, .services-split__title, .showcase-cta-bar__title,
.section-head__title, .svc-detail-overview__title, .exp-carousel__title,
.hotel-gallery__title, .hotel-about__title, .conference__title,
.book-split__title, .contact-map__title, .booking-card__title,
.contact-form-card__title, .svc-row__title, .hotel-counter__title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.2;
    font-weight: 400;
}

/* Agrisol stat scale */
.m-card__num, .stat-item__num, .svc-stat__value {
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    font-weight: 400;
    letter-spacing: -.03em;
}

/* Neutralize faux-italic accent words (Marcellus has no italic) */
.hero__title em, .hero-v2__title em, .about-strip__title em,
.services-split__title em, .showcase-cta-bar__title em,
h1 em, h2 em, h3 em {
    font-style: normal !important;
}

/* Refine small card/sub titles in General Sans (medium, not heavy) */
.bento-card__title, .service-row__title, .value-card__title,
.hotel-card__name, .showcase-info-card__title,
.room-card__name, .footer__heading {
    font-family: var(--sans);
    font-weight: 500;
}

/* ============================================================
   CONTACT PAGE (Stravorex contact-one)
   ============================================================ */
.contact-split {
    background: var(--off-white);
    padding: 6rem var(--gutter) 5rem;
}
.contact-split__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Left: form card */
.contact-form-card {
    background: var(--white);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: var(--shadow-sm);
}
.contact-form-card__title {
    font-size: clamp(1.625rem, 3vw, 2.375rem);
    margin-bottom: .65rem;
}
.contact-form-card__sub {
    font-size: .9375rem;
    color: var(--mid);
    line-height: 1.7;
    margin-bottom: 2.25rem;
    max-width: 46ch;
}
.contact-form-card label .req { color: var(--gold); margin-left: .15rem; }

/* Right: aside (image + forest-green detail panel) */
.contact-aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 6rem;
}
.contact-aside__img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.contact-details {
    background: var(--green);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem 1.875rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1.5rem;
}
.contact-detail--wide { grid-column: 1 / -1; }
.contact-detail__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .45rem;
}
.contact-detail__value {
    font-size: .9375rem;
    color: rgba(255,255,255,.82);
    line-height: 1.7;
}
.contact-detail__value a {
    color: rgba(255,255,255,.82);
    transition: color var(--t-base) ease;
}
.contact-detail__value a:hover { color: var(--gold); }

/* Map */
.contact-map {
    background: var(--off-white);
    padding: 0 var(--gutter) 6rem;
}
.contact-map__inner {
    max-width: var(--max-w);
    margin-inline: auto;
}
.contact-map__head {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 2rem;
}
.contact-map__title { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.contact-map__frame {
    width: 100%;
    height: 440px;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    filter: grayscale(.25) contrast(1.05);
    display: block;
}

/* ── LOGO MARQUEE (auto-scroll) ───────────────────────────── */
.logo-marquee {
    background: var(--ink);
    padding: 3.25rem 0;
    overflow: hidden;
}
.logo-marquee__label {
    text-align: center;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    margin-bottom: 2.25rem;
}
.logo-marquee__viewport {
    position: relative;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    width: max-content;
    animation: marquee 36s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__item {
    font-family: var(--serif);
    font-size: clamp(1.125rem, 2.2vw, 1.625rem);
    color: rgba(255,255,255,.5);
    white-space: nowrap;
    letter-spacing: .01em;
    transition: color var(--t-base) ease;
}
.logo-marquee__item:hover { color: var(--gold); }
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .logo-marquee__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 1.5rem 3rem;
    }
}

/* Contact responsive */
@media (max-width: 900px) {
    .contact-split__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .contact-aside        { position: static; }
}
@media (max-width: 480px) {
    .contact-details { grid-template-columns: 1fr; }
    .contact-map__frame { height: 320px; }
}

/* ============================================================
   HOTEL DETAIL PAGE (data-driven, Stravorex style)
   ============================================================ */

/* Hero additions */
.hotel-hero__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    width: 100%;
}
.hotel-hero__tagline {
    font-family: var(--serif);
    font-size: clamp(1.125rem, 2.2vw, 1.625rem);
    color: rgba(255,255,255,.85);
    margin-top: -.5rem;
    margin-bottom: 1.75rem;
}

/* Shared left-aligned section header */
.section-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.75rem;
}
.section-head__title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.1;
}

/* Generic arrow link */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid currentColor;
    padding-bottom: .35rem;
    width: fit-content;
    transition: gap var(--t-base) var(--ease-out), color var(--t-base) ease;
}
.link-arrow:hover { gap: .85rem; color: var(--green); }

/* About + facts */
.hotel-about {
    background: var(--off-white);
    padding: 6rem var(--gutter);
}
.hotel-about__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 4rem;
    align-items: start;
}
.hotel-about__main { display: flex; flex-direction: column; gap: 1.25rem; }
.hotel-about__main .pill { align-self: flex-start; }
.hotel-about__title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.12;
    margin-bottom: .5rem;
}
.hotel-about__desc {
    font-size: 1rem;
    color: var(--mid);
    line-height: 1.9;
}

/* Quick facts card */
.hotel-facts {
    position: sticky;
    top: 6rem;
    background: var(--white);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--radius-lg);
    padding: 2rem 1.875rem;
    box-shadow: var(--shadow-sm);
}
.hotel-facts__title {
    font-family: var(--serif);
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}
.hotel-facts__item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.hotel-facts__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
}
.hotel-facts__value { font-size: .9375rem; color: var(--ink); line-height: 1.55; }
.hotel-facts__cta { width: 100%; justify-content: center; margin-top: .75rem; }
.hotel-facts__cta:first-of-type { margin-top: 1.5rem; }

/* WhatsApp button */
.btn--wa {
    background: #25d366;
    color: #05391b;
    border-color: #25d366;
    gap: .55rem;
    padding-left: 1.3rem;
}
.btn--wa:hover { background: #1ebe5b; border-color: #1ebe5b; }
.btn--wa::after { display: none; }

/* Rooms */
.hotel-rooms {
    background: var(--white);
    padding: 6rem var(--gutter);
    scroll-margin-top: 90px;
}
.hotel-rooms__inner { max-width: var(--max-w); margin-inline: auto; }

/* Experiences carousel */
.exp-carousel {
    background: var(--off-white);
    padding: 6rem 0;
    overflow: hidden;
}
.exp-carousel__head {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
.exp-carousel__intro { max-width: 640px; display: flex; flex-direction: column; gap: 1.25rem; }
.exp-carousel__title { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.08; }
.exp-carousel__lead { font-size: .9375rem; color: var(--mid); line-height: 1.75; max-width: 46ch; }
.exp-carousel__nav { display: flex; gap: .75rem; }
.exp-arrow {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.18);
    background: transparent;
    color: var(--ink);
    font-size: 1.125rem;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-base) ease, color var(--t-base) ease, border-color var(--t-base) ease;
}
.exp-arrow:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.exp-arrow:disabled { opacity: .35; cursor: default; }
.exp-carousel__track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-inline: var(--gutter);
    padding-bottom: 1rem;
    scrollbar-width: none;
}
.exp-carousel__track::-webkit-scrollbar { display: none; }
.exp-card {
    position: relative;
    flex: 0 0 clamp(260px, 30vw, 340px);
    aspect-ratio: 3/4;
    border-radius: var(--radius-md);
    overflow: hidden;
    scroll-snap-align: start;
}
.exp-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.exp-card:hover .exp-card__img { transform: scale(1.05); }
.exp-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,8,8,.7) 0%, transparent 55%);
}
.exp-card__label {
    position: absolute;
    bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
    color: var(--white);
    font-size: 1.375rem;
}

/* Gallery strip */
.hotel-gallery {
    background: var(--off-white);
    padding: 4rem 0 6rem;
}
.hotel-gallery__head {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.5rem;
    align-items: end;
    margin-bottom: 2.5rem;
}
.hotel-gallery__title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.08; }
.hotel-gallery__intro { display: flex; flex-direction: column; gap: 1.25rem; }
.hotel-gallery__intro p { font-size: .9375rem; color: var(--mid); line-height: 1.75; }
.hotel-gallery__viewport {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.hotel-gallery__track {
    display: flex;
    gap: 4px;
    width: max-content;
    animation: galleryScroll 45s linear infinite;
}
.hotel-gallery:hover .hotel-gallery__track { animation-play-state: paused; }
.hotel-gallery__track img {
    flex: 0 0 auto;
    width: clamp(240px, 26vw, 360px);
    height: 440px;
    object-fit: cover;
}
@keyframes galleryScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hotel-gallery__track { animation: none; flex-wrap: wrap; width: 100%; }
}

/* Amenities */
.hotel-amenities {
    background: var(--white);
    padding: 6rem var(--gutter);
}
.hotel-amenities__inner { max-width: var(--max-w); margin-inline: auto; }

/* Book a room split */
.book-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
}
.book-split__media { position: relative; overflow: hidden; }
.book-split__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.book-split__media-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,8,8,.55), rgba(8,8,8,.15));
}
.book-split__media-title {
    position: absolute;
    bottom: 3rem; left: clamp(1.5rem, 4vw, 3.5rem);
    color: var(--white);
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1;
}
.book-split__panel {
    background: var(--green);
    color: var(--white);
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}
.book-split__title { font-size: clamp(1.875rem, 4vw, 3rem); color: var(--white); line-height: 1.08; }
.book-split__sub { font-size: .9375rem; color: rgba(255,255,255,.7); line-height: 1.7; max-width: 48ch; }
.book-split__form { display: flex; flex-direction: column; gap: 1.25rem; margin-top: .5rem; }
.book-split__row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; }
.book-split__row--3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
.book-split__form .form-group { gap: .4rem; margin-bottom: 0; min-width: 0; }
.book-split__form label {
    font-size: .8125rem;
    font-weight: 500;
    color: rgba(255,255,255,.75);
}
.book-split__form input,
.book-split__form select {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.2);
    color: var(--white);
    border-radius: var(--radius-sm);
    min-height: 48px;
}
.book-split__form input::placeholder { color: rgba(255,255,255,.45); }
.book-split__form input:focus,
.book-split__form select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(233,166,92,.2);
    background: rgba(255,255,255,.1);
}
.book-split__form select option { color: var(--ink); }
.book-split__submit { align-self: flex-start; margin-top: .5rem; }

/* Hotel detail responsive */
@media (max-width: 1024px) {
    .hotel-about__inner    { grid-template-columns: 1fr; gap: 2.5rem; }
    .hotel-facts           { position: static; }
    .hotel-gallery__head   { grid-template-columns: 1fr; gap: 1.25rem; }
    .book-split            { grid-template-columns: 1fr; }
    .book-split__media     { min-height: 320px; }
}
@media (max-width: 600px) {
    .book-split__row, .book-split__row--3 { grid-template-columns: 1fr 1fr; }
    .hotel-gallery__strip img { height: 320px; }
}

/* ============================================================
   SERVICES — home cards, listing rows, detail page
   ============================================================ */

/* Home "Our Services" cards */
.home-services {
    background: var(--white);
    padding: 7rem var(--gutter);
}
.home-services__inner { max-width: var(--max-w); margin-inline: auto; }
.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 3rem;
}
.svc-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--light-bg);
    border-radius: var(--radius-xl);
    padding: 2rem 1.75rem;
    min-height: 280px;
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) ease;
}
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.svc-card__icon {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .5rem;
}
.svc-card__icon svg { width: 26px; height: 26px; }
.svc-card__title { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.svc-card__desc { font-size: .875rem; color: var(--mid); line-height: 1.7; flex: 1; }
.svc-card__link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--green);
    transition: gap var(--t-base) var(--ease-out);
}
.svc-card:hover .svc-card__link { gap: .75rem; }

/* Services listing rows (with image) */
.svc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding: 4.5rem 0;
    border-bottom: var(--border-sand);
    scroll-margin-top: 100px;
}
.svc-row:last-of-type { border-bottom: none; }
.svc-row--reverse .svc-row__media { order: 2; }
.svc-row__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
}
.svc-row__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-row__num {
    position: absolute;
    top: 1rem; left: 1.25rem;
    font-family: var(--serif);
    font-size: 2.5rem;
    color: var(--white);
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.svc-row__title { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1.25rem; }
.svc-row__desc { font-size: 1rem; color: var(--mid); line-height: 1.85; margin-bottom: 1.5rem; }
.svc-row__btn { margin-top: 1.25rem; }

/* Service detail — overview split */
.svc-detail-overview {
    background: var(--off-white);
    padding: 6rem var(--gutter);
}
.svc-detail-overview__inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.svc-detail-overview__main { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.svc-detail-overview__title { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.1; }
.svc-detail-overview__desc { font-size: 1rem; color: var(--mid); line-height: 1.85; }
.svc-detail-overview__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.svc-detail-overview__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-stats { display: flex; gap: 3rem; margin-top: 1rem; }
.svc-stat { display: flex; flex-direction: column; gap: .25rem; }
.svc-stat__value { font-family: var(--serif); font-size: clamp(2.25rem, 5vw, 3.25rem); color: var(--green); line-height: 1; }
.svc-stat__label { font-size: .8125rem; color: var(--mid); letter-spacing: .02em; max-width: 18ch; }

/* Service detail — included */
.svc-included { background: var(--white); padding: 6rem var(--gutter); }
.svc-included__inner { max-width: var(--max-w); margin-inline: auto; }
.svc-included__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2.5rem;
}
.svc-included__item {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.svc-included__item p { font-size: 1rem; color: var(--ink); line-height: 1.5; }
.svc-included__check {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--sea-mist);
    color: var(--green);
    display: flex; align-items: center; justify-content: center;
}
.svc-included__check svg { width: 16px; height: 16px; }

/* Service detail — process */
.svc-process { background: var(--light-bg); padding: 6rem var(--gutter); }
.svc-process__inner { max-width: var(--max-w); margin-inline: auto; }
.svc-process__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.svc-step {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    display: flex; flex-direction: column; gap: .65rem;
}
.svc-step__num { font-family: var(--serif); font-size: 2.25rem; color: var(--gold); line-height: 1; }
.svc-step__title { font-size: 1.125rem; font-weight: 500; }
.svc-step__text { font-size: .875rem; color: var(--mid); line-height: 1.7; }

/* Service detail — other services */
.svc-others { background: var(--white); padding: 6rem var(--gutter); }
.svc-others__inner { max-width: var(--max-w); margin-inline: auto; }
.svc-others__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.svc-other-card {
    display: flex; flex-direction: column; gap: .5rem;
    background: var(--light-bg);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) ease;
}
.svc-other-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.svc-other-card__num { font-family: var(--serif); font-size: 1.75rem; color: var(--gold); }
.svc-other-card__title { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; }
.svc-other-card__tagline { font-size: .875rem; color: var(--mid); line-height: 1.6; margin-bottom: .75rem; flex: 1; }

/* Services responsive */
@media (max-width: 1024px) {
    .svc-grid           { grid-template-columns: 1fr 1fr; }
    .svc-process__grid  { grid-template-columns: 1fr 1fr; }
    .svc-others__grid   { grid-template-columns: 1fr; }
    .svc-detail-overview__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 768px) {
    .svc-row            { grid-template-columns: 1fr; gap: 1.75rem; }
    .svc-row--reverse .svc-row__media { order: 0; }
    .svc-included__grid { grid-template-columns: 1fr; gap: 0 2.5rem; }
}
@media (max-width: 600px) {
    .svc-grid           { grid-template-columns: 1fr; }
    .svc-process__grid  { grid-template-columns: 1fr; }
    .svc-stats          { gap: 2rem; }
}

/* ============================================================
   HOME — booking hero form, featured hotels, conference
   ============================================================ */

/* Hero booking form — light card, contrasts with the green hero */
.hero-book {
    background: var(--cream);
    border: 1px solid rgba(2,14,13,.06);
    border-radius: var(--radius-lg);
    padding: 1.875rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 30px 70px rgba(0,0,0,.28);
}
.hero-book__title {
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: .25rem;
}
.hero-book__row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .75rem; }
.hero-book__field { gap: .35rem; margin-bottom: 0; min-width: 0; }
.hero-book__field label { font-size: .75rem; font-weight: 500; color: var(--mid); }
.hero-book__field input,
.hero-book__field select {
    background: var(--white);
    border: 1.5px solid var(--sand-dark);
    color: var(--ink);
    min-height: 46px;
    border-radius: var(--radius-sm);
}
.hero-book__field input:focus,
.hero-book__field select:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,61,54,.12);
}
.hero-book__submit { width: 100%; justify-content: center; margin-top: .5rem; }
.hero-book__note { font-size: .75rem; color: var(--mid); text-align: center; }

/* Featured hotels */
.featured-hotels { background: var(--off-white); padding: 6rem var(--gutter); }
.featured-hotels__inner { max-width: var(--max-w); margin-inline: auto; }
.featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.featured-card {
    display: flex; flex-direction: column;
    background: var(--white);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) ease;
}
.featured-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.featured-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.featured-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.featured-card:hover .featured-card__media img { transform: scale(1.05); }
.featured-card__tag {
    position: absolute; top: 1rem; left: 1rem;
    background: rgba(255,255,255,.92); color: var(--ink);
    font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    padding: .4rem .8rem; border-radius: var(--radius-full);
}
.featured-card__body { padding: 1.75rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.featured-card__name { font-size: 1.375rem; }
.featured-card__loc { font-size: .8125rem; color: var(--gold); font-weight: 500; letter-spacing: .02em; }
.featured-card__desc { font-size: .9rem; color: var(--mid); line-height: 1.7; flex: 1; margin: .35rem 0 1.25rem; }
.featured-card__actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Conference & events */
.conference { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; scroll-margin-top: 80px; }
.conference__media { position: relative; overflow: hidden; }
.conference__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.conference__media-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(8,8,8,.15), rgba(21,36,27,.55)); }
.conference__panel {
    background: var(--green); color: var(--white);
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem);
    display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;
}
.conference__eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.conference__title { font-size: clamp(1.875rem, 4vw, 3rem); color: var(--white); line-height: 1.1; }
.conference__sub { font-size: .9375rem; color: rgba(255,255,255,.72); line-height: 1.8; max-width: 48ch; }
.conference__list { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; margin: .25rem 0; }
.conference__list li { position: relative; padding-left: 1.5rem; font-size: .9375rem; color: rgba(255,255,255,.85); }
.conference__list li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.conference__actions { display: flex; gap: .875rem; flex-wrap: wrap; margin-top: .5rem; }

@media (max-width: 768px) {
    .featured-grid     { grid-template-columns: 1fr; }
    .conference        { grid-template-columns: 1fr; }
    .conference__media { min-height: 280px; }
    .conference__list  { grid-template-columns: 1fr; }
}

/* ============================================================
   SCROLL REVEAL (added via JS; degrades gracefully)
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s var(--ease-out);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   DYNAMIC HOTEL COUNTER / SLIDER (DB-driven, in showcase section)
   ============================================================ */
.hotel-counter { display: flex; flex-direction: column; gap: 1.5rem; }
.hotel-counter__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.hotel-counter__eyebrow {
    display: block;
    font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold); margin-bottom: .5rem;
}
.hotel-counter__title { font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--white); }
.hotel-counter__nav { display: flex; align-items: center; gap: 1.25rem; }
.hotel-counter__count {
    font-size: .9375rem; font-weight: 600; letter-spacing: .12em;
    color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums;
}
.hotel-counter__arrow {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    background: transparent; color: var(--white); font-size: 1.0625rem;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--t-base) ease, color var(--t-base) ease, border-color var(--t-base) ease;
}
.hotel-counter__arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.hotel-counter__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: var(--radius-lg);
}
.hotel-counter__track::-webkit-scrollbar { display: none; }
.hotel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    min-height: 440px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.hotel-slide__media { position: relative; min-height: 280px; }
.hotel-slide__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hotel-slide__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(0,61,54,.45)); }
.hotel-slide__body {
    padding: clamp(1.75rem, 3vw, 3rem);
    display: flex; flex-direction: column; justify-content: center; gap: 1rem;
}
.hotel-slide__loc { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--gold); }
.hotel-slide__name { font-size: clamp(1.5rem, 2.5vw, 2rem); color: var(--white); }
.hotel-slide__desc { font-size: .9375rem; color: rgba(255,255,255,.65); line-height: 1.8; }
.hotel-slide__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }

@media (max-width: 768px) {
    .hotel-slide { grid-template-columns: 1fr; }
    .hotel-slide__media { min-height: 220px; }
}

/* ============================================================
   HERO V3 — centered, Mirall-inspired (inline image pills)
   ============================================================ */
.hero-v3 {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--green);
}
.hero-v3::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(110% 70% at 50% 0%, rgba(233,166,92,.09) 0%, transparent 55%),
        radial-gradient(80% 60% at 50% 110%, rgba(255,255,255,.05) 0%, transparent 60%);
    pointer-events: none;
}
.hero-v3__inner {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin-inline: auto;
    width: 100%;
    padding: 8.5rem var(--gutter) 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.75rem;
}
.hero-v3__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .875rem;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.hero-v3__eyebrow::before,
.hero-v3__eyebrow::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: rgba(255,255,255,.25);
}
.hero-v3__title {
    font-size: clamp(2.5rem, 6.2vw, 4.75rem);
    font-weight: 500;
    color: var(--white);
    line-height: 1.12;
    letter-spacing: -.025em;
    max-width: 18ch;
}
.hero-v3__title em { color: var(--gold); }
/* Inline image pill inside the headline */
.hero-v3__pic {
    display: inline-block;
    width: 2.1em;
    height: .82em;
    border-radius: var(--radius-full);
    overflow: hidden;
    vertical-align: -.08em;
    margin: 0 .08em;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 8px 24px rgba(0,0,0,.25);
    transition: transform var(--t-base) var(--ease-out);
}
.hero-v3__pic:hover { transform: scale(1.06); }
.hero-v3__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-v3__sub {
    font-size: 1rem;
    color: rgba(255,255,255,.6);
    line-height: 1.8;
    max-width: 52ch;
    font-weight: 300;
}

/* Horizontal booking bar */
.hero-bar {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 920px;
    background: var(--cream);
    border: 1px solid rgba(2,14,13,.06);
    border-radius: var(--radius-md);
    padding: .625rem;
    margin-top: .75rem;
    box-shadow: 0 30px 70px rgba(0,0,0,.3);
}
.hero-bar__field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem 1.1rem;
    border-left: 1px solid rgba(2,14,13,.08);
    text-align: left;
}
.hero-bar__field:first-child { border-left: none; }
.hero-bar__field--sm { flex: 0 1 110px; }
.hero-bar__field label {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mid);
}
.hero-bar__field input,
.hero-bar__field select {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: var(--sans);
    font-size: .9375rem;
    color: var(--ink);
    padding: .15rem 0;
    appearance: none;
    -webkit-appearance: none;
}
.hero-bar__field input:focus,
.hero-bar__field select:focus { outline: none; }
.hero-bar__field:focus-within label { color: var(--green); }
.hero-bar__submit {
    align-self: center;
    flex-shrink: 0;
    margin-left: .5rem;
    padding: 1rem 1.75rem;
}

/* Meta row under the bar */
.hero-v3__meta {
    display: flex;
    align-items: center;
    gap: .875rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: .8125rem;
    color: rgba(255,255,255,.5);
}
.hero-v3__meta a {
    color: rgba(255,255,255,.75);
    border-bottom: 1px solid rgba(255,255,255,.3);
    padding-bottom: 1px;
    transition: color var(--t-base) ease, border-color var(--t-base) ease;
}
.hero-v3__meta a:hover { color: var(--gold); border-color: var(--gold); }
.hero-v3__meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
}

/* Hero V3 responsive */
@media (max-width: 900px) {
    .hero-bar {
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: .25rem;
        padding: 1rem;
    }
    .hero-bar__field {
        border-left: none;
        border-bottom: 1px solid rgba(2,14,13,.08);
        padding: .65rem .25rem;
    }
    .hero-bar__field--sm { flex: initial; }
    .hero-bar__field:nth-child(1) { grid-column: 1 / -1; }
    .hero-bar__submit {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-top: .75rem;
    }
}
@media (max-width: 480px) {
    .hero-v3__inner { padding-top: 7rem; gap: 1.5rem; }
    .hero-v3__title { font-size: 2.25rem; }
    .hero-v3__pic { width: 1.9em; height: .78em; }
}

/* ============================================================
   HERO V4 — Jost-style: full-bleed photo, glass pill booking bar
   ============================================================ */
.hero-v4 {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: var(--green);
    border-radius: 0 0 50% 50% / 0 0 48px 48px;
    margin-bottom: -1px;
}
.hero-v4__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kenBurns 22s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes kenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}
.hero-v4__overlay {
    position: absolute;
    inset: 0;
    /* Agrisol-style: strong green at top + bottom, lighter middle, left-weighted for text legibility */
    background:
        linear-gradient(180deg, rgba(2,14,13,.78) 0%, rgba(2,14,13,.22) 28%, rgba(0,61,54,.28) 55%, rgba(0,61,54,.9) 100%),
        linear-gradient(90deg, rgba(2,14,13,.62) 0%, rgba(2,14,13,.12) 55%, rgba(2,14,13,0) 80%);
    z-index: 1;
}
.hero-v4__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-w);
    margin-inline: auto;
    width: 100%;
    padding: 11rem var(--gutter) 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}
.hero-v4__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
    gap: 3rem;
}
.hero-v4__title {
    font-size: clamp(2.6rem, 5vw, 4.25rem);
    font-weight: 400;
    color: var(--white);
    line-height: 1.08;
    letter-spacing: -.05rem;
}
.hero-v4__title em { color: var(--gold); }
.hero-v4__sub {
    font-size: 1rem;
    color: rgba(255,255,255,.72);
    line-height: 1.7;
    max-width: 46ch;
    font-weight: 300;
    margin-top: 1.25rem;
}
.hero-v4__perks {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    align-items: flex-end;
    text-align: right;
}
.hero-v4__perks li {
    font-size: .9375rem;
    color: rgba(255,255,255,.82);
    letter-spacing: .01em;
}

/* Glass pill booking bar */
.hbar {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    flex-wrap: wrap;
}
.hbar__pill {
    flex: 1 1 0;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;
    padding: .7rem 1.5rem;
    min-height: 60px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    transition: background var(--t-base) ease, border-color var(--t-base) ease;
}
.hbar__pill:focus-within {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.4);
}
.hbar__pill--sm { flex: 0 1 130px; min-width: 110px; }
.hbar__pill label {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}
.hbar__pill input,
.hbar__pill select {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: var(--sans);
    font-size: .9375rem;
    color: var(--white);
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}
.hbar__pill input:focus,
.hbar__pill select:focus { outline: none; }
.hbar__pill input[type="date"] { color-scheme: dark; }
.hbar__pill select option { color: var(--ink); }
.hbar__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 0 2rem;
    min-height: 60px;
    border-radius: var(--radius-full);
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 500;
    border: none;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) ease;
    box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.hbar__submit:hover { transform: translateY(-2px); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.hbar__submit::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
}

/* Hero entrance animation */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
.hero-v4 [data-rise] {
    animation: heroRise .8s var(--ease-out) both;
}
.hero-v4 [data-rise="2"] { animation-delay: .15s; }
.hero-v4 [data-rise="3"] { animation-delay: .3s; }
.hero-v4 [data-rise="4"] { animation-delay: .45s; }

/* Hero V4 responsive */
@media (max-width: 1024px) {
    .hero-v4__top { grid-template-columns: 1fr; align-items: start; }
    .hero-v4__perks { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: .6rem 1.5rem; }
}
@media (max-width: 900px) {
    .hero-v4 { border-radius: 0 0 50% 50% / 0 0 28px 28px; }
    .hbar { flex-direction: column; }
    .hbar__pill, .hbar__pill--sm { flex: 1 1 auto; width: 100%; }
    .hbar__submit { width: 100%; justify-content: center; }
}

/* Stagger helper for revealed card children */
.reveal-item {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s var(--ease-out);
}
.reveal-item.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-v4 [data-rise] { animation: none !important; }
    .hero-v4__bg { animation: none !important; }
}

/* ============================================================
   IMAGE MOTION — slow Ken-Burns zoom on feature images
   (cards keep their hover-zoom; these are the non-hover images)
   ============================================================ */
.conference__media img,
.book-split__media img,
.svc-detail-overview__media img,
.m-photo-card img,
.hotel-slide__media img,
.hotel-about__media img {
    animation: kenBurns 20s ease-in-out infinite alternate;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .conference__media img,
    .book-split__media img,
    .svc-detail-overview__media img,
    .m-photo-card img,
    .hotel-slide__media img,
    .hotel-about__media img { animation: none; }
}

/* ============================================================
   SERVICE PHOTO GRID (ushers) — small corner radius
   ============================================================ */
.svc-gallery { background: var(--off-white); padding: 5rem var(--gutter); }
.svc-gallery__inner { max-width: var(--max-w); margin-inline: auto; }
.svc-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.svc-gallery__item {
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 4px;
    background: var(--light-bg);
}
.svc-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.svc-gallery__item:hover img { transform: scale(1.06); }
@media (max-width: 900px) { .svc-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .svc-gallery__grid { grid-template-columns: repeat(2, 1fr); } }