/* ══════════════════════════════════════════════
TANZANIA SAFARI GUIDE — Resilience Expedition
Tone: Editorial magazine · Warm safari palette
Dark earth / amber / ivory / savanna gold
══════════════════════════════════════════════ */

*,
*::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(--fb);
background: var(--page-bg);
color: var(--ink);
line-height: 1.75;
overflow-x: hidden
}

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
}

:root {
/* Palette */
--earth-900: #0E0906;
--earth-800: #1E1408;
--earth-700: #2C1E0E;
--earth-600: #4A3218;
--earth-500: #6B4A24;
--earth-400: #9A6A38;
--amber: #C8841A;
--amber-lt: #E0A840;
--gold: #D4A830;
--gold-lt: #ECC860;
--gold-pale: #FBF5E0;
--savanna: #B8782A;
--sand-900: #E8DCC8;
--sand-800: #F0E6D0;
--sand-700: #F6EFE0;
--page-bg: #FAF6EE;
--ivory: #FDFBF6;
--white: #FFFFFF;
--serengeti: #3A6B2A;
/* green */
--ngo: #8B4A18;
/* crater brown */
--zanzibar: #1A6888;
/* ocean blue */
--kilimanjaro: #2A3A6B;
/* mountain blue */
--tarangire: #6B4A18;
/* baobab */
--manyara: #2A6B4A;
/* lake green */
--ink: #120C04;
--body-txt: #3A2C1A;
--muted: #7A6448;
--border: rgba(180, 140, 80, .18);
--border-md: rgba(180, 140, 80, .32);
--fd: 'Libre Baskerville', Georgia, serif;
--fb: 'Jost', sans-serif;
--s1: .25rem;
--s2: .5rem;
--s3: .75rem;
--s4: 1rem;
--s5: 1.25rem;
--s6: 1.5rem;
--s8: 2rem;
--s10: 2.5rem;
--s12: 3rem;
--s16: 4rem;
--rsm: 5px;
--rmd: 10px;
--rlg: 16px;
--rxl: 22px;
--rpill: 100px;
--sh-sm: 0 2px 10px rgba(14, 9, 6, .08);
--sh-md: 0 6px 28px rgba(14, 9, 6, .13);
--sh-lg: 0 18px 60px rgba(14, 9, 6, .2);
--t: .22s cubic-bezier(.4, 0, .2, 1);
--max: 1240px;
}

/* Skip link */
.skip {
position: absolute;
top: -100%;
left: 1rem;
background: var(--earth-800);
color: #fff;
padding: .5rem 1.5rem;
border-radius: 4px;
z-index: 9999;
transition: top var(--t)
}

.skip:focus {
top: .5rem
}

/* ══ HEADER ══ */
.site-header {
position: sticky;
top: 0;
z-index: 500;
background: rgba(14, 9, 6, .97);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(200, 132, 26, .25)
}

.nav-inner {
max-width: var(--max);
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 62px
}

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

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

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

.logo-name {
font-family: var(--fd);
font-size: clamp(.85rem, 2vw, 1rem);
font-weight: 700;
color: #fff;
letter-spacing: .01em
}

.logo-tag {
font-size: 8.5px;
color: rgba(255, 255, 255, .35);
letter-spacing: .15em;
text-transform: uppercase
}

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

.hburger span {
display: block;
width: 20px;
height: 2px;
background: rgba(255, 255, 255, .8);
border-radius: 2px;
transition: transform var(--t), opacity var(--t)
}

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

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

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

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

.nav-links-wrap.open {
display: flex
}

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

.nav-ul a {
display: block;
padding: .6rem .75rem;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, .7);
border-radius: 5px;
transition: background var(--t), color var(--t)
}

.nav-ul a:hover {
background: rgba(200, 132, 26, .2);
color: #fff
}

.nav-cta-btn {
margin-top: .5rem;
padding: .6rem 1.5rem;
background: var(--amber);
color: #fff;
border-radius: var(--rpill);
font-size: 13.5px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background var(--t);
white-space: nowrap
}

.nav-cta-btn:hover {
background: var(--amber-lt)
}

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

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

.nav-ul {
flex-direction: row;
padding: 0
}

.nav-ul a {
font-size: 13px;
padding: .4rem .7rem
}

.nav-cta-btn {
margin-top: 0;
margin-left: .5rem;
padding: .45rem 1.25rem
}
}

/* ══ BREADCRUMB ══ */
.bc {
background: var(--earth-800);
border-bottom: 1px solid rgba(200, 132, 26, .2)
}

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

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

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

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

