/**
 * About Us — built to the supplied desktop and mobile wireframes.
 *
 * Loaded only on the About template, versioned by filemtime and kept
 * outside the production bundle (the components-unbundled treatment),
 * so it can never go stale behind the bundle guard.
 *
 * The one structural difference between the two wireframes is that the
 * lower sections are plain blocks on desktop and collapsible on mobile.
 * That is handled with native <details>: the markup carries `open`, so
 * everything is expanded by default; below 768px the summary becomes a
 * tappable row and the visitor can collapse sections. No JavaScript,
 * and the content is in the DOM at every width.
 */

/* ---- Page scaffold ------------------------------------------------ */

.about {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1200px;
}

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

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 1.5rem 0 0.5rem;
}

.about-hero__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  color: var(--color-primary);
}

.about-hero__heading {
  margin: 0 0 0.9rem;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  color: var(--color-ink-heading);
  /* break-word, never anywhere: long words such as "opportunities"
     move to the next line whole rather than splitting. */
  overflow-wrap: break-word;
}

.about-hero__lede {
  margin: 0 0 1.25rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 52ch;
}

.about-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.about-hero__ctas .btn {
  font-size: 0.84rem;
}

/* ---- Ecosystem visual --------------------------------------------- */

/* Six nodes on a ring around the JDE mark. Sized in em against the
   container's font-size so the whole figure scales as one unit. */
.about-orbit {
  position: relative;
  aspect-ratio: 1 / 0.78;
  min-height: 320px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(124, 111, 247, 0.16), transparent 70%),
    linear-gradient(140deg, #F4F2FE, #EAF3FE);
  overflow: hidden;
}

/* Sized for the full wordmark rather than a three-letter tile: a pill,
   so eight characters fit without shrinking the type to nothing. */
.about-orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  height: 2.9rem;
  padding: 0 1rem;
  border-radius: var(--radius-full);
  background: linear-gradient(150deg, var(--color-primary), var(--color-primary-deep));
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: var(--shadow-brand-sm);
}

.about-orbit__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 5.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--color-ink);
}

.about-orbit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.about-orbit__label {
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  overflow-wrap: break-word;
}

.about-orbit__node:hover .about-orbit__icon,
.about-orbit__node:focus-visible .about-orbit__icon {
  transform: translateY(-2px);
}

/* Ring positions, clockwise from the top, matching the wireframe. */
.about-orbit__node--n1 { top: 16%; left: 50%; }
.about-orbit__node--n2 { top: 26%; left: 79%; }
.about-orbit__node--n3 { top: 44%; left: 21%; }
.about-orbit__node--n4 { top: 55%; left: 82%; }
.about-orbit__node--n5 { top: 76%; left: 34%; }
.about-orbit__node--n6 { top: 78%; left: 66%; }

/* ---- Mission & Vision --------------------------------------------- */

.about-mv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.about-mv__card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  min-width: 0;
}

