/* ============================================================
   African Travel Tour, Design System
   Classic African safari editorial style.
   Fonts: Fraunces (serif) · Poppins (display) · Inter (body)
   Palette: Cream #fbfaf6 · Ink #1a2018 · Green #465b2d · Gold #b7833b
   This file complements Tailwind (loaded via CDN in each page).
   ============================================================ */

:root {
  --cream:      #fbfaf6;
  --cream-100:  #f6f2ea;
  --cream-200:  #efe9dd;
  --sand:       #e5ddd0;   /* borders */
  --sand-line:  #ede8df;
  --ink:        #1a2018;
  --ink-soft:   #3a3a3a;
  --taupe:      #8d8373;
  --taupe-soft: #5a6058;
  --green:      #465b2d;
  --green-700:  #354621;
  --green-900:  #26311a;
  --clay:       #7a3d3d;   /* deep clay / wine, premium African accent */
  --clay-700:   #5f2f2f;
  --clay-200:   #a86a6a;
  --clay-tint:  rgba(122, 61, 61, .10);
  --gold:       #b7833b;
  --gold-400:   #c9963a;
  --gold-300:   #d9b46f;
  --gold-200:   #e8c86b;
  --shadow-card: 0 20px 70px -58px rgba(15, 23, 42, .45);
  --shadow-card-hover: 0 30px 90px -50px rgba(26, 32, 24, .55);
  --maxw: 80rem;
}

/* ---------- Base ---------- */
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif);
  background: var(--cream);
  color: var(--ink-soft);
}
::selection { background: var(--gold-200); color: var(--ink); }

h1, h2, h3, h4, .font-serif { font-family: var(--font-heading, "Fraunces", Georgia, serif); }
.font-display { font-family: var(--font-button, "Poppins", ui-sans-serif, system-ui, sans-serif); }
.font-body, .font-sans { font-family: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif); }

/* ---------- Inline SVG icon sizing ----------
   All decorative icons are inline <svg> with a viewBox but no width/height.
   Give them a sane default that scales with font-size, and stop flex from
   stretching them. Utility classes (h-*, w-*) and more specific rules win. */
:where(a, button, span, p, h1, h2, h3, h4, li, figure, div, label, blockquote) > svg {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}
.btn svg { width: 1.1em; height: 1.1em; }
.badge svg { width: 1.05em; height: 1.05em; }
.icon svg { width: 1.2em; height: 1.2em; flex: none; }
.link-gold svg { width: 1.05em; height: 1.05em; }
.faq-icon svg { width: 1rem; height: 1rem; }
[aria-label="WhatsApp"] > svg { width: 1.55rem; height: 1.55rem; }
[data-to-top] svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Reusable component classes ---------- */

/* Eyebrow / section label: deep-clay text with a small gold rule */
.eyebrow {
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clay);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--gold-300);
  flex: 0 0 auto;
}
.eyebrow.no-rule::before { display: none; }
.eyebrow.on-dark { color: var(--gold-200); }
.eyebrow.on-dark::before { background: var(--gold-300); }
.eyebrow.centered { justify-content: center; }

/* Centred eyebrows: mirror the rule on the trailing side.
   The eyebrow is an inline-flex of [rule 2.25rem][gap .75rem][label]. Centring
   only centres that BOX, so the label itself lands 24px right of true centre —
   visible on every centred section label site-wide. A matching trailing rule
   makes the decoration symmetrical, so the label sits dead centre. */
.eyebrow.centered::after,
.att-copy-align-center .eyebrow::after,
.sn-sec-head .eyebrow::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--gold-300);
  flex: 0 0 auto;
}
.eyebrow.no-rule::after { display: none; }
/* Small uppercase section label (used inside cards/panels) */
.label-clay { font-family: var(--font-button, "Poppins", sans-serif); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); }

/* Section serif display heading */
.display-title {
  font-family: var(--font-heading, "Fraunces", Georgia, serif);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}

/* Editable page text alignment helpers */
.att-copy-align-left {
  text-align: left;
  align-items: flex-start;
  margin-left: 0;
  margin-right: auto;
}
.att-copy-align-center {
  text-align: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}
.att-copy-align-right {
  text-align: right;
  align-items: flex-end;
  margin-left: auto;
  margin-right: 0;
}
.att-copy-align-justify {
  text-align: justify;
  text-justify: inter-word;
  align-items: flex-start;
  margin-left: 0;
  margin-right: auto;
}
/* Justify only makes sense for multi-line body text. Apply it explicitly to
   paragraphs/list items so it wins over inherited/utility alignment, and keep
   headings left (a single-line heading can't visually justify anyway). */
.att-copy-align-justify p,
.att-copy-align-justify li { text-align: justify; text-justify: inter-word; }
.att-copy-align-justify h1,
.att-copy-align-justify h2,
.att-copy-align-justify h3,
.att-copy-align-justify h4,
.att-copy-align-justify .display-title,
.att-copy-align-justify .eyebrow { text-align: left; }
.att-copy-align-center .eyebrow { justify-content: center; }
/* Width-constrained copy blocks must follow the chosen alignment too, otherwise
   a centred column keeps a left-hugging headline. Cover EVERY max-w-* utility
   the templates use (xs…6xl), not just xl/2xl/3xl — a `max-w-4xl` headline was
   the reason the About hero title sat left inside a centred hero.
   Each rule sets only the side it needs, so an intentional `mx-auto` on the
   same element is still respected (36 templates pair the two). */
.att-copy-align-justify > [class*="max-w-"],
.att-copy-align-left > [class*="max-w-"] { margin-right: auto; }
.att-copy-align-center > [class*="max-w-"] { margin-left: auto; margin-right: auto; }
.att-copy-align-right > [class*="max-w-"] { margin-left: auto; }
.att-copy-align-left .att-button-row { justify-content: flex-start; align-items: flex-start; }
.att-copy-align-center .att-button-row { justify-content: center; align-items: center; }
.att-copy-align-right .att-button-row { justify-content: flex-end; align-items: flex-end; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.7rem;
  border-radius: 0;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 14px 32px -16px rgba(70,91,45,.7); }
.btn-green:hover { background: var(--green-700); box-shadow: 0 18px 40px -16px rgba(70,91,45,.8); }
.btn-gold { background: var(--gold); color: #fff; box-shadow: 0 14px 32px -16px rgba(183,131,59,.7); }
.btn-gold:hover { background: var(--gold-400); box-shadow: 0 18px 40px -16px rgba(183,131,59,.8); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--green); }
.btn-clay { background: var(--clay); color: #fff; box-shadow: 0 14px 32px -16px rgba(122,61,61,.7); }
.btn-clay:hover { background: var(--clay-700); box-shadow: 0 18px 40px -16px rgba(122,61,61,.8); }
.btn-outline-clay { background: transparent; color: var(--clay); border-color: rgba(122,61,61,.35); }
.btn-outline-clay:hover { border-color: var(--clay); background: var(--clay-tint); }
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 16px 40px -18px rgba(0,0,0,.5); }
.btn-light:hover { background: var(--cream-100); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--sand); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-outline-light:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
.btn-sm { padding: 0.6rem 1.15rem; font-size: 0.72rem; }
.btn-block { width: 100%; }

