/* Getix Translate /families v3 (2026-10-31). The page is a copy of the main page (index.html), built through the
   clinics flagship: same sections, same markup, same pictures. Only the copy and the people change. Loaded after
   styles.css and niche.css, only on /families. This file holds only what the main page and niche.css do not have:
     .fm-duo ............. two people side by side in one call tile (Carmen and Paco, Tom and Lucía) in the hero
     .pp-carmen .pp-paco .pp-tom .pp-lucia .pp-margaret ... one family through the page (colours for the sprite
                           symbols fm-carmen, fm-paco, fm-tom, fm-lucia, fm-margaret, built on fm-cardigan,
                           fm-check and fm-knit)
     .fm-slide ........... mode 03 slide: "Our family tree" (flat circles and lines, Rosa in the app blue) */

/* ---------- hero: a family video call, two people in each tile ---------- */
/* the duo sits a little right of centre, so the name chip (bottom left of the tile) does not cover the first face */
.tile .fm-duo{display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;transform:translateX(11%)}
.tile .fm-duo .pp{width:47%;flex:none;margin:0 -4% -5%}
.tile .fm-duo .pp + .pp{width:44%}
/* the one grey line under the laptop sits close to it, as on /students (consistency check 01.11) */
.fm-hero-scene .scene-cap{margin-top:4px}

/* ---------- people (no orange: that is the Getix Group colour) ---------- */
/* Carmen: burgundy cardigan, glasses, grey bob. Paco: light blue checked shirt, grey hair, moustache.
   Tom: navy knit sweater, light brown hair. Lucía: mustard cardigan, dark curls. Margaret: lilac cardigan, earbuds. */
.pp.pp-carmen{--skin:#efc9a9;--skin-dk:#d8ae8c;--hair:#c9ccd1;--shirt:#8c3b4a;--shirt-dk:#6c2a37;--top:#efe6da;--gear:#2a3140}
.pp.pp-paco{--skin:#d9a582;--skin-dk:#c28b67;--hair:#c9ccd1;--shirt:#9cc3e6;--check:rgba(52,98,150,.42);--collar:#d6e6f5}
.pp.pp-tom{--skin:#f1d2b8;--skin-dk:#dcb394;--hair:#9a7b55;--shirt:#2a4c7d;--rib:#40669c}
.pp.pp-lucia{--skin:#d9a98a;--skin-dk:#c3926f;--hair:#3b2a22;--shirt:#d4a72c;--shirt-dk:#ab8520;--top:#f3ece2}
.pp.pp-margaret{--skin:#f3d6c2;--skin-dk:#dfb9a0;--hair:#c9ccd1;--shirt:#b8a1d9;--shirt-dk:#9883bd;--top:#f4f1f8}
/* the conference column sets colours per tile (.ctile.u1 .pp ...): the family colours win there too */
.ctile.u1 .pp.pp-carmen{--skin:#efc9a9;--skin-dk:#d8ae8c;--hair:#c9ccd1;--shirt:#8c3b4a}
.ctile.u2 .pp.pp-margaret{--skin:#f3d6c2;--skin-dk:#dfb9a0;--hair:#c9ccd1;--shirt:#b8a1d9}
.ctile.u3 .pp.pp-tom{--skin:#f1d2b8;--skin-dk:#dcb394;--hair:#9a7b55;--shirt:#2a4c7d}
.ctile.u4 .pp.pp-lucia{--skin:#d9a98a;--skin-dk:#c3926f;--hair:#3b2a22;--shirt:#d4a72c}

/* ---------- mode 03 slide: the family tree instead of the bar chart ---------- */
.slide.fm-slide{container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-start;gap:8px}
.fm-slide-t{display:block;font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:5.4cqw;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:#10151d}
.fm-tree{display:block;flex:none;width:100%;height:auto}
.fm-tree .ln path{fill:none;stroke:#9aa6b8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fm-tree .nd circle{fill:#e2e8f1;stroke:#8a97ab;stroke-width:2.2}
.fm-tree .nd-on{fill:#1c81e3;stroke:#0845cd;stroke-width:2.2}
.fm-tree .lbl text{font-family:'Manrope','Segoe UI',system-ui,sans-serif;font-size:14px;font-weight:700;fill:#4a5568;text-anchor:middle}
.fm-tree .lbl text.r{text-anchor:start}