/* Dreamteam About, concept v3. Loaded after about.css; reuses its tags, investors wall and careers section.
   Structure borrowed from osmo.supply and madewithgsap.com (media that grows out of the headline, a dealt deck,
   cards on an arc, a circle that opens the next scene). The look is Dreamteam's. Every pinned scene has a plain
   layout for phones, reduced motion and no JS: the `.is-pinned` class switches the scene on. */

/* ---------- Hero: the photo grows out of the headline, then carries the manifesto ---------- */
.section_about3-hero { background: #fff; }
.about3-hero_sticky { padding: 3rem var(--_typography---padding-section--global) 4rem; }
.about3-hero_title { margin: 0 0 2rem; font-family: var(--_global-tags---h2--font-family); font-size: 2.75rem; font-weight: 500; line-height: 1.02; letter-spacing: -.045em; }
.about3-hero_line { display: block; }
.about3-hero_media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 1.125rem; }
.about3-hero_image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about3-hero_scrim { position: absolute; inset: 0; background: #1c1d1f; opacity: 0; }
.about3-hero_manifesto { max-width: 52rem; margin: 2.5rem 0 0; }
.about3-hero_dream { margin: 0; font-family: var(--_global-tags---h2--font-family); font-size: 2rem; font-weight: 500; line-height: 1.16; letter-spacing: -.04em; }
.about3-hero_dream.is-second { margin-top: 1.25rem; font-family: var(--_global-tags---body--font-family); font-size: 1.25rem; font-weight: 400; line-height: 1.5; letter-spacing: -.011em; opacity: .8; }
.about3-hero_foot { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.5rem; }
.about3-hero_sub { margin: 0; color: var(--base-color-neutral--neutral-dark); font-size: 1.125rem; }

.about3-hero_pin.is-pinned { height: 300vh; }
.is-pinned .about3-hero_sticky { position: sticky; top: 0; height: 100vh; padding: 0; overflow: hidden; }
.is-pinned .about3-hero_title { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0 var(--_typography---padding-section--global); font-size: clamp(2.25rem, 3.6vw, 3.5rem); }
.is-pinned .about3-hero_line { width: 30vw; max-width: 26rem; will-change: transform, opacity; }
.is-pinned .about3-hero_line.is-right { text-align: right; }
.is-pinned .about3-hero_media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; z-index: 1; transform-origin: 50% 50%; will-change: transform; }
.is-pinned .about3-hero_image { object-position: 50% 38%; will-change: transform; }
.is-pinned .about3-hero_manifesto { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(58rem, 86vw); max-width: none; margin: 0; transform: translate(-50%, -50%); color: #fff; text-align: center; pointer-events: none; }
.is-pinned .about3-hero_dream { font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.12; text-wrap: balance; }
.is-pinned .about3-hero_dream.is-second { font-size: 1.375rem; opacity: 1; }
.is-pinned .about3-hero_foot { position: absolute; left: var(--_typography---padding-section--global); bottom: 11rem; margin: 0; will-change: opacity; }

/* ---------- Story: a statement that inks in, and the ribbon ---------- */
.section_about3-story { position: relative; overflow: hidden; background: #fff; }
.about3-story_component { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; padding: 9rem 0 4rem; align-items: start; }
.about3-story_title { margin: 0; }
.about3-story_text { margin: 0; font-family: var(--_global-tags---h2--font-family); font-size: 2.25rem; font-weight: 500; line-height: 1.22; letter-spacing: -.035em; color: var(--base-color-brand--black); }
.about3-ribbon { position: relative; height: 22rem; pointer-events: none; }
.about3-ribbon img { display: block; position: absolute; left: -45vw; top: calc(11rem - 49.3vw); width: 190vw; max-width: none; height: auto; mix-blend-mode: multiply; will-change: transform; }

/* ---------- Founders: a deck of three, dealt out ---------- */
.section_about3-deck { background: #fff; padding-bottom: 6rem; }
.about3-deck_header { max-width: 66rem; margin: 0 auto 3.5rem; padding: 2rem 1.25rem 0; text-align: center; }
.about3-deck_header h2 { margin: 0 0 1rem; }
.about3-deck_cards { display: grid; grid-template-columns: repeat(3, 22rem); justify-content: center; gap: 1.5rem; margin: 0; padding: 0 1.25rem; list-style: none; }
.about3-deck_card { height: 30rem; }
.about3-deck_inner { position: relative; height: 100%; overflow: hidden; border-radius: 1.25rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 1.5rem 3rem rgba(28, 29, 31, .1); transition: transform .2s ease-out, box-shadow .2s ease-out; }
.about3-deck_card.is-gold .about3-deck_inner { background: radial-gradient(90% 60% at 0% 100%, rgba(240, 190, 80, .8), rgba(240, 190, 80, 0) 70%), radial-gradient(70% 70% at 110% 60%, rgba(238, 221, 145, .9), rgba(238, 221, 145, 0) 70%), #faf7ee; }
.about3-deck_card.is-sand .about3-deck_inner { background: radial-gradient(80% 60% at 100% 100%, rgba(254, 154, 140, .45), rgba(254, 154, 140, 0) 70%), #f5f1eb; }
.about3-deck_card.is-coral .about3-deck_inner { background: radial-gradient(90% 60% at 0% 100%, rgba(238, 221, 145, .7), rgba(238, 221, 145, 0) 70%), radial-gradient(70% 80% at 105% 70%, rgba(250, 94, 76, .62), rgba(250, 94, 76, 0) 70%), #fbf3f0; }
.about3-deck_photo { position: absolute; right: -2.5rem; bottom: -2.5rem; height: 74%; width: auto; max-width: none; pointer-events: none; }
.about3-deck_name { position: relative; margin: 0; padding: 1.5rem 1.5rem 0; font-family: var(--_global-tags---body--font-family); font-size: 1.75rem; font-weight: 500; line-height: 1.2; letter-spacing: -.042em; }
.about3-deck_bio { position: relative; max-width: 14.5rem; margin: .75rem 0 0; padding: 0 0 0 1.5rem; color: rgba(0, 0, 0, .64); font-size: 1rem; line-height: 1.45; letter-spacing: -.011em; }
.about3-deck_card .about-tag { left: 1.25rem; bottom: 1.25rem; }
.about3-deck_card .about-tag_inner { font-size: 1.125rem; }
@media (hover: hover) and (pointer: fine) { .about3-deck_card:hover .about3-deck_inner { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 2.25rem 3.5rem rgba(28, 29, 31, .14); } }

.about3-deck_pin.is-pinned { height: 230vh; }
.is-pinned .about3-deck_sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.is-pinned .about3-deck_header { margin-bottom: 0; padding-top: 4.5vh; }
.is-pinned .about3-deck_cards { position: relative; flex: 1; display: block; padding: 0; }
.is-pinned .about3-deck_card { position: absolute; left: 50%; top: 50%; width: 22rem; height: min(30rem, 58vh); will-change: transform; }
.is-pinned .about3-deck_bio { will-change: opacity; }

/* ---------- Team: five cards on an arc ---------- */
.about3 .about-team_pin.is-wheel { height: 320vh; }
.is-wheel .about-team_sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.is-wheel .about-team_title { margin-bottom: 2.5rem; }
.is-wheel .about-team_layout { position: relative; height: calc(var(--w3) * 470 / 414 + 10.5rem); --w3: min(19rem, 36vh); }
.is-wheel .about-team_strip { display: block; }
.is-wheel .about-team_card { position: absolute; left: 50%; top: 0; width: var(--w3); margin-left: calc(var(--w3) / -2); transform-origin: 50% 78rem; will-change: transform, opacity; }
.is-wheel .about-team_caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.is-wheel .about-team_strip .about-tag_inner { font-size: 1.0625rem; }
.about3-wheel_captions { display: none; }
.is-wheel .about3-wheel_captions { display: block; position: absolute; left: 50%; bottom: 0; width: min(23rem, 90vw); height: 7.5rem; transform: translateX(-50%); text-align: center; }
.about3-wheel_caption { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
.about3-wheel_caption h3 { margin: 0 0 .375rem; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.04em; }
.about3-wheel_caption p { margin: 0; color: var(--base-color-neutral--neutral-dark); font-size: 1rem; line-height: 1.45; }
.about3-wheel_dots { display: none; }
.is-wheel .about3-wheel_dots { display: flex; justify-content: center; gap: .25rem; margin-top: 1rem; }
.about3-wheel_dots .about-team_dot::before { width: .375rem; height: .375rem; }

/* ---------- Careers opens with a circle ---------- */
.section_about3-open { background: #1c1d1f; color: #fff; }
.about3-open_sticky { padding: 7rem 1.25rem 2rem; text-align: center; }
.about3-open_circle { display: none; }
.about3-open_title { max-width: 52rem; margin: 0 auto; font-size: 2.625rem; line-height: 1.26; }
.about3-open_pin.is-pinned { height: 220vh; background: #fff; }
.is-pinned .about3-open_sticky { position: sticky; top: 0; height: 100vh; padding: 0; overflow: hidden; display: grid; place-items: center; background: #fff; }
.is-pinned .about3-open_circle { display: block; position: absolute; left: 50%; top: 50%; width: 20vmax; height: 20vmax; margin: -10vmax 0 0 -10vmax; border-radius: 50%; background: #1c1d1f; transform: scale(0); will-change: transform; }
.is-pinned .about3-open_title { position: relative; padding: 0 1.25rem; will-change: transform, opacity; }
.about3 .about-careers_title { display: none; }
.about3 .section_about-careers { padding-top: 1rem; background: linear-gradient(180deg, #1c1d1f 0, rgba(28, 29, 31, 0) 26%, rgba(28, 29, 31, 0) 72%, #1c1d1f 100%), linear-gradient(110deg, #1c1d1f 36%, #303134 90%); }
.about3 .about-careers_text { margin-top: 0; }
.about3 .section_about-investors { padding-bottom: 2rem; }

@media screen and (max-width: 991px) {
  .about3-story_component { grid-template-columns: 1fr; gap: 1.5rem; padding: 5rem 0 2rem; }
  .about3-story_text { font-size: 1.5rem; }
  .about3-ribbon { height: 12rem; }
  .about3-ribbon img { left: -80vw; top: calc(6rem - 67.5vw); width: 260vw; }
  .about3-deck_cards { grid-template-columns: minmax(0, 24rem); }
  .about3-hero_title { font-size: 2.125rem; }
  .about3-hero_dream { font-size: 1.5rem; }
  .about3-hero_foot { flex-wrap: wrap; }
  .about3-open_title { font-size: 1.875rem; }
}