/* Quiet aviation cues: navigation grids, datum lines and precision markers. */
.aviation-field {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.aviation-field::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 19rem;
  height: 19rem;
  right: max(28px, calc((100vw - var(--max)) / 2));
  top: 2.5rem;
  border: 1px solid rgba(8, 23, 38, .07);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49.75%, rgba(8, 23, 38, .065) 50%, transparent 50.25%),
    linear-gradient(0deg, transparent 49.75%, rgba(8, 23, 38, .065) 50%, transparent 50.25%);
  pointer-events: none;
}

.aviation-field::after {
  content: attr(data-nav);
  position: absolute;
  right: max(28px, calc((100vw - var(--max)) / 2));
  top: 2.15rem;
  color: rgba(8, 23, 38, .42);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  pointer-events: none;
}

.aviation-dark::before {
  border-color: rgba(255, 255, 255, .09);
  background:
    linear-gradient(90deg, transparent 49.75%, rgba(255, 255, 255, .08) 50%, transparent 50.25%),
    linear-gradient(0deg, transparent 49.75%, rgba(255, 255, 255, .08) 50%, transparent 50.25%);
}

.aviation-dark::after { color: rgba(255, 255, 255, .42); }

.section-label {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: fit-content;
}

.section-label::after {
  content: "";
  width: 3rem;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: max(28px, calc((100vw - var(--max)) / 2));
  top: 9rem;
  width: 1px;
  height: 28%;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0 1px, transparent 1px 14px);
  opacity: .6;
}

.instrument-cluster {
  position: absolute;
  z-index: 3;
  top: 8.3rem;
  right: max(28px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: 72px auto;
  gap: .45rem .75rem;
  color: rgba(255,255,255,.72);
  font-family: "DM Sans", sans-serif;
}

.bearing-ring {
  grid-row: span 2;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.3) 49.5% 50.5%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(255,255,255,.3) 49.5% 50.5%, transparent 51%);
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.035);
  position: relative;
}

.bearing-ring::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -2deg, rgba(255,255,255,.55) 0 1deg, transparent 1deg 15deg);
  -webkit-mask: radial-gradient(transparent 66%, #000 68% 74%, transparent 76%);
  mask: radial-gradient(transparent 66%, #000 68% 74%, transparent 76%);
}

.bearing-ring span {
  color: #fff;
  background: rgba(8,23,38,.72);
  padding: .18rem .3rem;
  font-size: .6rem;
  letter-spacing: .12em;
}

.instrument-readout {
  min-width: 104px;
  border-left: 1px solid rgba(241,122,141,.65);
  padding-left: .65rem;
  line-height: 1.05;
}

.instrument-readout small,
.instrument-readout strong { display: block; }
.instrument-readout small { font-size: .52rem; letter-spacing: .16em; color: #f17a8d; }
.instrument-readout strong { margin-top: .28rem; font-size: .68rem; letter-spacing: .08em; font-weight: 500; }

.service-list article,
.work-card,
.principles article { position: relative; }

.service-list article::after,
.work-card::after,
.principles article::after {
  content: "";
  position: absolute;
  width: .42rem;
  height: .42rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .22;
}

.service-list article::after { right: 3.25rem; top: calc(50% - .25rem); }
.work-card::after { right: 1.8rem; top: 1.8rem; }
.principles article::after { right: 1.8rem; top: 2.15rem; }

.approach {
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 48px 48px;
}

.flight-band {
  height: clamp(290px, 42vw, 560px);
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--navy);
  border-top: 5px solid var(--red);
}

.flight-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flight-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,19,31,.7), transparent 46%);
  pointer-events: none;
}

.flight-band figcaption {
  position: absolute;
  z-index: 2;
  left: max(28px, calc((100vw - var(--max)) / 2));
  bottom: clamp(2rem, 5vw, 4.5rem);
  width: min(31rem, calc(100% - 56px));
  color: #fff;
  display: grid;
  gap: .75rem;
}

.flight-band figcaption span {
  color: #f17a8d;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.flight-band figcaption strong {
  font: 600 clamp(2rem, 4vw, 4rem)/1.08 "Manrope", sans-serif;
  letter-spacing: -.045em;
}

.horizon-instrument {
  position: absolute;
  z-index: 3;
  right: max(28px, calc((100vw - var(--max)) / 2));
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  color: rgba(255,255,255,.72);
  font-size: .62rem;
  letter-spacing: .16em;
}

.horizon-instrument i {
  width: 22px;
  height: 7px;
  border-top: 1px solid rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.work-card.featured {
  background-image: linear-gradient(135deg, transparent 0 71%, rgba(255,255,255,.065) 71% 71.25%, transparent 71.25%);
}

@media (max-width: 800px) {
  .aviation-field::before {
    width: 12rem;
    height: 12rem;
    right: -4rem;
    top: 1rem;
  }
  .aviation-field::after { top: 1.1rem; }
  .hero::after { display: none; }
  .instrument-cluster { display: none; }
  .service-list article::after { display: none; }
  .flight-band { height: 390px; }
  .flight-band img { object-position: 58% center; }
  .horizon-instrument { display: none; }
}