/* ==========================================================================
   About page (about.php). Loaded after motherland.css and uses its colour tokens.
   Sizes are measured from the Figma "About" frames (design width = 100vw).
   ========================================================================== */

.tag--lime  { color: var(--lime-soft); }
.tag--red   { color: var(--red); }
.tag--coral { color: var(--coral); }
.about-title .lime  { color: var(--lime-soft); }
.about-title .red   { color: var(--red); -webkit-text-stroke: .02em var(--red); }
.about-title .coral { color: var(--coral); -webkit-text-stroke: .02em var(--coral); }
.about-title { font-size: 7.3vw; line-height: .846; }
.m-br { display: none; }

/* ── Hero: "Home is calling" ────────────────────────────── */
.about-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 62.2vw; background: #5a2a1c url("../img/bg-about-hero.jpg") center / cover no-repeat; text-align: center; }
.about-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #100e0e 0%, rgba(16,14,14,.9) 9%, rgba(16,14,14,.55) 24%, rgba(16,14,14,0) 52%); }
.about-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-bottom: 5.1vw; }
.about-hero .tag { background: rgba(16,14,14,.55); border-color: rgba(255,255,255,.15); }
.about-hero__title { margin-top: 2.7vw; font-size: 8.025vw; line-height: .846; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.about-hero__lead { margin-top: 1.9vw; max-width: 60.5vw; font-size: clamp(14px, 1.121vw, 22px); line-height: 1.4; color: #fff; }

/* ── Why we exist ───────────────────────────────────────── */
.about-why { background: var(--page); padding: 11vw 0 5.8vw; }
.about-why__grid { display: grid; grid-template-columns: minmax(0, 1fr) 34.5vw; column-gap: 4vw; align-items: center; }
.about-why .about-title { margin-top: 2.2vw; }
.about-text { margin-top: 2.2vw; max-width: 48.5vw; font-size: clamp(14px, 1.252vw, 22px); line-height: 1.36; }
.about-text--2 { margin-top: .75vw; }
.about-quote { margin-top: 2.55vw; padding: .6vw 0 .6vw 2.3vw; border-left: max(3px, .33vw) solid var(--lime-soft); }
.about-quote p { max-width: 49vw; font-family: var(--font-bold); font-weight: 700; font-size: clamp(17px, 2.237vw, 40px); line-height: 1.2; color: #bcbcbc; }

.acollage { position: relative; aspect-ratio: 324 / 419; }
.acollage__ph { position: absolute; overflow: hidden; border-radius: max(6px, .7vw); background: #2a2a2c; }
.acollage__ph img { width: 100%; height: 100%; object-fit: cover; }
.acollage__ph--1 { left: 9.3%; top: 0; width: 47.8%; height: 26.7%; z-index: 2; }
.acollage__ph--2 { left: 33.3%; top: 13.4%; width: 66.7%; height: 69.2%; z-index: 1; }
.acollage__ph--3 { left: 0; top: 56.6%; width: 50.9%; height: 43.4%; z-index: 2; }

/* ── Our mission / Our vision ───────────────────────────── */
.about-mv { background: var(--page); padding: 6vw 0 11.6vw; }
.about-mv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7vw; }
.mv-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; min-height: 56.1vw; padding: 2.1vw 2.3vw; border-radius: clamp(14px, 1.9vw, 30px); background: var(--card); }
.mv-card .about-title { margin-top: 1.5vw; }
.mv-text { margin-top: 2.4vw; font-size: clamp(14px, 1.248vw, 22px); line-height: 1.36; color: #e8e8e8; }
.mv-card--vision { justify-content: flex-end; }
.mv-globe { position:relative; left:auto; bottom:auto; width:88%; max-width:none; height:auto; align-self:center; object-fit:contain; margin:auto auto -8%; pointer-events:none; }
.mv-shape { position: absolute; top: 0; right: 0; width: 67.5%; height: 28.4%; pointer-events: none; }
.mv-shape--m { display: none; }

/* ── Tablet and phone ───────────────────────────────────── */
@media (max-width: 720px) {
  .m-br { display: inline; }
  .d-br { display: none; }
  .about-title { font-size: 13.47vw; line-height: .86; }

  .about-hero { min-height: 194vw; }
  .about-hero__inner { padding-bottom: 10vw; }
  .about-hero__title { margin-top: 5vw; font-size: 17.8vw; line-height: .85; }
  .about-hero__lead { max-width: none; margin-top: 4vw; font-size: 14px; }

  .about-why { padding: 20vw 0 12vw; }
  .about-why__grid { grid-template-columns: 1fr; row-gap: 9vw; }
  .about-why .about-title { margin-top: 5vw; }
  .about-text { max-width: none; margin-top: 5vw; font-size: 14px; }
  .about-text--2 { margin-top: 3vw; }
  .about-quote { margin-top: 6vw; padding-left: 4vw; }
  .about-quote p { max-width: none; font-size: max(17px, 5.2vw); }

  .about-mv { padding: 12.7vw 0 20vw; }
  .about-mv__grid { grid-template-columns: 1fr; gap: 4.7vw; }
  .mv-card { min-height: 0; padding: 5vw 3.9vw; border-radius: 4vw; }
  .mv-card .about-title { margin-top: 3.5vw; font-size: 12.9vw; }
  .mv-text { margin-top: 5vw; font-size: 13.5px; }
  .mv-card--vision { justify-content: flex-start; }
  .mv-card--mission { min-height:0; padding-bottom:0; }
  .mv-globe { position:relative; left:auto; bottom:auto; width:112%; max-width:none; height:auto; align-self:center; aspect-ratio:auto; object-fit:contain; margin:8vw -6% -10vw; }
  .mv-shape--d { display: none; }
  .mv-shape--m { display: block; position: relative; top: auto; right: auto; width: calc((100% + 7.8vw) * .95); height: auto; aspect-ratio: 222 / 148; margin: 8vw -3.9vw -5vw auto; }
}

/* The complete hero stays visible below the site header. */
.page-about .about-hero {
  height: var(--hero-viewport);
  min-height: 0;
}

@media (max-width: 720px) {
  .page-about .about-hero__inner { padding-bottom: clamp(34px, 8svh, 66px); }
  .page-about .about-hero__title { margin-top: 18px; font-size: clamp(58px, 16vw, 78px); }
  .page-about .about-hero__lead { margin-top: 18px; font-size: 13px; line-height: 1.42; }
}

@media (max-height: 680px) and (max-width: 720px) {
  .page-about .about-hero__inner { padding-bottom: 26px; }
  .page-about .about-hero__title { font-size: 54px; }
  .page-about .about-hero__lead { font-size: 12px; line-height: 1.34; }
}

/* ── Our story: timeline ─────────────────────────────────── */
.story { background: var(--page); padding: 6.3vw 0 6.3vw; }
.story__grid { display: grid; grid-template-columns: minmax(0, 1fr) 55.7vw; column-gap: 5.5vw; }
.story .about-title { margin-top: 2.2vw; font-size: 5.15vw; }
.story .about-title .purple { color: var(--violet-line); -webkit-text-stroke: .02em var(--violet-line); }
.about-text--noclamp { max-width: none; }
.story__copy .about-text { margin-top: 2vw; max-width: none; }

.timeline { position: relative; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; border-left: 1px dashed #3a3a3a; }
.timeline__item { position: relative; padding-left: 2.6vw; }
.timeline__item + .timeline__item { margin-top: 3.3vw; }
.timeline__dot { position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(137,50,222,.28); }
.timeline__item.is-current .timeline__dot { animation: dotPulse 2.2s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(137,50,222,.28); } 50% { box-shadow: 0 0 0 8px rgba(137,50,222,.12); } }
.timeline__year { font-size: 3.3vw; line-height: 1; color: #fff; }
.timeline__title { margin-top: .6vw; font-family: var(--font-bold); font-weight: 700; font-size: clamp(15px, 1.55vw, 26px); line-height: 1.25; }
.timeline__text { margin-top: .5vw; max-width: 34vw; font-size: clamp(13.5px, 1.1vw, 19px); line-height: 1.4; color: #cfcfcf; }
.timeline__photos { display: flex; gap: 1vw; margin-top: 1.6vw; }
.timeline__photos li { flex: 1; aspect-ratio: 179 / 152; border-radius: max(6px, .7vw); overflow: hidden; background: #2a2a2c; }
.timeline__photos--1 li { flex: 0 0 34%; }
.timeline__photos li img { width: 100%; height: 100%; object-fit: cover; }

/* ── Impact: stats + 3 photo cards ──────────────────────── */
.impact { background: var(--page); padding: 6.9vw 0 8vw; text-align: center; }
.impact__head { max-width: 60vw; margin-inline: auto; }
.impact .about-title { margin-top: 1.7vw; font-size: 4.9vw; }
.impact .about-title .lime { color: var(--lime-soft); }
.impact__lead { margin: 1.7vw auto 0; max-width: 48vw; font-size: clamp(14px, 1.05vw, 19px); line-height: 1.4; color: #d6d6d6; }
.stats--impact { display: flex; justify-content: center; gap: 6.9vw; margin-top: 4vw; }
.stats--impact .stat__num { color: #fff; }
.stats--impact .stat__label { color: var(--lime-soft); }
.impact__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.7vw; margin-top: 4.8vw; text-align: left; }
.icard { position: relative; aspect-ratio: 278 / 293; border-radius: clamp(12px, 1.5vw, 26px); overflow: hidden; background: #2a2a2c; }
.icard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.icard__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,14,14,.92) 0%, rgba(16,14,14,.45) 35%, rgba(16,14,14,0) 62%); }
.icard__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.6vw; }
.icard__title { font-family: var(--font-bold); font-weight: 700; font-size: clamp(15px, 1.43vw, 25px); line-height: 1.2; color: #fff; }
.icard__text { margin-top: .6vw; font-size: clamp(12px, .96vw, 16px); line-height: 1.35; color: #dcdcdc; }

@media (max-width: 720px) {
  .story { padding: 12vw 0 13vw; }
  .story__grid { grid-template-columns: 1fr; row-gap: 8vw; }
  .story .about-title { margin-top: 4vw; font-size: 12.6vw; line-height: .88; }
  .story__copy .about-text { margin-top: 4vw; font-size: 14px; }
  .timeline::before { left: 5px; }
  .timeline__item { padding-left: 6vw; }
  .timeline__item + .timeline__item { margin-top: 8vw; }
  .timeline__dot { top: 5px; width: 11px; height: 11px; }
  .timeline__year { font-size: 8vw; }
  .timeline__title { margin-top: 2vw; font-size: max(15px, 4vw); }
  .timeline__text { margin-top: 2vw; max-width: none; font-size: 13.5px; }
  .timeline__photos { gap: 2.6vw; margin-top: 4vw; }

  .impact { padding: 15vw 0 16vw; }
  .impact__head { max-width: none; }
  .impact .about-title { margin-top: 3.5vw; font-size: 11.2vw; line-height: .9; }
  .impact__lead { max-width: none; margin-top: 4vw; font-size: 14px; }
  .stats--impact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10vw 4vw; margin-top: 9vw; text-align: center; }
  .stats--impact .stat__num { font-size: 10.5vw; }
  .stats--impact .stat__label { margin-top: 3vw; font-size: max(12px, 3.5vw); }
  .impact__cards { grid-template-columns: 1fr; gap: 4vw; margin-top: 9vw; }
  .icard { aspect-ratio: 335 / 210; }
  .icard__title { font-size: max(16px, 4.3vw); }
  .icard__text { font-size: 13.5px; }
}