/* ============================================================
   /about-us/ only - sections taken from Daniel's Miro mock-up
   ("Where it started", "How we work"). Loaded via adp_head('css').
   Colours: tokens from styles3.css only, so every colour scheme applies.
   ============================================================ */

/* left-aligned section head (Miro sets these heads flush left) */
.about-head {
    max-width: 760px;
    margin: 0 0 var(--space-2xl);
    text-align: left;
}

/* --- Where it started -------------------------------------- */
.about-origin {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: start;
}

.about-origin__text p {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text-body);
    margin: 0 0 var(--space-lg);
}

.about-origin__text .about-origin__punch {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-text-dark);
    margin: var(--space-xl) 0 0;
}

.about-figure {
    background: var(--btn-bg);
    color: var(--btn-fg);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    box-shadow: 0 16px 48px rgba(0, 36, 89, 0.12);
}

.about-figure__value {
    font-size: 56px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: var(--space-md);
}

.about-figure .about-figure__label {
    color: inherit;
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-md);
}

.about-figure .about-figure__source {
    color: inherit;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    opacity: 0.8;
    margin: 0;
}

/* --- Founders (D3, 2026-10-10) ------------------------------
   Own section under the hero: story left, two ~200 px circles right,
   stacked on phones. The circles are .team-member / .team-face from
   about-us/team.css (same markup as the team grid), only bigger. */
.about-founders {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3xl);
    align-items: center;
}

.about-founders__text { max-width: 560px; }

/* keeps "hands-on." in one piece - browsers break after the hyphen */
.about-founders__nobr { white-space: nowrap; }

.about-founders__text .tp-link { margin-top: var(--space-lg); }

.about-founders__people {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
}

.about-founders .team-member { width: 240px; }
.about-founders .team-face { --size: 200px; margin-bottom: var(--space-md); }
.about-founders .team-member__name { font-size: var(--text-lg); }

/* --- Meet the team teaser (D4 option 1) ----------------------
   The card is adp_team_teaser() = the homepage #team card (styles3.css
   sections 36 + 38). On the homepage it sits under a centred title with
   48 px card margin; here the section head already gives that gap. */
.about-team .about-head { margin-bottom: var(--space-2xl); }
.about-team .process__enterprise { margin-top: 0; }

/* --- Why we exist / principles: sections removed from the page
   2026-10-09 (Markus: too text-heavy). Copy kept, not rendered, in
   about_removed_why_and_principles() in about-us/index.php - and these
   rules with it, for reuse. */
.about-why {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.about-why p {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 var(--space-lg);
}

.about-why p:first-child {
    font-size: var(--text-lg);
    color: var(--color-text-white);
}

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

.about-why strong { color: var(--color-accent-on-dark); font-weight: var(--font-weight-semibold); }

.about-principles .lp-section__intro { margin-top: calc(var(--space-sm) * -1); }

@media (max-width: 1100px) {
    .about-founders { gap: var(--space-2xl); }
    .about-founders .team-member { width: 200px; }
    .about-founders .team-face { --size: 168px; }
}

@media (max-width: 900px) {
    .about-origin { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .about-figure__value { font-size: 44px; }
    .about-founders { grid-template-columns: 1fr; }
    .about-founders__text { max-width: 760px; }
    .about-founders .team-member { width: 240px; }
    .about-founders .team-face { --size: 200px; }
}

@media (max-width: 600px) {
    .about-founders__people { gap: var(--space-lg); }
    .about-founders .team-member { width: calc(50% - var(--space-lg) / 2); }
    .about-founders .team-face { --size: 140px; }
    .about-founders .team-member__name { font-size: var(--text-md); }
    .about-founders .team-member__role { font-size: var(--text-xs); line-height: 1.4; }
}