/* Dreamteam About page. Sits on top of the staging site's stylesheet and reuses its tokens.
   Motion rules: scroll-linked motion is scrubbed 1:1 on transform and opacity only; UI feedback is ~200ms ease-out;
   the hero intro plays once per session; every animation has a still for reduced motion and for no JS. */

.about-hero_title,
.about-hero_sheet-title,
.about-hero_memo-title,
.about-team_name { font-family: var(--_global-tags---h2--font-family); }

/* ---------- Hero ---------- */
.section_about-hero { position: relative; overflow: clip; }
.about-hero_header { display: flex; justify-content: space-between; align-items: flex-start; gap: 3rem; padding-top: 3.9rem; }
.about-hero_title { max-width: 31.5rem; margin: 0; font-size: 2.5rem; font-weight: 500; line-height: 1.02; letter-spacing: -.04em; }
.about-hero_lede { max-width: 34.6rem; margin: 0; color: var(--base-color-neutral--neutral-dark); font-size: 1.25rem; line-height: 1.6; letter-spacing: -.011em; }

.about-hero_pin { position: relative; padding: 2.5rem 0 4rem; }
.about-hero_sticky { display: grid; place-items: center; padding: 0 1rem; }
.about-hero_pin.is-pinned { height: 190vh; padding: 0; }
.about-hero_pin.is-pinned .about-hero_sticky { position: sticky; top: 0; height: 100vh; }

.about-hero_stage { container-type: inline-size; position: relative; width: min(55.75rem, 100%, 108vh); aspect-ratio: 892 / 675; }
.about-hero_canvas { --u: calc(100cqw / 892); position: absolute; inset: 0; }

.about-hero_halo { position: absolute; border-radius: 50%; pointer-events: none; will-change: opacity; }
.about-hero_halo.is-gold { left: calc(-170 * var(--u)); top: calc(-80 * var(--u)); width: calc(760 * var(--u)); height: calc(700 * var(--u)); background: radial-gradient(closest-side, rgba(238, 221, 145, .62), rgba(238, 221, 145, 0)); }
.about-hero_halo.is-coral { left: calc(250 * var(--u)); top: calc(-140 * var(--u)); width: calc(900 * var(--u)); height: calc(900 * var(--u)); background: radial-gradient(closest-side, rgba(254, 154, 140, .5), rgba(254, 154, 140, 0)); opacity: .55; }

