/* ==========================================================================
   Hero Section
   Measurements from DOM map: .framer-1lbs32n
   1425px x 900px, flex column, space-between, padding: 24px
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--page-padding);                   /* 24px */
  overflow: hidden;
  background: transparent;
}

/* ---------- Background layer ---------- */
/* .framer-6010js: absolute, 1425x900, bg #e7e7e7 */

.hero__bg {
  position: absolute;
  inset: 0;
  background: #faf8f5;                            /* warm white/cream */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 0;
}

/* Fine translucent grid pattern — covers entire hero */
.hero__grid {
  position: absolute;
  inset: 0;
  /* Fine 1px lines, ~48px cells, subtle dark lines on warm cream */
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 48px);
}

/* ---------- Number marquee ---------- */
/* .framer-b4ngm8: absolute, top: 241px, 1425x400, gap: 240px */

.hero__numbers {
  position: absolute;
  top: 241px;
  left: 0;
  width: 100%;
  height: 400px;
  overflow: hidden;
  pointer-events: none;
}

.hero__numbers-track {
  display: flex;
  flex-direction: row;
  gap: 120px;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: hero-numbers-scroll 60s linear infinite;
  will-change: transform;
  width: max-content;
}

.hero__numbers-track li {
  font-size: 160px;
  font-weight: var(--font-weight-light);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text-primary);
  opacity: 0.03;
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes hero-numbers-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ---------- Hero headline ---------- */

.hero__headline-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  text-align: center;
}

.hero__headline {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  margin: 0;
}

.hero__headline-line {
  display: block;
}

/* ---------- Metrics strip ---------- */
/* .framer-1oatnxe: flex row, space-between, 1377x55, at bottom of hero */

.hero__metrics {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1377px;
  min-height: 55px;
}

/* Left: arrow + description (877x55) */
.hero__metrics-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex: 0 1 877px;
}

.hero__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--color-text-primary);
  text-decoration: none;
}

.hero__intro {

  font-size: var(--body-font-size);               /* 14px */
  font-weight: var(--body-font-weight);            /* 400 */
  line-height: var(--body-line-height);            /* 18.2px */
  color: var(--body-color);
  max-width: 460px;
}

/* Right: 3 metric columns (500x40) */
.hero__metrics-right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex: 0 1 500px;
  min-height: 48px;
}

/* Individual metric — each 167x40 */
.hero__metric {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 167px;
  min-height: 48px;
}

.hero__metric--badge {
  justify-content: center;
  gap: 10px;
}

/* "10+" number */
.hero__metric-number {

  font-size: var(--metric-value-font-size);        /* 40px */
  font-weight: var(--metric-value-font-weight);    /* 300 */
  line-height: var(--metric-value-line-height);    /* 40px */
  color: var(--color-text-primary);
}

/* "Years of / Experience" stacked label */
.hero__metric-label {
  display: flex;
  flex-direction: column;
}

.hero__metric-label span {

  font-size: var(--metric-label-font-size);        /* 12px */
  font-weight: var(--metric-label-font-weight);    /* 400 */
  line-height: var(--metric-label-line-height);    /* 15.6px */
  color: var(--color-text-primary);
}

/* Badge text (AI & Operations, LEAN & Process Design) */
.hero__badge-text {

  font-size: var(--metric-label-font-size);        /* 12px */
  font-weight: var(--font-weight-medium);          /* 500 */
  line-height: var(--metric-label-line-height);    /* 15.6px */
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1099.98px) {
  .hero {
    min-height: auto;
    padding: 24px;
    padding-bottom: 40px;
  }

  .hero__numbers {
    display: none;
  }

  .hero__metrics {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }

  .hero__metrics-left {
    flex: none;
    width: 100%;
  }

  .hero__metrics-right {
    flex: none;
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }

  .hero__metric {
    width: auto;
    flex: 0 0 auto;
  }
}

@media (max-width: 519.98px) {
  .hero {
    padding: 16px;
    padding-bottom: 32px;
  }

  .hero__intro {
    font-size: 13px;
  }

  .hero__metric-number {
    font-size: 32px;
    line-height: 32px;
  }

  .hero__metrics-right {
    flex-direction: column;
    gap: 12px;
  }

  /* Ensure arrow touch target meets 44px minimum */
  .hero__arrow {
    width: 44px;
    height: 44px;
  }
}