/* One quiet entrance sequence; controls remain immediately usable. */
.hero picture { display: block; overflow: hidden; }
.hero .caption-line { display: block; }
.hero-visual { position: relative; display: grid; align-self: center; min-width: 0; }
.hero-visual picture { width: 100%; height: auto; }
.hero-visual .hero-image { height: auto; aspect-ratio: 3/4; }
@media (min-width:700px) { .hero-visual .hero-image { aspect-ratio: 8/5; } }

@media (prefers-reduced-motion: no-preference) {
  .hero h1 > span {
    animation: hero-copy-enter 850ms cubic-bezier(.22,1,.36,1) both;
  }
  .hero h1 > span:nth-child(2) { animation-delay: 140ms; }
  .hero .caption-line {
    animation: hero-copy-enter 800ms cubic-bezier(.22,1,.36,1) 300ms both;
  }
  .hero .caption-line + .caption-line { animation-delay: 480ms; }
  .photo-ready .hero-image {
    animation: hero-photo-slide 800ms cubic-bezier(.22,1,.36,1) both;
  }
  .photo-offscreen .hero-image { animation-play-state: paused; }
}

@keyframes hero-copy-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-photo-slide {
  from { transform: translateX(35%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.brand .guide-name { font-size: 14px; font-weight: 500; letter-spacing: .025em; color: var(--navy); white-space: nowrap; }
.consult { margin-top: 24px; border: 1px solid var(--line); border-radius: 9px; padding: 17px; background: #fff; }
.consult h2 { font-size: 16px; font-weight: 500; margin: 0 0 7px; color: var(--navy); }
.consult p { font-size: 11px; color: var(--muted); line-height: 1.8; margin: 0 0 13px; }
.consult-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.consult-actions a { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #a9b7be; border-radius: 5px; font-size: 12px; color: var(--navy); }
.consult small { display: block; margin-top: 8px; font-size: 10px; color: var(--muted); text-align: right; }
@media (min-width:700px) { .brand .guide-name { font-size: 18px; } .consult { padding: 20px 24px; } .consult-actions { max-width: 430px; } .consult small { text-align: left; } }
@media (max-width:350px) { .header { gap: 8px; } .brand .guide-name { font-size: 12px; letter-spacing: 0; } }

/* Explicit static state for motion-sensitive viewers. */
@media (prefers-reduced-motion: reduce) {
  .hero h1 > span, .hero .caption-line, .hero-image {
    animation: none;
    opacity: 1;
    transform: none;
  }
}