@charset "UTF-8";

/*
 * About page: manifesto hero, story timeline, values, team and client voices. Builds on
 * the tokens in site.css and the section grid in homepage.css.
 */

.site-main--about {
  padding-block-start: 0;
}

/* Manifesto hero ---------------------------------------------------------- */

.about-hero,
.about-story {
  position: relative;
  padding-inline: var(--bh-gutter);
  overflow: hidden;
}

/* The headline row sits at the foot of the pinned view; the words fall down into it. */
.about-hero__statement {
  margin-block-start: clamp(1rem, 4vh, 3rem);
}

.about-hero__sticky {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--bh-header-height) + var(--bh-space-md)) var(--bh-space-lg);
}

/* Full-bleed backdrops: the old About hero behind the manifesto, one image per chapter. */
.about-hero__backdrop,
.about-story__backdrops,
.about-values__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.about-hero__backdrop {
  inset-inline: calc(-1 * var(--bh-gutter));
}

.about-hero__backdrop picture,
.about-story__backdrop picture,
.about-values__backdrop picture,
.about-hero__backdrop img,
.about-story__backdrop img,
.about-values__backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero__backdrop::after,
.about-values__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(5 3 10 / 82%) 0%, rgb(5 3 10 / 55%) 45%, rgb(5 3 10 / 88%) 100%),
    linear-gradient(90deg, rgb(5 3 10 / 70%) 0%, rgb(5 3 10 / 20%) 100%);
}

.about-hero__backdrop img {
  opacity: 0.85;
}

.about-hero__grid,
.about-hero__flyer {
  position: relative;
  z-index: 1;
}

.about-hero__flyer {
  position: absolute;
  z-index: 2;
}

.about-hero__grid {
  row-gap: clamp(1.5rem, 3vw, 3rem);
}

.about-hero__copy,
.about-hero__actions {
  grid-column: 1 / span 8;
}

.about-hero__copy {
  grid-row: 2;
}

.about-hero__actions {
  grid-row: 3;
}

.about-hero__statement {
  grid-column: 1 / -1;
  grid-row: 4;
}

/* The portrait card from the old hero sits beside the copy; its height is capped so the
   headline row always fits in the pinned view. */
.about-hero__card {
  grid-column: 10 / -1;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: end;
  width: auto;
  height: min(44vh, 26rem);
  margin: 0;
  overflow: hidden;
  border-radius: var(--bh-radius);
  aspect-ratio: 9 / 16;
}

.about-hero__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero__statement {
  margin: 0;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-hero-xl);
  font-weight: var(--bh-weight-statement);
  line-height: var(--bh-leading-display);
  letter-spacing: var(--bh-tracking-display);
  text-wrap: balance;
}

.about-hero__slot {
  display: inline-block;
}

.about-hero__punct {
  display: inline-block;
  color: var(--bh-cyan);
}

.about-hero__copy {
  max-width: 62ch;
  margin: 0;
  color: var(--bh-white);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
  perspective: 800px;
}

.about-hero__key {
  display: inline-block;
  color: var(--bh-cyan);
  font-weight: 700;
}

.about-hero__word {
  display: inline-block;
  will-change: transform, opacity;
}

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* While animated the statement is a set of targets; the flying copies do the showing. */
.about-hero.is-animated .about-hero__slot {
  visibility: hidden;
}

.about-hero__flyer {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  margin: 0;
  color: var(--bh-cyan);
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-hero-xl);
  font-weight: var(--bh-weight-statement);
  line-height: var(--bh-leading-display);
  letter-spacing: var(--bh-tracking-display);
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

/* Story timeline ---------------------------------------------------------- */

.about-story__sticky {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--bh-header-height) + var(--bh-space-md)) var(--bh-space-lg);
}

.about-story__backdrops {
  inset-inline: calc(-1 * var(--bh-gutter));
}

.about-story__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  will-change: opacity, transform;
}

.about-story__backdrops::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(5 3 10 / 88%) 0%, rgb(5 3 10 / 62%) 50%, rgb(5 3 10 / 35%) 100%),
    linear-gradient(180deg, rgb(5 3 10 / 70%) 0%, rgb(5 3 10 / 0%) 35%, rgb(5 3 10 / 0%) 70%, rgb(5 3 10 / 85%) 100%);
}

.about-story__frame {
  position: relative;
  z-index: 1;
  row-gap: clamp(1.5rem, 3vw, 3rem);
}

.about-story__head,
.about-story__stage,
.about-story__rail {
  grid-column: 1 / -1;
}

.about-story__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.about-story__head p {
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-label);
}

