/* About / Studio page — page-level layout on section-shell archetypes. */

/* Hero — full viewport, centered; office atmosphere scoped to hero only */

.section--about-hero {
  position: relative;
  overflow: hidden;

  --about-hero-fade-height: calc(var(--space-12) + var(--space-9) + var(--space-3)); /* 300px */
  --about-hero-bg-crop-right: calc(var(--space-9) + var(--space-5)); /* 120px */

  min-height: 80vh;
  min-height: 80svh;
  justify-content: center;
}

.section--about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: url("/assets/insights/logoholik-office.webp");
  background-size: cover;
  background-position: calc(50% + var(--about-hero-bg-crop-right)) 38%;
  background-repeat: no-repeat;

  opacity: 0.12;

  -webkit-mask-image: linear-gradient(
    to top,
    transparent 0,
    #000 var(--about-hero-fade-height)
  );
  mask-image: linear-gradient(
    to top,
    transparent 0,
    #000 var(--about-hero-fade-height)
  );

  pointer-events: none;
}

.section--about-hero .section-inner {
  position: relative;
  z-index: 1;
}

.section--about-hero .hero-layout {
  margin-inline: auto;
  text-align: center;
}

.section--about-hero .section-title,
.section--about-hero .section-lead {
  margin-inline: auto;
}

/* Desktop — full hero scale (overrides section-shell tablet/mobile jumps) */
.section--about-hero .section-title {
  max-width: 14ch;
  font-size: clamp(2.75rem, 5vw, 5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
}

.section--about-hero .section-lead {
  max-width: 46ch;
  margin-top: clamp(var(--space-7-0), 3vw, var(--space-11-0));
  font-size: clamp(var(--text-lg), 1.7vw, 1.6rem);
  line-height: var(--leading-base);
}

.section--about-hero .hero-cta {
  justify-content: center;
}

/* Tablet + mobile — left-aligned compact hub scale (matches logo library) */
@media (max-width: 1024px) {
  .section--about-hero {
    min-height: 50vh;
    min-height: 50svh;
  }

  .section--about-hero .hero-layout {
    margin-inline: 0;
    text-align: left;
  }

  .section--about-hero .section-title,
  .section--about-hero .section-lead {
    margin-inline: 0;
  }

  .section--about-hero .hero-cta {
    justify-content: flex-start;
  }

  .section--about-hero .section-title {
    max-width: 22ch;
    font-size: clamp(var(--text-3xl), 3.5vw, var(--text-4xl));
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-hero);
  }

  .section--about-hero .section-lead {
    max-width: 48ch;
    margin-top: var(--space-5);
    font-size: clamp(var(--text-base), 1.1vw, var(--text-lg));
    line-height: var(--leading-base);
  }

  .section--about-hero .hero-cta {
    margin-top: var(--space-7);
  }

  /* Practice — title, body, pill stack (tablet + mobile) */
  .section--about-practice .about-editorial--split {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .section--about-practice .about-editorial--split .about-editorial__title-col {
    display: contents;
  }

  .section--about-practice .about-editorial--split .section-title {
    order: 1;
    max-width: 18ch;
    margin-inline: 0;

    text-align: left;
  }

  .section--about-practice .about-editorial--split .about-editorial__body-col {
    order: 2;
    margin-top: var(--space-6);
    padding-top: 0;
    padding-left: 0;

    border-top: none;
    border-left: none;
  }

  .section--about-practice .about-editorial--split .about-editorial__title-col .btn--pill {
    order: 3;
    align-self: flex-start;
    margin-top: var(--space-7);
  }

  .section--about-collaboration .about-editorial--centered {
    margin-inline: 0;

    text-align: left;
  }

  .section--about-collaboration .about-editorial--centered .section-title,
  .section--about-collaboration .about-editorial--centered .section-lead {
    margin-inline: 0;
  }

  .about-pov .btn--pill,
  .about-editorial--media .about-editorial__title-col .btn--pill {
    margin-top: var(--space-7);
  }
}

/* Tablet — larger than mobile compact scale; scales with viewport width */
@media (min-width: 761px) and (max-width: 1024px) {
  .section--about-hero .section-title {
    max-width: 16ch;
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-hero);
  }

  .section--about-hero .section-lead {
    max-width: 32ch;
    margin-top: clamp(var(--space-6), 2.75vw, var(--space-7));
    font-size: clamp(var(--text-xl), 2vw, 1.6rem);
    line-height: var(--leading-base);
  }
}

