/* Final cross-browser composition layer. This file intentionally loads last. */

/* Keep every word of the hero headline on one shared vertical rhythm. */
.hero-copy h1.hero-headline {
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  column-gap: .16em !important;
  row-gap: 0 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  font-synthesis: none !important;
  font-kerning: none !important;
  line-height: .76 !important;
  letter-spacing: 0 !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

.hero-copy h1.hero-headline .hero-line {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  line-height: .76 !important;
  vertical-align: top !important;
}

.hero-copy h1.hero-headline .hero-line-white {
  grid-column: 1 / -1 !important;
}

.hero-copy h1.hero-headline .hero-line-what {
  grid-column: 1 !important;
}

.hero-copy h1.hero-headline .hero-line-others {
  grid-column: 2 !important;
}

.hero-copy h1.hero-headline .hero-line-cant {
  margin-top: -.22em !important;
}

/* Compact windows use the same four-line composition in every browser. */
@media (max-width: 1040px) {
  .hero-copy h1.hero-headline {
    grid-template-columns: max-content !important;
    column-gap: 0 !important;
  }

  .hero-copy h1.hero-headline .hero-line {
    grid-column: 1 !important;
  }

  .hero-copy h1.hero-headline .hero-line-cant {
    margin-top: -.24em !important;
  }
}

/* Warm, portrait-led contact directory. */
.contact-body,
.contact-warm-page {
  background: hsl(220 10% 5%) !important;
}

.contact-warm-section {
  position: relative !important;
  isolation: isolate !important;
  min-height: auto !important;
  overflow: hidden !important;
  padding: 0 0 104px !important;
  background:
    radial-gradient(circle at 84% 20%, hsl(210 72% 57% / .08), transparent 28%),
    radial-gradient(circle at 12% 72%, hsl(210 72% 57% / .04), transparent 32%) !important;
}

.contact-dispatch-stage {
  display: flex !important;
  min-height: calc(100vh - 88px) !important;
  min-height: calc(100svh - 88px) !important;
  padding: 92px 0 72px !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.contact-warm-section::after {
  content: '' !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  height: auto !important;
  background: linear-gradient(180deg, hsl(220 10% 5%) 0%, transparent 13%, transparent 86%, hsl(220 10% 5%) 100%) !important;
  pointer-events: none !important;
}

.contact-warm-atmosphere {
  position: absolute !important;
  z-index: -2 !important;
  top: -70px !important;
  right: -8% !important;
  width: min(76vw, 1180px) !important;
  height: 670px !important;
  overflow: hidden !important;
  opacity: .13 !important;
  filter: saturate(.7) contrast(1.02) !important;
  -webkit-mask-image: radial-gradient(ellipse 72% 66% at 68% 42%, #000 0 42%, transparent 80%) !important;
  mask-image: radial-gradient(ellipse 72% 66% at 68% 42%, #000 0 42%, transparent 80%) !important;
  pointer-events: none !important;
}

.contact-warm-atmosphere img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: blur(3px) !important;
  transform: scale(1.05) !important;
}

.contact-warm-inner {
  position: relative !important;
  z-index: 1 !important;
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: none !important;
}

.contact-warm-heading {
  width: min(620px, 100%) !important;
  margin: 0 0 34px !important;
}

.contact-warm-heading h1 {
  margin: 0 !important;
  color: var(--foreground) !important;
  font-size: clamp(44px, 4.2vw, 56px) !important;
  line-height: .94 !important;
  letter-spacing: 0 !important;
}

.contact-warm-heading > p:last-child {
  max-width: 560px !important;
  margin: 13px 0 0 !important;
  color: hsl(220 10% 66%) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.dispatch-warm {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 36px !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 30px 0 34px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dispatch-warm::before {
  content: '' !important;
  position: absolute !important;
  inset: -34px -10vw -36px 34% !important;
  background:
    linear-gradient(90deg, hsl(220 10% 5%) 0%, transparent 44%, hsl(220 10% 5% / .18) 100%),
    url('assets/real-work/highway-tanker.jpg') center 46% / cover !important;
  opacity: .2 !important;
  filter: blur(1.5px) saturate(.8) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 74%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 74%, transparent 100%) !important;
  pointer-events: none !important;
}

.dispatch-warm-copy,
.dispatch-warm-call {
  position: relative !important;
  z-index: 1 !important;
}

.dispatch-warm h2 {
  color: var(--primary) !important;
  font-size: 46px !important;
  line-height: .92 !important;
  letter-spacing: 0 !important;
}

.dispatch-warm-call {
  min-width: 294px !important;
  min-height: 74px !important;
  padding: 0 26px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  font-size: 27px !important;
  box-shadow: 0 15px 34px hsl(210 72% 57% / .15) !important;
}

.contact-team-heading {
  margin: 0 0 38px !important;
  text-align: center !important;
}

.contact-team-heading h2 {
  margin: 0 !important;
  color: var(--foreground) !important;
  font-size: clamp(38px, 3.8vw, 52px) !important;
  line-height: .96 !important;
  letter-spacing: 0 !important;
}

.contact-warm-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: clamp(42px, 5vw, 68px) !important;
  max-width: none !important;
  margin: 0 !important;
}

.contact-warm-person {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.contact-warm-person::before {
  content: '' !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 36px 4% auto !important;
  height: 300px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, hsl(210 72% 57% / .09), transparent 70%) !important;
  opacity: .7 !important;
  pointer-events: none !important;
}

.contact-warm-portrait {
  position: relative !important;
  width: min(320px, 100%) !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  margin: 0 auto 8px !important;
  border: 0 !important;
  border-radius: 46% 46% 12px 12px / 30% 30% 12px 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%) !important;
  transition: transform .35s ease, box-shadow .35s ease !important;
}

.contact-warm-portrait::after {
  content: '' !important;
  position: absolute !important;
  inset: auto 0 0 !important;
  height: 34% !important;
  background: linear-gradient(0deg, hsl(220 10% 5% / .45), transparent) !important;
  pointer-events: none !important;
}

.contact-warm-portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  transform: scale(1.005) !important;
  transition: transform .5s ease, filter .35s ease !important;
}

.contact-warm-person:hover .contact-warm-portrait {
  transform: translateY(-5px) !important;
  box-shadow: none !important;
}

.contact-warm-person:hover .contact-warm-portrait img {
  transform: scale(1.035) !important;
  filter: brightness(1.035) !important;
}

.contact-warm-person-copy {
  display: grid !important;
  grid-template-rows: 24px 48px 42px 52px minmax(50px, auto) !important;
  align-items: start !important;
}

.contact-warm-person h2 {
  margin: 0 !important;
  color: var(--primary) !important;
  font-size: 40px !important;
  line-height: .94 !important;
  letter-spacing: 0 !important;
}

.contact-warm-person .contact-warm-title {
  max-width: 260px !important;
  margin: 2px auto 0 !important;
  color: hsl(220 10% 66%) !important;
  font-size: 15px !important;
}

.contact-warm-primary {
  align-self: start !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  font-size: 20px !important;
  white-space: nowrap !important;
  box-shadow: 0 12px 28px hsl(210 72% 57% / .12) !important;
}

.contact-warm-emails {
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  min-height: 50px !important;
  padding-top: 13px !important;
}

.contact-warm-emails a {
  color: hsl(210 72% 67%) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.contact-warm-emails a:hover {
  color: hsl(210 88% 77%) !important;
}

@media (max-width: 1040px) {
  .contact-warm-grid {
    grid-template-columns: 1fr !important;
    gap: 58px !important;
    width: min(760px, 100%) !important;
    margin: 0 auto !important;
  }

  .contact-warm-person {
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 38px !important;
    text-align: left !important;
  }

  .contact-warm-portrait {
    width: 270px !important;
    margin: 0 !important;
  }

  .contact-warm-person-copy {
    grid-template-rows: 24px 48px 42px 52px minmax(48px, auto) !important;
  }

  .contact-warm-person .contact-warm-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .contact-warm-primary {
    max-width: 330px !important;
  }
}

@media (max-width: 720px) {
  .contact-warm-section {
    padding: 0 0 78px !important;
  }

  .contact-dispatch-stage {
    min-height: calc(100vh - 76px) !important;
    min-height: calc(100svh - 76px) !important;
    padding: 84px 0 64px !important;
  }

  .contact-warm-atmosphere {
    top: 0 !important;
    right: -52% !important;
    width: 156vw !important;
    height: 560px !important;
    opacity: .1 !important;
  }

  .contact-warm-heading {
    margin-bottom: 34px !important;
  }

  .contact-warm-heading h1 {
    font-size: clamp(43px, 12vw, 54px) !important;
  }

  .contact-warm-heading > p:last-child {
    font-size: 16px !important;
  }

  .dispatch-warm {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 0 !important;
    padding: 24px 0 30px !important;
  }

  .dispatch-warm::before {
    inset: -20px -50vw -18px 12% !important;
    opacity: .14 !important;
  }

  .dispatch-warm-call {
    width: 100% !important;
    min-width: 0 !important;
  }

  .contact-team-heading {
    margin-bottom: 36px !important;
    text-align: left !important;
  }

  .contact-warm-grid {
    gap: 68px !important;
  }

  .contact-warm-person {
    display: block !important;
    text-align: center !important;
  }

  .contact-warm-portrait {
    width: min(318px, 86vw) !important;
    margin: 0 auto 8px !important;
  }

  .contact-warm-person-copy {
    grid-template-rows: 24px 48px 42px 52px auto !important;
  }

  .contact-warm-person .contact-warm-title {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .contact-warm-primary {
    max-width: 100% !important;
  }
}

@media (max-width: 430px) {
  .hero-copy h1.hero-headline,
  .hero-copy h1.hero-headline .hero-line {
    line-height: .74 !important;
  }

  .hero-copy h1.hero-headline .hero-line-cant {
    margin-top: -.25em !important;
  }

  .contact-warm-inner {
    width: min(100% - 30px, 1180px) !important;
  }

  .contact-warm-heading h1 {
    font-size: 44px !important;
  }

  .dispatch-warm {
    padding: 26px 0 !important;
  }

  .dispatch-warm h2 {
    font-size: 42px !important;
  }

  .dispatch-warm-call {
    min-height: 68px !important;
    padding: 0 14px !important;
    font-size: 24px !important;
  }

  .contact-warm-portrait {
    width: min(300px, 88vw) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-warm-portrait,
  .contact-warm-portrait img,
  .dispatch-warm-call,
  .contact-warm-primary {
    transition: none !important;
  }
}