/* =========================================================
   NiveshakFirst — Global Responsive System
   Loaded AFTER page-specific CSS so mobile rules can safely
   override desktop grid/layout rules on every page.
   ========================================================= */

/* Prevent accidental horizontal scrolling from decorative elements. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

/* Keep grid/flex children from forcing their parent wider. */
.container,
section,
article,
main,
footer,
header,
.grid,
[class*="grid"] {
    min-width: 0;
}

/* ---------------------------------------------------------
   Large tablets / small laptops
   --------------------------------------------------------- */
@media (max-width: 1150px) {
    .main-nav {
        gap: 2px;
    }

    .main-nav a {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 13px;
    }

    .brand,
    .brand-logo {
        width: 215px;
    }

    .nav-container {
        gap: 18px;
    }
}

/* ---------------------------------------------------------
   Tablet / mobile navigation breakpoint
   --------------------------------------------------------- */
@media (max-width: 1000px) {
    .main-nav {
        display: none;
    }

    .mobile-menu-button {
        display: block;
        flex: 0 0 auto;
    }

    .nav-container {
        min-height: 82px;
    }

    .brand,
    .brand-logo {
        width: 220px;
        max-width: 70vw;
        height: 68px;
    }

    .mobile-nav {
        display: none;
        width: 100%;
        background: #fff;
        border-top: 1px solid #e8edef;
        padding: 10px 4%;
        box-shadow: 0 10px 25px rgba(20, 42, 64, .06);
    }

    .mobile-nav.open {
        display: flex;
        flex-direction: column;
    }

    .mobile-nav a {
        padding: 13px 0;
        border-bottom: 1px solid #edf1ef;
        color: #52606d;
        font-size: 13px;
        font-weight: 600;
    }

    /* Home / shared two-column sections */
    .hero-container,
    .about-container,
    .contact-container,
    .process-hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-section,
    .hero-container {
        min-height: auto;
    }

    .hero-content {
        padding: 60px 0 25px;
    }

    .hero-visual {
        padding: 10px 0 55px;
    }

    .about-container {
        gap: 35px;
    }

    /* Important: page CSS uses 6/4-column desktop grids.
       Reset all placement rules for tablet/mobile. */
    .services-grid,
    .philosophy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-card,
    .service-card:nth-child(4),
    .service-card:nth-child(5),
    .philosophy-step,
    .philosophy-step:last-child {
        grid-column: auto;
    }

    .contact-container {
        gap: 40px;
    }

    .enquiry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-legal .container {
        padding: 15px 0;
        align-items: flex-start;
        flex-direction: column;
    }

    .process-hero-grid img {
        max-width: 650px;
        margin: 0 auto;
    }
}

/* ---------------------------------------------------------
   Phones / narrow tablets
   --------------------------------------------------------- */
