/* ══════════════════════════════════════════════
THINGS TO DO IN ARUSHA 2026–2027
Resilience Expedition
Aesthetic: African Dusk — warm terracotta,
deep forest green, ivory & volcanic stone
Font: Fraunces (editorial serif) + Plus Jakarta Sans
══════════════════════════════════════════════ */

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

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

body {
font-family: var(--body);
background: var(--bg);
color: var(--ink);
line-height: 1.72;
overflow-x: hidden;
-webkit-font-smoothing: antialiased
}

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

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

button,
input,
select,
textarea {
font-family: inherit
}

ul,
ol {
list-style: none
}

:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px
}

:root {
/* Arusha palette — terracotta, forest, stone */
--night: #080A06;
--forest-dk: #0C1A0E;
--forest: #1A3C1E;
--forest-md: #264D2A;
--forest-lt: #356638;
--sage: #4A7A4E;
--terra: #C06030;
--terra-lt: #D8804A;
--amber: #C89230;
--amber-lt: #E0AA48;
--gold: #D4A828;
--gold-lt: #ECC048;
--gold-pale: #FBF4DC;
--meru: #5A4A3A;
/* Mt Meru stone */
--meru-lt: #8A7060;
--bg: #F6F2EA;
--sand-100: #FDFAF4;
--sand-200: #F4EFE4;
--sand-300: #EAE3D4;
--ivory: #FEFCF8;
--ink: #180E06;
--body-dk: #2A1C0E;
--body-md: #3C2C1A;
--body-lt: #604830;
--muted: #8A7458;
--border: rgba(160, 120, 60, .16);
--border-md: rgba(160, 120, 60, .3);
--shadow-sm: 0 2px 12px rgba(8, 6, 2, .08);
--shadow-md: 0 8px 36px rgba(8, 6, 2, .13);
--shadow-lg: 0 20px 72px rgba(8, 6, 2, .22);
--accent: var(--terra);
--body: 'Plus Jakarta Sans', -apple-system, sans-serif;
--display: 'Fraunces', Georgia, serif;
/* Categories */
--cat-nature: #1A3C1E;
--cat-culture: #6A3A18;
--cat-safari: #C06030;
--cat-food: #8A5A18;
--cat-hike: #3A5A2A;
--cat-city: #4A3A6A;
--cat-daytrip: #1A4A6A;
--cat-relax: #5A3A4A;
/* Spacing */
--s1: .25rem;
--s2: .5rem;
--s3: .75rem;
--s4: 1rem;
--s5: 1.25rem;
--s6: 1.5rem;
--s8: 2rem;
--s10: 2.5rem;
--s12: 3rem;
--s16: 4rem;
/* Radius */
--r-xs: 4px;
--r-sm: 6px;
--r-md: 12px;
--r-lg: 18px;
--r-xl: 24px;
--r-pill: 100px;
--ease: .22s cubic-bezier(.4, 0, .2, 1);
--max: 1260px;
}

/* ── UTILITIES ── */
.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
}

.skip-link {
position: absolute;
top: -100%;
left: 1rem;
z-index: 9999;
background: var(--forest-dk);
color: #fff;
padding: .5rem 1.5rem;
border-radius: 4px;
font-size: 14px;
transition: top var(--ease)
}

.skip-link:focus {
top: .75rem
}

#read-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: linear-gradient(90deg, var(--terra), var(--amber));
z-index: 600;
pointer-events: none;
transition: width .12s linear
}

/* ════════════ HEADER ════════════ */
.site-header {
position: sticky;
top: 0;
z-index: 500;
background: rgba(8, 10, 6, .97);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(192, 96, 48, .25)
}

.hdr-inner {
max-width: var(--max);
margin: 0 auto;
padding: 0 clamp(1rem, 4vw, 1.5rem);
display: flex;
align-items: center;
justify-content: space-between;
height: clamp(56px, 8vw, 64px);
gap: 1rem
}

.logo {
display: flex;
align-items: center;
gap: .65rem;
flex-shrink: 0
}

.logo img {
width: 36px;
height: 36px;
border-radius: 5px;
object-fit: contain
}

.logo-words {
display: flex;
flex-direction: column;
line-height: 1.1
}

.logo-name {
font-family: var(--display);
font-size: clamp(.82rem, 2.3vw, .96rem);
font-weight: 700;
color: #fff;
letter-spacing: .01em;
white-space: nowrap
}

.logo-sub {
font-size: 8px;
color: rgba(255, 255, 255, .32);
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap
}

.hdr-hamburger {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: .5rem;
border-radius: 4px
}

.hdr-hamburger span {
display: block;
width: 20px;
height: 2px;
background: rgba(255, 255, 255, .82);
border-radius: 2px;
transition: transform var(--ease), opacity var(--ease)
}

.hdr-hamburger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg)
}

.hdr-hamburger[aria-expanded="true"] span:nth-child(2) {
opacity: 0
}

.hdr-hamburger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg)
}

.hdr-nav {
display: none;
flex-direction: column;
padding-bottom: 1rem;
border-top: 1px solid rgba(255, 255, 255, .07)
}

.hdr-nav.open {
display: flex
}

.hdr-links {
display: flex;
flex-direction: column;
gap: 2px;
padding: .5rem 0
}

.hdr-links a {
display: block;
padding: .55rem .75rem;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, .68);
border-radius: 5px;
transition: background var(--ease), color var(--ease)
}

.hdr-links a:hover,
.hdr-links a[aria-current="page"] {
background: rgba(192, 96, 48, .2);
color: #fff
}

.hdr-cta {
margin-top: .5rem;
padding: .6rem 1.5rem;
background: var(--terra);
color: #fff;
border-radius: var(--r-pill);
font-size: 13.5px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background var(--ease);
white-space: nowrap;
align-self: flex-start
}

.hdr-cta:hover {
background: var(--terra-lt)
}

