/*
 * About page. Layered on about.css, which keeps styling the header and footer.
 *
 * The base rules are a complete, calm static page. When motion is welcome the
 * head script adds `ab-js` to <html>, and src/about-page/main.js (GSAP +
 * ScrollTrigger + Lenis) turns the sections into scroll-driven scenes.
 */

/* about.css clips the shell with overflow:hidden, which would break pinning
   and sticky cards. `clip` still stops sideways bleed. */
.site-shell {
  overflow: visible;
  overflow: clip;
}

.ab {
  --ab-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ab-pad: clamp(20px, 5vw, 72px);
  --ab-ink: #171018;
  --ab-soft: #4b4351;
  --ab-muted: #74697c;
  --ab-pink: #e94f8d;
  --ab-blush: #ffe4ee;
  color: var(--ab-ink);
}

.ab h1,
.ab h2,
.ab h3,
.ab p {
  margin: 0;
}

.ab em {
  color: var(--ab-pink);
  font-style: italic;
  font-weight: 500;
}

.ab-kicker {
  font-size: 0.924rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ab-kicker,
.ab-pill {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0.8em 3.4em 0.76em 2.5em;
  border: 0 solid transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='80' viewBox='0 0 420 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ff94bb' fill-rule='evenodd' d='M54 12.4C62.5 12 70.5 13.3 80 13.4C89.5 13.5 96.5 12.6 106 12.9C115.5 13.1 122.5 14.4 132 14.7C141.5 15.1 148.5 15.2 158 14.8C167.5 14.5 174.5 12.9 184 12.8C193.5 12.8 200.5 14.4 210 14.6C219.5 14.8 226.5 14 236 13.9C245.5 13.7 252.5 13.7 262 13.9C271.5 14.1 278.5 14.9 288 15.1C297.5 15.2 304.5 15 314 14.7C323.5 14.3 332.6 12.9 340 13.1C347.4 13.3 347.6 14.9 354.1 15.6C360.7 16.3 374.7 16.3 375.7 17C376.7 17.7 364.5 18.7 359.7 19.4C355 20.1 346.5 20 349.7 20.6C353 21.2 376.6 22.2 377.2 22.9C377.8 23.6 358.1 23.9 353.1 24.4C348.2 24.9 347 24.9 350.3 25.6C353.5 26.3 370.1 27.6 370.9 28.3C371.8 28.9 358.8 29 354.8 29.4C350.8 29.8 344.2 30.1 348.9 30.6C353.7 31.1 379.7 31.6 380.8 32.3C381.8 33 359.6 33.8 354.4 34.4C349.2 35 347.6 35.1 352.3 35.6C356.9 36.1 379.2 36.2 379.7 36.9C380.3 37.6 360.1 38.7 355.3 39.4C350.6 40.1 347.4 40.2 354 40.6C360.6 41 390.8 41.1 391.5 41.8C392.1 42.5 363.9 43.7 357.6 44.4C351.4 45.1 350.6 44.9 357.3 45.6C364.1 46.3 393.7 47.4 394.3 48.1C394.9 48.8 368.6 48.9 360.5 49.4C352.4 49.9 348.8 50 350 50.6C351.2 51.2 366.4 52.2 367.2 52.9C368.1 53.6 356.8 53.9 354.6 54.4C352.4 54.9 352.9 55.1 355.3 55.6C357.6 56.1 366.6 56.4 367.3 57.1C368 57.7 362.4 58.7 359 59.4C355.5 60.1 348.5 59.9 348.3 60.6C348.2 61.3 357.6 62.5 358.3 63.2C359 63.9 354.1 63.7 352.2 64.4C350.3 65.1 353.5 66.9 348 67C342.5 67.1 331.5 65.1 322 65.1C312.5 65 305.5 66.8 296 66.8C286.5 66.7 279.5 65.2 270 64.9C260.5 64.5 253.5 64.4 244 64.9C234.5 65.4 227.5 67.1 218 67.7C208.5 68.2 201.5 68.3 192 67.8C182.5 67.3 175.5 65.6 166 65.1C156.5 64.7 149.5 65.2 140 65.2C130.5 65.2 123.5 64.7 114 65.2C104.5 65.6 97.5 67.4 88 67.6C78.5 67.9 69.2 67 62 66.4C54.8 65.8 52.3 65.2 48.9 64.5C45.4 63.8 44 63.5 43.3 62.8C42.6 62.1 44.9 61.1 44.9 60.5C45 59.9 46.3 60.1 43.6 59.5C40.9 58.9 31.1 57.8 30.4 57C29.7 56.3 37.5 56 39.8 55.5C42.2 55 44.3 54.9 43.3 54.5C42.2 54.1 34.6 53.9 34.3 53.2C34 52.4 40.3 51.2 41.6 50.5C42.9 49.8 43.5 50.2 41.6 49.5C39.7 48.8 31.9 47.5 31.2 46.8C30.6 46 36 45.9 37.9 45.5C39.9 45.1 42.7 45 41.8 44.5C40.9 44 33.4 43.7 32.9 43C32.4 42.2 37.7 41.1 39.2 40.5C40.7 39.9 42.6 40 41 39.5C39.4 39 30.8 38.6 30.4 37.8C30 37.1 36.9 36.1 39 35.5C41.1 34.9 43.7 35.1 41.7 34.5C39.8 33.9 28.9 32.7 28.3 32C27.7 31.3 36.3 31 38.6 30.5C40.9 30 43.1 30 40.9 29.5C38.7 29 27.1 28.8 26.8 28C26.5 27.3 36.8 26.1 39.2 25.5C41.5 24.9 43.2 24.9 39.8 24.5C36.5 24.1 21.1 23.8 20.9 23C20.6 22.3 35.6 21.2 38.6 20.5C41.6 19.8 40.8 20.2 37.3 19.5C33.8 18.8 20.1 17.5 19.4 16.8C18.8 16.1 27.2 16.3 33.5 15.5C39.8 14.7 45.5 12.8 54 12.4ZM359.6 61.6C367.5 60.5 378 60.5 385.8 61.6C378 62.8 367.5 62.8 359.6 61.6ZM362.9 19C371.9 18.3 383.9 18.3 392.9 19C383.9 19.6 371.9 19.6 362.9 19ZM360.6 27.9C369.5 27 381.4 27 390.3 27.9C381.4 28.9 369.5 28.9 360.6 27.9ZM356.1 21.1C363.2 20.4 372.7 20.4 379.9 21.1C372.7 21.9 363.2 21.9 356.1 21.1ZM368.6 27.5C376.7 26.9 387.3 26.9 395.4 27.5C387.3 28 376.7 28 368.6 27.5ZM365.8 30.2C371.2 29.3 378.5 29.3 383.9 30.2C378.5 31 371.2 31 365.8 30.2ZM25.5 35.7C31 34.9 38.3 34.9 43.8 35.7C38.3 36.5 31 36.5 25.5 35.7ZM29.4 47.9C33.2 47.3 38.2 47.3 42 47.9C38.2 48.4 33.2 48.4 29.4 47.9ZM25.5 54.7C32.7 54.1 42.4 54.1 49.6 54.7C42.4 55.3 32.7 55.3 25.5 54.7ZM8.8 44.6C16.3 43.7 26.3 43.7 33.8 44.6C26.3 45.4 16.3 45.4 8.8 44.6Z'/%3E%3Cpath fill='%23ff94bb' d='M388.8 22.1C395.2 21.1 403.8 21.1 410.3 22.1C403.8 23.1 395.2 23.1 388.8 22.1ZM392.9 27.3C399.1 26.6 407.5 26.6 413.8 27.3C407.5 28 399.1 28 392.9 27.3ZM390.8 30C396 29.2 403 29.2 408.2 30C403 30.9 396 30.9 390.8 30ZM389 48.1C395.9 47 405 47 411.8 48.1C405 49.2 395.9 49.2 389 48.1ZM389.9 28.7C397.3 27.7 407.2 27.7 414.6 28.7C407.2 29.7 397.3 29.7 389.9 28.7Z'/%3E%3C/svg%3E");
  border-image-slice: 0 84 0 58 fill;
  border-image-width: 0 3.1em 0 2.1em;
  border-image-repeat: stretch;
  color: #ffffff;
  transform: rotate(-1.4deg);
}


.ab-section-title {
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}

/* ------------------------------------------------------------------ hero */

.ab-hero {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
  padding: clamp(48px, 8vw, 96px) var(--ab-pad);
  text-align: center;
}

.ab-pill {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ab-title {
  margin-top: 30px !important;
  font-size: clamp(3rem, 10vw, 9.4rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.ab-line {
  display: block;
  overflow: hidden;
  padding: 0 0.04em 0.07em;
}

.ab-line > span {
  display: inline-block;
  animation: ab-line 1.15s var(--ab-ease) both;
}

.ab-line:nth-child(1) > span { animation-delay: 0.1s; }
.ab-line:nth-child(2) > span { animation-delay: 0.22s; }
.ab-line:nth-child(3) > span { animation-delay: 0.34s; }

@keyframes ab-line {
  from {
    transform: translateY(110%) rotate(2deg);
  }
}

.ab-hero-sub {
  margin-top: 28px !important;
  color: var(--ab-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}

.ab-up {
  animation: ab-up 1s var(--ab-ease) var(--d, 0s) both;
}

@keyframes ab-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

.ab-scroll {
  position: relative;
  width: 28px;
  height: 46px;
  margin-top: clamp(40px, 7vh, 72px);
  border: 1.5px solid rgba(23, 16, 24, 0.25);
  border-radius: 999px;
}

.ab-scroll span {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--ab-pink);
  animation: ab-wheel 1.8s ease-in-out infinite;
}

@keyframes ab-wheel {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  80%, 100% { opacity: 0; transform: translateY(16px); }
}

/* ------------------------------------------------------- photo that opens */

.ab-open {
  padding: 0 var(--ab-pad);
}

.ab-open-frame {
  position: relative;
  height: min(80vh, 760px);
  overflow: hidden;
  border-radius: 32px;
  background: var(--ab-blush);
}

.ab-open-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.ab-open-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 16, 24, 0) 45%, rgba(23, 16, 24, 0.55) 100%);
}

.ab-open-text {
  position: absolute;
  z-index: 1;
  right: var(--ab-pad);
  bottom: clamp(32px, 7vh, 80px);
  left: var(--ab-pad);
  max-width: 900px;
  margin: 0 auto !important;
  color: #fff;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: center;
}

.ab-js .ab-open {
  padding: 0;
}

.ab-js .ab-open-frame {
  height: 100vh;
  height: 100svh;
  border-radius: 0;
  will-change: clip-path;
}

.ab-js .ab-open-frame img {
  will-change: transform;
}

/* -------------------------------------------------------------- manifesto */

.ab-mani {
  padding: clamp(80px, 12vw, 160px) var(--ab-pad);
  text-align: center;
}

.ab-mani .ab-kicker {
  margin: 0 auto;
}

.ab-mani-list {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  margin: 32px auto 0;
  padding: 0;
  max-width: 1100px;
  list-style: none;
}

.ab-mani-list li {
  font-size: clamp(2rem, 5.6vw, 5.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.ab-js .ab-mani {
  position: relative;
  height: 100vh;
  height: 100svh;
  padding: 0 var(--ab-pad);
}

.ab-js .ab-mani .ab-kicker {
  position: absolute;
  top: max(96px, 14vh);
  right: 0;
  left: 0;
  margin: 0 auto;
}

.ab-js .ab-mani-list {
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
  max-width: none;
}

.ab-js .ab-mani-list li {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--ab-pad);
}

.ab-mani-list li > span {
  max-width: 1100px;
}

/* ------------------------------------------------------- what we stand for */

.ab-values {
  padding: clamp(40px, 6vw, 80px) 0;
}

.ab-values-pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 4vh, 40px);
}