.bc-inner span.sep {
opacity: .4
}

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

/* ══ HERO ══ */
.hero {
position: relative;
min-height: clamp(580px, 72vh, 900px);
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--earth-900)
}

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

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

.hero-ov {
position: absolute;
inset: 0;
background: linear-gradient(175deg, rgba(14, 9, 6, .0) 0%, rgba(28, 18, 8, .25) 35%, rgba(14, 9, 6, .7) 65%, rgba(14, 9, 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='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
pointer-events: none;
opacity: .6
}

.hero-ridge {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to top, var(--page-bg) 0%, transparent 100%);
z-index: 1
}

/* Floating reading progress bar */
.progress-bar {
position: fixed;
top: 62px;
left: 0;
height: 3px;
background: linear-gradient(90deg, var(--amber), var(--gold));
width: 0%;
z-index: 499;
transition: width .1s linear
}

.hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 1.5rem 4rem
}

.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
background: rgba(200, 132, 26, .18);
border: 1px solid rgba(200, 132, 26, .38);
color: var(--gold-lt);
font-size: 10px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
padding: .25rem 1rem;
border-radius: var(--rpill);
margin-bottom: 1.25rem
}

.hero-title {
font-family: var(--fd);
font-size: clamp(2.2rem, 6.5vw, 5rem);
font-weight: 700;
color: #fff;
line-height: 1.06;
letter-spacing: -.025em;
max-width: 820px;
margin-bottom: 1rem
}

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

.hero-subtitle {
font-size: clamp(14px, 2.2vw, 17px);
color: rgba(255, 255, 255, .65);
max-width: 580px;
line-height: 1.8;
margin-bottom: 1.75rem
}

.hero-meta {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-bottom: 2rem
}

.hero-tag {
display: inline-flex;
align-items: center;
gap: .4rem;
background: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .16);
color: rgba(255, 255, 255, .78);
font-size: 12px;
padding: .3rem .9rem;
border-radius: var(--rpill)
}

.hero-tag strong {
color: var(--gold-lt);
font-weight: 600
}

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

@media(min-width:480px) {
.hero-ctas {
flex-direction: row;
flex-wrap: wrap
}
}

.cta-primary {
display: inline-flex;
align-items: center;
gap: .5rem;
background: var(--amber);
color: #fff;
padding: .85rem 2rem;
border-radius: var(--rpill);
font-size: 15px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background var(--t), transform var(--t)
}

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

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

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

/* Floating guide stats strip */
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid rgba(200, 132, 26, .25)
}

.hs {
text-align: center
}

.hs-num {
font-family: var(--fd);
font-size: 1.75rem;
font-weight: 700;
color: var(--gold-lt);
display: block;
line-height: 1
}

.hs-lbl {
font-size: 9.5px;
color: rgba(255, 255, 255, .42);
letter-spacing: .1em;
text-transform: uppercase;
margin-top: 3px
}

/* ══ TOC SIDEBAR LAYOUT ══ */
.page-layout {
max-width: var(--max);
margin: 0 auto;
padding: 3rem 1.5rem;
display: grid;
grid-template-columns: 1fr;
gap: 3rem
}

@media(min-width:1024px) {
.page-layout {
grid-template-columns: minmax(0, 1fr) 300px;
align-items: start
}
}

.content-col {
min-width: 0
}

.sidebar-col {
display: none
}

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

/* Sticky sidebar */
.toc-card {
position: sticky;
top: 80px;
background: var(--ivory);
border: 1px solid var(--border);
border-radius: var(--rlg);
padding: 1.5rem;
box-shadow: var(--sh-sm)
}

.toc-card h3 {
font-family: var(--fd);
font-size: .95rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 1rem;
padding-bottom: .75rem;
border-bottom: 1px solid var(--border)
}

.toc-list {
display: flex;
flex-direction: column;
gap: .25rem
}

.toc-list a {
display: flex;
align-items: center;
gap: .5rem;
font-size: 13px;
color: var(--muted);
padding: .4rem .6rem;
border-radius: 5px;
transition: all var(--t);
line-height: 1.35
}

.toc-list a:hover,
.toc-list a.active {
background: var(--gold-pale);
color: var(--earth-700);
font-weight: 500
}

.toc-list a .toc-num {
font-family: var(--fd);
font-size: 10px;
color: var(--amber);
font-weight: 700;
min-width: 18px
}

.toc-cta {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border)
}

