/* ==========================================================================
   KOBIL — Company — Section: Who We Are
   Figma D-Company 5882:51085 (1280x535 — tag at 40/54, 40-years badge 212x150
   at 104/182, copy column 686 wide at 432/182) ·
   M-Company 5882:51400 (345x486 — tag, badge 95x67, serif H1 34/1.2, body).
   First section inside the white card, so it owns the card's top inset.
   ========================================================================== */

/* First block inside the card, so it carries the card's rounded top itself —
   the surface can't clip it into shape (its white side rails have to escape
   sideways, see .page-surface--flush in base.css) and an unclipped square
   background here would cover the parent's corners. */
.sec-company-who-we-are {
  position: relative;
  background: var(--white);
  border-radius: var(--w12) var(--w12) 0 0;
}

.sec-company-who-we-are__inner {
  /* 77 in Figma, less the 4px the browser's line boxes add over Figma's
     cap-trimmed text frame, so the section still measures 535. */
  padding: var(--w54) var(--w40) var(--w73);
}

/* ---- Eyebrow (Figma tag: IBM Plex Mono 12/18, tracking 0.48) ---- */

.sec-company-who-we-are__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--navy-70);
  /* Figma's `tag` is a cap-trimmed 8px box, so its 12/18 line box is 5px
     taller on each side. Pulling those back in keeps every y below it on
     the frame's own numbers. */
  margin-block: calc(-1 * var(--w5));
}

/* ---- Badge column + copy column ---- */

.sec-company-who-we-are__columns {
  display: flex;
  align-items: flex-start;
  margin-top: var(--w120);
  padding-left: var(--w64);
}

.sec-company-who-we-are__badge-col {
  flex: 0 0 var(--w328);
}

.sec-company-who-we-are__badge {
  display: block;
  width: var(--w212);
  height: auto;
}

.sec-company-who-we-are__text {
  flex: 0 1 var(--w686);
  display: flex;
  flex-direction: column;
  gap: var(--w14);
}

.sec-company-who-we-are__title {
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.1;
  color: var(--navy);
}

/* Figma paints "Forty years" with a horizontal indigo → pink → peach ramp */
.sec-company-who-we-are__title-accent {
  background-image: linear-gradient(
    89.86deg,
    #696ef5 3.74%,
    #ca80f4 9.09%,
    #ffc4a0 30.47%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

/* The blank 14/26 line Figma sets between the two paragraphs */
.sec-company-who-we-are__body p + p {
  margin-top: var(--w26);
}

.sec-company-who-we-are__lead {
  font-size: var(--w18);
  font-weight: 600;
  line-height: var(--w24);
}

/* ---- Phone (Figma 5882:51400: 40/16/20 padding, 32 gap under the tag,
   badge 95x67, H1 34/1.2, lead 16/23, body 14/20) ---- */

@media (max-width: 768px) {
  .sec-company-who-we-are {
    border-radius: var(--m12) var(--m12) 0 0;
  }

  .sec-company-who-we-are__inner {
    padding: var(--m40) var(--m16) var(--m20);
  }

  .sec-company-who-we-are__eyebrow {
    font-size: var(--m12);
    line-height: var(--m18);
    margin-block: calc(-1 * var(--m5));
  }

  .sec-company-who-we-are__columns {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--m32);
    padding-left: 0;
    gap: var(--m32);
  }

  .sec-company-who-we-are__badge-col {
    flex: none;
  }

  .sec-company-who-we-are__badge {
    width: var(--m95);
  }

  .sec-company-who-we-are__text {
    flex: none;
    gap: var(--m16);
  }

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

  /* The phone frame re-draws the ramp with a Go-Blue stop in front */
  .sec-company-who-we-are__title-accent {
    background-image: linear-gradient(
      89.9deg,
      #1046cf 11.23%,
      #696ef5 16.04%,
      #ca80f4 41.7%,
      #ffc4a0 67.36%
    );
  }

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

  .sec-company-who-we-are__body p + p {
    margin-top: var(--m26);
  }

  .sec-company-who-we-are__lead {
    font-size: var(--m16);
    line-height: var(--m23);
  }
}