/* About page (Figma 324:11678). Content column is 1024 wide. */
.p-about__narrow { max-width: 1024px; margin-inline: auto; }
.container.p-about__narrow { max-width: calc(1024px + var(--gutter) * 2); }
.p-about__center { text-align: center; }

/* Hero + photo strip */
.p-about__hero { padding-bottom: var(--space-10); overflow: hidden; }
.p-about__hero-inner { display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
.p-about__title { max-width: 768px; }
.p-about__strip {
  margin-top: var(--space-12); padding-block: var(--space-6);
}
.p-about__strip-track { display: flex; gap: 18px; width: max-content; }
.p-about__strip-track img { width: calc(var(--w) * 0.62); height: 152px; flex: none; border-radius: var(--radius-sm); object-fit: cover; }
.p-about__strip-track { will-change: transform; }
/* Fisheye (js/pages/about-strip.js): WebGL draws into the canvas and the photos stay only for layout;
   without WebGL the photos themselves are transformed. The mask fades the squeezed edges. */
.p-about__strip { position: relative; --strip-fade: 0%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--strip-fade), #000 calc(100% - var(--strip-fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--strip-fade), #000 calc(100% - var(--strip-fade)), transparent); }
.p-about__strip-track img { position: relative; }
.p-about__strip-canvas { position: absolute; left: 0; width: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--strip-fade), #000 calc(100% - var(--strip-fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--strip-fade), #000 calc(100% - var(--strip-fade)), transparent); }
.p-about__strip.is-gl { -webkit-mask-image: none; mask-image: none; }
.p-about__strip.is-gl .p-about__strip-track { visibility: hidden; }
.strip-tune { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: grid; gap: 8px; width: 220px; padding: 12px; border-radius: 10px; background: rgb(20 20 20 / 0.88); color: #fff; font: 12px/1.3 ui-monospace, monospace; }
.strip-tune label { display: grid; gap: 2px; }
.strip-tune span { display: flex; justify-content: space-between; }
.strip-tune button { padding: 6px; border: 0; border-radius: 6px; background: #fdc700; color: #111; font: inherit; cursor: pointer; }

/* Partners */
.p-about__partners { padding-block: var(--space-10); }
.p-about__partners-title { text-align: center; font-weight: var(--fw-medium); font-size: var(--body-sm-size); color: var(--neutral-900); }
.p-about__partners-list { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: var(--space-4); padding-block: var(--space-4); }
.p-about__partners-list li { display: grid; place-items: center; height: 66px; }
.p-about__partners-list img { height: 25px; width: auto; }

/* Problem + stats */
.p-about__problem-grid { display: grid; gap: var(--space-6); }
.p-about__problem-copy { display: grid; gap: var(--space-6); color: var(--neutral-900); }
.p-about__problem-copy p:not(.para-lg) { font-size: var(--para-md-size); line-height: var(--para-md-lh); }
.p-about__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-4); margin-top: var(--space-16); }
.p-about__stats div { display: flex; flex-direction: column-reverse; gap: var(--space-3); }
.p-about__stats dd { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); color: var(--features-term); }
.p-about__stats dt { font-weight: var(--fw-medium); font-size: var(--body-md-size); color: var(--text-strong); }

/* Team */
.p-about__members { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-10) var(--space-4); margin-top: var(--space-12); }
.p-about__member { position: relative; text-align: center; }
/* Member card layers (Figma frame 331×282): peach hexagon → portrait masked to it → LinkedIn badge
   overlapping the top-right corner. */