.about-mv__card--mission { background: #F5F3FE; }
.about-mv__card--vision  { background: #F1FAF4; }

.about-mv__icon {
  flex: 0 0 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
}

.about-mv__card--mission .about-mv__icon { color: var(--color-primary); }
.about-mv__card--vision  .about-mv__icon { color: var(--color-positive); }

.about-mv__title {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.about-mv__card--mission .about-mv__title { color: var(--color-primary-text); } /* text on the lilac card: fill token is 4.18:1 */
.about-mv__card--vision  .about-mv__title { color: var(--color-positive); }

.about-mv__text {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

/* ---- Foldable sections -------------------------------------------- */

.about-fold {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  padding: 1.15rem 1.25rem;
  min-width: 0;
}

/* Desktop: the summary is a plain section heading. The marker and
   chevron are hidden and the row is not interactive, because there is
   nothing to collapse at this width. */
.about-fold__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  cursor: default;
  margin-bottom: 0.9rem;
}

.about-fold__summary::-webkit-details-marker {
  display: none;
}

.about-fold__summary-icon,
.about-fold__chev {
  display: none;
}

.about-fold__summary-text {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
  color: var(--color-ink-heading);
}

.about-fold__body > p {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.about-fold__body > p:last-child {
  margin-bottom: 0;
}

/* ---- Values -------------------------------------------------------- */

.about-values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.9rem;
}

.about-values__item {
  min-width: 0;
  text-align: center;
  padding: 0 0.35rem;
  border-inline-start: 1px solid var(--color-border-soft);
}

.about-values__item:first-child {
  border-inline-start: 0;
}

.about-values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.about-values__item--community  .about-values__icon { color: var(--color-primary); }
.about-values__item--trust      .about-values__icon { color: #2563EB; }
.about-values__item--learning   .about-values__icon { color: var(--color-positive); }
.about-values__item--inclusive  .about-values__icon { color: #DB2777; }
.about-values__item--innovation .about-values__icon { color: var(--color-warning); }
.about-values__item--privacy    .about-values__icon { color: var(--color-primary-deep); }

.about-values__title {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.about-values__item--community  .about-values__title { color: var(--color-primary); }
.about-values__item--trust      .about-values__title { color: #2563EB; }
.about-values__item--learning   .about-values__title { color: var(--color-positive); }
.about-values__item--inclusive  .about-values__title { color: #DB2777; }
.about-values__item--innovation .about-values__title { color: var(--color-warning); }
.about-values__item--privacy    .about-values__title { color: var(--color-primary-deep); }

.about-values__text {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

/* ---- Story + What We Do ------------------------------------------- */

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  gap: 1rem;
  align-items: start;
}

/* Specificity rather than a priority flag: these override
   .about-fold__body > p, so they carry the same two-class weight plus
   the child combinator. The project's shrink-only ratchet stays at
   its mark. */
.about-fold__body > p.about-story__note {
  color: var(--color-primary);
}

.about-fold__body > p.about-story__sign {
  font-size: 0.8rem;
  color: var(--color-ink);
}

.about-do {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.about-do__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

.about-do__icon {
  flex: 0 0 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
}

.about-do__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.about-do__title {
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

.about-do__text {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

/* ---- Who We Serve -------------------------------------------------- */

.about-serve__lede {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.about-serve {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.about-serve__chip {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--color-ink);
}

/* ---- Commitments --------------------------------------------------- */

.about-commit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem 1.25rem;
}

.about-commit__item {
  min-width: 0;
  padding-inline-start: 0.75rem;
  border-inline-start: 2px solid var(--color-border);
}

.about-commit__title {
  display: block;
  font-size: 0.82rem;
  color: var(--color-ink);
}

.about-commit__text {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

/* ---- Editor body content ------------------------------------------ */

.about-body {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  font-size: 0.88rem;
  line-height: 1.65;
}

/* ---- Closing CTA --------------------------------------------------- */

.about-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #F1EFFE, #EAF2FE);
}

.about-cta__icon {
  flex: 0 0 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
}

.about-cta__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.about-cta__title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  color: var(--color-ink-heading);
  overflow-wrap: break-word;
}

.about-cta__text {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

.about-cta__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.6rem;
  /* One button now, so the column takes only what it needs and the
     copy beside it keeps the recovered width. */
  align-items: center;
}

.about-cta__actions .btn {
  font-size: 0.82rem;
  white-space: nowrap;
}

/* ---- Focus visibility ---------------------------------------------- */

.about a:focus-visible,
.about summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .about-orbit__icon {
    transition: none;
  }

  .about-orbit__node:hover .about-orbit__icon,
  .about-orbit__node:focus-visible .about-orbit__icon {
    transform: none;
  }
}

/* ---- ≤1199: values wrap, split stacks ------------------------------ */

@media (max-width: 1199px) {
  .about-values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 0.9rem;
  }

  .about-values__item {
    border-inline-start: 0;
  }

  .about-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- ≤1023: hero stacks, mission/vision stack ---------------------- */

@media (max-width: 1023px) {
  .about-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .about-mv {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-cta {
    flex-wrap: wrap;
  }

  .about-cta__actions {
    flex: 1 1 100%;
  }
}

/* ---- ≤767: the mobile wireframe ------------------------------------ */

@media (max-width: 767px) {
  .about {
    gap: 0.9rem;
  }

  .about-hero {
    padding-top: 1rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, #F5F3FE, #EEF5FE);
    padding: 1.1rem;
  }

  .about-hero__heading {
    font-size: 1.35rem;
  }

  .about-hero__lede {
    font-size: 0.82rem;
    max-width: none;
  }

  /* A single button: full width on mobile reads as the page's one
     action, which is exactly what it now is. */
  .about-hero__ctas .btn {
    flex: 1 1 100%;
    justify-content: center;
    font-size: 0.8rem;
  }

  .about-orbit {
    min-height: 200px;
    aspect-ratio: 1 / 0.6;
    background: none;
  }

  .about-orbit__core {
    min-width: 6.2rem;
    height: 2.4rem;
    padding: 0 0.8rem;
    font-size: 0.76rem;
  }

  /* Labels are dropped on mobile, as drawn — the icons ring the mark
     and the text would collide at this size. Each node keeps its
     accessible name from the label text, which is only visually
     hidden, so nothing is lost to a screen reader. */
  .about-orbit__node {
    width: auto;
  }

  .about-orbit__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .about-orbit__icon {
    width: 2.1rem;
    height: 2.1rem;
  }

  .about-orbit__node--n1 { top: 20%; left: 28%; }
  .about-orbit__node--n2 { top: 20%; left: 72%; }
  .about-orbit__node--n3 { top: 50%; left: 14%; }
  .about-orbit__node--n4 { top: 50%; left: 86%; }
  .about-orbit__node--n5 { top: 80%; left: 28%; }
  .about-orbit__node--n6 { top: 80%; left: 72%; }

  /* Sections become real accordions: the summary is tappable, the
     chevron shows state, and the section icon appears as drawn. */
  .about-fold {
    padding: 0.85rem 1rem;
  }

  .about-fold__summary {
    cursor: pointer;
    margin-bottom: 0;
    gap: 0.6rem;
  }

  .about-fold[open] .about-fold__summary {
    margin-bottom: 0.85rem;
  }

  .about-fold__summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary);
    flex: 0 0 auto;
  }

  .about-fold__summary-text {
    flex: 1 1 auto;
    font-size: 0.92rem;
  }

  .about-fold__chev {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--color-text-muted);
    transform: rotate(90deg);
    transition: transform var(--transition-fast);
  }

  .about-fold[open] .about-fold__chev {
    transform: rotate(270deg);
  }

  .about-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-values__item {
    text-align: left;
    padding: 0;
  }

  .about-do {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-commit {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .about-cta__actions {
    width: 100%;
  }

  .about-cta__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .about-fold__chev {
    transition: none;
  }
}

/* ---- ≤389: tightest phones ----------------------------------------- */

@media (max-width: 389px) {
  .about-hero__heading {
    font-size: 1.2rem;
  }

  .about-values {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-cta__actions {
    flex-direction: column;
  }
}