/* Category / meta badge */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
}
.badge-gold { background: rgba(183,131,59,.12); color: var(--gold); border: 1px solid rgba(183,131,59,.25); }
.badge-green { background: rgba(70,91,45,.1); color: var(--green); border: 1px solid rgba(70,91,45,.22); }
.badge-clay { background: var(--clay); color: #fff; box-shadow: 0 8px 20px -12px rgba(122,61,61,.7); }
.badge-clay-soft { background: var(--clay-tint); color: var(--clay); border: 1px solid rgba(122,61,61,.22); }
.badge-solid { background: var(--ink); color: #fff; }
.badge-cream { background: var(--cream-100); color: var(--ink-soft); border: 1px solid var(--sand); }

/* Card */
.card {
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: 0;
  box-shadow: var(--shadow-card);
  transition: box-shadow .35s ease, transform .35s ease;
}
.card:hover { box-shadow: var(--shadow-card-hover); }

/* Square card language across the site. Keep true circles (avatars, badges,
   WhatsApp buttons) intact, but remove large rounded corners from card shells,
   image-card wrappers, pagination buttons and filter chips. */
.rounded-2xl,
.rounded-t-2xl,
.rounded-b-2xl,
.gallery-item,
.att-itinerary-day-card,
.filter-chip,
.att-page-btn,
.navigation.pagination .page-numbers {
  border-radius: 0;
}
.rounded-t-2xl {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rounded-b-2xl {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Footer design system: both layouts are selectable from Theme Settings. */
.att-footer-classic {
  background: var(--att-footer-bg, var(--green-900)) !important;
  color: var(--att-footer-text, var(--cream));
}
.att-footer-classic h4,
.att-footer-classic .text-gold-200 { color: var(--att-footer-accent, var(--gold-200)) !important; }
.att-footer-classic a:hover { color: var(--att-footer-accent, var(--gold-200)) !important; }

.att-footer-premium {
  color: var(--att-footer-text, var(--ink));
  background: var(--att-footer-bg, var(--cream-200));
}
.att-footer-premium__recommend {
  background: var(--att-footer-strip, var(--green));
  color: var(--cream);
}
.att-footer-premium__recommend-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 5.35rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.att-footer-premium__title {
  display: inline-flex;
  align-items: center;
  gap: 1.35rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: clamp(0.95rem, 1.2vw, 1.22rem);
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--cream);
}
.att-footer-premium__title:hover { color: var(--att-footer-accent, var(--gold)); }
.att-footer-premium__arrow,
.att-footer-premium__badge-icon,
.att-footer-premium__socials a {
  display: grid;
  place-items: center;
  border-radius: 999px !important;
}
.att-footer-premium__arrow {
  width: 2.55rem;
  height: 2.55rem;
  background: var(--cream);
  color: var(--att-footer-strip, var(--green));
}
.att-footer-premium__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
}
.att-footer-premium__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--cream);
}
.att-footer-premium__badge:hover { color: var(--att-footer-accent, var(--gold)); }
.att-footer-premium__badge-icon {
  width: 2.45rem;
  height: 2.45rem;
  background: var(--att-footer-accent, var(--gold));
  color: var(--att-footer-strip, var(--green));
  font-family: var(--font-button, "Poppins", sans-serif);
  font-weight: 800;
}
.att-footer-premium__badge strong,
.att-footer-premium__badge em {
  display: block;
  font-family: var(--font-button, "Poppins", sans-serif);
  line-height: 1.2;
}
.att-footer-premium__badge strong {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.att-footer-premium__badge em {
  margin-top: 0.12rem;
  font-size: 0.73rem;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
}
.att-footer-premium__main {
  padding: clamp(3.4rem, 6vw, 5.4rem) 0 clamp(3rem, 5vw, 4.5rem);
}
.att-footer-premium__grid {
  display: grid;
  grid-template-columns: minmax(13rem, 1.05fr) minmax(10rem, 0.78fr) minmax(12rem, 0.95fr) minmax(24rem, 1.55fr);
  gap: clamp(2rem, 3.6vw, 4.25rem);
  align-items: start;
}
.att-footer-premium__brand,
.att-footer-premium__nav,
.att-footer-premium__connect { min-width: 0; }
.att-footer-premium__logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.att-footer-premium__brand-name {
  font-family: var(--font-heading, "Fraunces", Georgia, serif);
  font-size: 1.45rem;
  color: var(--att-footer-text, var(--ink));
}
.att-footer-premium__description {
  max-width: 23rem;
  margin-top: 1.45rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: color-mix(in srgb, var(--att-footer-text, var(--ink)) 76%, transparent);
}
.att-footer-premium__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.6rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--att-footer-text, var(--ink));
}
.att-footer-premium__phone span { color: var(--att-footer-button, var(--green)); }
.att-footer-premium__copy {
  margin-top: 2rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--att-footer-text, var(--ink));
}
.att-footer-premium__legal {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.att-footer-premium__legal a,
.att-footer-premium__contact a {
  color: var(--att-footer-text, var(--ink));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.att-footer-premium__nav h3,
.att-footer-premium__connect h3 {
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--att-footer-text, var(--ink));
}
.att-footer-premium__nav ul {
  display: grid;
  gap: 1.22rem;
  margin-top: 1.9rem;
}
.att-footer-premium__nav li,
.att-footer-premium__nav a {
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--att-footer-text, var(--ink)) !important;
}
.att-footer-premium__nav a:hover,
.att-footer-premium__legal a:hover,
.att-footer-premium__contact a:hover { color: var(--att-footer-button, var(--green)) !important; }
.att-footer-premium__connect > p {
  max-width: 32rem;
  margin-top: 1.85rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.75;
  color: color-mix(in srgb, var(--att-footer-text, var(--ink)) 76%, transparent);
}
.att-footer-premium__newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8rem;
  max-width: 31rem;
  margin-top: 1.35rem;
}
.att-footer-premium__newsletter input {
  min-width: 0;
  width: 100%;
  height: 2.85rem;
  border: 1px solid color-mix(in srgb, var(--att-footer-text, var(--ink)) 8%, transparent);
  background: var(--cream);
  padding: 0 0.95rem;
  color: var(--ink);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.88rem;
}
.att-footer-premium__newsletter input:focus {
  outline: 2px solid color-mix(in srgb, var(--att-footer-button, var(--green)) 35%, transparent);
  outline-offset: 2px;
}
.att-footer-premium__newsletter button {
  justify-self: start;
  min-width: 10rem;
  min-height: 2.85rem;
  border: 0;
  background: var(--att-footer-button, var(--green));
  color: var(--cream);
  padding: 0 1.65rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.att-footer-premium__newsletter button:hover { filter: brightness(0.88); }
.att-footer-premium__notice {
  margin-top: 0.85rem !important;
  max-width: 31rem;
  border-left: 4px solid var(--att-footer-button, var(--green));
  background: color-mix(in srgb, var(--att-footer-button, var(--green)) 10%, transparent);
  padding: 0.75rem 0.9rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--att-footer-text, var(--ink)) !important;
}
.att-footer-premium__notice--error {
  border-left-color: var(--att-footer-accent, var(--gold));
  background: color-mix(in srgb, var(--att-footer-accent, var(--gold)) 14%, transparent);
}
.att-footer-premium__small {
  margin-top: 0.95rem !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: color-mix(in srgb, var(--att-footer-text, var(--ink)) 72%, transparent) !important;
}
.att-footer-premium__social-heading { margin-top: 2.45rem; }
.att-footer-premium__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.3rem;
}
.att-footer-premium__socials a {
  width: 2.55rem;
  height: 2.55rem;
  background: var(--att-footer-accent, var(--gold));
  color: var(--att-footer-text, var(--ink));
}
.att-footer-premium__socials a:hover {
  background: var(--att-footer-button, var(--green));
  color: var(--cream);
}
.att-footer-premium__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.1rem;
  margin-top: 1.35rem;
  font-size: 0.84rem;
}
.att-footer-premium__bottom {
  border-top: 1px solid color-mix(in srgb, var(--att-footer-text, var(--ink)) 14%, transparent);
}
.att-footer-premium__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.75rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
}
.att-footer-premium__bottom .att-footer-premium__copy {
  margin-top: 0;
}
.att-footer-premium__bottom .att-footer-premium__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  margin-top: 0;
}
@media (max-width: 1080px) {
  .att-footer-premium__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .att-footer-premium__connect { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .att-footer-premium__recommend-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .att-footer-premium__badges { justify-content: flex-start; }
  .att-footer-premium__grid,
  .att-footer-premium__newsletter { grid-template-columns: 1fr; }
}

/* Tour card */
.tour-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 16px 48px -42px rgba(26,32,24,.45);
}
.tour-card .tour-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  min-height: 10.75rem;
}
.tour-card .tour-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.tour-card:hover .tour-media img { transform: scale(1.06); }
.tour-card .tour-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(26,32,24,.74) 0%, rgba(26,32,24,.36) 24%, rgba(26,32,24,0) 58%);
}
.tour-card__title {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.8rem;
  z-index: 2;
  color: #fff;
  font-family: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}
