/* ---------- founders ----------
   Horizontal cards: mark on one side, text on the other. No coloured top bar (site rule),
   no centred-avatar-above-name stack - that arrangement repeated three times across is the
   stock "meet the team" template. */
.founders{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;border-top:1px solid var(--line)}
@media (max-width:900px){.founders{grid-template-columns:1fr}}
.founder{display:flex;gap:16px;align-items:flex-start;padding:30px 0}
.founders > .founder + .founder{border-inline-start:1px solid var(--line)}
.founder:not(:first-child){padding-inline-start:28px}
.founder:not(:last-child){padding-inline-end:28px}
@media (max-width:900px){
  .founders > .founder + .founder{border-inline-start:0;border-top:1px solid var(--line)}
  .founder{padding-inline:0!important}
}
/* Real photography now that the partner headshots are in. The three source images differ in
   crop and aspect (1254x1254, 912x801, 800x800), so object-fit + a fixed square keeps them
   visually consistent instead of one appearing stretched. AI portraits stay forbidden (spec 15). */
.founder-photo{
  flex:0 0 auto;width:78px;height:78px;border-radius:14px;object-fit:cover;object-position:center 22%;
  background:var(--paper);border:1px solid var(--line);
}
@media (max-width:900px){.founder-photo{width:66px;height:66px}}
.founder-here{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-size:13.5px!important;color:var(--teal-d)!important;font-weight:600;line-height:1.5;
}
.founder-body h3{font-size:19px;margin-bottom:3px}
.founder-role{color:var(--teal);font-weight:800;font-size:13px;letter-spacing:.03em;margin-bottom:10px}
.founder-body p:last-child{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- methodology ----------
   One continuous spine grouped into three phases. Spec §15 forbids showing the methodology
   as eight identical icon cards; the phase grouping carries the actual argument - that
   understanding comes before building, and building before rollout. */
.method{margin-top:38px;display:flex;flex-direction:column;gap:0}
.method-phase{display:grid;grid-template-columns:220px 1fr;gap:40px;padding:34px 0;border-top:1px solid var(--line)}
.method-phase:last-child{border-bottom:1px solid var(--line)}
@media (max-width:820px){.method-phase{grid-template-columns:1fr;gap:20px}}
.phase-head{position:sticky;top:calc(var(--hh) + 28px);align-self:start}
@media (max-width:820px){.phase-head{position:static}}
.phase-tag{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  color:var(--teal);background:color-mix(in srgb, var(--teal) 10%, transparent);
  border-radius:999px;padding:4px 11px;margin-bottom:11px;
}
.phase-head h3{font-size:21px;margin-bottom:6px}
.phase-head p{font-size:14px;color:var(--muted)}

.phase-steps{display:flex;flex-direction:column;gap:22px}
.phase-steps li{display:flex;gap:16px;align-items:flex-start;position:relative}
/* the spine: a hairline running through the numerals, drawn only between them */
.phase-steps li:not(:last-child)::before{
  content:"";position:absolute;top:34px;bottom:-22px;inset-inline-start:17px;
  width:1px;background:var(--line);
}
.step-n{
  flex:0 0 auto;width:35px;height:35px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--line);
  font-family:var(--font-display);font-size:12.5px;font-weight:800;color:var(--teal-d);
  position:relative;z-index:1;
}
.phase-steps strong{display:block;font-size:16px;font-weight:800;margin-bottom:4px}
.phase-steps p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---------- why Alevectis ----------
   Divided rows rather than a grid of bordered cards. This section previously used a
   .why-list class that had no CSS anywhere in the project, so it rendered as a raw
   unstyled <ul>. */
.why-rows{margin-top:34px;border-top:1px solid var(--line)}
.why-row{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:40px;padding:28px 0;border-bottom:1px solid var(--line)}
@media (max-width:820px){.why-row{grid-template-columns:1fr;gap:10px}}
.why-row h3{font-size:19px;line-height:1.3}
.why-row p{font-size:15.5px;color:var(--muted);line-height:1.7}