/* ============================================================
   JAMAR — About page components (.jm-a-*)
   Ported from the Claude Design handoff (pages/about-us.css, .jb-a-*)
   onto the --jm--* tokens in ../bricks-tokens.css (load that first).
   Shared pieces (container, section, eyebrow, sec-head, sub, button,
   link) come from bricks-tokens.css — only page-specific components
   live here.

   Placeholder panels (hero photo, leadership portraits, work tiles)
   are neutral surfaces until real photography is supplied.

   Breakpoints follow Bricks: 991px tablet, 767px mobile landscape,
   478px mobile portrait.
   ============================================================ */

/* ---------- Placeholder panel (photo not supplied yet) ---------- */

.jm-a-ph {
  display: grid;
  place-items: center;
  background: var(--jm--color-surface-alt);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
  color: var(--jm--color-text-muted);
  font-family: var(--jm--font-mono);
  font-size: var(--jm--text-xs);
  letter-spacing: var(--jm--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  padding: var(--jm--space-m);
}

/* ---------- 01 Hero ---------- */

.jm-a-hero {
  padding-block: var(--jm--space-3xl) var(--jm--space-2xl);
  background: var(--jm--color-surface);
  border-bottom: var(--jm--bar-thickness) solid var(--jm--color-brand);
}
.jm-a-hero__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--jm--space-2xl);
  align-items: center;
}
.jm-a-hero__copy h1 { max-width: 18ch; margin-bottom: var(--jm--space-m); }
.jm-a-hero__body {
  margin: 0 0 var(--jm--space-l);
  max-width: 56ch;
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text-muted);
}
.jm-a-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--jm--space-s); }
.jm-a-hero__image { aspect-ratio: 4 / 5; }

@media (max-width: 991px) {
  .jm-a-hero__grid { grid-template-columns: 1fr; gap: var(--jm--space-xl); }
  .jm-a-hero__image { aspect-ratio: 16 / 9; }
}

/* ---------- 02 Timeline ---------- */

.jm-a-tl {
  --jm-a-dot: 1rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--jm--space-m);
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-a-tl::before {
  content: '';
  position: absolute;
  top: calc(var(--jm-a-dot) / 2);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--jm--color-border);
}
.jm-a-tl__m { position: relative; padding-top: calc(var(--jm-a-dot) + var(--jm--space-m)); }
.jm-a-tl__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--jm-a-dot);
  height: var(--jm-a-dot);
  border-radius: 50%;
  background: var(--jm--color-surface);
  border: 3px solid var(--jm--color-brand);
}
.jm-a-tl__m--now .jm-a-tl__dot { background: var(--jm--color-brand); }
.jm-a-tl__year {
  display: block;
  margin-bottom: var(--jm--space-s);
  font-family: var(--jm--font-display);
  font-size: var(--jm--text-3xl);
  font-weight: var(--jm--weight-extrabold);
  letter-spacing: var(--jm--tracking-tight);
  line-height: 1;
  color: var(--jm--color-text);
}
.jm-a-tl__h {
  margin-bottom: var(--jm--space-2xs);
  font-size: var(--jm--text-l);
  font-weight: var(--jm--weight-semibold);
  letter-spacing: var(--jm--tracking-normal);
  line-height: var(--jm--leading-snug);
}
.jm-a-tl__b {
  margin: 0;
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}

@media (max-width: 991px) {
  .jm-a-tl { grid-template-columns: 1fr; gap: var(--jm--space-l); }
  .jm-a-tl::before {
    top: 0;
    bottom: 0;
    left: calc(var(--jm-a-dot) / 2);
    right: auto;
    width: 1px;
    height: auto;
  }
  .jm-a-tl__m { padding-top: 0; padding-left: calc(var(--jm-a-dot) + var(--jm--space-m)); }
  .jm-a-tl__dot { top: 0.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .jm-a-tl__m {
    opacity: 0;
    transform: translateY(var(--jm--space-xs));
    animation: jm-a-tl-in 0.5s var(--jm--ease-out) forwards;
  }
  .jm-a-tl__m:nth-child(2) { animation-delay: 0.1s; }
  .jm-a-tl__m:nth-child(3) { animation-delay: 0.2s; }
  .jm-a-tl__m:nth-child(4) { animation-delay: 0.3s; }
  .jm-a-tl__m:nth-child(5) { animation-delay: 0.4s; }
}
@keyframes jm-a-tl-in { to { opacity: 1; transform: none; } }

/* ---------- 03 Our path ---------- */

.jm-a-path__prose {
  display: grid;
  gap: var(--jm--space-m);
  max-width: var(--jm--content-max);
  padding-left: var(--jm--space-m);
  border-left: var(--jm--bar-thickness) solid var(--jm--color-brand);
}
.jm-a-path__prose p {
  margin: 0;
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text);
}

/* ---------- 04 How we work ---------- */

.jm-a-how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jm--space-l);
}
.jm-a-how__card { display: flex; flex-direction: column; }
.jm-a-how__h {
  margin-bottom: var(--jm--space-s);
  font-size: var(--jm--text-2xl);
  font-weight: var(--jm--weight-bold);
}
.jm-a-how__b {
  margin: 0;
  max-width: 38ch;
  font-size: var(--jm--text-base);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text-muted);
}

@media (max-width: 991px) {
  .jm-a-how__grid { grid-template-columns: 1fr; gap: var(--jm--space-l); }
}