.tour-card__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 1rem 0.95rem;
}
.tour-card__price {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.78rem;
  line-height: 1.3;
  text-transform: uppercase;
}
.tour-card__price span {
  color: var(--ink-soft);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: none;
}
.tour-card__price small {
  margin-left: 0.2rem;
  color: var(--taupe-soft);
  font-size: 0.68rem;
}
.tour-card__visit {
  display: -webkit-box;
  min-height: 2.75rem;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--taupe-soft);
  font-size: 0.82rem;
  line-height: 1.65;
}
.tour-card__visit span {
  color: var(--taupe-soft);
  font-weight: 500;
}
.tour-card__actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 0.7rem;
}
.tour-card .btn {
  border-radius: 0;
  padding: 0.58rem 0.8rem;
  font-size: 0.68rem;
  line-height: 1;
  text-transform: uppercase;
}
.tour-card .btn:hover {
  transform: none;
}
.tour-card__whatsapp {
  position: relative;
  z-index: 2;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  place-items: center;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(34,197,94,.85);
  transition: background-color .2s ease, transform .2s ease;
}
.tour-card__whatsapp:hover {
  background: #16a34a;
  transform: translateY(-1px);
}
.tour-card__whatsapp svg {
  width: 1.25rem;
  height: 1.25rem;
}
@media (max-width: 767px) {
  .tour-card .tour-media {
    aspect-ratio: 16 / 8.5;
  }
  .tour-card__body {
    padding: 0.95rem;
  }
  .tour-card__actions {
    flex-wrap: wrap;
  }
}

/* Meta list (icon rows) */
.meta-row { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-button, "Poppins", sans-serif); font-size: 0.78rem; color: var(--taupe-soft); }
.meta-row svg { width: 1rem; height: 1rem; color: var(--gold); flex: 0 0 auto; }

/* Inline SVG icon system (att_get_theme_icon). Icons inherit the current text
   colour by default; the -gold/-green modifiers force a brand colour. Sizing is
   em-based so icons scale with, and align to, the text they sit beside. */
.att-icon { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.16em; flex: none; }
.att-icon-sm { width: 1em; height: 1em; vertical-align: -0.12em; }
.att-icon-md { width: 1.5rem; height: 1.5rem; vertical-align: -0.35rem; }
.att-icon-gold { color: var(--gold); }
.att-icon-green { color: var(--green); }

/* Divider dot */
.dot { display: inline-block; width: 3px; height: 3px; border-radius: 999px; background: var(--gold); vertical-align: middle; }

/* Feature list bullet */
.feature-list li { position: relative; padding-left: 1.4rem; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 6px; height: 6px; background: var(--green); transform: rotate(45deg);
}
.exclude-list li { position: relative; padding-left: 1.4rem; color: var(--taupe-soft); }
.exclude-list li::before {
  content: "\00d7"; position: absolute; left: 0.1rem; top: -0.05em;
  color: #b45a4a; font-weight: 700;
}

/* Inputs */
.field-label { font-family: var(--font-button, "Poppins", sans-serif); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe-soft); margin-bottom: 0.4rem; display: block; }
.field {
  width: 100%;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.92rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: #a8a091; }
.field:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(70,91,45,.12); }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.1rem; padding-right: 2.4rem; }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--sand); }
.faq-trigger {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0; cursor: pointer; background: none; border: none;
  font-family: var(--font-heading, "Fraunces", serif); font-size: 1.15rem; color: var(--ink); font-weight: 500;
}
.faq-icon { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid var(--sand); border-radius: 999px; transition: transform .3s ease, background-color .3s ease, color .3s ease; color: var(--green); }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--green); color: #fff; border-color: var(--green); }
.faq-panel { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.faq-panel-inner { padding: 0 0 1.4rem; color: var(--taupe-soft); font-size: 0.95rem; line-height: 1.75; max-width: 60ch; }

/* Section helpers */
.section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
@media (min-width: 1024px) { .section { padding-top: 7rem; padding-bottom: 7rem; } }
.container-x { max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .container-x { padding-inline: 2rem; } }

/* Homepage topographic overlays: quiet depth, never a text layer. */
.att-home-hero-pattern {
  isolation: isolate;
}
.att-home-hero-pattern::before {
  content: "";
  position: absolute;
  inset: -18% -14%;
  z-index: 1;
  pointer-events: none;
  background-image: url("../images/patterns/topographic-safari-pattern-4.webp");
  background-position: 76% 18%;
  background-repeat: no-repeat;
  background-size: min(1280px, 90vw) auto;
  opacity: 0.082;
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(ellipse at 74% 28%, rgba(0,0,0,.92) 0%, rgba(0,0,0,.44) 46%, transparent 78%);
  mask-image: radial-gradient(ellipse at 74% 28%, rgba(0,0,0,.92) 0%, rgba(0,0,0,.44) 46%, transparent 78%);
}
.att-home-hero-pattern > img,
.att-home-hero-pattern > .hero-video,
.att-home-hero-pattern > .absolute {
  z-index: 0;
}
.att-home-hero-pattern > .container-x {
  z-index: 2;
}
.att-home-hero-pattern .btn,
.att-hero-quote-card,
.att-hero-quote-card .field,
.att-hero-quote-card .att-hero-quote-alert {
  border-radius: 0;
}
.att-hero-quote-card {
  max-width: 36rem;
}
.att-hero-quote-card .field {
  min-height: 2.75rem;
  padding: 0.68rem 0.85rem;
}
.att-hero-quote-card textarea.field {
  min-height: 4.75rem;
  resize: vertical;
}
.att-hero-quote-card .btn {
  min-height: 2.8rem;
  padding-block: 0.7rem;
}
.att-hero-quote-note {
  margin-top: 0.38rem;
}
@media (max-width: 767px) {
  .att-hero-quote-card {
    max-width: none;
  }
  .att-hero-quote-card textarea.field {
    min-height: 4.35rem;
  }
}

/* Subtle safari pattern background for package grids and story bands. */
.att-pattern-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.att-pattern-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../images/patterns/topographic-safari-pattern-5.webp");
  background-position: center top;
  background-repeat: repeat;
  background-size: 1180px auto;
  opacity: 0.035;
}
.att-pattern-section.bg-cream-100::before {
  opacity: 0.045;
}
.att-pattern-section > .container-x {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .att-pattern-section::before {
    background-size: 920px auto;
    opacity: 0.02;
  }
  .att-pattern-section.bg-cream-100::before {
    opacity: 0.028;
  }
}

.att-home-featured-pattern::before {
  background-image:
    linear-gradient(180deg, rgba(251,250,246,.52), rgba(251,250,246,.88)),
    url("../images/patterns/topographic-safari-pattern-5.webp");
  background-size: auto, 1120px auto;
  opacity: 0.07;
}
.att-home-corner-pattern::after {
  content: "";
  position: absolute;
  right: max(-11rem, -10vw);
  bottom: -7rem;
  z-index: 0;
  width: min(620px, 52vw);
  aspect-ratio: 16 / 9;
  pointer-events: none;
  background: url("../images/patterns/topographic-safari-pattern-4.webp") center / cover no-repeat;
  opacity: 0.08;
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 45%, transparent 75%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 45%, transparent 75%);
}
.att-home-corner-pattern > .container-x {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .att-home-hero-pattern::before {
    background-size: 760px auto;
    opacity: 0.055;
  }
  .att-home-featured-pattern::before {
    opacity: 0.038;
  }
  .att-home-corner-pattern::after {
    opacity: 0.045;
    width: 92vw;
  }
}

/* Rule ornament (centered) */
.rule-ornament { display: flex; align-items: center; justify-content: center; gap: 0.75rem; color: var(--gold); }
.rule-ornament::before, .rule-ornament::after { content: ""; height: 1px; width: 2.5rem; background: var(--gold-300); }

/* Gold link */
.link-gold { font-family: var(--font-button, "Poppins", sans-serif); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--green); display: inline-flex; align-items: center; gap: 0.4rem; transition: gap .25s ease, color .25s ease; }
.link-gold:hover { color: var(--gold); gap: 0.7rem; }

/* ---------- Header ---------- */
.site-header { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.site-header.scrolled { box-shadow: 0 10px 40px -28px rgba(26,32,24,.5); }
.nav-link {
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.82rem; font-weight: 500;
  color: var(--ink); position: relative;
  padding: 0.25rem 0;
  transition: color .2s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--gold); transition: width .28s ease;
}
.nav-link:hover { color: var(--green); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--green); }

