/* The Moments hub front pages (/founding/, /renaming/, /closing/, /succession/, /family-office/ and their German and French twins), built by
   scripts/build-moments.py. Same language as the Moments index (/moments/moments.css, loaded before this file): the
   hub's idea drawn as the hero, its figure huge on a flat colour panel, the questions as numbered chapters, one dark
   band with the hub's single action, the sources as footnotes, and a close that ends in that same action. Drawn only
   from the site's tokens (/style.css :root), type and components (.dark, .text-link, .sr-button and the name check
   from /assets/site-v2.css). The question pages do not load this file.

   The drawings: Founding, one name and two registers (the bronze line arrives in the commercial register, a second
   line stops short of the trademark register); Renaming, one unbroken company line on which the name changes, and
   the renamed companies by legal form; Closing, the company line running through liquidation to an end bar while its
   trademarks run on below it; Succession, the junction of the Moments map close up; Family office, a tile cartogram
   of the cantons. The SVG drawings use a 650 x 440 (Founding, Renaming) or 650 x 460 (Closing, Succession) viewBox,
   and the labels below are placed with the same numbers as fractions of it: change them together with
   build-moments.py. Phones get their own drawings: the lines run down the left edge, as on the index map.

   Motion is CSS only and lives in the prefers-reduced-motion: no-preference blocks at the end. Every rule above them
   describes the finished page: with reduced motion, or before an animation starts, everything is visible. */

.hb-page main{overflow-x:clip}

