/* =====================================================================
   About page (The story / The team) — loaded after styles.css.
   Same language as the home page: Bebas Neue display, Barlow Condensed body,
   black bands, one green accent, rounded gray tiles, 120rem margins,
   1rem == 1 artboard px (1366 desktop, 430 phones).
   Every photo/video is a `.ph` placeholder tile until the media is produced.
   ===================================================================== */

.page--about p, .page--about li { font-family: var(--font-body); font-weight: 500; }
.page--about h2, .page--about h3 { text-transform: uppercase; }
.page--about .kicker { font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--green-dark); }
.btn--outline { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2rem var(--green); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--green); }

/* ---------- media placeholders ---------- */
.ph { position: relative; display: grid; place-items: center; background: var(--gray); color: #8a8a8a; text-align: center; overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 10rem; border: 2rem dashed #c3c3c3; border-radius: inherit; pointer-events: none; }
.ph__in { position: relative; display: block; padding: 10rem; }
.ph__type { display: block; font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.ph__note { display: block; margin-top: 6rem; font-family: var(--font-body); font-weight: 500; }
.ph--dark { background: #14181b; color: #6f777d; }
.ph--dark::before { border-color: #353c42; }

/* ---------- hero ---------- */
.hero--about { height: auto; background: #0b0f12; }
/* roof loop: fills the hero, poster fallback for reduced motion / slow networks */
.hero--about .hero__media { background: #0b0f12 url("../assets/img/about/about-hero-poster.jpg?v=efdab709") center / cover no-repeat; }
.hero--about .hero__video { top: 0; height: 100%; object-position: 50% 40%; }
.hero--about .hero__shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.15) 85%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.55) 100%);
}
.hero--about .in { position: relative; z-index: 2; height: auto; display: flex; flex-direction: column; }
.hero__kicker--about { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.hero__title--about { position: static; text-shadow: none; }
.hero__title--about .accent { color: var(--green); }
.hero__sub--about { color: #e6e6e6; }

/* ---------- story ---------- */
.story__video { overflow: hidden; background: var(--black); }
.story__video wistia-player { display: block; width: 100%; }
.story__h2 { letter-spacing: .04em; line-height: 1.01; }
.numbers { list-style: none; display: grid; border-top: 2rem solid var(--black); }
.numbers strong { display: block; font-family: var(--font-display); font-weight: 400; line-height: 1; color: var(--green-dark); }
.numbers span { display: block; color: #444; }

/* ---------- mark (logo evolution) ---------- */
.mark { background: var(--gray); }
.mark__h2 { letter-spacing: .04em; line-height: 1.01; }
.mark__h2-sub { color: var(--green-dark); }
.mark__row { list-style: none; }
.mark__tile { background: var(--white); }
.mark__fig { display: flex; align-items: center; justify-content: center; margin: 0; }
.mark__fig img { display: block; width: auto; max-width: 100%; object-fit: contain; }   /* explicit height per breakpoint: the logos are taller than the tile */
.mark__year { font-family: var(--font-display); letter-spacing: .06em; line-height: 1; color: var(--green-dark); }
.mark__cap { color: #444; }

/* ---------- quote ---------- */
.aquote { background: var(--black); color: var(--white); }
.aquote__mark { font-family: var(--font-display); line-height: .55; color: var(--green); }
.aquote__q { margin: 0; }
.aquote__p { font-family: var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
.aquote__who { font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #bdbdbd; }

/* ---------- team ---------- */
.group__fig { margin: 0; overflow: hidden; background: var(--gray); }
.group__fig img { display: block; width: 100%; height: auto; }
.team__h2 { letter-spacing: .04em; line-height: 1.01; }
.team__h3 { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2rem solid var(--black); letter-spacing: .06em; }
.team__grid { list-style: none; display: grid; }
.member__ph { margin: 0; overflow: hidden; background: var(--gray); }
.member__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.member__name { font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.member__role { color: #666; }
.member__links { display: flex; }
.member__links a { display: grid; place-items: center; border-radius: 50%; background: #f1f1f1; color: var(--black); transition: background .2s ease, color .2s ease; }
.member__links a:hover, .member__links a:focus-visible { background: var(--green); color: var(--white); outline: none; }
.member__links svg { display: block; }

/* ---------- closing cta ---------- */
.acta { background: var(--black); color: var(--white); }
.acta__h2 { letter-spacing: .04em; line-height: 1.01; }
.acta__p { color: #e6e6e6; }
.acta__btns { display: flex; }

/* =====================================================================
   DESKTOP (1366 artboard)
   ===================================================================== */
@media (min-width: 761px) {
  .ph__type { font-size: 18rem; }
  .ph__note { font-size: 15rem; }

  /* hero */
  .hero--about .in { min-height: 620rem; padding: 150rem 120rem 110rem; }
  .hero__kicker--about { font-size: 20rem; }
  .hero__title--about { margin-top: 18rem; font-size: 84rem; }
  .hero__sub--about { margin-top: 26rem; max-width: 640rem; font-size: 22rem; line-height: 30rem; }

  /* story */
  .story .in { padding: 110rem 120rem 100rem; }
  .story__grid { display: grid; grid-template-columns: 560rem 1fr; column-gap: 70rem; align-items: start; }
  .story__video { aspect-ratio: 16 / 9; border-radius: 18rem; margin: 0; }
  .story__text .kicker { font-size: 18rem; }
  .story__h2 { margin-top: 10rem; font-size: 54rem; }
  .story__text p:not(.kicker) { margin-top: 18rem; font-size: 19.5rem; line-height: 27rem; }
  .story__text h2 + p { margin-top: 24rem; font-size: 22rem; line-height: 30rem; }
  .numbers { grid-template-columns: repeat(4, 1fr); margin-top: 80rem; }
  .numbers li { padding: 26rem 28rem 0 0; }
  .numbers li + li { padding-left: 28rem; border-left: 1px solid #e3e3e3; }
  .numbers strong { font-size: 56rem; }
  .numbers span { margin-top: 10rem; font-size: 17rem; line-height: 23rem; }

  /* mark */
  .mark .in { padding: 90rem 120rem 100rem; }
  .mark__head { display: grid; grid-template-columns: 600rem 1fr; column-gap: 60rem; align-items: end; }
  .mark__h2 { font-size: 50rem; }
  .mark__p { max-width: 560rem; font-size: 20rem; line-height: 28rem; }
  .mark__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem; margin-top: 54rem; }
  .mark__tile { padding: 36rem 36rem 32rem; border-radius: 18rem; }
  .mark__fig { height: 220rem; }
  .mark__fig img { height: 220rem; }
  .mark__year { margin-top: 26rem; font-size: 30rem; }
  .mark__cap { margin-top: 8rem; font-size: 17rem; line-height: 23rem; }

  /* quote */
  .aquote .in { padding: 90rem 120rem 96rem; }
  .aquote__mark { font-size: 140rem; }
  .aquote__p { margin-top: 10rem; max-width: 980rem; font-size: 36rem; line-height: 46rem; }
  .aquote__who { margin-top: 22rem; font-size: 20rem; }

  /* team */
  .team .in { padding: 100rem 120rem 100rem; }
  .group__fig { border-radius: 24rem; }
  .team__head { display: grid; grid-template-columns: 520rem 1fr; column-gap: 80rem; align-items: end; margin-top: 90rem; }
  .team__head .kicker { font-size: 18rem; }
  .team__h2 { margin-top: 10rem; font-size: 54rem; }
  .team__p { max-width: 560rem; font-size: 20rem; line-height: 28rem; }
  .team__h3 { margin-top: 64rem; padding-bottom: 12rem; font-size: 26rem; }
  .team__grid { grid-template-columns: repeat(4, 227rem); justify-content: space-between; gap: 44rem 0; margin-top: 30rem; }   /* 227x227 photos, four per row spread across the margins */
  .member__ph { width: 227rem; height: 227rem; border-radius: 18rem; }
  .member__name { margin-top: 16rem; font-size: 26rem; }
  .member__role { margin-top: 5rem; font-size: 17rem; line-height: 22rem; }
  .member__links { gap: 8rem; margin-top: 12rem; }
  .member__links a { width: 34rem; height: 34rem; }
  .member__links svg { width: 17rem; height: 17rem; }

  /* cta */
  .acta .in { display: grid; grid-template-columns: 1fr auto; column-gap: 60rem; align-items: center; padding: 90rem 120rem; }
  .acta__h2 { font-size: 60rem; }
  .acta__p { margin-top: 16rem; max-width: 640rem; font-size: 21rem; line-height: 28rem; }
  .acta__btns { gap: 16rem; }
  .acta__btns .btn { height: 54rem; padding: 0 30rem; }
}

/* =====================================================================
   PHONES (430 artboard)
   ===================================================================== */
@media (max-width: 760px) {
  .ph__type { font-size: 15rem; }
  .ph__note { font-size: 13rem; }

  /* hero */
  .hero--about { height: auto; min-height: 0; }   /* styles.css gives phone heroes a viewport height; this one is as tall as its copy */
  .hero--about .in { min-height: 0; justify-content: flex-start; padding: 110rem 24rem 70rem; }
  .hero__kicker--about { font-size: 15rem; }
  .hero__title--about { margin-top: 12rem; font-size: 50rem; }
  .hero__sub--about { margin-top: 18rem; font-size: 17rem; line-height: 23rem; }

  /* story */
  .story .in { padding: 60rem 24rem 56rem; }
  .story__video { aspect-ratio: 16 / 9; border-radius: 16rem; margin: 0 0 28rem; }
  .story__text .kicker { font-size: 15rem; }
  .story__h2 { margin-top: 8rem; font-size: 40rem; }
  .story__text p:not(.kicker) { margin-top: 14rem; font-size: 16.5rem; line-height: 22rem; }
  .story__text h2 + p { margin-top: 18rem; font-size: 18rem; line-height: 24rem; }
  .numbers { grid-template-columns: 1fr 1fr; gap: 0 20rem; margin-top: 44rem; }
  .numbers li { padding: 18rem 0 18rem; border-bottom: 1px solid #e3e3e3; }
  .numbers strong { font-size: 40rem; }
  .numbers span { margin-top: 6rem; font-size: 14.5rem; line-height: 19rem; }

  /* mark */
  .mark .in { padding: 56rem 24rem 60rem; }
  .mark__h2 { font-size: 34rem; }   /* "An evolution of our brand" on one line */
  .mark__p { margin-top: 14rem; font-size: 16.5rem; line-height: 22rem; }
  .mark__row { display: grid; row-gap: 16rem; margin-top: 28rem; }
  .mark__tile { padding: 26rem 24rem 24rem; border-radius: 16rem; }
  .mark__fig { height: 150rem; }
  .mark__fig img { height: 150rem; }
  .mark__year { margin-top: 18rem; font-size: 26rem; }
  .mark__cap { margin-top: 6rem; font-size: 15rem; line-height: 20rem; }

  /* quote */
  .aquote .in { padding: 54rem 24rem 60rem; }
  .aquote__mark { font-size: 96rem; }
  .aquote__p { margin-top: 6rem; font-size: 26rem; line-height: 33rem; }
  .aquote__who { margin-top: 16rem; font-size: 16rem; }

  /* team */
  .team .in { padding: 56rem 24rem 60rem; }
  .group__fig { border-radius: 18rem; }
  .team__head { margin-top: 48rem; }
  .team__head .kicker { font-size: 15rem; }
  .team__h2 { margin-top: 8rem; font-size: 40rem; }
  .team__p { margin-top: 14rem; font-size: 16.5rem; line-height: 22rem; }
  .team__h3 { margin-top: 40rem; padding-bottom: 10rem; font-size: 21rem; }
  .team__grid { grid-template-columns: 1fr 1fr; gap: 30rem 16rem; margin-top: 22rem; }
  .member__ph { aspect-ratio: 1 / 1; border-radius: 14rem; }
  .member__name { margin-top: 12rem; font-size: 20rem; }
  .member__role { margin-top: 4rem; font-size: 14.5rem; line-height: 19rem; }
  .member__links { gap: 8rem; margin-top: 10rem; }
  .member__links a { width: 32rem; height: 32rem; }
  .member__links svg { width: 16rem; height: 16rem; }

  /* cta */
  .acta .in { padding: 60rem 24rem 64rem; }
  .acta__h2 { font-size: 44rem; }
  .acta__p { margin-top: 14rem; font-size: 17rem; line-height: 23rem; }
  .acta__btns { flex-direction: column; gap: 12rem; margin-top: 26rem; }
  .acta__btns .btn { height: 48rem; font-size: 20rem; }
}