/* Header dropdown menus (shown only when a menu item has child links) */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-link--has-dropdown { display: inline-flex; align-items: center; gap: 0.25rem; }
.nav-caret { width: 0.78em; height: 0.78em; transition: transform .2s ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
/* invisible bridge so hover survives the gap between link and dropdown */
.nav-item::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1rem; }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 0.85rem; z-index: 70;
  min-width: 12.5rem; padding: 0.4rem;
  background: #fff; border: 1px solid var(--sand); border-radius: 0.9rem;
  box-shadow: 0 20px 46px -24px rgba(26,32,24,.5);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-link {
  display: block; padding: 0.55rem 0.7rem; border-radius: 0.55rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.nav-dropdown-link:hover { background: var(--cream-100); color: var(--green); }

/* Mobile menu */
.mobile-menu { transition: opacity .3s ease, visibility .3s ease; }
.mobile-menu.hidden-menu { opacity: 0; visibility: hidden; pointer-events: none; }
.mobile-panel { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.mobile-menu.hidden-menu .mobile-panel { transform: translateX(100%); }
.hamburger span { display: block; height: 2px; width: 22px; background: var(--ink); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Animations ---------- */
@keyframes atf-ken-burns { from { transform: scale(1); } to { transform: scale(1.12); } }
.ken-burns { animation: atf-ken-burns 16s ease-out forwards; }

/* Entrance animations are off. Content is painted at full opacity on the first
   frame, so nothing waits on scroll position or JS to become readable. */
.js .reveal, .reveal { opacity: 1; transform: none; transition: none; }
.reveal.d1, .reveal.d2, .reveal.d3, .reveal.d4 { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .ken-burns { animation: none; }
  .fade-up { opacity: 1 !important; animation: none; }
  html { scroll-behavior: auto; }
}

/* Hero content: no entrance animation, visible on first paint. */
.fade-up, .fade-up.f1, .fade-up.f2, .fade-up.f3, .fade-up.f4, .fade-up.f5 {
  opacity: 1; transform: none; animation: none; animation-delay: 0s;
}

/* Marquee (trust bar) */
.marquee { display: flex; overflow: hidden; }
.marquee-track { display: flex; gap: 3.5rem; white-space: nowrap; animation: atf-marquee 32s linear infinite; }
@keyframes atf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Slider (testimonials) */
.slider-track { display: flex; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.slider-slide { flex: 0 0 100%; }
.slider-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--sand); transition: width .3s ease, background-color .3s ease; }
.slider-dot.active { width: 26px; background: var(--gold); }

/* Gallery hover */
.gallery-item { position: relative; overflow: hidden; }
.gallery-item img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: rgba(26,32,24,0); transition: background .4s ease; pointer-events: none; }
.gallery-item:hover::after { background: rgba(26,32,24,.18); }

/* Whole-card click target. Decorative hover overlays must not swallow clicks,
   and the marked link stretches across the entire card so clicking anywhere
   (except real buttons/links) follows it. */
.tour-card .tour-media::after { pointer-events: none; }
.att-card-link { position: relative; }
.att-card-link .att-card-link__target::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.att-card-link a:not(.att-card-link__target),
.att-card-link button { position: relative; z-index: 2; }

/* Utility: hide scrollbar on horizontal scroll rows */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Timeline (itinerary days) */
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--gold-300), var(--sand)); }
.timeline-item { position: relative; padding-left: 3.25rem; }
.timeline-num {
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--green); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-button, "Poppins", sans-serif); font-size: 0.75rem; font-weight: 600;
  box-shadow: 0 0 0 4px var(--cream);
}

/* Itinerary day rich text, client-editable, long-form friendly.
   Keeps the frozen palette/fonts; just makes WYSIWYG day copy read well. */
.itin-prose { font-size: 0.95rem; line-height: 1.78; color: var(--taupe-soft); }
.itin-prose > :first-child { margin-top: 0; }
.itin-prose > * + * { margin-top: 0.8rem; }
.itin-prose p { margin: 0; }
.itin-prose strong, .itin-prose b { color: var(--ink); font-weight: 600; }
.itin-prose em, .itin-prose i { font-style: italic; }
.itin-prose a { color: var(--green); text-decoration: underline; text-decoration-color: var(--gold-300); text-underline-offset: 3px; transition: color .2s ease; }
.itin-prose a:hover { color: var(--gold); }
.itin-prose ul, .itin-prose ol { margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.itin-prose ul { list-style: none; }
.itin-prose ul li { position: relative; padding-left: 1.25rem; }
.itin-prose ul li::before { content: ""; position: absolute; left: 0.15rem; top: 0.62em; width: 6px; height: 6px; border-radius: 999px; background: var(--gold); }
.itin-prose ol { list-style: decimal; padding-left: 1.4rem; }
.itin-prose ol li { padding-left: 0.2rem; }
.itin-prose ol li::marker { color: var(--green); font-weight: 600; }
.itin-prose h3, .itin-prose h4 { font-family: var(--font-heading, "Fraunces", Georgia, serif); color: var(--ink); font-weight: 600; font-size: 1.05rem; margin-top: 1rem; }
.itin-prose blockquote { margin: 0; border-left: 3px solid var(--gold-300); padding-left: 0.9rem; color: var(--ink-soft); font-style: italic; }

/* ============================================================================
   Modern single-tour itinerary (single-safari_package.php)
   Premium safari day cards. JS hooks preserved: data-itinerary-preview/slide/
   prev/next/dots/dot (slides toggle .hidden; dots toggle .bg-gold/.scale-125/
   .bg-white/65) and data-accommodation-open.
   ============================================================================ */
/* Subtle dotted safari-route decoration behind the day-to-day itinerary cards
   (single tour page only). Sits behind content; cards render above it. */
.att-itinerary-route-bg {
  position: relative;
  overflow: hidden;
}
.att-itinerary-route-bg::before {
  content: "";
  position: absolute;
  inset: -1.5rem 0 0;
  background-image: url("../images/decorations/itinerary-dotted-route.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 1200px;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.att-itinerary-route-bg > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .att-itinerary-route-bg::before {
    background-position: center top;
    background-size: auto 1000px;
    opacity: 0.1;
  }
}

.att-itinerary-modern { display: flex; flex-direction: column; gap: 1.6rem; position: relative; }

.att-itinerary-day-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(251,250,246,.94)),
    #fff;
  border: 1px solid rgba(216, 203, 181, 0.85);
  border-left: 4px solid var(--gold);
  border-radius: 0;
  box-shadow: 0 28px 82px -58px rgba(26, 32, 24, 0.72);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.att-itinerary-day-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../images/patterns/topographic-safari-pattern-5.webp") right top / 760px auto repeat;
  opacity: 0.026;
}
.att-itinerary-day-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 40px 92px -58px rgba(26, 32, 24, 0.78);
  border-color: var(--gold-300);
}
@media (min-width: 768px) {
  /* Wider content column + a capped, top-aligned image. Long day text no longer
     stretches the photo into a tall strip, the image stays a clean rectangle
     and the text uses the extra width (fewer wrapped lines, a wider card). */
  .att-itinerary-day-card { grid-template-columns: minmax(0, 38%) 1fr; align-items: start; }
}
@media (min-width: 1200px) {
  .att-itinerary-day-card { grid-template-columns: minmax(0, 36%) 1fr; }
}

/* Media / image preview */
.att-itinerary-day-media {
  position: relative;
  min-height: 240px;
  background: var(--cream-200);
  overflow: hidden;
}
.att-itinerary-slide { margin: 0; height: 100%; }
.att-itinerary-day-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 768px) {
  /* Cap the image to a tidy rectangle so it can't stretch to match a tall text
     column. It pins to the top of the card; a longer text column simply runs
     past it. */
  .att-itinerary-day-media {
    align-self: start;
    height: clamp(300px, 36vh, 420px);
    min-height: 0;
  }
  .att-itinerary-day-media img { aspect-ratio: auto; height: 100%; min-height: 0; }
}
.att-itinerary-day-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 32, 24, 0.30) 0%, rgba(26, 32, 24, 0) 32%);
}

/* No photograph for this day. A quiet, deliberate panel rather than the
   placeholder line-art the slider used to pad itself out with. */
.att-itinerary-day-media--empty {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(216, 203, 181, 0.36), rgba(251, 250, 246, 0.92)),
    var(--cream-200);
}
.att-itinerary-day-media--empty::after { background: none; }
.att-itinerary-day-place {
  position: relative; z-index: 2;
  max-width: 80%;
  padding: 0 1rem;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
  color: var(--taupe, #7d7361);
}

/* Floating Day badge */
.att-itinerary-day-badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  display: inline-flex; align-items: center;
  padding: 0.42rem 0.95rem; border-radius: 0;
  background: linear-gradient(135deg, var(--gold-400), var(--gold));
  color: #fff;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 10px 22px -10px rgba(183, 131, 59, 0.85);
}
.att-itinerary-day-badge svg { width: 0.9rem; height: 0.9rem; margin-right: 0.4rem; flex: none; }

