/* /about page styles. Tokens, type scale, .shell, .btn, .opt-card and footer come from assets/site.css. */
.about-hero { position: relative; isolation: isolate; display: grid; min-height: 92svh; background: #0a0d14; color: #fff; overflow: hidden; }
.about-hero .shell { display: grid; align-content: center; gap: 1.5rem; padding-top: 8rem; padding-bottom: 5rem; }
.about-hero h1 { max-width: 12ch; }
.about-hero .cover { position: absolute; inset: 0; z-index: -1; }
.about-hero .cover picture, .about-hero .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-hero .fade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0a0d14 0%, #0a0d14 36%, rgb(10 13 20 / 0.55) 62%, rgb(10 13 20 / 0.15) 100%); }
.mobile-hidden { display: none; } .desktop-hidden { display: block; }
@media (min-width: 768px) { .mobile-hidden { display: block; } .desktop-hidden { display: none; } .about-hero .cover { left: 42%; } .about-hero .fade { background: linear-gradient(90deg, #0a0d14 0%, #0a0d14 40%, rgb(10 13 20 / 0) 60%); } }
@media (max-width: 767px) { .about-hero .fade { background: linear-gradient(180deg, rgb(10 13 20 / 0.55), rgb(10 13 20 / 0.85)); } }
.u-cover-absolute { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u-cover-absolute.is--tall { top: -10%; height: 120%; }
.events-none { pointer-events: none; }

/* 2 · mission */
.mission { background: #0a0d14; color: #fff; padding: clamp(6rem, 14vw, 12rem) 0; }
.mission h2 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.75rem); line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; max-width: 24ch; }

/* 3 · principles */
.s-principles { position: relative; overflow: hidden; }
.animation-wrap { display: grid; gap: 1.5rem; }
.p-card { position: relative; display: grid; gap: 1.25rem; padding: 1.75rem; border-radius: 16px; border: 1px solid var(--c-line); background: var(--c-surface); overflow: hidden; }
.p-card .p-illus { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--c-raised); overflow: hidden; }
.p-card .p-illus svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--c-fg); }
.p-card .placeholder { position: absolute; right: 1.5rem; top: 1.5rem; width: 6.5rem; height: 6.5rem; }
.p-card .p-num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--c-fg-muted); }
.bot-wrap { position: absolute; inset: 0; }
.bot-lottie { width: 100%; height: 100%; color: var(--c-fg); }
.bot-lottie .floor { fill: var(--c-accent); opacity: 0; transform-origin: center bottom; }
@media (min-width: 992px) {
  .s-principles { height: 100vh; display: grid; align-items: center; }
  .animation-wrap { display: flex; gap: 2rem; padding: 0 var(--gutter); width: max-content; }
  .p-card { width: 70vw; height: min(72vh, 44rem); grid-template-rows: 1fr auto; }
  .p-card .p-illus { aspect-ratio: auto; height: 100%; opacity: 0; transform: scale(0.92); }
  .p-card .placeholder { width: 9.25em; height: 9.25em; }
  .p-card .p-copy { max-width: 36rem; }
}

/* 4 · team */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 992px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.team-grid-card .card-photo { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-raised); overflow: hidden; filter: grayscale(1); transition: filter 0.4s; }
.team-grid-card:hover .card-photo { filter: none; }
.team-grid-card .card-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-grid-card .monogram { font-family: var(--font-mono); font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: 0.1em; color: var(--c-accent); }
.team-grid-card .card-info h3 { margin-top: 0.875rem; font-size: 1rem; font-weight: 500; }
.team-grid-card .card-info p { font-size: 0.875rem; color: var(--c-fg-muted); }

/* 5 · foundations grid */
.exp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .exp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.exp-cell { position: relative; display: grid; place-items: center; min-height: 9rem; padding: 1.5rem; text-align: center; }
.cell-line { position: absolute; background: var(--c-line-strong); }
.cell-line.is--top { left: 0; right: 0; top: 0; height: 1px; } .cell-line.is--bot { left: 0; right: 0; bottom: 0; height: 1px; }
.cell-line.is--left { top: 0; bottom: 0; left: 0; width: 1px; } .cell-line.is--right { top: 0; bottom: 0; right: 0; width: 1px; }
@media (max-width: 991px) { .cell-line.mob-hidden { display: none; } }
@media (min-width: 992px) { .cell-line.desktop-hidden { display: none; } }
.exp-logo { display: grid; gap: 0.25rem; opacity: 0.8; transition: opacity 0.3s; }
.exp-cell:hover .exp-logo, .exp-cell:focus-within .exp-logo { opacity: 1; }
.exp-logo .n { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--c-fg); }
.exp-logo .d { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-fg); opacity: 0.85; }

/* 6 · band */
.band-x { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #0a0d14; }
.band-x .scrim { position: absolute; inset: 0; z-index: -1; background: rgb(10 13 20 / 0.62); }
.band-x img { z-index: -2; filter: saturate(0.7); }

/* 7 · marquee */
.marquee-sec { position: relative; overflow: hidden; }
.backed-bg { position: absolute; inset: 0; z-index: -1; color: var(--c-line); opacity: 0.6; pointer-events: none; }
.marquee-wrap { position: relative; overflow: hidden; margin-top: 2.5rem; }
.marquee-line { display: flex; width: max-content; gap: 1rem; }
.marquee-line .m-item { display: flex; flex-direction: column; justify-content: center; min-width: 14rem; padding: 1rem 1.25rem; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-canvas); }
.marquee-line .m-item .n { font-size: 0.9375rem; font-weight: 600; }
.marquee-line .m-item .d { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--c-fg-muted); }
.marquee-blur { position: absolute; top: 0; bottom: 0; width: 6rem; z-index: 2; pointer-events: none; }
.marquee-blur.is--l { left: 0; background: linear-gradient(90deg, var(--c-canvas), transparent); }
.marquee-blur.is--r { right: 0; background: linear-gradient(270deg, var(--c-canvas), transparent); }

/* 8 · closing */
.stat-image { position: absolute; width: 3.5rem; color: rgb(255 255 255 / 0.55); z-index: 1; }
.stat-image.is--first { left: 6%; top: 14%; } .stat-image.is--fourth { right: 7%; bottom: 16%; }
@media (max-width: 767px) { .stat-image { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .p-card .p-illus { opacity: 1 !important; transform: none !important; }
  .bot-lottie .floor { opacity: 1; }
}