.page-hero {
	position: relative;
	display: flex;
	min-height: 600px;
	align-items: flex-end;
	padding: 180px 0 90px;
	color: #fff;
	background-position: center;
	background-size: cover;
}
.template-booking-checkout .site-header:not(.is-scrolled),
.template-booking-success .site-header:not(.is-scrolled) { color: var(--ink); border-bottom-color: var(--line); }
.template-booking-checkout .site-header:not(.is-scrolled) .brand-mark img,
.template-booking-success .site-header:not(.is-scrolled) .brand-mark img { filter: none; }
.page-hero::before, .detail-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,28,40,.83), rgba(5,28,40,.18)), linear-gradient(0deg, rgba(5,28,40,.55), transparent 60%); }
.page-hero > .shell, .detail-hero > .shell { position: relative; z-index: 1; }
.page-hero h1, .detail-hero h1, .checkout-intro h1, .success-card h1 { max-width: 900px; margin: 0 0 24px; font-family: var(--display); font-size: clamp(4.5rem, 10vw, 8.5rem); line-height: .88; letter-spacing: -.045em; text-transform: uppercase; }
.page-hero h1 em, .detail-hero h1 em, .checkout-intro h1 em, .success-card h1 em { color: #83cce5; font-family: Georgia,serif; font-size: .78em; font-weight: 400; text-transform: none; }
.page-hero > .shell > p:last-child { max-width: 550px; margin: 0; color: rgba(255,255,255,.78); font-family: var(--sans); font-size: 1.1rem; }
.page-hero--contact { background-image: url("../assets/images/real/giraffes-savannah.webp"); }
.page-hero--safaris { background-image: url("../assets/images/real/safari-lions-vehicle.webp"); }
.page-hero--destinations { background-image: url("../assets/images/real/leopard-tree.webp"); }

.contact-layout { background: var(--ivory); }
.contact-grid, .checkout-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 90px; align-items: start; }
.contact-details h2 { font-size: clamp(3.2rem, 5vw, 5.2rem); }
.contact-details > p:not(.eyebrow) { max-width: 440px; color: #647073; font-family: var(--sans); }
.contact-details > div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-details small, .contact-details a, .contact-details span { display: block; }
.contact-details small { margin-bottom: 5px; color: #7a8385; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.contact-details a, .contact-details span { font-weight: 700; }
.form-card { padding: 48px; background: #fff; box-shadow: 0 22px 70px rgba(27,45,48,.1); }
.form-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 35px; }
.form-heading > span { color: var(--blue-bright); font-family: Georgia,serif; font-size: 2rem; }
.form-heading small { color: #7d8587; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.form-heading h2 { margin: 4px 0 0; font-size: 2rem; }
.travel-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.travel-form label, .compact-form label { display: block; }
.travel-form label > span, .compact-form label { color: #657073; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.travel-form input, .travel-form select, .travel-form textarea, .compact-form input {
	width: 100%; margin-top: 7px; padding: 13px 2px; border: 0; border-bottom: 1px solid #aab0b1; border-radius: 0; color: var(--ink); background: transparent; outline: 0;
}
.travel-form input:focus, .travel-form select:focus, .travel-form textarea:focus, .compact-form input:focus { border-color: var(--blue-bright); }
.travel-form .full { grid-column: 1/-1; }
.travel-form button.full { width: 100%; }
.honeypot { position: absolute !important; left: -10000px; }
.form-alert { margin-bottom: 25px; padding: 15px 18px; border-left: 3px solid #b44c3c; color: #6f2d25; background: #fff0ed; font-size: .84rem; }
.form-success { padding: 60px 10px; text-align: center; }
.form-success svg, .success-icon svg { width: 60px; height: 60px; padding: 15px; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 2; background: var(--blue-bright); }
.form-success h2 { margin: 24px 0 12px; font-size: 2.8rem; }

.filter-bar { display: grid; grid-template-columns: repeat(3,1fr) auto; margin-bottom: 25px; border: 1px solid var(--line); background: #fff; }
.filter-bar label { padding: 18px 22px; border-right: 1px solid var(--line); }
.filter-bar label span { display: block; color: #7b8385; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.filter-bar select { width: 100%; margin-top: 5px; border: 0; background: transparent; font-weight: 700; outline: 0; }
.filter-bar button { padding: 15px 25px; border: 0; color: #fff; background: var(--blue); cursor: pointer; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.directory-heading { display: flex; justify-content: space-between; margin: 28px 0; color: #717a7c; font-size: .72rem; text-transform: uppercase; }
.directory-heading p { margin: 0; }
.directory-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.directory-grid.is-loading { opacity: .45; pointer-events: none; }
.directory-card { overflow: hidden; background: #fff; box-shadow: 0 12px 35px rgba(30,43,44,.08); transition: .25s; }
.directory-card:hover { transform: translateY(-5px); box-shadow: 0 18px 45px rgba(30,43,44,.14); }
.directory-card__image { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; }
.directory-card__image img { height: 100%; object-fit: cover; transition: transform .5s; }
.directory-card:hover img { transform: scale(1.035); }
.directory-card__image span { position: absolute; right: 15px; bottom: 15px; padding: 7px 11px; color: #fff; background: var(--blue); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.directory-card__body { padding: 25px; }
.directory-card__body h2 { margin: 7px 0 14px; font-size: 1.7rem; }
.directory-card__body > p:not(.card-kicker) { min-height: 66px; color: #687174; font-family: var(--sans); font-size: .83rem; }
.card-kicker { margin: 0; color: var(--blue-bright); font-size: .6rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.directory-card__meta { display: flex; justify-content: space-between; align-items: end; padding-top: 16px; border-top: 1px solid var(--line); }
.directory-card__meta span { max-width: 45%; color: #7a8385; font-size: .59rem; text-transform: uppercase; }
.directory-card__meta strong { color: var(--blue); font-family: Georgia,serif; font-size: .9rem; }
.empty-results { grid-column: 1/-1; padding: 55px; text-align: center; background: var(--ivory); }

.destination-directory { background: var(--paper); }
.destination-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 30px; }
.destination-card > a { position: relative; display: block; aspect-ratio: 1.5; overflow: hidden; }
.destination-card img { height: 100%; object-fit: cover; transition: .55s; }
.destination-card:hover img { transform: scale(1.04); }
.destination-card > a span { position: absolute; top: 20px; left: 20px; display: grid; width: 40px; height: 40px; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; font-family: Georgia,serif; }
.destination-card > div { padding: 25px 15px 0; }
.destination-card > div > p { color: var(--blue-bright); font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.destination-card h2 { margin: 0 0 18px; font-size: clamp(2.2rem,4vw,4rem); }

.detail-hero { position: relative; display: flex; min-height: 720px; align-items: flex-end; padding: 190px 0 85px; color: #fff; background-image: var(--detail-image); background-position: center; background-size: cover; }
.detail-hero h1 { max-width: 1050px; font-size: clamp(4rem,9vw,8rem); }
.detail-hero__meta { display: flex; flex-wrap: wrap; gap: 0; }
.detail-hero__meta span { padding: 0 24px; border-right: 1px solid rgba(255,255,255,.45); font-size: .69rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.detail-hero__meta span:first-child { padding-left: 0; }
.detail-nav { position: sticky; z-index: 10; top: 0; border-bottom: 1px solid var(--line); background: rgba(255,253,249,.97); backdrop-filter: blur(12px); }
.detail-nav .shell { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.detail-nav a { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.detail-nav__cta { margin-left: auto; padding: 12px 17px; color: #fff; background: var(--blue-bright); }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 90px; }
.detail-main > h2, .detail-section > h2 { font-size: clamp(3rem,5vw,5rem); }
.prose { max-width: 760px; color: #596466; font-family: var(--sans); font-size: 1.07rem; line-height: 1.85; }
.detail-section { padding-top: 110px; scroll-margin-top: 75px; }
.itinerary { border-top: 1px solid var(--line); }
.itinerary details { border-bottom: 1px solid var(--line); }
.itinerary summary { display: grid; grid-template-columns: 85px 1fr 25px; gap: 20px; align-items: center; padding: 26px 5px; cursor: pointer; list-style: none; }
.itinerary summary::-webkit-details-marker { display: none; }
.itinerary summary span { color: var(--blue-bright); font-family: Georgia,serif; font-size: .85rem; }
.itinerary summary strong { font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; }
.itinerary summary i { font-size: 1.5rem; font-style: normal; }
.itinerary details[open] summary i { transform: rotate(45deg); }
.itinerary details > div { padding: 0 45px 30px 105px; color: #616b6e; font-family: var(--sans); }
.itinerary details > div a { color: var(--blue-bright); font-family: var(--sans); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.mini-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.mini-card { padding: 30px; color: #fff; background: var(--blue); }
.mini-card span { color: #83cce5; font-size: .6rem; text-transform: uppercase; }
.mini-card h3 { margin: 20px 0 10px; font-size: 1.7rem; text-transform: uppercase; }
.mini-card p { margin: 0; opacity: .7; font-size: .75rem; }
.price-panel { display: grid; grid-template-columns: .55fr 1fr; gap: 40px; padding: 45px !important; color: #fff; background: var(--blue); }
.price-panel strong, .price-panel span { display: block; }
.price-panel strong { font-family: Georgia,serif; font-size: 3.5rem; font-weight: 400; }
.price-panel span { opacity: .65; font-size: .65rem; text-transform: uppercase; }
.price-panel > p { align-self: center; margin: 0; color: rgba(255,255,255,.7); font-family: var(--sans); }
.include-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.include-grid > div { padding: 30px; background: var(--ivory); }
.include-grid h3 { margin-bottom: 22px; font-family: var(--display); text-transform: uppercase; }
.include-grid p { display: flex; gap: 10px; font-size: .78rem; }
.include-grid svg { width: 17px; fill: none; stroke: var(--blue-bright); stroke-width: 2; }
.map-panel { padding: 70px; color: #fff; background: #142c35; }
.route-line { display: flex; flex-wrap: wrap; gap: 25px; }
.route-line span { display: flex; align-items: center; gap: 10px; font-size: .7rem; text-transform: uppercase; }
.route-line i { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #7bc1dc; border-radius: 50%; color: #7bc1dc; font-family: Georgia,serif; font-style: normal; }
.quote-sidebar { position: relative; }
.quote-sidebar > div { position: sticky; top: 95px; padding: 32px; border: 1px solid var(--line); background: #fff; box-shadow: 0 20px 55px rgba(30,43,44,.09); }
.quote-sidebar h2 { margin-bottom: 25px; font-size: 2rem; }
.compact-form label { margin-bottom: 18px; }
.compact-form > div { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.compact-form .button { width: 100%; margin-top: 10px; }
.deposit-link { display: flex; justify-content: space-between; margin-top: 23px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--blue); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.deposit-link span { color: #7a8385; font-size: .56rem; }

.destination-detail__grid { display: grid; grid-template-columns: 1fr .75fr; gap: 100px; }
.park-facts { border-top: 1px solid var(--line); }
.park-facts > div { padding: 25px 5px; border-bottom: 1px solid var(--line); }
.park-facts small, .park-facts strong { display: block; }
.park-facts small { margin-bottom: 8px; color: #7b8385; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.park-facts strong { line-height: 1.5; }
.related-safaris { background: #edf0eb; }
.lodge-map { margin: 0; }

.checkout-page { min-height: 100vh; padding-top: 170px; background: var(--ivory); }
.checkout-intro { position: sticky; top: 130px; }
.checkout-intro h1, .success-card h1 { color: var(--ink); font-size: clamp(3.7rem,6vw,6.5rem); }
.checkout-intro h1 em, .success-card h1 em { color: var(--blue-bright); }
.checkout-intro > p:not(.eyebrow) { max-width: 470px; color: #606b6e; font-family: var(--sans); }
.security-note { display: flex; align-items: center; gap: 15px; margin-top: 35px; }
.security-note svg { width: 30px; fill: none; stroke: var(--blue-bright); stroke-width: 1.5; }
.security-note strong, .security-note span { display: block; font-size: .67rem; }
.security-note span { color: #747d7f; }
.deposit-summary { display: grid; grid-template-columns: 1fr auto; padding: 22px; color: #fff; background: var(--blue); }
.deposit-summary strong { font-family: Georgia,serif; font-size: 1.8rem; font-weight: 400; }
.deposit-summary small { grid-column: 1/-1; opacity: .6; }
.gateway-note { margin: 0; color: #7b8385; font-size: .68rem; text-align: center; }
.success-page { display: grid; min-height: 100vh; padding: 150px 20px 80px; place-items: center; background: var(--ivory); }
.success-card { width: min(720px,100%); padding: 65px; text-align: center; background: #fff; box-shadow: 0 25px 75px rgba(27,45,48,.12); }
.success-icon { margin-bottom: 25px; }
.success-card > p:not(.eyebrow) { max-width: 530px; margin: 0 auto 30px; color: #606b6e; font-family: var(--sans); }
.success-card dl { margin: 35px 0; border-top: 1px solid var(--line); }
.success-card dl div { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); }
.success-card dt { color: #7b8385; font-size: .65rem; text-transform: uppercase; }
.success-card dd { margin: 0; font-weight: 800; }
.success-card .text-link { margin-left: 25px; }

.hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video:not([data-ready]) { opacity: 0; }
.fleet-section { background: #edf0eb; }
.slider-shell { position: relative; }
.fleet-track { display: grid; grid-auto-columns: calc((100% - 40px)/3); grid-auto-flow: column; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.fleet-track::-webkit-scrollbar { display: none; }
.fleet-card { background: #fff; }
.fleet-card img { aspect-ratio: 1.4; object-fit: cover; }
.fleet-card > div { padding: 25px; }
.fleet-card p { color: var(--blue-bright); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.fleet-card h3 { margin: 0 0 14px; font-family: var(--display); font-size: 1.65rem; text-transform: uppercase; }
.fleet-card span { color: #737c7e; font-size: .67rem; }
.slider-button { position: absolute; z-index: 2; top: 36%; display: grid; width: 46px; height: 46px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: var(--blue); cursor: pointer; }
.slider-button.prev { left: -23px; }
.slider-button.next { right: -23px; }
.reviews-section { color: #fff; background: var(--blue); }
.reviews-section h2 em { color: #82cbe4; }
.review-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 60px; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.review-grid figure { margin: 0; padding: 42px; border-right: 1px solid rgba(255,255,255,.2); }
.review-grid figure:last-child { border: 0; }
.review-grid figure > div { color: #d8a956; letter-spacing: .15em; }
.review-grid blockquote { min-height: 150px; margin: 25px 0; font-family: var(--sans); font-size: 1.05rem; font-style: italic; }
.review-grid strong, .review-grid span { display: block; }
.review-grid strong { font-size: .72rem; text-transform: uppercase; }
.review-grid span { margin-top: 4px; opacity: .55; font-size: .6rem; }

@media (max-width: 980px) {
	.contact-grid, .checkout-grid, .detail-layout, .destination-detail__grid { grid-template-columns: 1fr; gap: 55px; }
	.directory-grid { grid-template-columns: 1fr 1fr; }
	.filter-bar { grid-template-columns: 1fr 1fr; }
	.filter-bar button { min-height: 65px; }
	.quote-sidebar > div, .checkout-intro { position: static; }
	.detail-nav { overflow-x: auto; }
	.detail-nav .shell { width: max-content; min-width: 100%; padding: 0 24px; }
	.fleet-track { grid-auto-columns: calc((100% - 20px)/2); }
	.review-grid { grid-template-columns: 1fr; }
	.review-grid figure { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
	.review-grid blockquote { min-height: auto; }
}
@media (max-width: 680px) {
	.page-hero, .detail-hero { min-height: 620px; padding-bottom: 65px; }
	.page-hero h1, .detail-hero h1 { font-size: clamp(3.7rem,18vw,5.5rem); }
	.form-card { padding: 28px 20px; }
	.travel-form, .filter-bar, .directory-grid, .destination-grid, .mini-grid, .include-grid, .price-panel { grid-template-columns: 1fr; }
	.travel-form label { grid-column: 1; }
	.filter-bar label { border-right: 0; border-bottom: 1px solid var(--line); }
	.detail-hero__meta { gap: 12px; }
	.detail-hero__meta span { padding: 0 12px 0 0; }
	.detail-nav__cta { display: none; }
	.detail-layout { gap: 35px; }
	.detail-section { padding-top: 80px; }
	.itinerary summary { grid-template-columns: 65px 1fr 20px; gap: 8px; }
	.itinerary details > div { padding-left: 0; }
	.map-panel { padding: 45px 22px; }
	.fleet-track { grid-auto-columns: 88%; }
	.slider-button { display: none; }
	.success-card { padding: 45px 22px; }
	.success-card dl div { align-items: flex-start; flex-direction: column; }
	.success-card .text-link { margin: 20px 0 0; }
}