/* Nav arrows */
.att-itinerary-nav {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  display: grid; place-items: center;
  height: 2.1rem; width: 2.1rem; border-radius: 0;
  background: rgba(26, 32, 24, 0.42); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  cursor: pointer; transition: background .2s ease;
}
.att-itinerary-nav:hover { background: rgba(26, 32, 24, 0.64); }
.att-itinerary-nav svg { width: 1.05rem; height: 1.05rem; }
.att-itinerary-nav--prev { left: 0.7rem; }
.att-itinerary-nav--next { right: 0.7rem; }

/* Dots (JS toggles .bg-gold / .scale-125 / .bg-white/65) */
.att-itinerary-dots {
  position: absolute; bottom: 0.85rem; left: 50%; z-index: 3;
  transform: translateX(-50%);
  display: flex; gap: 0.4rem;
}
.att-itinerary-dot {
  height: 0.5rem; width: 0.5rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  cursor: pointer; transition: transform .2s ease, background-color .2s ease;
}

/* Content panel */
.att-itinerary-day-content {
  padding: 1.5rem 1.5rem 1.65rem;
  display: flex; flex-direction: column; min-width: 0;
}
@media (min-width: 768px) {
  .att-itinerary-day-content { padding: 1.85rem 1.9rem 1.9rem 1.6rem; }
}
.att-itinerary-day-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem;
}
.att-itinerary-day-title {
  font-family: var(--font-heading, "Fraunces", Georgia, serif);
  font-size: 1.42rem; font-weight: 500; line-height: 1.2; color: var(--ink);
}
.att-itinerary-day-location {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.78rem; font-weight: 500; color: var(--clay);
}
.att-itinerary-day-location svg { width: 0.95rem; height: 0.95rem; flex: none; }
.att-itinerary-day-desc { margin-top: 0.75rem; }

/* Meta area: accommodation box + a single full-width meals line. */
.att-itinerary-meta {
  margin-top: 1.15rem; padding-top: 1.15rem;
  border-top: 1px solid var(--sand-line);
  display: flex; flex-direction: column; gap: 0.9rem;
}
/* Meals on one line: label + all badges inline, wrapping only if truly needed. */
.att-meals-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.85rem;
}
.att-meals-row .att-meal-badges { margin-top: 0; }
.att-meals-label { flex: none; }
.att-itinerary-meta-label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--taupe);
}
.att-itinerary-meta-label svg { width: 0.95rem; height: 0.95rem; color: var(--gold); flex: none; }

/* Accommodation preview (highlighted cream/gold box) */
.att-accommodation-preview {
  background: linear-gradient(155deg, #fff, var(--cream-100));
  border: 1px solid var(--sand);
  border-left: 3px solid var(--gold);
  border-radius: 0;
  padding: 0.9rem 1rem;
}
.att-accommodation-link,
.att-accommodation-name-wrap {
  display: block;
  margin-top: 0.5rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
}
.att-accommodation-name {
  font-family: var(--font-button, "Poppins", sans-serif);
  font-weight: 600; font-size: 0.92rem; color: var(--green); line-height: 1.35;
}
.att-accommodation-name-wrap { cursor: pointer; }
.att-accommodation-name-wrap:hover .att-accommodation-name,
.att-accommodation-name-wrap:focus-visible .att-accommodation-name {
  color: var(--gold);
}
.att-accommodation-name-wrap:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* "View details →" affordance so it's obvious the lodge opens a modal. */
.att-accommodation-cue {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.28rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.72rem; font-weight: 600; color: var(--gold);
  transition: gap .2s ease;
}
.att-accommodation-cue svg { width: 0.85rem; height: 0.85rem; }
.att-accommodation-name-wrap:hover .att-accommodation-cue,
.att-accommodation-name-wrap:focus-visible .att-accommodation-cue { gap: 0.55rem; }
.att-accommodation-name--static { display: block; margin-top: 0.5rem; color: var(--ink-soft); font-weight: 500; }
/* Optional "No accommodation" note (per-tour opt-in), muted, not a highlight. */
.att-accommodation-preview--none { border-left-color: var(--sand); }
.att-accommodation-none { color: var(--taupe); font-weight: 500; font-style: italic; }

/* Modern meal badges */
.att-meal-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.att-meal-badges::-webkit-scrollbar { display: none; }
.att-meal-badge {
  display: inline-flex; align-items: center; flex: 0 0 auto; gap: 0.32rem;
  background: rgba(70, 91, 45, 0.09);
  color: var(--green-700);
  border: 1px solid rgba(70, 91, 45, 0.16);
  border-radius: 0;
  padding: 0.28rem 0.58rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.7rem; font-weight: 600;
  white-space: nowrap;
}
/* Per-meal icon (breakfast / lunch / dinner) replaces the old gold dot. */
.att-meal-badge svg { width: 0.95rem; height: 0.95rem; color: var(--gold); flex: none; }

/* Subtle timeline / progress rail on large screens. A single line on the
   wrapper (inside its left padding), never clipped by the cards' overflow and
   never causes horizontal overflow. The floating Day badges carry the sequence. */
@media (min-width: 992px) {
  .att-itinerary-modern { padding-left: 1.75rem; }
  .att-itinerary-modern::before {
    content: ""; position: absolute; left: 0.5rem; top: 1.4rem; bottom: 1.4rem; width: 2px;
    border-radius: 2px;
    background: linear-gradient(var(--gold-300), var(--sand));
  }
}

/* Single-tour inquiry sidebar: aligned, calm, premium. */
.att-tour-sidebar {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,250,246,.96)),
    #fff;
  border-color: rgba(216, 203, 181, 0.92);
  box-shadow: 0 28px 84px -62px rgba(26,32,24,.78);
}
.att-tour-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../images/patterns/topographic-safari-pattern-5.webp") right top / 680px auto repeat;
  opacity: 0.028;
}
.att-tour-sidebar > * {
  position: relative;
  z-index: 1;
}
.att-tour-sidebar-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
}
.att-tour-rating {
  border-radius: 0;
  white-space: nowrap;
}
.att-tour-rating svg {
  width: 0.85rem;
  height: 0.85rem;
}
/* At-a-glance facts panel: header + stat tiles + icon rows (left-aligned so
   long values wrap cleanly instead of a ragged right-aligned column). */
.att-facts-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.95rem;
}
.att-facts-eyebrow {
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--clay);
}
.att-facts-id {
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--gold); white-space: nowrap;
  background: rgba(183, 131, 59, 0.1);
  border: 1px solid rgba(183, 131, 59, 0.28);
  padding: 0.3rem 0.62rem; border-radius: 0;
}
.att-facts-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.6rem; margin-bottom: 0.9rem;
}
.att-stat {
  background: linear-gradient(155deg, var(--cream-100), #fff);
  border: 1px solid var(--gold-300); border-radius: 0;
  padding: 0.85rem 0.95rem;
}
.att-stat-value {
  display: block;
  font-family: var(--font-heading, "Fraunces", Georgia, serif);
  font-size: 1.45rem; font-weight: 500; line-height: 1.1; color: var(--ink);
}
.att-stat-label {
  display: block; margin-top: 0.3rem;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--taupe);
}
.att-facts-rows { display: grid; gap: 0; }
.att-fact-row {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 0.8rem; row-gap: 0.1rem; align-items: center;
  padding: 0.72rem 0; border-top: 1px solid rgba(216, 203, 181, 0.5);
}
.att-fact-row:first-child { border-top: 0; padding-top: 0.2rem; }
.att-fact-ic {
  grid-row: 1 / span 2; align-self: center;
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 0;
  background: rgba(183, 131, 59, 0.1); color: var(--gold); flex: none;
}
.att-fact-ic svg { width: 1.05rem; height: 1.05rem; }
.att-fact-row dt {
  grid-column: 2; margin: 0;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--taupe); line-height: 1.3;
}
.att-fact-row dd {
  grid-column: 2; margin: 0.12rem 0 0;
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.9rem; font-weight: 600; line-height: 1.45; color: var(--ink);
}
.att-tour-sidebar .field,
.att-tour-sidebar select.field,
.att-tour-sidebar textarea.field,
.att-tour-assurance {
  border-radius: 0;
}
.att-tour-assurance {
  border-left: 3px solid var(--gold);
}

