@font-face {
  font-family: Inter;
  src: url('../design/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Shared reading and layout rules for mobile, laptops and large displays. */
:root {
  --font-body: 'Inter', 'Arial', sans-serif;
  --content-width: 1440px;
  --page-gutter: 64px;
}

body, button, input, select, textarea {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6, .display-title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  text-wrap: balance;
}

h1, h2, h3 {
  overflow-wrap: break-word;
}

.display-title, .it-headline h1, .sa-heading h1 {
  letter-spacing: -.045em;
}

.it .page-hero h1, .routine-right h2 {
  font-weight: 500;
}

.it-headline h1 {
  font-size: clamp(64px, 8vw, 128px);
  max-width: 12ch;
  line-height: 1.06;
}

.sa-heading h1 {
  font-weight: 500;
  font-size: clamp(64px, 7.5vw, 112px);
  max-width: 13ch;
  line-height: 1.06;
}

.people-heading h2, .sa-service-head h2, .edition-title {
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.15;
}

.it-contact h2, .sa-contact h2 {
  font-size: clamp(38px, 5vw, 72px);
  max-width: 18ch;
  line-height: 1.12;
}

.routine-right h2, .letter-content h2 {
  font-size: clamp(32px, 3.3vw, 48px);
  line-height: 1.18;
}

.it-bottom p, .it-intro-bottom p, .it-offer p, .regulated p,
.people-foot, .sa-margin p, .routine-right p, .sa-service p,
.letter-content p, .working p, .sa-contact p, .inner-section p {
  font-size: 16px;
  line-height: 1.75;
}

.inner-section p, .inner-section ul, .inner-section ol {
  max-width: 70ch;
}

.inner-section .micro, .inner-section .v-eyebrow,
.inner-section .section-eyebrow, .inner-section .mcp-label {
  font-size: 11px;
}

.wrap, .inner-section > .container, .inner-section > .wrap,
.assistant-inline-host {
  max-width: var(--content-width);
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.routine, .sa-letter {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.sa-heading > *, .it-bottom > *, .regulated-inner > *,
.sa-contact-main > *, .it-contact-main > *, .people-list > * {
  min-width: 0;
}

@media (min-width: 1600px) {
  :root {
    --content-width: 1680px;
    --page-gutter: 80px;
  }

  .it-hero, .sa-hero {
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .it-intro, .regulated, .inner-section {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .it-expertises, .people-section, .sa-services, .sa-working {
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .it-intro-bottom {
    max-width: 950px;
  }

  .sa-services-list, .people-list {
    column-gap: 88px;
  }

  .sa-letter {
    padding: 88px var(--page-gutter);
    gap: 104px;
  }

  .routine-left, .routine-right {
    padding: 56px var(--page-gutter);
  }

  .inner-section .product-tour, .inner-section .platform-grid,
  .inner-section .content-grid {
    width: 100%;
  }
}

@media (min-width: 2200px) {
  :root {
    --content-width: 1920px;
    --page-gutter: 96px;
  }

  .it-headline h1 {
    font-size: 144px;
  }

  .sa-heading h1 {
    font-size: 128px;
  }

  .sa-heading {
    grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
    gap: 96px;
  }

  .sa-margin p {
    max-width: 32ch;
  }
}

@media (max-width: 1050px) {
  :root {
    --page-gutter: 38px;
  }
}

@media (max-width: 760px) {
  :root {
    --page-gutter: 24px;
  }

  .it-headline h1, .sa-heading h1 {
    font-size: clamp(44px, 12vw, 76px);
    max-width: 14ch;
  }

  .people-heading h2, .sa-service-head h2, .edition-title,
  .it-contact h2, .sa-contact h2 {
    font-size: clamp(32px, 8.5vw, 44px);
  }

  .routine-right h2, .letter-content h2 {
    font-size: 32px;
  }

  .inner-section p, .it-bottom p, .it-intro-bottom p,
  .it-offer p, .regulated p, .people-foot, .sa-margin p,
  .routine-right p, .sa-service p, .letter-content p,
  .working p, .sa-contact p {
    font-size: 15px;
  }
}

/* Preserve whole words in long headings on narrow phones. */
@media (max-width: 360px) {
  .it .page-hero h1 {
    font-size: 34px;
  }

  .it .it-story h2 {
    font-size: 28px;
  }
}