/* ══════════════════════════════════════════════════════════
   ABOUT US PAGE
   Typography and colour matched to the rest of the rebuilt
   templates: EB Garamond headings, Instrument Sans body,
   maroon primary, sand supporting tone.
════════════════════════════════════════════════════════════ */

/* ── Scroll reveal (duplicated per-template, see taxonomy-safari-type.css note) ── */
.swb-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.swb-reveal.from-left  { transform: translateX(-40px); }
.swb-reveal.from-right { transform: translateX(40px); }
.swb-reveal.is-visible { opacity: 1; transform: translate(0,0); }
.swb-reveal[data-delay="1"]  { transition-delay: 0.10s; }
.swb-reveal[data-delay="2"]  { transition-delay: 0.20s; }
.swb-reveal[data-delay="3"]  { transition-delay: 0.30s; }
.swb-reveal[data-delay="4"]  { transition-delay: 0.40s; }
.swb-reveal[data-delay="5"]  { transition-delay: 0.50s; }
.swb-reveal[data-delay="6"]  { transition-delay: 0.60s; }

/* ── HERO (matches destination/safari-type hero) ──────────── */
.ab-hero {
	position: relative;
	height: 100svh;
	min-height: 560px;
	max-height: 900px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}
.ab-hero__media { position: absolute; inset: 0; }
.ab-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-hero__img--placeholder {
	background: linear-gradient(135deg, var(--color-forest) 0%, var(--color-charcoal) 100%);
}
.ab-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(28,18,10,0.30) 0%, rgba(28,18,10,0.46) 55%, rgba(28,18,10,0.74) 100%);
}
.ab-hero__content {
	position: relative;
	z-index: 1;
	color: #fff;
	max-width: 780px;
	margin-inline: auto;
	padding: 0 40px;
}
.ab-hero__eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--color-sand);
	opacity: 0.9;
	margin-bottom: 16px;
}
.ab-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(36px, 5.5vw, 64px);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.1;
	color: #fff;
	text-shadow: 0 2px 40px rgba(0,0,0,0.22);
	margin-bottom: 18px;
}
.ab-hero__intro {
	font-size: 16px;
	line-height: 1.68;
	color: rgba(255,255,255,0.88);
	max-width: 560px;
	margin-inline: auto;
}

@media (max-width: 768px) {
	.ab-hero { height: 70vh; min-height: 460px; }
}

/* ── Section eyebrow/title (left-aligned two-col contexts) ── */
.ab-section-eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-red);
	margin-bottom: 12px;
}
.ab-section-eyebrow--light { color: rgba(255,255,255,0.5); }
.ab-section-title {
	font-family: var(--font-heading);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 400;
	color: var(--color-charcoal);
	margin: 0 0 20px;
	line-height: 1.25;
}

/* ── OUR STORY / RESPONSIBLE TRAVEL (two-column) ──────────── */
.ab-story { padding: 96px 0; }
.ab-story__layout {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 72px;
	align-items: center;
}
.ab-story__layout--reverse { grid-template-columns: 0.9fr 1.1fr; }

.ab-story__prose {
	font-size: 15.5px;
	line-height: 1.85;
	color: #3a3735;
}
.ab-story__prose p { margin: 0 0 22px; }
.ab-story__prose p:last-child { margin-bottom: 0; }