.about-story__beats {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-story__beat {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
}

.about-story__year {
  grid-column: 1 / span 6;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-numeral);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--bh-white);
}

.about-story__year--long {
  font-size: clamp(2.4rem, 7.2vw, 7.6rem);
  letter-spacing: -0.04em;
}

.about-story__body {
  grid-column: 7 / -1;
  max-width: 34rem;
  padding: clamp(1.1rem, 2vw, 1.75rem) clamp(1.2rem, 2.2vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--bh-white) 10%, transparent);
  border-radius: var(--bh-radius);
  background: rgb(5 3 10 / 64%);
}

.about-story:not(.is-animated) .about-story__body,
.about-story.is-animated .about-story__beat.is-current .about-story__body {
  background: rgb(5 3 10 / 52%);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

/* Chapters are stacked on the pinned stage, so only the chapter on stage may paint its
   panel; otherwise six translucent panels pile into a black block over the copy. */
.about-story.is-animated .about-story__body {
  transition: background-color 0.5s var(--bh-ease-out), border-color 0.5s var(--bh-ease-out);
}

.about-story.is-animated .about-story__beat:not(.is-current) .about-story__body {
  border-color: transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.about-story__index {
  display: block;
  margin: 0 0 0.9rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
}

.about-story__title {
  margin: 0 0 1rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h2);
  font-weight: var(--bh-weight-heading);
  line-height: var(--bh-leading-tight);
  letter-spacing: var(--bh-tracking-heading);
}

.about-story__copy {
  margin: 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-body);
  line-height: var(--bh-leading-body);
}

.about-story__rail {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(var(--beats, 7), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  --progress: 0;
}

.about-story__rail::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(90deg, var(--bh-cyan) 0%, var(--bh-cyan) calc(var(--progress) * 100%), var(--bh-line) calc(var(--progress) * 100%));
}

.about-story__rail li {
  color: var(--bh-muted);
  font-family: var(--bh-font-label);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
  transition: color 0.4s var(--bh-ease-out);
}

.about-story__rail li.is-active {
  color: var(--bh-white);
}

/* Pinned version: chapters stack on one stage. */
.about-story.is-animated .about-story__stage {
  position: relative;
  min-height: clamp(18rem, 42vh, 30rem);
}

.about-story.is-animated .about-story__beat {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-story.is-animated .about-story__beat.is-current {
  pointer-events: auto;
}

/* Static version: every chapter is a full-height slide over its own image. */
.about-story:not(.is-animated) {
  padding-inline: 0;
}

.about-story:not(.is-animated) .about-story__sticky {
  display: block;
  min-height: 0;
  padding-block: 0;
}

.about-story:not(.is-animated) .about-story__backdrops,
.about-story:not(.is-animated) .about-story__rail {
  display: none;
}

.about-story:not(.is-animated) .about-story__head {
  padding: calc(var(--bh-header-height) + var(--bh-space-md)) var(--bh-gutter) var(--bh-space-lg);
}

.about-story:not(.is-animated) .about-story__beat {
  position: relative;
  isolation: isolate;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--bh-space-xl) var(--bh-gutter);
  background: var(--bg) center / cover no-repeat, var(--bh-black);
}

.about-story:not(.is-animated) .about-story__beat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(5 3 10 / 82%) 0%, rgb(5 3 10 / 55%) 50%, rgb(5 3 10 / 85%) 100%);
}

/* Values: the light block between the manifesto and the story. Tall enough that the
   page is fully light before it starts heading back to dark for the story. */

.site-main--about .about-values {
  display: flex;
  align-items: flex-start;
  /* No minimum height here: a tall block left an empty screen before the story. */
  min-height: 0;
  padding-block: clamp(6rem, 14vh, 10rem) var(--bh-space-2xl);
}

/* Title card before the pinned stage: the page finishes going dark across this band, so
   the chapters' imagery never meets a half-lit page. */
.site-main--about .about-story-intro {
  display: flex;
  align-items: center;
  min-height: 80vh;
  min-height: 80svh;
}

.about-story-intro .bh-grid {
  width: min(100%, var(--bh-container));
}

.about-story-intro__body {
  grid-column: 1 / span 9;
}

.about-story-intro .lede {
  max-width: 40rem;
}

.about-values__grid {
  width: min(100%, var(--bh-container));
  row-gap: clamp(2rem, 4vw, 3.5rem);
}

.about-values__head {
  grid-column: 1 / -1;
}

.about-values .statement {
  max-width: 14em;
}

