/**
 * Brand typography + token overrides.
 * Loaded after Webflow main.css so these rules take effect.
 *
 * Type scale (design spec pt → px for web):
 * H1 55 | H2 42 | H3 36 | H4 28 | H5 24 | H6 20 | Body 16 | Caption 14
 */

:root {
  --font-family--body: "Fustat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font: var(--font-family--body);
  --font-alt: "Baskervville", Georgia, serif;

  --font-size-h1: 55px;
  --font-size-h2: 42px;
  --font-size-h3: 36px;
  --font-size-h4: 28px;
  --font-size-h5: 24px;
  --font-size-h6: 20px;
  --font-size-body: 16px;
  --font-size-caption: 14px;

  --brand-bright: #007bf5;
  --brand-royal: #183eeb;
  --brand-navy: #00024f;
  --brand-deep: #010028;
  --brand-light: #f3f3f3;
  --brand-slate: #17254a;
  --white: #ffffff;
  --gray-01: #8fa3c9;
  --gray-02: #c5d0ea;
  --ink-3: #3a4d72;
  --ink-muted: #5c6f94;

  --color-style--background: var(--brand-deep);
  --color-style--primary: var(--brand-royal);
  --color-style--secondary: var(--brand-bright);
  --gray--01: var(--gray-01);
  --gray--02: var(--gray-02);
}

/* Temporarily hide homepage image conveyor belt (section-marquee). */
.section-marquee {
  display: none !important;
}

html,
body {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-body) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.09px !important;
  color: var(--gray-02) !important;
  background-color: var(--brand-deep) !important;
}

/* Hero + CTA — brand blue backgrounds */
.section-global.home {
  background-image: none !important;
  background-color: var(--brand-deep) !important;
  background:
    linear-gradient(180deg, transparent 0%, transparent 48%, var(--brand-deep) 100%),
    radial-gradient(900px 500px at 15% 10%, rgba(0, 123, 245, 0.22), transparent 70%),
    radial-gradient(700px 400px at 85% 20%, rgba(24, 62, 235, 0.18), transparent 65%),
    linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-slate) 45%, var(--brand-royal) 88%, var(--brand-deep) 100%) !important;
  overflow: visible !important;
}

.page-wrapper.home-one .section-about {
  margin-top: -52px;
  background-color: var(--brand-deep) !important;
}

.page-wrapper.home-one .home-hero-image-wrapper {
  position: relative;
  z-index: 1;
}

.page-wrapper.home-one img.home-hero-image {
  margin-top: -20px;
  transform: none !important;
}

.page-wrapper.home-one .home-hero-text-wrapper {
  position: relative;
  z-index: 3;
}

.home-hero-over {
  display: block !important;
  z-index: 2;
  pointer-events: none;
  position: absolute;
  bottom: -2px;
  left: -10vw;
  right: 0;
  width: 120vw;
  height: clamp(280px, 20vw, 400px);
  background: linear-gradient(
    180deg,
    rgba(1, 0, 40, 0) 0%,
    rgba(1, 0, 40, 0.45) 30%,
    rgba(1, 0, 40, 0.82) 50%,
    var(--brand-deep) 65%,
    var(--brand-deep) 100%
  );
  filter: none;
}

@media screen and (max-width: 991px) {
  .home-hero-over {
    height: clamp(300px, 24vw, 440px);
  }
}

@media screen and (max-width: 767px) {
  .home-hero-over {
    height: clamp(240px, 34vw, 360px);
  }
}

.section-cta .cta-block,
.cta-block {
  background-image: none !important;
  background:
    radial-gradient(500px 260px at 50% 0%, rgba(0, 123, 245, 0.28), transparent 70%),
    linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-slate) 55%, var(--brand-royal) 130%) !important;
  box-shadow: 0 20px 50px rgba(24, 62, 235, 0.18);
}

/* Body — 16pt Regular */
p,
li,
.about-text,
.about-text-01,
.about-text-02,
.about-text-03,
.about-text-04,
.about-text-05,
.about-text-06,
.about-text-07,
.about-text-08,
.about-text-09,
.about-text-10,
.faq-answer-text,
.services-text-wrap,
.works-text-wrap,
.testslider-text-wrap,
.home-hero-text-wrapper p,
.home-hero-wrapper p,
.navbar-nav-link,
.navbar-nav-text {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-body) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.09px !important;
}

/* Caption — 14pt Regular */
.caption,
.typography-tag-text,
.footer-text,
.footer-nav-link,
.home-hero-rating-text,
.home-hero-rating-type,
.home-hero-author {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* H1 — Page titles (hero) — 55pt Bold */
h1,
.home-hero-heading,
.home-hero-heading h1,
.home-hero-heading h2,
.home-hero-wrapper h1,
.inner-page-hero-wrapper .inner-page-heading,
.inner-page-hero-wrapper .inner-page-heading h1,
.inner-page-hero-wrapper h1,
.typography-tag-name.h1 {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-h1) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
  color: var(--white) !important;
}