.ab-values-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--ab-pad);
}

.ab-values-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ab-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.ab-values-hint::after {
  content: "";
  width: 36px;
  height: 1.5px;
  background: currentColor;
  animation: ab-hint 1.8s ease-in-out infinite;
  transform-origin: left;
}

@keyframes ab-hint {
  0%, 100% { transform: scaleX(0.4); }
  50% { transform: scaleX(1); }
}

.ab-values-track {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0 var(--ab-pad);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--ab-pad);
  scrollbar-width: none;
}

.ab-values-track::-webkit-scrollbar {
  display: none;
}

.ab-value {
  position: relative;
  flex: 0 0 min(82vw, 600px);
  height: min(64vh, 540px);
  min-height: 380px;
  overflow: hidden;
  border-radius: 32px;
  background: var(--ab-blush);
  scroll-snap-align: start;
}

.ab-value img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ab-ease);
}

.ab-value:hover img {
  transform: scale(1.05);
}

.ab-value::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 16, 24, 0) 40%, rgba(23, 16, 24, 0.6) 100%);
}

.ab-value > div {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  padding: clamp(24px, 3.4vw, 44px);
  color: #fff;
}

.ab-value h3 {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.ab-value p {
  margin-top: 12px !important;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
}

.ab-js .ab-values.is-pinned {
  padding: 0;
}

.ab-js .ab-values.is-pinned .ab-values-pin {
  height: 100vh;
  height: 100svh;
}

.ab-js .ab-values.is-pinned .ab-values-track {
  overflow: visible;
  scroll-snap-type: none;
  width: max-content;
  will-change: transform;
}

/* ------------------------------------------------------- purpose & vision */

.ab-stack {
  padding: clamp(64px, 10vw, 140px) var(--ab-pad) clamp(40px, 6vw, 80px);
}

.ab-card {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  min-height: min(76vh, 640px);
  margin: 0 auto 6vh;
  max-width: 1320px;
  padding: clamp(32px, 7vw, 110px);
  overflow: hidden;
  border-radius: 40px;
  transform-origin: 50% 0;
}

.ab-card p {
  position: relative;
  max-width: 1000px;
  font-size: clamp(2rem, 5.2vw, 4.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.ab-card .ab-kicker {
  position: relative;
}

.ab-card-purpose {
  background: var(--ab-blush);
}

.ab-card-vision {
  margin-bottom: 0;
  background: var(--ab-ink);
  color: #fff;
}

.ab-card-vision img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.ab-card-vision .ab-kicker {
  color: #fff;
}

/* ------------------------------------------------------------------- team */

.ab-team {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 140px) var(--ab-pad) clamp(40px, 6vw, 80px);
}

.ab-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.ab-person a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ab-person-photo {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 28px;
  background: var(--ab-blush);
}

.ab-person-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.6s ease, transform 1s var(--ab-ease);
}

.ab-person a:hover .ab-person-photo img,
.ab-person a:focus-visible .ab-person-photo img {
  filter: none;
  transform: scale(1.05);
}

.ab-person-name {
  display: block;
  margin-top: 16px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ab-person-role {
  display: block;
  margin-top: 2px;
  color: var(--ab-muted);
  font-size: 0.92rem;
}

.ab-person-in {
  display: inline-block;
  margin-top: 10px;
  color: var(--ab-pink);
  font-size: 0.86rem;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s ease, transform 0.45s var(--ab-ease);
}

.ab-person a:hover .ab-person-in,
.ab-person a:focus-visible .ab-person-in {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .ab-person-photo img {
    filter: none;
  }

  .ab-person-in {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------- end */

.ab-end {
  display: grid;
  justify-items: center;
  padding: clamp(56px, 8vw, 110px) 0 clamp(72px, 10vw, 130px);
  overflow: hidden;
  text-align: center;
}

.ab-marquee {
  width: 100%;
  overflow: hidden;
}

.ab-marquee-track {
  display: flex;
  align-items: center;
  gap: 0.4em;
  width: max-content;
  padding-right: 0.4em;
  font-size: clamp(3.4rem, 11vw, 10rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  animation: ab-marquee 28s linear infinite;
}

.ab-marquee-track span {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(23, 16, 24, 0.22);
}

.ab-marquee-track i {
  flex: none;
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: #ff94bb;
}

@keyframes ab-marquee {
  to {
    transform: translateX(-50%);
  }
}

.ab-end-title {
  margin-top: clamp(28px, 5vw, 56px) !important;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
}

.ab-cta {
  display: grid;
  place-items: center;
  width: clamp(132px, 14vw, 168px);
  aspect-ratio: 1;
  margin-top: 32px;
  border-radius: 50%;
  background: var(--ab-pink);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.3s ease;
  will-change: transform;
}

.ab-cta:hover {
  background: #d63f7b;
}

.ab-cta span {
  display: block;
  pointer-events: none;
}

.ab-end-note {
  margin-top: 32px !important;
  color: var(--ab-muted);
  font-size: 0.86rem;
}

/* Elements the script brings in; hidden only while the script is in charge. */
.ab-js .ab-person,
.ab-js .ab-section-title,
.ab-js .ab-end-title {
  opacity: 0;
}

/* ---------------------------------------------------------- tablet & phone */

@media (max-width: 860px) {
  .ab-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-card {
    top: 84px;
    min-height: 64vh;
    border-radius: 28px;
  }

  .ab-values-hint {
    display: none;
  }

  .ab-value {
    height: 460px;
    border-radius: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab *,
  .ab *::before,
  .ab *::after {
    animation: none !important;
    transition: none !important;
  }
}