/* about.php — Extracted 2026-05-20. */

/* About page — scoped overrides */

/* Hide site-wide nav-gutter mask on about — hero image extends to top under nav (homepage pattern). */
body > div[aria-hidden="true"][style*="height: 145px"] { display: none !important; }
/* Hide global ambient-light glows — about hero owns its own backdrop. See feedback_ambient_glow_bleed. */
.ambient-light { display: none !important; }

/* Active nav state for "About" link (header.php has no built-in active state) */
header nav a[href$="/about<?= $ext ?>"],
header nav a[href$="about<?= $ext ?>"] { color: #fff; position: relative; }
header nav a[href$="/about<?= $ext ?>"]::after,
header nav a[href$="about<?= $ext ?>"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 2px; background: #D4AF37;
}

/* HERO — homepage pattern: bg image absolute on right with mask fade, copy in container */
.about-hero {
    position: relative;
    background: #030303;
    overflow: hidden;
    isolation: isolate;
    padding-top: 140px;
    padding-bottom: 0;
    min-height: 820px;
}
@media (max-width: 1024px) { .about-hero { min-height: 660px; padding-bottom: 0; } }
@media (max-width: 768px) { .about-hero { padding-top: 120px; min-height: auto; padding-bottom: 40px; } }

.about-hero-bg-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: var(--about-hero-img);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 30%, #000 60%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 30%, #000 60%);
}
@media (max-width: 1024px) {
    .about-hero-bg-img {
        width: 100%;
        opacity: 0.35;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    }
}

