/* Reversible visual layer: remove this stylesheet link to restore the previous look. */

:root {
  --visual-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}

.site-header {
  box-shadow: 0 8px 24px rgba(4, 22, 50, 0.05);
}

.nav-links a,
.nav-cta,
.lang-switch {
  transition-timing-function: var(--visual-ease);
}

.nav-links a::after {
  height: 2px;
  transform-origin: center;
}

.nav-cta {
  box-shadow: inset 0 0 0 0 var(--navy);
}

.nav-cta:hover {
  box-shadow: inset 0 -3px 0 var(--gold-light);
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  transition: background 0.2s ease, transform 0.3s var(--visual-ease), top 0.3s var(--visual-ease);
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  top: 0;
  transform: rotate(-45deg);
}

.hero,
.page-hero {
  isolation: isolate;
}

.hero::after,
.page-hero::after {
  position: absolute;
  right: max(32px, calc((100vw - var(--container)) / 2 + 32px));
  bottom: 0;
  left: max(32px, calc((100vw - var(--container)) / 2 + 32px));
  height: 2px;
  content: "";
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  animation: visualRuleIn 0.9s 0.15s var(--visual-ease) forwards;
}

.hero .eyebrow,
.page-hero .eyebrow {
  animation: visualFadeUp 0.65s 0.05s var(--visual-ease) both;
}

.hero h1,
.page-hero h1 {
  animation: visualFadeUp 0.8s 0.12s var(--visual-ease) both;
}

.hero-lead,
.page-hero-lead {
  animation: visualFadeUp 0.7s 0.22s var(--visual-ease) both;
}

.hero-ctas {
  animation: visualFadeUp 0.7s 0.3s var(--visual-ease) both;
}

.hero-meta {
  animation: visualFadeUp 0.8s 0.24s var(--visual-ease) both;
}

.hero-meta-row {
  position: relative;
  transition: background 0.3s ease, padding-left 0.35s var(--visual-ease), border-color 0.3s ease;
}

.hero-meta-row::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  content: "";
  background: var(--gold-light);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s var(--visual-ease);
}

.hero-meta-row:hover {
  padding-left: 10px;
  background: rgba(243, 240, 232, 0.58);
}

.hero-meta-row:hover::before {
  transform: scaleY(1);
}

.section-alt {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(201, 194, 178, 0.32);
}

.section-navy {
  box-shadow: inset 0 1px 0 rgba(248, 246, 241, 0.15), inset 0 -1px 0 rgba(2, 16, 31, 0.35);
}

.service-list-index li,
.service-block,
.timeline-step,
.phase-timeline li,
.compare-col,
.contact-card {
  transition-timing-function: var(--visual-ease);
}

.service-list-index li:hover .num,
.service-block:hover > .num {
  color: var(--gold);
  transform: translateY(-3px);
}

.service-list-index .num,
.service-block > .num {
  transition: color 0.3s ease, transform 0.35s var(--visual-ease);
}

.service-block:hover .service-includes {
  border-top-color: var(--gold);
}

.service-includes {
  transition: border-color 0.3s ease;
}

.phase-timeline li:hover .phase-num,
.timeline-step:hover .num {
  color: var(--on-navy);
}

.phase-num,
.timeline-step .num {
  transition: color 0.3s ease;
}

.compare-col,
.contact-card {
  transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s var(--visual-ease);
}

.compare-col:hover,
.contact-card:not(.primary-contact-card):hover {
  border-color: var(--border-strong);
  box-shadow: 0 12px 28px rgba(4, 22, 50, 0.07);
  transform: translateY(-4px);
}

.org-list span {
  position: relative;
}

.org-list span::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--visual-ease);
}

.org-list span:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.footer-brand-full {
  transition: opacity 0.3s ease, transform 0.35s var(--visual-ease);
}

.footer-brand:hover .footer-brand-full {
  opacity: 0.88;
  transform: translateY(-3px);
}

[data-reveal] {
  transform: translateY(30px);
  transition-duration: 0.85s;
  transition-timing-function: var(--visual-ease);
}

[data-reveal="delay"] {
  transition-delay: 0.09s;
}

[data-reveal].is-visible {
  transform: translateY(0);
}

@keyframes visualFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes visualRuleIn {
  to {
    transform: scaleX(1);
  }
}

@media screen and (max-width: 960px) {
  .hero::after,
  .page-hero::after {
    right: var(--space-4);
    left: var(--space-4);
  }
}

@media screen and (max-width: 640px) {
  .split-sticky {
    position: static !important;
    top: auto !important;
  }

  .hero::after,
  .page-hero::after {
    right: var(--space-3);
    left: var(--space-3);
  }

  .compare-col:hover,
  .contact-card:not(.primary-contact-card):hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after,
  .page-hero::after,
  .hero .eyebrow,
  .hero h1,
  .hero-lead,
  .hero-ctas,
  .hero-meta,
  .page-hero .eyebrow,
  .page-hero h1,
  .page-hero-lead {
    animation: none;
  }

  .hero::after,
  .page-hero::after {
    transform: scaleX(1);
  }
}