:root {
    --primary: #0c54a6;
    --primary-hover: #094080;
    /* Flat blue: the light theme uses solid fills, not metallic gradients.
       Kept as gradient tokens so every existing `background:
       var(--primary-gradient)` call site resolves without edits. */
    --primary-gradient: linear-gradient(#0c54a6, #0c54a6);
    --primary-gradient-hover: linear-gradient(#094080, #094080);
    --primary-gradient-text-light: linear-gradient(#0c54a6, #0c54a6);
    --background: #ffffff;
    /* Light theme */
    --surface: #f8fafc;
    --surface-light: #f1f5f9;
    --border: #e2e8f0;
    --text: #0f172a;
    --text-muted: #64748b;
    --nav-height: 88px;
    /* Cards need a shadow to read as raised on the light theme —
       a border alone leaves them flat against the background. */
    --card-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --card-shadow-hover: 0 12px 28px -8px rgba(15, 23, 42, 0.16), 0 4px 8px -4px rgba(15, 23, 42, 0.08);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    margin: 0;
    /* clears the fixed navbar */
    padding: var(--nav-height) 0 0 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--background);
    background-image: none;
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Navigation Bar Styles */
.navbar {
    height: var(--nav-height);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    /* fixed, not sticky: html/body use overflow-x:hidden, which
       silently breaks position:sticky */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
}

.nav-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: space-between;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--text);
}

.brand-image {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.brand-text-image {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.nav-brand .brand-text-image {
    height: 72px;
    width: auto;
    object-fit: contain;
}

.brand-image-nav {
    height: 70px;
    width: auto;
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.brand-sub {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--primary);
    margin-top: 2px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

.nav-btn-desktop {
    justify-self: end;
}

.nav-link {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.nav-btn {
    background: var(--primary-gradient);
    color: var(--background);
    padding: 0.6rem 1.5rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 3px 14px -3px rgba(12, 84, 166, 0.4);
}

.nav-btn:hover {
    background: var(--primary-gradient-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -4px rgba(12, 84, 166, 0.55);
}

/* The CTA inside the links group is only for the mobile drawer */
.nav-links .nav-btn-mobile {
    display: none;
}

/* Hero Section */
.hero {
    width: 100%;
    /* 1200px of content + the shared 2rem gutter, so the hero lines up
       with every section below it instead of sitting 100px off-left. */
    max-width: 1264px;
    margin: 4rem auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Hero Left Column */
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #ffffff;
    border: 1px solid var(--border);
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--primary);
    width: fit-content;
}

.badge-icon {
    color: var(--primary);
    font-size: 1rem;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}

.hero-title span.italic-gold {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary);
    /* fallback where background-clip: text is unsupported */
}

.hero-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-muted);
    border-left: 2px solid var(--primary);
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.hero-desc strong {
    color: var(--text);
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 1rem;
}

.btn-primary {
    background: var(--primary-gradient);
    color: var(--background);
    padding: 1rem 2rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px -2px rgba(12, 84, 166, 0.3);
}

.btn-primary:hover {
    background: var(--primary-gradient-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -4px rgba(12, 84, 166, 0.4);
}

.btn-outline {
    background-color: #ffffff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.05rem;
    border: 1px solid var(--primary);
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background-color: var(--surface);
    border-color: var(--primary-hover);
}

.hero-stats {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.stat-box {
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.5rem;
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: var(--card-shadow);
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* Hero Right Column */
.hero-visual {
    position: relative;
    width: 85%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 4 / 5;
    border-radius: 2rem;
    background: none;
    border: none;
    /* No lift: the column is centred in the hero row so the founder card
       finishes level with the stat boxes opposite, instead of ending
       ~200px short and leaving a dead corner. */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Float Bubble Animation */
@keyframes float-bubble {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* Right Top Badge */
.review-badge {
    position: absolute;
    top: -20px;
    right: -20px;
    background-color: rgba(248, 250, 252, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    color: var(--background);
    padding: 1rem 1.5rem;
    border-radius: 2rem;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    z-index: 10;
    animation: float-bubble 4s ease-in-out infinite;
}

.stars {
    color: var(--primary);
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.review-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}

/* Person Image */
.person-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 2rem;
    z-index: 1;
}

/* Bottom Profile Overlay — a white card, not text laid over the photo,
   so the name stays legible against the light theme */
.profile-overlay {
    position: absolute;
    /* The visual column is centred within a taller row (align-items: center
       on .hero), which leaves empty space below the photo. Push the card
       down into that space so its bottom lines up with the stat boxes on
       the left, instead of finishing ~40px short of them. */
    bottom: -10rem;
    left: -2rem;
    right: 2rem;
    z-index: 5;
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
}

.founder-tag {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--primary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.founder-tag::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: var(--primary-gradient);
}

.founder-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.25rem 0 0.25rem 0;
    color: var(--text);
}

.sebi-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0;
    padding-left: 0;
}

/* In normal flow inside the profile card, below the name. It used to be
   absolutely positioned, which is what collided with the SEBI line. */
.recognition-badge {
    position: static;
    margin-top: 1rem;
    background-color: transparent;
    border: none;
    color: var(--text);
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    box-shadow: none;
}

.recognition-icon {
    width: 36px;
    height: 36px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b1120;
}

.recognition-text {
    display: flex;
    flex-direction: column;
}

.recognition-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #475569;
    text-transform: uppercase;
}

.recognition-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

/* Trust Stats Section */
.trust-stats {
    /* box-sizing is border-box, so the gutter has to be added on top of
       1200px or this content column ends up 64px narrower than the
       sections that pad a full-bleed wrapper. */
    max-width: 1264px;
    margin: 4rem auto 8rem auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trust-header {
    text-align: center;
    margin-bottom: 4rem;
}

.header-line {
    width: 60px;
    height: 2px;
    background: var(--primary-gradient);
    margin: 0 auto 1.5rem auto;
}

.trust-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0 0 1rem 0;
    color: var(--text);
}

.trust-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 0;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
}

.trust-card {
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
}

.trust-card:hover {
    background-color: var(--surface);
    border-color: rgba(12, 84, 166, 0.3);
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
}

.card-icon {
    color: var(--primary);
    width: 28px;
    height: 28px;
}

.card-icon svg {
    width: 100%;
    height: 100%;
}

.card-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    /* Equal-width digits so the count-up animation doesn't jitter */
    font-variant-numeric: tabular-nums;
}

.card-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* About Timeline Section */
.about-timeline {
    width: 100%;
    background-color: #f8fafc;
    color: #0b1120;
    padding: 6rem 2rem;
    display: flex;
    justify-content: center;
}

.timeline-container {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
}

.about-content {
    display: flex;
    flex-direction: column;
}

.about-header-line {
    width: 60px;
    height: 1px;
    background: var(--primary-gradient);
    margin-bottom: 2rem;
}

.about-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 1.5rem 0;
    color: #060b19;
}

.gold-text {
    background: var(--primary-gradient-text-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary);
    /* fallback where background-clip: text is unsupported */
}

.about-desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 2.5rem;
}

.mission-box {
    background-color: #f1f5f9;
    border: 1px solid rgba(12, 84, 166, 0.2);
    border-radius: 1rem;
    padding: 2.5rem;
}

.mission-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

.quote-icon {
    font-size: 1.2rem;
}

.mission-quote {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #1e293b;
    margin: 0;
    font-weight: 500;
}

/* Timeline specific styles */
.timeline-wrapper {
    position: relative;
    padding-left: 20px;
}

.timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 35.5px;
    width: 1px;
    background-color: rgba(12, 84, 166, 0.4);
    z-index: 1;
}

