/* v9: the top fold is the photo; it grows, dissolves, and the manifesto arrives on a wall of faint text that parts
   around each statement. Notes drop at the end and the wall closes around the Dreamteam mark. One pinned scene.
   Without the pin (phones, tablets, short windows, reduced motion) it is a plain stacked section. */
.section_about9 { background: #fff; }
.about9_sticky { position: relative; display: flex; flex-direction: column; padding: 3rem var(--_typography---padding-section--global, 1.25rem) 4rem; }
.about9_title { order: -1; }
.about9_wall { display: none; }
.about9_title { margin: 0 0 2rem; font-family: var(--_global-tags---h2--font-family); font-size: 2.75rem; font-weight: 600; line-height: 1.06; letter-spacing: -.045em; color: var(--base-color-brand--black); }
.about9_media { overflow: hidden; aspect-ratio: 3 / 2; border-radius: 1.125rem; }
.about9_image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about9_foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.5rem 0 4rem; }
.about9_sub { margin: 0; color: var(--base-color-neutral--neutral-dark); }
.about9_statement { max-width: 50rem; margin: 0 auto 3.5rem; text-align: center; }
.about9_text { margin: 0; font-family: var(--_global-tags---h2--font-family); font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 600; line-height: 1.08; letter-spacing: -.042em; color: var(--base-color-brand--black); text-wrap: balance; }
.about9_statement.is-long .about9_text { font-size: clamp(1.75rem, 2.7vw, 2.625rem); line-height: 1.12; }
.about9_text.is-soft { margin-top: .5rem; color: #8a8d93; }
.about9_statement.is-mark { display: none; }
.about9_notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.about9_note { width: 10.5rem; min-height: 6.5rem; padding: 1rem 1rem 1.25rem; background: #f5edc6; box-shadow: -.125rem 1.25rem 2.25rem rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .12); color: #121212; font-size: 1.0625rem; font-weight: 500; line-height: 1.3; letter-spacing: -.03em; rotate: var(--r); }
.about9_note.is-white { background: #fff; }
.about9_note.is-coral { background: #ffe1dc; }
.about9_note::before { content: ""; display: block; width: 1.25rem; height: 1.25rem; margin-bottom: .6rem; border: 1.5px solid rgba(18, 18, 18, .55); border-radius: .25rem; background: center / 70% no-repeat; transition: background-color .2s ease-out, border-color .2s ease-out; }
.about9_note.is-done::before { border-color: #1c1d1f; background-color: #1c1d1f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3L13 4.5'/%3E%3C/svg%3E"); }
@media screen and (max-width: 767px) {
  .about9_title { font-size: 2.125rem; }
  .about9_note { width: 8.75rem; min-height: 5.5rem; font-size: .9375rem; }
}

/* ---- the pinned scene ---- */
.about9_pin.is-pinned { height: 640vh; }
.is-pinned .about9_sticky { position: sticky; top: 0; display: block; height: 100vh; padding: 0; overflow: hidden; }
.is-pinned .about9_wall { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.is-pinned .about9_media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.is-pinned .about9_title { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0 var(--_typography---padding-section--global, 2.5rem); font-size: clamp(2.25rem, 3.6vw, 3.5rem); pointer-events: none; will-change: transform; }
.is-pinned .about9_line { width: 30vw; max-width: 26rem; will-change: transform, opacity; }
.is-pinned .about9_line.is-right { text-align: right; }
.is-pinned .about9_foot { position: absolute; left: var(--_typography---padding-section--global, 2.5rem); bottom: 2.5rem; margin: 0; will-change: transform, opacity; }
.is-pinned .about9_statement { position: absolute; left: 50%; top: 47%; width: min(52rem, 86vw); margin: 0; opacity: 0; transform: translate(-50%, -50%); will-change: transform, opacity; }
.is-pinned .about9_statement.is-mark { display: block; width: 8rem; }
.is-pinned .about9_statement.is-mark svg { display: block; width: 6rem; height: auto; margin: 0 auto; }
.is-pinned .about9_notes { display: block; position: absolute; inset: 0; pointer-events: none; }
.is-pinned .about9_note { position: absolute; left: var(--x); top: 0; margin-left: -5.25rem; rotate: none; will-change: transform; }