@import url("header.css?v=7");

/* Shared primary action styling. Loaded after the main stylesheet. */
.hero-intro a,
.contact-button,
.detail-hero-copy > a,
.detail-end a,
.header-cta,
.home-page .header-cta,
.detail-page .header-cta {
  color: #fff;
  background: #24312c;
  border-color: #24312c;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.hero-intro a:hover,
.contact-button:hover:not(:disabled),
.detail-hero-copy > a:hover,
.detail-end a:hover,
.header-cta:hover,
.home-page .header-cta:hover,
.detail-page .header-cta:hover {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.hero-intro a:focus-visible,
.contact-button:focus-visible,
.detail-hero-copy > a:focus-visible,
.detail-end a:focus-visible,
.header-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Gold brand lockup on the dark footer. */
.footer-mark {
  content: url("assets/catius-ars-color.svg");
  filter: brightness(1.3) saturate(.9);
}

/* Stable related-services navigation. Hover never changes geometry. */
.service-v3 .service-switcher {
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(160px, max-content));
  column-gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}

.service-v3 .service-switcher a {
  position: relative;
  display: inline-block;
  width: max-content;
  padding: .55rem 0;
  color: var(--ink);
  white-space: nowrap;
  transform: none;
  transition: color .22s var(--ease);
}

.service-v3 .service-switcher a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .25rem;
  left: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .22s var(--ease);
}

.service-v3 .service-switcher a:hover,
.service-v3 .service-switcher a:focus-visible,
.service-v3 .service-switcher a:active {
  color: var(--accent);
  transform: none;
}

.service-v3 .service-switcher a:hover::after,
.service-v3 .service-switcher a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (max-width: 980px) {
  .service-v3 .service-switcher {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }

  .service-v3 .service-switcher > span {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .service-v3 .service-switcher {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .service-v3 .service-switcher > span {
    grid-column: auto;
  }

  .service-v3 .service-switcher a {
    width: 100%;
    padding: 1rem 0;
  }
}