/* ==============================================================
   ABOUT US PAGE
   (saare @media rules responsive.css me hain)
   ============================================================== */

.ab-soft { background: var(--bg-light); }
.ab-text { color: var(--text-light); line-height: 1.75; opacity: 0.85; }

/* ====== HERO ====== */
.ab-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--grad-dark); color: var(--white); padding: 70px 0 90px; }
.ab-hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); }
.ab-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.4px; }
.ab-chip i { color: var(--accent); }
.ab-hero-title { font-family: var(--font-display); color: var(--white); font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.1; margin: 18px 0 16px; letter-spacing: -0.5px; }
.ab-hero-title span { color: var(--accent); font-style: italic; }
.ab-hero-lead { font-size: 1.08rem; line-height: 1.7; opacity: 0.88; max-width: 600px; margin: 0; }
.ab-btn-ghost { display: inline-flex; align-items: center; padding: 12px 26px; border-radius: var(--radius-pill); border: 1.5px solid rgba(255, 255, 255, 0.6); color: var(--white); font-weight: 700; transition: all 0.22s; }
.ab-btn-ghost:hover { background: var(--white); color: var(--primary); }
.ab-hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 32px; font-size: 0.9rem; font-weight: 600; }
.ab-hero-points i { color: var(--accent); margin-right: 6px; }

/* plane-window frame */
.ab-window-wrap { position: relative; max-width: 380px; margin: 0 auto; }
.ab-window { aspect-ratio: 3 / 4; border-radius: 180px; overflow: hidden; border: 14px solid rgba(255, 255, 255, 0.95); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 4px rgba(var(--primary-rgb), 0.2); }
.ab-window img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-float { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; background: var(--white); color: var(--primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-hover); }
.ab-float i { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--accent); color: var(--white); font-size: 1.05rem; }
.ab-float strong { display: block; font-size: 1rem; line-height: 1.2; }
.ab-float small { font-size: 0.75rem; opacity: 0.75; }
.ab-float-top { top: 40px; left: -40px; }
.ab-float-bottom { bottom: 50px; right: -30px; }
.ab-float-bottom i { background: var(--primary); }

/* ====== STORY COLLAGE ====== */
.ab-collage { position: relative; padding: 0 60px 60px 0; }
.ab-collage img { display: block; height: auto; object-fit: cover; border-radius: var(--radius); }
.ab-collage-main { width: 100%; aspect-ratio: 5 / 4; box-shadow: var(--shadow); }
.ab-collage-sub { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; border: 8px solid var(--white); box-shadow: var(--shadow-hover); }
.ab-collage-tag { position: absolute; left: 20px; top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--accent); color: var(--white); font-weight: 700; font-size: 0.85rem; box-shadow: var(--shadow); }
.ab-checklist { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.ab-checklist li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.ab-checklist i { width: 26px; height: 26px; flex: 0 0 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(var(--accent-rgb), 0.12); color: var(--accent); font-size: 0.75rem; }

/* ====== FLIGHT-PATH STEPS ====== */
.ab-route { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ab-route::before { content: ""; position: absolute; top: 34px; left: 12%; right: 12%; border-top: 2px dashed rgba(var(--primary-rgb), 0.3); }
.ab-stop { position: relative; text-align: center; padding: 0 8px; }
.ab-stop-dot { width: 68px; height: 68px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--white); border: 2px solid var(--primary); color: var(--primary); font-size: 1.4rem; position: relative; transition: all var(--ease); }
.ab-stop:hover .ab-stop-dot { background: var(--accent); border-color: var(--accent); color: var(--white); transform: translateY(-4px); }
.ab-stop-gate { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.ab-stop h6 { font-size: 1.1rem; margin-bottom: 6px; }
.ab-stop p { font-size: 0.9rem; margin: 0; }

/* ====== SERVICE TILES ====== */
.ab-service { display: block; height: 100%; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform var(--ease), box-shadow var(--ease); }
.ab-service:hover { transform: var(--lift); box-shadow: var(--shadow-hover); }
.ab-service img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 0.6s ease; }
.ab-service:hover img { transform: scale(1.06); }
.ab-service-body { position: relative; padding: 34px 24px 24px; }
.ab-service-body > i { position: absolute; top: -26px; left: 24px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--primary); color: var(--white); font-size: 1.2rem; box-shadow: var(--shadow); transition: background var(--ease); }
.ab-service:hover .ab-service-body > i { background: var(--accent); }
.ab-service h3 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 8px; }
.ab-service p { color: var(--text-light); opacity: 0.85; font-size: 0.92rem; margin-bottom: 14px; }
.ab-service-link { font-weight: 700; color: var(--accent); font-size: 0.9rem; }
.ab-service-link i { margin-left: 6px; transition: transform 0.2s; }
.ab-service:hover .ab-service-link i { transform: translateX(4px); }

/* ====== TEAM / CONTACT ====== */
.ab-photo { position: relative; isolation: isolate; }
.ab-photo::before { content: ""; position: absolute; inset: 20px -20px -20px 20px; border-radius: var(--radius); border: 2px solid var(--accent); z-index: -1; }
.ab-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-hover); display: block; }
.ab-contact-list { display: grid; gap: 14px; margin-top: 26px; }
.ab-contact { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); transition: border-color var(--ease), box-shadow var(--ease); }
a.ab-contact:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.ab-contact .contact-icon { width: 48px; height: 48px; font-size: 1.1rem; margin: 0; border-radius: 12px; }
.ab-contact small { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
.ab-contact strong { font-size: 1rem; word-break: break-word; }

/* ====== CTA ====== */
.ab-cta { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius); padding: 70px 30px; text-align: center; color: var(--white); background: var(--primary); }
.ab-cta::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); }
.ab-cta::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(var(--primary-rgb), 0.72); }
.ab-cta-bg { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-cta h2 { color: var(--white); font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.ab-cta p { opacity: 0.9; font-size: 1.05rem; margin: 0; }