/* Brand palette: deep navy and restrained burnt orange. */
:root {
  --green: #0b1f3a;
  --green-dark: #07162b;
  --brass: #c9652a;
  --line: #ddd7ce;
}

.brand-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
}

.promise .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.promise p {
  max-width: 860px;
}

.flow-subtitle {
  margin: 18px 0 0;
  color: var(--green);
  font: 500 18px/1.8 var(--serif);
  letter-spacing: .06em;
}

@media (max-width: 820px) {
  .brand-logo {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .promise .shell {
    gap: 10px;
  }

  .flow-subtitle {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.9;
  }
}

.hero .button-green,
dialog form .button-green {
  background: #c9652a;
}

.hero .button-green:hover,
dialog form .button-green:hover {
  background: #a94c18;
}

.contact-grid > div > p,
.contact-grid > a span {
  color: #efa36f;
}

.situation-rail strong,
.situation-rail small {
  display: block;
}

.situation-rail strong {
  color: var(--green);
  font: 500 17px/1.55 var(--serif);
}

.situation-rail small {
  margin-top: 10px;
  color: var(--muted);
  font: 400 11px/1.8 var(--sans);
  letter-spacing: 0;
}

.service-column {
  min-width: 0;
}

.service-audience {
  min-height: 145px;
  padding: 0 8px 28px;
  border-bottom: 1px solid var(--brass);
}

.service-audience span {
  color: var(--brass);
  font: 500 10px/1 var(--sans);
  letter-spacing: .2em;
}

.service-audience h3 {
  margin: 14px 0 8px;
  color: var(--green);
  font-size: 25px;
}

.service-audience p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.service-column ol {
  margin-top: 0;
}

.service-column li a {
  width: 100%;
  display: flex;
  align-items: baseline;
  transition: color .2s, transform .2s;
}

.service-column li a:hover,
.service-column li a:focus-visible {
  color: var(--brass);
  transform: translateX(4px);
}

@media (min-width: 821px) {
  .service-column-personal ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: 28px;
  }

  .service-column-personal li {
    min-width: 0;
    font-size: 17px;
  }

  .service-column-personal li span {
    width: 42px;
    flex: 0 0 42px;
  }
}

@media (min-width: 1081px) {
  .hero {
    grid-template-columns: 52% 48%;
  }

  .hero-copy {
    padding-inline: 3vw;
  }

  .hero h1 {
    font-size: clamp(48px, 3.4vw, 52px);
  }
}

@media (max-width: 520px) {
  .situation-rail strong {
    font-size: 16px;
  }

  .service-audience {
    min-height: 0;
    padding-top: 24px;
  }

  .service-column:first-child .service-audience {
    padding-top: 0;
  }
}

@media (min-width: 821px) and (max-width: 1080px) {
  .hero {
    grid-template-columns: 55% 45%;
  }

  .hero-copy {
    padding-inline: 32px;
  }

  .hero h1 {
    font-size: 36px;
  }
}