.toc-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
padding: .75rem;
background: var(--earth-700);
color: #fff;
border-radius: var(--rsm);
font-size: 13.5px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background var(--t)
}

.toc-cta-btn:hover {
background: var(--earth-500)
}

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

.toc-trust-item {
display: flex;
align-items: center;
gap: .5rem;
font-size: 11.5px;
color: var(--muted)
}

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

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

.sec-title {
font-family: var(--fd);
font-size: clamp(1.65rem, 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(--amber)
}

.sec-lead {
font-size: 16px;
color: var(--body-txt);
line-height: 1.82;
margin-bottom: 2rem;
max-width: 720px
}

/* ══ CONTENT SECTION ══ */
.guide-section {
margin-bottom: 4rem;
scroll-margin-top: 80px
}

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

/* Prose styles */
.prose p {
font-size: 15.5px;
color: var(--body-txt);
line-height: 1.85;
margin-bottom: 1.25rem
}

.prose h3 {
font-family: var(--fd);
font-size: 1.25rem;
font-weight: 700;
color: var(--ink);
margin: 2rem 0 .75rem;
line-height: 1.3
}

.prose h4 {
font-family: var(--fd);
font-size: 1.05rem;
font-weight: 700;
color: var(--earth-600);
margin: 1.5rem 0 .5rem
}

.prose strong {
color: var(--ink);
font-weight: 600
}

.prose em {
font-style: italic;
color: var(--earth-500)
}

.prose ul {
margin: 1rem 0 1.25rem 0;
display: flex;
flex-direction: column;
gap: .5rem
}

.prose ul li {
display: flex;
align-items: flex-start;
gap: .6rem;
font-size: 15px;
color: var(--body-txt);
line-height: 1.65
}

.prose ul li::before {
content: '';
width: 6px;
height: 6px;
background: var(--amber);
border-radius: 50%;
flex-shrink: 0;
margin-top: .55rem
}

.prose ol {
margin: 1rem 0 1.25rem 1.25rem;
list-style: decimal;
display: flex;
flex-direction: column;
gap: .5rem
}

.prose ol li {
font-size: 15px;
color: var(--body-txt);
line-height: 1.65;
padding-left: .25rem
}

/* ══ CALLOUT BOXES ══ */
.callout {
display: flex;
gap: 1rem;
border-radius: var(--rmd);
padding: 1.25rem 1.5rem;
margin: 1.5rem 0;
border: 1px solid
}

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

.callout-ico {
font-size: 1.4rem;
flex-shrink: 0;
line-height: 1;
margin-top: 2px
}

.callout-body strong {
display: block;
font-size: 14px;
font-weight: 700;
margin-bottom: 4px
}

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

.callout.tip {
background: rgba(200, 132, 26, .06);
border-color: rgba(200, 132, 26, .2);
border-left: 4px solid var(--amber)
}

.callout.tip .callout-body strong {
color: var(--earth-600)
}

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

.callout.warn {
background: rgba(160, 70, 20, .06);
border-color: rgba(160, 70, 20, .2);
border-left: 4px solid var(--savanna)
}

.callout.warn .callout-body strong {
color: var(--savanna)
}

.callout.warn .callout-body p {
color: var(--muted)
}

.callout.info {
background: rgba(26, 104, 136, .06);
border-color: rgba(26, 104, 136, .2);
border-left: 4px solid var(--zanzibar)
}

.callout.info .callout-body strong {
color: var(--zanzibar)
}

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

.callout.green {
background: rgba(58, 107, 42, .06);
border-color: rgba(58, 107, 42, .2);
border-left: 4px solid var(--serengeti)
}

.callout.green .callout-body strong {
color: var(--serengeti)
}

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

/* ══ PARK CARDS ══ */
.parks-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin: 1.5rem 0
}

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

.park-card {
border-radius: var(--rxl);
overflow: hidden;
border: 1px solid var(--border);
transition: box-shadow var(--t), transform var(--t)
}

.park-card:hover {
box-shadow: var(--sh-lg);
transform: translateY(-4px)
}

.park-img {
height: 180px;
overflow: hidden;
position: relative
}

.park-img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.15);
transition: transform .6s ease
}

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

.park-img-ov {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(14, 9, 6, .65) 0%, transparent 55%)
}

.park-img-title {
position: absolute;
bottom: .75rem;
left: 1rem;
right: 1rem
}

.park-img-title h3 {
font-family: var(--fd);
font-size: 1.15rem;
font-weight: 700;
color: #fff;
line-height: 1.2
}

