/* Home hero: the name, tagline and employers, set as text over the layout of the
   images they replace (img/title3B.png, 5403 x 1002, and img/title-3C.png, 3616 x 448).
   Each box keeps its image's proportions and places everything in cqw, so it scales
   with the column exactly as the images did. */

.hero-name,
.hero-now {
  position: relative;
  container-type: inline-size;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  font-size: 0;
  line-height: 1;
  text-shadow: none;
}
.hero-name { width: 100%; aspect-ratio: 5403 / 1002; }
.hero-now { width: 60%; aspect-ratio: 3616 / 448; }

.hero-name > span,
.hero-now > p,
.hero-now > img,
.hero-now > span {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  line-height: 1;
}

/* SWAR | GUJRANIA */
.hero-name .hn-first,
.hero-name .hn-last {
  font-family: "EB Garamond", Garamond, serif;
  font-weight: 400;
  font-size: 7.08cqw;
}
/* Letters sit one by one where the image had them (its spacing varies letter to letter) */
.hero-name .hn-first { left: 0; top: 3.220cqw; color: #fff; }
.hero-name .hn-last { left: 0; top: 3.332cqw; color: #7b7b7b; }
.hero-name .hn-first > span,
.hero-name .hn-last > span { position: absolute; top: 0; }
.hero-name .hn-rule { left: 34.703cqw; top: 0.037cqw; width: 0.111cqw; height: 14.955cqw; background: #9b9b9b; }
.hero-name .hn-dot { left: 88.691cqw; top: 0; width: 2.499cqw; height: 2.499cqw; border-radius: 50%; background: #d03a46; }
.hero-name .hn-tag {
  left: 59.208cqw;
  top: 15.565cqw;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 2.776cqw;
  letter-spacing: 0.224em;
  color: #ff4150;
}

/* Currently ... Microsoft / Past experiences: logos */
.hero-now .hw-now,
.hero-now .hw-past {
  font-family: "Open Sans", "Segoe UI", sans-serif;
  font-weight: 300;
}
.hero-now .hw-now { left: 6.933cqw; top: 1.272cqw; font-size: 3.372cqw; letter-spacing: 0.007em; color: #fff; }
.hero-now .hw-past { left: -0.265cqw; top: 8.711cqw; font-size: 2.650cqw; letter-spacing: 0.004em; color: #8f8f8f; }
.hero-now .hw-logo { height: auto; max-width: none; }
.hero-now .hw-microsoft { left: 77.434cqw; top: 0; width: 16.261cqw; }
.hero-now .hw-anrok { left: 22.428cqw; top: 7.301cqw; width: 12.555cqw; }
.hero-now .hw-mastercard { left: 39.353cqw; top: 8.324cqw; width: 21.156cqw; }
.hero-now .hw-honeywell { left: 64.878cqw; top: 8.545cqw; width: 17.506cqw; }
.hero-now .hw-gatech { left: 86.836cqw; top: 8.518cqw; width: 12.528cqw; }
.hero-now .hw-sep { top: 8.545cqw; width: 0.249cqw; height: 2.765cqw; background: #9e9e9e; }
.hero-now .hw-sep1 { left: 36.947cqw; top: 8.656cqw; }
.hero-now .hw-sep2 { left: 62.389cqw; }
.hero-now .hw-sep3 { left: 84.403cqw; }