/* ==========================================================
   Monkman Global — About page
   (loaded after style.css)
   ========================================================== */

/* ---------- About hero ---------- */
.about-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 0% 100%, rgba(240, 120, 74, 0.10), transparent 50%),
    linear-gradient(180deg, #fff 0%, var(--bg-warm) 100%);
}
.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 56px;
}
.about-hero .hero__actions { margin: 32px 0 30px; }
.about-hero__visual img {
  width: 100%;
  border-radius: 48% 32px 32px 32px / 40% 32px 32px 32px;
  box-shadow: 0 30px 60px rgba(232, 98, 44, 0.12);
}


/* ---------- Story ---------- */
.story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.story__btn { margin-top: 28px; }
.story__visual { position: relative; padding-right: 110px; }
.story__visual img { width: 100%; border-radius: 18px; box-shadow: var(--shadow); }
.story__visual .float-card {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
}

.mvv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 80px;
}
.mvv__item {
  display: flex;
  gap: 18px;
  padding: 0 32px;
  border-left: 1px solid var(--line);
}
.mvv__item:first-child { border-left: 0; padding-left: 0; }
.mvv__item > svg { width: 38px; height: 38px; }
.mvv__item h3 { font-size: 18px; margin-bottom: 10px; }
.mvv__item p { font-size: 14px; color: var(--muted); }

.dot-list { list-style: none; margin: 0; padding: 0; }
.dot-list li { position: relative; padding-left: 18px; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

/* ---------- Journey timeline ---------- */
.journey { background: #fcefe7; padding: 80px 0; }
.timeline {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 7px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), rgba(232, 98, 44, 0.25));
}
.timeline li { position: relative; padding-top: 34px; }
.timeline li::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(232, 98, 44, 0.18);
}
.timeline__year { display: block; font-size: 20px; font-weight: 700; color: var(--navy-dark); margin-bottom: 6px; }
.timeline p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* ---------- Why choose ---------- */
.why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  padding: 80px 0;
}
.why__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 24px 24px 0;
}
.why__content { max-width: 560px; padding-right: 24px; }
.why .title { font-size: clamp(28px, 3vw, 38px); }

.check-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.check-list li {
  position: relative;
  padding-left: 34px;
  font-size: 15px;
  color: var(--text);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1.6px solid var(--orange);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8622c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ---------- Global presence ---------- */
.presence { padding-top: 40px; }
.presence__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}
.presence__visual { position: relative; padding-right: 215px; }
.presence__map { width: 100%; height: auto; stroke: none; }
.presence__visual .float-card {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
}

/* ---------- About CTA ---------- */
.about-cta-wrap { padding: 20px 0 80px; }
.about-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 56px;
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(253, 240, 232, 0.96) 0%, rgba(253, 240, 232, 0.75) 60%, rgba(253, 240, 232, 0.55) 100%),
    url("../images/apoinza-bg.webp") left center / cover no-repeat;
}
.about-cta .title { margin-bottom: 0; max-width: 560px; font-size: clamp(24px, 2.8vw, 34px); }


/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1100px) {
  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .timeline::before { display: none; }
}

@media (max-width: 960px) {
  .about-hero__inner,
  .story__inner,
  .presence__inner { grid-template-columns: minmax(0, 1fr); }
  .about-hero__visual { max-width: 620px; width: 100%; margin: 0 auto; }

  .story__visual { padding-right: 0; }
  .story__visual .float-card {
    position: relative;
    top: auto;
    transform: none;
    width: auto;
    margin: -40px 20px 0;
  }

  .mvv { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 56px; }
  .mvv__item { border-left: 0; padding-left: 0; }

  .why { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 64px 0; }
  .why__visual img { border-radius: 0; max-height: 440px; }
  .why__content { max-width: none; padding: 0 24px; }

  .presence__visual { padding-right: 0; }
  .presence__visual .float-card { position: static; transform: none; width: auto; margin-top: 16px; }

  .about-cta { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
}

@media (max-width: 600px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 8px; }
  .timeline li { padding: 0 0 28px 34px; border-left: 2px solid rgba(232, 98, 44, 0.3); }
  .timeline li:last-child { border-left-color: transparent; }
  .timeline li::before { left: -9px; }
  .why__content { padding: 0 16px; }
  .about-cta { padding: 32px 20px; }
  .about-cta .cta__actions { width: 100%; flex-direction: column; }
  .trusted { flex-direction: column; align-items: flex-start; }
}