/* DDMind homepage v3. Generated from prototype/v3; do not edit here. */
/* DDMind v3 | Team page
   Loaded after ../v3.css, which holds the tokens, nav, buttons, links, reveals, closing and footer.
   Every rule is scoped under .v3-root and every new class starts with v3-tm-.

   Idea     The headline makes the claim and, from 900px, the lead is its note in the margin; the four people are
            the exhibit; the ETH AI Center affiliation is the annotation beside them, with its source link. From
            900px a trace leaves the headline's full stop level into the note's node, runs down the gutter past the
            ETH note and out to the closing mark (page.js). Below 900 the ETH note carries the homepage's phone
            chain into the closing mark.
   People   A ledger, not cards: the section is white (the grey band is dropped), the four people stand one below
            the other in the main column, and only a hairline and the same space above and below it separate them.
            No borders, backgrounds or shadows around a person; the portrait keeps its soft grey photo plate. Every
            row takes its own height. At any one width the logo strips all have one width, so they are all at one
            scale (David's one-row strip is simply shorter), and wider than the old cards gave them (up to 400px).
            A point that wraps is balanced, so its two lines break evenly.
            Three arrangements:
              caption    phones (under 600): the role and name beside the portrait (84 to 128px) like a caption,
                         the points and the logos full width below
              stacked    600 to 1439: portrait | role, name, points, and the logos under the points; the portrait
                         (128 to 160px, 148 to 168 from 900) is about as tall as that column; the strip is 400px
                         wherever the column allows it (from about 1000)
              ledger     from 1440: portrait (168px, as in the stacked layout) | role, name and points | logos, each
                         in its own column, all three starting on the row's top line; the strip column keeps at
                         least 400px, and each row is the portrait's height.
            Neither the portrait nor the strip ever gets smaller as the screen gets wider.
            From 600 the role's capitals sit on the portrait's top edge, and from 900 the ETH note's title capitals
            sit on that same line beside the first person.
            Without the band, the space under the people is trimmed (from 900) so the closing does not drift away.
            In the markup the name (h2) comes before the role, so headings navigation lands on the name and the
            role follows it; .v3-tm-id shows them the other way round. */

/* --------- Trace layer (the svg is built by page.js from 900px up) --------- */
.v3-root .v3-tm-thread{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;pointer-events:none}

/* --------- Hero: the homepage's headline size and line height --------- */
.v3-root .v3-tm-hero{padding:calc(var(--v3-navh) + 24px) 0 56px}
/* at every width: "Industry & / deep AI expertise." The break is a line feed generated after the first span (no <br>,
   and no space an importer could trim); on phones the size lets "deep AI expertise." (about 7.8em) fill the column. */
.v3-root .v3-tm-h1{font-size:min(64px,calc(var(--v3-w) / 7.9));line-height:1.04;white-space:nowrap}
.v3-root .v3-tm-l1::after{content:"\A";white-space:pre}
.v3-root .v3-tm-lead{margin-top:20px}

/* --------- Team: the people, one below the other --------- */
/* white like the hero: the people are separated by hairlines, not set on a band */
.v3-root .v3-tm-team{padding-top:8px;background:transparent}
.v3-root .v3-tm-people{display:grid;grid-template-columns:minmax(0,1fr)}
/* --v3-tm-ph portrait width, --v3-tm-gap space beside the portrait, --v3-tm-row space above and below each hairline,
   --v3-tm-sw the one width of every logo strip */
.v3-root .v3-tm-person{--v3-tm-ph:clamp(84px,calc(var(--v3-w) - 222px),128px);--v3-tm-gap:16px;--v3-tm-row:28px;--v3-tm-sw:min(100%,400px);display:grid;grid-template-columns:var(--v3-tm-ph) minmax(0,1fr);grid-template-areas:"ph id" "pts pts" "lg lg";column-gap:var(--v3-tm-gap);padding:var(--v3-tm-row) 0}
.v3-root .v3-tm-person:first-child{padding-top:0}
.v3-root .v3-tm-person:last-child{padding-bottom:0}
.v3-root .v3-tm-person + .v3-tm-person{border-top:1px solid var(--v3-hair)}
.v3-root .v3-tm-ph{position:relative;grid-area:ph;align-self:start;aspect-ratio:4/5;overflow:hidden;border-radius:8px;background:var(--v3-band)}
/* the portraits are cut-outs on transparency: each fills the plate's height and is nudged so that the four faces
   share one eye line (a third down), one head size and the same headroom */
