/*
 * About Us — client design (docs/client-source/about-contact/Mahatej_About_Us_Expanded.html).
 * Every rule is scoped to .ab-page and every class is ab- prefixed, so nothing leaks into the shared layout or other
 * pages, and the site's global .card/.grid/... rules cannot leak in.
 */
.ab-page {
    --ab-bg: #071427;
    --ab-panel: #0e2139;
    --ab-gold: #c4a25b;
    --ab-text: #f4f6fa;
    --ab-muted: #bac6d7;
    --ab-line: #263952;
    background: var(--ab-bg);
    color: var(--ab-text);
    font: 16px/1.75 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow: hidden;
}
.ab-page *,
.ab-page *::before,
.ab-page *::after { box-sizing: border-box; }
.ab-page a { color: inherit; }
.ab-page a:focus-visible { outline: 3px solid var(--ab-gold); outline-offset: 5px; }
.ab-page .ab-wrap { width: min(1160px, 90%); margin: auto; }

/* In-page section bar (the client's header row; the brand links to the homepage). */
/* Extra top padding clears the shared header logo, which overlaps the first content row by design. */
.ab-page .ab-subnav { border-bottom: 1px solid var(--ab-line); padding: 46px 0 23px; }
.ab-page .ab-subnav-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.ab-page .ab-brand { font-size: 21px; font-weight: 800; letter-spacing: 3px; text-decoration: none; color: var(--ab-text); line-height: 1.3; }
.ab-page .ab-brand small { display: block; font-size: 10px; letter-spacing: 2px; color: var(--ab-muted); font-weight: 600; }
.ab-page .ab-subnav nav { display: flex; gap: 25px; flex-wrap: wrap; }
.ab-page .ab-subnav nav a { font-size: 14px; text-decoration: none; color: var(--ab-muted); }
.ab-page .ab-subnav nav a:hover { color: var(--ab-gold); }

.ab-page .ab-hero { padding: 90px 0 70px; background: radial-gradient(ellipse at 85% 10%, #24405b 0, transparent 65%); border-bottom: 1px solid var(--ab-line); }
.ab-page .ab-eyebrow { color: var(--ab-gold); letter-spacing: 3px; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.ab-page h1,
.ab-page h2,
.ab-page h3 { color: var(--ab-text); font-family: inherit; font-weight: 700; letter-spacing: normal; }
.ab-page h1 { font-size: clamp(36px, 5.3vw, 64px); line-height: 1.12; max-width: 900px; margin: 20px 0; }
.ab-page h2 { font-size: clamp(28px, 3vw, 39px); line-height: 1.25; margin: 10px 0 22px; }
.ab-page h3 { font-size: 21px; line-height: 1.35; margin: 0 0 14px; }
.ab-page h3 a { text-decoration: none; }
.ab-page h3 a:hover { color: var(--ab-gold); }
.ab-page p { margin: 0 0 18px; color: var(--ab-muted); font-size: inherit; line-height: inherit; }
.ab-page strong { color: var(--ab-text); }
.ab-page .ab-tagline { font-family: Georgia, serif; font-size: 29px; color: var(--ab-gold); }
.ab-page .ab-hero-sub { font-size: 19px; max-width: 700px; }

.ab-page .ab-button { display: inline-block; background: var(--ab-gold); color: var(--ab-bg); font-weight: 700; padding: 12px 23px; border-radius: 5px; text-decoration: none; margin-top: 12px; margin-right: 10px; line-height: 1.4; }
.ab-page .ab-button:hover { background: #ddbd79; color: var(--ab-bg); }
.ab-page .ab-secondary { background: transparent; color: var(--ab-gold); border: 1px solid var(--ab-gold); }
.ab-page .ab-secondary:hover { background: rgba(196, 162, 91, 0.12); color: var(--ab-gold); }

.ab-page section { padding: 65px 0; border-bottom: 1px solid var(--ab-line); background: transparent; }
.ab-page .ab-intro { max-width: 900px; }
.ab-page .ab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ab-page .ab-card { padding: 30px; background: var(--ab-panel); border: 1px solid var(--ab-line); border-radius: 10px; }
.ab-page .ab-card p:last-child { margin-bottom: 0; }
.ab-page .ab-number { display: block; color: var(--ab-gold); font-size: 14px; letter-spacing: 3px; margin-bottom: 18px; }
.ab-page .ab-service h3 { font-size: 25px; }
.ab-page .ab-service-tagline { color: var(--ab-gold); font-style: italic; }
.ab-page .ab-card-link a { color: var(--ab-gold); font-weight: 700; text-decoration: none; }
.ab-page .ab-card-link a:hover { text-decoration: underline; }
.ab-page ul { padding-left: 21px; color: var(--ab-muted); margin: 20px 0; list-style: disc; }
.ab-page li { margin: 7px 0; }
.ab-page li::marker { color: var(--ab-gold); }
.ab-page .ab-note { font-size: 14px; border-top: 1px solid var(--ab-line); padding-top: 18px; }
.ab-page .ab-values .ab-card { background: transparent; }
.ab-page .ab-lead { max-width: 840px; }
.ab-page .ab-partnership-line { font-size: 23px; color: var(--ab-gold); }
.ab-page .ab-spaced { margin-top: 25px; }
.ab-page .ab-purpose-copy > p { max-width: 900px; }
.ab-page .ab-purpose-copy > p:first-of-type { color: var(--ab-gold); font-size: 20px; font-weight: 600; }
.ab-page .ab-purpose-copy + .ab-purpose-copy { margin-top: 55px; padding-top: 45px; border-top: 1px solid var(--ab-line); }
.ab-page .ab-mission-close { margin-top: 28px; }
.ab-page #our-approach h2:not(:first-child) { margin-top: 42px; }

.ab-page .ab-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; }
.ab-page .ab-contact-list { margin: 0; }
.ab-page .ab-contact-list dt { font-size: 12px; color: var(--ab-gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 17px; }
.ab-page .ab-contact-list dd { margin: 4px 0; overflow-wrap: anywhere; color: var(--ab-text); }
.ab-page .ab-contact-list a { text-decoration: none; }
.ab-page .ab-contact-list a:hover { text-decoration: underline; }
.ab-page address { font-style: normal; }
.ab-page section[id] { scroll-margin-top: 30px; }

@media (max-width: 700px) {
    .ab-page .ab-subnav-row { align-items: flex-start; flex-direction: column; }
    .ab-page .ab-subnav nav { gap: 18px; }
    .ab-page .ab-hero { padding: 55px 0; }
    .ab-page .ab-grid,
    .ab-page .ab-contact { grid-template-columns: minmax(0, 1fr); }
    .ab-page .ab-card { padding: 24px; }
    .ab-page section { padding: 45px 0; }
}
@media (max-width: 400px) {
    .ab-page .ab-secondary { margin-left: 0; }
}
@media print {
    .ab-page { background: #fff; color: #13243a; }
    .ab-page .ab-subnav,
    .ab-page .ab-button { display: none; }
    .ab-page p,
    .ab-page ul { color: #333; }
    .ab-page h1,
    .ab-page h2,
    .ab-page h3 { color: #13243a; }
    .ab-page .ab-hero { background: none; padding: 20px 0; }
    .ab-page .ab-card { background: #fff; border-color: #ddd; break-inside: avoid; }
    .ab-page section { padding: 24px 0; }
    .ab-page .ab-wrap { width: 100%; }
    .ab-page .ab-contact-list dt,
    .ab-page .ab-tagline,
    .ab-page .ab-eyebrow,
    .ab-page .ab-number { color: #70551e; }
}
