/* About Us page */
.hero .as-h2 { font-size: var(--h2); }
.about-video { padding: var(--sec-s) 0 0; }
.about-video .container { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.about-video .lightbox-ph { width: 100%; height: 704px; flex: none; border-radius: 0; }
.about-video .lightbox-ph img { opacity: 1; }
.about-video h2 { text-align: center; margin: 0; }
.origin { padding-top: 30px; }
.origin > .container { display: flex; gap: 30px; padding-top: 30px; padding-bottom: 40px; }
.origin .col { flex: 1 0 0; }
.origin .col h5 { font-size: 16px; margin: 0 0 4px; }
.origin .col p { margin-bottom: 20px; }
.jay-quote { background: var(--acqua-50) url(../img/bg-jay-about.webp) right top / cover no-repeat; min-height: 524px; display: flex; align-items: center; }
.jay-quote blockquote { width: 50%; min-width: 320px; margin: 0; padding: 40px 0; }
.jay-quote blockquote p { font-size: 32px; font-style: italic; color: var(--heading); line-height: 1.6; margin: 0 0 10px; padding: 10px; }
.jay-quote blockquote footer { border-top: 1px solid var(--acqua-600); padding: 20px 10px; font-size: 14px; font-weight: 500; color: var(--body); line-height: 1.5; }
.jay-quote blockquote footer strong { font-size: var(--t-lg); font-weight: 600; color: var(--body); }
.headline-lines { display: flex; align-items: center; gap: 10px; padding: var(--pad) 40px 10px; }
.headline-lines .line { flex: 1 0 0; height: 1px; background: var(--acqua-100); }
.headline-lines h2 { margin: 0; padding: 0 40px; text-align: center; }
.timeline { position: relative; padding: 60px 40px; max-width: 1366px; margin: 0 auto; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 60px; bottom: 60px; width: 2px; margin-left: -1px; background: var(--acqua-100); }
.tl-item { position: relative; display: flex; align-items: center; min-height: 236px; }
.tl-item .tl-year, .tl-item .tl-text { width: 50%; padding: 30px 40px; }
.tl-item .tl-year { display: flex; align-items: center; gap: 10px; }
.tl-item.left .tl-year { justify-content: flex-end; order: 1; }
.tl-item.left .tl-text { order: 3; }
.tl-item.right .tl-year { order: 3; }
.tl-item.right .tl-text { order: 1; text-align: left; }
.tl-item .tl-bullet { order: 2; position: absolute; left: 50%; top: 50%; width: 49px; height: 49px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--acqua-100); border: 12px solid var(--white); box-sizing: border-box; box-shadow: 0 0 0 1px var(--acqua-100); }
.tl-item .year { font-family: var(--font-head); font-weight: 700; font-size: var(--h1); line-height: 1.2; color: var(--heading); }
.tl-item .polaroid { display: block; padding: 10px 40px; }
.tl-item.right .polaroid { order: -1; }
.tl-item .polaroid img { width: 150px; height: 150px; object-fit: cover; border: 5px solid var(--white); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.tl-item .tl-text ul { margin: 0; padding-left: 20px; }
.tl-item .tl-text li { margin-bottom: 4px; }
.tl-item .tl-text p { margin: 0; }
.tl-expand { display: none; } /* the whole timeline is on show above phone width */
.cta-band.cta-two-col { padding: var(--sec-l) 0; box-shadow: inset 6px 12px 6px rgba(0,0,0,.5); }
.cta-band.cta-two-col .container { padding: 20px var(--pad); align-items: flex-start; }
.cta-band.cta-two-col .text.right p { font-size: var(--t-lg); margin: 0 0 10px; }
.cta-band.cta-two-col .text.right .actions { margin-top: 24px; }
@media (max-width: 1200px) {
    .jay-quote { background: none; min-height: 0; flex-direction: column; align-items: stretch; }
    .jay-quote blockquote { width: 100%; min-width: 0; padding: 0 0 12px; }
    .jay-quote::after { content: ""; display: block; width: 100%; max-width: 748px; aspect-ratio: 1 / 1; margin: 0 auto; background: url(../img/bg-jay-about-mobile.webp) center top / cover no-repeat; } /* the photo drops below the quote */
}
@media (max-width: 991px) {
    .about-video .lightbox-ph { height: auto; aspect-ratio: 16 / 9; }
    .origin > .container { flex-direction: column; gap: 0; }
    .cta-band.cta-two-col .container { flex-direction: column; gap: 24px; }
    .tl-item .tl-year, .tl-item .tl-text { padding: 20px; }
    .tl-item .polaroid { padding: 10px; }
}
@media (max-width: 768px) {
    .about-video { padding-top: 0; }
    .about-video .container { padding: 0; gap: 24px; }
    .about-video h2 { padding: 0 var(--pad); }
    .headline-lines { padding: var(--sec-s) var(--pad) 10px; }
    .headline-lines h2 { padding: 0 16px; }
    .timeline { padding: 32px var(--pad); }
    .timeline::before { left: 44px; top: 32px; bottom: 32px; } /* runs through the middle of the bullets */
    .tl-item { flex-direction: column; align-items: flex-start; min-height: 0; padding-left: 56px; margin-bottom: 32px; }
    .tl-item .tl-year, .tl-item .tl-text { width: 100%; padding: 0; }
    .tl-item.left .tl-year, .tl-item.right .tl-year, .tl-item.left .tl-text, .tl-item.right .tl-text { order: 0; }
    .tl-item.left .tl-year, .tl-item.right .tl-year { justify-content: flex-start; }
    .tl-item .tl-year { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
    .tl-item.right .polaroid { order: initial; }
    .tl-item .polaroid { width: 100%; padding: 0; }
    .tl-item .polaroid img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .tl-item .year { font-size: 48px; }
    .tl-item .tl-bullet { left: 0; top: 5px; width: 48px; height: 48px; margin: 0; border-width: 12px; }
    .timeline:not(.expanded) .tl-more { display: none; }
    .tl-expand { display: block; margin: 0; padding-left: 56px; }
    .tl-expand .btn { width: 100%; }
    .timeline.expanded .tl-expand { display: none; }
    .cta-band.cta-two-col { padding: 48px 0; }
    .cta-band.cta-two-col .text.right .actions .btn { width: 100%; }
}