@media(min-width:768px) {
.hdr-hamburger {
display: none
}

.hdr-nav {
display: flex !important;
flex-direction: row;
align-items: center;
padding-bottom: 0;
border-top: none;
gap: .2rem
}

.hdr-links {
flex-direction: row;
padding: 0
}

.hdr-links a {
font-size: 13px;
padding: .38rem .65rem
}

.hdr-cta {
margin-top: 0;
margin-left: .5rem;
padding: .42rem 1.2rem
}
}

/* ── BREADCRUMB ── */
.bc-wrap {
background: var(--forest-dk);
border-bottom: 1px solid rgba(192, 96, 48, .18)
}

.bc-inner {
max-width: var(--max);
margin: 0 auto;
padding: .45rem clamp(1rem, 4vw, 1.5rem);
display: flex;
gap: .4rem;
align-items: center;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
font-size: 11.5px;
color: rgba(255, 255, 255, .35)
}

.bc-inner::-webkit-scrollbar {
display: none
}

.bc-inner a {
color: rgba(255, 255, 255, .52);
transition: color var(--ease)
}

.bc-inner a:hover {
color: var(--amber-lt)
}

.bc-inner .bc-sep {
opacity: .3
}

.bc-inner .bc-cur {
color: rgba(255, 255, 255, .78);
font-weight: 500
}

/* ════════════ HERO ════════════ */
.page-hero {
position: relative;
min-height: clamp(500px, 65vw, 780px);
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--forest-dk)
}

.hero-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
transform: scale(1.06);
transition: transform 14s ease-out;
filter: saturate(1.2) brightness(.54)
}

.page-hero.loaded .hero-bg-img {
transform: scale(1)
}

.hero-ov {
position: absolute;
inset: 0;
background: linear-gradient(168deg, rgba(8, 10, 6, .02) 0%, rgba(12, 26, 14, .2) 30%, rgba(8, 10, 6, .68) 62%, rgba(8, 10, 6, 1) 100%)
}

.hero-grain {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
pointer-events: none;
opacity: .7
}

.hero-fade {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: clamp(70px, 12vw, 110px);
background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
z-index: 1
}

/* Stat strip */
.hero-strip {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 3;
display: flex;
overflow-x: auto;
scrollbar-width: none
}

.hero-strip::-webkit-scrollbar {
display: none
}

.hstrip-item {
flex: 1;
min-width: 80px;
padding: var(--s2) var(--s3);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
border-bottom: 3px solid rgba(192, 96, 48, .45);
background: rgba(8, 10, 6, .55);
backdrop-filter: blur(10px)
}

.hstrip-val {
font-size: 11.5px;
font-weight: 700;
color: var(--amber-lt);
white-space: nowrap
}

.hstrip-lbl {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255, 255, 255, .36);
white-space: nowrap
}

/* Hero content */
.hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 clamp(1rem, 4vw, 1.5rem) clamp(2.5rem, 6vw, 4.5rem)
}

.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: .4rem;
background: rgba(192, 96, 48, .18);
border: 1px solid rgba(192, 96, 48, .38);
color: var(--amber-lt);
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
padding: .25rem 1rem;
border-radius: var(--r-pill);
margin-bottom: 1.1rem
}

.hero-h1 {
font-family: var(--display);
font-size: clamp(2rem, 7vw, 5rem);
font-weight: 900;
color: #fff;
line-height: 1.04;
letter-spacing: -.03em;
max-width: 820px;
margin-bottom: .9rem
}

.hero-h1 em {
font-style: italic;
color: var(--amber-lt)
}

.hero-desc {
font-size: clamp(14px, 2.2vw, 17px);
color: rgba(255, 255, 255, .66);
max-width: 580px;
line-height: 1.78;
margin-bottom: 1.5rem
}

.hero-pills {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 1.75rem
}

.hero-pill {
display: inline-flex;
align-items: center;
gap: .35rem;
background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .16);
color: rgba(255, 255, 255, .78);
font-size: 12px;
font-weight: 500;
padding: .28rem .9rem;
border-radius: var(--r-pill)
}

.hero-pill strong {
color: var(--amber-lt);
font-weight: 700
}

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

.cta-main {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .85rem 2rem;
background: var(--terra);
color: #fff;
border-radius: var(--r-pill);
font-size: 15px;
font-weight: 700;
border: none;
cursor: pointer;
transition: background var(--ease), transform var(--ease);
white-space: nowrap
}

.cta-main:hover {
background: var(--terra-lt);
transform: translateY(-2px)
}

.cta-ghost {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .85rem 1.5rem;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .25);
color: rgba(255, 255, 255, .88);
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background var(--ease);
white-space: nowrap
}

.cta-ghost:hover {
background: rgba(255, 255, 255, .18)
}

/* ── STATS BAND ── */
.stats-band {
background: var(--forest-dk);
border-bottom: 1px solid rgba(192, 96, 48, .2);
padding: var(--s5) clamp(1rem, 4vw, 1.5rem)
}

.stats-inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s3)
}

@media(min-width:600px) {
.stats-inner {
grid-template-columns: repeat(4, 1fr)
}
}

.stat-box {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s3) var(--s4);
background: rgba(192, 96, 48, .1);
border: 1px solid rgba(192, 96, 48, .2);
border-radius: var(--r-md)
}

.stat-box img {
width: 34px;
height: 34px;
border-radius: var(--r-sm);
object-fit: cover;
flex-shrink: 0
}

.stat-info {
display: flex;
flex-direction: column;
gap: 1px
}

.stat-num {
font-family: var(--display);
font-size: 1.2rem;
font-weight: 700;
color: var(--amber-lt);
line-height: 1
}

.stat-lbl {
font-size: 9.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255, 255, 255, .38)
}

/* ════════════ PAGE LAYOUT ════════════ */
.page-layout {
max-width: var(--max);
margin: 0 auto;
padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 1.5rem);
display: grid;
grid-template-columns: 1fr;
gap: 3rem
}

