/* A shared, level colour at the join avoids the previous diagonal colour seam. */
.hero::after {
  height: clamp(11rem, 22svh, 20rem);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-ivory-light) 0%, transparent) 0%,
    color-mix(in srgb, var(--brand-ivory-light) 24%, transparent) 28%,
    color-mix(in srgb, var(--brand-ivory-light) 78%, transparent) 66%,
    var(--brand-ivory-light) 96%);
}
.about-section {
  --leadership-size: clamp(8rem, 15.2vw, 17rem);
  --about-top-space: clamp(11rem, 17.4vw, 19.5rem);
  isolation: isolate;
  margin-top: -1px;
  background: linear-gradient(180deg, var(--brand-ivory-light) 0,
    var(--brand-ivory-light) 10rem, var(--brand-cream) 65rem);
}
.about-section > .section-word {
  top: clamp(2rem, 3.8vw, 4.5rem);
  left: calc(max(var(--page-gutter), calc((100vw - 95rem) / 2 + var(--page-gutter))) + 3vw);
  width: min(76vw, 76rem);
  font-size: var(--leadership-size);
  letter-spacing: -.055em;
}
/* Place the dust above the hall, with all readable content in front. */
.about-section .about-stage { z-index: auto; }
.about-visual {
  -webkit-mask-image: linear-gradient(90deg, transparent 3%, rgba(0,0,0,.16) 19%, #000 45%),
    linear-gradient(180deg, transparent 0%, transparent 3%, rgba(0,0,0,.22) 10%, #000 22%, #000 68%, transparent);
  mask-image: linear-gradient(90deg, transparent 3%, rgba(0,0,0,.16) 19%, #000 45%),
    linear-gradient(180deg, transparent 0%, transparent 3%, rgba(0,0,0,.22) 10%, #000 22%, #000 68%, transparent);
}
.leadership-particles {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  pointer-events: none;
  user-select: none;
}
.about-section[data-particle-word] > .section-word,
.expertise-section[data-particle-word] > .section-word {
  opacity: 0;
}
.expertise-section { isolation: isolate; }
.expertise-section > .section-word {
  width: min(88vw, 88rem);
  font-size: clamp(5rem, 11.4vw, 13rem);
  letter-spacing: -.055em;
  text-align: right;
}
/* Dust stays above the background and behind the readable section content. */
.expertise-section > .leadership-particles { z-index: 1; }
@media (max-width: 767px) {
  .hero::after { height: clamp(7rem, 16svh, 11rem); }
  .about-section > .section-word {
    top: clamp(3rem, 12vw, 4.5rem);
    left: var(--page-gutter);
    width: calc(100% - 2 * var(--page-gutter));
    font-size: clamp(3rem, 17.6vw, 6.2rem);
    letter-spacing: -.055em;
  }
  .about-en > .section-word { font-size: clamp(2.25rem, 13.1vw, 4.7rem); }
  .expertise-section > .section-word {
    left: var(--page-gutter);
    right: auto;
    width: calc(100% - 2 * var(--page-gutter));
    font-size: clamp(2rem, 10.2vw, 4.8rem);
  }
  .about-visual {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 3%, rgba(0,0,0,.35) 11%, #000 22%, #000 58%, rgba(0,0,0,.7) 75%, transparent);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 3%, rgba(0,0,0,.35) 11%, #000 22%, #000 58%, rgba(0,0,0,.7) 75%, transparent);
  }
}
/* Reduced motion renders the assembled particle word once, without flight. */

/* Give every decorative word its own air above the editorial content. */
section:has(> .section-word) { isolation: isolate; }
section[data-particle-prepared] { content-visibility: visible; }
/* Retire the original word's scroll animation before sampling its geometry.
   Vision's legacy keyframes otherwise override opacity and shift the old text. */
section[data-particle-prepared] > .section-word {
  animation: none;
  animation-timeline: auto;
  transition: none;
}
section[data-particle-word] > .section-word {
  opacity: 0;
  visibility: hidden;
}
section:has(> .section-word):not(.about-section) {
  --particle-type-size: clamp(5rem, 11.4vw, 13rem);
  --particle-word-top: clamp(3rem, 4vw, 4.5rem);
}
section:has(> .section-word):not(.about-section) > .section-word {
  top: var(--particle-word-top);
  left: max(var(--page-gutter), calc((100vw - 95rem) / 2 + var(--page-gutter)));
  right: auto;
  width: min(calc(100% - 2 * var(--page-gutter)), 88rem);
  transform: none;
  font-size: var(--particle-type-size);
  line-height: 1.1;
  letter-spacing: -.035em;
  text-align: left;
}
section:has(> .section-word):not(.about-section) > .section-word-center { text-align: center; }
section:has(> .section-word):not(.about-section) > .section-word-right { text-align: right; }
.section:has(> .section-word):not(.about-section) {
  padding-top: calc(var(--particle-word-top) + var(--particle-type-size) * 1.1 + 3rem);
}
.contact-section:has(> .section-word) > .contact-inner {
  padding-top: calc(var(--particle-word-top) + var(--particle-type-size) * 1.1 + 3rem);
}
section:has(> .section-word):not(.about-section) > .leadership-particles { z-index: 1; }
section:has(> .section-word):not(.about-section) > .container { z-index: 2; }

/* The profile ends in cream: carry that exact colour into the hall, then
   feather the hall back into the following section's ivory background. */
html .expertise-section .expertise-wash {
  background:
    linear-gradient(180deg, var(--brand-cream) 0%,
      color-mix(in srgb, var(--brand-cream) 94%, transparent) 2%,
      color-mix(in srgb, var(--brand-cream) 55%, transparent) 10%,
      transparent 26%, transparent 78%, var(--brand-ivory-light) 100%),
    linear-gradient(90deg, rgba(247,243,236,.96), rgba(247,243,236,.87) 52%, rgba(247,243,236,.48));
}
html[data-theme="dark"] .expertise-section .expertise-wash {
  background:
    linear-gradient(180deg, var(--brand-cream) 0%,
      color-mix(in srgb, var(--brand-cream) 94%, transparent) 2%,
      color-mix(in srgb, var(--brand-cream) 55%, transparent) 10%,
      transparent 26%, transparent 78%, var(--brand-ivory-light) 100%),
    linear-gradient(90deg, rgba(7,16,29,.97), rgba(7,16,29,.9) 52%, rgba(7,16,29,.58));
}
/* A dust field dissolves at its edges instead of ending at a section boundary. */
.focus-section::before {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -1px;
  left: 0;
  height: clamp(12rem, 24vw, 26rem);
  background: linear-gradient(180deg, transparent 0%,
    color-mix(in srgb, var(--brand-cream) 18%, transparent) 24%,
    color-mix(in srgb, var(--brand-cream) 64%, transparent) 62%,
    var(--brand-cream) 100%);
  content: "";
  pointer-events: none;
}
.perspective-section { border-top: 0; }
section:has(> .section-word):not(.about-section) > .leadership-particles {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 62%, transparent 100%);
}
@media (max-width: 767px) {
  section:has(> .section-word):not(.about-section) {
    --particle-type-size: clamp(2.4rem, 11vw, 5rem);
    --particle-word-top: 3.5rem;
  }
  section:has(> .section-word):not(.about-section) > .section-word {
    text-align: center;
    letter-spacing: -.012em;
  }
  .section:has(> .section-word):not(.about-section) {
    padding-top: calc(var(--particle-word-top) + var(--particle-type-size) * 1.1 + 3.5rem);
  }
  /* Keep the portrait-first compositions, with the particle title above them. */
  .perspective-section:has(> .section-word),
  .collaboration-section:has(> .section-word) { padding-bottom: 0; }
  .expertise-section .expertise-heading { padding-top: 0; }
  .expertise-section .expertise-heading .display-title {
    font-size: clamp(2.1rem, 8.3vw, 3.8rem);
    line-height: 1.08;
    letter-spacing: -.045em;
    text-wrap: balance;
  }
  .expertise-section .expertise-heading .eyebrow {
    font-size: .72rem;
    letter-spacing: .17em;
    line-height: 1.6;
  }
}