/* =========================================================
   ABOUT — storytelling composition
   (uses services.css for the shared why/booking sections)
   ========================================================= */

/* ---------- HERO ---------- */

.about_hero {
    position: relative;
    padding: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) 0 var(--section-sm);
    overflow: hidden;
}

.about_hero::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    z-index: -1;
    width: 55vw;
    height: 55vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(129, 145, 122, .2), transparent 62%);
    animation: drift 30s var(--ease-soft) infinite alternate;
}

.about_hero_grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

.about_hero h1 {
    margin: 1.6rem 0 1.75rem;
    font-size: var(--fs-display);
    font-weight: 300;
    line-height: .98;
    letter-spacing: -.02em;
}

.about_hero .lead {
    max-width: 44ch;
    margin-bottom: 2.5rem;
}

.about_hero_media {
    position: relative;
}

.crossfade {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-arch);
    background: var(--sand-soft);
}

.crossfade img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: crossfade 24s linear infinite, slowZoom 24s linear infinite;
}

.crossfade img:nth-child(1) { animation-delay: -0.96s, -0.96s; }
.crossfade img:nth-child(2) { animation-delay: 5.04s, 5.04s; }
.crossfade img:nth-child(3) { animation-delay: 11.04s, 11.04s; }
.crossfade img:nth-child(4) { animation-delay: 17.04s, 17.04s; }

@keyframes crossfade {
    0% { opacity: 0; }
    4% { opacity: 1; }
    25% { opacity: 1; }
    29% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes slowZoom {
    0% { transform: scale(1.02); }
    29% { transform: scale(1.12); }
    100% { transform: scale(1.12); }
}

.about_hero_caption {
    position: absolute;
    left: -2rem;
    bottom: 2.5rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.4rem;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--forest);
    background: var(--ivory-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-card);
}

.about_hero_caption svg {
    width: 2rem;
    color: var(--champagne);
    animation: breathe 6s var(--ease-soft) infinite;
}

/* ---------- STORY ---------- */

.about_story {
    padding-block: var(--section);
}

.about_story_grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
    gap: clamp(2.5rem, 7vw, 7rem);
    padding-top: clamp(2.5rem, 4vw, 3.5rem);
    border-top: 1px solid var(--line);
}

.about_statement {
    margin-top: 1.75rem;
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3.4rem);
    font-weight: 300;
    line-height: 1.18;
    color: var(--forest);
}

.about_statement b {
    font-weight: 500;
    font-style: italic;
}

.about_story_body {
    display: grid;
    gap: 1.25rem;
    padding-top: .5rem;
}

.about_story_body p {
    color: var(--text-muted);
}

.about_story_body p:first-child::first-letter {
    float: left;
    margin: .35rem .6rem 0 0;
    font-family: var(--font-serif);
    font-size: 4.2rem;
    line-height: .8;
    color: var(--champagne);
}

/* ---------- PHILOSOPHY BAND ---------- */

.about_band {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: clamp(560px, 90vh, 860px);
    margin-inline: clamp(.5rem, 1.5vw, 1.5rem);
    padding: var(--section-sm) var(--gutter);
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.about_band_media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.about_band_media img {
    inset: -12% 0;
    height: 124%;
}

.about_band_media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28, 46, 37, 0) 30%, rgba(28, 46, 37, .45));
}

.about_band_card {
    display: grid;
    gap: 1.25rem;
    width: min(100%, 560px);
    padding: clamp(2rem, 4vw, 3.5rem);
    background: rgba(245, 241, 232, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: var(--radius-lg);
}

.about_band_card h2 {
    font-size: clamp(2rem, 1.5rem + 1.8vw, 3.2rem);
}

.about_band_card p {
    font-size: .98rem;
    color: var(--text-muted);
}

/* ---------- PILLARS ---------- */

.about_pillars {
    padding-block: var(--section);
}

.about_pillars_grid {
    display: grid;
    grid-template-columns: 1fr .8fr 1fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 4.5rem);
}

.about_pillar {
    display: grid;
    gap: 1.1rem;
}

.about_pillar:last-child {
    margin-top: clamp(0rem, 10vw, 9rem);
}

.about_pillar_no {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1;
    color: var(--champagne);
}

.about_pillar h2 {
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem);
}

.about_pillar p {
    font-size: .96rem;
    color: var(--text-muted);
}

.about_pillar .link_arrow {
    margin-top: .5rem;
}

.about_pillars_media {
    position: relative;
    align-self: stretch;
    min-height: 520px;
    overflow: hidden;
    border-radius: var(--radius-arch);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1024px) {
    .about_pillars_grid {
        grid-template-columns: 1fr 1fr;
    }

    .about_pillars_media {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 0;
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-lg);
    }

    .about_pillar:last-child {
        margin-top: 0;
    }
}

@media (max-width: 900px) {
    .about_hero_grid,
    .about_story_grid {
        grid-template-columns: 1fr;
    }

    .about_hero_media {
        max-width: 520px;
    }

    .about_hero_caption {
        left: 1rem;
    }

    .about_band {
        justify-content: center;
        align-items: flex-end;
    }
}

@media (max-width: 640px) {
    .about_pillars_grid {
        grid-template-columns: 1fr;
    }

    .about_pillars_media {
        aspect-ratio: 4 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crossfade img {
        animation: none !important;
    }

    .crossfade img:first-child {
        opacity: 1;
    }
}