.p-about__member-photo { position: relative; aspect-ratio: 331 / 282; }
.p-about__member-hex {
  position: absolute; left: 13.06%; top: 1.32%; width: 73.78%; height: 97.37%;
  background: #ffeac8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 275'%3E%3Cpath d='M110.11 3.2154C117.535-1.0718 126.684-1.0718 134.11 3.2154L232.219 59.859C239.645 64.146 244.219 72.069 244.219 80.644V193.931C244.219 202.505 239.645 210.428 232.219 214.715L134.11 271.359C126.684 275.646 117.535 275.646 110.11 271.359L12 214.715C4.574 210.428 0 202.505 0 193.931V80.644C0 72.069 4.574 64.146 12 59.859Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 275'%3E%3Cpath d='M110.11 3.2154C117.535-1.0718 126.684-1.0718 134.11 3.2154L232.219 59.859C239.645 64.146 244.219 72.069 244.219 80.644V193.931C244.219 202.505 239.645 210.428 232.219 214.715L134.11 271.359C126.684 275.646 117.535 275.646 110.11 271.359L12 214.715C4.574 210.428 0 202.505 0 193.931V80.644C0 72.069 4.574 64.146 12 59.859Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.p-about__member-hex img { position: absolute; left: 9.7%; top: 12.9%; width: 80.7%; height: 87.1%; object-fit: cover; object-position: top; transform-origin: 50% 100%; }
.p-about__member-in { position: absolute; top: 8.5%; left: 75.83%; width: 21.75%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #dcf7f3; color: #005f5a; z-index: 1; }
.p-about__member-in svg { width: 43.75%; }
.p-about__member-name { margin-top: var(--space-4); font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--text-strong); }
.p-about__member-role { margin-top: var(--space-1); font-size: var(--para-md-size); color: var(--text-low); }
.p-about__member--empty { display: none; }
.p-about__member--empty .p-about__member-photo {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 282 282'%3E%3Cpath d='M128 5.5a26 26 0 0 1 26 0l96 55.5a26 26 0 0 1 13 22.5v115a26 26 0 0 1-13 22.5l-96 55.5a26 26 0 0 1-26 0L32 221a26 26 0 0 1-13-22.5v-115A26 26 0 0 1 32 61z' fill='none' stroke='%23e5e5e5' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Quote */
.p-about__quote-grid { display: grid; gap: var(--space-10); align-items: stretch; }
.p-about__quote-copy { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-10); }
.p-about__quote-copy blockquote { position: relative; padding-top: var(--space-8); }
.p-about__quote-copy blockquote::before { content: "“"; position: absolute; top: -18px; left: -4px; font-family: var(--font-heading); font-size: 80px; line-height: 1; color: var(--orange-700); }
.p-about__quote-copy blockquote p { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); color: var(--text-strong); }
.p-about__quote-copy blockquote p::before { content: "“"; }
.p-about__quote-copy figcaption { font-size: var(--body-md-size); line-height: 1.5; color: var(--neutral-900); }
.p-about__quote-copy strong { font-weight: var(--fw-medium); }
.p-about__quote-photo { border-radius: var(--radius-sm); overflow: hidden; background: var(--peach-100); }
.p-about__quote-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Life at Nexus */
.p-about__moments { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); max-width: 1060px; margin-inline: auto; }
.p-about__moments figure { padding: var(--space-2); border: 1px solid var(--border-thin); border-radius: var(--radius-sm); background: var(--base-high); box-shadow: var(--shadow-md); }
.p-about__moments li:nth-child(odd) figure { rotate: -2deg; }
.p-about__moments li:nth-child(even) figure { rotate: 2deg; }
.p-about__moments img { width: 100%; aspect-ratio: 287 / 328; object-fit: cover; border-radius: 4px; }
.p-about__moments figcaption { padding: var(--space-2) var(--space-2) var(--space-1); font-size: var(--para-md-size); color: var(--text-strong); }