.park-img-title .park-dist {
font-size: 11px;
color: rgba(255, 255, 255, .65);
margin-top: 2px
}

.park-body {
padding: 1.25rem 1.25rem 1.5rem;
background: var(--ivory)
}

.park-badges {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-bottom: .75rem
}

.park-badge {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
padding: 2px 8px;
border-radius: var(--rpill);
color: #fff
}

.park-body p {
font-size: 13px;
color: var(--body-txt);
line-height: 1.65;
margin-bottom: .75rem
}

.park-highlights {
display: flex;
flex-wrap: wrap;
gap: .35rem
}

.park-hl {
font-size: 11.5px;
font-weight: 500;
padding: 2px 9px;
border-radius: var(--rpill);
background: var(--sand-800);
color: var(--earth-600);
border: 1px solid var(--border)
}

.park-fee {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
padding-top: .75rem;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--muted)
}

.park-fee strong {
color: var(--ink);
font-weight: 700
}

/* ══ MIGRATION CALENDAR ══ */
.migration-table {
width: 100%;
border-radius: var(--rmd);
overflow: hidden;
border: 1px solid var(--border);
margin: 1.5rem 0
}

.mig-header {
display: grid;
grid-template-columns: 120px repeat(12, 1fr);
background: var(--earth-800);
color: rgba(255, 255, 255, .7);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em
}

.mig-header div {
padding: .5rem .3rem;
text-align: center;
border-right: 1px solid rgba(255, 255, 255, .08)
}

.mig-header div:first-child {
padding-left: 1rem;
text-align: left
}

.mig-row {
display: grid;
grid-template-columns: 120px repeat(12, 1fr);
font-size: 12px;
border-bottom: 1px solid var(--border)
}

.mig-row:last-child {
border-bottom: none
}

.mig-row:nth-child(even) {
background: var(--sand-700)
}

.mig-label {
padding: .65rem .5rem .65rem 1rem;
font-weight: 600;
color: var(--ink);
font-size: 12px;
border-right: 1px solid var(--border)
}

.mig-cell {
padding: .5rem .2rem;
text-align: center;
border-right: 1px solid var(--border);
font-size: 10px;
font-weight: 700;
color: #fff
}

.mig-cell:last-child {
border-right: none
}

.c-peak {
background: #C8841A
}

.c-good {
background: #5A8A3A
}

.c-ok {
background: #6A9A8A
}

.c-low {
background: #C8C0A8;
color: var(--ink)
}

.c-rain {
background: #8A94AA;
color: rgba(255, 255, 255, .8)
}

.c-cross {
background: #C04A18;
animation: pulse-cell 2s ease-in-out infinite
}

@keyframes pulse-cell {

0%,
100% {
opacity: 1
}

50% {
opacity: .7
}
}

.mig-legend {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: .75rem;
padding: .75rem 1rem;
background: var(--sand-700);
border-radius: var(--rsm);
border: 1px solid var(--border)
}

.ml-item {
display: flex;
align-items: center;
gap: .4rem;
font-size: 11.5px;
color: var(--body-txt)
}

.ml-dot {
width: 12px;
height: 12px;
border-radius: 2px;
flex-shrink: 0
}

/* ══ MONTHLY GUIDE CARDS ══ */
.monthly-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem;
margin: 1.5rem 0
}

.month-card {
background: var(--ivory);
border: 1px solid var(--border);
border-radius: var(--rlg);
padding: 1.25rem;
position: relative;
overflow: hidden;
transition: box-shadow var(--t)
}

.month-card:hover {
box-shadow: var(--sh-md)
}

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

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

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

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

.mc-nov::before {
background: var(--zanzibar)
}

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

.month-card h4 {
font-family: var(--fd);
font-size: 1rem;
font-weight: 700;
color: var(--ink);
margin-bottom: .25rem
}

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

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

.s-rain {
background: #EEE6F8;
color: #603AB0
}

.s-peak {
background: #E8F2E0;
color: #2A5A18;
font-weight: 700
}

.month-card .highlight {
font-size: 13px;
font-weight: 600;
color: var(--ink);
margin-bottom: .4rem
}

.month-card ul li {
font-size: 12px;
color: var(--muted);
padding: 2px 0 2px .9rem;
position: relative
}

.month-card ul li::before {
content: '›';
position: absolute;
left: 0;
color: var(--amber)
}

.month-stars {
display: flex;
gap: 2px;
margin-top: .6rem;
color: var(--gold)
}