@media(min-width:1060px) {
.page-layout {
grid-template-columns: minmax(0, 1fr) 288px;
align-items: start;
gap: 4rem
}
}

.main-col {
min-width: 0
}

/* ── STICKY SIDEBAR ── */
.sidebar {
display: none
}

@media(min-width:1060px) {
.sidebar {
display: block
}
}

.sidebar-sticky {
position: sticky;
top: 80px;
display: flex;
flex-direction: column;
gap: 1.2rem
}

.toc-card {
background: var(--sand-100);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.4rem;
box-shadow: var(--shadow-sm)
}

.toc-card h3 {
font-family: var(--display);
font-size: .92rem;
font-weight: 700;
color: var(--ink);
margin-bottom: .9rem;
padding-bottom: .7rem;
border-bottom: 1px solid var(--border)
}

.toc-links {
display: flex;
flex-direction: column;
gap: .18rem
}

.toc-links a {
display: flex;
align-items: flex-start;
gap: .5rem;
font-size: 12.5px;
color: var(--muted);
padding: .38rem .55rem;
border-radius: var(--r-sm);
transition: all var(--ease);
line-height: 1.38
}

.toc-links a:hover,
.toc-links a.active {
background: var(--gold-pale);
color: var(--forest);
font-weight: 600
}

.toc-links a .tn {
font-size: 9px;
font-weight: 700;
color: var(--terra);
min-width: 16px;
flex-shrink: 0;
margin-top: 1px
}

.sb-cta-card {
background: var(--forest-dk);
border-radius: var(--r-lg);
padding: 1.4rem
}

.sb-cta-card h4 {
font-family: var(--display);
font-size: .95rem;
font-weight: 700;
color: var(--amber-lt);
margin-bottom: .55rem
}

.sb-cta-card p {
font-size: 12.5px;
color: rgba(255, 255, 255, .55);
line-height: 1.62;
margin-bottom: 1rem
}

.sb-btn {
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
width: 100%;
padding: .72rem;
background: var(--terra);
color: #fff;
border: none;
border-radius: var(--r-sm);
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
transition: background var(--ease)
}

.sb-btn:hover {
background: var(--terra-lt)
}

.sb-trust {
margin-top: .75rem;
display: flex;
flex-direction: column;
gap: .38rem
}

.sb-trust-item {
display: flex;
align-items: center;
gap: .4rem;
font-size: 12px;
color: black;
}

.sb-trust-item svg {
width: 12px;
height: 12px;
color: var(--amber-lt);
flex-shrink: 0
}

/* ════════════ SECTION LABELS ════════════ */
.sec-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--terra);
display: block;
margin-bottom: .5rem
}

.sec-title {
font-family: var(--display);
font-size: clamp(1.6rem, 4vw, 2.4rem);
font-weight: 700;
color: var(--ink);
line-height: 1.2;
margin-bottom: .75rem
}

.sec-title em {
font-style: italic
}

.sec-title .accent {
color: var(--terra)
}

.sec-intro {
font-size: clamp(14.5px, 2vw, 16px);
color: var(--body-md);
line-height: 1.8;
margin-bottom: 2rem;
max-width: 740px
}

.divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-md), transparent);
margin: clamp(2rem, 5vw, 3rem) 0
}

/* ════════════ FILTER & CONTROLS ════════════ */
.filter-scroll {
overflow-x: auto;
scrollbar-width: none;
margin-bottom: var(--s5)
}

.filter-scroll::-webkit-scrollbar {
display: none
}

.filter-tabs {
display: inline-flex;
gap: var(--s2);
padding: 4px;
background: var(--sand-100);
border: 1px solid var(--border);
border-radius: var(--r-pill);
min-width: max-content
}

.ftab {
display: flex;
align-items: center;
gap: 5px;
padding: var(--s2) var(--s4);
border-radius: var(--r-pill);
font-size: 13px;
font-weight: 600;
color: var(--body-lt);
cursor: pointer;
background: none;
border: none;
transition: all var(--ease);
white-space: nowrap
}

.ftab:hover {
background: var(--gold-pale);
color: var(--forest)
}

.ftab.active {
background: var(--forest-md);
color: #fff
}

.ftab .fd {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0
}

.ftab .fc {
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: var(--r-pill);
margin-left: 2px
}

.ftab.active .fc {
background: rgba(255, 255, 255, .2)
}

.ftab:not(.active) .fc {
background: rgba(26, 60, 30, .1);
color: var(--forest)
}

.list-controls {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s3);
margin-bottom: var(--s5);
padding: var(--s3) var(--s4);
background: var(--sand-100);
border: 1px solid var(--border);
border-radius: var(--r-md)
}

.lc-count {
font-size: 13.5px;
color: var(--body-lt)
}

.lc-count strong {
color: var(--ink);
font-weight: 700
}

.lc-right {
display: flex;
align-items: center;
gap: var(--s3)
}

.sort-sel {
font-size: 13px;
font-weight: 500;
color: var(--ink);
background: var(--sand-200);
border: 1px solid var(--border);
border-radius: var(--r-xs);
padding: var(--s1) 2rem var(--s1) var(--s3);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238A7458' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .6rem center
}

.view-btns {
display: flex;
gap: 4px
}

.vbtn {
width: 30px;
height: 30px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--sand-200);
color: var(--muted);
transition: all var(--ease)
}

.vbtn.active,
.vbtn:hover {
background: var(--forest-md);
color: #fff;
border-color: var(--forest-md)
}

.vbtn svg {
width: 14px;
height: 14px
}

/* ════════════ ACTIVITY CARDS ════════════ */
#arusha-grid {
display: grid;
gap: var(--s5)
}

#arusha-grid.view-grid {
grid-template-columns: 1fr
}

@media(min-width:580px) {
#arusha-grid.view-grid {
grid-template-columns: 1fr 1fr
}
}

@media(min-width:1024px) {
#arusha-grid.view-grid {
grid-template-columns: repeat(3, 1fr)
}
}

