/* About page (Figma 267:2826) — shares tokens, bands, nav, CTA and footer with the home page */

/* ---- hero ---------------------------------------------------------- */
.band--first { margin-top: 0; border-top: 0; }
.about-hero { --hu: calc(min(100vw, 1440px) / 1440); position: relative; overflow-x: clip; }   /* texture + colour bars run the full viewport width */   /* 1 design px; the hero scales down with the viewport */
.about-hero .band__stage { z-index: 1; height: calc(441 * var(--hu)); overflow: hidden; }
.about-hero__texture {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/about/texture.webp") center / cover no-repeat;
  mix-blend-mode: overlay; opacity: 0;   /* off: it tinted the hero away from the page background */
}
.about-hero__inner { position: absolute; inset: 0; z-index: 1; }
.ag {                                         /* Figma "Tile grid" 267:3614: x 161, y -8, clipped by its own box */
  position: absolute; left: calc(160.57 * var(--hu)); top: calc(-8.36 * var(--hu));
  width: calc(560 * var(--hu)); height: calc(439 * var(--hu));
  container-type: inline-size;
}
.ag__canvas { --u: var(--hu); position: relative; width: 100%; height: 100%; overflow: hidden; }
.ag-tile {
  position: absolute; display: block; box-sizing: border-box;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(87.267 * var(--u)); height: calc(87.267 * var(--u));
  border-radius: calc(20.944 * var(--u));
}
.ag-ghost {
  border: calc(1.309 * var(--u)) dashed #d6d6d6;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.07) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(4 * var(--u)));
}
.ag-ghost.is-fade { opacity: .5; }
.ag-person, .ag-logo {
  border: calc(1.745 * var(--u)) solid #fff;
  box-shadow: 0 calc(6.981 * var(--u)) calc(15.708 * var(--u)) rgba(0,0,0,.12);
  overflow: hidden;
  transition: transform .5s cubic-bezier(.19, 1, .22, 1);
}
.ag-person:hover { transform: translateY(calc(-5 * var(--u))); }
.ag-person img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ag-logo { display: grid; place-items: center; background: linear-gradient(180deg, #fff, #f3f3f3); box-shadow: 0 calc(6.981 * var(--u)) calc(15.708 * var(--u)) rgba(0,0,0,.08); }
.ag-logo img { width: 54%; height: auto; }
.ag-badge {
  position: absolute; display: block; box-sizing: border-box; overflow: hidden;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(36.652 * var(--u)); height: calc(35.779 * var(--u));
  border-radius: calc(10.472 * var(--u)); background: #fff;
  box-shadow: 0 calc(2.618 * var(--u)) calc(6.981 * var(--u)) rgba(0,0,0,.16);
}
.ag-badge img { position: absolute; left: calc(5.24 * var(--u)); top: calc(5.24 * var(--u)); width: calc(26.18 * var(--u)); height: calc(25.3 * var(--u)); max-width: none; object-fit: contain; }

.ag-cursor { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: 0; height: 0; animation: ag-float 6s ease-in-out infinite alternate; }
.ag-cursor b {
  position: absolute; left: 0; top: 0; display: block;
  padding: calc(10.472 * var(--u)) calc(14.835 * var(--u));
  border-radius: 999px; background: #4a4a4a; color: #fff;
  font: 600 calc(14.835 * var(--u))/1.25 var(--font-ui); letter-spacing: -.012em; white-space: nowrap;
  box-shadow: 0 calc(3.491 * var(--u)) calc(7.854 * var(--u)) rgba(0,0,0,.18);
}
.ag-cursor svg { position: absolute; max-width: none; width: calc(15.708 * var(--u)); height: calc(15.708 * var(--u)); }
.ag-cursor--a svg { left: calc(79.4 * var(--u)); top: calc(-15.6 * var(--u)); }
.ag-cursor--b { animation-delay: -3s; }
.ag-cursor--b svg { left: calc(-18.3 * var(--u)); top: calc(-14.8 * var(--u)); transform: scaleX(-1); }
@keyframes ag-float { to { transform: translate3d(calc(4 * var(--u)), calc(-3 * var(--u)), 0); } }

.about-hero__title {                          /* Figma 267:3675: x 757, cap-top 176 below the hero top */
  position: absolute; left: calc(757 * var(--hu)); top: calc(160 * var(--hu)); margin: 0;
  font: 500 var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: var(--ls-display); color: var(--color-ink);   /* same H1 size as every page */
  white-space: nowrap;
}
.about-hero__title .t-accent { font-size: inherit; }

/* the hand-cut colour bars along the top and bottom edge of the hero */
.about-bars { position: absolute; left: -1%; right: -1%; z-index: 2; display: flex; flex-direction: column; pointer-events: none; filter: url(#rough-bars); }
.about-bars i { display: block; flex: none; }
.about-bars--bottom { bottom: 0; }
.about-bars--bottom i:nth-child(1) { height: 5.24px;  background: #afd9fb; }
.about-bars--bottom i:nth-child(2) { height: 6.11px;  background: #dfc5fb; }
.about-bars--bottom i:nth-child(3) { height: 4.36px;  background: #fdc9e0; }
.about-bars--bottom i:nth-child(4) { height: 6.11px;  background: #235cfb; }
.about-bars--bottom i:nth-child(5) { height: 9.9px;   background: #ddf497; }
.about-bars--top { top: 0; }
.about-bars--top i:nth-child(1) { height: 1.75px; background: #dfc5fb; }
.about-bars--top i:nth-child(2) { height: 5.24px; background: #afd9fb; }

/* ---- story --------------------------------------------------------- */
.story__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--head-gap);
  padding: var(--section-y) var(--gx);
}
.story__title { margin: 0; text-align: center; }
.story__title .t-h2--regular { font-weight: 400; }
.story__dot { color: var(--color-primary); font-family: var(--font-accent); font-style: normal; }
.story__row {
  display: grid; grid-template-columns: minmax(0, 569px) minmax(0, 567px); justify-content: space-between; align-items: start;
  gap: var(--space-8); width: 100%; max-width: 1210px; margin-top: 47px;     /* 60 + 47 = the 107px gap in Figma */
}
.story__text p {
  margin: 0 0 45px;
  font: 400 32px/45px var(--font-ui); letter-spacing: -1.44px; color: rgba(50, 50, 50, .9);
}
.story__text p:last-child { margin-bottom: 0; }
.story__text b { font-weight: 500; color: #000; }
.story__accent { color: var(--color-primary); letter-spacing: -.72px; }
.story__media { aspect-ratio: 567 / 475; filter: url(#rough-photo); }
.story__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 32px; }

/* ---- values -------------------------------------------------------- */
.values__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--head-gap);
  padding: var(--section-y) var(--gx);
}
.values__title { margin: 0; text-align: center; }
.values__title .t-h2--regular { font-weight: 400; }
.values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); align-items: start; width: 100%; max-width: 1080px; }
.value-card {
  --ink: #1d2501; --bg: var(--color-tint-lime); --g-head: 24px;
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--space-6);
  border-radius: var(--radius-card); background: var(--bg); color: var(--ink);
}
.value-card--vision     { --ink: #41001d; --bg: var(--color-tint-pink);   --g-head: 26px; }
.value-card--commitment { --ink: #564600; --bg: var(--color-tint-yellow); --g-head: 14px; }
.value-card > * { position: relative; z-index: 1; }
.value-card::before {                               /* same paper grain as the feature rows, under the content */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.value-card__title { margin: var(--g-head) 0 0; font: 500 28px/33px var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.value-card__text { margin: 26px 0 0; font: 400 17px/22.75px var(--font-ui); color: rgba(3, 3, 2, .58); }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 1023px) {
  .about-hero .band__stage { height: auto; min-height: 441px; }
  .about-hero__inner { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-5); min-height: 441px; padding: 0 var(--gx) 52px; }   /* no gap above the grid: it runs up to the colour bars, as on desktop */
  .ag { position: static; width: min(100%, 520px); height: auto; aspect-ratio: 560 / 391; margin-top: -8px; }   /* tiles bleed under the top bars like the Figma (grid top is -8) */
  .ag__canvas { --u: calc(100cqw / 560); }
  .about-hero__title { position: static; margin: 0; }
  .story__row { grid-template-columns: 1fr; gap: var(--space-6); }
  .story__text p { font-size: clamp(22px, 3.6vw, 28px); line-height: 1.4; letter-spacing: -.03em; margin-bottom: 1em; }
  .story__media { width: 100%; max-width: none; }     /* fills the column, as wide as the text above it */
  .values__grid { grid-template-columns: 1fr; max-width: 560px; gap: var(--space-5); }
}
@media (max-width: 599px) {
  .value-card { padding: var(--space-5); }
  .value-card__title { font-size: 28px; line-height: 33px; }
  .story__media { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) { .ag-cursor { animation: none; } .ag-person }