.timeline-item {
    position: relative;
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    z-index: 2;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    width: 32px;
    height: 32px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.2rem;
}

.timeline-year {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.timeline-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: #060b19;
}

.timeline-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

/* Why Choose Section */
.why-choose {
    background-color: #f0f3f6;
    /* slightly darker grey background than the timeline to separate sections */
    padding: 6rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.why-header {
    text-align: center;
    margin-bottom: 4rem;
}

.why-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0b1120;
    margin: 0 0 1rem 0;
}

.why-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    width: 100%;
}

.why-card {
    background-color: #ffffff;
    border-radius: 1.5rem;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.1);
}

.why-icon {
    width: 48px;
    height: 48px;
    background-color: #0b1120;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.why-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0b1120;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.why-card-text {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 2rem 0;
    flex-grow: 1;
}

.card-divider {
    width: 40px;
    height: 2px;
    background: var(--primary-gradient);
    opacity: 0.5;
}

/* Footer Section */
.footer-brand .brand-text-image {
    height: 110px;
    width: auto;
    object-fit: contain;
}

.site-footer {
    background-color: var(--surface);
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding: 6rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-container {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 2rem;
    margin-top: 1.5rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.social-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: rgba(12, 84, 166, 0.1);
}

/* Brand colours. Instagram's mark is a gradient, applied in the SVG itself
   via stroke="url(#ig-gradient)" — the colour here only drives its border. */
.social-linkedin {
    color: #0a66c2;
}

.social-facebook {
    color: #1877f2;
}

.social-instagram {
    color: #c837ab;
}

.social-linkedin:hover {
    color: #0a66c2;
    border-color: #0a66c2;
    background-color: rgba(10, 102, 194, 0.1);
}

.social-facebook:hover {
    color: #1877f2;
    border-color: #1877f2;
    background-color: rgba(24, 119, 242, 0.1);
}

.social-instagram:hover {
    color: #c837ab;
    border-color: #c837ab;
    background-color: rgba(200, 55, 171, 0.1);
}

/* WhatsApp glyph on the hero and CTA buttons — brand green regardless of
   the button's own text colour. */
.whatsapp-icon {
    fill: #25d366;
}

.footer-heading {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
}

.footer-links,
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Shared reset for contact details (phone/email/address) that are links —
   they should read as plain text, not the site's default link colour. */
.plain-link {
    color: inherit;
    text-decoration: none;
}

.plain-link:hover {
    text-decoration: underline;
}

.contact-icon {
    color: var(--primary);
    font-size: 1.1rem;
}

.footer-bottom {
    max-width: 1200px;
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #64748b;
}

/* Four columns survive down to 900px, but the 4rem gutters eat most of the
   row before then and squeeze the link columns to ~127px. Tighten the gap
   rather than drop to two columns early. */
@media (max-width: 1200px) {
    .footer-container {
        gap: 2rem;
    }
}

/* Below this the four columns get too narrow for link labels like
   "Stock Market Advisory" to sit on one line. */
@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* Wealth Services Section */
.wealth-services {
    padding: 6rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
}

.services-header {
    text-align: center;
    margin-bottom: 4rem;
}

.services-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 1rem 0;
}

