/* Rejouice About sequence with Paak identity, philosophy and static artwork.
   Capability panels now live on Services. */
.inner-page--about {
  --about-display: clamp(
    27.0434px,
    calc(27.0434px + (65.1067 - 27.0434) * (100vw - 390px) / (1512 - 390)),
    65.1067px
  );
  --about-chapter-type: clamp(
    32px,
    calc(32px + (59.3768 - 32) * (100vw - 390px) / (1512 - 390)),
    59.3768px
  );
  --about-opening-height: 90svh;
  --about-reference-gap: 20px;
  --about-opening-bottom: 100px;
  --about-first-line: 16.1329%;
  --about-founder-top: clamp(
    75.9295px,
    calc(75.9295px + 261.0705 * (100vw - 390px) / 1122),
    337px
  );
  --about-founder-bottom: clamp(
    56.167px,
    calc(56.167px + 163.833 * (100vw - 390px) / 1122),
    220px
  );
  --about-philosophy-index: clamp(
    80px,
    calc(80px + 100 * (100vw - 390px) / 1122),
    180px
  );
  --about-logo-before: clamp(
    48px,
    calc(48px + 32 * (100vw - 390px) / 1122),
    80px
  );
}
.inner-page--about .about-opening {
  min-height: var(--about-opening-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--paak-lower-gutter) var(--about-opening-bottom);
}
.inner-page--about .about-opening-statement {
  font-size: var(--about-display);
  line-height: 1.0806;
  letter-spacing: -0.01905em;
  text-indent: var(--about-first-line);
  text-wrap: wrap;
}
.about-studio-details {
  margin: 0 var(--paak-lower-gutter);
  padding: 16px 0 140px;
  border-top: 1px solid var(--paak-border-on-light);
  align-items: start;
}
.inner-page--about .about-studio-details > h2 {
  grid-column: 1 / span 6;
  font-size: var(--paak-type-label);
  line-height: 1.2;
  letter-spacing: var(--paak-tracking-body);
}
.about-studio-summary {
  grid-column: 7 / span 4;
  font-size: var(--paak-type-body);
  line-height: 1.2;
}
.about-studio-services {
  padding: 0;
  list-style: none;
  font-size: var(--paak-type-label);
  line-height: var(--paak-leading-body);
  letter-spacing: var(--paak-tracking-body);
}
.about-studio-services li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--paak-lower-gap);
}
.about-studio-services span {
  white-space: nowrap;
}
.about-studio-services a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  text-decoration: none;
}
.about-studio-services a:hover {
  text-decoration: underline;
}
.about-service-break {
  display: none;
}
.about-studio-working {
  margin-top: 64px;
  max-width: 40ch;
}
.about-studio-reach {
  margin-top: var(--paak-lower-copy-gap);
  color: var(--paak-muted-on-light);
}
.about-signature {
  margin-top: var(--about-logo-before);
  padding: 0 var(--paak-lower-gutter);
  height: 31.485615vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-signature img {
  width: 90%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: invert(1);
}
.about-philosophy {
  margin: 0 var(--paak-lower-gutter);
  padding: 35px 0 100px;
  border-top: 1px solid var(--paak-border-on-light);
  align-items: start;
}
.inner-page--about .about-philosophy > h2 {
  grid-column: 1 / -1;
  margin-bottom: var(--paak-lower-row-space);
  font-size: var(--paak-type-label);
  line-height: 1.2;
  letter-spacing: var(--paak-tracking-body);
}
.about-philosophy-notes {
  grid-column: 1 / -1;
  container-type: inline-size;
  font-size: var(--paak-type-body);
  line-height: var(--paak-leading-body);
  letter-spacing: var(--paak-tracking-body);
}
.about-philosophy-notes article {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--about-reference-gap);
  align-items: start;
  padding: var(--paak-lower-row-space) 0;
}
.about-philosophy-notes article > div {
  display: contents;
}
.about-philosophy-notes article + article {
  border-top: 1px solid var(--paak-border-on-light);
}
.inner-page--about .about-philosophy-number {
  grid-column: 1 / span 3;
  font-size: min(var(--about-philosophy-index), 16cqi);
  line-height: 0.82;
  letter-spacing: -0.06em;
  white-space: nowrap;
}
.inner-page--about .about-philosophy-notes h3 {
  grid-column: 4 / span 3;
  font-size: var(--paak-type-section);
  line-height: 1.1;
  letter-spacing: var(--paak-tracking-heading);
}
.about-philosophy-notes article div > p {
  grid-column: 8 / span 4;
  margin: 0;
  max-width: none;
}
.about-philosophy-notes article > *,
.about-philosophy-notes article div > * {
  min-width: 0;
}
.about-philosophy-image {
  margin: 0 var(--paak-lower-gutter);
  padding-bottom: clamp(
    93.6117px,
    calc(93.6117px + 190.3883 * (100vw - 390px) / 1122),
    284px
  );
}
.about-philosophy-image > div {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
  background: var(--paak-surface-light);
}
.about-philosophy-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-belief {
  display: block;
  padding: 0 var(--paak-lower-gutter);
  font-size: var(--about-display);
  line-height: 1.0806;
  letter-spacing: -0.01905em;
  text-indent: var(--about-first-line);
}
.inner-page--about .about-belief :is(h2, p) {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-indent: 0;
  text-wrap: wrap;
}
.about-founder {
  padding: var(--about-founder-top) var(--paak-lower-gutter)
    var(--about-founder-bottom);
  align-items: start;
}
.about-founder-label {
  grid-column: 1 / span 2;
  align-self: stretch;
  font-size: var(--paak-type-label);
  line-height: var(--paak-leading-body);
  letter-spacing: var(--paak-tracking-body);
}
.about-founder-label > span {
  display: block;
  position: sticky;
  bottom: 0;
  width: max-content;
  padding-bottom: 40px;
  margin-bottom: -40px;
}
.about-founder > figure {
  grid-column: 3 / span 5;
  overflow: hidden;
}
.about-founder > figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* The supplied portrait includes a narrow black scan edge. */
  transform: scale(1.025);
}
.about-founder-copy {
  grid-column: 9 / span 3;
  font-size: var(--paak-type-body);
  line-height: var(--paak-leading-body);
  letter-spacing: var(--paak-tracking-body);
}
.about-founder-copy > p + p {
  margin-top: var(--paak-lower-copy-gap);
}
.about-founder-credit {
  margin-top: 4rem;
  font-size: var(--paak-type-label);
  line-height: var(--paak-leading-body);
  letter-spacing: var(--paak-tracking-body);
}
.inner-page--about .about-founder-credit h2 {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.about-founder-credit p {
  color: var(--paak-muted-on-light);
}
.about-founder-copy .inner-action {
  margin-top: 4rem;
}
.about-founder-link {
  gap: 0.35em;
}
.about-founder-link svg {
  display: block;
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
}
.about-next {
  margin: 0 var(--paak-lower-gutter);
  padding: 3rem 0 5rem;
  border-top: 1px solid var(--paak-border-on-light);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--paak-lower-gap);
  font-size: var(--paak-type-heading);
}
.about-next a {
  display: inline-flex;
  min-height: var(--paak-hit-target);
  align-items: center;
}
@media (width >= 1512px) {
  .inner-page--about {
    --about-display: calc(65.1067px * var(--scale));
    --about-chapter-type: calc(59.3768px * var(--scale));
    --about-founder-top: calc(337px * var(--scale));
    --about-founder-bottom: calc(220px * var(--scale));
    --about-philosophy-index: calc(180px * var(--scale));
    --about-logo-before: calc(80px * var(--scale));
  }
}
@media (width < 1024px) and (width >= 768px) {
  .about-founder-copy {
    grid-column: 9 / -1;
    line-height: var(--paak-leading-body);
    letter-spacing: var(--paak-tracking-body);
  }
}
@media (width < 768px) {
  .inner-page--about {
    --about-opening-height: 90svh;
    --about-opening-bottom: 62.4078px;
    --about-first-line: 0%;
    --about-reference-gap: 4.16052px;
  }
  .about-studio-details {
    padding-top: 16px;
    padding-bottom: 100px;
  }
  .inner-page--about .about-studio-details > h2 {
    grid-column: 1 / span 3;
    font-size: var(--paak-type-label);
  }
  .about-studio-summary {
    grid-column: 4 / -1;
  }
  .about-studio-services li {
    align-items: start;
    grid-template-columns: 2.25em minmax(0, 1fr);
    column-gap: 8px;
  }
  .about-studio-services li + li {
    margin-top: 10px;
  }
  .about-studio-services a {
    align-items: flex-start;
    min-height: var(--paak-hit-target);
  }
  .about-studio-services .about-service-label {
    white-space: normal;
  }
  .about-service-break {
    display: initial;
  }
  .about-studio-working {
    margin-top: 40px;
  }
  .about-signature {
    height: 33.2572vw;
  }
  .about-signature img {
    width: 100%;
  }
  .about-philosophy {
    padding-top: 11.5px;
    padding-bottom: 58.2473px;
  }
  .about-philosophy-notes {
    line-height: var(--paak-leading-body);
    letter-spacing: var(--paak-tracking-body);
  }
  .about-philosophy-notes article {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 24px;
  }
  .inner-page--about .about-philosophy-number {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    font-size: min(var(--about-philosophy-index), 24cqi);
  }
  .inner-page--about .about-philosophy-notes h3 {
    grid-column: 3 / -1;
    grid-row: 1;
  }
  .about-philosophy-notes article div > p {
    grid-column: 3 / -1;
    grid-row: 2;
  }
  .about-founder {
    row-gap: 20.8026px;
  }
  .about-founder-label {
    display: none;
    line-height: var(--paak-leading-body);
    letter-spacing: var(--paak-tracking-body);
    font-size: var(--paak-type-label);
  }
  .about-founder > figure img {
    aspect-ratio: 1;
    object-position: center 25%;
  }
  .about-founder-copy {
    line-height: var(--paak-leading-body);
    letter-spacing: var(--paak-tracking-body);
  }
  .about-founder-label,
  .about-founder > figure,
  .about-founder-copy {
    grid-column: 1 / -1;
  }
  .about-founder-copy .inner-action {
    margin-top: 2rem;
  }
  .about-next {
    padding-bottom: 3rem;
  }
}

/* Match the reference light surface and narrow grid gaps through About content. */
.inner-page--about main,
.inner-page--about .inner-header {
  background: var(--paak-surface-light);
}
.inner-page--about .inner-grid {
  column-gap: var(--about-reference-gap);
}