/* About us: the trust page. One reading column (48rem), the agency facts
   and the founder's note as surfaces, then the story, the promise, the
   team, the areas and the next step. */
@layer page {
  .about { max-width: 48rem; padding-bottom: var(--sp-6); display: grid; row-gap: var(--sp-7); }

  /* Head */
  .about__head { padding-top: var(--sp-3); display: grid; gap: var(--sp-4); }
  .about__head h1 { max-width: 22ch; }
  .about__lead { font-size: var(--fs-l); line-height: 1.45; color: var(--ink-2); }
  .about__actions { margin-top: var(--sp-2); gap: var(--sp-3) var(--sp-5); }
  .about__link { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--ink); text-decoration: none; }
  .about__link:hover { text-decoration: underline; text-underline-offset: 0.14em; color: var(--ink); }
  .about__link .icon { color: var(--ink-3); }

  /* Facts: registration, founder, office, phone, e-mail. */
  .about__facts { padding: var(--sp-5); display: grid; gap: var(--sp-4); }
  .about__facts .facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--sp-4) var(--sp-5); }
  .about__facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); overflow-wrap: anywhere; }
  .about__facts dd .icon { color: var(--sea); }
  .about__raicv .raicv__plaque { width: 15rem; }
  /* The facts below name the registration in words: no second caption. */
  .about__raicv .raicv__plaque + .raicv__text { display: none; }
  .about__facts-link { font-weight: 400; font-size: var(--fs-xs); min-height: 1.5rem; display: inline-flex; align-items: center; }
  .about__facts-note { max-width: none; font-size: var(--fs-xs); color: var(--ink-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); }

  /* The founder's note */
  .about__note { padding: var(--sp-5); display: grid; gap: var(--sp-4); }
  .about__note h2 { font-size: var(--fs-xl); }
  .about__agent img { width: 4.5rem; height: 4.5rem; }
  .about__prose { line-height: 1.6; }
  .about__quote { border-left: 3px solid var(--brand); padding: var(--sp-1) 0 var(--sp-1) var(--sp-4); }
  .about__quote p { font-size: var(--fs-l); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }

  /* Sections */
  .about__section { display: grid; gap: var(--sp-4); }
  .about__section h2 { font-size: var(--fs-xl); }
  .about__section .section__head { margin-bottom: 0; }
  .about__section .section__head h2 { font-size: var(--fs-xl); }
  .about__section .section__head > a { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
  .about__section .section__lead { margin-top: calc(-1 * var(--sp-2)); }

  /* What to expect: three numbered principles. */
  .about__principles { display: grid; gap: var(--sp-4); }
  .about__principles li { display: grid; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); align-content: start; }
  .about__principle-num { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
  .about__principles h3 { font-size: var(--fs-m); }
  .about__principles p { color: var(--ink-2); font-size: var(--fs-s); }

  /* Team */
  .about__team { display: grid; gap: var(--sp-4); }
  .about__member { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
  .about__member-text { color: var(--ink-2); font-size: var(--fs-s); }

  /* Areas covered: one row per region, name, stock and places. */
  .about__regions { border-top: 1px solid var(--line); }
  .about__regions li { border-bottom: 1px solid var(--line); }
  .about__region { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name icon" "meta icon"; column-gap: var(--sp-3); row-gap: var(--sp-1); align-items: center; padding: var(--sp-4) 0; color: var(--ink); text-decoration: none; }
  .about__region-name { grid-area: name; font-weight: 650; font-size: var(--fs-l); line-height: 1.3; }
  .about__region-meta { grid-area: meta; color: var(--ink-2); font-size: var(--fs-s); line-height: 1.45; }
  .about__region .icon { grid-area: icon; color: var(--ink-3); }
  .about__region:hover .about__region-name { text-decoration: underline; text-underline-offset: 0.14em; }
  .about__region:hover .icon { color: var(--ink); }

  /* Next step */
  .about__cta .cluster { gap: var(--sp-2) var(--sp-3); }
  .about__cta-agent { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

  @media (min-width: 48em) {
    .about__head { padding-top: var(--sp-5); }
    .about__facts, .about__note, .about__member, .about__cta { padding: var(--sp-6); }
    .about__prose { font-size: 1.125rem; }
    .about__principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
    .about__region { grid-template-columns: 12rem minmax(0, 1fr) auto; grid-template-areas: "name meta icon"; column-gap: var(--sp-5); }
  }
}