@media (max-width: 760px) {
  .section--about-hero .section-title {
    font-size: clamp(var(--text-3xl), 5vw, 4.75rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-heading);
  }
}

/* Studio collage — scroll reveal before editorial body */

.section--about-collage {
  /* view() timelines break when an ancestor clips; section-shell defaults to hidden */
  overflow: visible;

  position: relative;
  z-index: 1;

  min-height: auto;
  padding-top: 0;
  padding-bottom: clamp(var(--space-8), 8vw, var(--space-10));
}

.about-collage {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
}

.about-collage__img {
  display: block;
  width: 100%;
  height: auto;

  border-radius: var(--radius-lg);
}

@keyframes about-collage-expand {
  from {
    max-width: var(--container-sm);
  }

  to {
    max-width: var(--container-lg);
  }
}

@supports (animation-timeline: scroll()) {

  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .about-collage {
      animation: about-collage-expand linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }

}

/* Editorial sections — single column on the section-inner left edge. */

.about-editorial {
  width: 100%;
  max-width: var(--container-sm);
}

.about-editorial--split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(var(--space-7), 5vw, var(--space-9));

  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;

  text-align: left;
}

/* Title stacks over its pill, both flush to the column's right edge. The pill
   is pushed to the bottom of the row, so it sits level with the last line of
   body copy in the taller column beside it; the gap is its minimum clearance. */

.about-editorial--split .about-editorial__title-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-7);
}

.about-editorial--split .about-editorial__title-col .btn--pill {
  margin-top: auto;
}

.about-editorial--split .about-editorial__body-col {
  padding-left: clamp(var(--space-7), 5vw, var(--space-9));

  border-left: 1px solid var(--border-soft-color);
}

/* Optical top-align body with large H2 across the split */
.section--about-practice .about-editorial__body-col {
  padding-top: var(--space-3);
}

.section-shell[data-theme="dark"] .about-editorial--split .about-editorial__body-col {
  border-left-color: var(--border-inverse-color);
}

/* About H2 + closing — shared scale (below hero, above prior 4.5rem cap) */

.section--about-practice .about-editorial__title-col .section-title,
.section--about-pov .section-title,
.section--about-evidence .about-editorial__title-col .section-title,
.section--about-collaboration .about-editorial > .section-title,
.section--cta .closing-title {
  font-size: clamp(var(--text-3xl), 2.6vw, 3.5rem);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-lead);
  font-weight: var(--weight-medium);

  text-wrap: balance;
}

.about-editorial--split .section-title {
  max-width: 12ch;
  margin-inline: 0;

  text-align: right;
}

.about-editorial--split .about-body {
  max-width: 40ch;
  margin-top: 0;
  margin-inline: 0;
}

/* Selected clients — white panel widening behind the strip on arrival.
   Mirrors the engagement point-of-view panel; both run off shell-expand.js. */

.section--about-clients {
  /* The shell grows past the inner container, so this band must not clip. */
  overflow: visible;

  padding-top: clamp(var(--space-9), 8vw, var(--space-11));
  padding-bottom: clamp(var(--space-9), 8vw, var(--space-11));
}

.about-clients-panel {
  position: relative;

  --about-clients-panel-padding: clamp(var(--space-8), 6vw, var(--space-10));

  /* Ends flush with the editorial content width of the bands above and below. */
  width: min(100%, var(--container-lg));
  margin-inline: auto;

  padding-block: calc(clamp(var(--space-8), 6vw, var(--space-10)) * 0.8);
  padding-inline: var(--about-clients-panel-padding);
}