.services-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    width: 100%;
}

.service-card {
    background-color: #ffffff;
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
    border-color: rgba(12, 84, 166, 0.3);
}

.service-icon {
    width: 42px;
    height: 42px;
    background-color: var(--background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.service-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.service-card-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 2rem 0;
    flex-grow: 1;
}

.service-learn-more {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
    margin-top: auto;
}

.service-learn-more:hover {
    color: var(--primary-hover);
}

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* These two went straight from 3 columns to 1 at 600px. A grid item's
       default min-width is auto, so between 601px and ~660px the cards could
       not shrink to fit and spilled past the viewport. Step them down to 2
       like every other grid on the page. (.who-grid already has its own
       3 -> 2 -> 1 ladder.) */
    .trust-grid,
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* Process Section */
.process-section {
    padding: 6rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
}

.process-header {
    text-align: center;
    margin-bottom: 4rem;
}

.process-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 1rem 0;
}

.process-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 0;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    width: 100%;
}

.process-card {
    background-color: #ffffff;
    border-radius: 1.5rem;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.process-card:hover {
    transform: translateY(-5px);
    border-color: rgba(12, 84, 166, 0.4);
    box-shadow: var(--card-shadow-hover);
}

.process-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.process-num {
    font-size: 3.5rem;
    font-weight: 800;
    color: rgba(12, 84, 166, 0.4); /* Faded gold for the number */
    line-height: 1;
}

.process-arrow {
    color: rgba(12, 84, 166, 0.6);
    font-size: 1.2rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.process-card:hover .process-arrow {
    color: var(--primary);
    transform: translateX(4px);
}

.process-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.process-card-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 1024px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr;
    }
}

