
.page--about .about-main { padding: 0 0 80px; }
.about-hero { overflow: hidden; }
.about-hero .research-hero__page-title { color: #fff; }
.page--about .about-main .about-hero > .about-hero__words { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.about-hero__words span { position: absolute; color: #b8e4ff; opacity: .075; font-weight: 800; letter-spacing: -.06em; will-change: transform; }
.about-hero__words span:nth-child(1) { top: 35%; right: -3%; font-size: clamp(180px, 28vw, 430px); }
.about-hero__words span:nth-child(2) { top: 24%; left: 6%; font-size: clamp(35px, 7vw, 100px); }
.about-hero__words span:nth-child(3) { bottom: 12%; left: 40%; font-size: clamp(50px, 10vw, 150px); }
.page--about .about-details { padding-top: clamp(32px, 5vw, 64px); }
.about-details .about-media { margin: 0 0 32px; }
.about-details > .about-tabs { margin: 0 0 36px; }
.about-specialisms { margin-bottom: 40px; }
.about-specialisms h2 { font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
@media (min-width: 431px) {
 .about-hero [data-project-prev] { color: #fff; }
 .about-hero [data-project-prev] img { filter: brightness(0) invert(1); }
}
@media (max-width: 430px) {
 .about-hero { isolation: auto; }
}

/* Match the open editorial sections used on Research and Design Systems. */
.page--about { background: #fff; }
.about-hero .about-download,
.about-hero .about-download:hover {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #fff;
  padding: 0;
  min-height: 0;
  text-decoration: none;
  gap: 8px;
}
.page--about .about-details { max-width: 1200px; }
.page--about .about-details .about-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.about-details .about-specialisms { padding: 45px 0 64px; }
.about-details .about-specialisms h2,
.about-details .about-copy__title {
  font-size: clamp(38px, 5.9vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.045em;
  margin: 0 0 30px;
}
.about-details .about-philosophy__top {
  padding: 40px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.about-details .about-philosophy__rule { display: none; }
.about-details .about-philosophy__quote {
  font-family: Inter, sans-serif;
  font-size: clamp(36px, 5vw, 66px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.045em;
}
.about-details .about-philosophy__column,
.about-details .about-philosophy__section {
  padding: 48px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.about-details .about-philosophy__heading {
  font-family: 'Google Sans Code', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--site-muted);
  margin-bottom: 24px;
}
.about-details .about-philosophy__intro,
.about-details .about-philosophy__summary p,
.about-details .about-philosophy__section > p,
.about-details .about-philosophy__checks,
.about-details .about-philosophy__column ul,
.about-details .about-copy > p {
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.65;
}
.about-details .about-philosophy__lead { font-style: normal; font-weight: 600; }
@media (max-width: 430px) {
  .about-hero .about-download { font-size: 11px; }
  .about-details .about-specialisms { padding-top: 24px; }
}

/* Use the actual shared section layout, rather than the old About cards. */
.page--about .about-details {
  max-width: none;
  padding: 0;
}
.about-details .about-media {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px) 36px;
}
.about-details > .about-tabs {
  margin: 0 0 0 clamp(28px, 7vw, 128px);
}
.about-details .about-section--blue { background: var(--site-blue-pale); }
.about-details .about-section--paper { background: var(--site-paper); }
.about-section-list { margin-top: 34px; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.6; }
.about-section-list ul, ul.about-section-list { padding-left: 22px; }
.about-section-list li { margin-bottom: 14px; }
@media (max-width: 700px) {
  .about-details > .about-tabs { margin-left: 24px; }
}

.about-details .research-position {
  padding-top: clamp(56px, 7vw, 100px);
  padding-bottom: clamp(56px, 7vw, 100px);
}
.page--about .about-main { padding-bottom: 0; }
.about-hero__words span { white-space: nowrap; }
.about-hero__words span:nth-child(1) { top: 42%; right: -8%; font-size: clamp(85px, 16vw, 240px); }
.about-hero__words span:nth-child(2) { top: 25%; left: 6%; font-size: clamp(65px, 10vw, 150px); }
.about-hero__words span:nth-child(3) { bottom: 6%; left: 18%; font-size: clamp(60px, 11vw, 165px); }

.about-hero::after { content: none; }
.about-hero__words span { opacity: .12; }
.about-hero__words span:nth-child(1) { top: 32%; right: -5%; }
.about-hero__words span:nth-child(2) { top: 58%; left: 4%; }
.about-hero__words span:nth-child(3) { top: 80%; bottom: auto; left: 25%; }
.about-details .about-panel > .research-position:first-child {
  padding-top: clamp(30px, 4vw, 52px);
}

/* Spread the decorative phrases across the whole hero. */
.about-hero__words span:nth-child(1) {
  top: 18%; left: 3%; right: auto;
  font-size: clamp(62px, 11vw, 170px);
}
.about-hero__words span:nth-child(2) {
  top: 52%; left: auto; right: 5%;
  font-size: clamp(85px, 14vw, 210px);
}
.about-hero__words span:nth-child(3) {
  top: 86%; left: 4%; right: auto;
  font-size: clamp(55px, 10vw, 150px);
}

.about-details .about-section-list {
  font-size: clamp(13.5px, 1.1625vw, 17.25px);
}

.about-details > .about-tabs {
  background: var(--site-paper);
}

.about-details .research-position { position: relative; overflow: hidden; isolation: isolate; }
.about-section-word {
  position: absolute; z-index: -1; pointer-events: none;
  font-family: Inter, sans-serif; font-weight: 800; line-height: 1;
  letter-spacing: -.065em; color: var(--site-blue); opacity: .055;
  white-space: nowrap; will-change: transform;
}
#panel-skills .research-position:nth-child(1) .about-section-word { top: 50%; left: -4%; font-size: clamp(90px, 19vw, 280px); }
#panel-skills .research-position:nth-child(2) .about-section-word { top: 115%; right: -10%; font-size: clamp(80px, 15vw, 230px); opacity: .075; }
#panel-skills .research-position:nth-child(3) .about-section-word { top: 35%; left: 8%; font-size: clamp(100px, 22vw, 320px); }
#panel-skills .research-position:nth-child(4) .about-section-word { top: 75%; right: -16%; font-size: clamp(75px, 17vw, 260px); }
#panel-skills .research-position:nth-child(5) .about-section-word { top: 40%; left: 3%; font-size: clamp(150px, 32vw, 470px); }
@media (prefers-reduced-motion: reduce) { .about-section-word { transform: none !important; } }

.about-hero h2 em { color: #4da6ff; }

@media (max-width: 430px) {
  .page--about .about-details .about-media {
    width: 100%;
    max-width: none;
    margin: 0 0 28px;
    padding: 0;
  }
  .page--about .about-video--loom,
  .page--about .about-video__embed,
  .page--about .about-video__iframe { border-radius: 0; }
}