.att-tour-sidebar-form-head {
  border-left: 3px solid var(--gold);
  background: rgba(251, 250, 246, 0.74);
  padding: 0.82rem 1rem;
}

.att-accommodation-modal-panel {
  border-radius: 0;
  border: 1px solid rgba(216, 203, 181, 0.88);
  box-shadow: 0 36px 120px -40px rgba(0, 0, 0, 0.55);
}
.att-accommodation-modal-panel .badge,
.att-accommodation-modal-panel [class*="rounded"] {
  border-radius: 0;
}
.att-accommodation-modal-panel [data-accommodation-dots] [data-accommodation-dot] {
  border-radius: 999px;
}

/* Sticky sidebar: pin below the header, but cap its height to the viewport and
   scroll internally so the enquiry form is always reachable even on short
   screens / long fact lists. A slim gold scrollbar keeps it feeling intentional. */
@media (min-width: 1024px) {
  .att-tour-aside {
    position: sticky;
    top: 7rem;
    align-self: start;
    max-height: calc(100vh - 8.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 3px 6px 8px;
    margin: -3px -6px -8px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-300) transparent;
  }
  .att-tour-aside::-webkit-scrollbar { width: 7px; }
  .att-tour-aside::-webkit-scrollbar-thumb { background: var(--gold-300); border-radius: 999px; }
  .att-tour-aside::-webkit-scrollbar-track { background: transparent; }
}

/* Blog cards and single-post content. */
.att-post-card {
  position: relative;
  border-left: 3px solid transparent;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.att-post-card:hover {
  transform: translateY(-3px);
  border-left-color: var(--gold);
}
/* Featured lead post: the one deliberately-rounded card on the blog index.
   Opts back into soft corners (the rest of the site stays square) and gets a
   warmer shadow. */
.att-post-featured {
  border-radius: 22px;
  box-shadow: 0 34px 80px -54px rgba(26, 32, 24, 0.7);
  transition: transform .35s ease, box-shadow .35s ease;
}
.att-post-featured:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.att-post-featured-media img { min-height: 260px; }
@media (min-width: 768px) {
  .att-post-featured-media { height: 100%; }
  .att-post-featured-media img { height: 100%; }
}
.att-blog-prose {
  max-width: 780px;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.9;
}
.att-blog-prose > :first-child {
  margin-top: 0;
}
.att-blog-prose > * + * {
  margin-top: 1.15rem;
}
.att-blog-prose h2,
.att-blog-prose h3,
.att-blog-prose h4 {
  color: var(--ink);
  font-family: var(--font-heading, "Fraunces", Georgia, serif);
  font-weight: 600;
  line-height: 1.22;
}
.att-blog-prose h2 {
  margin-top: 2.2rem;
  font-size: 1.75rem;
}
.att-blog-prose h3 {
  margin-top: 1.8rem;
  font-size: 1.35rem;
}
.att-blog-prose p,
.att-blog-prose ul,
.att-blog-prose ol {
  margin-bottom: 0;
}
.att-blog-prose ul,
.att-blog-prose ol {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.35rem;
}
.att-blog-prose a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: var(--gold-300);
  text-underline-offset: 3px;
}
.att-blog-prose img {
  width: 100%;
  height: auto;
  border: 1px solid var(--sand);
}
.att-blog-prose blockquote {
  margin: 1.5rem 0;
  border-left: 3px solid var(--gold);
  background: var(--cream-100);
  padding: 1rem 1.25rem;
  color: var(--ink);
  font-family: var(--font-heading, "Fraunces", Georgia, serif);
  font-size: 1.2rem;
  font-style: italic;
}

/* Homepage hero YouTube video background.
   The hero <img> stays as the base/fallback layer; this iframe covers it on
   desktop only. Hidden on small screens so mobile uses the image instead. */
