/* =====================================================================
   Taswira Africa Safaris — Experience pages
   Loads after styles.css + package.css (shared hero, section bar, sidebar card,
   FAQ, form and package cards). Only the blocks unique to these pages live here.
   ===================================================================== */

/* "What you get" / "How it works" — four key points */
.xe-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: xe; }
@media (max-width: 640px) { .xe-points { grid-template-columns: 1fr; } }
.xe-points li { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.xe-points .ic { flex: 0 0 auto; width: 46px; height: 46px; padding: 11px; border-radius: 10px; background: #fad3b496; color: var(--orange); }
.xe-points small { display: block; font: 600 10.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); }
.xe-points strong { display: block; margin: 6px 0 6px; font: 400 20px/1.25 var(--head); color: var(--ink); }
.xe-points p { margin: 0; font-size: 15px; color: var(--body); }
.xe-points--steps li { position: relative; }
.xe-points--steps li::after { counter-increment: xe; content: counter(xe, decimal-leading-zero); position: absolute; top: 18px; right: 20px; font: 600 12px/1 var(--sans); letter-spacing: .14em; color: var(--muted); }

/* Month-by-month / route timeline */
.xe-timeline { position: relative; margin: 0; padding: 0 0 0 34px; list-style: none; }
.xe-timeline::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(180deg, var(--orange) 0 6px, transparent 6px 12px); opacity: .5; }
.xe-timeline li { position: relative; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.xe-timeline li + li { margin-top: 12px; }
.xe-timeline li::before { content: ''; position: absolute; left: -32px; top: 22px; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--cream); }
.xe-timeline small { display: block; font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); }
.xe-timeline strong { display: block; margin-top: 5px; font: 400 21px/1.25 var(--head); color: var(--ink); }
.xe-timeline p { margin: 6px 0 0; font-size: 15px; color: var(--body); }
.xe-timeline__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.xe-timeline__foot b { font: 600 18px/1 var(--head); color: var(--orange-ink); }
.xe-timeline__foot a { font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); }
.xe-timeline__foot a:hover { color: var(--teal-ink); }

/* Where you'll go — three photo cards (reuses .pp-dest look) */
.pp-dest--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .pp-dest--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pp-dest--3 { grid-template-columns: 1fr; } .pp-dest--3 figure { aspect-ratio: 4 / 3; } }
.pp-dest figure { border-radius: 10px; }

/* Quote band with the enquiry form */
.xe-quote { padding: clamp(64px, 7vw, 96px) 0; background: var(--night); color: rgba(255, 255, 255, .8); scroll-margin-top: 90px; }
.xe-quote__head { max-width: 680px; margin: 0 auto 30px; text-align: center; }
.xe-quote__head .kicker { color: var(--gold-soft); }
.xe-quote__head .h2 { color: var(--white); }
.xe-quote__head .h2 .highlight { display: inline; color: var(--gold-soft); font-style: italic; }
.xe-quote__head .h2 .highlight::before { display: none; }
.xe-quote__head p:last-child { margin-top: 14px; font-size: 16.5px; }
.xe-quote .pp-card { max-width: 860px; margin: 0 auto; }
.xe-quote .pp-form .row { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .xe-quote .pp-form .row { grid-template-columns: 1fr; } }
.xe-quote .pp-form__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .xe-quote .pp-form__btns { grid-template-columns: 1fr; } }

/* Sidebar buttons */
.pp-card .xe-side-btns { display: grid; gap: 12px; margin-bottom: 4px; }
.pp-card .xe-side-btns .btn { width: 100%; }
.pp-card__price b.is-text { font-size: 30px; }