.month-stars .e {
color: var(--sand-900)
}

/* ══ COSTS TABLE ══ */
.costs-table {
width: 100%;
border-collapse: collapse;
border-radius: var(--rmd);
overflow: hidden;
border: 1px solid var(--border);
margin: 1.5rem 0;
font-size: 14px
}

.costs-table thead th {
background: var(--earth-700);
color: rgba(255, 255, 255, .85);
padding: .75rem 1rem;
text-align: left;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
white-space: nowrap
}

.costs-table tbody td {
padding: .75rem 1rem;
border-bottom: 1px solid var(--border);
color: var(--body-txt);
vertical-align: middle
}

.costs-table tbody tr:last-child td {
border-bottom: none
}

.costs-table tbody tr:hover td {
background: var(--gold-pale)
}

.costs-table tbody tr:nth-child(even) td {
background: var(--sand-700)
}

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

.price-tag {
font-family: var(--fd);
font-size: 1.1rem;
font-weight: 700;
color: var(--earth-600)
}

.tier-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: var(--rpill);
text-transform: uppercase;
letter-spacing: .06em;
color: #fff
}

.t-budget {
background: #5A8A3A
}

.t-mid {
background: var(--amber)
}

.t-luxury {
background: var(--earth-600)
}

/* ══ PACKING LIST ══ */
.packing-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.25rem;
margin: 1.5rem 0
}

.pack-cat {
background: var(--ivory);
border: 1px solid var(--border);
border-radius: var(--rlg);
padding: 1.25rem
}

.pack-cat h4 {
font-family: var(--fd);
font-size: 1rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 1rem;
padding-bottom: .6rem;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: .5rem
}

.pack-cat h4 span {
font-size: 1.2rem
}

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

.pack-item {
display: flex;
align-items: flex-start;
gap: .6rem;
font-size: 13px;
color: var(--body-txt);
line-height: 1.5
}

.pack-check {
width: 16px;
height: 16px;
border-radius: 3px;
border: 1.5px solid var(--amber);
flex-shrink: 0;
margin-top: 1px;
background: var(--gold-pale);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--t)
}

.pack-check.checked {
background: var(--amber);
border-color: var(--amber)
}

.pack-check.checked::after {
content: '✓';
font-size: 9px;
color: #fff;
font-weight: 700
}

.pack-item.checked-item .pack-label {
text-decoration: line-through;
color: var(--sand-900)
}

/* ══ ZANZIBAR SECTION ══ */
.zanzibar-hero {
border-radius: var(--rxl);
overflow: hidden;
position: relative;
height: 280px;
margin: 1.5rem 0
}

.zanzibar-hero img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.2)
}

.zanzibar-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(14, 9, 6, .7) 0%, rgba(14, 9, 6, .2) 60%, transparent 100%)
}

.zanzibar-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 2rem;
z-index: 1
}

.zanzibar-overlay h3 {
font-family: var(--fd);
font-size: clamp(1.5rem, 4vw, 2.2rem);
font-weight: 700;
color: #fff;
line-height: 1.15;
max-width: 400px
}

.zanzibar-overlay h3 em {
color: var(--gold-lt);
font-style: italic
}

.zanzibar-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1.25rem
}

.zan-card {
background: var(--ivory);
border: 1px solid var(--border);
border-radius: var(--rlg);
overflow: hidden;
transition: box-shadow var(--t), transform var(--t)
}

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

.zan-img {
height: 120px;
overflow: hidden
}

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

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

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

.zan-body h4 {
font-family: var(--fd);
font-size: .95rem;
font-weight: 700;
color: var(--ink);
margin-bottom: .25rem
}

.zan-body p {
font-size: 12px;
color: var(--muted);
line-height: 1.55
}

/* ══ VISA & HEALTH TABLE ══ */
.info-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem;
margin: 1.5rem 0
}

.info-card {
background: var(--earth-800);
border-radius: var(--rlg);
padding: 1.5rem;
color: #fff
}

.info-card-icon {
font-size: 1.75rem;
margin-bottom: .75rem;
display: block
}

.info-card h4 {
font-family: var(--fd);
font-size: 1rem;
font-weight: 700;
color: var(--gold-lt);
margin-bottom: .75rem
}

.info-card ul {
display: flex;
flex-direction: column;
gap: .4rem
}

.info-card ul li {
font-size: 13px;
color: rgba(255, 255, 255, .68);
line-height: 1.55;
display: flex;
align-items: flex-start;
gap: .4rem
}