.about-clients-panel::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: 0;

  width: var(--container-md-lg);
  max-width: 100%;

  background: var(--bg-signal);
  border-radius: var(--radius-sm);

  transform: translateX(-50%);
  transition: width 1215ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section--about-clients.is-expanded .about-clients-panel::before {
  width: var(--container-lg);
}

.about-clients-panel__inner {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: var(--container-md-lg);
  margin-inline: auto;

  /* Light content: the panel is signal blue while the band around it stays light. */
  color: var(--text-inverse);
}

/* Centered heading, no signal rule */

.section--about-clients .client-logos__header {
  text-align: center;
}

.section--about-clients .client-logos__header .section-title {
  max-width: none;
  margin-inline: auto;

  /* One step up the scale from the shared strip heading. */
  font-size: clamp(var(--text-lg), 3vw, var(--text-lg-plus));
}

.section--about-clients .client-logos__header .section-title::after {
  content: none;
}

/* Marks sit on the signal panel, so they go white rather than the mineral-soft
   tone the dark bands use. */

.section--about-clients .client-logos {
  --client-logos-mark: var(--white);
}

@media (max-width: 1024px) {

  .about-clients-panel {
    overflow-x: clip;
  }

  .section--about-clients .client-logos {
    container-type: normal;

    --client-logos-gap: var(--space-7);
    --client-logos-slot: calc((100vw - var(--section-padding-x)) / 3.5);
  }

  .section--about-clients .client-logos__marquee {
    width: calc(100% + (2 * var(--about-clients-panel-padding)));
    margin-inline: calc(-1 * var(--about-clients-panel-padding));

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .section--about-clients .client-logos__marquee::-webkit-scrollbar {
    display: none;
  }

  .section--about-clients .client-logos__grid {
    width: max-content;
    margin-inline: 0;
    padding-inline: var(--about-clients-panel-padding);

    scroll-snap-type: x mandatory;
  }

  .section--about-clients .client-logos__item {
    flex: 0 0 auto;
    justify-content: flex-start;

    scroll-snap-align: start;
  }

  .section--about-clients .client-logos__mark {
    width: calc(var(--logo-w) / 130 * var(--client-logos-slot) * 0.9504);
    height: calc(var(--logo-h) / 130 * var(--client-logos-slot) * 0.9504);
    max-height: 2.97rem;

    mask-position: left center;
    -webkit-mask-position: left center;
  }

  [data-client-logos-section].client-logos--marquee .client-logos__marquee {
    overflow: hidden;
  }

  [data-client-logos-section].client-logos--marquee .client-logos__grid {
    padding-inline: 0;

    scroll-snap-type: none;

    animation: client-logos-marquee var(--client-logos-marquee-duration, 32s) linear infinite;
    will-change: transform;
  }

}

/* Evidence variant — title and body stacked left, media alongside, no divider */

.about-editorial--media {
  display: grid;

  /* 45:55 — the media column keeps the wider share so the fully open circle has
     room to grow without the square's edges reaching it. */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center; /* text block and photograph share one horizontal centerline */
  gap: clamp(var(--space-7), 5vw, var(--space-9));

  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;

  text-align: left;
}

.about-editorial--media .about-editorial__title-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-editorial--media .section-title {
  max-width: 22ch;
  margin-inline: 0;

  text-align: left;
}

.about-editorial--media .about-body {
  max-width: min(52ch, 100%);
  margin-inline: 0;
}

.about-editorial--media .about-editorial__title-col .btn--pill {
  margin-top: clamp(var(--space-7), 4vw, var(--space-8));
}

.about-editorial__media-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Circular mask on the dark band — no frame, no fill.
   The mask starts tight on the book stack and widens 30% on scroll, revealing
   more of the square photograph. The image never moves or resizes: only the
   mask circle grows, concentrically, so it opens on all four sides at once. */

.about-media {
  width: 100%;

  /* Sized so the fully open circle stays inside the square: the mask end below
     is just under 100%, so the photograph's edges never cut the circle flat.
     min() keeps the square inside its grid column on wide viewports. */
  max-width: min(clamp(19.3rem, 43.2vw, 37.4rem), 100%);
  margin: 0;
}

.about-media__img {
  /* Circle diameter, relative to image width. The start is set so it keeps its
     absolute size while the box grows; the end stays under 100%, so the square
     never clips the circle. Together they open the mask by ~56%. */
  --about-media-mask-start: 62.8%;
  --about-media-mask-end: 98%;

  display: block;
  width: 100%;
  height: auto;

  /* Base state is the revealed circle, so the photograph is never cropped away
     when the scroll timeline is unavailable (see @supports block below). */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 99%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 99%, transparent 100%);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--about-media-mask-end) var(--about-media-mask-end);
  mask-size: var(--about-media-mask-end) var(--about-media-mask-end);
}

