/*
 * Edition CH base: fonts, reset, typography.
 * Values extracted 1:1 from cloud-migration.ch.
 */

/* ---- Fonts (self-hosted, same files as the live site) ---- */
@font-face {
  font-family: 'Mark Pro';
  src: url('../assets/fonts/MarkPro-Book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mark Pro';
  src: url('../assets/fonts/MarkPro-BookItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Mark Pro';
  src: url('../assets/fonts/MarkPro-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mark Pro';
  src: url('../assets/fonts/MarkPro-Heavy.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Freight Text';
  src: url('../assets/fonts/freight-text-book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Freight Text';
  src: url('../assets/fonts/freight-text-book-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Freight Text';
  src: url('../assets/fonts/freight-text-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Freight Text';
  src: url('../assets/fonts/freight-text-bold-italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---- Reset / body ---- */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100%;
  max-width: 100%;
  background-color: var(--porcelain-grey);
  color: var(--text-color);
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.25;
  -webkit-hyphens: auto;
  hyphens: auto;
}

img { max-width: 100%; vertical-align: middle; border: 0; }

/* ---- Typography (desktop sizes; live-site values) ---- */
h1, h2, h3, h4, h5 { font-family: var(--font-heading); }

h1 { margin: 20px 0 10px; font-size: 90px; font-weight: 700; line-height: 100px; }
h2 { margin: 40px 0 20px; font-size: 45px; font-weight: 900; line-height: 1.25; }
h3 { color: var(--salmon-red); margin: 30px 0 20px; font-size: 35px; font-weight: 700; line-height: 1.25; }
h4 { margin: 10px 0; font-size: 30px; font-weight: 700; }
h5 { margin: 10px 0; font-size: 26px; font-weight: 700; line-height: 1.25; }

p { margin: 0 0 10px; }

a { color: var(--salmon-red); text-decoration: underline; }

ul { margin: 20px 0; padding-left: 40px; font-size: 19px; font-weight: 700; }

/* Responsive heading scale (site breakpoints: 991 / 767 / 479) */
@media screen and (max-width: 991px) {
  h2 { font-size: 41px; } h4 { font-size: 26px; } h5 { font-size: 22px; }
}
@media screen and (max-width: 767px) {
  h2 { font-size: 36px; } h3 { font-size: 30px; } h4 { font-size: 24px; } h5 { font-size: 20px; }
}
@media screen and (max-width: 479px) {
  h2 { font-size: 32px; } h3 { font-size: 26px; } h4 { font-size: 21px; } h5 { font-size: 19px; }
}

/* ---- Containers ---- */
.container {            /* Webflow .w-container */
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 991px) { .container { max-width: 728px; } }
@media screen and (max-width: 767px) { .container { max-width: 100%; padding-left: 20px; padding-right: 20px; } }

.section-container {    /* wide content container, used inside .section */
  max-width: 1178px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-flow: column wrap;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (max-width: 991px) {
  .section-container { align-items: center; padding-left: 20px; padding-right: 20px; }
}

.centered-container {   /* hero / intro content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  text-align: center;
}