#arusha-grid.view-list {
grid-template-columns: 1fr
}

.acard[data-hidden="true"] {
display: none
}

.acard {
background: var(--ivory);
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow var(--ease), transform var(--ease);
position: relative;
animation: cardFade .44s ease both
}

.acard:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-5px)
}

.acard.featured {
border: 2px solid var(--terra)
}

@keyframes cardFade {
from {
opacity: 0;
transform: translateY(22px)
}

to {
opacity: 1;
transform: translateY(0)
}
}

/* Top accent bar */
.acard-bar {
height: 5px;
width: 100%
}

.acard.nature>.acard-bar {
background: linear-gradient(90deg, var(--cat-nature), #4A9A50)
}

.acard.culture>.acard-bar {
background: linear-gradient(90deg, var(--cat-culture), #C87040)
}

.acard.safari>.acard-bar {
background: linear-gradient(90deg, var(--cat-safari), var(--terra-lt))
}

.acard.food>.acard-bar {
background: linear-gradient(90deg, var(--cat-food), var(--amber))
}

.acard.hike>.acard-bar {
background: linear-gradient(90deg, var(--cat-hike), #70A060)
}

.acard.city>.acard-bar {
background: linear-gradient(90deg, var(--cat-city), #8A70B8)
}

.acard.daytrip>.acard-bar {
background: linear-gradient(90deg, var(--cat-daytrip), #3A90C8)
}

.acard.relax>.acard-bar {
background: linear-gradient(90deg, var(--cat-relax), #9A6880)
}

/* Badges */
.acard-badges {
position: absolute;
top: calc(var(--s3) + 5px);
left: var(--s3);
display: flex;
gap: var(--s1);
z-index: 2;
flex-wrap: wrap
}

.badge {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
padding: 3px 9px;
border-radius: var(--r-pill);
color: #fff
}

.b-top {
background: var(--terra)
}

.b-new {
background: var(--amber)
}

.b-free {
background: var(--cat-hike)
}

.b-family {
background: #2A6A9A
}

.b-pop {
background: var(--forest)
}

.b-cult {
background: var(--cat-culture)
}

.b-adv {
background: var(--meru)
}

/* Image */
.acard-img {
height: clamp(180px, 22vw, 220px);
overflow: hidden;
position: relative;
flex-shrink: 0
}

.acard-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.12);
transition: transform .65s ease
}

.acard:hover .acard-img img {
transform: scale(1.08)
}

.acard-img-ov {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(8, 6, 2, .6) 0%, transparent 52%)
}

.acard-chips {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--s2) var(--s4);
display: flex;
flex-wrap: wrap;
gap: 4px
}

.chip {
font-size: 10px;
font-weight: 700;
color: rgba(255, 255, 255, .92);
background: rgba(8, 6, 2, .55);
backdrop-filter: blur(5px);
padding: 2px 7px;
border-radius: var(--r-pill);
border: 1px solid rgba(255, 255, 255, .16);
white-space: nowrap
}

/* Body */
.acard-body {
padding: var(--s4) var(--s5);
display: flex;
flex-direction: column;
gap: var(--s3);
flex: 1
}

.acard-cat {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted)
}

.cat-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0
}

.acard.nature .cat-dot {
background: var(--cat-nature)
}

.acard.culture .cat-dot {
background: var(--cat-culture)
}

.acard.safari .cat-dot {
background: var(--cat-safari)
}

.acard.food .cat-dot {
background: var(--cat-food)
}

.acard.hike .cat-dot {
background: var(--cat-hike)
}

.acard.city .cat-dot {
background: var(--cat-city)
}

.acard.daytrip .cat-dot {
background: var(--cat-daytrip)
}

.acard.relax .cat-dot {
background: var(--cat-relax)
}

.acard-title {
font-family: var(--display);
font-size: clamp(1.08rem, 2.8vw, 1.32rem);
font-weight: 700;
color: var(--ink);
line-height: 1.22
}

.acard-desc {
font-size: 13px;
color: var(--body-lt);
line-height: 1.68
}

.acard-specs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s2)
}

.aspec {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--s2);
background: var(--sand-200);
border-radius: var(--r-xs);
border: 1px solid var(--border);
text-align: center
}

.aspec-lbl {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted)
}

.aspec-val {
font-size: 12.5px;
font-weight: 700;
color: var(--ink)
}

.acard-tags {
display: flex;
flex-wrap: wrap;
gap: .35rem
}

.atag {
font-size: 11.5px;
font-weight: 500;
color: var(--forest);
background: rgba(26, 60, 30, .08);
border: 1px solid rgba(26, 60, 30, .16);
padding: 2px 9px;
border-radius: var(--r-pill)
}

.acard-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
padding-top: var(--s3);
border-top: 1px solid var(--border);
flex-wrap: wrap
}

.price-wrap {
display: flex;
flex-direction: column;
gap: 1px
}

.price-from {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--muted)
}

.price-amt {
font-family: var(--display);
font-size: 1.5rem;
font-weight: 700;
color: var(--terra);
line-height: 1
}

.price-pp {
font-size: 11px;
color: var(--muted)
}

.book-btn {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: var(--s3) var(--s5);
background: var(--forest-md);
color: #fff;
border-radius: var(--r-pill);
font-size: 13.5px;
font-weight: 700;
border: none;
cursor: pointer;
transition: background var(--ease);
white-space: nowrap
}

.book-btn:hover {
background: var(--forest-lt)
}

.book-btn svg {
width: 13px;
height: 13px
}

/* LIST VIEW */
#arusha-grid.view-list .acard {
flex-direction: row;
align-items: stretch
}

#arusha-grid.view-list .acard-bar {
width: 5px;
height: auto;
flex-shrink: 0
}

#arusha-grid.view-list .acard-badges {
top: var(--s3);
left: calc(5px + var(--s3))
}

