/* The timeline opens into two contact routes. */
.home-contact {
  padding: clamp(6rem, 12vw, 10rem) 0 clamp(4.5rem, 9vw, 8rem);
  background: #03101b;
  border-top: 0;
  scroll-margin-top: 5rem;
}
.mockup-home .home-contact .shell { width: min(1200px, calc(100% - 96px)); }
.home-contact-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 38%)); gap: 12%; }
/* The biography axis is at 36% + 8% of the shared shell, plus half its 2px line. */
.home-contact-option { position: relative; left: 1px; min-width: 0; width: min(100%, 24rem); justify-self: center; }
.home-contact-content { margin-top: 2.5rem; }
.home-contact-button {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  width: 100%; min-height: 3.5rem; padding: .875rem 1.5rem;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--journey-accent); color: #021a20;
  font-size: 1rem; font-weight: 700; line-height: 1.4; text-align: center;
  text-decoration: none; transition: background .2s ease;
}
.home-contact-button:hover { background: #61ebdb; }
.home-contact-button::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 45%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(40,223,203,.28), rgba(247,251,255,.32), transparent);
  opacity: 0; transform: translateX(-160%) skewX(-18deg);
}
.home-contact-button-label { position: relative; z-index: 1; }
.home-contact-button.is-line-reached::before { animation: contact-arrival-shimmer 1.1s ease-in-out both; }
@keyframes contact-arrival-shimmer {
  0% { opacity: 0; transform: translateX(-160%) skewX(-18deg); }
  20%, 75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(350%) skewX(-18deg); }
}
.home-contact .home-contact-button {
  font-family: Urbanist, Inter, sans-serif; font-size: clamp(2rem, 4vw, 3.5rem);
  min-height: 9rem;
  font-weight: 700; line-height: 1.08; letter-spacing: -.035em; color: #f7fbff;
  background: #03101b; border-color: var(--journey-accent);
}
.home-contact .home-contact-button .home-contact-button-label > span { color: var(--journey-accent); }
.home-contact .home-contact-button:hover { background: var(--journey-accent); color: #f7fbff; }
.home-contact .home-contact-button:hover .home-contact-button-label > span { color: inherit; }
.home-contact-content > p { margin: 0 0 .5rem; color: #f7fbff; font-size: 1.125rem; font-weight: 700; }
.home-contact-content ul { margin: 0; padding: 0; list-style: none; }
.home-contact-content li { padding: .875rem 0; border-bottom: 1px solid rgba(255,255,255,.13); color: #f7fbff; font-size: clamp(1.25rem, 1.9vw, 1.375rem); line-height: 1.5; }
.home-contact-content li:last-child { border-bottom: 0; }
.home-contact-content strong { color: var(--journey-accent); font-weight: 700; }
.home-contact a:focus-visible { outline: 2px solid var(--journey-accent); outline-offset: 5px; }
.contact-journey-bridge {
  position: absolute; left: 0; width: 100%; z-index: 1;
  pointer-events: none; visibility: hidden;
}
.contact-journey-bridge.is-ready { visibility: visible; }
.contact-journey-bridge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.contact-journey-bridge path {
  fill: none; stroke: var(--journey-accent); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px #28dfcb44);
}
@media (max-width: 760px) {
  .mockup-home .home-contact .shell { width: calc(100% - 40px); }
  .home-contact-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .home-contact-option { left: 0; }
  .home-contact .home-contact-button { min-height: 6rem; font-size: clamp(1.25rem, 5.2vw, 2rem); letter-spacing: -.025em; }
  .home-contact-content { margin-top: 1.5rem; }
  .home-contact-content > p { font-size: 1.125rem; }
  .home-contact-content li { font-size: 1.125rem; line-height: 1.45; overflow-wrap: break-word; }
  .home-contact-button { padding: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-contact a { transition: none; }
  .home-contact-button.is-line-reached::before { animation: none; }
  .contact-journey-bridge path { stroke-dashoffset: 0 !important; }
}
@media print { .contact-journey-bridge { display: none; } }
