.about-hero { display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; min-height: 28rem; }
.about-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 5rem); color: var(--white); background: var(--navy); }
.about-hero-copy .eyebrow { color: var(--yellow); }
.about-hero-copy h1 { margin-bottom: 1rem; color: var(--white); font-family: var(--sans); font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 850; letter-spacing: -.05em; text-transform: uppercase; }
.about-hero-copy p { color: #d1dfe5; }
.about-hero-copy .text-link { width: fit-content; color: var(--yellow); }
.about-hero-image { min-height: 28rem; }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.timeline-item { padding: 1.2rem; border-top: 3px solid var(--yellow); background: var(--white); }
.timeline-item strong { display: block; margin-bottom: .4rem; color: var(--green-dark); font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.values-grid { grid-template-columns: repeat(3, 1fr); }
.values-grid .card { border-top: 3px solid var(--yellow); }
@media (max-width: 780px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero-image { min-height: 20rem; }
  .timeline, .values-grid { grid-template-columns: 1fr; }
}
body[data-page="about"] .about-hero-copy h1 { animation: about-title-in .5s ease-out both; }
body[data-page="about"] .about-hero-image::before { transition: transform .8s cubic-bezier(.2,.7,.2,1), background-position .8s ease; }
body[data-page="about"] .about-hero-image:hover::before { background-position: 55% center; }
body[data-page="about"] .timeline-item { animation: timeline-card-in .4s ease-out both; transition: transform .2s ease, border-color .2s ease; }
body[data-page="about"] .timeline-item:nth-child(2) { animation-delay: .1s; }
body[data-page="about"] .timeline-item:nth-child(3) { animation-delay: .2s; }
body[data-page="about"] .timeline-item:hover { transform: translateY(-4px); border-color: var(--teal); }
body[data-page="about"] .timeline-item strong { transition: color .2s ease, letter-spacing .2s ease; }
body[data-page="about"] .timeline-item:hover strong { color: #aa7c00; letter-spacing: .03em; }
body[data-page="about"] .values-grid .card { position: relative; transition: transform .2s ease, border-color .2s ease; }
body[data-page="about"] .values-grid .card:hover { transform: translateY(-4px); border-color: var(--teal); }
body[data-page="about"] .values-grid .card h3 { transition: letter-spacing .2s ease; }
body[data-page="about"] .values-grid .card:hover h3 { letter-spacing: .01em; }
body[data-page="about"] .about-hero-copy .text-link { transition: gap .2s ease, letter-spacing .2s ease; }
body[data-page="about"] .about-hero-copy .text-link:hover { letter-spacing: .025em; }
@keyframes about-title-in { from { opacity: 0; transform: translateY(10px); letter-spacing: -.025em; } to { opacity: 1; transform: translateY(0); } }
@keyframes timeline-card-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body[data-page="about"] .about-hero-copy h1, body[data-page="about"] .timeline-item { animation: none; } }

/* Preserve the bright travel images at their native landscape ratio. */
.about-hero-image { min-width: 0; width: 100%; min-height: 0; aspect-ratio: 4 / 3; }
.about-story-image { min-height: 0; aspect-ratio: 4 / 3; }