/* ━━ Modular grid – preview behind ?grid (html.g4) ━━
   Four columns on the full content width. Reading stays readable:
   · chapter label hangs in column 1 at the start of its chapter (not sticky: full-width screens and
     tables pass through column 1 and would run under it)
   · text sits in columns 2–4 (~800px, the same measure as before)
   · screens, maps, tables and metrics take all four columns
   Below 900px everything is one column again */

html.g4 { --g-cols: 4; --g-gap: 24px; }

/* ── Type: full Inter 4 with the optical-size axis (opsz 14–32), Latin + Cyrillic, self-hosted.
   The browser picks the cut from the font size: text stays Inter Text, 32px and up becomes Inter Display –
   tighter, finer detail, closer to the Helvetica posters. Only downloaded when the grid is on ── */
@font-face {
  font-family: 'Inter Var';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/InterVar.woff2) format('woff2');
}
html.swiss.g4 {
  --f-display: 'Inter Var', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-sans:    'Inter Var', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
}

/* ── Case pages ── */
/* Chapter bar: the case contents as a thin strip under the nav, shown once the cover has scrolled away */
html.g4 .case-toc {
  display: flex; flex-direction: row; justify-content: flex-start; position: fixed; z-index: 95; top: 64px; left: 0; right: 0; bottom: auto; width: auto; transform: translateY(-100%);
  gap: 28px; padding: 0 max(var(--gutter), (100vw - var(--max-w)) / 2 + var(--gutter));
  height: 44px; align-items: center; overflow-x: auto; scrollbar-width: none;
  background: var(--bg); border-bottom: 1px solid var(--border);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
html.g4 .case-toc::-webkit-scrollbar { display: none; }
html.g4 .case-toc.is-visible { opacity: 1; transform: none; pointer-events: auto; }
html.g4 .case-toc a {
  display: inline-flex; align-items: center; align-self: stretch; gap: 8px; flex: none; white-space: nowrap; padding: 0;
  font-size: var(--ts-caption, 13px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
}
html.g4 .case-toc a::before { content: none !important; }
html.g4 .case-toc a i { font-style: normal; font-variant-numeric: tabular-nums; }
html.g4 .case-toc a:hover { color: var(--text); }
html.g4 .case-toc a.is-active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); align-self: stretch; align-items: center; }
html.g4 .case-toc a.is-active i { color: var(--accent); }
html.g4 .section { scroll-margin-top: 124px; }
@media (max-width: 640px) { html.g4 .case-toc { gap: var(--s3, 24px); padding: 0 var(--gutter); } }
@media (prefers-reduced-motion: reduce) { html.g4 .case-toc { transition: none; } }
html.g4 .container { max-width: var(--max-w); }

/* Cover: title across the grid, lead in columns 1–3, facts laid out on the columns */
html.swiss.g4 .container > .hero {
  display: grid; grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr)); column-gap: var(--g-gap);
  align-items: start;
}
html.swiss.g4 .container > .hero > * { grid-column: 1 / -1; }
html.swiss.g4 .container > .hero h1 {
  font-size: clamp(44px, 6.2vw, 92px); line-height: 0.98; letter-spacing: -0.03em; font-weight: 500;
  max-width: 14ch; margin-bottom: 32px;
}
html.swiss.g4 .container > .hero .hero-desc { grid-column: 1 / 4; max-width: 36ch; }
html.swiss.g4 .case-facts {
  display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
  margin-top: 48px; border-top: 1px solid var(--text); padding-top: 16px; row-gap: 20px;
}
html.swiss.g4 .case-facts > div { display: block; border: 0; padding: 0; }
html.swiss.g4 .case-facts > div:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; padding-right: 24px; }
html.swiss.g4 .case-facts > div:nth-child(2) { grid-column: 3; grid-row: 1 / 3; }
html.swiss.g4 .case-facts > div:nth-child(3) { grid-column: 4; grid-row: 1; }
html.swiss.g4 .case-facts > div:nth-child(4) { grid-column: 4; grid-row: 2; }
html.swiss.g4 .case-facts dt { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-dim); margin-bottom: 6px; }
html.swiss.g4 .case-facts dd { font-size: 15px; line-height: 1.45; color: var(--text); margin: 0; }

/* Chapters: the rule runs across the grid, the label hangs in column 1 */
html.swiss.g4 .section {
  display: grid; grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr)); column-gap: var(--g-gap);
  align-items: start;
}
html.swiss.g4 .section > * { grid-column: 2 / -1; min-width: 0; }
html.swiss.g4 .section:has(> .section-label:not(.section-label--sub)) { border-top: 1px solid var(--text); }
html.swiss.g4 .section > .section-label:not(.section-label--sub) {
  grid-column: 1; grid-row: 1;
  border-top: 0; padding-top: 0; margin: 0;
}
html.swiss.g4 .section > h2 { margin-top: 0; }
/* The Display cut is already tighter than Inter Text: headings need less negative tracking */
html.swiss.g4 .section > h2 { letter-spacing: -0.02em; }

/* Wide content: all four columns */
html.swiss.g4 .section > :is(.screens-scroll, .slider-controls, .ledger, .metrics,
  .status-table, .before-grid, .platform-split, .split, .competitors, .board-figure) {
  grid-column: 1 / -1;
}
html.swiss.g4 .kyc-map { max-width: none; }

/* Next case sits on the grid too */
html.swiss.g4 .next-case { display: grid; grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr)); column-gap: var(--g-gap); }
html.swiss.g4 .next-case > * { grid-column: 2 / -1; }
html.swiss.g4 .next-case > .next-label { grid-column: 1; grid-row: 1 / span 2; }

@media (max-width: 900px) {
  html.g4 { --g-cols: 1; }
  html.swiss.g4 .container > .hero > *,
  html.swiss.g4 .container > .hero .hero-desc,
  html.swiss.g4 .section > *,
  html.swiss.g4 .next-case > *,
  html.swiss.g4 .case-facts > div:nth-child(n) { grid-column: 1 / -1; grid-row: auto; }
  html.swiss.g4 .section > .section-label:not(.section-label--sub) { margin-bottom: 20px; }
  html.swiss.g4 .case-facts { grid-template-columns: 1fr; }
  html.swiss.g4 .case-facts > div:nth-child(1) { padding-right: 0; }
  /* The longest title word («KYC‑верификация:») is 8.3 ems wide: size the title so it never breaks inside a word */
  html.swiss.g4 .container > .hero h1 { font-size: min(44px, (100vw - 2 * var(--gutter)) / 8.4); max-width: none; }
}

