/* 08 — About */

/* ---------- Hero ---------- */
.ab-hero { min-height: 968px; padding: 152px 0 64px; }
.ab-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; }
.ab-hero__title {
  margin-top: 94px;
  font: 300 clamp(52px, 8.34vw, 120px)/1 var(--f-sans);
  letter-spacing: -.02em; text-transform: uppercase;
}
.ab-hero__sub { margin-top: 60px; width: 520px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.ab-hero__bridge {
  position: absolute; right: 0; bottom: 0;
  width: 57.99%; aspect-ratio: 835 / 682; overflow: hidden; pointer-events: none;
}
.ab-hero__bridge img { position: absolute; left: -1.36%; bottom: 0; width: 193.88%; max-width: none; height: auto; }

/* ---------- What we stand for ---------- */
.ab-stand { padding: 140px 0; }
.ab-stand__head { display: flex; flex-direction: column; gap: 16px; padding-bottom: 64px; }
.ab-stand__row { display: flex; gap: 80px; padding: 40px 0; border-top: 1px solid var(--ink); }
.ab-stand__row .h3 { flex: none; width: 320px; font-size: 28px; }
.ab-stand__text { flex: 1; min-width: 0; font: 300 clamp(26px, 3.34vw, 48px)/1.1 var(--f-sans); letter-spacing: -.01em; }

/* ---------- Brand values ---------- */
.ab-values { padding: 140px 0 160px; position: relative; }
/* Brand values: textured paper postcards scattered across the section.
   Each card floats gently; on desktop they can be picked up and dragged. */
.ab-values__mark { position: absolute; left: 50%; top: 52%; translate: -50% -50%; width: min(1100px, 90vw); max-width: none; opacity: .045; pointer-events: none; filter: grayscale(1); }
.vstage { position: relative; height: 1010px; margin: 24px 0 0; padding: 0; list-style: none; }
.vcard {
  --w: clamp(240px, 21vw, 320px);
  position: absolute; left: min(var(--x), calc(100% - var(--w))); top: var(--y); width: var(--w); z-index: 1;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .7s var(--ease-out), opacity .85s var(--ease-out) !important;
  transition-delay: var(--d, 0s);
}
.vcard.is-dragging { cursor: grabbing; transition: none !important; }
.vcard__in {
  position: relative; overflow: hidden; aspect-ratio: 3 / 2;
  display: flex; flex-direction: column; justify-content: space-between; padding: 14px 18px 16px;
  background: #ebebe4; color: var(--ink);
  box-shadow: 0 1px 2px rgba(27, 19, 19, .08), 0 16px 34px rgba(27, 19, 19, .14), inset 0 0 40px rgba(110, 104, 92, .18);
  animation: vfloat var(--f, 8s) ease-in-out infinite alternate;
  transition: box-shadow .4s var(--ease-out), scale .4s var(--ease-out);
}
/* paper grain + worn print */
.vcard__in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .28  0 0 0 0 .25  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes vfloat { from { translate: 0 -5px; } to { translate: 0 6px; } }
.vcard:hover { z-index: 5; }
.js .vcard.is-in:hover { transform: rotate(0deg); }
.vcard:hover .vcard__in { scale: 1.04; box-shadow: 0 2px 4px rgba(27, 19, 19, .08), 0 28px 50px rgba(27, 19, 19, .2), inset 0 0 40px rgba(110, 104, 92, .18); }
.vcard__mono { position: relative; z-index: 1; font: 400 10px/1.4 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: rgba(27, 19, 19, .72); }
.vcard__mono b { font-weight: 500; color: var(--ink); }
.vcard__desc { text-align: left; letter-spacing: .06em; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.vcard__ghost {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  font: 400 clamp(150px, 13vw, 210px)/1 var(--f-script); color: rgba(27, 19, 19, .1);
  pointer-events: none; filter: blur(.4px);
}
.vcard__name { position: relative; z-index: 1; margin-top: auto; font: 400 clamp(34px, 3vw, 46px)/1.05 var(--f-script); color: var(--ink); text-wrap: balance; }
/* photo cards: halftone black-and-white print */
.vcard--photo .vcard__in { padding: 0; justify-content: center; background: #e9e9e2; }
.vcard--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: .92; }
.vcard--photo .vcard__in::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: .35;
  background: radial-gradient(circle, transparent 0 1px, #fff 1.4px) 0 0 / 4px 4px;
}
.vcard__mono--mid { padding: 4px 8px; font-size: 11px; color: var(--ink); background: rgba(235, 235, 228, .55); align-self: center; }
@media (prefers-reduced-motion: reduce) { .vcard__in { animation: none; } }
@media (max-width: 980px) {
  .ab-values__mark { top: 60%; }
  .vstage { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .vcard { position: relative; left: auto; top: auto; width: auto; cursor: default; touch-action: auto; }
  .js .vcard.is-in { transform: rotate(calc(var(--rot) * .5)); }
}
@media (max-width: 560px) {
  /* phone: the postcards become a swipeable deck */
  .vstage {
    display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 24px var(--gutter) 40px;
  }
  .vstage::-webkit-scrollbar { display: none; }
  .vcard { flex: 0 0 80%; scroll-snap-align: center; }
  .vcard__name { font-size: 40px; }
}
.ab-values__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 72px; }
.ab-values__head > div { display: flex; flex-direction: column; gap: 16px; }
.ab-values__lede { width: 440px; max-width: 100%; }

/* ---------- See what's true ---------- */
.ab-true { background: var(--wine); min-height: 640px; padding: 150px 0 120px; }
.ab-true__bridge { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; overflow: hidden; pointer-events: none; }
.ab-true__bridge img { position: absolute; left: -2.08%; bottom: 0; width: 104.17%; max-width: none; height: auto; }
.ab-true__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }
.ab-true__inner .serif-xl { line-height: 1; }
.ab-true__lede { width: 420px; max-width: 100%; }

/* ---------- Company profile ---------- */
.ab-profile { padding: 140px 0; }
.ab-profile__inner { display: flex; align-items: center; gap: 96px; }
.ab-profile__book { flex: none; width: 460px; height: 492px; object-fit: cover; }
.ab-profile__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.ab-profile__text .serif-xl { line-height: 1; }
.ab-profile__lede { width: 520px; max-width: 100%; }

/* ---------- CTA ---------- */
.ab-cta { padding: 40px 0 120px; }
.ab-cta__card {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding: 80px; border-radius: 32px; background: var(--wine); text-align: center;
}
.ab-cta__title { line-height: 1; }
.ab-cta__card .btn { margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {

@media (max-width: 980px) {
  .ab-hero { min-height: 0; padding: 120px 0 0; display: flex; flex-direction: column; }
  .ab-hero__bridge { order: 2; }
  .ab-hero__title { margin-top: 56px; }
  .ab-hero__sub { margin-top: 40px; }
  .ab-hero__bridge { position: relative; width: 100%; margin-top: 24px; margin-left: auto; aspect-ratio: 835 / 560; }

  .ab-stand, .ab-values, .ab-profile { padding: 96px 0; }
  .ab-stand__row { flex-direction: column; gap: 12px; padding: 28px 0; }
  .ab-stand__row .h3 { width: auto; font-size: 22px; }

  .ab-values__head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 48px; }

@media (max-width: 560px) {
  .ab-hero__title { font-size: clamp(40px, 12vw, 52px); }