.p-about__jobs { position: relative; margin-top: var(--space-20); }
.p-about__jobs-title { padding-inline: var(--space-2); }
.p-about__job-list { position: relative; z-index: 1; margin-top: var(--space-8); padding-inline: var(--space-4); border-radius: var(--radius-lg); background: var(--base-high); }
.p-about__job-list li + li { border-top: 1px solid var(--border-thin); }
.p-about__job { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); }
.p-about__job-main { display: grid; gap: var(--space-3); }
.p-about__job-title { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--neutral-900); transition: color var(--dur) var(--ease); }
.p-about__job-tags { display: flex; gap: var(--space-2); }
.p-about__job:hover .p-about__job-title { color: var(--amber-800); }
.p-about__job:hover .icon-btn { background: var(--btn-dark); color: var(--text-negative); }
.p-about__glow { position: absolute; left: 0; right: 0; bottom: -60px; height: 160px; background: radial-gradient(35% 50% at 30% 50%, rgb(255 105 0 / 0.16), transparent 70%), radial-gradient(30% 50% at 55% 50%, rgb(253 199 0 / 0.16), transparent 70%), radial-gradient(30% 50% at 75% 50%, rgb(0 188 125 / 0.14), transparent 70%); filter: blur(20px); }

@media (min-width: 768px) {
  .p-about__partners-list { grid-template-columns: repeat(5, 1fr); }
  .p-about__partners-list li + li { border-left: 1px solid var(--border-thin); }
  .p-about__stats { grid-template-columns: repeat(4, 1fr); }
  .p-about__members { grid-template-columns: repeat(3, 1fr); }
  .p-about__member--empty { display: block; }
  .p-about__moments { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .p-about__moments li { margin-inline: -12px; }
  .p-about__moments li:nth-child(odd) { margin-top: var(--space-5); }
  .p-about__quote-grid { grid-template-columns: 1fr 1fr; gap: var(--space-20); }
  .p-about__job-list { padding-inline: var(--space-8); }
  .p-about__job { padding-block: var(--space-8); }
}
@media (min-width: 1024px) {
  .p-about__strip { margin-top: var(--space-16); }
  .p-about__strip-track img { width: var(--w); height: 245px; }
  .p-about__problem-grid { grid-template-columns: 339px 504px; justify-content: space-between; }
  .p-about__problem-copy { padding-top: 88px; }
  .p-about__stats { margin-top: var(--space-20); }
  .p-about__members { gap: 56px var(--space-4); margin-top: var(--space-16); }
  .p-about__jobs { margin-top: 120px; }
}

/* Figma QC: desktop rhythm of the about page */
@media (min-width: 1024px) {
  .p-about__hero { padding-top: calc(var(--header-h) + var(--space-2) + 72px); }
  .p-about__hero-inner { gap: 22px; }
  .p-about__strip { margin-top: 60px; }
  .p-about__partners-list { max-width: 1164px; margin: 26px auto 0; }
  .p-about__stats { margin-top: 127px; }
  .p-about__problem { padding-top: 76px; }
  .p-about__jobs { margin-top: 98px; }
  .p-about__team { padding-bottom: 0; }
  .p-about__quote { padding-top: 107px; padding-bottom: 0; }
  .p-about__life { padding-block: 108px 120px; }
}
@media (min-width: 1024px) {
  .p-about__quote-copy blockquote { padding-top: 58px; }
  .p-about__quote-copy blockquote::before { content: ""; top: 20px; left: -34px; width: 30px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'%3E%3Cpath d='M7 0h8L8 26H0zM22 0h8l-7 26h-8z' fill='%23ca3500'/%3E%3C/svg%3E") center / contain no-repeat; }
  .p-about__quote-copy blockquote p { font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); }
  .p-about__quote-copy blockquote p::before { content: none; }
  .p-about__moments li, .p-about__moments li:nth-child(odd) { margin-top: 0; }
  .p-about__moments li:nth-child(1) figure { rotate: -2deg; }
  .p-about__moments li:nth-child(2) figure { rotate: 5deg; }
  .p-about__moments li:nth-child(3) figure { rotate: -4deg; }
  .p-about__moments li:nth-child(4) figure { rotate: 4deg; }
  .p-about__moments figcaption { text-align: center; }
  .p-about__glow { opacity: 1; filter: blur(16px); background: radial-gradient(35% 50% at 30% 50%, rgb(255 105 0 / 0.3), transparent 70%), radial-gradient(30% 50% at 55% 50%, rgb(253 199 0 / 0.3), transparent 70%), radial-gradient(30% 50% at 75% 50%, rgb(0 188 125 / 0.26), transparent 70%); }
}
@media (min-width: 1024px) {
  .p-about__jobs { margin-top: 118px; padding-inline: 32px; }
  .p-about__jobs-title, .p-about__job-list { padding-inline: 0; }
  .p-about__job { min-height: 127px; }
}

/* Mobile QC: the fifth partner logo centres across both columns instead of sitting alone on the left */
@media (max-width: 767px) { .p-about__partners-list li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Interactions (plan/motion-convention.md). Entrances are data-reveal attributes in about.html;
   the strip drift and stat count-up live in js/pages/about.js. */
.p-about__stats dd { font-variant-numeric: tabular-nums; }
.p-about__partners-list img { opacity: 0.6; filter: grayscale(1); transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease), scale var(--dur-slow) var(--ease-out); }
.p-about__member-photo { transition: translate var(--dur-slow) var(--ease-out); }
.p-about__member-photo img { transition: scale var(--dur-slow) var(--ease-out); }
.p-about__member-name, .p-about__job-tags .chip { transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.p-about__member-in { transition: background var(--dur) var(--ease), scale var(--dur) var(--ease-spring), translate var(--dur-slow) var(--ease-out); }
.p-about__member-in:focus-visible, .p-about__job:focus-visible { outline: 2px solid var(--orange-700); outline-offset: 3px; }
.p-about__job:focus-visible { border-radius: var(--radius-sm); }
.p-about__quote-photo img { transition: scale var(--dur-reveal-img) var(--ease-out); }
.p-about__moments li { position: relative; }
.p-about__moments figure { transition: rotate var(--dur-slow) var(--ease-spring), translate var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.p-about__job { transition: padding var(--dur-slow) var(--ease-out); }
.p-about__job .icon-btn { flex: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), scale var(--dur) var(--ease-spring); }
.p-about__job .icon-btn svg { transition: translate var(--dur) var(--ease-out); }
.p-about__job:focus-visible .p-about__job-title { color: var(--amber-800); }
.p-about__job:focus-visible .icon-btn { background: var(--btn-dark); color: var(--text-negative); }

@media (hover: hover) {
  .p-about__partners-list li:hover img { opacity: 1; filter: none; scale: 1.06; }
  .p-about__member:not(.p-about__member--empty):hover .p-about__member-photo,
  .p-about__member:hover .p-about__member-in { translate: 0 -6px; }
  .p-about__member:not(.p-about__member--empty):hover .p-about__member-photo img { scale: 1.03; }
  .p-about__member:hover .p-about__member-name { color: var(--amber-800); }
  .p-about__member-in:hover { scale: 1.12; }
  .p-about__quote-photo:hover img { scale: 1.04; }
  .p-about__moments li:hover { z-index: 2; }
  .p-about__moments li:hover figure { rotate: 0deg; translate: 0 -8px; box-shadow: var(--shadow-lg); }
  .p-about__job:hover .icon-btn { scale: 1.08; }
  .p-about__job:hover .icon-btn svg { translate: 3px 0; }
  .p-about__job:hover .chip { background: var(--base-low); }
}
@media (hover: hover) and (min-width: 768px) {
  .p-about__job:hover { padding-inline: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .p-about__strip-track { will-change: auto; }
  .p-about__member-photo, .p-about__member-photo img, .p-about__member-in, .p-about__quote-photo img,
  .p-about__moments figure, .p-about__job, .p-about__job .icon-btn, .p-about__job .icon-btn svg,
  .p-about__partners-list img { transition-property: background, color, opacity, filter, box-shadow; }
}