/* Photography and typography each have their own space. */
.hero.hero-editorial {
  height: auto;
  min-height: 0;
  padding-top: 160px;
  background: #080a0b;
}
.hero-editorial .hero-content {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  align-items: end;
  gap: 56px;
  padding-top: 0;
  padding-bottom: 48px;
}
.hero-editorial h1 {
  font-size: clamp(68px, 7.3vw, 112px);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 430;
  margin: 0;
  max-width: none;
}
.hero-editorial h1 .hero-muted { color: #9ab4c5; }
.hero-introduction { max-width: 400px; padding-bottom: 4px; }
.hero-editorial .hero-description {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.4;
  letter-spacing: -.025em;
  color: #e7ebee;
}
.hero-services {
  max-width: 330px;
  margin-top: 17px;
  color: #959da3;
  font-size: 13px;
  line-height: 1.7;
}
.hero-editorial .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 26px;
}
.hero-editorial .hero-actions .button {
  padding: 16px 23px;
  min-height: 50px;
  font-size: 12px;
  letter-spacing: 0;
  border-radius: 2px;
  background: #dfe8ed;
  border-color: #dfe8ed;
  box-shadow: none;
}
.hero-editorial .hero-actions .button:hover { background: #fff; border-color: #fff; }
.hero-work-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 8px;
  font-size: 12px;
  color: #dce2e6;
  text-decoration: underline;
  text-decoration-color: #59646c;
  text-underline-offset: 7px;
  transition: color .25s, text-decoration-color .25s;
}
.hero-work-link:hover { color: #fff; text-decoration-color: #77b5db; }
.hero-editorial .hero-photo {
  position: relative;
  inset: auto;
  z-index: 0;
  height: auto;
  aspect-ratio: 2.15;
  overflow: hidden;
}
.hero-editorial .hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 57%;
  filter: none;
}
.hero-footnote {
  min-height: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: #919ca4;
  font-size: 11px;
}
.hero-review { display: flex; align-items: center; gap: 13px; min-height: 44px; }
.hero-review-score { font-size: 20px; color: #edf1f4; letter-spacing: -.04em; }
.hero-review-stars { color: #8eb5cd; font-size: 10px; letter-spacing: 2px; }
.hero-review-source { text-underline-offset: 4px; }
.hero-review:hover .hero-review-source { text-decoration: underline; color: #fff; }
/* The accent moves from silver into the blue in the Lynx identity. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-editorial h1 .hero-muted,
  .hero-editorial h1 .hero-muted .split-line,
  main h2 .muted,
  .reviews-intro h2 > span,
  .contact h2 > span {
    background-image: linear-gradient(105deg, #f3f5f6 0%, #aebfcb 35%, #218acb 82%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .hero-editorial h1 .hero-muted:has(.split-line) { background-image: none; }
  .section-light h2 .muted {
    background-image: linear-gradient(105deg, #606d77 0%, #386f91 38%, #0877b9 90%);
  }
}
@media (forced-colors: active) {
  .hero-editorial h1 .hero-muted,
  .hero-editorial h1 .hero-muted .split-line,
  main h2 .muted,
  .reviews-intro h2 > span,
  .contact h2 > span {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .hero-editorial .hero-content { gap: 30px; grid-template-columns: 1.25fr 1fr; }
  .hero-editorial h1 { font-size: 7.5vw; }
  .hero-editorial .hero-actions { gap: 7px 18px; }
}
@media (max-width: 700px) {
  .hero.hero-editorial { padding-top: 125px; }
  .hero-editorial .hero-content { display: block; padding-bottom: 29px; }
  .hero-editorial h1 { font-size: clamp(53px, 12.8vw, 86px); line-height: 1; }
  .hero-introduction { padding: 0; margin-top: 27px; max-width: 440px; }
  .hero-editorial .hero-description { font-size: 18px; }
  .hero-services { margin-top: 12px; font-size: 12px; max-width: 310px; }
  .hero-editorial .hero-actions { margin-top: 22px; gap: 9px 22px; }
  .hero-editorial .hero-actions .button { min-height: 46px; padding: 14px 18px; font-size: 11px; }
  .hero-work-link { font-size: 11px; }
  .hero-editorial .hero-photo { width: 100%; aspect-ratio: 1.25; }
  .hero-editorial .hero-photo img { object-position: 50% 58%; }
  .hero-footnote { min-height: 76px; justify-content: center; }
  .hero-footnote > p { display: none; }
}