.info-card ul li::before {
content: '›';
color: var(--amber);
flex-shrink: 0;
margin-top: 1px
}

/* ══ TESTIMONIALS ══ */
.testi-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
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)
}
}

.testi-card {
background: var(--ivory);
border: 1px solid var(--border);
border-radius: var(--rlg);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: .75rem;
position: relative;
transition: box-shadow var(--t)
}

.testi-card:hover {
box-shadow: var(--sh-md)
}

.tq {
position: absolute;
top: .75rem;
right: 1rem;
font-family: var(--fd);
font-size: 3.5rem;
font-weight: 700;
color: var(--sand-900);
line-height: 1;
pointer-events: none
}

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

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

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

.t-avatar {
width: 38px;
height: 38px;
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-list {
display: flex;
flex-direction: column;
margin: 1.5rem 0
}

.faq-item {
border-bottom: 1px solid var(--border)
}

.faq-btn {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 1.1rem 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
font-size: 15px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: color var(--t);
line-height: 1.4;
font-family: var(--fb)
}

.faq-btn:hover {
color: var(--amber)
}

.faq-btn[aria-expanded="true"] {
color: var(--earth-600)
}

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

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

.faq-ans {
display: none;
padding-bottom: 1.25rem;
font-size: 14.5px;
color: var(--body-txt);
line-height: 1.8
}

.faq-ans.open {
display: block
}

/* ══ ITINERARY SAMPLES ══ */
.itin-cards {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin: 1.5rem 0
}

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

.itin-card {
border: 1px solid var(--border);
border-radius: var(--rxl);
overflow: hidden;
background: var(--ivory);
transition: box-shadow var(--t), transform var(--t)
}

.itin-card:hover {
box-shadow: var(--sh-lg);
transform: translateY(-4px)
}

.itin-top {
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, var(--earth-700) 0%, var(--earth-600) 100%);
color: #fff
}

.itin-top .itin-days {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(255, 255, 255, .5);
display: block;
margin-bottom: .25rem
}

.itin-top h3 {
font-family: var(--fd);
font-size: 1.15rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: .5rem
}

.itin-top .itin-price {
font-family: var(--fd);
font-size: 1.5rem;
font-weight: 700;
color: var(--gold-lt)
}

.itin-top .itin-price span {
font-size: 11px;
font-weight: 400;
color: rgba(255, 255, 255, .45);
margin-left: .25rem
}

.itin-body {
padding: 1.25rem 1.5rem
}

.itin-days-list {
display: flex;
flex-direction: column;
gap: .5rem
}

.itin-day {
display: flex;
gap: .75rem;
align-items: flex-start
}

.itin-day-num {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--amber);
color: #fff;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px
}

.itin-day-txt {
font-size: 13px;
color: var(--body-txt);
line-height: 1.5
}

.itin-day-txt strong {
color: var(--ink);
font-weight: 600
}

.itin-foot {
padding: 1rem 1.5rem;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
flex-wrap: wrap
}

.itin-parks {
display: flex;
flex-wrap: wrap;
gap: .35rem
}

.itin-park-tag {
font-size: 10.5px;
padding: 2px 8px;
border-radius: var(--rpill);
background: var(--sand-800);
color: var(--earth-600);
border: 1px solid var(--border);
font-weight: 500
}

.itin-book-btn {
padding: .6rem 1.25rem;
background: var(--earth-700);
color: #fff;
border-radius: var(--rpill);
font-size: 13px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background var(--t);
white-space: nowrap
}

.itin-book-btn:hover {
background: var(--amber)
}

/* ══ ACCOMMODATION TIERS ══ */
.accom-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin: 1.5rem 0
}

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

.accom-card {
border-radius: var(--rlg);
overflow: hidden;
border: 1px solid var(--border);
background: var(--ivory);
transition: box-shadow var(--t), transform var(--t)
}

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

.accom-img {
height: 150px;
overflow: hidden
}

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

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

.accom-body {
padding: 1.1rem
}

.accom-tier {
display: inline-block;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
padding: 2px 8px;
border-radius: var(--rpill);
color: #fff;
margin-bottom: .6rem
}

.accom-body h4 {
font-family: var(--fd);
font-size: .95rem;
font-weight: 700;
color: var(--ink);
margin-bottom: .35rem
}

.accom-body p {
font-size: 12.5px;
color: var(--muted);
line-height: 1.6;
margin-bottom: .75rem
}

.accom-price {
font-family: var(--fd);
font-size: 1.1rem;
font-weight: 700;
color: var(--earth-600)
}

