/* Small orange and teal text needs darker values on pale surfaces. */
.variant-03 .text-\[\#C8420C\] {
  color: #AD350A !important;
}

.variant-03 .text-\[\#0C7C85\] {
  color: #075F66 !important;
}

.variant-03 .text-link,
.variant-03 .eyebrow {
  color: #AD350A;
}

.variant-03 .btn-secondary {
  border-color: #AD350A;
  color: #AD350A;
}

/* Restore every text level in the intentionally dark homepage hero. */
.variant-03 .home-main > section:first-child dt {
  color: rgba(255, 255, 255, .76) !important;
}

.variant-03 .home-main > section:first-child dd {
  color: #FFFFFF !important;
}

.variant-03 .home-main > section:first-child .text-link {
  color: #FF9A72 !important;
  text-decoration-color: rgba(255, 154, 114, .72);
}

.variant-03 .home-main > section:first-child .text-link:hover {
  color: #FFFFFF !important;
}

/* Lighten accent text and borders whenever their surface is navy or dark gradient. */
.variant-03 :is(
  .bg-\[\#132238\],
  .from-\[\#132238\]
) .text-\[\#C8420C\] {
  color: #F06A32 !important;
}

.variant-03 :is(
  .bg-\[\#132238\],
  .from-\[\#132238\]
) :is(.text-\[\#0C7C85\], .\!text-\[\#0C7C85\]) {
  color: #41C1C7 !important;
}

.variant-03 :is(
  .bg-\[\#132238\],
  .from-\[\#132238\]
) .border-\[\#0C7C85\] {
  border-color: #41C1C7 !important;
}

.variant-03 :is(
  .bg-\[\#132238\],
  .from-\[\#132238\]
) .border-\[\#C8420C\] {
  border-color: #F06A32 !important;
}

/* Gradients that reach orange need fully light copy at their warm edge. */
.variant-03 :is(
  .bg-\[\#C8420C\],
  .from-\[\#C8420C\],
  .to-\[\#C8420C\]
) :is(
  .text-white\/80,
  .text-white\/75,
  .text-white\/70,
  .text-white\/60
) {
  color: #FFFFFF !important;
}

.variant-03 :is(
  .from-\[\#C8420C\],
  .to-\[\#C8420C\]
) :is(
  .text-\[\#0C7C85\],
  .text-\[\#C8420C\],
  .\!text-\[\#0C7C85\]
) {
  color: #FFFFFF !important;
}

.variant-03 :is(
  .from-\[\#C8420C\],
  .to-\[\#C8420C\]
) :is(
  .border-\[\#0C7C85\],
  .border-\[\#C8420C\]
) {
  border-color: #FFFFFF !important;
}

/* Interactive states remain visible against the dark header and footer. */
.variant-03 .mobile-nav:hover {
  background: #24364E;
  color: #FFFFFF;
}

.variant-03 .footer-link:hover {
  color: #41C1C7;
}

.variant-03 :is(a, button, input, textarea, select):focus-visible {
  outline-color: #075F66;
}

.variant-03 :is(
  .bg-\[\#132238\],
  .from-\[\#132238\]
) :is(a, button, input, textarea, select):focus-visible {
  outline-color: #41C1C7;
}

.variant-03 :is(
  .bg-\[\#C8420C\],
  .from-\[\#C8420C\],
  .to-\[\#C8420C\]
) :is(a, button, input, textarea, select):focus-visible {
  outline-color: #132238;
}