/* ---- The hero: headline and standfirst, then the drawing beside its figure panel ---- */
.hb-hero{padding:52px 0 0}
.hb-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px 80px;align-items:end}
.hb-head .kicker{margin-bottom:22px}
.hb-head .display{font-size:clamp(46px,6.5vw,92px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.hb-stand{justify-self:end;max-width:470px;font-size:15px;line-height:1.75;color:var(--muted)}
.hb-stand p{margin:0 0 12px}
.hb-stand .hb-byline{font-size:12px;margin:0}
.hb-stand .text-link{margin-top:10px}
.hb-stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch;margin-top:46px;padding-bottom:112px}
.hb-k{display:block;font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;line-height:1.35}

.hb-panel{position:relative;z-index:0;margin:0;padding:40px 42px 34px;display:flex;flex-direction:column;gap:22px;color:var(--paper)}
.hb-panel-founding{background:var(--bronze)}
.hb-panel-renaming{background:var(--forest)}
.hb-panel-closing{background:var(--muted)}
.hb-panel-succession{background:var(--ink)}
.hb-panel-family-office{background:var(--wine)}
.hb-panel-k{margin:0;font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;line-height:1.35}
.hb-panel-fig{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(96px,10.2vw,154px);line-height:.86;letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.hb-panel figcaption{margin-top:auto;max-width:440px}
.hb-panel-cap{margin:0;font-size:15px;line-height:1.65}
.hb-panel-src{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(242,239,233,.35);font-size:12px;line-height:1.6}
.hb-wire{display:none}

/* The SVG drawings (Founding, Succession). The drawing sits above the panel so the arrival node can overlap its edge. */
.hb-draw{position:relative;z-index:1}
.hb-lines{display:block;width:100%;height:auto;overflow:visible}
.hb-p,.hb-mp{fill:none;stroke-width:3}
.hb-p-company{stroke:var(--bronze)}
.hb-p-family{stroke:var(--wine)}
.hb-p-mark,.hb-p-ending{stroke:var(--muted)}
.hb-end{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round}
.hb-n-ended{stroke:var(--muted)}
.hb-bridge{fill:none;stroke:var(--muted);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:0 11}
.hb-n{fill:var(--paper);stroke-width:3}
.hb-n-name,.hb-n-arrive{stroke:var(--bronze)}
.hb-n-mark{stroke:var(--muted);stroke-width:2.5}
.hb-n-junction circle{fill:var(--ink);stroke:var(--ink)}
.hb-n-junction .hb-halo{fill:var(--paper);stroke-width:1.5}
.hb-pulse{fill:none;stroke:var(--white);stroke-width:2;opacity:0}
.sd-merge{display:none}

/* Founding: the name above its line, the trademark register between the lines, the gap under the dotted bridge. */
.fd-name{position:absolute;left:0;bottom:calc(100% - 160 / 440 * 100% + 26px);margin:0;color:var(--bronze)}
.fd-name-v{display:block;margin-top:8px;font-family:var(--serif);font-size:clamp(28px,2.7vw,38px);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
.hb-rail{display:none}
.fd-mark{position:absolute;left:calc(296 / 650 * 100%);right:0;bottom:calc(100% - 380 / 440 * 100% + 30px);margin:0;max-width:340px;color:var(--ink)}
.fd-mark-p{display:block;margin-top:8px;font-size:13px;line-height:1.6;color:var(--muted)}
.fd-gap{position:absolute;left:calc(533 / 650 * 100%);top:calc(380 / 440 * 100% + 16px);transform:translateX(-50%);margin:0;font-size:12px;line-height:1.3;color:var(--muted);white-space:nowrap}

/* Renaming: the old name above the line at its start, the new name after the rename stop, the reason the line does
   not break under that stop, and the renamed companies by legal form below, one bar each. */
.rn-name{position:absolute;bottom:calc(100% - 150 / 440 * 100% + 26px);margin:0;color:var(--bronze)}
.rn-old{left:0;color:var(--muted)}
.rn-new{left:calc(356 / 650 * 100%);right:0}
.rn-name-v{display:block;margin-top:8px;font-family:var(--serif);font-size:clamp(28px,2.7vw,38px);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
.rn-old .rn-name-v{color:var(--muted)}
.rn-n-change circle{fill:var(--bronze);stroke:var(--bronze)}
.rn-n-change .hb-halo{fill:var(--paper);stroke-width:1.5}
.rn-same{position:absolute;left:calc(320 / 650 * 100%);top:calc(150 / 440 * 100% + 36px);transform:translateX(-50%);margin:0;font-size:12px;line-height:1.3;color:var(--muted);white-space:nowrap}
.rn-forms{position:absolute;left:0;right:calc(80 / 650 * 100%);top:calc(262 / 440 * 100%);margin:0}
.rn-forms figcaption{margin:0 0 16px;color:var(--muted)}
.rn-forms ol{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rn-forms li{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr) 4.2em;align-items:center;gap:16px;font-size:13px;line-height:1.3;color:var(--muted)}
.rn-f-bar{display:block;height:9px}
.rn-f-bar i{display:block;height:100%;background:var(--forest)}
.rn-forms b{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1;letter-spacing:-.01em;color:var(--ink);text-align:right;font-variant-numeric:lining-nums tabular-nums}

/* Closing: the company line's label under it at the left, each stage's count above the line (liquidation at its stop, the
   deletion against the end bar), the trademarks between the lines, the open end under the dotted bridge. */
.cl-line{position:absolute;left:0;top:calc(170 / 460 * 100% + 18px);max-width:calc(165 / 650 * 100%);margin:0;font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;line-height:1.45;color:var(--bronze)}
.cl-stage{position:absolute;bottom:calc(100% - 170 / 460 * 100% + 30px);margin:0;max-width:180px;display:flex;flex-direction:column;align-items:flex-start;color:var(--bronze)}
.cl-del .hb-k{white-space:nowrap}
.cl-liq{left:calc(200 / 650 * 100% - 12px)}
.cl-del{right:calc(24 / 650 * 100%);align-items:flex-end;text-align:right;color:var(--muted)}
.cl-fig{display:block;margin-top:8px;font-family:var(--serif);font-size:clamp(34px,3.2vw,46px);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.cl-cap{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--muted)}
.cl-rail,.cl-mrail{display:none}
.fd-gap.cl-gap{left:calc(549 / 650 * 100%);top:calc(360 / 460 * 100% + 16px)}
.cl-mark{position:absolute;left:calc(340 / 650 * 100%);right:0;bottom:calc(100% - 360 / 460 * 100% + 30px);margin:0;max-width:250px;color:var(--ink)}

/* Succession: the two line labels at the left, the junction's label under it. */
.sd-line{position:absolute;left:0;margin:0;font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;line-height:1}
.sd-line-company{top:calc(90 / 460 * 100% - 26px);color:var(--bronze)}
.sd-line-family{top:calc(370 / 460 * 100% - 26px);color:var(--wine)}
.sd-junction{position:absolute;left:calc(430 / 650 * 100% - 34px);right:32px;top:calc(230 / 460 * 100% + 56px);margin:0;color:var(--muted)}
.sd-junction-v{display:block;margin-top:10px;font-family:var(--serif);font-size:clamp(28px,2.7vw,38px);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}

/* Family office: the cartogram, one square per canton, shaded by the published count. */
.hb-family-office .hb-stage{column-gap:64px;align-items:start}
.hb-family-office .hb-panel{align-self:stretch}
.fo-draw{margin:0}
.fo-draw figcaption{margin:0 0 18px;color:var(--muted)}
.hb-tiles{list-style:none;margin:0;padding:0;max-width:640px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.hb-tile{aspect-ratio:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:8px 8px 7px;font-size:11px;line-height:1}
.hb-tile abbr{text-decoration:none;font-weight:500;letter-spacing:.08em}
.hb-tile b{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.05vw,30px);line-height:.9;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.hb-t4{background:var(--wine);color:var(--paper)}
.hb-t3{background:color-mix(in srgb,var(--wine) 72%,var(--paper));color:var(--paper)}
.hb-t2{background:color-mix(in srgb,var(--wine) 45%,var(--paper));color:var(--ink)}
.hb-t1{background:color-mix(in srgb,var(--wine) 16%,var(--paper));color:var(--ink)}
.hb-legend{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;line-height:1.4;color:var(--muted)}
.hb-legend li{display:flex;align-items:center;gap:8px}
.hb-legend i{flex:none;display:block;width:14px;height:14px}
.hb-note{margin:14px 0 0;font-size:12px;line-height:1.65;color:var(--muted);max-width:600px}
.hb-note-src{display:block;margin-top:4px}

/* ---- The questions: numbered chapters, each with its one-line answer ---- */
.hb-qs{padding:108px 0 100px;border-top:1px solid var(--rule)}
.hb-qs-head{display:grid;grid-template-columns:.7fr 1.7fr;gap:85px;margin-bottom:50px}
.hb-qs-head .kicker{margin:12px 0 0}
.hb-qs-head h2{font-size:clamp(44px,4.5vw,68px);line-height:1.03}
.hb-qs-head p:not(.kicker){max-width:540px;color:var(--muted);font-size:15px;line-height:1.75;margin:22px 0 0}
.hb-qlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:96px;border-bottom:1px solid var(--rule)}
.hb-qlist li{border-top:1px solid var(--rule)}
.hb-qlist a{display:grid;grid-template-columns:58px minmax(0,1fr) 26px;gap:12px 16px;padding:28px 0 34px;color:var(--ink);transition:padding .25s}
.hb-q-no{grid-row:1/3;font-family:var(--serif);font-size:30px;line-height:1;color:var(--bronze);font-variant-numeric:lining-nums tabular-nums}
.hb-succession .hb-q-no,.hb-renaming .hb-q-no{color:var(--forest)}
.hb-closing .hb-q-no{color:var(--muted)}
.hb-family-office .hb-q-no{color:var(--wine)}
.hb-q-t{font-family:var(--serif);font-size:clamp(25px,2.25vw,32px);line-height:1.14;letter-spacing:-.01em;transition:color .2s}
.hb-q-a{grid-column:2;font-size:14.5px;line-height:1.7;color:var(--muted);max-width:500px}
.hb-q-arrow{grid-column:3;grid-row:1;font-family:var(--serif);font-size:26px;line-height:1;color:var(--wine)}
.hb-qlist a:hover{padding-left:8px}
.hb-qlist a:hover .hb-q-t{color:var(--wine)}

/* ---- The one dark band: in Antevo, the hub's single action ---- */
.hb-dark{padding:104px 0 108px}
.hb-dark-grid{display:grid;grid-template-columns:.7fr 1.7fr;gap:85px}
.hb-dark-grid>.kicker{margin:12px 0 0}
.hb-dark h2{font-size:clamp(44px,4.5vw,66px);line-height:1.04;max-width:860px}
.hb-dark-p{margin:28px 0 0;max-width:620px;font-size:16px;line-height:1.85;color:#c5cbbb}
.hb-dark .mo-act{padding-top:40px}

/* ---- Sources: the index's footnotes, then the method ---- */
.hb-sources{border-top:0}
.hb-sources .hb-method{margin:26px 0 0}

/* ---- The close: one line, and the hub's action beside it (Founding: the name check itself) ---- */
.hb-close{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px 96px;align-items:end;padding:100px 0 112px;border-top:1px solid var(--rule)}
.hb-close h2{margin:0;font-size:clamp(44px,4.6vw,70px);line-height:1.03}
.hb-close h2 em{display:block}
.hb-close h2,.hb-dark h2,.hb-qs-head h2{text-wrap:balance}
.hb-close-act .sx-check{margin:0;max-width:none}
.hb-close-act .mo-act{padding-top:0}

@media(max-width:1180px){
.hb-top{gap:26px 50px}
.hb-panel{padding:34px 34px 30px}
.hb-qs-head,.hb-dark-grid{gap:50px}
.hb-qlist{column-gap:56px}
.hb-close{gap:36px 56px}
}

/* Tablets and phones: the drawings run down the left edge, as on the index map, with the panel beside them.
   Rail geometry, in px from the left of the stage: Founding, the bronze line at x 42.5 to 45.5 (the name's node at
   44) and the trademark line at 16 to 19; Succession, the company line at 16 to 19 and the family line at 44 to 47,
   merging into the junction at 31.5 and running on side by side at 28.5 to 34.5. The panels start at 64. Below
   1100px the side-by-side drawing has no room for its labels, so the rails take over there. Renaming: the bronze
   line at 42.5 to 45.5 through the old name, the rename stop and the new name into the panel, the legal forms below
   it. Closing: the bronze line comes in under its label at 42.5 to 45.5, turns muted at liquidation and stops at an
   end bar; the trademark line leaves at liquidation for 16 to 19 and runs on beside the panel to its open stop. */
@media(max-width:1100px){
.hb-founding .hb-stage,.hb-succession .hb-stage,.hb-renaming .hb-stage,.hb-closing .hb-stage{display:flex;flex-direction:column;margin-top:40px;padding-bottom:80px}
.hb-lines{display:none}
.fd-draw,.sd-draw,.rn-draw,.cl-draw{display:contents}
.hb-founding .hb-panel,.hb-succession .hb-panel,.hb-renaming .hb-panel,.hb-closing .hb-panel{order:5;margin-left:64px;max-width:620px;padding:30px 26px 26px;gap:18px}
.hb-panel-fig{font-size:clamp(70px,19vw,128px)}
.hb-panel-cap{font-size:14px}

.fd-name{order:1;position:relative;left:auto;bottom:auto;padding:0 0 34px 64px}
.fd-name::before{content:"";position:absolute;z-index:1;left:34px;top:26px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:3px solid var(--bronze)}
.fd-name::after{content:"";position:absolute;left:42.5px;top:36px;bottom:0;width:3px;background:var(--bronze)}
.fd-name .hb-rail{display:block;position:absolute;left:16px;top:34.5px;bottom:0;width:30px;box-sizing:border-box;border-top:3px solid var(--muted);border-left:3px solid var(--muted);border-top-left-radius:14px}
.hb-panel-founding::before{content:"";position:absolute;left:-21.5px;top:0;width:21.5px;height:46px;box-sizing:border-box;border-left:3px solid var(--bronze);border-bottom:3px solid var(--bronze);border-bottom-left-radius:12px}
.hb-panel-founding::after{content:"";position:absolute;left:-48px;top:0;bottom:0;width:3px;background:var(--muted)}
.hb-panel-founding .hb-wire{display:block;position:absolute;left:-9px;top:35.5px;width:18px;height:18px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:3px solid var(--bronze)}
.fd-gap{order:6;position:relative;left:auto;top:auto;transform:none;padding:26px 0 26px 64px;white-space:normal}
.fd-gap::before{content:"";position:absolute;left:16px;top:6px;bottom:6px;border-left:3.5px dotted var(--muted)}
.fd-mark{order:7;position:relative;left:auto;right:auto;bottom:auto;padding:0 0 0 64px;max-width:620px}
.fd-mark::before{content:"";position:absolute;left:7.5px;top:-3px;width:22px;height:22px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:2.5px solid var(--muted)}

.sd-line{position:relative;top:auto;height:30px;display:flex;align-items:center;padding-left:80px}
.sd-line-company{order:1}
.sd-line-family{order:2}
.sd-line::before{content:"";position:absolute;top:13.5px;bottom:0;box-sizing:border-box;border-top:3px solid;border-left:3px solid;border-top-left-radius:12px}
.sd-line-company::before{left:16px;width:56px;border-color:var(--bronze)}
.sd-line-family::before{left:44px;width:28px;border-color:var(--wine)}
.sd-line-family::after{content:"";position:absolute;left:16px;top:0;bottom:0;width:3px;background:var(--bronze)}
.sd-junction{order:3;position:relative;left:auto;right:auto;top:auto;padding:66px 0 40px 80px}
.sd-merge{display:block;position:absolute;left:0;top:0;width:64px;height:84px;overflow:visible}
.sd-junction::before{content:"";position:absolute;z-index:1;left:17px;top:69.5px;width:29px;height:29px;box-sizing:border-box;border-radius:50%;background:var(--ink);outline:1.5px solid var(--ink);outline-offset:5px}
.sd-junction::after{content:"";position:absolute;left:28.5px;top:98px;bottom:0;width:6px;box-sizing:border-box;border-left:3px solid var(--bronze);border-right:3px solid var(--wine)}
.hb-panel-succession::before,.hb-panel-succession::after{content:"";position:absolute;top:0;box-sizing:border-box;border-left:3px solid;border-bottom:3px solid}
.hb-panel-succession::before{left:-35.5px;width:35.5px;height:50px;border-color:var(--bronze);border-bottom-left-radius:14px}
.hb-panel-succession::after{left:-32.5px;width:32.5px;height:47px;border-color:var(--wine);border-bottom-left-radius:11px}

.rn-name,.rn-same{position:relative;left:auto;right:auto;bottom:auto;top:auto;transform:none}
.rn-old{order:1;padding:0 0 30px 64px}
.rn-same{order:2;padding:14px 0 16px 64px;white-space:normal}
.rn-new{order:3;padding:16px 0 34px 64px}
.rn-old::before{content:"";position:absolute;z-index:1;left:34px;top:26px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:3px solid var(--bronze)}
.rn-old::after{content:"";position:absolute;left:42.5px;top:36px;bottom:0;width:3px;background:var(--bronze)}
.rn-same::before{content:"";position:absolute;z-index:1;left:33px;top:calc(50% - 11px);width:22px;height:22px;border-radius:50%;background:var(--bronze);outline:1.5px solid var(--bronze);outline-offset:4px}
.rn-same::after,.rn-new::after{content:"";position:absolute;left:42.5px;top:0;bottom:0;width:3px;background:var(--bronze)}
.hb-panel-renaming::before{content:"";position:absolute;left:-21.5px;top:0;width:21.5px;height:46px;box-sizing:border-box;border-left:3px solid var(--bronze);border-bottom:3px solid var(--bronze);border-bottom-left-radius:12px}
.hb-panel-renaming .hb-wire{display:block;position:absolute;left:-9px;top:35.5px;width:18px;height:18px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:3px solid var(--bronze)}
.rn-forms{order:6;position:relative;left:auto;right:auto;top:auto;margin:48px 0 0;max-width:620px}

.cl-line{order:1;position:relative;left:auto;top:auto;max-width:none;height:30px;display:flex;align-items:center;padding-left:64px;line-height:1}
.cl-line::before{content:"";position:absolute;left:42.5px;top:13.5px;bottom:0;width:16px;box-sizing:border-box;border-top:3px solid var(--bronze);border-left:3px solid var(--bronze);border-top-left-radius:12px}
.cl-stage{position:relative;left:auto;right:auto;bottom:auto;max-width:none;align-items:flex-start;text-align:left;padding:20px 0 34px 64px}
.cl-liq{order:2}
.cl-del{order:3;padding-bottom:44px}
.cl-stage::before{content:"";position:absolute;z-index:1;left:34px;top:20px;width:20px;height:20px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:3px solid var(--bronze)}
.cl-del::before{border-color:var(--muted)}
.cl-del::after{content:"";position:absolute;left:32px;top:49px;width:24px;height:3px;border-radius:2px;background:var(--muted)}
.cl-rail,.cl-mrail{display:block;position:absolute}
.cl-liq .cl-rail{left:42.5px;top:0;bottom:0;width:3px;border-top:20px solid var(--bronze);background:var(--muted)}
.cl-del .cl-rail{left:42.5px;top:0;height:20px;width:3px;background:var(--muted)}
.cl-liq .cl-mrail{left:16px;top:28.5px;bottom:0;width:30px;box-sizing:border-box;border-top:3px solid var(--muted);border-left:3px solid var(--muted);border-top-left-radius:14px}
.cl-del .cl-mrail{left:16px;top:0;bottom:0;width:3px;background:var(--muted)}
.hb-panel-closing::after{content:"";position:absolute;left:-48px;top:0;bottom:0;width:3px;background:var(--muted)}
.fd-gap.cl-gap{left:auto;top:auto}
.cl-mark{order:7;position:relative;left:auto;right:auto;bottom:auto;padding:0 0 0 64px;max-width:620px}
.cl-mark::before{content:"";position:absolute;left:7.5px;top:-3px;width:22px;height:22px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:2.5px solid var(--muted)}
}
@media(max-width:900px){
.hb-hero{padding-top:34px}
.hb-top{grid-template-columns:1fr;gap:20px}
.hb-head .kicker{margin-bottom:14px}
.hb-stand{justify-self:start;max-width:560px}
.hb-founding .hb-stage,.hb-succession .hb-stage{margin-top:30px;padding-bottom:64px}
.hb-family-office .hb-stage{display:flex;flex-direction:column;margin-top:30px;padding-bottom:64px}
.fo-draw{order:1}
.hb-family-office .hb-panel{order:2;margin:34px 0 0;padding:30px 26px 26px;gap:18px}
.hb-tiles{gap:4px}
.hb-tile{padding:5px 5px 5px}
.hb-tile b{font-size:clamp(15px,3.6vw,24px)}

.hb-qs{padding:72px 0 64px}
.hb-qs-head{grid-template-columns:1fr;gap:16px;margin-bottom:30px}
.hb-qs-head .kicker{margin:0}
.hb-qlist{grid-template-columns:1fr}
.hb-dark{padding:72px 0}
.hb-dark-grid{grid-template-columns:1fr;gap:18px}
.hb-dark-grid>.kicker{margin:0}
.hb-close{grid-template-columns:1fr;padding:68px 0 76px;gap:30px}
}
@media(max-width:700px){
.hb-head .display{font-size:42px;line-height:1.04}
.fd-name-v{font-size:28px}
.hb-qs-head h2,.hb-dark h2,.hb-close h2{font-size:40px}
.hb-qlist a{grid-template-columns:40px minmax(0,1fr) 22px;gap:8px 12px;padding:22px 0 26px}
.hb-q-no{font-size:22px;padding-top:3px}
.hb-q-t{font-size:23px}
.hb-q-a{font-size:14px}
.hb-q-arrow{font-size:22px}
.hb-dark-p{font-size:15px}
.hb-dark .mo-act .sr-button,.hb-close .mo-act .sr-button{width:100%}
.hb-tile{font-size:9.5px;padding:4px 4px 4px}
.hb-tile abbr{letter-spacing:.04em}
.hb-legend{gap:8px 16px}
}
/* The shared mast is wider than a 320px screen; on these pages only, tighten its spacing (as the index does). */
@media(max-width:360px){.hb-page .mast{gap:14px}.hb-page .lang{margin-left:10px;padding-left:10px;gap:9px}}

/* ---- Motion. On load the lines draw themselves (Founding: the name's line runs into the commercial register, the
   second line runs out towards the trademark register and stops; Succession: the two lives converge into the
   junction and run on), the labels settle as their line reaches them, then a faint light travels the arriving line
   every few seconds (on Founding a second one runs out towards the trademark register and dies at the gap). Family office: the squares settle in by shade, the largest counts first. Only when the visitor
   has not asked for reduced motion. ---- */
@media(prefers-reduced-motion:no-preference){
.hb-p,.hb-mp{stroke-dasharray:1 1;animation:hb-draw .8s cubic-bezier(.55,.08,.35,1) .1s both}
.hb-p-mark{animation-delay:.42s;animation-duration:.75s}
.hb-p-on{animation-duration:.4s;animation-delay:.86s;animation-timing-function:cubic-bezier(.3,.4,.4,1)}
.hb-bridge{animation:hb-fade .6s ease 1.15s both}
.hb-n{transform-box:fill-box;transform-origin:center;animation:hb-pop .5s cubic-bezier(.25,.8,.35,1.25) both}
.hb-n-name{animation-delay:.05s}
.hb-n-arrive{animation-delay:.85s}
.hb-n-mark{animation-delay:1.3s}
.hb-n-junction{animation-delay:.78s}
.fd-name,.sd-line span{animation:hb-settle .6s ease .1s both}
.fd-mark{animation:hb-settle .6s ease 1.2s both}
.fd-gap{animation:hb-fade .6s ease 1.35s both}
.sd-junction{animation:hb-settle .6s ease .9s both}
.hb-panel-fig{animation:hb-settle .7s cubic-bezier(.2,.7,.3,1) .5s both}
.hb-pulse{stroke-dasharray:.07 1.07;animation:hb-pulse 6.5s ease-in-out 2.4s infinite both}
.hb-pulse-mark{animation-delay:5.65s}
.hb-p-ending{animation-delay:.55s;animation-duration:.6s}
.cl-draw .hb-p-mark{animation-delay:.6s}
.hb-end{animation:hb-fade .4s ease 1.1s both}
.hb-n-ended{animation-delay:1.05s}
.rn-n-change{animation-delay:.45s}
.rn-old,.cl-line span{animation:hb-settle .6s ease .1s both}
.rn-same{animation:hb-fade .6s ease .7s both}
.rn-new,.cl-liq{animation:hb-settle .6s ease .6s both}
.cl-del{animation:hb-settle .6s ease 1.05s both}
.cl-mark{animation:hb-settle .6s ease 1.2s both}
.rn-f-bar i{transform-origin:left;animation:hb-grow .7s cubic-bezier(.2,.7,.3,1) .9s both}
.hb-tile{animation:hb-tile .5s cubic-bezier(.2,.7,.3,1) both}
.hb-t4{animation-delay:.1s}.hb-t3{animation-delay:.24s}.hb-t2{animation-delay:.38s}.hb-t1{animation-delay:.52s}
@keyframes hb-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hb-pop{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:none}}
@keyframes hb-settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hb-fade{from{opacity:0}to{opacity:1}}
@keyframes hb-tile{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes hb-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes hb-pulse{0%{stroke-dashoffset:.07;opacity:0}8%{opacity:.9}52%{opacity:.9}60%{stroke-dashoffset:-1;opacity:0}to{stroke-dashoffset:-1;opacity:0}}
}
@media(prefers-reduced-motion:no-preference) and (max-width:1100px){
.fd-name::after,.fd-name .hb-rail,.hb-panel::before,.hb-panel::after,.fd-gap::before,.sd-line::before,.sd-line-family::after,.sd-junction::after,
.rn-old::after,.rn-same::after,.rn-new::after,.cl-line::before,.cl-rail,.cl-mrail{animation:hb-wipe .45s linear both}
.rn-same::after,.cl-liq .cl-rail,.cl-liq .cl-mrail{animation-delay:.3s}
.rn-new::after,.cl-del .cl-rail,.cl-del .cl-mrail{animation-delay:.55s}
.rn-old::before,.rn-same::before,.cl-stage::before,.cl-del::after,.cl-mark::before,.hb-panel-renaming .hb-wire{animation:hb-pop .45s cubic-bezier(.25,.8,.35,1.25) both}
.rn-same::before,.cl-liq::before{animation-delay:.3s}
.cl-del::before,.cl-del::after{animation-delay:.75s}
.hb-panel-renaming .hb-wire{animation-delay:.95s}
.cl-mark::before{animation-delay:1.3s}
.fd-name::after,.fd-name .hb-rail{animation-delay:.15s}
.hb-panel::before,.hb-panel::after{animation-delay:.55s}
.fd-gap::before{animation-delay:.95s}
.sd-line-family::before,.sd-line-family::after{animation-delay:.1s}
.hb-mp{animation-duration:.35s;animation-delay:.45s;animation-timing-function:linear}
.sd-junction::after{animation-delay:.95s}
.hb-panel-succession::before,.hb-panel-succession::after{animation-delay:1.3s}
.fd-name::before,.sd-junction::before,.fd-mark::before,.hb-panel-founding .hb-wire{animation:hb-pop .45s cubic-bezier(.25,.8,.35,1.25) both}
.fd-name::before{animation-delay:.05s}
.hb-panel-founding .hb-wire{animation-delay:.95s}
.fd-mark::before{animation-delay:1.3s}
.sd-junction::before{animation-delay:.8s}
@keyframes hb-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
}