#arusha-grid.view-list .acard-img {
width: clamp(180px, 22vw, 240px);
min-width: clamp(180px, 22vw, 240px);
height: auto;
flex-shrink: 0
}

@media(max-width:579px) {
#arusha-grid.view-list .acard {
flex-direction: column
}

#arusha-grid.view-list .acard-bar {
width: 100%;
height: 5px
}

#arusha-grid.view-list .acard-img {
width: 100%;
min-width: 0;
height: 210px
}
}

/* ════════════ ABOUT ARUSHA ════════════ */
.about-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin: 1.5rem 0
}

@media(min-width:560px) {
.about-grid {
grid-template-columns: repeat(2, 1fr)
}
}

@media(min-width:900px) {
.about-grid {
grid-template-columns: repeat(4, 1fr)
}
}

.about-card {
background: var(--sand-100);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 1.4rem;
text-align: center;
transition: box-shadow var(--ease), transform var(--ease)
}

.about-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px)
}

.about-card img {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto .85rem;
border: 3px solid var(--border)
}

.about-card h4 {
font-family: var(--display);
font-size: 1rem;
font-weight: 700;
color: var(--ink);
margin-bottom: .4rem
}

.about-card p {
font-size: 12.5px;
color: var(--body-lt);
line-height: 1.6
}

/* ════════════ FACTS BAND ════════════ */
.facts-band {
background: linear-gradient(135deg, var(--forest-dk) 0%, var(--forest-md) 100%);
border-radius: var(--r-xl);
padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
margin: 2rem 0;
position: relative;
overflow: hidden
}

.facts-band::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 280px;
height: 280px;
border-radius: 50%;
background: rgba(192, 96, 48, .07);
pointer-events: none
}

.fb-head {
text-align: center;
margin-bottom: 2rem
}

.fb-title {
font-family: var(--display);
font-size: clamp(1.6rem, 4vw, 2.3rem);
font-weight: 700;
color: #fff;
margin-bottom: .7rem
}

.fb-title em {
font-style: italic;
color: var(--amber-lt)
}

.fb-sub {
font-size: 14.5px;
color: rgba(255, 255, 255, .5);
max-width: 520px;
margin: 0 auto;
line-height: 1.7
}

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

@media(min-width:580px) {
.facts-grid {
grid-template-columns: repeat(3, 1fr)
}
}

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

.fact-item {
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: var(--r-lg);
padding: 1.25rem 1rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
transition: background var(--ease), transform var(--ease)
}

.fact-item:hover {
background: rgba(255, 255, 255, .13);
transform: translateY(-2px)
}

.fact-item img {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover
}

.fact-val {
font-family: var(--display);
font-size: 1.3rem;
font-weight: 700;
color: var(--amber-lt);
line-height: 1
}

.fact-lbl {
font-size: 11.5px;
font-weight: 600;
color: rgba(255, 255, 255, .46);
line-height: 1.38;
text-align: center
}

/* ════════════ CALLOUTS ════════════ */
.callout {
display: flex;
gap: .9rem;
border-radius: var(--r-md);
padding: clamp(.9rem, 3vw, 1.3rem) clamp(1rem, 3vw, 1.5rem);
margin: 1.5rem 0;
border: 1px solid
}

@media(max-width:480px) {
.callout {
flex-direction: column;
gap: .6rem
}
}

.cico {
font-size: 1.3rem;
flex-shrink: 0;
line-height: 1;
margin-top: 2px
}

.cbody strong {
display: block;
font-size: 14px;
font-weight: 700;
margin-bottom: 3px
}

.cbody p {
font-size: 13.5px;
line-height: 1.65;
margin: 0
}

.callout.tip {
background: rgba(192, 96, 48, .06);
border-color: rgba(192, 96, 48, .2);
border-left: 4px solid var(--terra)
}

.callout.tip .cbody strong {
color: var(--forest)
}

.callout.tip .cbody p {
color: var(--muted)
}

.callout.info {
background: rgba(26, 72, 106, .06);
border-color: rgba(26, 72, 106, .2);
border-left: 4px solid var(--cat-daytrip)
}

.callout.info .cbody strong {
color: var(--cat-daytrip)
}

.callout.info .cbody p {
color: var(--muted)
}

.callout.green {
background: rgba(26, 60, 30, .06);
border-color: rgba(26, 60, 30, .2);
border-left: 4px solid var(--forest)
}

.callout.green .cbody strong {
color: var(--forest)
}

.callout.green .cbody p {
color: var(--muted)
}

/* ════════════ MONTHLY GUIDE ════════════ */
.year-tabs {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin-bottom: var(--s5)
}

.ytab {
padding: .62rem 1.75rem;
border-radius: var(--r-xs);
font-size: .9rem;
font-weight: 600;
cursor: pointer;
border: 1.5px solid var(--border);
background: transparent;
color: var(--body-lt);
transition: all var(--ease)
}

.ytab.active {
background: var(--terra);
color: #fff;
border-color: var(--terra)
}

.ycontent {
display: none
}

.ycontent.active {
display: block
}

.months-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
gap: 1.1rem
}

.mcard {
background: var(--sand-100);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 1.25rem;
position: relative;
overflow: hidden;
transition: box-shadow var(--ease)
}

.mcard:hover {
box-shadow: var(--shadow-md)
}

.mcard::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px
}

.m-jan::before,
.m-feb::before {
background: var(--amber)
}

.m-mar::before,
.m-apr::before,
.m-may::before {
background: #8A5ABE
}

.m-jun::before,
.m-jul::before,
.m-aug::before,
.m-sep::before,
.m-oct::before {
background: var(--terra)
}

.m-nov::before {
background: var(--cat-hike)
}

.m-dec::before {
background: #BE4A2A
}

.mcard-hdr {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: .5rem;
margin-bottom: .3rem
}

.mcard-name {
font-family: var(--display);
font-size: 1rem;
font-weight: 700;
color: var(--ink)
}

