/* ═══════════════════════════════════════════════════════════════
   about.css — About page unique design
   Palette: white/warm-light bg, gold (#FFC000) accent, navy text
   Distinct from inner-pages.css (airport page dark navy hero)
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS variables — light mode defaults ───────────────────────── */
.ab-page {
    --ab-gold     : #FFC000;
    --ab-gold-d   : #e0a800;
    --ab-navy     : #06264a;
    --ab-navy-2   : #0b3b70;
    --ab-sky      : #54B6F4;
    --ab-text     : #17324d;
    --ab-muted    : #5a7080;
    --ab-light    : #f5f7fa;
    --ab-bg       : #ffffff;
    --ab-card-bg  : #ffffff;
    --ab-border   : #e0eaf4;
    --ab-shadow   : 0 18px 50px rgba(6,38,74,.10);
    --ab-shadow-s : 0 6px 20px rgba(6,38,74,.07);
    --ab-eyebrow-bg   : rgba(255,192,0,.12);
    --ab-eyebrow-bdr  : rgba(255,192,0,.35);
    --ab-eyebrow-color: #8a6000;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
    line-height : 1.7;
    color       : var(--ab-text);
    background  : var(--ab-bg);
}

/* ── CSS variables — dark mode overrides ───────────────────────── */
html[data-theme="dark"] .ab-page {
    --ab-navy     : #e8f2fb;
    --ab-navy-2   : #b8d8f0;
    --ab-text     : #d0e8f8;
    --ab-muted    : rgba(200,225,245,.65);
    --ab-light    : #0a1e30;
    --ab-bg       : #071827;
    --ab-card-bg  : #0d2337;
    --ab-border   : rgba(255,255,255,.08);
    --ab-shadow   : 0 18px 50px rgba(0,0,0,.35);
    --ab-shadow-s : 0 6px 20px rgba(0,0,0,.25);
    --ab-eyebrow-bg   : rgba(255,192,0,.10);
    --ab-eyebrow-bdr  : rgba(255,192,0,.25);
    --ab-eyebrow-color: #FFC000;
}

.ab-page * { box-sizing: border-box; }
.ab-page img { max-width: 100%; display: block; }
.ab-page a { text-decoration: none; color: inherit; }
.ab-page h1, .ab-page h2, .ab-page h3 { margin: 0; letter-spacing: -.03em; }
.ab-page p { margin: 0; }

.ab-wrap {
    width : min(1140px, calc(100% - 48px));
    margin: 0 auto;
}

.ab-section { padding: 80px 0; }
.ab-bg-light { background: var(--ab-light); }

/* ── EYEBROW ──────────────────────────────────────────────────── */
.ab-eyebrow {
    display        : inline-flex;
    align-items    : center;
    gap            : 7px;
    padding        : 6px 14px;
    border-radius  : 999px;
    background     : var(--ab-eyebrow-bg);
    border         : 1px solid var(--ab-eyebrow-bdr);
    color          : var(--ab-eyebrow-color);
    font-weight    : 800;
    font-size      : .78rem;
    text-transform : uppercase;
    letter-spacing : .09em;
    margin-bottom  : 16px;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.ab-hero {
    background   : var(--ab-bg);
    padding      : 64px 0 0;
    text-align   : center;
    border-bottom: 1px solid var(--ab-border);
    transition   : background .3s;
}

.ab-hero-inner {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    padding-bottom: 48px;
}

/* Logo circle */
.ab-logo {
    width        : 120px;
    height       : 120px;
    border-radius: 50%;
    object-fit   : cover;
    border       : 4px solid var(--ab-gold);
    box-shadow   : 0 0 0 6px rgba(255,192,0,.15), var(--ab-shadow-s);
    margin-bottom: 20px;
}

.ab-hero h1 {
    font-size    : clamp(2.4rem, 5vw, 4rem);
    font-weight  : 900;
    color        : var(--ab-navy);
    line-height  : 1.08;
    margin-bottom: 16px;
}

.ab-lead {
    font-size    : clamp(1rem, 1.8vw, 1.14rem);
    color        : var(--ab-muted);
    max-width    : 620px;
    line-height  : 1.78;
    margin-bottom: 30px;
}

/* Photo strip */
.ab-hero-photo-row { background: var(--ab-light); padding: 0; transition: background .3s; }

.ab-photo-strip {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 0;
    height               : 280px;
}
.ab-photo-card { overflow: hidden; }
.ab-photo-card img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
    transition: transform .5s ease;
}
.ab-photo-card:hover img { transform: scale(1.04); }

