/* ==========================================================================
   KOBIL — AI Trust — Section: Hero
   Figma: desktop 5882:5521 (1440x701, copy block 676 wide at x=80/y=200) ·
   mobile 6095:60816 (393x524, copy 244 wide at x=22/y=118).

   The photograph is the section background at both breakpoints; the copy sits
   on its light left half, so the type is navy rather than white.
   ========================================================================== */

.sec-ait-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  /* Pulled under the sticky header, exactly as the Figma frame sits under
     nav/desktop (y=30, h=80). */
  margin-top: calc(-1 * var(--w100));
  min-height: var(--w701);
  padding: var(--w200) var(--w80) 0;
}

.ait-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* ---- Copy ---- */

.ait-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--w24);
  width: var(--w676);
  max-width: 100%;
}

.ait-hero__crumb {
  display: flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 2.04px;
  text-transform: uppercase;
  color: var(--navy-80);
}

.ait-hero__crumb-dot {
  flex: none;
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: currentColor;
}

.ait-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--w40);
}

.ait-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
  width: var(--w570);
  max-width: 100%;
}

.ait-hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
  font-family: var(--font-serif);
  font-size: var(--w82);
  font-weight: 400;
  line-height: var(--w62);
  letter-spacing: -0.82px;
  color: var(--navy);
  white-space: nowrap;
}

.ait-hero__title-row { display: block; }

.ait-hero__lead {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy);
}

.ait-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w8);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  border-radius: var(--w32);
  background: var(--navy);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.ait-hero__cta:hover {
  background: #1a3164;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(17, 36, 74, 0.24);
}

.ait-hero__cta:hover .ait-hero__cta-icon { transform: translateX(3px); }

/* Figma's icon frame is 18x18 with the arrow inset 16.67%, i.e. a 12x12
   glyph — the 3px inset is padding, not part of the artwork. */
.ait-hero__cta-icon {
  flex: none;
  box-sizing: content-box;
  width: var(--w12);
  height: var(--w12);
  padding: var(--w3);
  transition: transform var(--dur) var(--ease);
}

/* ==========================================================================
   Phone (Figma 6095:60816)
   ========================================================================== */

@media (max-width: 768px) {
  .sec-ait-hero {
    margin-top: calc(-1 * var(--m68));
    min-height: var(--m524);
    padding: var(--m118) var(--m22) 0;
  }


  .ait-hero__inner { gap: var(--m24); width: var(--m244); }

  .ait-hero__crumb {
    gap: var(--m8);
    font-size: var(--m11);
    line-height: var(--m18);
    letter-spacing: 1.87px;
    color: var(--navy);
  }
  .ait-hero__crumb-dot { width: var(--m3); height: var(--m3); }

  .ait-hero__body { gap: var(--m32); }
  .ait-hero__text { gap: var(--m12); width: 100%; }

  .ait-hero__title {
    gap: var(--m4);
    font-size: var(--m36);
    line-height: 1;
    letter-spacing: -0.36px;
  }

  .ait-hero__lead { font-size: var(--m14); line-height: var(--m20); }

  .ait-hero__cta {
    gap: var(--m8);
    height: var(--m40);
    padding: var(--m4) var(--m12) var(--m4) var(--m16);
    border-radius: var(--m32);
    font-size: var(--m14);
    line-height: var(--m18);
  }
  .ait-hero__cta-icon { width: var(--m12); height: var(--m12); padding: var(--m3); }
}