/* No universal standard ranges. Use ranges of common devices.

Selecting breakpoints:
Large screens (2XL): >1536px
Large laptops (XL): 1280px - 1536px
Small laptops (LG): 1024px - 1280px
Tablets (MD): 768px - 1024px
Phone landscape (SM): 576px - 768px
Phone portrait (XS): <576px */

/* LG - SMALL LAPTOPS: 1024px - 1280px */

@media (max-width: 72rem) {
    /* 1150px / 16px = 71.875 = 72rem */
    /* 72rem x 16px = 1152px */

    html {
        font-size: 56.25%;
        /* 9px / 16px = 56.25% */
    }

    .nav-corp-stripe {
        --flag-gap: clamp(0.60rem, 1.0vw, 1.1rem);
        --stripe-gap: clamp(0.70rem, 1.3vw, 1.3rem);
        --stripe-font: clamp(0.80rem, 0.88rem + 0.18vw, 0.98rem);
    }

    .logo-md {
        width: 190px;
    }


    .dv2-navbar-inner {
        grid-template-columns: 1fr;
        text-align: center;
        row-gap: 0.75rem;
        padding: 0.75rem 0;
    }

    .dv2-nav-left,
    .dv2-nav-center,
    .dv2-nav-right {
        justify-self: center;
    }

    .hero-services-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .hero-stack {
        margin-bottom: 20rem;
        /* padding-bottom: 0.5rem; */
    }

    .features-grid-container {
        column-gap: 2rem;
    }

    .cta-section {
        margin-bottom: 20rem;
    }
}


/* MD - TABLETS: 768 - 1024px */

@media (max-width: 51rem) {
    /* 815px / 16px = 50.9375 = 51rem */
    /* 51rem x 16px = 816px */

    html {
        font-size: 50%;
        /* 8px / 16px = 50% */
    }

    .dv2-navbar-inner {
        grid-template-columns: 1fr;
        text-align: center;
        row-gap: 0.5rem;
    }

    .dv2-nav-left,
    .dv2-nav-center,
    .dv2-nav-right {
        justify-self: center;
    }


    .nav-corp-stripe {
        --flag-gap: clamp(0.50rem, 0.9vw, 1.0rem);
        --stripe-gap: clamp(0.60rem, 1.1vw, 1.2rem);
        --stripe-font: clamp(0.78rem, 0.86rem + 0.16vw, 0.95rem);
    }

    .logo-md {
        width: 170px;
    }

    .subnav .container {
        width: 97%;
        gap: 2rem;
    }

    /* .nav-link { */
    /* font-size: var(--text-base); */
    /* compact for tablets */
    /* } */

    .dv2-cta-section {
        margin-bottom: 15rem;
    }

    .nav-spacer {
        height: calc(var(--nav-height) -80px);
    }

    .hero-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-stack {
        margin-bottom: 15rem;
    }

    .dv2-about-preview {
        margin-bottom: 15rem;
    }

    .dv2-features {
        margin-bottom: 15rem;
    }

    .dv2-guidelines {
        margin-bottom: 15rem;
    }

    .contact {
        margin-bottom: 15rem;
    }

    .dv2-case-studies {
        margin-bottom: 15rem;
    }
}

/* SM - PHONE LANDSCAPES: 576 - 768px */

@media (max-width: 43rem) {
    /* 680px / 16px = 42.5rem = 43rem */
    /* 43rem x 16px = 688px */

    html {
        font-size: 43.75%;
        /* 7px / 16px = 43.75% */
    }

    .nav-corp-stripe {
        --flag-gap: clamp(0.45rem, 0.8vw, 0.9rem);
        --stripe-gap: clamp(0.55rem, 1.0vw, 1.1rem);
        --stripe-font: clamp(0.76rem, 0.84rem + 0.14vw, 0.92rem);
    }

    .logo-md {
        width: 160px;
    }

    .subnav .container {
        width: 95%;
        gap: 1.8rem;
    }

    .nav-link {
        /* font-size: var(--text-h4); */
        letter-spacing: 0;
        /* reduce width impact */
    }

    .nav-middle {
        margin: 0.5rem 0;
        /* breathing space when stacked */
    }

    /* .nav-wrapper {
        margin-bottom: 30rem;
    } */

    .nav-wrapper {
        margin-bottom: 0;
    }


    .hero-section-modern {
        /* height: calc(80vh - var(--nav-height));
        min-height: 7rem;
        margin-bottom: 10rem;
        padding-bottom: 5.5rem; */
        /* was 4rem */
    }

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

    .hero-auth-actions {
        padding-top: 1.75rem;
    }

    .hero-stack {
        margin-bottom: 10rem;
    }

    .dv2-about-preview {
        margin-bottom: 10rem;
    }

    .cta-card {
        padding: 8rem 16rem;
    }

    .dv2-features {
        margin-bottom: 10rem;
    }

    .features-grid-container {
        row-gap: 5rem;
        column-gap: 0.5rem;
    }

    .dv2-cta-section {
        margin-bottom: 10rem;
    }

    .services-section {
        padding: 2rem 1rem;
        margin-bottom: 10rem;
    }

    .dv2-guidelines {
        margin-bottom: 10rem;
    }

    .contact {
        padding: 2rem 1rem;
        margin-bottom: 10rem;
    }

    .dv2-case-studies {
        padding: 2rem 1rem;
        margin-bottom: 10rem;
    }

    .dv2-case-card {
        padding: 2rem;
    }

    .dv2-case-card.open {
        padding: 2.25rem;
    }
}