.mcard-img {
width: 42px;
height: 42px;
border-radius: var(--r-sm);
object-fit: cover;
flex-shrink: 0
}

.season-pill {
display: inline-block;
font-size: .64rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
padding: 1px 8px;
border-radius: var(--r-pill);
margin-bottom: .65rem
}

.sp-dry {
background: #FBF0DC;
color: #7A5000
}

.sp-long {
background: #EDE8F4;
color: #5A3AA0
}

.sp-short {
background: #FDF0E4;
color: #7A4018
}

.sp-peak {
background: #E8F4E0;
color: #2A5A18;
font-weight: 700
}

.mcard-hl {
font-size: 12.5px;
font-weight: 600;
color: var(--ink);
margin-bottom: .45rem
}

.mcard-list {
display: flex;
flex-direction: column;
gap: 2px
}

.mcard-list li {
font-size: 12px;
color: var(--body-lt);
padding-left: .9rem;
position: relative;
line-height: 1.5
}

.mcard-list li::before {
content: '›';
position: absolute;
left: 0;
color: var(--terra)
}

.mcard-stars {
display: flex;
gap: 2px;
margin-top: .7rem;
font-size: 11px
}

.ms-f {
color: var(--gold)
}

.ms-e {
color: var(--sand-300)
}

/* ════════════ BEST TIME TABLE ════════════ */
.tbl-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--r-md);
border: 1px solid var(--border);
margin-top: var(--s5)
}

.btbl {
width: 100%;
min-width: 580px;
border-collapse: collapse;
font-size: 13.5px
}

.btbl th {
padding: var(--s3) var(--s4);
text-align: left;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--muted);
background: var(--sand-300);
border-bottom: 1px solid var(--border);
white-space: nowrap
}

.btbl td {
padding: var(--s3) var(--s4);
border-bottom: 1px solid var(--border);
vertical-align: middle
}

.btbl tr:last-child td {
border-bottom: none
}

.btbl tr:hover td {
background: var(--gold-pale)
}

.btbl tr:nth-child(even) td {
background: var(--sand-200)
}

.btbl tr:nth-child(even):hover td {
background: var(--gold-pale)
}

.bb-best {
display: inline-block;
background: rgba(26, 60, 30, .12);
color: var(--forest);
font-size: 11.5px;
font-weight: 700;
padding: 2px 9px;
border-radius: var(--r-pill);
border: 1px solid rgba(26, 60, 30, .22)
}

.bb-ok {
display: inline-block;
background: rgba(192, 96, 48, .1);
color: var(--terra);
font-size: 11.5px;
font-weight: 700;
padding: 2px 9px;
border-radius: var(--r-pill);
border: 1px solid rgba(192, 96, 48, .2)
}

.bb-low {
display: inline-block;
background: rgba(120, 100, 70, .08);
color: var(--muted);
font-size: 11.5px;
font-weight: 700;
padding: 2px 9px;
border-radius: var(--r-pill);
border: 1px solid var(--border)
}

.bb-peak {
display: inline-block;
background: rgba(200, 146, 48, .14);
color: #7A5000;
font-size: 11.5px;
font-weight: 700;
padding: 2px 9px;
border-radius: var(--r-pill);
border: 1px solid rgba(200, 146, 48, .28)
}

/* ════════════ WHAT'S INCLUDED ════════════ */
.ie-wrap {
display: flex;
flex-direction: column;
gap: 1.1rem;
margin-top: 1.5rem
}

@media(min-width:600px) {
.ie-wrap {
flex-direction: row
}
}

.ie-box {
flex: 1;
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden
}

.ie-head {
padding: var(--s3) var(--s5);
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em
}

.ie-inc {
background: rgba(26, 60, 30, .1);
color: var(--forest)
}

.ie-exc {
background: rgba(160, 60, 20, .08);
color: #8A2A10
}

.ie-list {
padding: var(--s4) var(--s5);
display: flex;
flex-direction: column;
gap: .75rem
}

.ie-list li {
display: flex;
align-items: flex-start;
gap: .5rem;
font-size: 13.5px;
color: var(--ink);
line-height: 1.5
}

.ie-list li::before {
content: '';
width: 16px;
height: 16px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 2px;
background-size: 10px;
background-position: center;
background-repeat: no-repeat
}

.ie-list.inc li::before {
background-color: rgba(26, 60, 30, .12);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%231A3C1E' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
}

.ie-list.exc li::before {
background-color: rgba(160, 60, 20, .1);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='%238A2A10' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
}

/* ════════════ LOCATION CARDS ════════════ */
.loc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 1.1rem;
margin-top: 1.5rem
}

.loc-card {
background: var(--sand-100);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
transition: box-shadow var(--ease), transform var(--ease)
}

.loc-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px)
}

.loc-img {
height: 110px;
overflow: hidden
}

.loc-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.1);
transition: transform .5s ease
}

.loc-card:hover .loc-img img {
transform: scale(1.07)
}

.loc-body {
padding: .9rem 1rem
}

.loc-body h4 {
font-family: var(--display);
font-size: .95rem;
font-weight: 700;
color: var(--ink);
margin-bottom: .3rem
}

.loc-body p {
font-size: 12px;
color: var(--muted);
line-height: 1.58;
margin-bottom: .55rem
}

.loc-dist {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .77rem;
font-weight: 700;
color: var(--terra);
background: rgba(192, 96, 48, .08);
border: 1px solid rgba(192, 96, 48, .18);
padding: 2px 9px;
border-radius: var(--r-pill)
}

/* ════════════ TESTIMONIALS ════════════ */
.testi-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.1rem;
margin: 1.5rem 0
}

@media(min-width:580px) {
.testi-grid {
grid-template-columns: 1fr 1fr
}
}

@media(min-width:900px) {
.testi-grid {
grid-template-columns: repeat(3, 1fr)
}
}

.tcard {
background: var(--sand-100);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow var(--ease)
}