@keyframes about-media-reveal {
  from {
    -webkit-mask-size: var(--about-media-mask-start) var(--about-media-mask-start);
    mask-size: var(--about-media-mask-start) var(--about-media-mask-start);
  }

  to {
    -webkit-mask-size: var(--about-media-mask-end) var(--about-media-mask-end);
    mask-size: var(--about-media-mask-end) var(--about-media-mask-end);
  }
}

@supports (animation-timeline: scroll()) {

  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .about-media__img {
      animation: about-media-reveal linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 45%;
    }
  }

}

/* view() timelines break when an ancestor clips; section-shell defaults to
   hidden, so the mask reveal below needs the band open. */

.section--about-evidence {
  overflow: visible;
  overflow-x: clip;
}

/* Practice — close the light intro band */

.section--about-practice {
  padding-bottom: clamp(var(--space-11), 14vw, var(--space-13));
}

/* POV — dark editorial opener */

.section--about-pov {
  padding-top: calc(var(--section-archetype-padding-y) * 0.5);
  padding-bottom: calc(var(--section-archetype-padding-y) * 1.5 * 1.3);
}

.about-pov {
  display: flow-root;

  width: 100%;
  max-width: var(--container-md);
  margin-inline: auto;

  text-align: center;
}

.about-pov__mark {
  display: flex;
  justify-content: center;

  margin-bottom: var(--space-9);
}

.about-pov__mark .logo-mark {
  width: var(--space-14-0);
  height: var(--space-14-0);

  color: var(--signal);
}

.about-pov__mark .logo-part {
  transition: none;
}

.section--about-pov .section-title {
  max-width: none;
  margin-inline: auto;

  text-align: center;
}

.about-pov .section-lead {
  margin-inline: auto;
}

.about-pov > p:not(.section-lead) {
  max-width: 52ch;
  margin-top: var(--space-5);
  margin-inline: auto;
}

/* Inline-flex pill centers off the band's own text-align. */

.about-pov .btn--pill {
  margin-top: clamp(var(--space-7), 5vw, var(--space-8));
}

/* Collaboration — centered opener, then specialist network in an expanding panel */

.section--about-collaboration {
  overflow: visible;
}

.section--about-collaboration .section-title {
  max-width: 22ch;
}

.about-network-panel {
  position: relative;

  width: min(100%, var(--container-lg));
  margin-inline: auto;
  margin-top: clamp(var(--space-9), 8vw, var(--space-11));

  padding-block: calc(clamp(var(--space-8), 6vw, var(--space-10)) * 0.8);
  padding-inline: clamp(var(--space-8), 6vw, var(--space-10));
}

.about-network-panel::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: 0;

  width: var(--container-md-lg);
  max-width: 100%;

  background: var(--bg-surface);
  border-radius: var(--radius-sm);

  transform: translateX(-50%);
  transition: width 1215ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section--about-collaboration.is-expanded .about-network-panel::before {
  width: var(--container-lg);
}

.about-network-panel__inner {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: var(--container-md-lg);
  margin-inline: auto;

  color: var(--text-primary);
}