.accom-price span {
font-size: 11px;
color: var(--muted);
font-weight: 400
}

/* ══ MODAL ══ */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(14, 9, 6, .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 .28s ease
}

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

.modal-box {
background: var(--ivory);
border-radius: var(--rxl);
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 32px 100px rgba(14, 9, 6, .5)
}

.modal-backdrop.open .modal-box {
transform: translateY(0) scale(1)
}

.modal-head {
background: linear-gradient(135deg, var(--earth-900) 0%, var(--earth-700) 60%, rgba(200, 132, 26, .4) 100%);
padding: 2rem 2rem 1.5rem;
position: relative
}

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

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

.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, .45);
display: block;
margin-bottom: .4rem
}

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

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

.modal-price-from {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255, 255, 255, .45)
}

.modal-price {
font-family: var(--fd);
font-size: 1.5rem;
font-weight: 700;
color: var(--gold-lt)
}

.modal-price-pp {
font-size: 11px;
color: rgba(255, 255, 255, .4)
}

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

.modal-trust-item {
display: flex;
align-items: center;
gap: .4rem;
font-size: 11.5px;
color: rgba(255, 255, 255, .6)
}

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

.modal-form-area {
padding: 1.5rem 2rem
}

@media(max-width:479px) {

.modal-head,
.modal-form-area {
padding: 1.5rem
}
}

.mf-grid {
display: flex;
flex-direction: column;
gap: 1.1rem
}

.mf-row {
display: flex;
flex-direction: column;
gap: 1.1rem
}

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

.mf-row .mf-g {
flex: 1
}
}

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

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

.mf-g label .req {
color: #C04A18
}

.mf-g input,
.mf-g select,
.mf-g textarea {
width: 100%;
padding: .6rem .85rem;
border: 1.5px solid var(--border);
border-radius: var(--rsm);
background: var(--sand-800);
color: var(--ink);
font-size: 14px;
outline: none;
transition: border-color var(--t), box-shadow var(--t);
appearance: none;
font-family: var(--fb)
}

.mf-g input:focus,
.mf-g select:focus,
.mf-g textarea:focus {
border-color: var(--amber);
box-shadow: 0 0 0 3px rgba(200, 132, 26, .14)
}

.mf-g 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='%237A6448' 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
}

.mf-g textarea {
min-height: 80px;
resize: vertical
}

.modal-submit {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
padding: 1rem;
background: var(--earth-700);
color: #fff;
border: none;
border-radius: var(--rsm);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background var(--t), transform var(--t);
font-family: var(--fb)
}

.modal-submit:hover {
background: var(--amber)
}

.modal-submit:active {
transform: scale(.98)
}

.modal-submit svg {
width: 16px;
height: 16px
}

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

.modal-note svg {
width: 13px;
height: 13px;
color: var(--amber)
}

.modal-success {
display: none;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
padding: 3rem 2rem
}

.modal-success.show {
display: flex
}

.success-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--gold-pale);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px
}

.modal-success h3 {
font-family: var(--fd);
font-size: 1.4rem;
font-weight: 700;
color: var(--ink)
}

.modal-success p {
font-size: 14px;
color: var(--muted);
line-height: 1.7;
max-width: 400px
}

.modal-success-close {
padding: .65rem 2rem;
background: var(--earth-700);
color: #fff;
border-radius: var(--rpill);
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background var(--t)
}

.modal-success-close:hover {
background: var(--amber)
}

/* ══ FOOTER ══ */
.site-footer {
background: var(--earth-900);
border-top: 1px solid rgba(200, 132, 26, .15);
padding: 3.5rem 1.5rem 2rem;
margin-top: 4rem;
color: rgba(255, 255, 255, .6)
}

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

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

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

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

.f-brand h3 {
font-family: var(--fd);
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin-bottom: .75rem
}

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

.f-col h4 {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--amber-lt);
margin-bottom: 1rem
}

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

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

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

.f-bottom {
max-width: var(--max);
margin: 2.5rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, .07);
display: flex;
flex-direction: column;
gap: .5rem;
font-size: 11.5px;
color: rgba(255, 255, 255, .28)
}

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

.f-bottom a {
color: inherit;
transition: color var(--t)
}

.f-bottom a:hover {
color: rgba(255, 255, 255, .6)
}

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

.f-soc {
width: 36px;
height: 36px;
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(--t);
text-decoration: none
}

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

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