/* Touch targets inside the grid hero and the grid nav on phones */
@media (pointer: coarse) {
  html.swiss.g4 .nav-links .nav-seg { padding-block: 14px !important; }
  html.g4 .sw-meta a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  html.g4 .sw-index a { padding-block: 7px; }
}

/* ── Nav on the same four columns on every page: name, –, links, actions ── */
/* Only the site nav (name + links); the case nav – back · title · language – keeps its own three-part layout */
html.swiss.g4 .nav-inner:has(> .nav-links) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
html.swiss.g4 .nav-links { grid-column: 3; justify-content: flex-start; gap: 20px; }
html.swiss.g4 .nav-actions { grid-column: 4; justify-content: space-between; }
html.swiss.g4 .nav-name,
html.swiss.g4 .nav-seg,
html.swiss.g4 .nav-cta { font-size: 15px; font-weight: 400; }
html.swiss.g4 .nav-name { font-weight: 600; }
html.swiss.g4 .nav-seg { padding: 0; color: var(--text-mid); }
html.swiss.g4 .nav-seg.active { box-shadow: none; color: var(--text); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
html.swiss.g4 .nav-cta { background: none; border: 0; color: var(--text); padding: 0; }
html.swiss.g4 .nav-cta:hover { background: none; color: var(--accent); }
html.swiss.g4 .lang-toggle { border: 0; }
html.swiss.g4 .lang-toggle .lang-btn { padding: 0 4px; color: var(--text-dim); }
html.swiss.g4 .lang-toggle .lang-btn.lang-active { background: none; color: var(--text); }
@media (max-width: 640px) {
  html.swiss.g4 .nav-inner:has(> .nav-links) { display: flex; }
}

/* ── About on the grid: headline across columns 1–3, portrait in 4;
   every section opens under a black rule, label in column 1, content in 2–4 ── */
@media (min-width: 901px) {
  html.swiss.g4 .about-left { max-width: var(--max-w); }
  html.swiss.g4 .about-header {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g-gap);
    align-items: end; margin-bottom: 96px;
  }
  html.swiss.g4 .about-header-text { grid-column: 1 / 4; }
  html.swiss.g4 .about-portrait { grid-column: 4; margin: 0; }
  html.swiss.g4 .about-portrait img { width: 100%; height: auto; display: block; }
  html.swiss.g4 .about-section {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g-gap);
    padding-block: 16px 72px; border-top: 1px solid var(--text) !important;
  }
  html.swiss.g4 .about-section > .section-label { grid-column: 1; }
  html.swiss.g4 .about-section > .section-content { grid-column: 2 / -1; }
  html.swiss.g4 .about-section .info-text,
  html.swiss.g4 .about-section .exp-list,
  html.swiss.g4 .about-section .beliefs-list,
  html.swiss.g4 .about-section .core-list { max-width: 680px; }
  /* The photo strip runs across the whole grid under its label */
  html.swiss.g4 .about-section:has(.gallery-strip) > .section-content { grid-column: 1 / -1; margin-top: 32px; }
}
html.swiss.g4 .page-eyebrow::before { content: none; }
html.swiss.g4 .page-eyebrow { font-size: 13px; letter-spacing: 0.06em; margin-bottom: 24px; }
html.swiss.g4 .about-headline {
  font-size: clamp(36px, 4.6vw, 68px); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance; max-width: 16ch;
}
html.swiss.g4 .about-section > .section-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--text); padding-top: 0;
}
/* "Looking for" is the page's one call-out: the same inset rule as the quotes in the cases, no box */
html.swiss.g4 .info-looking {
  background: none; border: 0; border-left: 3px solid var(--accent); border-radius: 0;
  padding: 2px 0 2px calc(var(--inset, 24px) - 3px); color: var(--text);
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4;
}
/* Experience: one company per row under a hairline, name set like the CV */
html.swiss.g4 .exp-item { border-top: 1px solid var(--border); padding-top: 16px; }
html.swiss.g4 .exp-item:first-child { border-top: 0; padding-top: 0; }
html.swiss.g4 .exp-company { font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
html.swiss.g4 .exp-period { font-size: 14px; color: var(--text-dim); }
html.swiss.g4 .exp-list { gap: 32px; }

@media (max-width: 900px) {
  html.swiss.g4 .about-section { padding-block: 16px 48px; border-top: 1px solid var(--text) !important; }
  html.swiss.g4 .about-section > .section-label { margin-bottom: 20px; display: block; }
}
/* About polish: photo without its placeholder well, outcomes at reading size, principles closer together */
html.swiss.g4 .about-portrait { background: none !important; border: 0 !important; aspect-ratio: auto !important; height: auto !important; }
html.swiss.g4 .about-portrait img { aspect-ratio: auto; object-fit: initial; }
html.swiss.g4 .about-headline { max-width: none; }
html.swiss.g4 .exp-outcomes li,
html.swiss.g4 .exp-bullets li { font-size: 15px !important; line-height: 1.5; }
html.swiss.g4 .belief-item { padding-block: 24px !important; }
html.swiss.g4 .belief-item:first-child { padding-top: 0 !important; }

/* ━━ About · second pass: a person, not a document ━━
   Short statement + large portrait; experience as a four-row ledger; principles as three columns;
   tools as one line; the photo strip stays. The long intro, bullets and skill table are for the CV */
.ab-hero, .ab-ledger, .ab-more { display: none; }
html.swiss.g4 .about-header,
html.swiss.g4 .exp-list,
html.swiss.g4 .core-list { display: none; }

html.swiss.g4 .ab-hero {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g-gap);
  align-items: end; margin-bottom: 96px;
}
html.swiss.g4 .ab-hero-text { grid-column: 1 / 3; }
html.swiss.g4 .ab-portrait { grid-column: 3 / -1; margin: 0; }
html.swiss.g4 .ab-portrait img { display: block; width: 100%; height: auto; }
html.swiss.g4 .ab-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; }
html.swiss.g4 .ab-title {
  font-family: var(--f-display); font-size: clamp(40px, 5.4vw, 80px); font-weight: 700; line-height: 0.96; letter-spacing: -0.04em;
  color: var(--text); margin-bottom: 32px; text-wrap: balance;
}
html.swiss.g4 .ab-sub { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: var(--text-mid); max-width: 32ch; margin: 0; }