/* Outcomes Section */
.outcomes-section {
    padding: 6rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--background);
    color: var(--text);
}

.outcomes-header {
    text-align: center;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.outcomes-header-line {
    width: 40px;
    height: 2px;
    background: var(--primary-gradient);
    margin-bottom: 1.5rem;
}

.outcomes-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0c54a6;
    margin: 0 0 1rem 0;
}

.outcomes-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 0;
}

.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    width: 100%;
}

.outcomes-card {
    background-color: var(--surface);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.outcomes-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
}

.outcomes-value {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 1.5rem;
    line-height: 1;
}

.outcomes-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #dbeafe;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.outcomes-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.outcomes-card-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 1024px) {
    .outcomes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .outcomes-grid {
        grid-template-columns: 1fr;
    }
}

/* Training Section */
.training-section {
    padding: 6rem 2rem;
    background-color: #f2f4f6; /* Very light grey matching the image */
    color: #0b1120;
    display: flex;
    justify-content: center;
}

.training-container {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.training-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.training-header-line {
    width: 50px;
    height: 2px;
    background: var(--primary-gradient);
    margin-bottom: 2rem;
}

.training-title {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0b1120;
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

.training-title .gold-text {
    background: var(--primary-gradient-text-light);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary);
    /* fallback where background-clip: text is unsupported */
}

.training-desc {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

.training-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.training-features li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    color: #1e293b;
    font-weight: 500;
}

.check-icon {
    width: 24px;
    height: 24px;
    background-color: #dbeafe;
    /* Soft blue circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.btn-enroll {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #0b1120;
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-enroll:hover {
    background: var(--primary-gradient);
}

/* Cards Grid */
.training-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.card-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mt-col {
    margin-top: 3rem; /* Staggers the right column downwards */
}

.training-card {
    background-color: #ffffff;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.training-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
}

.card-icon-cap {
    color: var(--primary);
    margin-bottom: 1rem;
}

.t-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1120;
    margin: 0 0 0.5rem 0;
}

.t-card-desc {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 900px) {
    .training-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .training-content {
        align-items: center;
        text-align: center;
    }

    .training-header-line {
        margin-bottom: 1.5rem;
    }

    /* Keep the checklist rows left-aligned so the check icons line up */
    .training-features {
        text-align: left;
    }

    .training-cards-grid {
        gap: 1rem;
    }
}

@media (max-width: 600px) {
    /* Single column here, so match the gap the cards already use between
       themselves inside a column — otherwise the two groups read as
       separate blocks rather than one list. */
    .training-cards-grid {
        gap: 1.5rem;
    }

    /* The desktop stagger becomes a dead band between the two groups
       once the columns stack. */
    .mt-col {
        margin-top: 0;
    }
}

/* Legacy Section */
.legacy-section {
    padding: 8rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    text-align: center;
}

.legacy-header-line {
    width: 60px;
    height: 1px;
    background-color: rgba(12, 84, 166, 0.5); /* Faded gold */
    margin: 0 auto 2rem auto;
}

.legacy-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 2rem 0;
    line-height: 1.2;
    max-width: 900px;
}