/* ══ MOBILE STICKY CTA ══ */
.mob-sticky {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 400;
background: var(--earth-900);
border-top: 2px solid rgba(200, 132, 26, .35);
padding: .75rem 1.5rem;
display: flex;
align-items: center;
gap: 1rem
}

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

.mob-sticky-info {
flex: 1
}

.mob-sticky-info span {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: rgba(255, 255, 255, .38);
display: block;
line-height: 1
}

.mob-sticky-info strong {
font-family: var(--fd);
font-size: 1.2rem;
font-weight: 700;
color: var(--gold-lt);
display: block;
line-height: 1.2
}

.mob-sticky-cta {
padding: .65rem 1.5rem;
background: var(--amber);
color: #fff;
border: none;
border-radius: var(--rpill);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background var(--t);
white-space: nowrap
}

.mob-sticky-cta:hover {
background: var(--amber-lt)
}

/* ══ MISC UTILITIES ══ */
.text-center {
text-align: center
}

.mt-4 {
margin-top: 1rem
}

.mb-4 {
margin-bottom: 1rem
}

.highlight-box {
background: var(--earth-800);
border-radius: var(--rxl);
padding: 2.5rem 2rem;
margin: 2rem 0;
color: #fff
}

.highlight-box .sec-title {
color: #fff
}

.highlight-box .sec-label {
color: var(--gold-lt)
}

.highlight-box .sec-lead {
color: rgba(255, 255, 255, .65);
max-width: 100%
}

.two-col {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin: 1.5rem 0
}

@media(min-width:600px) {
.two-col {
grid-template-columns: 1fr 1fr
}
}

.img-caption {
width: 100%;
border-radius: var(--rlg);
overflow: hidden;
position: relative
}

.img-caption img {
width: 100%;
height: 220px;
object-fit: cover;
filter: saturate(1.15);
display: block
}

.img-caption figcaption {
font-size: 11.5px;
color: var(--muted);
padding: .5rem .25rem;
font-style: italic
}

.stat-strip {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .75rem;
margin: 1.5rem 0
}

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

.stat-box {
background: var(--ivory);
border: 1px solid var(--border);
border-radius: var(--rmd);
padding: 1rem;
text-align: center
}

.stat-box .snum {
font-family: var(--fd);
font-size: 1.6rem;
font-weight: 700;
color: var(--amber);
display: block;
line-height: 1
}

.stat-box .slbl {
font-size: 11.5px;
color: var(--muted);
margin-top: .25rem
}


/* ══ UNIQUE NAMESPACE TO PREVENT CONFLICTS ══ */
.safari-resp-wrapper {
width: 100%;
margin: 20px 0;
font-family: sans-serif;
}

.safari-table-new {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
font-size: 14px;
background-color: #fff;
}

.safari-table-new thead th {
background: #5A4632; /* var(--earth-700) */
color: white;
padding: 12px;
text-align: left;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
}

.safari-table-new td {
padding: 12px;
border-bottom: 1px solid #eee;
color: #333;
vertical-align: middle;
}

/* Colors from your original CSS */
.safari-price { font-weight: 700; color: #8B5A2B; font-size: 1.1rem; }
.safari-badge { 
display: inline-block; 
font-size: 10px; 
padding: 2px 8px; 
border-radius: 12px; 
color: #fff; 
text-transform: uppercase; 
margin-bottom: 4px;
}
.bg-budget { background: #5A8A3A; }
.bg-mid { background: #FFB347; }
.bg-luxury { background: #8B5A2B; }

/* ══ THE MOBILE RESPONSIVE FIX ══ */
@media screen and (max-width: 600px) {
/* Hide the table header */
.safari-table-new thead {
display: none;
}

/* Make every row look like a separate box/card */
.safari-table-new, 
.safari-table-new tbody, 
.safari-table-new tr, 
.safari-table-new td {
display: block;
width: 100%;
}

.safari-table-new tr {
margin-bottom: 15px;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.safari-table-new td {
text-align: right;
padding-left: 45%;
position: relative;
border-bottom: 1px solid #eee;
}

/* This adds the column labels back on mobile */
.safari-table-new td::before {
content: attr(data-label);
position: absolute;
left: 10px;
width: 40%;
text-align: left;
font-weight: 700;
font-size: 11px;
color: #5A4632;
text-transform: uppercase;
}

/* Fix for the full-width rows (Fees, etc) */
.safari-table-new td[colspan="3"] {
text-align: center;
padding-left: 10px;
background: #f9f9f9;
}
.safari-table-new td[colspan="3"]::before {
display: none;
}
}