/* ===========================================================================
   ABOUT US PAGE
   ---------------------------------------------------------------------------
   Reuses existing site-wide components (.hero--plp, .stay-hero, .eyebrow,
   .section-desc, .hero__cta — all defined in global.css). .why-us-grid and
   .timeline-workflow below are genuinely ported from the old site's
   assets/css/dmc.css (confirmed in use on other old-site pages). The CTA at
   the bottom of this file is NOT ported — .cta-banner was dead/unused CSS
   in the old site (defined in dmc.css but referenced by no HTML page there),
   so it was replaced with this project's real, live .hero__cta button.
   =========================================================================== */

/* ===========================================================================
   SECTION HEAD — ported from the old site's global.css .section-head
   (eyebrow + heading, shared by this page's sections).
   =========================================================================== */
.section-head {
  margin-bottom: 40px;
}

.section-head h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.75vw, 1.75rem);
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

/* ===========================================================================
   OUR STORY — two-column .stay-hero with founder image + floating pull-quote.
   The base .stay-hero component is NOT defined elsewhere in this project, so
   it is ported here (from the reference site's global.css) alongside the
   founder-specific treatment. All on this project's tokens.
   =========================================================================== */
.stay-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.stay-hero__title {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.6rem, 2.7vw, 2.2rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 16px;
}

.stay-hero__accent {
  color: var(--accent);
}

.stay-hero__text .section-desc {
  margin-bottom: 20px;
}

.stay-hero__image {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
  aspect-ratio: 16 / 9;
}

.stay-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- Founder variant ----- */
.stay-hero--founder {
  align-items: center;
}

.stay-hero--founder .stay-hero__image {
  aspect-ratio: 1 / 1;
  overflow: visible;
  box-shadow: none;
}

.stay-hero--founder .stay-hero__img {
  position: relative;
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.about-quote--floating {
  position: absolute;
  bottom: -28px;
  right: -28px;
  background-color: #ffffff;
  color: var(--text);
  padding: 22px 26px;
  border-radius: 12px;
  width: 75%;
  max-width: 320px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  z-index: 10;
  border: none;
  margin: 0;
}

.about-quote__icon {
  color: var(--accent);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 2.6rem;
  line-height: 0.5;
  margin-bottom: 16px;
}

.about-quote--floating p {
  color: var(--text);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.5;
  margin-bottom: 0;
  font-weight: 500;
  font-style: italic;
}

.founder-signature {
  margin-top: 48px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  color: var(--text);
}

.founder-signature em {
  font-weight: 600;
  font-style: normal;
}

.founder-socials {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.founder-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 1rem;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.founder-socials a:hover,
.founder-socials a:focus-visible {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

@media (max-width: 900px) {
  .stay-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .stay-hero--founder .stay-hero__text {
    order: -1;
  }

  .about-quote--floating {
    bottom: -24px;
    right: 15px;
    width: 80%;
    padding: 20px 22px;
  }
}

@media (max-width: 640px) {
  .stay-hero--founder .stay-hero__image {
    aspect-ratio: 4 / 5;
    margin-bottom: 40px;
  }

  .about-quote--floating {
    bottom: -32px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 86%;
  }
}

/* ===========================================================================
   WHAT WE DO — .why-us-grid / .why-us-card
   Ported from the old Wild Enthusiast site (assets/css/dmc.css). Already
   built on this project's design tokens (var(--accent), var(--surface),
   var(--border), var(--muted)), so brought over as-is (4-col variant).
   =========================================================================== */
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 0;
}

.why-us-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid #e1e6e2;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.why-us-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  transition: background 0.35s ease;
}

.why-us-card:hover {
  transform: translateY(-6px);
  border-color: rgba(243, 112, 2, 0.25);
  box-shadow: 0 12px 32px rgba(243, 112, 2, 0.08);
}

.why-us-card:hover::before {
  background: var(--accent);
}

.why-us-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fdf1e6;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 20px;
  transition: background 0.3s ease, color 0.3s ease;
}

.why-us-card:hover .why-us-card__icon {
  background: var(--accent);
  color: #ffffff;
}

.why-us-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.why-us-card__desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 1100px) {
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .why-us-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ===========================================================================
   HOW WE WORK — .timeline-workflow / .timeline-step
   Ported from the old Wild Enthusiast site (assets/css/dmc.css), same
   var(--accent)/var(--surface) tokens as this project.
   =========================================================================== */
.timeline-workflow {
  position: relative;
  margin-top: 0;
  padding-left: 24px;
}

.timeline-workflow::before {
  content: '';
  position: absolute;
  top: 35px;
  bottom: 35px;
  left: 45px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(243, 112, 2, 0.15) 100%);
  z-index: 1;
}

.timeline-step {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  z-index: 2;
}

.timeline-step:last-child {
  margin-bottom: 0;
}

.timeline-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fdf1e6;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(243, 112, 2, 0.1);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.timeline-step:hover .timeline-node {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 0 6px rgba(243, 112, 2, 0.2);
}

.timeline-content {
  flex: 1;
  margin-left: 20px;
  padding: 22px 28px;
  background: var(--surface);
  border: 1px solid #e1e6e2;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.timeline-step:hover .timeline-content {
  transform: translateX(6px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(243, 112, 2, 0.08);
}

.timeline-content h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.timeline-content p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 600px) {
  .timeline-workflow {
    padding-left: 0;
  }

  .timeline-workflow::before {
    left: 21px;
  }

  .timeline-node {
    width: 38px;
    height: 38px;
    font-size: 0.85rem;
  }

  .timeline-content {
    margin-left: 14px;
    padding: 16px 18px;
  }
}

/* ===========================================================================
   A NOTE ON WHO WE ARE — disambiguation callout.
   No equivalent component exists on the old site or in this project's
   destination.css/global.css, so this reuses the same visual treatment as
   this project's existing .policy-notice (assets/css/policy.css).
   =========================================================================== */
.about-note {
  padding: 32px 36px;
  border: 1px solid rgba(243, 112, 2, .22);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: #fff8f1;
}

.about-note h2 {
  margin: 0 0 14px;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.15rem, 1.05rem + .3vw, 1.35rem);
  font-weight: 700;
  color: var(--text);
}

.about-note p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: clamp(.85rem, .82rem + .1vw, .92rem);
  line-height: 1.75;
  max-width: 70ch;
}

.about-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .about-note {
    padding: 24px 20px;
  }
}

/* ===========================================================================
   CTA — closing band. No .cta-banner component exists anywhere in the old
   site's actual HTML (it was dead CSS in dmc.css, unused on any page, so it
   has been dropped). This uses the project's real, already-live
   .hero__cta button (contact-us, plan-your-safari, plan-your-group-safari,
   support, and the homepage all use it) inside a plain centered wrapper.
   =========================================================================== */
.about-plan {
  /* Last section in <main> hits global.css's `section:last-child { margin-bottom: 0 }`,
     so it needs its own bottom spacing to avoid butting straight into the footer. */
  text-align: center;
  padding-bottom: 96px;
}

@media (max-width: 768px) {
  .about-plan {
    padding-bottom: 64px;
  }
}

.about-plan__inner {
  max-width: 560px;
  margin: 0 auto;
}

.about-plan__inner h2 {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 14px;
}

.about-plan__inner .section-desc {
  margin: 0 auto 28px;
}

.about-plan__inner .hero__cta {
  display: inline-flex;
}