/* Company page. Loads after style.css and reuses its tokens, header, buttons,
   decoration lines and dots, the pong panel and the footer. Structure and
   sizes follow corticallabs.com/company (about hero with a people row, team
   statement in a line-and-dot frame, dark pong callout, two colour cards),
   minus its photographs: the people row is names and titles only, the
   full-team photograph is left out, and the colour cards are brand fills.

   1. About hero
   2. Team
   3. Dark pong (divider only)

   The two colour info cards this page ends with are shared with the insights
   page, so they live in style.css section 11.
------------------------------------------------------------------------- */

/* 1. About hero ------------------------------------------------------------ */

/* The client's pale yellow speckle sits at the top of the page at its own
   proportions, not cropped to the hero: as on the reference it runs on past
   the hero behind the team statement and fades out into Cloud there. Never
   narrower than 1100px, so on phones it still reaches past the hero.
   Over it a soft shade (client, 2026-10-07): darkest at the top, clearing
   by the image's foot (the image is 2800 x 1840, so its height is 65.7% of
   its width), so the ground brightens down the page into Cloud. */
main {
  --company-bg-h: calc(max(100vw, 1100px) * 0.657);

  background-color: var(--color-cloud);
  background-image:
    linear-gradient(180deg, rgb(40 34 24 / 0.2) 0%, rgb(40 34 24 / 0.08) 45%, rgb(40 34 24 / 0) 100%),
    url("../img/company/company-bg.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size:
    100% var(--company-bg-h),
    max(100%, 1100px) auto;
}

/* Reference: 180px 9.5vw 130px, h1 80/90, p 28px. The copy is left-aligned
   on the 9.5vw edge and spans the content width; the people row is centred
   on the page. Measured against the reference at 1849px wide. */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 88px;
  padding: 180px 9.5vw 130px;
}

/* Three busts on their arches, centred under the copy as on the reference:
   220px arches on 300px centres (the arch fills ~86% of each image). The
   surrounds are transparent, so the speckle runs on behind them. */
.about-hero__people {
  display: flex;
  justify-content: center;
  gap: 44px;
  width: 100%;
  max-width: var(--site-max-width);
}

/* WebP with a PNG fallback; the picture wrapper stays out of the flex row. */
.about-hero__people picture {
  display: contents;
}

.about-hero__people img {
  display: block;
  flex: 0 1 256px;
  min-width: 0;
  height: auto;
}

.about-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center; /* centred, as the Services hero (client) */
  gap: 55px;
  width: 100%;
  text-align: center;
}

/* As the reference, size for size (client, 2026-10-07; measured at
   1920-360): 80px on 90px, then 70/76 at 900px and under, 60/66 at 600,
   50/56 at 500 and 44/50 at 400, wrapping to more lines where the
   reference does. Weight 450 gives the reference's stroke (7px stems at
   80px; 400 measured 6px, 500 measured 8px). */
.about-hero h1 {
  font-size: 80px;
  font-weight: 450;
  line-height: 1.125;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Weight 470 matches the reference paragraph's stroke: 400 measured
   lighter, 500 a touch heavier. */
.about-hero p {
  font-size: 28px;
  font-weight: 470;
  line-height: 1.3;
  text-wrap: balance;
}

/* 2. Team ------------------------------------------------------------------- */

/* Title and statement inside the homepage's line-and-dot frame; the frame's
   lines run 140px past the content on every side, as on the reference. The
   full-team photograph that follows on the reference is left out. */
.about-team {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  padding: 9.5vw;
}

.about-team__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: var(--site-max-width);
  margin: 0 auto;
}

.about-team__body .dot {
  background-color: var(--color-ink);
}

.about-team__body .line {
  opacity: 0.08;
  background-color: var(--color-ink);
}

.about-team__body .line--vert {
  top: -140px;
  height: calc(100% + 280px);
  opacity: 1;
  background: linear-gradient(
    0deg,
    rgb(0 0 0 / 0) 0%,
    rgb(0 0 0 / 0.08) 33%,
    rgb(0 0 0 / 0.08) 66%,
    rgb(0 0 0 / 0) 100%
  );
}

.about-team__body .line--horz {
  left: -140px;
  width: calc(100% + 280px);
}

.about-team__body .dot--bl {
  left: -1px;
}

.about-team__body .dot--br {
  right: -1px;
}