.about-hero_piece { position: absolute; will-change: transform; }
.about-hero_piece.is-back { left: calc(331 * var(--u)); top: calc(28 * var(--u)); width: calc(519 * var(--u)); height: calc(583 * var(--u)); rotate: 5deg; background: #f7f1eb; border: .5px solid rgba(0, 0, 0, .16); box-shadow: calc(14 * var(--u)) calc(22 * var(--u)) calc(49 * var(--u)) rgba(0, 0, 0, .05); filter: blur(calc(2 * var(--u))); }

.about-hero_piece.is-memo { left: calc(21 * var(--u)); top: calc(205 * var(--u)); width: calc(346 * var(--u)); height: calc(241 * var(--u)); rotate: -11.8deg; padding: calc(10 * var(--u)) calc(14 * var(--u)); background: #f5edc6; border: .5px solid rgba(0, 0, 0, .16); box-shadow: calc(-2 * var(--u)) calc(23 * var(--u)) calc(37 * var(--u)) rgba(0, 0, 0, .09); filter: blur(calc(.9 * var(--u))); color: #121212; overflow: hidden; }
.about-hero_memo-title { font-size: calc(27 * var(--u)); font-weight: 600; line-height: 1.28; letter-spacing: -.03em; }
.about-hero_memo-line { display: flex; align-items: center; gap: calc(8 * var(--u)); margin: calc(8 * var(--u)) 0 0; font-size: calc(21 * var(--u)); line-height: 1.5; letter-spacing: -.045em; white-space: nowrap; }
.about-hero_memo-line span { color: rgba(18, 18, 18, .6); }
.about-hero_memo-line img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin-right: calc(10 * var(--u)); }
.about-hero_memo-rule { height: 1px; margin-top: calc(9 * var(--u)); background: rgba(0, 0, 0, .14); }
.about-hero_memo-line.is-check { margin-top: calc(6 * var(--u)); }

.about-hero_piece.is-tape { left: calc(112 * var(--u)); top: calc(127 * var(--u)); width: calc(92 * var(--u)); height: calc(34 * var(--u)); rotate: -10.4deg; background: rgba(29, 69, 129, .13); }

.about-hero_piece.is-sheet { left: calc(220 * var(--u)); top: calc(51 * var(--u)); width: calc(543 * var(--u)); height: calc(624 * var(--u)); }
/* Red reads as shadow, never as a fill: a coral edge that the white sheet casts to its right. */
.about-hero_edge { position: absolute; right: calc(-26 * var(--u)); top: calc(150 * var(--u)); width: calc(40 * var(--u)); height: calc(440 * var(--u)); background: linear-gradient(180deg, rgba(254, 154, 140, 0), rgba(254, 154, 140, .9) 34%, #f92810 100%); filter: blur(calc(1.2 * var(--u))); }
.about-hero_paper { position: absolute; inset: 0; padding: calc(126 * var(--u)) calc(133 * var(--u)) 0; background: linear-gradient(180deg, #fff 10%, rgba(255, 255, 255, .96) 79%); border: .5px solid rgba(0, 0, 0, .16); box-shadow: calc(14 * var(--u)) calc(21 * var(--u)) calc(47 * var(--u)) rgba(0, 0, 0, .05); }
.about-hero_sheet-title { margin: 0 0 calc(52 * var(--u)); font-size: calc(44 * var(--u)); font-weight: 600; line-height: 1.28; letter-spacing: -.03em; text-align: center; color: var(--base-color-brand--black); }
.about-hero_sheet-text { isolation: isolate; margin: 0; color: #121212; font-size: calc(21.1 * var(--u)); font-weight: 600; line-height: 1.5; letter-spacing: -.014em; }
.about-hero_sheet-text.is-second { margin-top: calc(30 * var(--u)); color: #494c52; font-weight: 400; }
.about-hero_sheet-text mark { position: relative; background: none; color: inherit; white-space: nowrap; }
.about-hero_sheet-text mark::before { content: ""; position: absolute; z-index: -1; inset: 8% -3% 4%; background: #eedd91; border-radius: calc(3 * var(--u)); transform: scaleX(var(--m, 1)); transform-origin: 0 50%; }

.about-hero_piece.is-clip { left: calc(532 * var(--u)); top: calc(1 * var(--u)); width: calc(30 * var(--u)); height: calc(90 * var(--u)); rotate: 28.7deg; max-width: none; }
/* The clip is drawn twice. The copy under the page shows its inner tongue; the copy on top has the tongue cut out,
   so once the clip is on, the tongue is behind the paper the way a real clip grips. */
.about-hero_piece.is-clip { filter: drop-shadow(calc(1 * var(--u)) calc(2 * var(--u)) calc(1.5 * var(--u)) rgba(0, 0, 0, .22)); }
.about-hero_piece.is-clip:not(.is-under) { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 14% 30%, 52% 30%, 52% 86%, 14% 86%, 14% 30%); }

.about-hero_piece.is-tile { left: calc(155 * var(--u)); top: calc(363 * var(--u)); width: calc(98 * var(--u)); height: calc(98 * var(--u)); padding: calc(4 * var(--u)); border: .5px solid rgba(0, 0, 0, .1); border-radius: calc(10 * var(--u)); background: rgba(255, 255, 255, .16); box-shadow: calc(-3 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .09); }
.about-hero_piece.is-tile img { display: block; width: 100%; height: 100%; }

.about-hero_piece.is-lens { left: calc(734 * var(--u)); top: calc(158 * var(--u)); width: calc(143 * var(--u)); height: calc(143 * var(--u)); rotate: -13.3deg; padding: calc(6.8 * var(--u)); border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .2)); box-shadow: calc(-4 * var(--u)) calc(3.4 * var(--u)) calc(2.8 * var(--u)) rgba(0, 0, 0, .1); }
.about-hero_lens-glass { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: .3px solid rgba(0, 0, 0, .16); background: linear-gradient(180deg, #fff 10%, rgba(255, 255, 255, .6) 79%); }
.about-hero_lens-ribbon { position: absolute; left: 50%; top: 50%; width: 205%; max-width: none; transform: translate(-50%, -50%) rotate(-90deg) translateX(var(--shift, 14%)); will-change: transform; }

.about-hero_piece.is-note { left: calc(739 * var(--u)); top: calc(355 * var(--u)); width: calc(105 * var(--u)); height: calc(131 * var(--u)); rotate: 9deg; background: linear-gradient(160deg, #fff, #fdf8f6); box-shadow: calc(-6 * var(--u)) calc(10 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, .12); color: #f92810; }
.about-hero_note-fold { position: absolute; right: 0; top: 0; width: calc(22 * var(--u)); height: calc(22 * var(--u)); background: linear-gradient(225deg, #fe9a8c 50%, rgba(255, 255, 255, 0) 50%); opacity: .7; }
.about-hero_note-icon { position: absolute; left: 50%; top: 50%; width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin: calc(-23 * var(--u)) 0 0 calc(-23 * var(--u)); opacity: 0; transform: scale(.86); transition: opacity .2s ease-out, transform .2s ease-out; }
.about-hero_note-icon.is-on { opacity: 1; transform: none; }

/* Intro, once per session: the desk is laid out the way a person would do it. The backing sheet is put down, the
   page lands on it, the memo is slid under its edge and taped, the clip is pushed on (the page gives a little under
   it), then the mark, the lens and the note are set down. Things arrive from above the desk (a touch larger, then
   settle) and slow down as they land; nothing bounces. Runs on translate / rotate / scale / opacity only. */
.about-hero_stage.is-intro [data-piece], .about-hero_stage.is-intro .about-hero_halo { opacity: 0; }
.about-hero_stage.is-intro.is-in [data-piece] { opacity: 1; animation: var(--in) both; }
.about-hero_stage.is-intro.is-in .about-hero_halo { opacity: 1; transition: opacity 1.6s ease-out .3s; }
.about-hero_stage.is-intro.is-in .about-hero_halo.is-coral { opacity: .55; }
.about-hero_piece.is-back { --in: about-in-back .7s cubic-bezier(.2, .8, .25, 1) 0s; }
.about-hero_piece.is-sheet { --in: about-in-sheet .75s cubic-bezier(.2, .85, .25, 1) .22s both, about-in-press .5s cubic-bezier(.3, 0, .3, 1) 1.82s; }
.about-hero_piece.is-memo { --in: about-in-memo .7s cubic-bezier(.2, .8, .25, 1) .75s; }
.about-hero_piece.is-tape { --in: about-in-tape .32s cubic-bezier(.3, 0, .2, 1) 1.32s; }
.about-hero_piece.is-clip { --in: about-in-clip .85s linear 1.35s; }
.about-hero_piece.is-tile { --in: about-in-tile .6s cubic-bezier(.2, .85, .25, 1) 2.05s; }
.about-hero_piece.is-lens { --in: about-in-lens .8s cubic-bezier(.2, .8, .25, 1) 2.2s; }
.about-hero_piece.is-note { --in: about-in-note .75s cubic-bezier(.2, .8, .25, 1) 2.4s; }
@keyframes about-in-back { from { opacity: 0; translate: calc(60 * var(--u)) calc(-30 * var(--u)); rotate: 11deg; scale: 1.05; } }
@keyframes about-in-sheet { from { opacity: 0; translate: calc(-14 * var(--u)) calc(-70 * var(--u)); rotate: -3deg; scale: 1.07; } 35% { opacity: 1; } }
/* The clip arrives: the page dips a hair under the push and comes back. */
@keyframes about-in-press { 45% { translate: calc(-1 * var(--u)) calc(3 * var(--u)); rotate: -.25deg; } }
@keyframes about-in-memo { from { opacity: 0; translate: calc(-150 * var(--u)) calc(30 * var(--u)); rotate: -24deg; } 30% { opacity: 1; } }
@keyframes about-in-tape { from { opacity: 0; scale: 1.5; translate: 0 calc(-14 * var(--u)); } }
/* The clip travels along its own slant: quick through the air, then slow as it bites onto the paper. */
@keyframes about-in-clip {
  from { opacity: 0; translate: calc(72 * var(--u)) calc(-132 * var(--u)); rotate: 36deg; animation-timing-function: cubic-bezier(.4, 0, .8, .6); }
  18% { opacity: 1; }
  52% { translate: calc(17 * var(--u)) calc(-31 * var(--u)); rotate: 30deg; animation-timing-function: cubic-bezier(.1, .7, .2, 1); }
}
@keyframes about-in-tile { from { opacity: 0; translate: calc(-20 * var(--u)) calc(-46 * var(--u)); rotate: -14deg; scale: 1.12; } 40% { opacity: 1; } }
/* The lens rolls in from the right and turns as it comes. */
@keyframes about-in-lens { from { opacity: 0; translate: calc(150 * var(--u)) calc(-10 * var(--u)); rotate: 150deg; } 25% { opacity: 1; } }
@keyframes about-in-note { from { opacity: 0; translate: calc(40 * var(--u)) calc(-90 * var(--u)); rotate: 34deg; scale: 1.1; } 35% { opacity: 1; } 60% { rotate: 3deg; } }

/* ---------- Investors ---------- */
.about-investors_component { padding: 6rem 0 7rem; }
.about-investors_header { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; margin-bottom: 3rem; }
.about-investors_header h2 { margin: 0; }
.about-investors_text { max-width: 20rem; margin: 0; color: var(--base-color-neutral--neutral-dark); font-size: 1.125rem; line-height: 1.5; }
.about-investors_wall { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; border: 1px solid var(--base-color-neutral--neutral-line); border-radius: 1rem; overflow: hidden; }
.about-investors_cell { position: relative; display: grid; place-items: center; height: 15rem; }
.about-investors_cell + .about-investors_cell { border-left: 1px solid var(--base-color-neutral--neutral-line); }
.about-investors_cell::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 110%, rgba(238, 221, 145, .5), rgba(238, 221, 145, 0) 60%), radial-gradient(110% 90% at 90% 120%, rgba(254, 154, 140, .42), rgba(254, 154, 140, 0) 62%); opacity: 0; transition: opacity .2s ease-out; }
.about-investors_logo { position: relative; width: auto; max-width: 70%; transition: transform .2s ease-out; }
.about-investors_logo.is-together { height: 3.5rem; }
.about-investors_logo.is-accel { height: 2.5rem; }
.about-investors_logo.is-premji { height: 1.45rem; }
@media (hover: hover) and (pointer: fine) {
  .about-investors_cell:hover::before { opacity: 1; }
  .about-investors_cell:hover .about-investors_logo { transform: scale(1.04); }
}

/* ---------- Founders ---------- */
.section_about-founders { padding: 2rem 0 7rem; }
.about-founders_header { max-width: 66rem; margin: 0 auto 4.5rem; text-align: center; }
.about-founders_header h2 { margin: 0 0 1rem; }
.about-founders_text { margin: 0; color: var(--base-color-neutral--neutral-dark); font-size: 1.125rem; line-height: 1.5; }
.about-founders_cards { display: grid; grid-template-columns: 1.46fr 1fr 1fr; gap: 1.25rem; transition: grid-template-columns .5s cubic-bezier(.3, .7, .2, 1); }
.about-founders_cards[data-active="1"] { grid-template-columns: 1fr 1.46fr 1fr; }
.about-founders_cards[data-active="2"] { grid-template-columns: 1fr 1fr 1.46fr; }
.about-founders_card { position: relative; height: 32rem; min-width: 0; overflow: hidden; border-radius: 1rem; background: #f3f3f3; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); cursor: pointer; }
.about-founders_bg { position: absolute; inset: -12%; background: url("../assets/office-blur.jpg") center / cover; filter: blur(24px); opacity: .5; }
.about-founders_bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(255, 255, 255, .7) 25%, rgba(255, 255, 255, 0) 61%); }
.about-founders_warm { position: absolute; inset: 0; background: radial-gradient(90% 60% at 0% 100%, rgba(240, 190, 80, .85), rgba(240, 190, 80, 0) 70%), radial-gradient(70% 80% at 105% 70%, rgba(250, 94, 76, .7), rgba(250, 94, 76, 0) 70%), #f9f8f5; opacity: 0; transition: opacity .4s ease-out; }
.about-founders_card.is-active .about-founders_warm { opacity: 1; }
.about-founders_photo { position: absolute; left: 50%; top: var(--top, 16%); height: 107%; width: auto; max-width: none; transform: translateX(-50%); transition: transform .5s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }
.about-founders_photo.is-anand { --top: 20%; }
.about-founders_photo.is-senthil { --top: 12%; }
.about-founders_photo.is-ramesh { --top: 17%; }
.about-founders_card.is-active .about-founders_photo { transform: translateX(-17%); }
.about-founders_copy { position: absolute; left: 2rem; top: 1.6rem; width: 16.5rem; }
.about-founders_name { margin: 0; font-family: var(--_global-tags---body--font-family); font-size: 2.125rem; font-weight: 500; line-height: 1.3; letter-spacing: -.042em; }
.about-founders_toggle { display: block; margin: 0; padding: 0; border: 0; background: none; color: #000; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.about-founders_toggle::after { content: ""; position: absolute; inset: -1.6rem -100vw -100vh -2rem; }
.about-founders_card { isolation: isolate; }
.about-founders_toggle:focus-visible { outline: 2px solid var(--base-color-brand--black); outline-offset: 4px; border-radius: 4px; }
.about-founders_bio { margin: 1.375rem 0 0; color: rgba(0, 0, 0, .62); font-size: 1.125rem; line-height: 1.5; letter-spacing: -.014em; opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s .2s; }
.about-founders_card.is-active .about-founders_bio { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease-out .2s, transform .3s ease-out .2s, visibility 0s; }

.about-tag { position: absolute; left: 1.75rem; bottom: 1.5rem; padding: 4px; border-radius: .75rem; background: rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.about-tag_inner { display: flex; align-items: center; gap: .625rem; padding: .55rem 1rem; border-radius: .5rem; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .4)); color: #000; font-size: 1.375rem; font-weight: 500; line-height: 1.3; letter-spacing: -.045em; white-space: nowrap; }
.about-tag.is-team { left: .75rem; bottom: .75rem; }
.about-tag.is-team .about-tag_inner { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .6)); }

/* ---------- Team ---------- */
/* Default (no JS, reduced motion, small screens): a plain row of cards with captions. `.is-pinned` turns it into the scrubbed film strip. */
.section_about-team { padding: 2rem 0 7rem; }
.about-team_title { max-width: 34rem; margin: 0 auto 3rem; font-size: 2.625rem; line-height: 1.26; text-align: center; }
.about-team_soft { color: #8f8f8f; }
.about-team_strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.about-team_photo { position: relative; aspect-ratio: 414 / 470; overflow: hidden; border-radius: 1.125rem; background: #f4f0e8 url("../assets/team-candid.webp") var(--x) var(--y) / auto 250% no-repeat; box-shadow: 0 4px 8px rgba(0, 0, 0, .09); }
.about-team_caption h3 { margin: 1rem 0 .375rem; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.03em; }
.about-team_caption p { margin: 0; color: var(--base-color-neutral--neutral-dark); font-size: 1rem; line-height: 1.45; }
.about-team_names, .about-team_texts, .about-team_rule, .about-team_dots { display: none; }
.about-team_strip .about-tag_inner { font-size: 1rem; }

.about-team_pin.is-pinned { height: 320vh; }
.about-team_pin.is-pinned .about-team_sticky { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; overflow: hidden; }
.is-pinned .about-team_title { margin-bottom: 0; position: relative; z-index: 2; }
.is-pinned .about-team_layout { --card-w: min(25.875rem, 44vh); --card-h: calc(var(--card-w) * 470 / 414); --gap: 2.25rem; --peek: 6.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem var(--card-w) 5.5rem minmax(0, 1fr); align-items: center; column-gap: 2rem; }
.is-pinned .about-team_window { height: calc(var(--card-h) + var(--peek) * 2); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.is-pinned .about-team_strip { display: flex; flex-direction: column; gap: var(--gap); will-change: transform; }
.is-pinned .about-team_card { flex: none; width: var(--card-w); height: var(--card-h); will-change: transform, opacity; }
.is-pinned .about-team_photo { height: 100%; aspect-ratio: auto; }
.is-pinned .about-team_strip .about-tag_inner { font-size: 1.25rem; }
.is-pinned .about-team_caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-pinned .about-team_rule { display: block; height: 1px; background: #e2e2e2; }
.is-pinned .about-team_names, .is-pinned .about-team_texts { display: block; position: relative; height: 9rem; }
.is-pinned .about-team_names { justify-self: end; width: min(100%, 13rem); }
.is-pinned .about-team_texts { justify-self: start; width: min(100%, 16.5rem); }
.about-team_name, .about-team_text { position: absolute; left: 0; right: 0; top: 50%; margin: 0; opacity: 0; will-change: transform, opacity; }
.about-team_name { font-size: 2.5rem; font-weight: 600; line-height: 1.04; letter-spacing: -.04em; overflow-wrap: anywhere; }
.about-team_text { font-size: 1.375rem; font-weight: 500; line-height: 1.32; letter-spacing: -.035em; }
.is-pinned .about-team_dots { position: absolute; right: 2rem; top: 50%; display: flex; flex-direction: column; gap: .25rem; transform: translateY(-50%); }
.about-team_dot { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.about-team_dot::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: #c9c9c9; transition: transform .2s ease-out, background-color .2s ease-out; }
.about-team_dot[aria-current="true"]::before { background: var(--base-color-brand--red); transform: scale(1.5); }
.about-team_dot:focus-visible { outline: 2px solid var(--base-color-brand--black); border-radius: 50%; }

/* ---------- Careers ---------- */
.section_about-careers { position: relative; padding: 9.4rem 0 7rem; background: linear-gradient(180deg, rgba(28, 29, 31, 0) 72%, #1c1d1f 100%), linear-gradient(110deg, #1c1d1f 36%, #303134 90%); color: #fff; }
/* The glow runs past the section's bottom edge and shows through the footer, which is transparent on this page. */
.about-careers_clip { position: absolute; left: 0; right: 0; top: 0; bottom: -24rem; overflow: hidden; pointer-events: none; }
.about-careers_glow { position: absolute; left: 0; right: 0; bottom: 0; height: 66rem; will-change: transform, opacity; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.about-careers_glow span { position: absolute; border-radius: 50%; }
.about-careers_glow .is-gold { left: -22%; bottom: 0; width: 100%; height: 80%; background: radial-gradient(closest-side, rgba(238, 200, 110, .55), rgba(238, 200, 110, 0)); }
.about-careers_glow .is-coral { right: -18%; bottom: 0; width: 95%; height: 90%; background: radial-gradient(closest-side, rgba(249, 80, 50, .6), rgba(249, 80, 50, 0)); }
.about-careers_component { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.about-careers_title { max-width: 52rem; margin: 0; font-size: 2.625rem; line-height: 1.26; }
.about-careers_text { max-width: 40rem; margin: 1.5rem 0 0; color: rgba(255, 255, 255, .66); font-size: 1.125rem; line-height: 1.55; }
.about-careers_values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; width: 100%; margin: 5rem 0 0; padding: 0; list-style: none; }
.about-careers_value { display: flex; flex-direction: column; align-items: center; gap: 2.3rem; max-width: 11rem; margin: 0 auto; color: rgba(255, 255, 255, .72); font-size: 1.75rem; font-weight: 500; line-height: 1.3; letter-spacing: -.05em; }
.about-careers_icon { display: grid; place-items: center; width: 4.375rem; height: 4.375rem; border-radius: 1rem; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background-color .2s ease-out, transform .2s ease-out; }
@media (hover: hover) and (pointer: fine) { .about-careers_value:hover .about-careers_icon { background: rgba(255, 255, 255, .22); transform: translateY(-2px); } }
.about-careers_button { display: inline-flex; align-items: center; gap: 1.5rem; margin-top: 5.9rem; padding: .5rem .5rem .5rem 1.25rem; border-radius: 6.25rem; background: #f0f0f0; color: var(--base-color-brand--black); font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: -.011em; text-decoration: none; transition: background-color .2s ease-out; }
.about-careers_button:hover { background: #fff; }
.about-careers_button-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #000; color: #fff; transition: transform .2s ease-out; }
.about-careers_button:hover .about-careers_button-icon { transform: translateY(2px); }
.about-careers_button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.about-careers_embed { display: grid; place-items: center; width: 100%; min-height: 43.5rem; margin-top: 5.9rem; scroll-margin-top: 2rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.about-careers_placeholder { margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.5rem; letter-spacing: -.035em; }

/* The staging footer fades in from white. Here it follows a dark section, so it starts dark. */
.main-wrapper { background-color: #1c1d1f; }
.section_about-hero, .section_about-investors, .section_about-founders, .section_about-team { background-color: #fff; }
.footer_component { min-height: 0; margin-top: 0; padding-top: 16rem; background-color: transparent; background-image: none; }
.footer_band { display: none; }

/* ---------- Tablet and phone ---------- */
@media screen and (max-width: 991px) {
  .about-hero_header { flex-direction: column; gap: 1.25rem; padding-top: 3rem; }
  .about-hero_lede { font-size: 1.125rem; }
  .about-investors_component { padding: 4rem 0 5rem; }
  .about-investors_header { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; }
  .about-investors_cell { height: 10rem; }
  .about-investors_logo { transform-origin: center; scale: .8; }
  .section_about-founders { padding-bottom: 5rem; }
  .about-founders_header { margin-bottom: 2.5rem; }
  .about-founders_cards, .about-founders_cards[data-active] { grid-template-columns: 1fr; }
  .about-founders_card { height: 24rem; cursor: default; }
  .about-founders_card .about-founders_warm { opacity: 1; }
  .about-founders_card .about-founders_photo { left: auto; right: -1rem; transform: none; }
  .about-founders_card .about-founders_bio { opacity: 1; visibility: visible; transform: none; }
  .about-founders_copy { width: min(16.5rem, 58%); }
  .about-team_strip { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .about-careers_values { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .section_about-careers { padding: 6rem 0 5rem; }
  .about-careers_embed { min-height: 30rem; }
}
@media screen and (max-width: 767px) {
  .about-hero_title { font-size: 2rem; }
  .about-hero_pin { padding: 1.5rem 0 2rem; }
  .about-hero_stage { aspect-ratio: 520 / 690; width: min(100%, 30rem); }
  .about-hero_canvas { --u: calc(100cqw / 520); }
  .about-hero_piece.is-back { left: calc(64 * var(--u)); top: calc(46 * var(--u)); width: calc(430 * var(--u)); height: calc(600 * var(--u)); }
  .about-hero_piece.is-sheet { left: calc(34 * var(--u)); top: calc(62 * var(--u)); width: calc(440 * var(--u)); height: calc(620 * var(--u)); }
  .about-hero_paper { padding: calc(170 * var(--u)) calc(56 * var(--u)) 0; }
  .about-hero_sheet-title { margin-bottom: calc(30 * var(--u)); }
  .about-hero_sheet-text { font-size: calc(23 * var(--u)); }
  .about-hero_edge { top: calc(210 * var(--u)); height: calc(400 * var(--u)); }
  .about-hero_piece.is-memo { left: calc(-52 * var(--u)); top: calc(-34 * var(--u)); scale: .6; }
  .about-hero_piece.is-tape { display: none; }
  .about-hero_piece.is-clip { left: calc(330 * var(--u)); top: calc(14 * var(--u)); }
  .about-hero_piece.is-lens { left: calc(394 * var(--u)); top: calc(96 * var(--u)); scale: .78; }
  .about-hero_piece.is-note { left: calc(414 * var(--u)); top: calc(520 * var(--u)); scale: .8; }
  .about-hero_piece.is-tile { left: calc(0 * var(--u)); top: calc(560 * var(--u)); scale: .8; }
  .about-investors_wall { grid-template-columns: 1fr; }
  .about-investors_cell { height: 8rem; }
  .about-investors_cell + .about-investors_cell { border-left: 0; border-top: 1px solid var(--base-color-neutral--neutral-line); }
  .about-founders_card { height: 22rem; }
  .about-founders_name { font-size: 1.625rem; }
  .about-founders_bio { font-size: 1rem; margin-top: .75rem; }
  .about-founders_copy { left: 1.25rem; top: 1.25rem; width: 54%; }
  .about-founders_card .about-founders_photo { height: 78%; top: auto; bottom: -6%; right: -2rem; }
  .about-tag { left: 1rem; bottom: 1rem; }
  .about-tag_inner { font-size: 1.125rem; }
  /* Phones: one swipeable row, no pin. */
  .about-team_window { margin: 0 calc(-1 * var(--_typography---padding-section--global, 1.25rem)); padding: 0 var(--_typography---padding-section--global, 1.25rem) 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .about-team_window::-webkit-scrollbar { display: none; }
  .about-team_strip { display: flex; gap: 1rem; }
  .about-team_card { flex: none; width: 74vw; scroll-snap-align: center; }
  .about-team_title { font-size: 2rem; margin-bottom: 2rem; }
  .about-careers_title { font-size: 1.875rem; }
  .about-careers_value { font-size: 1.25rem; gap: 1.25rem; }
  .about-careers_values { margin-top: 3.5rem; }
  .about-careers_button, .about-careers_embed { margin-top: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .about-founders_cards, .about-founders_photo, .about-founders_bio, .about-founders_card.is-active .about-founders_bio, .about-founders_warm, .about-hero_note-icon { transition: none; }
}

/* ---------- Story (v2): a wall of CRM noise that parts around the manifesto ---------- */
/* Default (no JS, reduced motion, small screens): the statements stack and the notes sit in a row. */
.section_about-story { background-color: #fff; }
.about-story_sticky { position: relative; padding: 4rem 1.25rem; }
.about-story_wall { display: none; }
.about-story_statement { max-width: 50rem; margin: 0 auto 4rem; text-align: center; }
.about-story_line { margin: 0; font-family: var(--_global-tags---h2--font-family); font-size: 3.25rem; font-weight: 600; line-height: 1.08; letter-spacing: -.042em; color: var(--base-color-brand--black); text-wrap: balance; }
.about-story_line.is-accent { margin-top: .35rem; color: var(--base-color-brand--red); }
.about-story_statement.is-object { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.about-story_lens { width: 11rem; height: 11rem; padding: .5rem; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(240, 236, 228, .9)); box-shadow: -.3rem .3rem .25rem rgba(0, 0, 0, .08), 0 1.5rem 3rem rgba(249, 40, 16, .12); rotate: -13deg; }
.about-story_lens-glass { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .1); background: #fff; }
.about-story_lens-ribbon { position: absolute; left: 50%; top: 50%; width: 205%; max-width: none; transform: translate(-50%, -50%) rotate(-90deg) translateX(var(--shift, 0%)); will-change: transform; }
.about-story_pill { display: inline-flex; align-items: center; gap: .625rem; margin: 0; padding: .55rem 1.1rem .55rem .9rem; border-radius: 6.25rem; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 .5rem 1.25rem rgba(0, 0, 0, .06); font-size: 1.125rem; font-weight: 500; letter-spacing: -.02em; }
.about-story_dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--base-color-brand--red); }
.about-story_notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.about-story_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); }
.about-story_note.is-white { background: #fff; }
.about-story_note.is-coral { background: #ffe1dc; }
.about-story_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; }

.about-story_note::before { background: center / 70% no-repeat; transition: background-color .2s ease-out, border-color .2s ease-out; }
.about-story_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"); }
.about-story_pin.is-pinned { height: 360vh; }
.is-pinned .about-story_sticky { position: sticky; top: 0; height: 100vh; padding: 0; overflow: hidden; }
.is-pinned .about-story_wall { display: block; position: absolute; inset: 0; width: 100%; height: 100%; -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 .about-story_statement { position: absolute; left: 50%; top: 47%; width: min(50rem, 86vw); margin: 0; opacity: 0; transform: translate(-50%, -50%); will-change: transform, opacity; }
.is-pinned .about-story_notes { display: block; position: absolute; inset: 0; pointer-events: none; }
.is-pinned .about-story_note { position: absolute; left: var(--x); top: 0; margin-left: -5.25rem; rotate: none; will-change: transform; }

@media screen and (max-width: 767px) {
  .about-story_line { font-size: 2rem; }
  .about-story_statement { margin-bottom: 3rem; }
  .about-story_note { width: 8.75rem; min-height: 5.5rem; font-size: .9375rem; }
}