/* XS - PHONE PORTRAIT: <576px */

@media (max-width: 34rem) {
    /* 530 / 16 = 33.125 = 34rem */
    /* 34rem x 16 = 544px */

    html {
        font-size: 100%;  /* Mobile readability fix: removed 6px baseline (37.5%) as it made text too small on phones */
        /* 6px / 16px = 37.5 */
    }

    .nav-corp-stripe {
        --flag-gap: clamp(0.40rem, 0.7vw, 0.8rem);
        --stripe-gap: clamp(0.50rem, 0.9vw, 1.0rem);
        --stripe-font: clamp(0.74rem, 0.82rem + 0.12vw, 0.90rem);
    }

    .hero-heading-break {
        display: none;
    }

    .hero-cta-btn {
        text-align: center;
        padding: 1.4rem;
        font-size: 1.2rem;
        border-radius: 8px;
    }

    .logo-md {
        width: 100px;
        margin-right: 1rem;
    }


    .nav-faith-pillar {
        font-size: 0.9rem;
        gap: 0.5rem;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .nav-faith-pillar img {
        width: 14px;
    }

    .nav-main {
        height: auto;

    }

    .nav-btn-container {
        gap: 0.20rem;
        /* smaller spacing between Login and Register */
    }

    .nav-btn-container a {
        padding: 0.35rem 0.7rem;
        font-size: 0.9rem;
    }

    .nav-middle a {
        letter-spacing: 1.5px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .nav-middle .nav-link {
        font-size: 2.0rem;
        /* adjust for fit on small screens */
        white-space: nowrap;
        /* forces the text to stay on one line */
        padding: 0;
        /* optional: reduces vertical space */
    }

    .hero-section-modern {
        height: auto;
        /* FIX: same behaviour */
        margin-bottom: 6rem;
        /* FIX: smooth reduction */
        padding-bottom: 5.5rem;
        /* was 4rem */
    }

    .dv2-features {
        margin-bottom: 5rem;
    }

    .dv2-cta-section {
        margin-bottom: 5rem;
    }

    .dv2-cta-card {
        padding: 4rem 2rem;
        gap: 2rem;
    }

    .dv2-cta-actions {
        flex-direction: column;
        gap: 1rem;
    }

    .dv2-cta-primary,
    .dv2-cta-secondary {
        width: 100%;
    }

    .dv2-about-preview {
        /* padding: 2rem 1rem; */
        margin-bottom: 10rem;
    }

    .first-about-highlight {
        padding: 0.15rem 0.3rem;
        margin-bottom: 0.3rem;
    }

    .first-about-grid-container {
        grid-template-columns: 1fr;
        /* collapse to one column */
        gap: 2rem;
    }

    .first-about-text-1,
    .first-about-text-2,
    .first-about-text-3,
    .first-about-text-4,
    .first-about-text-5 {
        margin-bottom: 1.5rem;
    }

    .first-about-img {
        margin-bottom: 2.0rem;
    }

    /* Force consistent text → image order */
    #about-origin {
        order: 1;
    }

    .first-about-img-1 {
        order: 2;
    }

    #about-founder {
        order: 3;
        /* text first */
    }

    .first-about-img-2 {
        order: 4;
        /* image second */
    }

    #about-evolution {
        order: 5;
    }

    .first-about-img-3 {
        order: 6;
    }

    #about-mission {
        order: 7;
    }

    .first-about-img-4 {
        order: 8;
    }

    /* Card 5: values & principles */
    #about-values-principles {
        order: 9;
        /* text first */
    }

    .about-values-img-5 {
        order: 10;
        /* image second */
    }

    .contact {
        padding: 1rem 1rem;
        margin-bottom: 5rem;
    }

    .dv2-about-preview {
        margin-bottom: 5rem;
        /* slightly tighter bottom rhythm on mobile */
    }

    /* SERVICES  */

    .dv2-services-inner {
        max-width: 100%;
        text-align: left;
        /* improves scan on mobile */
        padding: 0 1rem;
    }

    .dv2-services-title,
    .dv2-services-subtitle {
        text-align: center;
        /* match mobile reading ergonomics */

    }

    .dv2-services-subtitle {
        margin: 0 0 4rem 0;
        /* reduce space on mobile */
        max-width: 100%;
        /* safe width; won’t affect small screens */
    }

    .dv2-services-grid {
        grid-template-columns: 1fr;
        /* 🔑 switch to one column */
        column-gap: 0;
        /* no horizontal gap needed */
        row-gap: 2.25rem;
        /* tighter, touch-friendly vertical spacing */
        justify-items: center;
        /* cards fill the width */
        align-items: center;
        /* cards equalize height per row */
    }

    .dv2-service-card {
        max-width: 100%;
        /* 🔑 allow full-width cards on mobile */
        padding: 1.5rem;
        /* balanced mobile padding */
        gap: 1rem;
        height: 100%;
        /* support equal-height layout */
    }

    .dv2-service-card h3 {
        margin-bottom: 0.5rem;
        /* tighter heading gap on mobile */
    }

    .dv2-service-card p {
        max-width: 100%;
        /* override About constraints */
        width: 100%;
        display: block;
    }

    .dv2-service-card h3,
    .dv2-service-card p {
        text-align: center;
    }

    /* Center Services icons on mobile */
    .dv2-services-card-icon {
        display: block;
        text-align: center;
        margin: 0 auto 0.75rem;
    }

    .dv2-guidelines {
        padding: 1rem 1rem;
        margin-bottom: 5rem;
    }

    .case-studies-section {
        padding: 2rem 1rem;
        margin-bottom: 5rem;
    }

    .dv2-footer-links {
        flex-direction: column;
        gap: 0.75rem;
    }

    .dv2-footer-corp {
        flex-direction: column;
    }

    .dv2-footer-flag {
        height: 20px;
    }

    .dv2-footer-faith p {
        font-size: 7px;
    }

    .dv2-navbar-inner.dv2-nav-grid {
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
        padding: 0.6rem 0;
    }

    .dv2-nav-left,
    .dv2-nav-center {
        justify-content: center;
        text-align: center;
    }

    .dv2-nav-center p {
        font-size: var(--text-base);
        margin-top: 0.75rem;
    }

    .dv2-nav-identity {
        white-space: normal;
        /* allow wrapping on phones */
        line-height: 1.45;
        padding: 0 0.75rem;
        font-size: 0.92rem;
        line-height: 1.45;
    }

    .dv2-nav-logo {
        height: 36px;
        margin-bottom: .75rem;
    }

    .dv2-nav-left {
        margin-bottom: 0.4rem;
    }

    .hero-services-grid {
        display: grid;
        gap: 1.8rem;
        /* tweak as you like */
        grid-template-columns: 1fr;
        /* 1 col (small phones) */
    }

    .hero-content {
        padding-top: 0;
        padding-bottom: 0;
    }

    .hero-services-grid {
        margin-top: 2rem;
        /* reduce spacing between text + teasers */
    }

    .hero-service-card {
        padding: 1rem;
        /* reduce card height on short screens */
        min-height: unset;
        /* key fix: prevents vertical inflation */
    }

    .hero-stack {
        margin-bottom: 5rem;
    }

    .dv2-case-studies {
        margin-bottom: 5rem;
    }

    .hero-auth-actions {
        padding-top: 1.75rem;
    }

    .dv2-case-card {
        padding: 1.5rem;
    }

    .dv2-case-card.open {
        padding: 1.85rem;
    }


    .dv2-corp-text p {
        font-size: var(--text-base);
        line-height: 1.4;
    }

    .dv2-case-studies {
        padding: 0 1rem;
    }

    .dv2-case-title,
    .dv2-case-subtitle {
        text-align: center;
    }

    .dv2-case-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        width: 100%;
    }

    .dv2-case-card {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-height: 900px) {
    .hero-section-modern {
        padding-top: 3rem;
        padding-bottom: 2rem;
        gap: 2rem;
    }

    .hero-subtitle {
        margin-bottom: 2rem;
    }
}