.about-team__title {
  position: relative;
  padding: 0 60px;
}

/* Reference: 90px bold in its green; here the brand's Magenta. */
.about-team__title h2 {
  font-size: 90px;
  font-weight: var(--weight-heading);
  line-height: 90px;
  color: var(--color-brand-magenta);
}

/* The rule under the title carries the homepage's travelling highlight. */
.about-team__title .line--horz {
  bottom: 8px;
  opacity: 1;
  background: linear-gradient(
    270deg,
    rgb(0 0 0 / 0.08) 0%,
    rgb(0 0 0 / 0.08) 50%,
    rgb(0 0 0 / 0) 65.9%,
    rgb(0 0 0 / 1) 66%,
    rgb(0 0 0 / 0.5) 70%,
    rgb(0 0 0 / 0.08) 100%
  );
  background-size: 200% 200%;
  animation: silicon-horz-b 5s ease infinite;
}

.about-team__title .dot {
  bottom: 7px;
}

.about-team__description {
  padding: 0 60px 60px;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
}

/* 3. Dark pong -------------------------------------------------------------- */

/* The homepage pong panel on a dark ground: white divider, Medium Grey copy
   with white emphasis, the light button (the dark one faded into the
   ground). The reference's brown-tinted radial becomes a Magenta-tinted
   one. */
.pong--dark {
  --pong-item: var(--color-paper);

  color: var(--color-paper);
  background:
    radial-gradient(50% 50% at 50% 50%, #2a1530 0%, var(--color-ink) 100%),
    var(--color-ink);
}

.pong--dark .pong__ball--2 {
  opacity: 0.07;
}

.pong--dark .pong__ball--3 {
  opacity: 0.05;
}

.pong--dark .pong__ball--4 {
  opacity: 0.02;
}

/* The night sky the practice pages' "other services" section had before
   (client): a dark navy glow from the top and three layers of white stars
   drifting slowly upward (1, 2 and 3px at 50 / 100 / 150s a loop; nearer
   ones faster). main.js scatters each layer over a 2560 x 2000 field
   ([data-stars]); ::after repeats it 2000px below so the loop has no seam.
   Under reduced motion the stars hold still. Background from Uiverse.io
   by amir_6539 (red-duck-82), MIT. */
.pong--stars {
  --star: #ffffff;

  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at top, #1b2735 0%, #090a0f 100%);
}

.pong--stars .pong__body {
  position: relative;
  z-index: 1;
}

.pong__sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pong__sky .prac-others__stars,
.pong__sky .prac-others__stars::after {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  box-shadow: var(--field);
}

.pong__sky .prac-others__stars {
  animation: company-stars var(--speed) linear infinite;
}

.pong__sky .prac-others__stars::after {
  content: "";
  top: 2000px;
}

@keyframes company-stars {
  to {
    transform: translateY(-2000px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pong__sky .prac-others__stars {
    animation: none;
  }
}

/* Without paddles or ball, the divider is the only element that needs the
   panel's height, so the copy sets it. */
.pong--still .pong__left {
  padding: 90px 100px;
}

/* Breakpoints -------------------------------------------------------------- */

@media (max-width: 900px) {
  .about-hero h1 {
    font-size: 70px;
    line-height: 76px;
  }
}

@media (max-width: 600px) {
  .about-hero h1 {
    font-size: 60px;
    line-height: 66px;
  }
}

@media (max-width: 1050px) {
  .about-team__title {
    padding: 0 30px;
  }

  .about-team__title h2 {
    font-size: 70px;
    line-height: 76px;
  }

  .about-team__description {
    padding: 0 30px 60px;
    font-size: 24px;
  }
}

@media (max-width: 800px) {
  .about-hero {
    gap: 50px;
    padding: 18vh 9.5vw;
  }

  .about-hero__people {
    gap: 3vw;
    margin-top: 10px;
  }

  .about-team {
    padding: 0 20px 80px;
  }
}

/* The reference's paragraph stays 28px down to 500px, then 22px. */
@media (max-width: 500px) {
  .about-hero h1 {
    font-size: 50px;
    line-height: 56px;
  }

  .about-hero p {
    font-size: 22px;
  }

  .about-team__description {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-team__title .line--horz {
    animation: none;
  }
}

@media (max-width: 400px) {
  .about-hero h1 {
    font-size: 44px;
    line-height: 50px;
  }
}