.v3-root .v3-tm-img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:0 0;transform-origin:50% 0}
.v3-root .v3-tm-img-p{object-position:37% 0;transform:translateY(4%) scale(1.06)}
.v3-root .v3-tm-img-c{transform:translateY(-1.2%) scale(1.02)}
.v3-root .v3-tm-img-d{object-position:3% 0;transform:translateY(3.3%) scale(1.1)}
.v3-root .v3-tm-img-a{transform:translateY(-4.6%) scale(1.13)}
/* name first in the markup, role first on screen; on phones the pair stands at the foot of the portrait */
.v3-root .v3-tm-id{display:flex;flex-direction:column-reverse;grid-area:id;align-self:end;min-width:0;padding-bottom:1px}
.v3-root .v3-tm-role{font-size:14px;line-height:20px;font-weight:500;color:var(--v3-muted)}
.v3-root .v3-tm-name{margin-top:2px;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.015em;color:var(--v3-ink)}
.v3-root .v3-tm-list{grid-area:pts;margin-top:20px}
.v3-root .v3-tm-li{position:relative;padding-left:17px;font-size:16px;line-height:24px;color:var(--v3-text);text-wrap:balance}
.v3-root .v3-tm-li + .v3-tm-li{margin-top:6px}
.v3-root .v3-tm-li::before{content:"";position:absolute;left:1px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--v3-doubt)}
.v3-root .v3-tm-logos{grid-area:lg;align-self:start;min-width:0;margin-top:20px}
.v3-root .v3-tm-strip{display:block;width:var(--v3-tm-sw);height:auto;aspect-ratio:580/124;filter:grayscale(1);opacity:.8}
.v3-root .v3-tm-strip-1{aspect-ratio:580/52}

/* --------- ETH AI Center: the annotation and its source --------- */
.v3-root .v3-tm-eth{position:relative;margin-top:56px}
.v3-root .v3-tm-eth-t{position:relative;font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.014em;color:var(--v3-ink);text-wrap:balance}
.v3-root .v3-tm-eth-d{margin-top:6px;font-size:16px;line-height:1.5;color:var(--v3-text);text-wrap:pretty}
.v3-root .v3-tm-eth-src{position:relative;margin-top:12px}
/* the source link keeps its 28px line but answers to a 44px tall target */
.v3-root .v3-tm-eth-src .v3-link{position:relative}
.v3-root .v3-tm-eth-src .v3-link::after{content:"";position:absolute;left:-4px;right:-4px;top:-8px;bottom:-8px}

/* the narrowest phones: the name a step smaller, so the longest one still fits beside the portrait (the caption
   keeps 180px at 320), and the points a step smaller, so "10+ years in private equity and M&A" and "Expert in
   trustworthy and agentic AI" (about 270px at 16px) stay on one line in the 263px a point has at 320 */
@media (max-width:359.98px){
  .v3-root .v3-tm-name{font-size:18px}
  .v3-root .v3-tm-li{font-size:15px}
}

/* ========= One column (below 900): the homepage's phone chain, from the ETH note into the closing mark ========= */
@media (max-width:899.98px){
  .v3-root .v3-tm-eth{padding-left:28px}
  .v3-root .v3-tm-eth::before{content:"";position:absolute;left:3px;top:13px;bottom:calc(var(--v3-sec) * -1);width:1px;background:var(--v3-line)}
  .v3-root .v3-tm-eth-t::before,.v3-root .v3-tm-eth-src::before{content:"";position:absolute;left:-28px;top:10.5px;width:7px;height:7px;border-radius:50%;background:var(--v3-blue)}
}

/* ========= Tablet and up (600) ========= */
@media (min-width:600px){
  .v3-root .v3-tm-hero{padding-bottom:72px}
  .v3-root .v3-tm-h1{font-size:calc(var(--v3-w) / 9.4)}
  .v3-root .v3-tm-lead{margin-top:24px}
  .v3-root .v3-tm-team{padding-top:16px}
  /* stacked: role, name, points and logos in one column beside the portrait, all from the row's top line */
  .v3-root .v3-tm-person{--v3-tm-ph:clamp(128px,calc(var(--v3-w) * .22),160px);--v3-tm-gap:28px;--v3-tm-row:36px;grid-template-rows:auto auto 1fr;grid-template-areas:"ph id" "ph pts" "ph lg"}
  /* the role's capitals (4px below its line box) sit on the portrait's top edge */
  .v3-root .v3-tm-id{align-self:start;margin-top:-4px;padding-bottom:0}
  .v3-root .v3-tm-name{font-size:22px}
  .v3-root .v3-tm-list{margin-top:14px}
  .v3-root .v3-tm-logos{margin-top:24px}
  .v3-root .v3-tm-eth{margin-top:64px}
}