.ab-story__image {
	width: 100%;
	height: 440px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

@media (max-width: 900px) {
	.ab-story { padding: 64px 0; }
	.ab-story__layout,
	.ab-story__layout--reverse { grid-template-columns: 1fr; gap: 36px; }
	.ab-story__layout--reverse .ab-story__col--aside { order: -1; }
	.ab-story__image { height: 300px; }
}

/* ── VALUES ────────────────────────────────────────────────── */
.ab-values { padding: 96px 0; background: var(--color-bg-warm, #f9f6f2); }
.ab-values__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.ab-value { text-align: center; }
.ab-value__icon {
	width: 44px; height: 44px;
	margin: 0 auto 18px;
	color: var(--color-red);
}
.ab-value__icon svg { width: 100%; height: 100%; }
.ab-value__title {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 400;
	color: var(--color-charcoal);
	margin: 0 0 10px;
}
.ab-value__body {
	font-size: 14px;
	line-height: 1.65;
	color: #6a6460;
	margin: 0;
}

@media (max-width: 960px) {
	.ab-values__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}
@media (max-width: 560px) {
	.ab-values__grid { grid-template-columns: 1fr; }
}

/* ── MILESTONES — dark full-bleed band ────────────────────── */
.ab-section--dark {
	background: #0f0a07;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}
.ab-container-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 96px 40px;
}

.ab-stats__header { text-align: center; margin-bottom: 56px; }
.ab-stats__headline {
	font-family: var(--font-heading);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 400;
	color: #fff;
	margin: 10px 0 0;
}

.ab-stats__grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	text-align: center;
}
.ab-stat__number {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(40px, 5vw, 56px);
	font-weight: 400;
	color: var(--color-sand);
	margin-bottom: 10px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.ab-stat__number.is-visible { opacity: 1; transform: translateY(0); }
.ab-stat__label {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255,255,255,0.65);
	max-width: 220px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.ab-container-inner { padding: 64px 24px; }
	.ab-stats__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ── TEAM ──────────────────────────────────────────────────── */
.ab-team { padding: 96px 0; }
.ab-team__grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.ab-team-card { text-align: center; }
.ab-team-card__photo {
	width: 140px; height: 140px;
	margin: 0 auto 18px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-sand);
}
.ab-team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-team-card__photo--placeholder { width: 100%; height: 100%; background: var(--color-sand); }
.ab-team-card__name {
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: 400;
	color: var(--color-charcoal);
	margin: 0 0 4px;
}
.ab-team-card__role {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-red);
	margin: 0 0 10px;
}
.ab-team-card__bio {
	font-size: 13.5px;
	line-height: 1.6;
	color: #6a6460;
	margin: 0;
}

@media (max-width: 960px) {
	.ab-team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ab-team__grid { grid-template-columns: 1fr; }
}

/* ── FINAL CTA (matches taxonomy-safari-type.css treatment) ── */
.ab-cta {
	position: relative;
	padding: 100px 40px;
	text-align: center;
	color: #fff;
	overflow: hidden;
}
.ab-cta__bg-image {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 1;
}
.ab-cta__overlay {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.5);
	pointer-events: none;
}
.ab-cta__inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.ab-cta__eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-sand);
	opacity: 0.76;
	margin-bottom: 14px;
}
.ab-cta__inner h2 {
	font-family: var(--font-heading);
	font-size: clamp(26px, 3.5vw, 40px);
	font-weight: 300;
	color: #fff;
	margin: 0 0 16px;
	line-height: 1.22;
}
.ab-cta__inner p {
	font-size: 15px;
	color: rgba(255,255,255,0.80);
	margin: 0 0 40px;
	line-height: 1.72;
}

.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 44px;
	font-family: var(--font-base);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 100px;
	transition: all 0.26s ease;
	min-height: 52px;
	cursor: pointer;
	border: none;
}
.cta-button-primary { background: var(--color-red); color: #fff; border: 2px solid var(--color-red); }
.cta-button-primary:hover { background: #600000; border-color: #600000; }
.cta-button-secondary { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.5); }
.cta-button-secondary:hover { background: rgba(255,255,255,0.1); }

/* ── INQUIRY MODAL (duplicated per-template) ──────────────── */
#inquiryModal {
	position: fixed; inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.5);
	padding: 24px;
}
#inquiryModal.is-open { display: flex; }
.inquiry-modal {
	position: relative;
	width: 100%; max-width: 560px; max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
}
.inquiry-modal-header {
	background: var(--color-red);
	color: #fff;
	padding: 32px 36px 24px;
	border-radius: 16px 16px 0 0;
}
.inquiry-modal-header .eyebrow {
	font-family: var(--font-base); font-weight: 600; font-size: 11px;
	letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85;
}
.inquiry-modal-header h3 { font-family: var(--font-heading); font-size: 24px; margin: 8px 0; }
.inquiry-modal-body { padding: 32px 36px 36px; }
.inquiry-modal-close {
	position: absolute; top: 16px; right: 16px;
	width: 32px; height: 32px; border-radius: 50%; border: none;
	background: rgba(255,255,255,0.2); color: #fff; cursor: pointer; z-index: 2;
}
.inquiry-modal-close:hover { background: rgba(255,255,255,0.35); }
.inq-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inq-field { margin-bottom: 16px; }
.inq-field label {
	display: block; font-family: var(--font-base); font-weight: 600; font-size: 13px;
	color: var(--color-charcoal); margin-bottom: 4px;
}
.inq-field input, .inq-field select, .inq-field textarea {
	width: 100%; border: 1.5px solid #e0d8d0; border-radius: 8px; padding: 12px;
	font-family: var(--font-base); font-size: 15px; color: var(--color-charcoal);
}
.inq-field input:focus, .inq-field select:focus, .inq-field textarea:focus {
	outline: none; border-color: var(--color-red);
}
.inq-field textarea { min-height: 88px; resize: vertical; }
.inq-submit-btn {
	width: 100%; background: var(--color-red); color: #fff; border: none;
	border-radius: 999px; padding: 16px; font-family: var(--font-base);
	font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
	cursor: pointer; transition: background 0.2s ease;
}
.inq-submit-btn:hover { background: #600000; }
.inq-submit-btn:disabled { opacity: 0.6; cursor: default; }
.inq-privacy-note { font-size: 12px; color: var(--color-charcoal); opacity: 0.6; text-align: center; margin: 12px 0 0; }

#inqToast {
	position: fixed; bottom: 32px; left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--color-charcoal); color: #fff;
	padding: 12px 24px; border-radius: 999px;
	font-family: var(--font-base); font-size: 14px;
	opacity: 0; pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 300;
}
#inqToast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#inqToast.is-error { background: #b02a2a; }

@media (max-width: 768px) {
	.inq-field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.swb-reveal, .ab-stat__number { transition: none !important; opacity: 1 !important; transform: none !important; }
}