/* Experience ledger: years | company | role | the one result */
html.swiss.g4 .ab-ledger { display: block; list-style: none; margin: 0; padding: 0; }
html.swiss.g4 .ab-ledger li {
  display: grid; grid-template-columns: 96px minmax(180px, 0.8fr) minmax(0, 1.3fr) minmax(0, 1.2fr); column-gap: 24px;
  align-items: baseline; padding: 14px 0; border-top: 1px solid var(--border);
}
html.swiss.g4 .ab-ledger li:first-child { border-top: 0; padding-top: 0; }
html.swiss.g4 .ab-y { font-size: 14px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
html.swiss.g4 .ab-co { font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
html.swiss.g4 .ab-role { font-size: 15px; color: var(--text-mid); line-height: 1.4; }
html.swiss.g4 .ab-out { font-size: 15px; color: var(--text); line-height: 1.4; }
html.swiss.g4 .ab-out b { font-weight: 600; color: var(--accent); }
html.swiss.g4 .ab-more { display: block; margin: 20px 0 0; font-size: 15px; }
html.swiss.g4 .ab-more a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
html.swiss.g4 .ab-more a:hover { color: var(--accent); }
html.swiss.g4 .about-section .exp-list ~ * { }
html.swiss.g4 .about-section:has(.ab-ledger) .section-content { max-width: none; }

/* Principles: three columns across the whole grid, the number large on top */
@media (min-width: 901px) {
  html.swiss.g4 .about-section:has(.beliefs-list) > .section-content { grid-column: 1 / -1; margin-top: 32px; }
  html.swiss.g4 .beliefs-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g-gap); max-width: none !important; }
  html.swiss.g4 .belief-item { display: block !important; padding: 0 !important; border: 0 !important; }
}
html.swiss.g4 .belief-num { display: block; font-size: clamp(48px, 5vw, 72px) !important; font-weight: 700 !important; letter-spacing: -0.04em !important; line-height: 1 !important; color: var(--accent); margin-bottom: 16px; }
html.swiss.g4 .belief-title { font-size: clamp(20px, 1.8vw, 24px) !important; font-weight: 600 !important; line-height: 1.2 !important; margin-bottom: 10px !important; }

/* Tools: the tag cloud becomes one plain line */
html.swiss.g4 .tags-grid { display: block; font-size: 15px; line-height: 1.8; color: var(--text); }
html.swiss.g4 .tags-grid .tag { display: inline; background: none; border: 0; padding: 0; font-size: inherit; font-weight: 400; }
html.swiss.g4 .tags-grid .tag + .tag::before { content: ' · '; color: var(--text-dim); }

@media (max-width: 900px) {
  html.swiss.g4 .ab-hero { grid-template-columns: 1fr; row-gap: 32px; margin-bottom: 56px; }
  html.swiss.g4 .ab-hero-text, html.swiss.g4 .ab-portrait { grid-column: 1; }
  html.swiss.g4 .ab-ledger li { grid-template-columns: 80px minmax(0, 1fr); row-gap: 4px; }
  html.swiss.g4 .ab-role, html.swiss.g4 .ab-out { grid-column: 2; }
  html.swiss.g4 .beliefs-list { display: flex !important; flex-direction: column; gap: 40px; }
  html.swiss.g4 .belief-item { display: block !important; padding: 0 !important; border: 0 !important; }
}