.about-hero-content { position: relative; z-index: 2; max-width: 620px; }
.about-hero-eyebrow { display: inline-block; color: #D4AF37; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.72rem; font-weight: 500; margin-bottom: 18px; }
.about-hero-content h1 { font-family: var(--font-heading, 'Cormorant Garamond', serif); font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; color: #fff; font-weight: 500; letter-spacing: -0.015em; margin: 0; }
.about-hero-content h1 .h1-line { display: block; }
.about-hero-content h1 .accent { color: #D4AF37; }
.about-hero-content .lede { color: #cbcbcb; font-weight: 300; max-width: 480px; line-height: 1.6; margin-top: 22px; font-size: 1.02rem; }
.about-hero-badges { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 28px; margin-top: 38px; max-width: 520px; }
@media (min-width: 640px) { .about-hero-badges { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.about-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: #e7e7e7; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em; text-align: left; line-height: 1.3; }
.about-badge-ring { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(212,175,55,0.55); display: inline-flex; align-items: center; justify-content: center; color: #D4AF37; }
.about-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.about-btn-gold { display: inline-flex; align-items: center; gap: 10px; background: #D4AF37; color: #030303; padding: 14px 26px; border-radius: 6px; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; transition: background 0.25s ease, transform 0.25s ease; }
.about-btn-gold:hover { background: #e6c34c; transform: translateY(-1px); }
.about-btn-ghost { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.22); color: #fff; padding: 14px 26px; border-radius: 6px; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; transition: background 0.25s ease, border-color 0.25s ease; }
.about-btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(212,175,55,0.55); }

/* OUR STORY slab */
.about-story { background: #030303; padding: 90px 0; }
.about-story-slab { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 22px; padding: 56px 44px; }
@media (max-width: 768px) { .about-story-slab { padding: 36px 22px; } }
.about-story-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
@media (min-width: 1024px) { .about-story-grid { grid-template-columns: 1fr 1.15fr; gap: 64px; } }
.about-story h2 { font-family: var(--font-heading, 'Cormorant Garamond', serif); color: #fff; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; font-weight: 500; }
.about-story h2 .accent { color: #D4AF37; }
.about-story .eyebrow { color: #D4AF37; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.72rem; font-weight: 500; display: block; margin-bottom: 14px; }
.about-story-body p { color: #b8b8b8; font-weight: 300; line-height: 1.75; font-size: 1rem; }
.about-story-body p + p { margin-top: 18px; }
.about-stats { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.08); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
@media (min-width: 768px) { .about-stats { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; } }
.about-stat { display: flex; align-items: center; gap: 18px; }
.about-stat-ring { width: 54px; height: 54px; border-radius: 999px; border: 1px solid rgba(212,175,55,0.45); display: inline-flex; align-items: center; justify-content: center; color: #D4AF37; flex-shrink: 0; }
.about-stat-value { color: #fff; font-size: 1.55rem; font-weight: 600; line-height: 1; }
.about-stat-label { color: #8a8a8a; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 8px; }

/* AAT STANDARD */
.about-standard { background: #030303; padding: 90px 0; }
.about-standard-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.about-standard-head .eyebrow { color: #D4AF37; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.72rem; font-weight: 500; display: block; margin-bottom: 12px; }
.about-standard-head h2 { font-family: var(--font-heading, 'Cormorant Garamond', serif); color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 500; }
.about-standard-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .about-standard-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .about-standard-grid { grid-template-columns: repeat(3, 1fr); } }
.about-feature { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 28px 26px; display: flex; gap: 18px; align-items: flex-start; transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; }
.about-feature:hover { border-color: rgba(212,175,55,0.4); transform: translateY(-2px); background: rgba(255,255,255,0.04); }
.about-feature-ring { width: 48px; height: 48px; border-radius: 999px; background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.35); display: inline-flex; align-items: center; justify-content: center; color: #D4AF37; flex-shrink: 0; }
.about-feature h3 { color: #fff; font-size: 1.02rem; font-weight: 600; margin-bottom: 8px; }
.about-feature p { color: #9b9b9b; font-size: 0.86rem; line-height: 1.55; font-weight: 300; }

/* EVERY JOURNEY cards */
.about-journeys { background: #030303; padding: 90px 0; }
.about-journeys-head { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.about-journeys-head .eyebrow { color: #D4AF37; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.72rem; font-weight: 500; display: block; margin-bottom: 12px; }
.about-journeys-head h2 { font-family: var(--font-heading, 'Cormorant Garamond', serif); color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 500; }
.about-journeys-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 640px) { .about-journeys-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .about-journeys-grid { grid-template-columns: repeat(4, 1fr); } }
.about-journey { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.25s ease, transform 0.25s ease; }
.about-journey:hover { border-color: rgba(212,175,55,0.4); transform: translateY(-3px); }
.about-journey-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.about-journey-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.about-journey:hover .about-journey-media img { transform: scale(1.04); }
.about-journey-body { padding: 22px 22px 26px; flex: 1 1 auto; display: flex; flex-direction: column; }
.about-journey-body h3 { color: #fff; font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; }
.about-journey-body p { color: #9b9b9b; font-size: 0.86rem; line-height: 1.55; font-weight: 300; flex: 1 1 auto; }
.about-journey-link { margin-top: 18px; color: #D4AF37; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }

/* BOTTOM CTA BANNER */
.about-cta-band { background: #030303; padding: 30px 0 100px; }
.about-cta-card { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1024px) { .about-cta-card { grid-template-columns: 0.85fr 1.15fr; } }
.about-cta-img { position: relative; min-height: 220px; }
.about-cta-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-cta-body { padding: 36px 36px; display: flex; align-items: center; gap: 28px; justify-content: space-between; flex-wrap: wrap; }
@media (max-width: 768px) { .about-cta-body { padding: 28px 22px; } }
.about-cta-body h3 { color: #fff; font-family: var(--font-heading, 'Cormorant Garamond', serif); font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 500; line-height: 1.15; max-width: 380px; }
.about-cta-body p { color: #9b9b9b; font-size: 0.9rem; line-height: 1.55; font-weight: 300; margin-top: 8px; max-width: 380px; }
.about-cta-actions { display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
.about-cta-phone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.05em; transition: border-color 0.25s ease, background 0.25s ease; }
.about-cta-phone:hover { border-color: rgba(212,175,55,0.55); background: rgba(212,175,55,0.06); }