.hero-video { pointer-events: none; z-index: 0; }
.hero-video__frame {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;            /* 16:9 based on width  */
  min-width: 177.78vh; min-height: 100%;    /* 16:9 based on height */
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
@media (max-width: 767px) { .hero-video { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }

/* Translation switcher wrapper (renders admin-provided shortcode) */
.att-translate { display: inline-flex; align-items: center; }
.att-translate--footer { margin-top: 0.75rem; }

/* GDPR cookie consent banner */
.att-cookie {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 90; width: min(960px, calc(100% - 2rem));
  background: var(--ink); color: #fff;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.6);
  padding: 1rem 1.25rem;
  opacity: 0; translate: 0 12px; transition: opacity .3s ease, translate .3s ease;
}
.att-cookie.is-visible { opacity: 1; translate: 0 0; }
.att-cookie__inner { display: flex; flex-direction: column; gap: .85rem; }
@media (min-width: 720px) { .att-cookie__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.att-cookie__text { font-size: .84rem; line-height: 1.6; color: rgba(255,255,255,.75); margin: 0; }
.att-cookie__link { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.att-cookie__actions { display: flex; gap: .6rem; flex: none; }

/* Legal / policy document typography */
.legal-prose { font-size: 1rem; line-height: 1.85; color: var(--ink-soft); }
.legal-prose > :first-child { margin-top: 0; }
.legal-prose h2 { font-family: var(--font-heading, "Fraunces", Georgia, serif); color: var(--ink); font-size: 1.4rem; font-weight: 600; margin: 2rem 0 0.65rem; }
.legal-prose h3 { font-family: var(--font-heading, "Fraunces", Georgia, serif); color: var(--ink); font-size: 1.12rem; font-weight: 600; margin: 1.4rem 0 0.5rem; }
.legal-prose p { margin: 0 0 1rem; }
.legal-prose strong, .legal-prose b { color: var(--ink); font-weight: 600; }
.legal-prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose a:hover { color: var(--gold); }
.legal-prose ul, .legal-prose ol { margin: 0 0 1rem; padding-left: 1.35rem; display: grid; gap: 0.4rem; }
.legal-prose ul { list-style: none; padding-left: 0; }
.legal-prose ul li { position: relative; padding-left: 1.35rem; }
.legal-prose ul li::before { content: ""; position: absolute; left: 0.2rem; top: 0.7em; width: 6px; height: 6px; border-radius: 999px; background: var(--gold); }
.legal-prose ol { list-style: decimal; }
.legal-prose ol li::marker { color: var(--green); font-weight: 600; }
.legal-prose em { font-style: italic; color: var(--taupe-soft); }

/* Print niceties (in case of PDF export later) */
@media print {
  .site-header, .mobile-menu, .announce-bar, .to-top { display: none !important; }
}

/* Back-to-top */
.to-top { transition: opacity .3s ease, transform .3s ease; }
.to-top.hide { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* Filter chips */
.filter-chip {
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.76rem; font-weight: 500; letter-spacing: 0.03em;
  padding: 0.55rem 1.2rem; border-radius: 999px;
  border: 1px solid var(--sand); color: var(--taupe-soft); background: #fff;
  cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.filter-chip:hover { border-color: var(--clay); color: var(--clay); }
.filter-chip.is-active { background: var(--clay); border-color: var(--clay); color: #fff; box-shadow: 0 10px 26px -14px rgba(122,61,61,.7); }
/* Selected field state (filter selects with a non-default value) */
.field.is-set { border-color: var(--clay); box-shadow: 0 0 0 3px var(--clay-tint); }

/* Invisible spam trap for real forms. It stays reachable to simple bots while
   remaining out of sight and out of keyboard flow for visitors. */
.att-form-trap {
  display: none !important;
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Package grid pagination */
.att-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem; margin-top: 3rem;
}
.att-pagination[hidden] { display: none; }
.att-page-btn {
  font-family: var(--font-button, "Poppins", sans-serif);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  min-width: 2.6rem; height: 2.6rem; padding: 0 0.9rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border-radius: 999px; border: 1px solid var(--sand);
  background: #fff; color: var(--taupe-soft);
  cursor: pointer; white-space: nowrap;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.att-page-btn svg { width: 1.05em; height: 1.05em; }
.att-page-btn:hover:not([disabled]):not(.is-active) { border-color: var(--green); color: var(--green); }
.att-page-btn.is-active {
  background: var(--green); border-color: var(--green); color: #fff; cursor: default;
  box-shadow: 0 10px 26px -14px rgba(70,91,45,.7);
}
.att-page-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.att-page-ellipsis {
  min-width: 1.5rem; text-align: center; color: var(--taupe);
  font-size: 0.9rem; user-select: none;
}
.navigation.pagination .nav-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
}
.navigation.pagination .page-numbers {
  font-family: var(--font-button, "Poppins", sans-serif);
  min-width: 2.6rem; height: 2.6rem; padding: 0 0.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--sand);
  background: #fff; color: var(--taupe-soft);
  font-size: 0.8rem; font-weight: 600;
}
.navigation.pagination .page-numbers.current {
  background: var(--green); border-color: var(--green); color: #fff;
}
.navigation.pagination a.page-numbers:hover { border-color: var(--green); color: var(--green); }
@media (max-width: 479px) {
  .att-page-nav .att-page-nav-label { display: none; }
  .att-page-nav { min-width: 2.6rem; padding: 0 0.7rem; }
}

/* Final square-corner enforcement for the requested card/button design. This
   sits last so later component rules and Tailwind radius utilities cannot
   re-round cards, destination media, filters, pagination, or CTA buttons. */
.btn,
.card,
.tour-card,
.gallery-item,
.att-itinerary-day-card,
.filter-chip,
.att-page-btn,
.navigation.pagination .page-numbers,
a.rounded-full,
button.rounded-full:not([data-accommodation-dot]),
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-t-2xl,
.rounded-b-2xl {
  border-radius: 0;
}
.rounded-t-2xl {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rounded-b-2xl {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ============================================================
   Client updates, reviews on cream + left sticky sidebar filter
   ============================================================ */
/* Testimonials section moved to a light cream contour panel: recolour the
   slider's originally-white text/cards for legibility on the light background. */
#testimonials .text-white { color: var(--ink); }
#testimonials .text-white\/70,
#testimonials .text-white\/55 { color: var(--taupe-soft); }
#testimonials .bg-white\/5 { background-color: #fff; border-color: var(--sand); }
#testimonials .text-gold-200 { color: var(--gold); }
#testimonials .ring-gold-200\/40 { --tw-ring-color: color-mix(in srgb, var(--gold) 45%, transparent); }

/* Left sticky sidebar filter for the raw filter pages (Safaris + All Tours),
   where the form + grid are direct children of [data-package-scope]. Results
   stay a generous 2-up so cards are never cramped. Collapses on mobile. */
@media (min-width: 1024px) {
  [data-package-scope]:has(> [data-package-filter]) {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 2.5rem;
    row-gap: 0;
    align-items: start;
  }
  [data-package-scope]:has(> [data-package-filter]) > .max-w-3xl { grid-column: 1 / -1; }
  [data-package-scope]:has(> [data-package-filter]) > [data-package-filter] {
    grid-column: 1;
    position: sticky;
    top: 6.5rem;
  }
  [data-package-scope]:has(> [data-package-filter]) > [data-package-grid],
  [data-package-scope]:has(> [data-package-filter]) > .att-pagination,
  [data-package-scope]:has(> [data-package-filter]) > [data-filter-empty] {
    grid-column: 2;
  }
  [data-package-scope]:has(> [data-package-filter]) > [data-package-grid] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-package-scope]:has(> [data-package-filter]) > [data-package-filter] > .grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

/* ============================================================
   Kilimanjaro "Upcoming Trips" calendar + join modal + gallery
   ============================================================ */
.ak-cal-years { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ak-cal-year { padding: 0.55rem 1.3rem; font-family: var(--font-button, "Poppins", sans-serif); font-size: 0.85rem; font-weight: 600; color: var(--taupe-soft); background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid transparent; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.ak-cal-year:hover { color: var(--green); }
.ak-cal-year.is-active { color: var(--cream); background: var(--green); border-color: var(--green); }
.ak-cal-months { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ak-cal-month { position: relative; min-width: 2.9rem; padding: 0.5rem 0.7rem; font-family: var(--font-button, "Poppins", sans-serif); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; color: var(--taupe-soft); background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid transparent; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.ak-cal-month:disabled { opacity: 0.4; cursor: not-allowed; }
.ak-cal-month.has-trip { color: var(--ink); }
.ak-cal-month.has-trip::after { content: ""; position: absolute; top: 0.34rem; right: 0.4rem; width: 0.36rem; height: 0.36rem; border-radius: 999px; background: var(--clay); }
.ak-cal-month.is-active { color: var(--green); background: var(--cream); border-color: var(--green); }
.ak-cal-list { display: flex; flex-direction: column; }
.ak-dep { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--sand); }
.ak-dep[hidden] { display: none; }
.ak-dep__date { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.3rem; height: 3.3rem; border: 1px solid var(--sand); background: var(--cream); }
.ak-dep__day { font-family: var(--font-heading, "Fraunces", serif); font-size: 1.15rem; font-weight: 600; line-height: 1; color: var(--ink); }
.ak-dep__mon { font-family: var(--font-button, "Poppins", sans-serif); font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--taupe-soft); margin-top: 0.15rem; }
.ak-dep__range { flex: 0 0 auto; font-family: var(--font-heading, "Fraunces", serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.ak-dep__route { flex: 0 0 auto; font-size: 0.85rem; color: var(--taupe-soft); }
.ak-dep__spaces { flex: 0 0 auto; margin-left: auto; font-family: var(--font-button, "Poppins", sans-serif); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; }
.ak-dep__spaces--available { color: var(--green); }
.ak-dep__spaces--limited { color: var(--gold); }
.ak-dep__spaces--full { color: var(--taupe-soft); }
.ak-dep__cta { flex: 0 0 auto; padding: 0.55rem 1.15rem; font-size: 0.7rem; }
.ak-dep__cta.is-disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; filter: grayscale(0.35); }
@media (max-width: 639px) { .ak-dep__spaces { margin-left: 0; } .ak-dep__cta { width: 100%; } }
.ak-gallery-item { display: flex; flex-direction: column; }
.ak-gallery-item__media { overflow: hidden; }
.ak-gallery-item__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.ak-gallery-item:hover .ak-gallery-item__media img { transform: scale(1.05); }
.ak-gallery-item__caption { margin-top: 0.7rem; font-size: 0.85rem; line-height: 1.5; color: var(--taupe-soft); }
.ak-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ak-modal[hidden] { display: none; }
.ak-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 60%, transparent); backdrop-filter: blur(2px); }
.ak-modal__dialog { position: relative; width: 100%; max-width: 30rem; max-height: 90vh; overflow-y: auto; background: var(--cream); border-top: 3px solid var(--clay); box-shadow: 0 48px 100px -50px color-mix(in srgb, var(--ink) 55%, transparent); padding: 1.75rem; }
@media (min-width: 640px) { .ak-modal__dialog { padding: 2.25rem; } }
.ak-modal__close { position: absolute; top: 0.9rem; right: 0.9rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; color: var(--taupe-soft); background: color-mix(in srgb, var(--ink) 6%, transparent); transition: color .2s ease, background-color .2s ease; }
.ak-modal__close:hover { color: var(--clay); background: color-mix(in srgb, var(--clay) 10%, transparent); }
.ak-modal__close svg { width: 1.1rem; height: 1.1rem; }

/* Let the left sticky filter engage: the pattern section's overflow:hidden is a
   scroll-container ancestor that breaks position:sticky. Its ::before is inset:0,
   so relaxing overflow on filter sections spills nothing. */
.att-pattern-section:has([data-package-scope]) { overflow: visible; }

/* Match Absolutely Kili's premium serif for the Upcoming Trips heading */
#upcoming-trips .display-title { font-family: var(--font-heading, "Fraunces", Georgia, serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* ===================================================================
   Accommodations feature, homepage cards + filtered Accommodations page
   =================================================================== */
.att-accom-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.75rem; }
@media (min-width: 640px)  { .att-accom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .att-accom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.att-accom-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--sand-line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-card); text-decoration: none; color: inherit;
  scroll-margin-top: 120px;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.att-accom-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--sand); }

.att-accom-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--cream-200); overflow: hidden; }
.att-accom-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.att-accom-card:hover .att-accom-card__media img { transform: scale(1.05); }
.att-accom-card__level {
  position: absolute; top: .85rem; left: .85rem; background: rgba(26, 32, 24, .72); color: #fff;
  font-family: var(--font-button, "Poppins", sans-serif); font-size: .66rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px;
}

.att-accom-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.3rem 1.4rem 1.5rem; flex: 1; }
.att-accom-card__loc {
  display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-button, "Poppins", sans-serif);
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin: 0;
}
.att-accom-card__loc svg { width: .9rem; height: .9rem; flex: none; }
.att-accom-card__title { font-family: var(--font-heading, "Fraunces", Georgia, serif); font-style: italic; font-size: 1.4rem; line-height: 1.15; color: var(--green); margin: 0; }
.att-accom-card__desc { font-size: .93rem; line-height: 1.7; color: var(--ink-soft); margin: .1rem 0 .2rem; }
.att-accom-card__amenities { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.att-accom-card__chip {
  font-family: var(--font-button, "Poppins", sans-serif); font-size: .72rem; font-weight: 500; color: var(--taupe-soft);
  background: var(--cream-100); border: 1px solid var(--sand-line); padding: .3rem .6rem; border-radius: 999px;
}
.att-accom-card__chip--more { background: transparent; color: var(--clay); border-color: var(--clay-200); }
.att-accom-card__cue {
  margin-top: auto; padding-top: .4rem; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-button, "Poppins", sans-serif); font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--clay);
}
.att-accom-card__cue svg { width: .95rem; height: .95rem; transition: transform .3s ease; }
.att-accom-card--home:hover .att-accom-card__cue svg { transform: translateX(4px); }

/* Homepage "Accommodations" band, warm text panel (topographic contour) + one full-bleed image */
.att-home-accom { padding-block: 3rem; }
@media (min-width: 1024px) { .att-home-accom { padding-block: 4rem; } }
.att-home-accom-band { display: grid; grid-template-columns: 1fr; background: var(--cream-200); border: 1px solid var(--sand-line); overflow: hidden; }
@media (min-width: 900px) { .att-home-accom-band { grid-template-columns: 1.06fr 0.94fr; } }
.att-home-accom-copy { position: relative; isolation: isolate; padding: 2.75rem 2rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 900px) { .att-home-accom-copy { padding: 3.75rem 3.5rem; } }
/* Topographic safari contour behind the copy (same motif as .att-pattern-section) */
.att-home-accom-copy::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../images/patterns/topographic-safari-pattern-5.webp");
  background-position: center; background-repeat: repeat; background-size: 1100px auto;
  opacity: 0.06;
}
.att-home-accom-copy > * { position: relative; z-index: 1; }
.att-home-accom-eyebrow { font-family: var(--font-button, "Poppins", sans-serif); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
/* Heading inherits the site display style (.display-title: Fraunces italic, ink); we only size it */
.att-home-accom-title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.06; margin: 0; }
.att-home-accom-text { margin-top: 1.35rem; font-size: 1.04rem; line-height: 1.85; color: var(--ink-soft); max-width: 44ch; }
.att-home-accom-more { margin-top: 2rem; display: inline-flex; align-items: center; gap: 1rem; font-family: var(--font-button, "Poppins", sans-serif); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.att-home-accom-more__circle { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: var(--green); color: #fff; flex: none; transition: transform .3s ease, background .3s ease; }
.att-home-accom-more:hover .att-home-accom-more__circle { transform: translateX(5px); background: var(--gold); }
.att-home-accom-more:hover { color: var(--green); }
.att-home-accom-more__circle svg { width: 1.1rem; height: 1.1rem; }
.att-home-accom-media { position: relative; display: block; min-height: 300px; }
.att-home-accom-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Balanced dark scrim for hero images (even wash, slight lift at the base) */
.att-hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(20, 24, 18, 0.72), rgba(20, 24, 18, 0.44) 48%, rgba(20, 24, 18, 0.40)); }

