.rk {
  --sheet: url("../images/blueprints.png");
}

.rk {
  container-type: inline-size;
  background: #faf8ef;
  color: #0c1621;
  font-family: Arial, Helvetica, sans-serif;
  max-width: 1920px;
  margin: auto;
}
.rk * {
  box-sizing: border-box;
}
.rk a {
  color: inherit;
  text-decoration: none;
}
.rk a:hover {
  text-decoration: underline;
}
.rk h1,
.rk h2,
.rk h3,
.rk p {
  margin: 0;
}
.rk small,
.sign {
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-weight: 600;
}
.rk small {
  font-size: 1.05cqw;
}
.rk-nav {
  height: 5.6cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.5cqw 0 4.5cqw;
}
.brand {
  font-weight: 700;
  font-size: 2.2cqw;
  letter-spacing: -0.06em;
}
.links,
.footnav {
  display: flex;
  gap: 3.6cqw;
}
.links a,
.footnav a,
.rk .blue,
.rk .outline,
.case-copy a {
  font-size: 1.34cqw;
  font-weight: 600;
}
.links a:first-child {
  border-bottom: 2px solid #104ea0;
}
.rk .blue,
.rk .outline {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #084ca7;
  color: white;
  border-radius: 0.6cqw;
  padding: 1.5cqw 3.4cqw;
}
.rk .navchat {
  padding: 0.95cqw 2.2cqw;
}
.rk .outline {
  background: transparent;
  color: #0a4ca7;
  border: 1px solid;
}
.lead {
  position: relative;
  height: 61.6cqw;
}
.lead-copy {
  position: relative;
  width: 50%;
  padding: 7.2cqw 0 0 4.5cqw;
}
.rk h1 {
  font-size: 10.8cqw;
  line-height: 1.06;
  letter-spacing: -0.075em;
  font-weight: 800;
  white-space: nowrap;
}
.rk h1 em {
  color: #0752ab;
  font-style: normal;
}
.lead-copy > p {
  font-size: 2.65cqw;
  line-height: 1.22;
  letter-spacing: -0.035em;
  width: 39.2cqw;
  margin: 1.7cqw 0 2.6cqw;
}
.buttons {
  display: flex;
  gap: 1.6cqw;
}
.sign {
  margin-top: 4.2cqw;
  font-size: 1.04cqw;
  line-height: 2;
}
.sign:before {
  content: "";
  display: block;
  width: 4.8cqw;
  height: 2px;
  background: #1957a4;
  margin-bottom: 1.2cqw;
}
.ink,
.lead-art {
  background-image: var(--sheet);
  background-repeat: no-repeat;
}
.lead-art {
  position: absolute;
  right: 1.1%;
  top: 1.4cqw;
  width: 60.5%;
  clip-path: polygon(
    22% 0,
    100% 0,
    100% 100%,
    0 100%,
    0 72%,
    10% 65%,
    10% 33%,
    22% 29%
  );
}
.band {
  padding: 1.1cqw 4.5cqw 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  height: 9.6cqw;
}
.band p {
  width: 44.5cqw;
  font-size: 1.36cqw;
  line-height: 1.55;
}
.rk h2 {
  font-size: 5.3cqw;
  line-height: 1.1;
  letter-spacing: -0.065em;
  margin: 0.45cqw 0 0;
}
.six {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4.2cqw 2.6cqw 0;
  gap: 4.8cqw 2cqw;
}
.svc {
  position: relative;
  height: 37.7cqw;
  border-right: 1px solid #e8e4d9;
  padding: 1.2cqw 1.5cqw 0 7.5cqw;
}
.svc:nth-child(3n) {
  border: 0;
}
.num {
  position: absolute;
  left: 1.4cqw;
  top: 0;
  color: #0d50a2;
  font-size: 3.5cqw;
  font-weight: 300;
  letter-spacing: -0.07em;
  transform: scaleX(0.75);
  transform-origin: left;
}
.rk h3 {
  font-size: 1.85cqw;
  line-height: 1.28;
  letter-spacing: -0.045em;
}
.svc p,
.case-copy p {
  font-size: 1.32cqw;
  line-height: 1.47;
  margin: 0.7cqw 0;
}
.svc .ink {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.work {
  height: 16.3cqw;
  padding-bottom: 3.9cqw;
}
.work p {
  width: 39cqw;
}
.portfolio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 2.5cqw 2.6cqw;
  gap: 1.5cqw;
}
.portfolio article {
  min-height: 29.2cqw;
  display: flex;
  align-items: center;
  gap: 1.3cqw;
  border: 1px solid #e6e4dc;
  border-radius: 0.75cqw;
  padding: 1cqw;
}
.case-img {
  width: 51%;
  object-fit: contain;
  flex: none;
}
.case-copy a {
  display: inline-block;
  color: #064a9f;
  margin-top: 1.8cqw;
}
.base {
  background: #17202a;
  color: #fff;
  display: grid;
  grid-template-columns: 35% 27% 32%;
  justify-content: space-between;
  padding: 3.1cqw 3.8cqw 4cqw 4.5cqw;
  min-height: 30cqw;
}
.base strong {
  font-size: 3.1cqw;
}
.base h3 {
  margin-top: 1.2cqw;
}
.base p {
  font-size: 1.45cqw;
  line-height: 1.5;
  margin: 1.2cqw 0 2.2cqw;
}
.footnav {
  gap: 1.45cqw;
  flex-wrap: wrap;
  margin-top: 3cqw;
}
.footnav a {
  color: #b8dafa;
}
.chat {
  background: #faf8f0;
  color: #152335;
  border-radius: 1cqw;
  padding: 1.8cqw;
  font-size: 1.45cqw;
}
.chat span {
  display: block;
  font-size: 1.04cqw;
  padding-left: 3cqw;
}
.chat p {
  background: #e6edf5;
  padding: 1.2cqw;
  border-radius: 1cqw;
  color: #214677;
}
.offline {
  border: 1px solid #cbd2d8;
  border-radius: 1cqw;
  padding: 1.15cqw;
  color: #5c6874;
  margin-top: 3cqw;
}
.mobmenu {
  display: none;
}
.lead-art {
  background-size: 165.4267% auto;
  background-position: 97.3244% 3.2396%;
  aspect-ratio: 457/443;
}
.s0 {
  background-size: 328.6957% auto;
  background-position: 3.2319% 37.6501%;
  aspect-ratio: 230/164;
}
.s1 {
  background-size: 328.6957% auto;
  background-position: 52.4715% 37.6501%;
  aspect-ratio: 230/164;
}
.s2 {
  background-size: 328.6957% auto;
  background-position: 97.1483% 37.6501%;
  aspect-ratio: 230/164;
}
.s3 {
  background-size: 328.6957% auto;
  background-position: 3.2319% 55.2122%;
  aspect-ratio: 230/170;
}
.s4 {
  background-size: 328.6957% auto;
  background-position: 52.4715% 55.2122%;
  aspect-ratio: 230/170;
}
.s5 {
  background-size: 328.6957% auto;
  background-position: 97.1483% 55.2122%;
  aspect-ratio: 230/170;
}
.p1 {
  background-size: 424.7191% auto;
  background-position: 4.1522% 74.6015%;
  aspect-ratio: 178/197;
}
.p2 {
  background-size: 466.6667% auto;
  background-position: 65.8249% 74.6015%;
  aspect-ratio: 162/197;
}
.p3 {
  background-size: 424.7191% auto;
  background-position: 4.1522% 86.0906%;
  aspect-ratio: 178/181;
}
.p4 {
  background-size: 466.6667% auto;
  background-position: 65.8249% 86.0906%;
  aspect-ratio: 162/181;
}