.about-values__copy {
  grid-column: 1 / span 7;
  grid-row: 2;
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.about-values__copy p {
  margin: 0;
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
  color: var(--bh-muted);
}

.about-values__copy p:first-child {
  color: var(--bh-white);
}

.about-values__photo {
  grid-column: 8 / -1;
  grid-row: 2 / 4;
  align-self: start;
  margin: 0;
  overflow: hidden;
  border-radius: var(--bh-radius);
}

.about-values__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-values__stats {
  grid-column: 1 / span 7;
  grid-row: 3;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: end;
}

.about-values__stat {
  display: grid;
  gap: 0.35rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--bh-line);
}

.about-values__value {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-figure);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.about-values__label {
  color: var(--bh-muted);
  font-size: var(--bh-step-label);
}

.about-values__disciplines {
  grid-column: 1 / -1;
  grid-row: 4;
  padding-block-start: var(--bh-space-lg);
  border-block-start: 1px solid var(--bh-line);
}

.about-values__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-values__list li {
  padding: 0.55rem 1rem;
  border: 1px solid var(--bh-line);
  border-radius: 999px;
  font-family: var(--bh-font-label);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

/* Team -------------------------------------------------------------------- */

.about-team__grid {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--bh-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-card {
  display: grid;
  gap: 1rem;
}

.team-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--bh-radius);
  background: var(--bh-surface);
}

/* Every portrait is treated like Ronan's studio shot: black and white, a touch more contrast. */
.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.96);
  transition: transform 0.9s var(--bh-ease-glide);
}

.team-card:hover .team-card__media img {
  transform: scale(1.04);
}

.team-card__role {
  margin: 0 0 0.3rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
}

.team-card__name {
  margin: 0 0 0.6rem;
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h3);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
}

.team-card__bio {
  margin: 0 0 0.8rem;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
  line-height: var(--bh-leading-body);
}

.team-card__link {
  color: var(--bh-white);
  font-size: var(--bh-step-small);
}

/* Section spacing on this page --------------------------------------------- */

.site-main--about .bh-section {
  padding-block: var(--bh-space-xl);
}

.site-main--about .about-cta {
  padding-block-end: var(--bh-space-2xl);
}

@media (max-width: 60rem) {
  .about-values .statement,
  .about-values__copy,
  .about-values__photo,
  .about-values__stats,
  .about-values__disciplines {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .about-hero__copy,
.about-hero__actions {
    grid-column: 1 / span 7;
  }

  .about-hero__card {
    grid-column: 9 / -1;
    height: min(38vh, 20rem);
  }

  .about-values__stats {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .about-story__beat {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .about-story__year,
  .about-story__body {
    grid-column: 1 / -1;
  }

  .about-story__year {
    font-size: clamp(2.8rem, 16vw, 5rem);
  }

  .about-story__year--long {
    font-size: clamp(2rem, 11vw, 3.4rem);
  }
}

@media (max-width: 47.99rem) {
  .site-main--about .about-values {
    min-height: 0;
  }

  .about-hero__copy,
.about-hero__actions,
.about-hero__statement,
.about-hero__card {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .about-hero__card {
    justify-self: start;
    width: min(100%, 16rem);
    height: auto;
    aspect-ratio: 4 / 5;
  }
}

/* Story stage: the first picture starts framed in the flow, grows to the full viewport
   on scroll, then the scrim, the year and the words arrive over the image. No card. ---- */

.about-story__screen {
  position: absolute;
  inset: 0;
  inset-inline: calc(-1 * var(--bh-gutter));
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: clip-path;
}

.about-story__screen .about-story__backdrops {
  inset: 0;
}

.about-story__backdrops::after {
  display: none;
}

.about-story__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background:
    linear-gradient(90deg, rgb(5 3 10 / 82%) 0%, rgb(5 3 10 / 50%) 52%, rgb(5 3 10 / 28%) 100%),
    linear-gradient(180deg, rgb(5 3 10 / 62%) 0%, rgb(5 3 10 / 0%) 30%, rgb(5 3 10 / 0%) 66%, rgb(5 3 10 / 82%) 100%);
}

.about-story.is-animated .about-story__body,
.about-story.is-animated .about-story__beat.is-current .about-story__body {
  max-width: 32rem;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.about-story.is-animated .about-story__title {
  font-size: var(--bh-step-h2);
}

.about-story.is-animated .about-story__copy {
  color: color-mix(in srgb, var(--bh-white) 88%, transparent);
  font-size: var(--bh-step-body-lg);
  line-height: var(--bh-leading-body);
}

.about-story:not(.is-animated) .about-story__screen {
  display: none;
}

/* The title card before the stage no longer holds the page: the framed picture follows it. */
.site-main--about .about-story-intro {
  min-height: 0;
}