/* ================================================================
   ABOUT PAGE (about.html), Figma frame "ABOUT" (78:1173).
   Uses the default FSE branding (mono logo). Reuses .div-hero and
   .div-intro from division.css, and the triangle from .media-cta.
   ================================================================ */
.about{ --mark: url("../../img/logo-mark-white.png"); }
.about .div-hero{ border-bottom: 0; }
.about .div-hero__inner{ padding-bottom: 87px; }
.about .div-hero__title{ line-height: 1.07; max-width: 1077px; }

/* Checklist items share the white FSE triangle mark */
.about-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.about-list li{ display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 23.61px; color: #fff; }
.about-list li::before{ content: ''; flex: none; width: 16px; height: 20px; background: var(--mark) center/contain no-repeat; }

/* ---------- Lead (black, centered column) ---------- */
.about-lead{ background: #000; color: #fff; padding: 90px var(--gap); }
.about-lead__inner{ max-width: 864px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.about-lead h2{ font-size: 40px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.about-lead p{ max-width: 705px; font-size: 15px; line-height: 23.61px; }

/* ---------- Intro (copy + rounded photo) ---------- */
.about .div-intro__copy{ max-width: 495px; }
.about .div-intro__copy p{ max-width: 450px; }
.about-intro__art{ flex-shrink: 0; width: 647px; max-width: 100%; }
.about-intro__art img{ width: 100%; height: auto; }

/* ---------- Built as a system (black, checklist, triangle) ---------- */
.about-system{ position: relative; overflow: hidden; background: #000; color: #fff; }
.about-system__inner{ position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 90px var(--gap); display: flex; align-items: center; gap: 60px; }
.about-system__copy{ display: flex; flex-direction: column; gap: 10px; width: 568px; flex-shrink: 0; }
.about-system__copy h2{ font-size: clamp(32px, 3.34vw, 48px); font-weight: 500; letter-spacing: -.01em; line-height: 1.04; }
.about-system__copy p{ max-width: 487px; font-size: 15px; line-height: 23.61px; }
.about-system__list h3{ font-size: 18px; font-weight: 700; line-height: 22.48px; margin-bottom: 16px; }
.about-system__tri{ position: absolute; z-index: 1; pointer-events: none; left: calc(var(--u) * 820); top: calc(var(--u) * -44); width: calc(var(--u) * 737.4); height: auto; opacity: .35; }

/* ---------- One foundation (division color blocks) ---------- */
.about-foundation{ background: #fff; color: #000; padding: 90px var(--gap); }
.about-foundation__inner{ max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.about-foundation h2{ font-size: 40px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.about-foundation p{ max-width: 706px; font-size: 15px; font-weight: 300; line-height: 1.5; }
.about-blocks{ display: flex; gap: 16px; width: 100%; }
.about-block{
  flex: 1 1 0; height: 296px; display: flex; align-items: center; justify-content: center;
  font-size: 36px; letter-spacing: -.075em; text-transform: uppercase; line-height: 1;
}
.about-block b{ font-family: 'Archivo Black', var(--font); font-weight: 400; }
.about-block i{ font-style: normal; font-weight: 100; }
.about-block--media{ background: #ff3347; color: #fff; }
.about-block--sports{ background: #d4f779; color: #000; }
.about-block--pharma{ background: #00e6ff; color: #000; }
.about-block--beauty{ background: #c45cff; color: #fff; }
.about-block:hover{ filter: brightness(1.05); }

/* ---------- Strategy before output (photo left, copy right) ---------- */
.about-strategy{ position: relative; overflow: hidden; background: #000; color: #fff; }
.about-strategy__bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
/* Dark fade behind the text column: only reaches the photo on mid-width screens, where the copy overlaps it */
.about-strategy::after{ content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, transparent calc(100% - 568px - var(--gap) - 120px), rgba(0,0,0,.88) calc(100% - 568px - var(--gap) - 16px)); }
.about-strategy__inner{ position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; min-height: 613px; padding: 90px var(--gap); display: flex; align-items: center; justify-content: flex-end; }
.about-strategy__copy{ width: 568px; display: flex; flex-direction: column; gap: 10px; }
.about-strategy__copy h2{ font-size: clamp(32px, 3.34vw, 48px); font-weight: 500; letter-spacing: -.01em; line-height: 1.04; }
.about-strategy__copy p{ max-width: 487px; font-size: 15px; line-height: 23.61px; }
.about-strategy .about-list{ gap: 10px; }

/* ---------- CTA: .media-cta band; 60% black scrim lives in style.css ---------- */
.about .media-cta__copy{ max-width: 470px; }

/* ---------- Responsive ---------- */
/* ---------- Team (white, 3 x 3 grid of large avatar tiles, name and position below) ---------- */
.about-team{ background: #fff; color: #000; border-bottom: 1px solid #e5e5e5; }
.about-team__inner{ max-width: var(--maxw); margin: 0 auto; padding: 90px var(--gap); }
.about-team__head{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.about-team__eyebrow{ font-size: 14px; font-weight: 300; line-height: 14px; text-transform: uppercase; }
.about-team__head h2{ font-size: 40px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.about-team__grid{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
.team-card{ display: flex; flex-direction: column; }
/* The avatar is a looping idle video (MP4); main.js plays it while on screen.
   The poster is the loop's first frame. */
.team-avatar{ position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #eee; }
.team-avatar video{ display: block; width: 100%; height: 100%; object-fit: cover; }
.team-card__name{ margin-top: 16px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.team-card__role{ margin-top: 4px; font-size: 14px; line-height: 20px; color: #666; }

@media (max-width: 1000px){
  .about-team__inner{ padding: 60px var(--gap); }
  .about-team__head h2{ font-size: 32px; }
  .about-team__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .team-card__name{ font-size: 17px; }
  .about .div-hero__inner{ padding-bottom: calc(var(--gap) + 24px); }
  .about-lead{ padding: 60px var(--gap); }
  .about-lead h2{ font-size: clamp(28px, 7vw, 40px); }
  .about-intro__art{ width: 100%; }
  .about-system__inner{ flex-direction: column; align-items: flex-start; gap: 40px; padding: 60px var(--gap); }
  .about-system__copy{ width: auto; }
  .about-system__tri{ left: auto; right: -40%; top: 10%; width: 90%; }
  .about-foundation{ padding: 60px var(--gap); }
  .about-foundation h2{ font-size: clamp(28px, 7vw, 40px); }
  .about-blocks{ flex-wrap: wrap; }
  .about-block{ flex: 1 1 calc(50% - 8px); height: 180px; font-size: clamp(24px, 6vw, 36px); }
  .about-strategy::after{ content: none; }
  .about-strategy__bg{ position: relative; height: auto; aspect-ratio: 678 / 613; object-fit: cover; }
  .about-strategy__inner{ min-height: 0; padding: 48px var(--gap) 60px; justify-content: flex-start; }
  .about-strategy__copy{ width: auto; }
}
@media (max-width: 640px){
  .about-team__grid{ gap: 28px 16px; }
  .team-card__name{ margin-top: 12px; font-size: 16px; }
  .team-card__role{ font-size: 13px; line-height: 18px; }
  .about-block{ flex-basis: 100%; height: 140px; }
}

/* Keep the homepage's nav logo exactly - same 54px box, same placement,
   same cover fit - and only drop the solid #000 tile behind it. The tile is
   invisible on pages whose header sits on pure black, but this hero is a
   video, so it showed as a black square around the mark. */

/* ---------- Feedback round 2 ---------- */
/* Services instead of divisions: same blocks, coloured by service */
.about-blocks--svc{ flex-wrap: wrap; justify-content: center; }
.about-block--svc{ flex: 1 1 calc(20% - 16px); min-width: 200px; height: 160px; text-transform: none; line-height: 1.15; background: var(--c); color: #000; font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.02em; text-align: center; padding: 0 16px; }
/* By the numbers: the shared .stats list on black */
.about-numbers{ background: #000; color: #fff; padding: 90px var(--gap); }
.about-numbers__inner{ max-width: 864px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.about-numbers h2{ font-size: 40px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
@media (max-width: 1000px){
  .about-numbers{ padding: 60px var(--gap); }
  .about-numbers h2{ font-size: clamp(28px, 7vw, 40px); }
  .about-block--svc{ flex-basis: calc(50% - 8px); min-width: 0; }
}
@media (max-width: 640px){ .about-block--svc{ flex-basis: 100%; } }

/* Hero subtitle under "Creative thinking. Technical know-how." (same treatment as the blog hero) */
.about-hero__sub{ max-width: 815px; margin-top: 20px; font-size: 15px; line-height: 23.61px; color: #fff; }
@media (max-width: 720px){ .about-hero__sub{ margin-top: 16px; font-size: clamp(16px, 4.3vw, 19px); line-height: 1.55; } }