.legacy-title .gold-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary);
    /* fallback where background-clip: text is unsupported */
}

.legacy-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

.legacy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    width: 100%;
}

.legacy-card {
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.legacy-card:hover {
    transform: translateY(-5px);
    border-color: rgba(12, 84, 166, 0.4);
    box-shadow: var(--card-shadow-hover);
}

.legacy-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 1rem 0;
}

.legacy-card-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .legacy-grid {
        grid-template-columns: 1fr;
    }
    .legacy-title {
        font-size: 2.5rem;
    }
}

/* FAQ Section */
.faq-section {
    padding: 6rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f8fafc; /* Very light background like in the image */
    color: #0b1120;
}

.faq-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-header-line {
    width: 40px;
    height: 2px;
    background: var(--primary-gradient);
    margin-bottom: 1.5rem;
}

.faq-title {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0b1120;
    margin: 0 0 1rem 0;
}

.faq-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0;
}

.faq-container {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Hide the default marker */
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary {
    list-style: none;
}

.faq-question {
    padding: 1.5rem 2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1120;
    user-select: none;
    transition: color 0.3s ease;
}

.faq-icon {
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.faq-icon .chevron {
    transition: transform 0.3s ease;
}

.faq-item[open] {
    border-color: rgba(12, 84, 166, 0.4);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}

.faq-item[open] .faq-icon .chevron {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 2rem 1.5rem 2rem;
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    border-top: none;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CTA Section */
.cta-section {
    padding: 6rem 2rem;
    background-color: #f8fafc;
    display: flex;
    justify-content: center;
}

.cta-card {
    background: linear-gradient(135deg, #091024 0%, #1e293b 100%);
    border-radius: 2rem;
    max-width: 1200px;
    width: 100%;
    display: flex;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
}

.cta-left {
    padding: 4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-header-line {
    width: 40px;
    height: 1px;
    background-color: rgba(12, 84, 166, 0.5); /* Faded gold */
    margin-bottom: 2rem;
}

.cta-title {
    font-size: 3.2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

.cta-title .gold-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary);
    /* fallback where background-clip: text is unsupported */
}

.cta-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 3rem 0;
    max-width: 500px;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn-call-now {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-gradient);
    color: #0b1120;
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-call-now:hover {
    background: var(--primary-gradient-hover);
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: transparent;
    color: #ffffff;
    border: 1px solid var(--border);
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

.cta-right {
    padding: 4rem 4rem 4rem 0;
    display: flex;
    align-items: center;
}

.contact-card {
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 320px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.contact-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-color: rgba(12, 84, 166, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.c-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.c-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

@media (max-width: 1024px) {
    .cta-card {
        flex-direction: column;
    }
    
    .cta-right {
        padding: 0 4rem 4rem 4rem;
    }
    
    .contact-card {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .cta-left {
        padding: 3rem 2rem;
    }
    
    .cta-right {
        padding: 0 2rem 3rem 2rem;
    }
    
    .cta-title {
        font-size: 2.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .btn-call-now, .btn-whatsapp {
        width: 100%;
        justify-content: center;
    }
}

/* Keep anchored sections clear of the sticky navbar */
section[id] {
    scroll-margin-top: var(--nav-height);
}

/* ===== Responsive hero ===== */
@media (max-width: 1024px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 0 2rem;
        gap: 3rem;
        margin: 2.5rem auto;
    }

    /* Stacked here, so the profile card's negative offsets would collide
       with the stats above — give the photo room to sit in normal flow. */
    .hero-visual {
        margin-top: 1rem;
        margin-bottom: 8rem;
    }

    .profile-overlay {
        left: 0;
        right: 0;
        bottom: -6rem;
    }

    .hero-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 600px) {
    .hero {
        padding: 0 1.25rem;
        margin: 1.5rem 0;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-desc {
        font-size: 1rem;
    }

    .hero-actions {
        flex-wrap: wrap;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-outline {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-stats {
        flex-wrap: wrap;
    }
}

/* ===== Mobile Navigation ===== */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background-color: var(--text);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Between the hamburger breakpoint (900px) and a roomy desktop, eight
   links plus the CTA outgrow the bar and the last link slides under the
   button. Tighten the row rather than drop a link. */
@media (max-width: 1200px) {
    .nav-links {
        gap: 1.25rem;
    }

    .nav-link {
        font-size: 0.875rem;
    }

    .nav-btn-desktop {
        padding: 0.55rem 1.1rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }
}

@media (max-width: 900px) {
    .nav-container {
        display: flex;
        justify-content: space-between;
        padding: 0 1.25rem;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-btn-desktop {
        display: none;
    }

    .nav-links .nav-btn-mobile {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem 1.25rem 2rem;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s;
    }

    .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-link {
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--border);
        font-size: 1.05rem;
    }

    .nav-btn {
        margin-top: 1.25rem;
        justify-content: center;
    }
}
/* ===== Who We Serve ===== */
.who-serve {
    /* 1200px content column + the shared gutter — see .trust-stats */
    max-width: 1264px;
    /* The next section (.about-timeline) already brings 6rem of its own
       top padding — a large bottom margin here stacks on top of it. */
    margin: 4rem auto 3rem auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.who-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.who-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0 0 1rem 0;
    color: var(--text);
}

.who-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 0;
}

.who-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.who-card {
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.who-card:hover {
    transform: translateY(-5px);
    border-color: rgba(12, 84, 166, 0.4);
    box-shadow: var(--card-shadow-hover);
}

.who-icon {
    width: 56px;
    height: 56px;
    background-color: #dbeafe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.who-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

@media (max-width: 900px) {
    .who-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .who-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Why Nepra — Three Questions ===== */
.why-nepra {
    background-color: var(--surface);
    padding: 6rem 2rem;
    display: flex;
    justify-content: center;
}

.why-nepra-inner {
    max-width: 640px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.why-nepra-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.why-nepra-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 0.75rem 0;
}

.why-nepra-intro {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin: 0 0 2rem 0;
}

.question-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 460px;
    text-align: left;
}

.question-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--card-shadow);
}

.question-check {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #dbeafe;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-nepra-answer {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
    line-height: 1.35;
}

@media (max-width: 600px) {
    .why-nepra-title {
        font-size: 2rem;
    }

    .question-item {
        font-size: 1rem;
    }

    .why-nepra-answer {
        font-size: 1.25rem;
    }
}

/* ============================================================
   MOBILE RESPONSIVENESS PASS (<=600px / <=480px)
   Laptop/tablet views above 600px are intentionally untouched.
   ============================================================ */
@media (max-width: 600px) {
    /* All card grids -> single column so nothing overflows */
    .trust-grid,
    .why-grid,
    .services-grid,
    .process-grid,
    .outcomes-grid,
    .training-cards-grid,
    .legacy-grid,
    .who-grid {
        grid-template-columns: 1fr;
    }

    /* Hero stat boxes: 2x2 instead of a cramped single row */
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    /* Founder image: desktop pulls it up 11rem and hangs the profile
       card off negative offsets, which collide with the stacked
       mobile layout. Neutralise both so it sits in normal flow. */
    .hero-visual {
        transform: none;
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 9rem;
    }

    .profile-overlay {
        left: 0;
        right: 0;
        bottom: -7rem;
    }

    /* About timeline: stack the two columns */
    .timeline-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* CTA: stack the message over the contact card, full width */
    .cta-card {
        flex-direction: column;
    }

    .cta-left {
        padding: 2.5rem 1.5rem;
    }

    /* cta-right desktop padding (4rem 4rem 4rem 0) + align-items:center
       leaves big empty gaps around the card when stacked. Reset it. */
    .cta-right {
        padding: 0 1.5rem 2.5rem;
        align-items: stretch;
    }

    .contact-card {
        padding: 1.75rem 1.5rem;
        gap: 1.5rem;
        /* hardcoded min-width:320px overflows narrow phones */
        min-width: 0;
        width: 100%;
    }

    /* Let long contact values (phone/email) wrap instead of clipping */
    .c-value {
        word-break: break-word;
        font-size: 0.95rem;
    }

    /* Value wraps to 2-3 lines on mobile, so centring floats the icon
       mid-text. Align it to the top, level with the label instead. */
    .contact-item {
        gap: 1rem;
        align-items: flex-start;
    }

    .contact-icon {
        flex-shrink: 0;
        width: 42px;
        height: 42px;
    }

    /* About heading reads better centred once the two columns stack */
    .about-title {
        text-align: center;
    }

    .about-header-line {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5rem;
    }

    /* Tighten oversized section padding on small screens. Vertical padding
       for these comes from the shared rhythm rule at the end of the file. */
    .about-timeline,
    .why-choose,
    .wealth-services,
    .process-section,
    .outcomes-section,
    .training-section,
    .legacy-section,
    .faq-section,
    .why-nepra {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Vertical margins for these come from the shared rhythm rules at the
       end of the file; only the gutter is set here. */
    .trust-stats,
    .who-serve,
    .trust-signals,
    .founder-profile {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Section headers carry their own bottom margin on top of all that */
    .trust-header,
    .who-header,
    .why-header,
    .services-header,
    .process-header,
    .outcomes-header,
    .faq-header {
        margin-bottom: 2.5rem;
    }

    /* Reduce big section headings so they fit narrow screens */
    .trust-title,
    .why-title,
    .services-title,
    .process-title,
    .outcomes-title,
    .training-title,
    .legacy-title,
    .faq-title,
    .who-title,
    .cta-title {
        font-size: 2rem;
    }
}

@media (max-width: 380px) {
    /* Very narrow: hero stats to a single column too */
    .hero-stats {
        grid-template-columns: 1fr;
    }
}

/* ===== Why Clients Trust Nepra ===== */
.trust-signals {
    /* 1200px content column + the shared gutter — see .trust-stats */
    max-width: 1264px;
    margin: 4rem auto 8rem auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trust-signals-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.trust-signals-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0 0 1rem 0;
    color: var(--text);
}

.trust-signals-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 0;
}

/* Tier 1 — credential cards */
.credential-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.credential-card {
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.credential-card:hover {
    transform: translateY(-5px);
    border-color: rgba(12, 84, 166, 0.4);
    box-shadow: var(--card-shadow-hover);
}

.credential-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #dbeafe;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.credential-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}

.credential-detail {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

/* Tier 2 — trust-signal chips */
.signal-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.signal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
}

.signal-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--primary);
    color: #ffffff;
    font-size: 0.75rem;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .credential-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .trust-signals {
        padding: 0 1.25rem;
    }

    .trust-signals-title {
        font-size: 2rem;
    }

    .credential-grid {
        grid-template-columns: 1fr;
    }

    .signal-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .signal-chip {
        justify-content: flex-start;
    }
}

/* ===== Why Our Clients Stay — Belief Band ===== */
.belief {
    background: linear-gradient(135deg, #0c54a6 0%, #093f7d 100%);
    padding: 6rem 2rem;
    display: flex;
    justify-content: center;
    text-align: center;
}

.belief-inner {
    max-width: 860px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.belief-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.belief-statement {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}

.belief-accent {
    color: #ffffff;
}

@media (max-width: 900px) {
    .belief-statement {
        font-size: 2.1rem;
    }
}

@media (max-width: 600px) {
    .belief {
        padding: 4rem 1.5rem;
    }

    .belief-statement {
        font-size: 1.6rem;
    }
}

/* ===== Meet Nikhil Joshi — Founder Profile ===== */
.founder-profile {
    /* 1200px content column + the shared gutter — see .trust-stats */
    max-width: 1264px;
    margin: 4rem auto 8rem auto;
    padding: 0 2rem;
}

.founder-profile-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
    align-items: center;
}

.founder-photo-wrap {
    position: relative;
    border-radius: 1.5rem;
    background: linear-gradient(160deg, #e8f0fb 0%, #f8fafc 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--card-shadow);
}

.founder-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.founder-profile-content {
    display: flex;
    flex-direction: column;
}

.founder-profile-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.founder-profile-name {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 1.25rem 0;
}

.founder-profile-mission {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-muted);
    font-style: italic;
    border-left: 3px solid var(--primary);
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
}

.founder-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.founder-fact {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 0.9rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    box-shadow: var(--card-shadow);
}

.founder-fact-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #dbeafe;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .founder-profile-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .founder-photo-wrap {
        max-width: 380px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .founder-profile {
        padding: 0 1.25rem;
    }

    .founder-profile-name {
        font-size: 2rem;
    }

    .founder-facts {
        grid-template-columns: 1fr;
    }
}

/* ===== Our Solutions — grouped ===== */
.solutions-grid {
    width: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
}

.solution-group {
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 2.25rem 2rem;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.solution-group:hover {
    transform: translateY(-5px);
    border-color: rgba(12, 84, 166, 0.4);
    box-shadow: var(--card-shadow-hover);
}

.solution-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #dbeafe;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.solution-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1.25rem 0;
}

.solution-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
}

.solution-list li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 1rem;
    color: var(--text);
    font-weight: 500;
}

.solution-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--primary);
    color: #ffffff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .solutions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .solution-list {
        grid-template-columns: 1fr;
    }
}

/* ===== Footer tagline ===== */
.footer-tagline {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 1rem 0;
    letter-spacing: 0.01em;
}

/* ===== Brand Philosophy Band ===== */
.philosophy {
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 5.5rem 2rem;
    display: flex;
    justify-content: center;
    text-align: center;
}

.philosophy-inner {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.philosophy-label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}

.philosophy-line {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

@media (max-width: 600px) {
    .philosophy {
        padding: 4rem 1.5rem;
    }

    .philosophy-line {
        font-size: 2rem;
    }
}

/* ===== Shared vertical rhythm =====
   Sections space themselves two different ways: full-bleed ones use their own
   vertical padding (6-8rem), contained ones use auto margins (4rem/8rem).
   Neighbours therefore stack two large values against each other — an 8rem
   margin meeting a 6rem padding left 14rem of dead space. Set both here so a
   section boundary is one predictable gap instead of a sum. */
.about-timeline,
.why-choose,
.wealth-services,
.process-section,
.outcomes-section,
.training-section,
.legacy-section,
.faq-section,
.cta-section,
.why-nepra,
.belief,
.philosophy,
.site-footer {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.trust-stats,
.who-serve,
.trust-signals,
.founder-profile {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* ===== Tighter vertical rhythm between sections on small screens ===== */
@media (max-width: 900px) {

    .about-timeline,
    .why-choose,
    .wealth-services,
    .process-section,
    .outcomes-section,
    .training-section,
    .legacy-section,
    .faq-section,
    .cta-section,
    .why-nepra,
    .belief,
    .philosophy,
    .site-footer {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .trust-stats,
    .who-serve,
    .trust-signals,
    .founder-profile {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 600px) {

    .about-timeline,
    .why-choose,
    .wealth-services,
    .process-section,
    .outcomes-section,
    .training-section,
    .legacy-section,
    .faq-section,
    .cta-section,
    .why-nepra,
    .belief,
    .philosophy,
    .site-footer {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .trust-stats,
    .who-serve,
    .trust-signals,
    .founder-profile {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}