/* About page: loaded after styles.css */

/* ---------- Story + facts ---------- */
.story h2 { margin-block-end: 1.25rem; }
.story p { font-size: 1.06rem; }
.story__h3 { font-size: var(--step-2); margin-block: 2.5rem 0.75rem; }
.facts { align-self: start; border-block-start: 2px solid var(--ink); }
.facts dl { margin: 0; }
.facts dl > div { display: grid; gap: 0.15rem; padding: 1rem 0; border-block-end: 1px solid var(--line); }
.facts dt { font-size: var(--step--1); color: var(--slate); }
.facts dd { margin: 0; font: 600 var(--step-1)/1.25 var(--font-display); }

/* ---------- Offices ---------- */
.offices { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .offices { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.office { border-block-start: 2px solid var(--ink); padding-block-start: 1.5rem; }
@media (min-width: 900px) {
  .office { padding-inline-end: 1.75rem; }
  .office + .office { padding-inline-start: 1.75rem; border-inline-start: 1px solid var(--line); }
}
.office > svg { width: 24px; height: 24px; color: var(--indigo); margin-block-end: 1rem; display: block; }
.office h3 { font-size: var(--step-3); margin-block-end: 0.1rem; }
.office__country { color: var(--cobalt-text); font-weight: 500; margin-block-end: 1rem; }
.office address { font-style: normal; color: var(--slate); line-height: 1.6; }
.office__hours { margin: 1rem 0 0; padding-block-start: 0.75rem; border-block-start: 1px solid var(--line); color: var(--ink); font-size: 0.95rem; line-height: 1.6; font-variant-numeric: tabular-nums; }

/* ---------- Values (dark section) ---------- */
.values { display: grid; gap: 0; border-block-start: 1px solid var(--line-dark); }
@media (min-width: 800px) { .values { grid-template-columns: repeat(2, 1fr); } }
.value { padding: 2rem 0; border-block-end: 1px solid var(--line-dark); }
@media (min-width: 800px) {
  .value:nth-child(odd) { padding-inline-end: 2.5rem; border-inline-end: 1px solid var(--line-dark); }
  .value:nth-child(even) { padding-inline-start: 2.5rem; }
}
.value h3 { font-size: var(--step-3); margin-block-end: 0.6rem; color: var(--sky); }
.value > p { color: var(--on-dark-muted); max-width: 32em; }
.value__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.97rem; color: var(--on-dark-subtle); }
.value__list li { padding-inline-start: 1.25rem; position: relative; }
.value__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 0.6rem; height: 1.5px; background: var(--cobalt); }

/* ---------- Leadership list with expandable detail ---------- */
.team { list-style: none; margin: 0; padding: 0; border-block-start: 2px solid var(--ink); }
.team > li { border-block-end: 1px solid var(--line); }
.member summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.25rem 1.25rem;
  padding: 1.25rem 0;
}
.member summary::-webkit-details-marker { display: none; }
.member summary:focus-visible { outline-offset: 2px; }

.monogram {
  width: 3.25rem; height: 3.25rem; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--indigo); border-radius: 50%;
  font: 600 1.05rem/1 var(--font-display); letter-spacing: 0.04em; color: var(--indigo);
  background: var(--white);
  transition: background-color var(--dur-state) ease, color var(--dur-state) ease;
}
.member[open] .monogram { background: var(--indigo); color: var(--white); }

.member__id { display: grid; gap: 0.2rem; min-width: 0; }
.member__name { margin: 0; font-size: var(--step-2); transition: color var(--dur-hover) ease; }
.member__role { color: var(--slate); font-size: 0.95rem; line-height: 1.35; }
.member__prev { display: none; color: var(--slate); font-size: 0.93rem; line-height: 1.4; }
.member__chev { width: 18px; height: 18px; color: var(--ink); transition: transform var(--dur-state) var(--ease-out); }
.member[open] .member__chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .member summary:hover .member__name { color: var(--indigo); }
}

@media (min-width: 900px) {
  .member summary { grid-template-columns: auto minmax(16rem, 1.2fr) 1fr auto; gap: 1.5rem; }
  .member__prev { display: block; }
}

.member__body { padding-block: 0 1.75rem; padding-inline: calc(3.25rem + 1.25rem) 0; display: grid; gap: 1.25rem; max-width: 60rem; }
.member__body p { margin: 0; max-width: 40em; }
.member__facts { margin: 0; display: grid; gap: 0.75rem; }
.member__facts > div { display: grid; gap: 0.1rem; }
.member__facts dt { font-size: var(--step--1); color: var(--slate); }
.member__facts dd { margin: 0; }
@media (min-width: 900px) {
  .member__body { grid-template-columns: 1.3fr 1fr; gap: 2.5rem; padding-inline-start: calc(3.25rem + 1.5rem); }
  .member__body:has(> :only-child), .member__body:has(> p:last-child) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .member summary { padding-block: 1rem; }
}
@media (max-width: 560px) {
  .member__body { padding-inline-start: 0; }
  .monogram { width: 2.75rem; height: 2.75rem; font-size: 0.95rem; }
}

/* Open: the bio settles in from its summary. Close stays instant. No height animation. */
.member[open] > .member__body { animation: acc-in var(--dur-enter) var(--ease-out) both; }
@keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes acc-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .member[open] > .member__body { animation: acc-fade 150ms ease both; }
  .member__chev, .member__name, .monogram { transition: none; }
}

@media (forced-colors: active) {
  .monogram { border-color: CanvasText; }
}