/* ---- CSS di pagina: chi-siamo --------------------------------------
       Solo componenti locali: ritratto tipografico del fondatore e schema
       della rete (nodi coordinati). Tutto il resto viene da css/style.css. */

    /* Ritratto del fondatore: foto reale in cornice, targhetta in basso su
       scrim scuro (il blazer è già scuro → il testo bianco resta leggibile). */
    .founder-portrait {
      position: relative;
      aspect-ratio: 4 / 5;
      border-radius: var(--radius-m);
      overflow: hidden;
      background: var(--paper);
      border: 1px solid var(--line);
      box-shadow: 0 24px 60px rgba(11, 26, 44, 0.12);
    }
    .founder-portrait__photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 14%;   /* volto ben posizionato in alto */
    }
    .founder-portrait__cap {
      position: absolute;
      inset: auto 0 0 0;
      display: grid;
      gap: 0.2rem;
      padding: var(--space-2xl) var(--space-l) var(--space-l);
      background: linear-gradient(to top, rgba(11, 26, 44, 0.86), rgba(11, 26, 44, 0.4) 55%, transparent);
      color: var(--text-on-dark);
    }
    .founder-portrait__role {
      font-size: var(--size-caption);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: var(--tracking-caps);
      color: var(--green-signal);
    }
    .founder-portrait__name {
      font-size: clamp(1.6rem, 3.4vw, 2.4rem);
      font-stretch: 122%;
      font-weight: 750;
      line-height: 1.08;
      letter-spacing: var(--tracking-display);
    }
    .founder-portrait__name em { font-style: normal; }
    .founder-portrait__place {
      font-size: 0.9375rem;
      color: var(--text-on-dark-soft);
    }

    /* Convinzioni: la fact-list passa su due colonne da tablet in su */
    @media (min-width: 768px) {
      .values-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-3xl);
      }
    }

    /* Cerchio d'oro (Perché → Come → Cosa): si parte sempre dal Perché. */
    .golden { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: var(--space-l); }
    .golden__lead {
      font-size: var(--size-lead);
      font-stretch: 112%;
      font-weight: 700;
      max-width: 34ch;
    }
    .golden__rings { display: grid; gap: var(--space-l); }
    @media (min-width: 768px) {
      .golden__rings { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
    }
    .golden__ring {
      display: grid; gap: var(--space-xs); align-content: start;
      padding-top: var(--space-m);
      border-top: 2px solid var(--line);
    }
    .golden__ring--why { border-top-color: var(--cobalt); }
    .golden__k {
      font-size: var(--size-caption); font-weight: 700;
      text-transform: uppercase; letter-spacing: var(--tracking-caps);
      color: var(--ink-soft);
    }
    .golden__ring--why .golden__k { color: var(--cobalt); }
    .golden__ring p { color: var(--ink-soft); text-wrap: pretty; }
    .golden__ring--why p { color: var(--ink); font-weight: 550; }