/* About · the photo index (built by about.html from the strip): captions in 1–2, the photo in 3–4 */
.ab-index { display: none; }
@media (min-width: 901px) {
  html.swiss.g4 .ab-index:not([hidden]) {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g-gap); align-items: start;
  }
  html.swiss.g4 .ab-index:not([hidden]) ~ .gallery-strip { display: none; }
  html.swiss.g4 .ab-index-list { grid-column: 1 / 3; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
  html.swiss.g4 .ab-index-list li { border-bottom: 1px solid var(--border); }
  html.swiss.g4 .ab-index-list button {
    width: 100%; display: grid; grid-template-columns: 32px 64px 88px 1fr; column-gap: 16px; align-items: center;
    padding: 8px 0; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--text-mid);
    transition: color .15s ease;
  }
  html.swiss.g4 .ab-index-list i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
  html.swiss.g4 .ab-ix-tag { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
  html.swiss.g4 .ab-ix-cap { font-size: 17px; }
  html.swiss.g4 .ab-index-list li.is-on button,
  html.swiss.g4 .ab-index-list button:hover { color: var(--text); }
  html.swiss.g4 .ab-index-list li.is-on i { color: var(--accent); }
  html.swiss.g4 .ab-index-list li.is-on .ab-ix-cap { font-weight: 600; }
  html.swiss.g4 .ab-index-view { grid-column: 3 / -1; position: sticky; top: 96px; }
  html.swiss.g4 .ab-index-stage {
    position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
    padding: 0; border: 0; background: var(--bg-deep); cursor: zoom-in; overflow: hidden;
  }
  html.swiss.g4 .ab-index-stage > * {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .35s ease;
  }
  html.swiss.g4 .ab-index-stage > .is-on { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { html.swiss.g4 .ab-index-stage > * { transition: none; } }
@media (pointer: coarse) { html.swiss.g4 .ab-more a { display: inline-block; padding-block: 12px; margin-block: -12px; } }
/* Gallery cues: a thumbnail on every row, a counter and arrows under the photo */
html.swiss.g4 .ab-ix-thumb {
  display: block; width: 64px; height: 44px; background: var(--bg-deep) center / cover no-repeat;
  overflow: hidden; opacity: .55; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease;
}
html.swiss.g4 .ab-ix-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
html.swiss.g4 .ab-index-list li.is-on .ab-ix-thumb,
html.swiss.g4 .ab-index-list button:hover .ab-ix-thumb { opacity: 1; filter: none; }
html.swiss.g4 .ab-index-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
html.swiss.g4 .ab-index-count { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: auto; }
html.swiss.g4 .ab-index-nav {
  width: 40px; height: 40px; border: 1px solid var(--text); background: none; font: inherit; font-size: 16px;
  color: var(--text); cursor: pointer;
}
html.swiss.g4 .ab-index-nav:hover { background: var(--text); color: #fff; }

/* About · contact sheet (?sheet): six frames a row on desktop, three on phones, numbered under each */
.ab-sheet { display: none; }
html.swiss.g4 .ab-sheet:not([hidden]) {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 12px;
  list-style: none; margin: 0; padding: 0;
}
html.swiss.g4 .ab-sheet:not([hidden]) ~ .gallery-strip,
html.swiss.g4 .ab-sheet:not([hidden]) ~ .ab-index { display: none !important; }
html.swiss.g4 .ab-sheet button { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: zoom-in; }
html.swiss.g4 .ab-sheet img,
html.swiss.g4 .ab-sheet video {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--bg-deep);
  transition: opacity .2s ease;
}
html.swiss.g4 .ab-sheet button:hover img,
html.swiss.g4 .ab-sheet button:hover video { opacity: .85; }
html.swiss.g4 .ab-sheet-cap {
  display: flex; gap: 8px; align-items: baseline; margin-top: 8px;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim);
}
html.swiss.g4 .ab-sheet-cap i { font-style: normal; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
html.swiss.g4 .ab-sheet button:hover .ab-sheet-cap i,
html.swiss.g4 .ab-sheet button:focus-visible .ab-sheet-cap i { color: var(--accent); }
@media (min-width: 901px) {
  html.swiss.g4.g4-sheet .about-section:has(.ab-sheet) > .section-content { grid-column: 1 / -1; margin-top: 32px; }
}
@media (max-width: 900px) { html.swiss.g4 .ab-sheet:not([hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; } }
/* The name in the nav is the site's wordmark: the hero's ExtraBold and tight tracking at nav size */
html.swiss.g4 .nav-name { font-size: 20px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
html.swiss.g4 .nav-name:hover { color: var(--accent); }

/* ━━ Type scale – six sizes, one role each (final word on size; loaded last) ━━
   display   fitted to the grid (home name, CV name) – set elsewhere
   title     64  page titles: case covers, About
   heading   32  chapter headings, big numbers, case names, the home lead
   lead      20  leads, quotes, call-outs, the wordmark
   body      16  all reading text, lists, navigation, buttons
   caption   13  labels, meta, captions, dates
   Weights: 400 text · 600 labels and emphasis · 700/800 display */
html.swiss.g4 {
  --ts-title: 64px;   --lh-title: 64px;
  --ts-heading: 32px; --lh-heading: 36px;
  --ts-lead: 20px;    --lh-lead: 28px;
  --ts-body: 16px;    --lh-body: 24px;
  --ts-caption: 12px; --lh-caption: 16px;
}
/* Every size and line height is a multiple of 4. Steps change at breakpoints instead of scaling with the window */
@media (max-width: 1200px) { html.swiss.g4 { --ts-title: 48px; --lh-title: 52px; } }
@media (max-width: 580px)  { html.swiss.g4 { --ts-title: 36px; --lh-title: 40px; --ts-heading: 24px; --lh-heading: 32px; } }
@media (max-width: 400px)  { html.swiss.g4 { --ts-title: 32px; --lh-title: 36px; } }
html.swiss.g4 body { font-size: var(--ts-body); line-height: var(--lh-body); }

/* title */
@media (min-width: 581px) {
  html.swiss.g4 .container > .hero h1 { font-size: var(--ts-title) !important; line-height: var(--lh-title) !important; }
}
html.swiss.g4 .ab-title,
html.swiss.g4 .belief-num { font-size: var(--ts-title) !important; line-height: var(--lh-title) !important; }

/* heading */
html.swiss.g4 :is(.section h2, .work-title, .next-link, .metric-num, .sw-lead) { font-size: var(--ts-heading) !important; line-height: var(--lh-heading) !important; }

/* lead */
html.swiss.g4 :is(.hero-desc, .insight, .info-looking, .ab-sub, .contact-link-value, .phone-caption strong, .mm-root-title, .nav-name) { font-size: var(--ts-lead) !important; line-height: var(--lh-lead) !important; }

/* body */
html.swiss.g4 :is(.section p, .section li, .section dd, .section h3, .decision h3, .decision p, .tradeoff p, .split-text p,
  .info-text p, .work-excerpt, .belief-note, .belief-title, .contact-text p, .scope-title, ol.goals li,
  .case-facts dd, .ab-role, .ab-out, .ab-co, .ab-more, .tags-grid, .ab-ix-cap,
  .nav-seg, .nav-cta, .sw-meta p, .sw-index a, .sw-label, .contact-btn, .hero-btn-primary, .hero-btn-secondary, .exp-outcomes li, .exp-bullets li) { font-size: var(--ts-body) !important; line-height: var(--lh-body) !important; }
html.swiss.g4 :is(.decision h3, .belief-title, .scope-title) { font-weight: 600 !important; }
html.swiss.g4 .ab-co { font-weight: 700 !important; }

/* caption */
html.swiss.g4 :is(.screen-cap, .screen-cap strong, .screen-cap span, figcaption, .clip figcaption, .metric-label, .metric-delta,
  .ledger-cell, .mm-caption, .mm-leaf-text, .mm-leaf-sub, .mm-finding-fix, .mm-branch-label, .phone-caption span,
  .insight-source, .case-facts dt, .work-meta, .work-company, .work-metric, .hero-eyebrow, .eyebrow-meta, .eyebrow-jump,
  .section-label, .next-label, .tradeoff-label, .contact-link-label, .footer-name, .footer-note,
  .ab-y, .ab-eyebrow, .page-eyebrow, .ab-ix-tag, .ab-sheet-cap, .ab-index-list i, .gallery-cap, .gallery-badge,
  .nav-breadcrumb, .nav-back, .lang-btn, .sw-index i, .belief-item .belief-num + *, .screens-hint) { font-size: var(--ts-caption) !important; line-height: var(--lh-caption) !important; }
html.swiss.g4 .belief-item .belief-num + * { font-size: var(--ts-body) !important; line-height: var(--lh-body) !important; }
html.swiss.g4 .contact-text h2 { font-size: var(--ts-heading) !important; line-height: var(--lh-heading) !important; }
html.swiss.g4 .screen-group-head h3 { font-size: var(--ts-lead) !important; line-height: var(--lh-lead) !important; font-weight: 600 !important; }
html.swiss.g4 .screen-group-head p { font-size: var(--ts-body) !important; line-height: var(--lh-body) !important; }
/* Weights: 400 text, 600 labels and emphasis, 500 only on controls (buttons, toggles), 700–800 display */
html.swiss.g4 .section div > p:not([class*="label"]),
html.swiss.g4 :is(.contact-link-value, .metric-delta, .work-company, .contact-link-label, .ledger-row.header .ledger-cell, .nav-breadcrumb .current) { font-weight: 400 !important; }
html.swiss.g4 .ab-portrait { padding: 0; border: 0; }

/* ━━ Home on phones: the name comes first ━━
   Order: name → lead → facts → case index. The lead drops to the lead step so it reads as the name's caption */
@media (max-width: 560px) {
  html.g4 .hero .sw { grid-template-rows: none; row-gap: 0; }
  html.g4 .hero .sw-foot { display: contents; }
  html.swiss.g4 .hero .sw-name { order: 1; margin: 8px 0 24px; }
  html.g4 .hero .sw-lead { order: 2; grid-column: 1 / -1; margin-bottom: 32px; }
  html.g4 .hero .sw-meta { order: 3; margin-bottom: 0; padding-top: 16px; border-top: 1px solid var(--text); }
  html.g4 .hero .sw-facets { order: 4; margin-top: 24px; }
  html.g4 .hero .sw-label { order: 4; }
  html.g4 .hero .sw-label { margin-bottom: 12px; }
  html.g4 .hero .sw-label + .sw-index,
  html.g4 .hero .sw-index { order: 5; margin-top: 0; }
  html.swiss.g4 section.hero { padding-top: 24px; }
}
@media (max-width: 580px) {
  html.swiss.g4 .hero .sw-lead { font-size: var(--ts-lead) !important; line-height: 1.3; }
}
/* Phones: the case cards follow right after the hero, so the short index would say the same thing twice */
@media (max-width: 560px) { html.g4 .hero .sw-label, html.g4 .hero .sw-index { display: none; } }
html.g4 .section [id] { scroll-margin-top: 124px; }

/* ━━ Phone menu: a full-screen sheet under the header ━━
   Large items on the gutter line of the wordmark, hairlines between them, the current page in the accent,
   «Get in touch →» last, language at the bottom on the same line */
@media (max-width: 640px) {
  html.swiss.g4 .nav .nav-links {
    top: 64px; left: 0; right: 0; bottom: 0; height: auto;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 8px var(--gutter-sm, 20px) calc(24px + env(safe-area-inset-bottom));
    background: var(--bg); border: 0; box-shadow: none; overflow-y: auto;
  }
  html.swiss.g4 .nav .nav-links .nav-seg {
    display: flex; align-items: center; justify-content: space-between; min-height: 0;
    padding: 16px 0 !important; margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
    font-size: var(--ts-heading, 32px) !important; line-height: var(--lh-heading) !important; font-weight: 500 !important; letter-spacing: -0.02em; line-height: 1.1;
    color: var(--text); text-decoration: none !important; box-shadow: none !important; background: none;
  }
  html.swiss.g4 .nav .nav-links .nav-seg.active { color: var(--accent); }
  html.swiss.g4 .nav .nav-links .nav-seg.active::after { content: '●'; font-size: 10px; color: var(--accent); }
  html.swiss.g4 .nav .nav-links .nav-seg--cta { color: var(--text); }
  html.swiss.g4 .nav .nav-links .nav-seg--cta::after { content: '→'; font-size: 0.8em; color: var(--accent); }
  html.swiss.g4 .nav .nav-sheet-lang { margin-top: auto; padding: 24px 0 0; }
  html.swiss.g4 .nav .nav-sheet-lang .lang-toggle { gap: 0; }
  html.swiss.g4 .nav .nav-sheet-lang .lang-btn { font-size: var(--ts-body, 16px) !important; line-height: var(--lh-body) !important; padding: 12px 12px 12px 0 !important; margin: 0 !important; }
  html.swiss.g4 .nav .nav-sheet-lang .lang-btn + .lang-btn::before { margin-right: 12px; }
  /* The sheet covers the page, so the dimmed backdrop is no longer needed */
  html.swiss.g4 .nav.is-open::after { content: none; }
}

/* Header language toggle everywhere: the slash sits in the middle of the gap */
html.swiss.g4 .lang-toggle .lang-btn + .lang-btn { padding-left: 0 !important; }
html.swiss.g4 .lang-toggle .lang-btn + .lang-btn::before { margin-right: 6px; }

/* About · closing step to the work, set like «Next case» at the end of a case: label in column 1, link in 2–4 */
.ab-next { margin-top: 96px; padding-top: 16px; border-top: 1px solid var(--text); }
.ab-next-label { margin: 0 0 12px; font-size: var(--ts-caption, 13px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.ab-next-link { font-size: var(--ts-heading, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); text-decoration: none; }
.ab-next-link:hover { color: var(--accent); }
.ab-next-arrow { display: inline-block; transition: transform .15s ease; }
.ab-next-link:hover .ab-next-arrow { transform: translateX(4px); }
@media (min-width: 901px) {
  html.g4 .ab-next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g-gap); align-items: baseline; }
  html.g4 .ab-next-label { grid-column: 1; margin: 0; }
  html.g4 .ab-next-link { grid-column: 2 / -1; }
}
@media (max-width: 900px) { .ab-next { margin-top: 64px; } }
@media (prefers-reduced-motion: reduce) { .ab-next-arrow { transition: none; } }

/* ━━ Rules: black opens a section, grey divides inside one or belongs to the interface (nav, chapter bar, footer) ━━ */
html.swiss.g4 .next-case,
html.swiss.g4 .section-contact { border-top: 1px solid var(--text) !important; }
/* Case cover: the facts row already carries a hairline – no second one under the cover */
html.swiss.g4 .container > .hero { border-bottom: 0 !important; }

/* ━━ Spacing: four steps, one job each ━━
   s1  8   inside one item: label ↔ value, image ↔ caption, number ↔ name
   s2 16   between items of a group: heading ↔ text, rows, list items, rule ↔ what it opens
   s3 32   between groups inside a section: text ↔ figure, block ↔ block; also the page margin and the column gap
   s4 96   between sections: content ↔ the next black rule, phones included
   Mock-ups of UI (mail, mind-map chips, buttons) keep their own inner padding – they depict other products */
html.swiss.g4 { --s1: 8px; --s2: 16px; --s3: 32px; --s4: 96px; --g-gap: var(--s3); --gutter: var(--s3); --gutter-sm: var(--s2); --inset: var(--s3); }
/* Phones keep the same four steps; only the page margin sits between s2 and s3 (24) – 16 felt cramped on a 390px screen */
@media (max-width: 580px) { html.swiss.g4 { --gutter: 24px; --gutter-sm: 24px; --g-gap: var(--s2); } }

/* Sections: rule → s2 → content … content → s4 → next rule */
html.swiss.g4 :is(.section, .next-case, .section-contact, .about-section) { padding-block: var(--s2) var(--s4) !important; }
html.swiss.g4 .container > .hero { padding-bottom: var(--s4) !important; }
html.swiss.g4 :is(.section, .about-section, .next-case, .sw, .ab-hero, .ab-next, .cv-body, .cv-header, .ab-ledger li, .ledger-row, .rb-row, .mails) { column-gap: var(--g-gap) !important; }
html.swiss.g4 .nav-inner:has(> .nav-links) { column-gap: var(--g-gap); }
html.swiss.g4 .ab-hero { margin-bottom: var(--s4) !important; }
html.swiss.g4 .ab-next { margin-top: var(--s4) !important; padding-top: var(--s2) !important; }
html.swiss.g4 .footer { padding-block: var(--s3) !important; }
html.swiss.g4 .kyc-map { padding-block: 0 !important; margin-block: var(--s3) !important; }

/* Labels and headings */
html.swiss.g4 .section > .section-label:not(.section-label--sub),
html.swiss.g4 .about-section > .section-label { margin-bottom: var(--s2); }
@media (min-width: 901px) {
  html.swiss.g4 .section > .section-label:not(.section-label--sub),
  html.swiss.g4 .about-section > .section-label { margin-bottom: 0; }
}
html.swiss.g4 .section-label { gap: var(--s1) !important; }
html.swiss.g4 .container > .hero h1 { margin-bottom: var(--s3) !important; }
html.swiss.g4 :is(.ab-eyebrow, .page-eyebrow) { margin-bottom: var(--s2) !important; }
html.swiss.g4 :is(.belief-title, .outcomes-hd, .ab-sheet-cap) { margin-bottom: var(--s1) !important; }
html.swiss.g4 :is(.case-facts dt, .contact-link-label, .screen-cap strong, .metric-delta) { margin-bottom: var(--s1) !important; }
html.swiss.g4 .ab-next-label { margin-bottom: var(--s2) !important; }

/* Inside a chapter. The chapter is a grid, and grid margins add up instead of collapsing (16 + 32 = 48),
   so each child only sets the space above it: s2 after text, s3 around a group */
html.swiss.g4 .section > * { margin-block: 0 !important; }
html.swiss.g4 .section > * + * { margin-top: var(--s2) !important; }
html.swiss.g4 .section > .section-label + * { margin-top: 0 !important; }
html.swiss.g4 .section > * + :is(.board-figure, .clip, .decisions, .metrics, .scope-grid, .tradeoff, .web-shots, .split, .ledger, .mails, .screens-scroll, .slider-controls, .status-table, .before-grid, .platform-split, .competitors, .kyc-map, .insight, .screen-group-head, .goals),
html.swiss.g4 .section > :is(.board-figure, .clip, .decisions, .metrics, .scope-grid, .tradeoff, .web-shots, .split, .ledger, .mails, .screens-scroll, .status-table, .before-grid, .platform-split, .competitors, .kyc-map, .insight-source, .goals) + * { margin-top: var(--s3) !important; }
html.swiss.g4 .section > .slider-controls + .screens-scroll { margin-top: var(--s2) !important; }
html.swiss.g4 .section > .insight + .insight-source { margin-top: var(--s1) !important; }
html.swiss.g4 .section > .screens-scroll + .screens-hint { margin-top: var(--s1) !important; }
@media (max-width: 900px) { html.swiss.g4 .section > .section-label:not(.section-label--sub) + * { margin-top: var(--s2) !important; } }
html.swiss.g4 :is(.screen-cap, figcaption, .phone-caption, .proto-hint) { margin-top: var(--s1) !important; }
html.swiss.g4 .phone-caption, html.swiss.g4 .proto-hint { margin-top: var(--s2) !important; }
html.swiss.g4 .case-facts { margin-top: var(--s3) !important; padding-top: var(--s2) !important; row-gap: var(--s2) !important; }
html.swiss.g4 .case-facts > div:nth-child(1) { padding-right: var(--s3) !important; }
@media (max-width: 900px) { html.swiss.g4 .case-facts > div:nth-child(1) { padding-right: 0 !important; } }
html.swiss.g4 .phone-scene { padding-block: var(--s3) !important; }

/* Rows: s2 above and below the hairline */
html.swiss.g4 :is(.decision, .ledger-row, .tradeoff, .contact-link, .mm-finding, .ab-ledger li, .metric-tile) { padding-block: var(--s2) !important; }
html.swiss.g4 .ab-ledger li:first-child { padding-top: 0 !important; }
html.swiss.g4 .tradeoff { padding-inline: var(--inset) !important; }
html.swiss.g4 .decision { column-gap: var(--s2) !important; }
html.swiss.g4 .ledger-row, html.swiss.g4 .ab-ledger li { row-gap: var(--s1) !important; }
html.swiss.g4 .metrics { padding-top: var(--s2) !important; column-gap: var(--g-gap) !important; }
html.swiss.g4 .scope-item { row-gap: var(--s1) !important; column-gap: var(--s2) !important; }
html.swiss.g4 .belief-item { padding-block: 0 !important; }
html.swiss.g4 .beliefs-list { gap: var(--s3) var(--g-gap) !important; }
html.swiss.g4 .ab-more { margin-top: var(--s2) !important; }
html.swiss.g4 .tags-grid { margin-top: var(--s2) !important; }
html.swiss.g4 .contact-row { margin-top: var(--s3) !important; gap: var(--s1) !important; }
html.swiss.g4 .contact-links { margin-top: var(--s3) !important; }
html.swiss.g4 .about-section:has(.gallery-strip) > .section-content,
html.swiss.g4 .about-section:has(.beliefs-list) > .section-content,
html.swiss.g4.g4-sheet .about-section:has(.ab-sheet) > .section-content { margin-top: var(--s3) !important; }

/* Image grids: s2 between pictures, s3 between rows that carry captions */
html.swiss.g4 .web-shots { gap: var(--s3) var(--s2) !important; }
html.swiss.g4 .ab-sheet:not([hidden]) { gap: var(--s3) var(--s2) !important; }
@media (max-width: 900px) { html.swiss.g4 .ab-sheet:not([hidden]) { gap: var(--s2) var(--s1) !important; } }

/* KYC map */
html.swiss.g4 .mm { gap: var(--s3) !important; }
html.swiss.g4 .mm-leaves { gap: var(--s1) !important; }
html.swiss.g4 .mm-findings { margin-top: var(--s3) !important; }
html.swiss.g4 .mm-findings-head { gap: var(--s2) !important; padding-bottom: var(--s2) !important; }
html.swiss.g4 .mm-finding { gap: var(--s1) var(--s3) !important; }
html.swiss.g4 .mm-caption { margin-bottom: var(--s3) !important; }
@media (max-width: 900px) { html.swiss.g4 .mm-branch { margin-top: var(--s2) !important; } }

/* Home: hero and the results board */
html.swiss.g4 section.hero { padding-top: var(--s3) !important; padding-bottom: 0 !important; }
html.swiss.g4 .hero .sw-name { margin-block: var(--s3) !important; }
html.swiss.g4 .hero .rb { margin-top: var(--s4) !important; }
html.swiss.g4 .rb-head { padding-block: var(--s2) !important; gap: var(--s1) var(--s2) !important; }
html.swiss.g4 .rb-legend { gap: var(--s2) !important; }
html.swiss.g4 .rb-row { padding-block: var(--s3) !important; row-gap: var(--s1) !important; }
html.swiss.g4 .rb-bars { row-gap: var(--s1) !important; }
html.swiss.g4 .rb-label, html.swiss.g4 .rb-num { margin-top: 0 !important; }
@media (max-width: 580px) {
  html.swiss.g4 .rb-bars { margin-top: var(--s1) !important; }
  html.swiss.g4 .hero .sw-name { margin: 0 0 var(--s3) !important; }
  html.swiss.g4 .hero .sw-lead { margin-bottom: var(--s3) !important; }
  html.swiss.g4 .hero .sw-meta { padding-top: var(--s2) !important; }
  html.swiss.g4 .hero .sw-label { margin-bottom: var(--s1) !important; }
}

/* About top */
html.swiss.g4 .about-left { padding-block: var(--s3) var(--s4) !important; }
html.swiss.g4 .about-section { row-gap: var(--s2) !important; }
html.swiss.g4 .container > .slider-controls { margin-top: var(--s3) !important; }
html.swiss.g4 .container > .screens-scroll { margin-bottom: var(--s3) !important; }
html.swiss.g4 .goals li { column-gap: var(--s2) !important; }
html.swiss.g4 .rb-bars { column-gap: var(--s1) !important; }
html.swiss.g4 .screen-group-head { padding-top: var(--s2) !important; row-gap: var(--s1) !important; }
html.swiss.g4 .container > .screen-group-head { margin-top: var(--s3) !important; }
/* The phone scene is a full-width band under the cover: the next chapter keeps its s4 */
html.swiss.g4 :is(.phone-scene, .video-demo) { margin-bottom: var(--s4) !important; }
/* Home contact: the black rule runs on the content width like every other section, text and links top-aligned on the grid */
html.swiss.g4 .section-contact { border-top: 0 !important; padding-top: var(--s4) !important; }
html.swiss.g4 .contact-inner { border-top: 1px solid var(--text); padding-top: var(--s2); gap: var(--s3) var(--g-gap) !important; align-items: start !important; }
html.swiss.g4 .contact-text h2 { margin-bottom: var(--s2) !important; }
html.swiss.g4 .contact-links { margin-top: 0 !important; }
html.swiss.g4 .contact-link { margin: 0 !important; }
html.swiss.g4 .contact-link:first-child { padding-top: 0 !important; }
html.swiss.g4 .split-text .insight { margin-top: var(--s3) !important; }
html.swiss.g4 .rb li:last-child > .rb-row { border-bottom: 0 !important; padding-bottom: 0 !important; }
/* About text: paragraphs s2 apart, the "Looking for" call-out s3 around (block flow, margins collapse) */
html.swiss.g4 .about-section .section-content p { margin-block: 0 var(--s2) !important; }
html.swiss.g4 .about-section .section-content .info-looking { margin-block: var(--s3) !important; }
html.swiss.g4 .about-section .section-content > :last-child { margin-bottom: 0 !important; }
/* To-top sits on the page margin */
html.swiss.g4 .to-top { right: max(var(--gutter), env(safe-area-inset-right)) !important; bottom: calc(var(--gutter) + env(safe-area-inset-bottom)) !important; }

/* ━━ Type on the ÷4 grid ━━
   title 64/64 (48/52 ≤1200, 36/40 phones, 32/36 ≤400) · heading 32/36 (24/32 phones) · lead 20/28 · body 16/24 · caption 12/16
   Only the fitted name on the home page and the CV scales with the screen */
html.swiss.g4 .container > .hero h1 { font-size: var(--ts-title) !important; line-height: var(--lh-title) !important; }
/* Home: case titles are section headings, results are display numbers 48/48 (40/40 phones) */
html.swiss.g4 .rb-case { font-size: var(--ts-heading) !important; line-height: var(--lh-heading) !important; }
html.swiss.g4 .rb-num { font-size: 48px !important; line-height: 48px !important; }
html.swiss.g4 .rb-pre { font-size: var(--ts-lead) !important; line-height: var(--lh-lead) !important; vertical-align: 0 !important; }
@media (max-width: 580px) {
  html.swiss.g4 .rb-num { font-size: 40px !important; line-height: 40px !important; }
  html.swiss.g4 .rb-pre { font-size: var(--ts-body) !important; line-height: var(--lh-body) !important; }
}
html.swiss.g4 :is(.rb-title, .rb-legend, .rb-legend span, .rb-meta, .rb-label, .rb-excerpt + *, .footer-inner, .footer-inner *) { font-size: var(--ts-caption) !important; line-height: var(--lh-caption) !important; }
html.swiss.g4 .rb-excerpt { font-size: var(--ts-body) !important; line-height: var(--lh-body) !important; }
/* Labels: one caps style everywhere – 12/16, 600, tracking 0.06em */
html.swiss.g4 :is(.section-label, .next-label, .tradeoff-label, .mm-branch-label, .rb-title, .rb-legend, .ab-next-label, .eyebrow-meta, .eyebrow-jump, .hero-eyebrow, .case-toc a, .outcomes-hd, .sec-label) { letter-spacing: 0.06em !important; }
/* Captions: plain weight – the title line in the text colour, the note under it grey */
html.swiss.g4 :is(.screen-cap strong, figcaption strong, .case-facts dt, .ledger-row.header .ledger-cell) { font-weight: 400 !important; }
html.swiss.g4 :is(.screen-cap strong, figcaption strong) { color: var(--text) !important; }
/* Sub-headings: one style, lead size 600 */
html.swiss.g4 body :is(.section h3, .decision h3, .belief-title, .scope-title, .phone-caption strong, .mm-root-title, .screen-group-head h3) { font-size: var(--ts-lead) !important; line-height: var(--lh-lead) !important; font-weight: 600 !important; }
/* Display numbers and arrows follow their line */
html.swiss.g4 .metric-num { line-height: var(--lh-heading) !important; }
html.swiss.g4 :is(.next-arrow, .ab-next-arrow, .arrow) { font-size: inherit !important; line-height: inherit !important; }
html.swiss.g4 .contact-arrow { font-size: var(--ts-lead) !important; line-height: var(--lh-lead) !important; }
html.swiss.g4 .belief-num { line-height: var(--lh-title) !important; }
/* Inset blocks: a 4px rule + 28px = the 32px inset */
html.swiss.g4 :is(.insight, .info-looking) { border-left-width: 4px !important; padding: 0 0 0 28px !important; }
html.swiss.g4 .section .insight-source { margin-left: var(--inset) !important; }
/* Controls on the grid */
html.swiss.g4 .to-top { width: 48px !important; height: 48px !important; padding: 0 !important; display: grid; place-items: center; }
html.swiss.g4 .proto-hint { padding-inline: var(--s2) !important; }
html.swiss.g4 .lang-toggle { gap: 0 !important; }
@media (max-width: 900px) { html.swiss.g4 .nav-links .nav-seg { padding-block: 12px !important; } }
html.swiss.g4 :is(.decision-num, .scope-icon, .mm-findings-head span, .mm-finding span, .proto-hint, .proto-hint span, .mail-more, .mail-more span, .to-top, .to-top span) { font-size: var(--ts-caption) !important; line-height: var(--lh-caption) !important; }
html.swiss.g4 .to-top > span:not(.to-top-label) { font-size: var(--ts-body) !important; line-height: var(--lh-body) !important; }
html.swiss.g4 .tag { line-height: var(--lh-body) !important; }
html.swiss.g4 .ab-next-link { font-size: var(--ts-heading) !important; line-height: var(--lh-heading) !important; }
/* Sub-heading opens a new topic inside a chapter: s3 above, s2 to its text */
html.swiss.g4 .section > * + h3,
html.swiss.g4 .section .split-text > * + h3 { margin-top: var(--s3) !important; }
html.swiss.g4 .section > .section-label + h3, html.swiss.g4 .section > h2 + h3 { margin-top: var(--s2) !important; }
html.swiss.g4 .section .split-text > h3 { margin-bottom: var(--s2) !important; }
html.swiss.g4 .section > h2 + h3.t-en + p.t-en + h3.t-ru { margin-top: var(--s2) !important; }
/* A sub-heading's own content follows at s2, even when it is a group (a list) */
html.swiss.g4 .section > h3 + :not(h3) { margin-top: var(--s2) !important; }
html.swiss.g4 .section > h3 + :is(.goals, ol, ul) { margin-top: var(--s2) !important; }
/* About experience: each company is a group of lines – s3 above and below its hairline, like the case rows on the home page.
   The CV link closes the list s3 below it and adds nothing to the section's s4 */
html.swiss.g4 .ab-ledger li { padding-block: var(--s3) !important; }
html.swiss.g4 .ab-ledger li:first-child { padding-top: 0 !important; }
/* The list is closed by a hairline, so the CV link below reads as its own line, not a fifth row */
html.swiss.g4 .ab-ledger li:last-child { padding-bottom: var(--s3) !important; border-bottom: 1px solid var(--border) !important; }
html.swiss.g4 .about-section .section-content .ab-more { margin: var(--s3) 0 0 !important; }

/* About · contact sheet as a mosaic: frames of three sizes on the column grid – one column, two columns wide,
   two by two. Rows are one portrait frame tall (3:4 plus its caption), so every tile fills its cell and the
   edges line up. Sizes go by position and pack without holes: 6 columns on desktop, 4 on tablets,
   3 on phones, where the wide frames turn single and the big ones alternate sides – right, left, right, left */
html.swiss.g4.g4-sheet .about-section:has(.ab-sheet) > .section-content { container-type: inline-size; }
html.swiss.g4 .ab-sheet:not([hidden]) {
  --cols: 6; --cg: var(--s2); --cap: 32px;
  --col: calc((100cqw - (var(--cols) - 1) * var(--cg)) / var(--cols));
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: calc(var(--col) * 4 / 3 + var(--cap));
  column-gap: var(--cg) !important;
}
html.swiss.g4 .ab-sheet > li { display: flex; min-height: 0; }
html.swiss.g4 .ab-sheet button { display: flex; flex-direction: column; height: 100%; }
html.swiss.g4 .ab-sheet :is(img, video) { flex: 1 1 0; min-height: 0; height: auto; aspect-ratio: auto !important; object-fit: cover; }
html.swiss.g4 .ab-sheet > li:is(:nth-child(1), :nth-child(3), :nth-child(18)) { grid-column: span 2; }
html.swiss.g4 .ab-sheet > li:is(:nth-child(2), :nth-child(8), :nth-child(11), :nth-child(16), :nth-child(17)) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) { html.swiss.g4 .ab-sheet:not([hidden]) { --cols: 4; --cg: var(--s1); } }
@media (max-width: 580px) {
  html.swiss.g4 .ab-sheet:not([hidden]) { --cols: 3; }
  html.swiss.g4 .ab-sheet > li:nth-child(n) { grid-column: auto; grid-row: auto; }
  html.swiss.g4 .ab-sheet > li:is(:nth-child(2), :nth-child(4), :nth-child(11), :nth-child(16)) { grid-column: span 2; grid-row: span 2; }
}
/* About ends like a case: s4 under the last link, not the section's s4 plus the column's */
html.swiss.g4 .about-left > .about-section:last-child { padding-bottom: 0 !important; }
html.swiss.g4 .ab-next-link { display: block; width: fit-content; }
@media (min-width: 901px) { html.swiss.g4 body .ab-next .ab-next-label { margin-bottom: 0 !important; line-height: var(--lh-caption) !important; } }