/* H2 — Section titles — 42pt Bold */
h2,
.services-heading,
.services-heading h2,
.services-title,
.services-title h2,
.works-heading,
.works-heading h2,
.cta-heading,
.cta-heading h2,
.faq-heading,
.faq-heading h2,
.brands-heading,
.brands-heading h2,
.testslider-heading,
.testslider-heading h2,
.about-title,
.about-title h2,
.heading,
.typography-tag-name.h2 {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-h2) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
  color: var(--white) !important;
}

/* H3 — 36pt Bold */
h3,
.typography-tag-name.h3 {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-h3) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
  color: var(--white) !important;
}

/* H4 — 28pt Bold */
h4,
.typography-tag-name.h4 {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-h4) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  color: var(--white) !important;
}

/* H5 — 24pt Bold */
h5,
.typography-tag-name.h5 {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-h5) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  color: var(--white) !important;
}

/* H6 — 20pt Bold */
h6,
.typography-tag-name.h6 {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-h6) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  color: var(--white) !important;
}

.heading-alt {
  font-family: var(--font-alt) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.home-hero-subheading,
.section-badge-text,
.sub {
  color: var(--brand-bright) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.navbar-nav-link:hover,
.navbar-nav-text:hover {
  color: var(--brand-bright) !important;
}

.primary-button,
.primary-button-text,
.cta-button,
.services-button,
.works-button {
  font-size: var(--font-size-body) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.secondary-button,
.secondary-button-text {
  font-size: var(--font-size-body) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.section-navbar .navbar-nav-link,
.section-navbar .navbar-nav-text {
  font-size: 21px !important;
}

.section-navbar .secondary-button,
.section-navbar .secondary-button-text {
  font-size: 21px !important;
}

.navbar-logo-text {
  font-family: var(--font-family--body) !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--white) !important;
  white-space: nowrap;
}

.navbar-logo-svg {
  display: none !important;
}

.navbar-container {
  max-width: 1180px !important;
}

.section-navbar {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media screen and (max-width: 991px) {
  .section-navbar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media screen and (max-width: 767px) {
  .section-navbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.navbar-wrapper {
  height: 108px !important;
}

/* Header: logo | centered nav links | Contact us CTA (desktop only) */
@media screen and (min-width: 992px) {
  .navbar-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 28px;
    padding-right: 28px;
  }

  .navbar-logo-wrapper {
    position: relative;
    z-index: 2;
    flex: none;
    width: auto !important;
    max-width: none !important;
  }

  .navbar-logo {
    width: auto !important;
    max-width: none !important;
  }

  .navbar-nav-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    justify-content: center;
    width: max-content;
    pointer-events: none;
  }

  .navbar-nav-menu {
    display: flex !important;
    justify-content: center;
    width: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
    pointer-events: auto;
  }

  .navbar-nav-wrap {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0;
  }

  .navbar-nav-link {
    white-space: nowrap;
  }

  .navbar-button-wrapper {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex: none;
    width: auto !important;
    max-width: none !important;
  }

  .navbar-menu-wrapper {
    display: none !important;
  }
}

.home-hero-intro {
  max-width: 500px;
  margin: 0 0 32px !important;
  color: var(--gray-02) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.home-hero-button {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
}

.home-hero-review {
  margin-top: 0 !important;
}

.home-hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.home-hero-highlight-value {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-h4) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--white) !important;
}

.home-hero-highlight-label {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--gray-01) !important;
  margin-top: 4px;
}

.brands-tag-text {
  font-family: var(--font-family--body) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--white) !important;
  text-align: center;
  padding: 0 20px;
  z-index: 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.section-brands .brands-logo-block {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.brands-logo-block .brands-logo {
  display: none !important;
}

@media screen and (min-width: 992px) {
  .about-wrapper.home-about {
    grid-template-columns: calc(35% + 50px) minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .about-wrapper.home-about .about-image-wrap.home-about {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    align-self: stretch !important;
    height: 100% !important;
    position: relative !important;
    padding-top: 56px !important;
  }

  .about-wrapper.home-about .about-title {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
  }

  .about-wrapper.home-about .about-image {
    width: 100%;
  }

  .about-wrapper.home-about .about-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 0 !important;
    height: 100% !important;
  }
}

.about-wrapper.home-about .about-text-wrap {
  padding-top: 48px;
}

.about-wrapper.home-about .about-text-wrap h4.about-text,
.about-wrapper.home-about .about-text-wrap .about-text,
.about-wrapper.home-about .about-text-wrap [class^="about-text-"] {
  font-size: 25px !important;
  line-height: 1.5 !important;
}

.about-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(143, 163, 201, 0.2);
}

.about-metric-value {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-h4) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--white) !important;
}

