/* ==========================================================================
   KOBIL — Company — Section: Vision / CEO
   Figma D-Company 5882:51094 "v.2" (1280x685 — photo 556x446 at 40/115,
   copy column 570 wide at 670/143.5, two soft blue blooms behind) ·
   M-Company 6100:68065 (345x738 — photo 313x263 on top, copy below).
   ========================================================================== */

.sec-company-vision {
  position: relative;
  background: var(--white);
  overflow: clip;
}

.sec-company-vision__inner {
  position: relative;
  min-height: var(--w685);
  padding: var(--w115) var(--w40) var(--w124);
  display: flex;
  align-items: flex-start;
  gap: var(--w74);
}

/* ---- Decoration: the two blurred Figma vectors, baked in as radial washes ---- */

.sec-company-vision__inner::before,
.sec-company-vision__inner::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* upper bloom (Figma 5882:51096, 628x652 at 128/33) */
.sec-company-vision__inner::before {
  left: var(--w128);
  top: var(--w33);
  width: var(--w628);
  height: var(--w652);
  background: radial-gradient(
    closest-side,
    rgba(16, 70, 207, 0.11),
    rgba(16, 70, 207, 0.07) 45%,
    rgba(16, 70, 207, 0.02) 80%,
    rgba(16, 70, 207, 0) 100%
  );
}

/* lower bloom (Figma 5882:51095, 693x692 at 306/730 — runs off the bottom) */
.sec-company-vision__inner::after {
  left: var(--w306);
  top: var(--w430);
  width: var(--w693);
  height: var(--w692);
  background: radial-gradient(
    closest-side,
    rgba(16, 70, 207, 0.1),
    rgba(16, 70, 207, 0.06) 50%,
    rgba(16, 70, 207, 0) 100%
  );
}

/* ---- Photo (Figma: 556x446 box, 20px radius, image cropped to fill) ---- */

.sec-company-vision__media {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--w556);
  width: var(--w556);
  height: var(--w446);
  border-radius: var(--w20);
  overflow: clip;
}

.sec-company-vision__photo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ---- Text column (Figma 5882:51116: gap 24, inner gap 12) ---- */

.sec-company-vision__content {
  position: relative;
  z-index: 1;
  flex: 0 1 var(--w570);
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  margin-top: var(--w28);
}

.sec-company-vision__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w14);
  font-weight: 500;
  line-height: var(--w32);
  text-transform: uppercase;
  color: var(--navy-70);
}

.sec-company-vision__head {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
}

.sec-company-vision__title {
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

.sec-company-vision__text {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

/* Small 1 (Inter 14/16), name bold + role with 4px spacing */
.sec-company-vision__author {
  display: flex;
  flex-direction: column;
  gap: var(--w4);
  font-family: var(--font-ui);
  font-size: var(--w14);
  line-height: var(--w16);
}

.sec-company-vision__author-name {
  font-weight: 700;
  color: var(--navy);
}

.sec-company-vision__author-role {
  font-weight: 400;
  color: var(--navy-80);
}

/* ---- Phone (Figma 6100:68065: photo 313x263 at 16/20, copy from y=307) ---- */

@media (max-width: 768px) {
  .sec-company-vision__inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: var(--m24);
    padding: var(--m20) var(--m16) var(--m60);
  }

  /* The phone frame keeps only the single bloom behind the photo */
  .sec-company-vision__inner::before {
    display: none;
  }

  .sec-company-vision__inner::after {
    left: calc(-1 * var(--m174));
    top: var(--m416);
    width: var(--m693);
    height: var(--m692);
  }

  .sec-company-vision__media {
    flex: none;
    width: 100%;
    height: var(--m263);
    border-radius: var(--m12);
  }

  .sec-company-vision__content {
    flex: none;
    gap: var(--m16);
    margin-top: 0;
  }

  .sec-company-vision__eyebrow {
    font-size: var(--m12);
    line-height: var(--m32);
  }

  .sec-company-vision__head {
    gap: var(--m8);
  }

  .sec-company-vision__title {
    font-size: var(--m34);
    line-height: 1.2;
  }

  .sec-company-vision__text {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .sec-company-vision__author {
    gap: var(--m4);
    font-size: var(--m14);
    line-height: var(--m16);
  }
}