/* Hover: only on devices that actually support hover */
@media (hover: hover) and (pointer: fine) {
    .dv2-service-card:hover {
        /* Subtle elevation — feels premium, not “active” */
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.06),
            0 6px 18px rgba(0, 0, 0, 0.08);

        /* Optional: 2px lift; comment out if you want shadow-only */
        transform: translateY(-2px);
    }
}


/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dv2-service-card {
        transition: box-shadow 160ms ease;
        /* drop transform transition */
    }

    .dv2-service-card:hover {
        transform: none;
        /* no lift for motion-sensitive users */
    }
}

/* Hover */
@media (hover: hover) and (pointer: fine) {

    .dv2-case-toggle:hover,
    .dv2-case-close:hover,
    .dv2-case-back:hover {
        opacity: 0.85;
    }
}

@media (hover: hover) and (pointer: fine) {
    .dv2-case-card:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06),
            0 10px 20px rgba(0, 0, 0, 0.08);
    }
}

@media (hover:hover) and (pointer:fine) {
    .dv2-feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    }
}

@media (hover:hover) and (pointer:fine) {
    .dv2-guideline-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {

    .dv2-case-card,
    .dv2-case-hidden {
        transition: none;
    }
}


/* ---------------------------
     MOBILE BEHAVIOR
     Stack logo above identity,
     center both to avoid cramping
     --------------------------- */