/* ========= Desktop (900): exhibit | gutter with the trace | margin ========= */
@media (min-width:900px){
  /* the headline sits exactly where the homepage's does; the lead becomes its note in the margin */
  .v3-root .v3-tm-hero{padding:calc(var(--v3-navh) + 20px) 0 clamp(72px,6.7vw,96px)}
  .v3-root .v3-tm-hero-in{display:grid;grid-template-columns:var(--v3-main) minmax(0,var(--v3-mw));column-gap:var(--v3-gut);align-items:start}
  .v3-root .v3-tm-h1{grid-column:1;grid-row:1;font-size:calc(var(--v3-main) / 8.98)}
  /* The note's first line sits level with the full stop (its centre is 1.837em below the top of the headline),
     so the leader from the stop runs straight across into the note's node. The sizes are the Security page's. */
  .v3-root .v3-tm-lead{grid-column:2;grid-row:1;max-width:none;margin-top:calc(var(--v3-main) / 8.98 * 1.837 - 14px);font-size:18px;line-height:28px;letter-spacing:-.008em}
  .v3-root .v3-tm-team{padding-top:clamp(16px,2.2vw,32px);padding-bottom:calc(var(--v3-sec) * .6)}
  .v3-root .v3-tm-people{grid-column:1;grid-row:1}
  .v3-root .v3-tm-person{--v3-tm-ph:clamp(148px,calc(var(--v3-main) * .215),168px);--v3-tm-gap:32px;--v3-tm-row:40px}
  .v3-root .v3-tm-name{font-size:24px;line-height:1.2}
  /* the note's top is level with the first person's top line: its title's capitals (6px below the line box) sit on
     the same line as the first role's capitals and the portrait's top edge */
  .v3-root .v3-tm-eth{grid-column:2;grid-row:1;margin-top:-6px}
  /* where page.js draws the trace, the node and its tick appear as the line reaches them */
  .v3-root.v3-tm-threaded .v3-pin::before{opacity:0;transition:opacity .4s ease-out}
  .v3-root.v3-tm-threaded .v3-pin::after{transform:scaleX(0);transition:transform .5s var(--v3-out) .1s}
  .v3-root.v3-tm-threaded .v3-pin.v3-tm-lit::before{opacity:1}
  .v3-root.v3-tm-threaded .v3-pin.v3-tm-lit::after{transform:none}
}

/* ========= Ledger (1440): portrait | role, name and points | logos =========
   From 1440 the main column is at its full 944px. The portrait keeps the stacked layout's 168px, so no face gets
   smaller on a wider screen; the strip column takes 43% of the main column, never less than 400px (the stacked
   strip) and never more than 420 (406 at 944); 32px after the portrait and 36 before the logos. The text column
   takes what is left (about 300px): wide enough that every point but the two longest stays on one line (the
   widest of those needs 287px), and those two wrap into balanced lines. The name is the strongest thing in the
   row: 26px. */
@media (min-width:1440px){
  .v3-root .v3-tm-person{--v3-tm-ph:168px;--v3-tm-lg:clamp(400px,calc(var(--v3-main) * .43),420px);--v3-tm-sw:100%;--v3-tm-row:44px;--v3-tm-lgap:36px;grid-template-columns:var(--v3-tm-ph) 32px minmax(0,1fr) var(--v3-tm-lgap) var(--v3-tm-lg);grid-template-rows:auto 1fr;grid-template-areas:"ph . id . lg" "ph . pts . lg";column-gap:0}
  .v3-root .v3-tm-logos{margin-top:0}
  .v3-root .v3-tm-name{font-size:26px;letter-spacing:-.018em}
  .v3-root .v3-tm-lead{margin-top:calc(var(--v3-main) / 8.98 * 1.837 - 15px);font-size:20px;line-height:30px;letter-spacing:-.01em}
  .v3-root .v3-tm-lead.v3-pin::before{top:11.5px}
  .v3-root .v3-tm-lead.v3-pin::after{top:14.5px}
}

/* ========= Reduced motion: everything in its final state ========= */
@media (prefers-reduced-motion:reduce){
  .v3-root.v3-tm-threaded .v3-pin::before,.v3-root.v3-tm-threaded .v3-pin::after{transition:none}
}

/* Windows contrast themes: the nodes keep their colour */
@media (forced-colors:active){
  .v3-root .v3-tm-eth-t::before,.v3-root .v3-tm-eth-src::before,.v3-root .v3-tm-li::before{forced-color-adjust:none}
}