/* Homepage roles reuse the existing fonts and colors. Ten type steps, six radii. */
:root {
  --type-caption: 12px;
  --type-label: 14px;
  --type-body: 16px;
  --type-lead: 20px;
  --type-title: 28px;
  --type-subheading: 32px;
  --type-heading: 52px;
  --type-display: 64px;
  --type-statement: 80px;
  --type-feature: 112px;
  --radius-small: 4px;
  --radius-card: 12px;
  --radius-window: 20px;
}
.digit-char, .cuting_text, .file_name, .tech_text, .organic-label,
.timezone, .cta_link.small, .item-tags, .date, .time, .latest_tag,
.ti-stat-label, .svc-close__mono,
.team-portrait span { font-size: var(--type-label) !important; }
.nav_link, .nav_link.mail, .price-disclaimer, .tech_text.big,
.ti-quote-text, .ti-quote-text strong, .mascot-bubble,
.paragraph, .ti-author-name { font-size: var(--type-body) !important; }
.title_text, .svc-btn { font-size: var(--type-lead) !important; }
body .desktop_version .item_name, #our_work .item_name { font-size: var(--type-title) !important; }
.client_name { font-size: var(--type-body) !important; }
.tab_flll { border-radius: var(--radius-small); }
.h3, .h3.process, .faq_name.big, .ti-stat-value { font-size: var(--type-subheading) !important; }
.h1, .h2, .ti-testimonials-title { font-size: var(--type-heading) !important; }
.partners-heading, .esn { font-size: var(--type-display) !important; }
.bg-service-text, .svc-close h2 { font-size: var(--type-statement) !important; }
.h2.sticky { font-size: var(--type-feature) !important; }
.h1 .about-line, .h2 .about-line, .h3 .about-line,
.h1 .italic-text, .h2 .italic-text, .bg-service-text span,
.ti-title-italic, .svc-close h2 em { font-size: inherit !important; }
.ti-back-inner { border-radius: var(--radius-card) !important; }
.file_img { border-radius: var(--radius-small); }
.mascot-bubble, #more-projects img { border-radius: var(--radius-window); }
.price-label, .svc-close__mono, .svc-close__mono a { text-transform: none; }
/* Keep the title in document flow, above the video instead of behind it. */
.section.video .h1_wrap {
  position: relative; top: auto; z-index: 1;
  margin: 48px 0; padding-inline: 24px;
  transform: none !important;
}
.section.video .flex-container { height: auto; }
.section.video .video_wrap { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
.section.video .flex { position: relative; top: auto; height: auto; }
/* Tall enough that the monitor finishes shrinking (scroll progress ~86%) while still pinned, so the 100vh clip box never slices it. */
#pricing .sticky_blur_wrapper { height: 800svh; }
@media (max-width: 767px) {
  :root {
    --type-heading: 32px;
    --type-display: 40px;
    --type-statement: 44px;
    --type-feature: 52px;
  }
  .h1, .h2, .partners-heading, .ti-testimonials-title,
  .bg-service-text { font-size: var(--type-heading) !important; }
  .partners-heading { font-size: var(--type-display) !important; }
  .bg-service-text { font-size: var(--type-statement) !important; }
  body .under_video_text, body #our_work .item-tags,
  body .timezone.white { font-size: var(--type-label) !important; }
  body .ab_text, body .about_text._03, body .button-text, body .footer_link,
  body .reserve_wrap .reserve_text, body .footer_link.mail { font-size: var(--type-body) !important; }
  body #our_work .h2.sticky { font-size: var(--type-feature) !important; }
  body .card_bottom._03 .barcode-wrap { border-radius: 8px !important; }
  #pricing .button-text._03 { font-size: var(--type-label) !important; border-radius: 8px !important; }
  #pricing .revenue_card, #pricing .message_text_wrap { border-radius: var(--radius-card) !important; }
  body .video_wrap { border-radius: var(--radius-card) !important; }
  .section.video .h1_wrap { margin: 24px 0 32px; padding-inline: 16px; }
  #pricing .sticky_blur_wrapper { height: 800svh; }
}

.section.video .h1 { width: 100%; max-width: 100%; margin: 0; }
/* Width/height attributes only reserve space (aspect ratio); CSS still sizes images. */
:where(img[width][height]) { width: auto; height: auto; }