/* ── BUTTONS ──────────────────────────────────────────────────── */
.ab-actions {
    display        : flex;
    flex-wrap      : wrap;
    gap            : 14px;
    justify-content: center;
}

.ab-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    padding        : 14px 28px;
    border-radius  : 999px;
    font-weight    : 800;
    font-size      : .97rem;
    cursor         : pointer;
    transition     : transform .2s, box-shadow .2s, background .2s, color .2s;
    text-decoration: none !important;
    white-space    : nowrap;
    border         : 2px solid transparent;
}
.ab-btn:hover { transform: translateY(-2px); }

/* Gold — always gold regardless of theme */
.ab-btn-gold {
    background : var(--ab-gold) !important;
    color      : #06264a !important;
    border-color: var(--ab-gold) !important;
    box-shadow : 0 8px 24px rgba(255,192,0,.30);
}
.ab-btn-gold:hover {
    background : var(--ab-gold-d) !important;
    border-color: var(--ab-gold-d) !important;
    box-shadow : 0 12px 32px rgba(255,192,0,.42);
}

/* Outline — adapts to theme */
.ab-btn-outline {
    background  : transparent !important;
    color       : var(--ab-navy) !important;
    border-color: currentColor !important;
}
.ab-btn-outline:hover {
    background  : var(--ab-navy) !important;
    color       : var(--ab-bg) !important;
}
html[data-theme="dark"] .ab-btn-outline:hover {
    background  : rgba(255,255,255,.12) !important;
    color       : #fff !important;
}

/* Outline on dark CTA section */
.ab-btn-outline-inv {
    background  : transparent !important;
    color       : #fff !important;
    border-color: rgba(255,255,255,.40) !important;
}
.ab-btn-outline-inv:hover {
    background  : rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.7) !important;
}

.ab-btn-full { width: 100%; justify-content: center; }