.tcard:hover {
box-shadow: var(--shadow-md)
}

.tcard-img {
height: 130px;
overflow: hidden;
position: relative;
flex-shrink: 0
}

.tcard-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.1)
}

.tcard-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(8, 6, 2, .5) 0%, transparent 55%)
}

.tcard-body {
padding: 1.25rem;
flex: 1;
position: relative
}

.tq {
position: absolute;
top: .5rem;
right: 1rem;
font-family: var(--display);
font-size: 3rem;
font-weight: 700;
color: var(--sand-300);
line-height: 1;
pointer-events: none
}

.t-stars {
color: var(--gold);
font-size: 13px;
display: flex;
gap: 2px;
margin-bottom: .65rem
}

.t-text {
font-size: 13.5px;
color: var(--body-dk);
line-height: 1.75;
font-style: italic;
position: relative;
z-index: 1
}

.t-author {
display: flex;
align-items: center;
gap: .7rem;
margin-top: .9rem;
padding-top: .9rem;
border-top: 1px solid var(--border)
}

.t-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border);
flex-shrink: 0
}

.t-name {
font-size: 13px;
font-weight: 700;
color: var(--ink)
}

.t-trip {
font-size: 11px;
color: var(--muted)
}

/* ════════════ FAQ ════════════ */
.faq-wrap {
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
margin: 1.5rem 0
}

.faq-q {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 1.1rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
font-size: clamp(14px, 2vw, 15px);
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: color var(--ease), background var(--ease);
line-height: 1.4;
border-bottom: 1px solid var(--border);
font-family: var(--body)
}

.faq-q:last-of-type {
border-bottom: none
}

.faq-q:hover {
background: var(--gold-pale);
color: var(--terra)
}

.faq-q[aria-expanded="true"] {
color: var(--forest);
background: var(--gold-pale)
}

.faq-q[aria-expanded="true"]+.faq-a {
display: block
}

.faq-q svg {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--muted);
margin-top: 2px;
transition: transform var(--ease)
}

.faq-q[aria-expanded="true"] svg {
transform: rotate(45deg);
color: var(--terra)
}

.faq-a {
display: none;
padding: 1rem 1.25rem 1.3rem;
font-size: 14px;
color: var(--body-md);
line-height: 1.8;
border-bottom: 1px solid var(--border);
background: var(--sand-100)
}

.faq-a:last-child {
border-bottom: none
}

/* ════════════ MODAL ════════════ */
.modal-ov {
position: fixed;
inset: 0;
background: rgba(8, 6, 2, .8);
backdrop-filter: blur(8px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity .26s ease
}

.modal-ov.open {
opacity: 1;
pointer-events: auto
}

.modal-panel {
background: var(--sand-100);
border-radius: var(--r-xl);
width: 100%;
max-width: 660px;
max-height: 90vh;
overflow-y: auto;
transform: translateY(20px) scale(.97);
transition: transform .32s cubic-bezier(.34, 1.44, .64, 1);
box-shadow: 0 30px 100px rgba(8, 6, 2, .5)
}

.modal-ov.open .modal-panel {
transform: translateY(0) scale(1)
}

.modal-head {
background: linear-gradient(135deg, var(--forest-dk) 0%, var(--forest-md) 55%, rgba(192, 96, 48, .38) 100%);
padding: clamp(1.25rem, 4vw, 2rem);
position: relative
}

.modal-close {
position: absolute;
top: .85rem;
right: .85rem;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, .78);
transition: background var(--ease)
}

.modal-close:hover {
background: rgba(255, 255, 255, .26)
}

.modal-close svg {
width: 14px;
height: 14px
}

.modal-tag {
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .14em;
color: rgba(255, 255, 255, .4);
display: block;
margin-bottom: .3rem
}

.modal-title {
font-family: var(--display);
font-size: clamp(1.2rem, 3vw, 1.65rem);
font-weight: 700;
color: #fff;
line-height: 1.2;
max-width: 460px;
z-index: 1;
position: relative
}

.modal-price-row {
display: flex;
align-items: baseline;
gap: .5rem;
margin-top: .7rem;
z-index: 1;
position: relative
}

.mpfrom {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255, 255, 255, .4)
}

.mpamt {
font-family: var(--display);
font-size: 1.45rem;
font-weight: 700;
color: var(--amber-lt)
}

.mppp {
font-size: 11px;
color: rgba(255, 255, 255, .38)
}

.modal-trust {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-top: .85rem;
z-index: 1;
position: relative
}

.modal-trust span {
display: flex;
align-items: center;
gap: .35rem;
font-size: 11px;
color: rgba(255, 255, 255, .55)
}

.modal-trust svg {
width: 11px;
height: 11px;
color: var(--amber-lt);
flex-shrink: 0
}

.mform {
padding: clamp(1.1rem, 4vw, 1.75rem)
}

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

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

@media(min-width:480px) {
.mpair {
flex-direction: row
}

.mpair .mfield {
flex: 1
}
}

.mfield {
display: flex;
flex-direction: column;
gap: .3rem
}

.mfield label {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--muted)
}

.mfield label .req {
color: #8A2A10
}

.mfield input,
.mfield select,
.mfield textarea {
width: 100%;
padding: .6rem .85rem;
border: 1.5px solid var(--border);
border-radius: var(--r-xs);
background: var(--sand-200);
color: var(--ink);
font-size: 14px;
outline: none;
transition: border-color var(--ease), box-shadow var(--ease);
appearance: none
}

.mfield input:focus,
.mfield select:focus,
.mfield textarea:focus {
border-color: var(--terra);
box-shadow: 0 0 0 3px rgba(192, 96, 48, .12)
}

.mfield select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238A7458' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .7rem center;
padding-right: 2rem
}

.mfield textarea {
min-height: 75px;
resize: vertical
}

.msubmit {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
padding: .95rem;
background: var(--forest-md);
color: #fff;
border: none;
border-radius: var(--r-xs);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background var(--ease), transform var(--ease);
font-family: var(--body)
}