.about-editorial--centered {
  max-width: var(--container-md);
  margin-inline: auto;

  text-align: center;
}

.about-editorial--centered .section-title,
.about-editorial--centered .section-lead {
  margin-inline: auto;
}

.about-network {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 75fr);
  gap: clamp(var(--space-7), 5vw, var(--space-9));
  align-items: start;

  width: 100%;
  margin-inline: auto;

  text-align: left;
}

.about-network__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

.about-network__copy {
  max-width: 38ch;
  margin: 0;

  font-size: clamp(var(--text-base), 1.2vw, var(--text-lg));
  line-height: var(--leading-relaxed);

  text-wrap: pretty;
}

.about-network__title {
  margin: 0;

  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);
}

.about-network__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);

  width: 100%;
  margin: 0;
  padding: 0;

  list-style: none;
  text-align: left;
}

.about-network__item {
  padding-block: var(--space-4);
  padding-inline: 0;

  font-size: var(--text-sm);
  line-height: var(--leading-snug);

  color: inherit;

  text-wrap: pretty;
}

.about-network__item:nth-child(n + 3) {
  border-top: 1px solid var(--divider-light);
}

.about-network__name {
  font-weight: var(--weight-medium);
}

.about-network a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-strong-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;

  transition: text-decoration-color var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .about-network a:hover {
    text-decoration-color: currentColor;
  }
}

.about-network a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.about-network__separator {
  margin-inline: var(--space-2);
  opacity: 0.3;
}

.about-network__role {
  color: var(--text-secondary);
}

.about-body {
  max-width: 66ch;
  margin-top: var(--space-6);
}

.about-body p {
  margin: 0;

  font-size: clamp(var(--text-base), 1.2vw, var(--text-lg));
  line-height: var(--leading-relaxed);

  text-wrap: pretty;
}

.about-body p + p {
  margin-top: var(--space-5);
}

/* Inline prose links — mirrors .article-body a, muted rule that firms on hover */

.about-body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-strong-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;

  transition: text-decoration-color var(--transition-base);
}

.section-shell[data-theme="dark"] .about-body a {
  text-decoration-color: var(--text-inverse-muted);
}

@media (hover: hover) and (pointer: fine) {
  .about-body a:hover {
    text-decoration-color: currentColor;
  }
}

.about-body a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Closing CTA — mirrors .hero-cta so primary + secondary share one row */

.about-closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);

  margin-top: var(--space-7);
}

/* closing.css gives a lone .closing-content .btn--pill its own margin-top. Here
   the row owns that spacing, so the inherited margin would apply it twice and
   push the pill's margin box off center against the text link. Equal
   specificity, resolved by about.css loading after closing.css. */

.about-closing-actions .btn--pill {
  margin-top: 0;
}

/* Tablet + mobile */

@media (max-width: 820px) {

  .about-network {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .about-closing-actions {
    justify-content: flex-start;
  }

  .about-editorial--split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .about-editorial--split .about-editorial__title-col {
    align-items: flex-start;
    gap: var(--space-6);
  }

  /* Single column here: nothing to align against, so the pill follows the title. */

  .about-editorial--split .about-editorial__title-col .btn--pill {
    margin-top: 0;
  }

  .about-editorial--split .section-title {
    max-width: 18ch;

    text-align: left;
  }

  .about-editorial--split .about-editorial__body-col {
    padding-top: var(--space-6);
    padding-left: 0;

    border-top: 1px solid var(--border-soft-color);
    border-left: none;
  }

  .section-shell[data-theme="dark"] .about-editorial--split .about-editorial__body-col {
    border-top-color: var(--border-inverse-color);
  }

}

@media (min-width: 761px) and (max-width: 1024px) {

  .about-editorial--split .about-body {
    max-width: 64ch;
  }

  .section--about-evidence .about-editorial--media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--space-5), 3vw, var(--space-7));
    align-items: center;
  }

  .section--about-evidence .about-editorial__media-col {
    justify-content: flex-end;
  }

  .section--about-evidence .about-media {
    width: min(100%, clamp(14.5rem, 54vw, 20.5rem));
    max-width: none;
    margin-inline-end: calc(-1 * var(--section-padding-x));
  }

  .about-network__copy {
    max-width: 56ch;
  }

  .about-network__list {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  }

}