/* ── STATS STRIP — always dark navy, gold numbers ──────────────── */
.ab-stats-section { padding: 0; background: #06264a; }

.ab-stats {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    text-align           : center;
}
.ab-stat {
    padding    : 32px 20px;
    border-right: 1px solid rgba(255,255,255,.10);
}
.ab-stat:last-child { border-right: none; }
.ab-stat b {
    display        : block;
    font-size      : clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight    : 900;
    color          : var(--ab-gold);
    line-height    : 1;
    letter-spacing : -.03em;
}
.ab-stat span {
    display    : block;
    font-size  : .85rem;
    color      : rgba(255,255,255,.65);
    font-weight: 600;
    margin-top : 6px;
}

/* ── STORY SPLIT ──────────────────────────────────────────────── */
.ab-story {
    display              : grid;
    grid-template-columns: 1fr 380px;
    gap                  : 60px;
    align-items          : start;
}

.ab-story-text h2 {
    font-size    : clamp(1.7rem, 3.2vw, 2.6rem);
    font-weight  : 900;
    color        : var(--ab-navy);
    margin-bottom: 20px;
}
.ab-story-text p {
    color      : var(--ab-muted);
    font-size  : 1.04rem;
    line-height: 1.82;
}
.ab-story-text p + p { margin-top: 16px; }

.ab-contact-list { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.ab-contact-item {
    font-size  : .95rem;
    font-weight: 600;
    color      : var(--ab-text);
    display    : flex;
    align-items: center;
    gap        : 8px;
}

/* Aside card */
.ab-aside-card {
    background   : var(--ab-card-bg);
    border       : 1px solid var(--ab-border);
    border-radius: 24px;
    padding      : 30px 28px;
    box-shadow   : var(--ab-shadow-s);
    position     : sticky;
    top          : 110px;
    transition   : background .3s, border-color .3s;
}

.ab-aside-row {
    display      : flex;
    align-items  : center;
    gap          : 12px;
    padding      : 10px 0;
    font-weight  : 700;
    font-size    : .94rem;
    color        : var(--ab-text);
    border-bottom: 1px solid var(--ab-border);
}
.ab-aside-row:last-of-type { border-bottom: none; }

.ab-check {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 24px;
    height         : 24px;
    border-radius  : 50%;
    background     : var(--ab-gold);
    color          : #06264a;
    font-size      : .8rem;
    font-weight    : 900;
    flex-shrink    : 0;
}

.ab-aside-divider { height: 1px; background: var(--ab-border); margin: 20px 0; transition: background .3s; }

/* ── SERVICES ─────────────────────────────────────────────────── */
.ab-section-head { margin-bottom: 40px; }
.ab-section-head h2 {
    font-size    : clamp(1.7rem, 3vw, 2.4rem);
    font-weight  : 900;
    color        : var(--ab-navy);
    margin-top   : 10px;
}

.ab-services {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 20px;
}
.ab-service {
    display        : flex;
    align-items    : flex-start;
    gap            : 18px;
    padding        : 24px 22px;
    border-radius  : 18px;
    background     : var(--ab-card-bg);
    border         : 1px solid var(--ab-border);
    box-shadow     : var(--ab-shadow-s);
    transition     : transform .2s, box-shadow .2s, border-color .2s, background .3s;
    text-decoration: none !important;
    color          : var(--ab-text) !important;
}
.ab-service:hover {
    transform   : translateY(-4px);
    box-shadow  : var(--ab-shadow);
    border-color: var(--ab-gold);
    color       : var(--ab-text) !important;
}

.ab-service-icon {
    font-size      : 1.6rem;
    width          : 50px;
    height         : 50px;
    border-radius  : 14px;
    background     : rgba(255,192,0,.10);
    border         : 1px solid rgba(255,192,0,.25);
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
}
.ab-service h3 {
    font-size    : 1.02rem;
    font-weight  : 800;
    color        : var(--ab-navy);
    margin-bottom: 5px;
}
.ab-service p {
    font-size  : .88rem;
    color      : var(--ab-muted);
    line-height: 1.6;
}

/* ── CTA BAND — always dark navy ──────────────────────────────── */
.ab-cta-section {
    background : #06264a;
    padding    : 72px 0;
    text-align : center;
}
.ab-cta-section h2 {
    font-size    : clamp(1.8rem, 3.5vw, 3rem);
    font-weight  : 900;
    color        : #fff;
    margin-bottom: 12px;
}
.ab-cta-section > .ab-wrap > p {
    color        : rgba(255,255,255,.65);
    font-size    : 1.08rem;
    margin-bottom: 32px;
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 960px) {
    .ab-story                { grid-template-columns: 1fr; }
    .ab-aside-card           { position: static; }
    .ab-services             { grid-template-columns: 1fr 1fr; }
    .ab-stats                { grid-template-columns: repeat(2, 1fr); }
    .ab-stat                 { border-bottom: 1px solid rgba(255,255,255,.10); }
}
@media (max-width: 600px) {
    .ab-photo-strip          { grid-template-columns: 1fr; height: 200px; }
    .ab-photo-card:last-child{ display: none; }
    .ab-services             { grid-template-columns: 1fr; }
    .ab-stats                { grid-template-columns: repeat(2, 1fr); }
    .ab-wrap                 { width: calc(100% - 32px); }
    .ab-section              { padding: 48px 0; }
    .ab-hero                 { padding: 36px 0 0; }
    .ab-btn                  { width: 100%; justify-content: center; }
    .ab-actions              { flex-direction: column; align-items: stretch; }
}
@media (max-width: 400px) {
    .ab-stats { grid-template-columns: 1fr; }
    .ab-wrap  { width: calc(100% - 20px); }
    .ab-section { padding: 36px 0; }
}