.msubmit:hover {
background: var(--terra)
}

.msubmit:active {
transform: scale(.98)
}

.mnote {
text-align: center;
font-size: 11.5px;
color: var(--muted);
margin-top: .7rem;
display: flex;
align-items: center;
justify-content: center;
gap: .4rem
}

.mnote svg {
width: 12px;
height: 12px;
color: var(--terra)
}

.msuccess {
display: none;
flex-direction: column;
align-items: center;
text-align: center;
gap: .9rem;
padding: 2.75rem 2rem
}

.msuccess.show {
display: flex
}

.msuccess-ico {
font-size: 2.5rem
}

.msuccess h3 {
font-family: var(--display);
font-size: 1.4rem;
font-weight: 700;
color: var(--ink)
}

.msuccess p {
font-size: 14px;
color: var(--muted);
line-height: 1.72;
max-width: 380px
}

.msuccess-close {
padding: .6rem 2rem;
background: var(--forest-md);
color: #fff;
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 700;
border: none;
cursor: pointer;
transition: background var(--ease)
}

.msuccess-close:hover {
background: var(--terra)
}

/* ════════════ CTA BLOCK ════════════ */
.cta-block {
background: var(--forest-dk);
border-radius: var(--r-xl);
padding: clamp(2rem, 5vw, 3rem);
text-align: center;
color: #fff
}

.cta-block h2 {
font-family: var(--display);
font-size: clamp(1.5rem, 4vw, 2.1rem);
font-weight: 700;
color: #fff;
margin-bottom: .7rem
}

.cta-block h2 em {
font-style: italic;
color: var(--amber-lt)
}

.cta-block p {
font-size: 15px;
color: rgba(255, 255, 255, .58);
max-width: 500px;
margin: 0 auto 1.5rem;
line-height: 1.75
}

.cta-btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .75rem
}

.cta-p {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .85rem 2rem;
background: var(--terra);
color: #fff;
border-radius: var(--r-pill);
font-size: 15px;
font-weight: 700;
border: none;
cursor: pointer;
transition: background var(--ease), transform var(--ease)
}

.cta-p:hover {
background: var(--terra-lt);
transform: translateY(-2px)
}

.cta-wa {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .85rem 1.5rem;
background: rgba(37, 211, 102, .14);
border: 1px solid rgba(37, 211, 102, .3);
color: rgba(37, 211, 102, .9);
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 600;
transition: background var(--ease)
}

.cta-wa:hover {
background: rgba(37, 211, 102, .22)
}

.cta-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .8rem;
margin-top: 1.1rem
}

.cta-trust span {
display: flex;
align-items: center;
gap: .35rem;
font-size: 11.5px;
color: rgba(255, 255, 255, .42)
}

.cta-trust svg {
width: 12px;
height: 12px;
color: var(--amber-lt)
}

/* ════════════ FOOTER ════════════ */
.site-footer {
background: var(--night);
border-top: 1px solid rgba(192, 96, 48, .14);
padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 1.5rem) clamp(1.5rem, 4vw, 2.5rem);
margin-top: clamp(3rem, 7vw, 5rem);
color: rgba(255, 255, 255, .6)
}

.footer-wrap {
max-width: var(--max);
margin: 0 auto
}

.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem
}

@media(min-width:580px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2.5rem
}
}

@media(min-width:900px) {
.footer-grid {
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem
}
}

.f-brand-name {
font-family: var(--display);
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin-bottom: .6rem
}

.f-brand p {
font-size: 13.5px;
line-height: 1.72;
max-width: 275px
}

.f-social {
display: flex;
gap: .5rem;
margin-top: .9rem
}

.f-soc {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, .07);
color: rgba(255, 255, 255, .6);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--ease)
}

.f-soc:hover {
background: var(--terra);
color: #fff
}

.f-soc svg {
width: 15px;
height: 15px
}

.f-col-title {
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .13em;
color: var(--amber-lt);
margin-bottom: .9rem
}

.f-col ul {
display: flex;
flex-direction: column;
gap: .45rem
}

.f-col a {
font-size: 13.5px;
color: rgba(255, 255, 255, .5);
transition: color var(--ease)
}

.f-col a:hover {
color: #fff
}

.footer-btm {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, .07);
display: flex;
flex-direction: column;
gap: .4rem;
font-size: 11.5px;
color: rgba(255, 255, 255, .28)
}

@media(min-width:520px) {
.footer-btm {
flex-direction: row;
justify-content: space-between;
align-items: center
}
}

.footer-btm a {
color: inherit;
transition: color var(--ease)
}

.footer-btm a:hover {
color: rgba(255, 255, 255, .6)
}

/* ════════════ MOBILE STICKY ════════════ */
.mob-sticky {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 400;
background: var(--night);
border-top: 2px solid rgba(192, 96, 48, .35);
padding: .7rem clamp(1rem, 4vw, 1.5rem);
display: flex;
align-items: center;
gap: .9rem
}

@media(min-width:1060px) {
.mob-sticky {
display: none
}
}

.ms-info {
flex: 1;
min-width: 0
}

.ms-lbl {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: rgba(255, 255, 255, .36);
display: block
}

.ms-price {
font-family: var(--display);
font-size: 1.15rem;
font-weight: 700;
color: var(--amber-lt);
line-height: 1.1
}

.ms-btn {
padding: .65rem 1.4rem;
background: var(--terra);
color: #fff;
border: none;
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background var(--ease);
white-space: nowrap;
flex-shrink: 0
}

.ms-btn:hover {
background: var(--terra-lt)
}

/* ════════════ RESPONSIVE POLISH ════════════ */
@media(max-width:479px) {
.tbl-scroll {
margin-left: -1rem;
margin-right: -1rem;
border-radius: 0
}
}

@media(max-width:359px) {
.hero-h1 {
font-size: 1.8rem
}
}