.about-metric-label {
  font-family: var(--font-family--body) !important;
  font-size: var(--font-size-caption) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--gray-01) !important;
  margin-top: 4px;
}

@media screen and (max-width: 767px) {
  .about-metrics {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 0;
    padding-top: 20px;
  }
}

/* FAQ accordion — Webflow dropdown init is unreliable in Next.js */
.section-faq .faq-answer-block.w-dropdown-list {
  display: block !important;
  position: static !important;
  background: transparent;
  min-width: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

.section-faq .faq-question-wrapper.w-dropdown:not(.w--open) .faq-answer-block {
  height: 0 !important;
  overflow: hidden;
}

/* Plus = vertical + horizontal SVGs; open state shows minus (horizontal only) */
.section-faq .faq-question-wrapper.w-dropdown.w--open .faq-plus-icon {
  display: none;
}

/* Footer — base variant (Webflow w-variant class not applied in Next.js) */
.section-footer {
  background-color: var(--color-style--background);
  padding-top: 40px;
}

.page-wrapper.insight-detail-page {
  background-color: var(--color-style--background);
}

/* Footer — 3-column layout */
.section-footer .footer-navigation-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 32px 48px !important;
  width: 100%;
  grid-template-columns: unset !important;
}

.section-footer .footer-navigation-wrap {
  flex: 0 1 auto;
  min-width: 0;
}

.section-footer .footer-nav-link,
.section-footer .footer-text,
.section-footer .footer-nav-static {
  font-size: 20px !important;
  line-height: 1.5 !important;
}

.section-footer .footer-nav-title {
  text-transform: uppercase;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  position: relative;
  padding-bottom: 0;
  border-bottom: none;
}

.section-footer .footer-nav-title::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  margin-top: 8px;
  background-color: var(--brand-bright);
}

.section-footer .footer-nav-static {
  cursor: default;
  pointer-events: none;
}

.section-footer .footer-nav-static:hover {
  color: var(--gray--02) !important;
  text-decoration-color: var(--color-style--transparent) !important;
}

@media screen and (max-width: 767px) {
  .section-footer .footer-navigation-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
  }
}

.section-footer .footer-watemark {
  display: block;
  width: 100%;
  white-space: nowrap;
  font-family: var(--font-family--body) !important;
  font-size: clamp(34px, 10vw, 160px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  text-align: center;
  user-select: none;
}

.section-footer .footer-watemark-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.2em);
}

.section-footer .footer-watemark-char--light {
  background-image: linear-gradient(180deg, #ffffff 0%, #d1d5db 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-footer .footer-watemark-char--blue {
  background-image: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-footer .footer-watemark.is-animated .footer-watemark-char {
  animation: footerWatermarkLetterIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes footerWatermarkLetterIn {
  from {
    opacity: 0;
    transform: translateY(0.2em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-footer .footer-watemark-char {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Full insight blog page — white body text on dark background */
.insight-blog-content {
  color: #ffffff !important;
}

.insight-blog-content :is(p, div, li, span, font, em, strong, b, i, u, blockquote) {
  color: #ffffff !important;
}

.insight-blog-content [style*="color"] {
  color: #ffffff !important;
}

.insight-blog-content a {
  color: #7eb8ff !important;
}

/* Career timeline — active nav text on dark background */
#experience .career-nav-item.active {
  color: #ffffff !important;
}

#experience .career-nav-item.active .nav-period,
#experience .career-nav-item.active .nav-org,
#experience .career-nav-item.active .nav-role {
  color: #ffffff !important;
}

#experience .career-nav-item.active .nav-role {
  color: #c5d0ea !important;
}

/* Insight blog cards — image height (loads after Webflow main.css) */
.insight-blog-image-wrap {
  min-height: 330px !important;
}

.insight-blog-image {
  height: 330px !important;
  min-height: 330px !important;
  object-fit: cover !important;
}

.insight-blog-read-more {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: auto !important;
  min-height: 32px !important;
  padding: 6px 14px 6px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(90deg, #1f5fe9 0%, #2d74ff 100%) !important;
  box-shadow: 0 3px 12px rgba(31, 95, 233, 0.22) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

.insight-blog-read-more-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
}

.insight-blog-read-more-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.18px !important;
}

.insight-blog-read-more-icon {
  width: 14px !important;
  height: 14px !important;
}

.insight-blog-read-more-icon-svg {
  width: 14px !important;
  height: 14px !important;
}

@media (max-width: 767px) {
  .insight-blog-image-wrap {
    min-height: 410px !important;
  }

  .insight-blog-image {
    height: 410px !important;
    min-height: 410px !important;
  }
}

/* FAQ section — restore top spacing (.space.down removes default padding) */
.section-faq .space.down {
  padding-top: var(--space-l, 100px) !important;
  padding-bottom: var(--space-l, 100px) !important;
}