@media (max-width: 700px) {
    .container {
        width: 94%;
    }

    .section-padding {
        padding: 64px 0;
    }

    /* Fixed backgrounds can behave poorly on iOS Safari. */
    body[data-page] {
        background-attachment: scroll;
    }

    .brand,
    .brand-logo {
        width: 205px;
        height: 64px;
        max-width: 68vw;
    }

    .nav-container {
        min-height: 76px;
    }

    .mobile-menu-button {
        font-size: 27px;
    }

    /* Hero */
    .hero-content {
        padding: 52px 0 20px;
    }

    .hero-content h1 {
        font-size: clamp(38px, 10vw, 52px);
        line-height: 1.06;
        letter-spacing: -0.8px;
    }

    .hero-description {
        max-width: none;
        font-size: 15px;
        line-height: 1.75;
    }

    /* iOS Safari should not zoom the page when focusing form controls. */
    .form-group input,
    .form-group textarea,
    .calc-fields input,
    select {
        font-size: 16px;
    }

    .hero-buttons {
        gap: 12px;
    }

    .hero-buttons .primary-button,
    .hero-buttons .secondary-button {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .hero-trust {
        gap: 18px;
    }

    /* The home hero illustration is decorative. On small screens it
       becomes too small and competes with the main message, so hide it. */
    .hero-visual {
        display: none;
    }

    /* Shared headings */
    .section-heading h2 {
        font-size: clamp(30px, 8vw, 42px);
    }

    .section-description {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.7;
    }

    /* Services / philosophy — one readable card per row. */
    .services-grid,
    .philosophy-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .service-card,
    .service-card:nth-child(4),
    .service-card:nth-child(5),
    .philosophy-step,
    .philosophy-step:last-child {
        grid-column: auto;
        width: 100%;
    }

    .service-card {
        min-height: auto;
        padding: 28px 24px 30px;
    }

    .service-card p,
    .philosophy-step p {
        max-width: none;
        font-size: 16px;
    }

    /* Philosophy cards */
    .philosophy-step {
        min-height: 0;
        text-align: left;
    }

    .philosophy-top {
        justify-content: flex-start;
    }

    /* Home calculator cards */
    .calculator-preview-grid,
    .home-blog-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* How-we-work process */
    .process-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .process-hero-grid img {
        display: none;
    }

    .process-timeline {
        grid-template-columns: 1fr;
    }

    .process-timeline article:last-child {
        grid-column: auto;
    }

    .process-timeline article {
        text-align: left;
        padding-left: 82px;
    }

    .process-timeline article span {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        width: 62px;
        height: 62px;
    }

    /* Contact / enquiry */
    .contact-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .contact-info,
    .enquiry-form-box {
        min-width: 0;
        width: 100%;
    }

    .contact-item {
        min-width: 0;
    }

    .contact-item strong,
    .contact-item small {
        overflow-wrap: anywhere;
    }

    .enquiry-form-box {
        padding: 32px 22px;
    }

    .enquiry-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .message-group {
        max-width: none;
    }

    .form-group input {
        height: 55px;
    }

    .submit-button {
        width: 100%;
    }

    /* Standalone calculator */
    .calculator-page-hero {
        padding-top: 55px;
    }

    .calculator-switcher {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .calc-panel.active {
        grid-template-columns: minmax(0, 1fr);
    }

    .calc-input-side,
    .calc-result-side {
        padding: 28px 22px;
        min-width: 0;
    }

    .result-cards {
        grid-template-columns: 1fr;
    }

    .result-cards strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Blog listing / articles */
    .blog-grid {
        grid-template-columns: 1fr !important;
    }

    .article-page,
    .article-page > .container,
    .article-content,
    .article-body {
        min-width: 0;
        max-width: 100%;
    }

    .article-image img,
    .article-content img,
    .article-body img {
        width: 100%;
        height: auto;
    }

    /* Reviews / FAQ */
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .faq-list {
        width: 100%;
    }

    /* Legal pages */
    .registration-grid {
        grid-template-columns: 1fr;
    }

    .policy-document,
    .registration-card,
    .verification-card,
    .risk-disclosure,
    .policy-contact-card {
        min-width: 0;
        max-width: 100%;
    }

    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-logo-image {
        max-width: 100%;
    }

    .footer-legal .container > div {
        flex-wrap: wrap;
        gap: 10px 15px;
    }

    /* Modals */
    .sip-journey-overlay {
        padding: 14px;
    }

    .sip-journey-box {
        width: 100%;
        max-height: 92vh;
        padding: 34px 22px 26px;
        border-radius: 18px;
    }
}

/* ---------------------------------------------------------
   Small phones
   --------------------------------------------------------- */
@media (max-width: 450px) {
    .container {
        width: calc(100% - 28px);
    }

    .brand,
    .brand-logo {
        width: 190px;
        height: 60px;
        max-width: 62vw;
    }

    .nav-container {
        min-height: 72px;
    }

    .hero-content h1 {
        font-size: clamp(36px, 10.5vw, 46px);
    }

    .hero-label,
    .section-label {
        font-size: 12px;
        letter-spacing: 1.7px;
    }

    .hero-description {
        font-size: 15px;
    }

    .section-padding {
        padding: 58px 0;
    }

    .section-heading.centered {
        margin-bottom: 32px;
    }

    .service-card,
    .philosophy-step {
        padding-left: 20px;
        padding-right: 20px;
    }

    .process-timeline article {
        padding-left: 76px;
    }

    .process-timeline article span {
        width: 58px;
        height: 58px;
    }

    .enquiry-form-box {
        padding: 28px 18px;
    }

    .form-heading h3 {
        font-size: 26px;
    }

    .blog-card-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .article-hero h1,
    .reviews-page-hero h1,
    .disclosure-header h1,
    .policy-hero h1 {
        font-size: clamp(32px, 9vw, 40px);
        overflow-wrap: anywhere;
    }

    .calc-input-side,
    .calc-result-side {
        padding-left: 18px;
        padding-right: 18px;
    }

    .footer-container {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/* ---------------------------------------------------------
   Very small phones (iPhone SE / older Android widths)
   --------------------------------------------------------- */
@media (max-width: 375px) {
    .brand,
    .brand-logo {
        width: 175px;
        max-width: 60vw;
    }

    .mobile-menu-button {
        font-size: 25px;
    }

    .hero-content h1 {
        font-size: 35px;
    }

    .section-heading h2 {
        font-size: 30px;
    }

    .hero-trust {
        flex-direction: column;
        gap: 12px;
    }

    .calculator-switcher {
        grid-template-columns: 1fr;
    }

    .sip-journey-box {
        padding-left: 18px;
        padding-right: 18px;
    }
}