@media (max-width: 760px) {
  .rk-nav {
    height: 60px;
    padding: 0 20px;
  }
  .brand {
    font-size: 22px;
  }
  .links,
  .navchat.blue {
    display: none;
  }
  .mobmenu {
    display: block;
    position: relative;
    z-index: 5;
  }
  .mobmenu summary {
    padding: 10px;
  }
  .mobmenu[open] {
    align-self: flex-start;
    background: #faf8ef;
  }
  .mobmenu a {
    display: block;
    padding: 8px 16px;
  }
  .lead {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .lead-copy {
    width: 100%;
    padding: 32px 22px 0;
  }
  .rk small,
  .sign {
    font-size: 11px;
  }
  .rk h1 {
    font-size: clamp(55px, 13vw, 88px);
  }
  .lead-copy > p {
    font-size: 21px;
    width: auto;
    margin: 14px 0 20px;
  }
  .rk .blue,
  .rk .outline,
  .case-copy a,
  .footnav a {
    font-size: 15px;
    padding: 11px 14px;
  }
  .sign {
    display: none;
  }
  .lead-art {
    position: static;
    order: 2;
    width: 76%;
    align-self: center;
    max-height: 300px;
    background-size: 165.43% auto;
  }
  .band,
  .work {
    display: block;
    height: auto;
    padding: 26px 22px 12px;
  }
  .rk h2 {
    font-size: 35px;
  }
  .band p,
  .work p {
    width: auto;
    font-size: 16px;
    margin-top: 10px;
  }
  .six,
  .portfolio {
    grid-template-columns: 1fr;
    padding: 8px 20px;
    gap: 12px;
  }
  .svc {
    height: auto;
    min-height: 108px;
    padding: 10px 4px 10px 38px;
    border: 0;
    border-bottom: 1px solid #ddd;
  }
  .num {
    font-size: 24px;
    top: 7px;
    left: 0;
  }
  .svc .ink {
    display: none;
  }
  .rk h3 {
    font-size: 20px;
  }
  .svc p,
  .case-copy p,
  .base p {
    font-size: 16px;
  }
  .portfolio article {
    display: block;
    padding: 16px;
  }
  .case-img {
    width: min(100%, 220px);
    margin: auto;
  }
  .case-copy a {
    padding-left: 0;
  }
  .base {
    display: block;
    margin-top: 24px;
    padding: 24px;
  }
  .base strong {
    font-size: 25px;
  }
  .base > div {
    margin: 0 0 24px;
  }
  .base .chat {
    padding: 15px;
    font-size: 17px;
  }
  .chat span {
    font-size: 12px;
  }
  .footnav {
    gap: 8px;
  }
  .footnav a {
    padding: 4px;
  }
  .offline {
    padding: 12px;
  }
  .base h3 {
    margin: 16px 0;
  }
}

/* Motion registered to the 457 x 443 hero artwork */
@media (max-width: 760px) {
  .rk .lead-art {
    width: min(76%, 309px);
    max-height: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .rk .lead-art::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: center/100% 100% no-repeat url("../images/hero-motion.svg");
  }
  @media (max-width: 760px) {
    .rk .lead-art {
      position: relative;
      right: auto;
      top: auto;
    }
  }
}

/* Equipment status lights */
.rk .lead-art::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: center/100% 100% no-repeat url("../images/device-lights.svg");
}
@media (max-width: 760px) {
  .rk .lead-art {
    position: relative;
    right: auto;
    top: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rk .lead-art::before {
    background-image: url("../images/device-lights-static.svg");
  }
}

/* Homepage footer: brand, contact and friends */
body.home #contact.base.footer-a {
  display: block;
  background: #172331;
  color: #fbfaf5;
  min-height: 0;
  padding: clamp(36px, 4.35cqw, 56px) 4.5% 20px;
  box-shadow: 0 0 0 100vmax #172331;
  clip-path: inset(0 -100vmax);
}
#contact.footer-a .fa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.14fr) minmax(0, 0.82fr);
  column-gap: 7%;
  align-items: start;
}
#contact.footer-a .footer-wordmark {
  display: block;
  width: fit-content;
  background: transparent;
  padding: 0;
  mix-blend-mode: screen;
}
#contact.footer-a .footer-wordmark img {
  display: block;
  width: 158px;
  height: auto;
  filter: grayscale(1) invert(1) contrast(1.35);
}
#contact.footer-a .fa-grid p {
  font-size: 16px;
  line-height: 1.46;
  color: #c0cbd4;
  margin: 13px 0;
}
#contact.footer-a .fa-label,
.fa-domain {
  font:
    600 11px/1.3 ui-monospace,
    Menlo,
    monospace;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #a5c3e0;
}
#contact.footer-a .fa-label {
  margin: 0 0 16px;
}
#contact.footer-a h2,
#contact.footer-a h3 {
  margin: 0;
  color: #fbfaf5;
  line-height: 1.1;
  letter-spacing: -0.045em;
}
#contact.footer-a h2 {
  font-size: clamp(25px, 2.65cqw, 34px);
}
#contact.footer-a h3 {
  font-size: 23px;
}
#contact.footer-a .footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  color: #b9cfe2;
}
#contact.footer-a .footer-social svg {
  display: block;
  width: 22px;
  height: 22px;
}
#contact.footer-a .blue {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 11px 18px;
  border-radius: 7px;
  background: #2263b8;
  color: white;
  font-size: 15px;
}
#contact.footer-a .blue span {
  font-size: 18px;
  line-height: 1;
}
#contact.footer-a ul {
  list-style: none;
  padding: 0;
  margin: 13px 0 0;
}
#contact.footer-a li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  color: #dfebf5;
  font-size: 15px;
}
#contact.footer-a li + li {
  border-top: 1px solid #2d3c4b;
}
#contact.footer-a li span {
  color: #9eafbd;
}
#contact.footer-a .fa-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  border-top: 1px solid #364452;
  margin-top: 36px;
  padding-top: 16px;
}
#contact.footer-a .footnav {
  margin: 0;
  display: flex;
  gap: 8px 19px;
  flex-wrap: wrap;
}
#contact.footer-a .footnav a {
  color: #c0cbd4;
  font-size: 13px;
  padding: 3px 0;
}
#contact.footer-a .fa-domain {
  color: #c0cbd4;
}
@media (max-width: 760px) {
  body.home #contact.base.footer-a {
    padding: 32px 22px 20px;
  }
  #contact.footer-a .fa-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  #contact.footer-a .fa-bottom {
    margin-top: 26px;
  }
  #contact.footer-a .fa-friends {
    width: 100%;
  }
  #contact.footer-a .fa-grid,
  #contact.footer-a .fa-bottom {
    margin-bottom: 0;
  }
}