/* ── ABOUT LIGHT THEME ───────────────────────── */
body.page-about-light {
    background-color: #f9f9f9;
    color: #00193c;
    background-image: radial-gradient(circle, rgba(0,25,60,0.03) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* Nav */
body.page-about-light .navbar { background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid rgba(0,0,0,0.05); }
body.page-about-light .logo-text { color: #00193c; }
body.page-about-light .logo-text span { color: #00193c; opacity: 0.6; }

body.page-about-light .nav-link { color: #48626e; }
body.page-about-light .nav-link:hover,
body.page-about-light .nav-link.active { color: #00193c; background: rgba(0,0,0,0.03); }
body.page-about-light .menu-toggle span { background: #00193c; }

/* Hero */
.ab-hero-section {
    background: url('images/hero.png') center/cover no-repeat;
    position: relative;
    overflow: hidden;
}
.ab-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 25, 60, 0.85); /* Navy overlay */
    z-index: 0;
}
.ab-hero { padding: 140px 0 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.ab-hero-left h1 { font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; color: #ffffff; margin: 16px 0 24px; }
.ab-hero-sub { color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; line-height: 1.6; max-width: 480px; }
.ab-hero-right { position: relative; padding-left: 20px; }
.ab-hero-right > img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 30px 60px rgba(0,0,0,0.1); filter: grayscale(10%); transform: translateY(-20px); }
.ab-hero-card { position: absolute; bottom: 0px; left: 0px; background: #fff; padding: 24px; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #00193c; max-width: 260px; z-index: 2; line-height: 1.5; }

/* Philosophy */
.ab-philosophy { padding: 80px 0 100px; background: transparent; }
.ab-phil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; }
.ab-phil-text h2 { font-size: 2rem; font-weight: 800; color: #00193c; margin-bottom: 24px; letter-spacing: -0.02em; }
.ab-phil-text p { font-size: 0.95rem; color: #48626e; line-height: 1.7; margin-bottom: 20px; }
.ab-phil-images { display: grid; grid-template-columns: 1fr 1.2fr; grid-template-rows: auto auto; gap: 16px; align-items: start; }
.ab-phil-images img { width: 100%; object-fit: cover; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* Customizing the photo collage */
.ab-img-1 { height: 260px; }
.ab-img-2 { height: 180px; margin-top: 40px; }
.ab-img-3 { height: 200px; margin-top: -20px; }
.ab-img-4 { height: 240px; margin-top: 20px; }

/* Safety First */
.ab-safety { padding: 80px 0; border-top: 1px solid rgba(0,0,0,0.05); }
.ab-safety-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; }
.ab-safety-header h2 { font-size: 2.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 16px; color: #00193c; letter-spacing: -0.02em; }
.ab-safety-header p { color: #48626e; font-size: 0.95rem; max-width: 500px; margin: 0; }
.ab-safety-pill { background: rgba(244,121,32,0.1); color: #F47920; padding: 10px 20px; border-radius: 30px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; }
.ab-safety-pill svg { width: 14px; height: 14px; fill: #F47920; }
.ab-safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sf-card { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.02); display: flex; flex-direction: column; }
.sf-card-img { height: 180px; background: #eee; }
.sf-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }
.sf-card-content { padding: 32px; flex: 1; display:flex; flex-direction: column; position: relative;}
.sf-card-content h3 { font-size: 1.15rem; font-weight: 800; color: #00193c; margin-bottom: 16px; }
.sf-ref { position: absolute; right: 32px; top: 35px; font-size: 0.5rem; color:#b0b0b0; font-weight: 700; letter-spacing: 0.1em; }
.sf-card-content p { font-size: 0.85rem; color: #48626e; line-height: 1.6; margin-bottom: 24px; flex: 1;}
.sf-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #f0f0f4; padding-top: 24px; }
.sf-list li { font-size: 0.75rem; color: #48626e; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sf-list li:last-child { margin-bottom: 0; }
.sf-list li svg { width: 16px; height: 16px; fill: #F47920; flex-shrink: 0; }

/* Why Choose Us */
.ab-why { padding: 60px 0 100px; }
.ab-why > h2 { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #00193c; margin-bottom: 40px; text-align: center; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Why - Left Card */
.why-dark-card { background: #00193c; color: #fff; padding: 60px 48px; border-radius: 4px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.why-dark-card h3 { font-size: 2.8rem; font-weight: 900; margin: 16px 0 24px; color: #fff; line-height: 1.1; letter-spacing: -0.03em; }
.why-dark-card > span { font-size: 0.65rem; color: #7796d1; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.why-dark-card p { color: #7796d1; font-size: 0.95rem; line-height: 1.6; max-width: 400px; flex: 1; margin-bottom: 60px; }
.why-dark-bottom { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.why-icon { width: 48px; height: 48px; background: rgba(255,255,255,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.why-icon svg { width: 24px; height: 24px; fill: #7796d1; }
.why-dark-bottom span { font-size: 0.8rem; font-weight: 700; color: #fff; }
.why-watermark { position: absolute; right: 30px; top: 30px; width: 140px; opacity: 0.05; }
.why-watermark svg { width:100%; height:100%; fill:#fff; }

/* Why - Right Cards */
.why-right-col { display: flex; flex-direction: column; gap: 24px; }
.why-card-top { background: #fff; padding: 48px; border-radius: 4px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); display: flex; align-items: center; gap: 24px; flex: 1; }
.why-card-icon { width: 64px; height: 64px; background: #e0f2fe; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink:0; }
.why-card-icon svg { width: 32px; height: 32px; fill: #00193c; }
.why-card-content h4 { font-size: 1.25rem; font-weight: 800; color: #00193c; margin-bottom: 12px; }
.why-card-content p { font-size: 0.9rem; color: #48626e; line-height: 1.6; }

.why-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; flex: 1.2; }
.why-stat-1 { background: #4a2511; color: #fff; padding: 40px; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; }
.why-stat-1 h4 { font-size: 2.8rem; font-weight: 900; color: #fff; margin-bottom: 8px; }
.why-stat-1 span { font-size: 0.65rem; color: #F47920; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

.why-stat-2 { background: #e6e6e8; padding: 40px; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.why-stat-2 h4 { font-size: 2.5rem; font-weight: 900; color: #00193c; margin-bottom: 8px; position:relative; z-index:2;}
.why-stat-2 span { font-size: 0.65rem; color: #48626e; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; position:relative; z-index:2;}
.why-stat-2 svg { position: absolute; bottom: -20px; right: -20px; width: 120px; height: 120px; fill: #d0d0d2; z-index: 1; transform: rotate(-15deg); }

/* CTA */
.ab-cta { background: #00193c; padding: 60px 80px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; gap: 40px; position: relative; overflow: hidden; margin-bottom: 60px; }
.ab-cta-left { max-width: 500px; z-index:2; }
.ab-cta-left h2 { font-size: 2.2rem; font-weight: 800; line-height: 1.2; color: #fff; margin-bottom: 16px; letter-spacing: -0.02em; }
.ab-cta-left p { font-size: 0.95rem; color: #7796d1; line-height: 1.6; }
.ab-cta-right { display: flex; gap: 16px; z-index:2; flex-wrap: wrap; }
.btn-white { background: #fff; color: #00193c; padding: 1rem 2rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-block; border-radius: 4px; }
.btn-white:hover { background: #e0e0e0; }
.btn-outline-navy { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2); padding: 1rem 2rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-block; border-radius: 4px; }
.btn-outline-navy:hover { background: rgba(255,255,255,0.05); }
.ab-cta-pattern { position: absolute; top:0; bottom:0; right:0; left: 50%; background: radial-gradient(circle at right, rgba(255,255,255,0.03) 0%, transparent 60%); z-index:1; pointer-events: none;}

/* Responsive */
@media (max-width: 1024px) {
    .ab-hero { grid-template-columns: 1fr; }
    .ab-hero-right { padding-left: 0; margin-top: 40px; }
    .ab-phil-grid { grid-template-columns: 1fr; }
    .ab-safety-header { flex-direction: column; align-items: flex-start; gap: 24px; }
    .ab-safety-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: 1fr; }
    .ab-cta { flex-direction: column; text-align: center; padding: 40px; }
    .ab-cta-right { justify-content: center; }
}
@media (max-width: 768px) {
    .ab-safety-grid { grid-template-columns: 1fr; }
    .why-split { grid-template-columns: 1fr; }
    .ab-phil-images { grid-template-columns: 1fr; }
    .ab-img-1, .ab-img-2, .ab-img-3, .ab-img-4 { height: 200px; margin: 0 !important; }
}