/* ==========================================================================
   about.css — who the holding company actually is, on paper.

   The section is deliberately the plainest on the page: this is the one
   place a reader goes looking for facts rather than atmosphere, so the
   record panel is set like a registry extract — mono labels, hairline
   rows, no decoration that isn't carrying information.
   ========================================================================== */

.about__grid { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }

@media (min-width: 1000px) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: start;
    gap: var(--s-8);
  }
}

/* --- Left column: the narrative ----------------------------------------- */

.about__prose > * + * { margin-top: var(--s-5); }

.about__mark {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: contain;
  padding: 12px;
  background: rgba(43, 33, 20, 0.05);
  border: 1px solid var(--line);
}

.about__statement {
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -0.015em;
  max-width: 30ch;
}

/* --- The distinction note ------------------------------------------------
   Holdings and the JV are two separate companies with two separate
   registrations. Readers conflate them, so the page says so outright. */

.note {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--c-kunyit) 42%, transparent);
  background: color-mix(in srgb, var(--c-kunyit) 9%, transparent);
}

.note__label {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-kunyit) 78%, var(--fg));
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.note__label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-kunyit);
  flex: none;
}

.note__body { font-size: var(--fs-sm); color: var(--fg-dim); }
.note__body strong { font-weight: 500; color: var(--fg); }

/* --- Right column: the registered record --------------------------------- */

.record {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(43, 33, 20, 0.055), rgba(43, 33, 20, 0.012));
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.record__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
}

.record__seal {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}

.record__row {
  display: grid;
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
}

@media (min-width: 540px) {
  .record__row {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.record__label {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.record__value { font-size: var(--fs-base); font-weight: 300; }

/* Registration numbers and dates are data, so they are set as data. */
.record__value--mono {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}

.record__value small {
  display: block;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  letter-spacing: 0;
  color: var(--fg-faint);
  margin-top: 0.3rem;
}

/* --- Registered activities -----------------------------------------------
   Three MSIC entries. Each carries the accent of the part of the group it
   maps onto, so the legal record and the loop read as the same company. */

.acts { display: grid; gap: var(--s-4); margin-top: var(--s-2); }

.act {
  --act-accent: var(--accent);
  padding-left: var(--s-4);
  border-left: 2px solid var(--act-accent);
}

.act__no {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--act-accent);
  display: block;
  margin-bottom: 0.35rem;
}

.act__text { font-size: var(--fs-sm); font-weight: 400; }

.act__gloss {
  display: block;
  font-size: var(--fs-sm);
  color: var(--fg-dim);
  margin-top: 0.25rem;
}