/* Version 2 shared navigation: emerald light and a softly pulsing journey compass. */
.hbt-site .hbt-header {
  isolation: isolate;
  background: radial-gradient(ellipse at 27% -70%,#689b6b52,transparent 62%),linear-gradient(112deg,#2a6653 0%,#174d40 43%,#0b332c 100%);
  border-bottom: 1px solid #07342d;
  box-shadow: inset 0 1px 0 #e2edce16,0 7px 22px #041f2b35;
}
.hbt-site .hbt-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,#cbb47a08,#e5d09d8a 24%,#dfc28e28 60%,#e8cd9678 90%,#cbb47a08);
}
.hbt-site .hbt-header .hbt-logo {
  border-color: #f0e4c7b3;
  box-shadow: inset 0 1px 0 #fff,0 3px 8px #061e292b,0 0 0 3px #e9d3a311,0 9px 24px #062b2926;
}
.hbt-site .hbt-header nav a { font-size: 14px; font-weight: 500; color: #f6f7ed; }
.hbt-site .hbt-header nav a::after { height: 1px; background: linear-gradient(90deg,#f0d4a6,#ba9962); }
.hbt-site .hbt-header nav a[aria-current]::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: -1px;
  width: 5px;
  height: 5px;
  background: #efd3a0;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #e6c99512;
}
.hbt-site .hbt-header a.hbt-header-book,
.hbt-site .hbt-mobile-menu a.hbt-btn {
  gap: 14px;
  min-height: 56px;
  padding: 11px 13px 11px 20px;
  border: 1px solid #efd3a2;
  border-radius: 14px;
  background: linear-gradient(120deg,#fff0d5 0%,#edcd9b 52%,#f9e6bf 100%);
  color: #28362d !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff9e7,inset 0 -2px 0 #aa78382a,0 6px 0 #062e251f,0 10px 23px #041d2a52;
  transition: transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.hbt-site .hbt-header a.hbt-header-book::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid #fff9e846;
  border-radius: 11px;
  pointer-events: none;
}
.hbt-header-compass {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #52674b;
  background: linear-gradient(135deg,#365544,#163b30);
  color: #ffe6b3;
  box-shadow: inset 0 1px 0 #e6edc62e,0 2px 5px #725a3230;
}
.hbt-header-compass::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px dashed #916c3861;
  border-radius: 50%;
  pointer-events: none;
}
.hbt-header-compass::after,
.hbt-site .hbt-mobile-menu a.hbt-btn::before {
  content: '';
  position: absolute;
  border: 1.5px solid #90632e;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: scale(.86);
  animation: hbt-journey-sonar 6.8s ease-out infinite;
}
.hbt-header-compass::after { inset: -3px; }
.hbt-site .hbt-mobile-menu a.hbt-btn::before {
  right: 10px;
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: -19px;
}
@keyframes hbt-journey-sonar {
  0% { transform: scale(.86); opacity: 0; }
  5% { opacity: .65; }
  29% { transform: scale(1.43); opacity: 0; }
  100% { transform: scale(1.43); opacity: 0; }
}
.hbt-site .hbt-header a.hbt-header-book:focus-visible .hbt-header-compass::after,
.hbt-site .hbt-mobile-menu a.hbt-btn:focus-visible::before { animation: none; opacity: 0; }
.hbt-site .hbt-header-compass svg { width: 18px; height: 18px; transition: transform .35s ease; }
.hbt-site .hbt-header .hbt-menu-toggle {
  border-color: #d7c49991;
  background: linear-gradient(125deg,#e9e9c814,#072e2b54);
  color: #fff1d5;
  box-shadow: inset 0 1px 0 #faf8dd12,0 4px 10px #04282425;
}
/* A photographic field guide, scoped to the native mobile-navigation dialog. */
.hbt-site .hbt-mobile-menu {
  width: min(480px,calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #9eac93 #f6f4eb;
  border: 1px solid #e5dcc4;
  border-radius: 24px;
  background: radial-gradient(ellipse at 100% 45%,#e4eadc,transparent 80%),#f7f5ec;
  color: #193e32;
  box-shadow: 0 28px 90px #061e29a6,0 0 0 5px #fff6e310;
}
.hbt-site .hbt-mobile-menu::backdrop {
  background: #071d20bd;
  backdrop-filter: blur(9px);
}
.hbt-site .hbt-mobile-menu[open] { animation: hbt-menu-arrive .38s cubic-bezier(.2,.75,.2,1) both; }
.hbt-site .hbt-mobile-menu .hbt-menu-head {
  position: sticky;
  top: 0;
  z-index: 2;
  isolation: isolate;
  min-height: 184px;
  padding: 76px 24px 23px;
  align-items: flex-end;
  border: 0;
  border-bottom: 1px solid #e0c28d;
  background: linear-gradient(0deg,#0b2b25fa 0%,#102d2066 55%,#102d2010),url('assets/images/leopard.webp') 48% 29%/cover;
  color: #fff9e8;
}
.hbt-site .hbt-mobile-menu .hbt-menu-head p {
  max-width: 260px;
  margin: 0;
  font: 400 31px/1.12 Gloock,Georgia,serif;
  letter-spacing: -.02em;
  text-shadow: 0 2px 15px #051c1c66;
}
.hbt-site .hbt-mobile-menu .hbt-menu-head p::before {
  content: 'SOUTH AFRICA, PERSONALLY EXPLORED';
  display: block;
  max-width: 235px;
  margin-bottom: 11px;
  font: 600 9px/1.6 Montserrat,Arial,sans-serif;
  letter-spacing: .12em;
  color: #f3dbad;
}
.hbt-site .hbt-mobile-menu .hbt-menu-head button {
  position: absolute;
  right: 16px;
  top: 16px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #f4ecd480;
  border-radius: 24px;
  background: #092b27d9;
  box-shadow: inset 0 1px 0 #fff2;
  color: #fff9e8;
  font: 500 12px/1.4 Montserrat,Arial,sans-serif;
  backdrop-filter: blur(8px);
}
.hbt-site .hbt-mobile-menu nav {
  counter-reset: hbt-menu-stop;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px;
}
.hbt-site .hbt-mobile-menu nav>a:not(.hbt-btn) {
  counter-increment: hbt-menu-stop;
  display: grid;
  grid-template-columns: 29px minmax(0,1fr) 28px;
  align-items: center;
  gap: 12px;
  min-height: 57px;
  padding: 11px 13px;
  border: 1px solid #d8dece;
  border-radius: 12px;
  background: linear-gradient(110deg,#fffef9e6,#f1f2e8c9);
  box-shadow: inset 0 1px 0 #fff,0 3px 9px #23412e05;
  color: #264c3b;
  font: 500 17px/1.5 Montserrat,Arial,sans-serif;
  transition: background .22s,border-color .22s,transform .22s;
}
.hbt-site .hbt-mobile-menu nav>a:not(.hbt-btn)::before {
  content: counter(hbt-menu-stop,decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid #cbd8c5;
  border-radius: 50%;
  color: #617b59;
  background: #e8eedd;
  font: 600 10px/1 Montserrat,Arial,sans-serif;
  letter-spacing: .03em;
}
.hbt-site .hbt-mobile-menu nav>a:not(.hbt-btn)::after {
  content: '↗';
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d9dfcf;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  color: #6a7e5c;
}
.hbt-site .hbt-mobile-menu nav>a[aria-current]:not(.hbt-btn) {
  background: linear-gradient(110deg,#2c614c,#124334);
  border-color: #315c41;
  color: #fffbed;
  box-shadow: inset 0 1px 0 #f0e3b82b,0 5px 14px #193c2b1a;
}
.hbt-site .hbt-mobile-menu nav>a[aria-current]:not(.hbt-btn)::before,
.hbt-site .hbt-mobile-menu nav>a[aria-current]:not(.hbt-btn)::after {
  border-color: #d9e1b94a;
  background: #d9e1b912;
  color: #f4dfad;
}
.hbt-site .hbt-mobile-menu a.hbt-btn {
  position: relative;
  justify-content: space-between;
  margin-top: 7px;
  min-height: 60px;
  padding-left: 19px;
  font-size: 14px;
  box-shadow: inset 0 1px 0 #fff9e7,inset 0 -2px 0 #aa78382a,0 5px 13px #4e583a1c;
}
.hbt-site .hbt-mobile-menu .hbt-menu-phone {
  position: relative;
  margin: 0;
  padding: 18px 24px 20px;
  min-height: 79px;
  border: 0;
  border-top: 1px solid #b8c9a7;
  background: radial-gradient(ellipse at 0% 0%,#3d745a66,transparent 80%),#113e32;
  color: #fff9e8;
  font: 500 17px/1.5 Montserrat,Arial,sans-serif;
  letter-spacing: .025em;
  text-decoration: none;
}
.hbt-site .hbt-mobile-menu .hbt-menu-phone::before {
  content: 'SPEAK TO MIKE';
  display: block;
  margin-bottom: 4px;
  color: #ded5a9;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
}
.hbt-site .hbt-mobile-menu .hbt-menu-phone::after {
  content: '↗';
  position: absolute;
  right: 24px;
  top: 28px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e4e6bb50;
  border-radius: 50%;
  color: #f4dfad;
}
.hbt-site .hbt-mobile-menu a:focus-visible,
.hbt-site .hbt-mobile-menu button:focus-visible { outline: 3px solid #af8e45; outline-offset: 3px; }
.hbt-site .hbt-mobile-menu .hbt-menu-head button:focus-visible,
.hbt-site .hbt-mobile-menu .hbt-menu-phone:focus-visible { outline-color: #f5d39a; outline-offset: -5px; }
.hbt-site .hbt-mobile-menu[open] nav>a { animation: hbt-menu-stop-arrive .4s ease-out both; }
.hbt-site .hbt-mobile-menu[open] nav>a:nth-child(2) { animation-delay: .03s; }
.hbt-site .hbt-mobile-menu[open] nav>a:nth-child(3) { animation-delay: .06s; }
.hbt-site .hbt-mobile-menu[open] nav>a:nth-child(4) { animation-delay: .09s; }
.hbt-site .hbt-mobile-menu[open] nav>a:nth-child(5) { animation-delay: .12s; }
.hbt-site .hbt-mobile-menu[open] nav>a:nth-child(6) { animation-delay: .15s; }
@keyframes hbt-menu-arrive { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hbt-menu-stop-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media(max-width:360px) {
  .hbt-site .hbt-mobile-menu .hbt-menu-head { min-height: 168px; padding: 72px 20px 19px; }
  .hbt-site .hbt-mobile-menu .hbt-menu-head p { font-size: 28px; }
  .hbt-site .hbt-mobile-menu nav { padding: 16px; gap: 6px; }
  .hbt-site .hbt-mobile-menu nav>a:not(.hbt-btn) { font-size: 15px; gap: 9px; min-height: 54px; padding-inline: 11px; }
  .hbt-site .hbt-mobile-menu .hbt-menu-phone { padding-inline: 20px; font-size: 16px; }
}
.hbt-site .hbt-mobile-menu a.hbt-btn svg {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 1px solid #52674b;
  border-radius: 50%;
  background: linear-gradient(135deg,#365544,#163b30);
  color: #ffe6b3;
  box-shadow: inset 0 1px 0 #e6edc62e,0 2px 5px #725a3230;
}
.hbt-site .hbt-header a:focus-visible,
.hbt-site .hbt-header .hbt-menu-toggle:focus-visible { outline: 3px solid #f5d39a; outline-offset: 5px; }
@media (max-width: 1280px) {
  .hbt-site .hbt-header nav { gap: 18px; }
  .hbt-site .hbt-header nav a { font-size: 13px; }
  .hbt-site .hbt-header a.hbt-header-book { font-size: 12px; gap: 12px; padding-left: 17px; }
}
@media (hover: hover) and (pointer: fine) {
  .hbt-site .hbt-mobile-menu nav>a:not(.hbt-btn):hover { border-color: #93aa83; transform: translateX(3px); }
  .hbt-site .hbt-header a.hbt-header-book:hover {
    background: linear-gradient(120deg,#fff4df 0%,#f1d7ad 52%,#fff0d0 100%);
    border-color: #ffe8b9;
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 #fff9e7,inset 0 -2px 0 #aa78382a,0 8px 0 #062e2514,0 15px 28px #041d2a60;
  }
  .hbt-site .hbt-header a.hbt-header-book:hover .hbt-header-compass svg { transform: translateX(2px); }
  .hbt-site .hbt-header a.hbt-header-book:hover .hbt-header-compass::after,
  .hbt-site .hbt-mobile-menu a.hbt-btn:hover::before { animation: none; opacity: 0; }
  .hbt-site .hbt-header .hbt-menu-toggle:hover { border-color: #f0d5a6; background-color: #d7d2aa15; }
}
@media (prefers-reduced-motion: reduce) {
  .hbt-site .hbt-mobile-menu[open],
  .hbt-site .hbt-mobile-menu[open] nav>a { animation: none; }
  .hbt-site .hbt-mobile-menu nav>a:not(.hbt-btn) { transition: none; transform: none; }
  .hbt-site .hbt-header a.hbt-header-book,
  .hbt-site .hbt-header-compass svg { transition: none; transform: none; }
  .hbt-header-compass::after,
  .hbt-site .hbt-mobile-menu a.hbt-btn::before { animation: none; opacity: 0; }
}