/* ---------- 05 Leadership ---------- */

.jm-a-lead__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--jm--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-a-lead__card { position: relative; display: flex; flex-direction: column; }
.jm-a-lead__portrait { aspect-ratio: 4 / 5; margin-bottom: var(--jm--space-s); }
.jm-a-lead__years {
  position: absolute;
  top: var(--jm--space-s);
  left: var(--jm--space-s);
  padding: var(--jm--space-2xs) var(--jm--space-xs);
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-pill);
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-medium);
  color: var(--jm--color-text);
}
.jm-a-lead__name {
  margin-bottom: var(--jm--space-2xs);
  font-size: var(--jm--text-l);
  font-weight: var(--jm--weight-semibold);
  letter-spacing: var(--jm--tracking-normal);
  line-height: var(--jm--leading-snug);
}
.jm-a-lead__role {
  margin: 0 0 var(--jm--space-xs);
  font-size: var(--jm--text-base);
  font-weight: var(--jm--weight-medium);
  color: var(--jm--color-text-muted);
}
.jm-a-lead__bio {
  margin: 0;
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}
.jm-a-lead__caption {
  margin: var(--jm--space-l) 0 0;
  max-width: var(--jm--content-max);
  font-size: var(--jm--text-s);
  line-height: var(--jm--leading-normal);
  color: var(--jm--color-text-muted);
}

@media (max-width: 991px) {
  .jm-a-lead__grid { grid-template-columns: repeat(2, 1fr); gap: var(--jm--space-l) var(--jm--space-m); }
}
@media (max-width: 478px) {
  .jm-a-lead__grid { grid-template-columns: 1fr; }
}

/* ---------- 06 Reach ---------- */

.jm-a-reach__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--jm--space-2xl);
  align-items: center;
}
.jm-a-reach__copy h2 { margin-bottom: var(--jm--space-m); }
.jm-a-reach__body {
  margin: 0;
  max-width: 56ch;
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text-muted);
}
.jm-a-reach__map-art {
  aspect-ratio: 400 / 320;
  background: url("../img/about-reach-map.svg") center / contain no-repeat;
}
.jm-a-reach__caption {
  margin: var(--jm--space-s) 0 0;
  font-family: var(--jm--font-mono);
  font-size: var(--jm--text-xs);
  letter-spacing: var(--jm--tracking-wide);
  color: var(--jm--color-text-muted);
}

@media (max-width: 991px) {
  .jm-a-reach__grid { grid-template-columns: 1fr; gap: var(--jm--space-xl); }
}

/* ---------- 07 Sustainability teaser ---------- */

.jm-a-eco__body {
  margin: 0 0 var(--jm--space-m);
  max-width: var(--jm--content-max);
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text-muted);
}

/* ---------- 08 Trust strip (badges; logo wall added when files arrive) ---------- */

.jm-a-trust__badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jm--space-m);
  margin: 0;
  padding: var(--jm--space-m) 0 0;
  list-style: none;
  border-top: 1px solid var(--jm--color-border);
}
.jm-a-trust__badges li {
  font-size: var(--jm--text-base);
  color: var(--jm--color-text-muted);
  text-align: center;
}
.jm-a-trust__badges strong { color: var(--jm--color-text); font-weight: var(--jm--weight-semibold); }

@media (max-width: 767px) {
  .jm-a-trust__badges { grid-template-columns: 1fr; }
  .jm-a-trust__badges li { text-align: left; }
}

/* ---------- 09 Selected work ---------- */

.jm-a-work__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--jm--space-m);
  margin: 0 0 var(--jm--space-l);
  padding: 0;
  list-style: none;
}
.jm-a-work__tile { display: flex; flex-direction: column; }
.jm-a-work__img { aspect-ratio: 4 / 5; margin-bottom: var(--jm--space-s); }
.jm-a-work__cat {
  margin: 0 0 var(--jm--space-2xs);
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-semibold);
  letter-spacing: var(--jm--tracking-wide);
  text-transform: uppercase;
  color: var(--jm--color-text-muted);
}
.jm-a-work__h {
  font-size: var(--jm--text-base);
  font-weight: var(--jm--weight-semibold);
  letter-spacing: var(--jm--tracking-normal);
  line-height: var(--jm--leading-snug);
}
.jm-a-work__cta { display: flex; justify-content: flex-end; }

@media (max-width: 991px) {
  .jm-a-work__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 478px) {
  .jm-a-work__grid { grid-template-columns: 1fr; }
}

/* ---------- 10 Bottom CTA ---------- */

.jm-a-cta { padding-block: var(--jm--space-3xl); }
.jm-a-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jm--space-m);
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
}
.jm-a-cta__inner h2 { font-weight: var(--jm--weight-bold); color: var(--jm--color-on-surface-dark); }
.jm-a-cta__body {
  margin: 0;
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: color-mix(in srgb, var(--jm--color-on-surface-dark) 80%, transparent);
}
.jm-a-cta__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--jm--space-s);
  margin-top: var(--jm--space-xs);
}
.jm-a-cta__plain {
  margin: 0;
  font-size: var(--jm--text-s);
  color: color-mix(in srgb, var(--jm--color-on-surface-dark) 72%, transparent);
}
.jm-a-cta__plain a { color: var(--jm--color-on-surface-dark); text-decoration: none; }
.jm-a-cta__plain a:hover { color: var(--jm--color-brand-hover); }