/* Prose paragraph spacing (destination overview / rich text) */
.prose-att p { margin-bottom: 1.1rem; }
.prose-att p:last-child { margin-bottom: 0; }

/* Single accommodation detail page */
.att-accom-single__content p { margin-bottom: 1.1rem; }
.att-accom-single__amenities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: .7rem 1.5rem; }
@media (min-width: 640px) { .att-accom-single__amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.att-accom-single__amenities li { display: flex; align-items: flex-start; gap: .6rem; font-size: .98rem; color: var(--ink-soft); }
.att-accom-single__amenities svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--gold); margin-top: .2rem; }
.att-accom-single__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 768px) { .att-accom-single__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.att-accom-single__gallery figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--cream-200); }
.att-accom-single__gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.att-accom-single__gallery figure:hover img { transform: scale(1.05); }
.att-accom-single__lead { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--cream-200); cursor: zoom-in; }
.att-accom-single__lead img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.att-accom-single__lead:hover img { transform: scale(1.04); }
.att-accom-single__facts { border: 1px solid var(--sand-line); border-radius: 16px; background: var(--cream); padding: 1.75rem 1.6rem; }
@media (min-width: 1024px) { .att-accom-single__facts { position: sticky; top: 110px; } }
.att-accom-single__facts dl { display: flex; flex-direction: column; margin: 0; }
.att-accom-single__facts dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--sand-line); }
.att-accom-single__facts dl > div:last-child { border-bottom: 0; }
.att-accom-single__facts dt { font-family: var(--font-button, "Poppins", sans-serif); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--taupe); }
.att-accom-single__facts dd { margin: 0; font-size: .95rem; font-weight: 500; color: var(--ink); text-align: right; }
.att-accom-single__back { display: inline-block; text-align: center; font-family: var(--font-button, "Poppins", sans-serif); font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--clay); text-decoration: none; margin-top: .3rem; }
.att-accom-single__back:hover { color: var(--green); }

/* Filtered page layout */
.att-accom-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .att-accom-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 2.5rem; } }
@media (min-width: 1024px) { .att-accom-aside { position: sticky; top: 110px; align-self: start; } }
.att-accom-filter { border: 1px solid var(--sand-line); border-radius: 16px; padding: 1.25rem 1.25rem 1.4rem; background: var(--cream); }
/* Search box in the accommodations filter sidebar. Matches .att-accom-filter__btn:
   same font stack, radius and transition, so the sidebar reads as one control. */
.att-accom-search { position: relative; display: flex; align-items: center; margin: 0 0 1.1rem; }
.att-accom-search svg { position: absolute; left: .7rem; width: .95rem; height: .95rem; color: var(--taupe); pointer-events: none; }
.att-accom-search__input {
  width: 100%; font-family: var(--font-button, "Poppins", sans-serif); font-size: .88rem; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--sand-line); border-radius: 10px;
  padding: .55rem .7rem .55rem 2.1rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.att-accom-search__input::placeholder { color: var(--taupe-soft); }
.att-accom-search__input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--cream-200); }
.att-accom-search__input::-webkit-search-cancel-button { cursor: pointer; }
.att-accom-filter__title--spaced { margin-top: 0; }
.att-accom-filter__title { font-family: var(--font-button, "Poppins", sans-serif); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); margin: 0 0 .85rem; }
.att-accom-filter__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.att-accom-filter__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-family: var(--font-button, "Poppins", sans-serif); font-size: .9rem; font-weight: 500; color: var(--ink-soft);
  background: transparent; border: 0; border-radius: 10px; padding: .55rem .7rem; cursor: pointer; text-align: left;
  transition: background .25s ease, color .25s ease;
}
.att-accom-filter__btn:hover { background: var(--cream-100); color: var(--green); }
.att-accom-filter__btn.is-active { background: var(--green); color: #fff; }
.att-accom-filter__count { font-size: .72rem; font-weight: 600; opacity: .7; }
.att-accom-filter__btn.is-active .att-accom-filter__count { opacity: .9; }
.att-accom-results__count { font-family: var(--font-button, "Poppins", sans-serif); font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--taupe); margin: 0 0 1.1rem; }
.att-accom-results .att-accom-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px)  { .att-accom-results .att-accom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .att-accom-results .att-accom-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.att-accom-empty { text-align: center; color: var(--taupe-soft); padding: 2.5rem 0; font-size: 1rem; }
.att-accom-card--flash { animation: attAccomFlash 2.4s ease; }
@keyframes attAccomFlash { 0%, 100% { box-shadow: var(--shadow-card); } 25%, 60% { box-shadow: 0 0 0 3px var(--gold-300), var(--shadow-card-hover); } }