@media (max-width: 760px) {

  .about-editorial {
    max-width: none;
    margin-inline: 0;
  }

  .about-editorial--split .about-body,
  .about-editorial--media .about-body {
    max-width: none;
  }

  .about-pov {
    max-width: none;
    margin-inline: 0;

    text-align: left;
  }

  .about-pov__mark {
    justify-content: flex-start;

    margin-bottom: var(--space-8);
  }

  .about-pov__mark .logo-mark {
    width: var(--space-12-0);
    height: var(--space-12-0);
  }

  .section--about-pov .section-title,
  .about-pov .section-lead,
  .about-pov > p:not(.section-lead) {
    max-width: none;
    margin-inline: 0;

    text-align: left;
  }

  .about-editorial--media {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .section--about-evidence .about-editorial--media {
    display: flex;
    flex-direction: column;
  }

  .section--about-evidence .about-editorial__media-col {
    order: -1;
    justify-content: flex-start;
  }

  .section--about-evidence .about-media {
    width: min(100%, clamp(14.5rem, 72vw, 20.5rem));
    max-width: none;
    margin-inline-start: calc(-1 * var(--section-padding-x));
  }

  .about-editorial--media .section-title {
    max-width: 18ch;
  }

  .about-editorial--media .about-editorial__media-col {
    justify-content: flex-start;
  }

  .about-media {
    width: 100%;
    max-width: min(23.8rem, 100%);
    margin-inline-end: 0;
  }

  /* Mobile section rhythm — tighter band spacing */
  .section--about-hero {
    padding-bottom: var(--space-7);
  }

  .section--about-collage {
    padding-bottom: var(--space-7);
  }

  .section--about-practice {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }

  .section--about-pov {
    padding-top: var(--space-6);
    padding-bottom: var(--space-7);
  }

  .section--about-evidence {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }

  .section--about-clients {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }

  .section--about-collaboration {
    padding-top: var(--space-7);
    padding-bottom: var(--space-6);
  }

  .section--about-collaboration ~ .section--cta {
    padding-top: var(--space-7);
  }

  .about-clients-panel {
    padding-block: calc(var(--space-7) * 0.8);
  }

  .about-network-panel {
    margin-top: var(--space-6);
    padding-top: calc(var(--space-7) * 0.8);
    padding-bottom: var(--space-5);
    padding-inline: var(--space-6);
  }

  .about-network__copy {
    max-width: none;
  }

  .about-network {
    gap: var(--space-5);
  }

  .about-network__list {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  }

  .section--about-hero .section-lead {
    max-width: none;
  }

  .section--about-practice .about-editorial__title-col .section-title,
  .section--about-pov .section-title,
  .section--about-evidence .about-editorial__title-col .section-title,
  .section--about-collaboration .about-editorial > .section-title,
  .section--cta .closing-title {
    font-size: clamp(var(--text-2xl), 5.5vw, var(--text-3xl));
    line-height: var(--leading-heading);
  }

}

@media (max-width: 560px) {

  .about-network__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-network__item:nth-child(n + 3) {
    border-top: none;
  }

  .about-network__item:not(:first-child) {
    border-top: 1px solid var(--divider-light);
  }

}

@media (prefers-reduced-transparency: reduce) {

  .section--about-hero::before {
    -webkit-mask-image: none;
    mask-image: none;
  }

}

@media (prefers-reduced-motion: reduce) {

  .about-collage {
    animation: none;
  }

  /* Panel opens straight to its end width. */

  .about-clients-panel::before {
    width: var(--container-lg);
    transition: none;
  }

  .about-network-panel::before {
    width: var(--container-lg);
    transition: none;
  }

}