/* ==========================================================
   THE 57 TABS METHOD
   RESPONSIVE / MOBILE
   Desktop styles remain untouched.
========================================================== */


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .container {
        width: min(92%, 900px);
    }

    .nav-links {
        gap: 24px;
    }

    .navbar {
        height: 82px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 60px;
        min-height: auto;
    }

    .hero-text {
        max-width: 700px;
    }

    .hero-title {
        font-size: clamp(4.5rem, 10vw, 6.5rem);
    }

    .hero-visual {
        min-height: 500px;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .services-preview .section-heading {
        align-items: flex-start;
    }

    .project-card {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 50px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

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

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

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------------------
       GLOBAL
    ------------------------------------------------------ */

    body {
        overflow-x: hidden;
    }

    .container {
        width: calc(100% - 36px);
        max-width: none;
    }

    section {
        padding: 70px 0;
    }

    .section-heading {
        margin-bottom: 45px;
    }

    .section-title {
        font-size: clamp(2.8rem, 11vw, 4rem);
        line-height: .98;
        letter-spacing: -1.5px;
    }


    /* ------------------------------------------------------
       HEADER
    ------------------------------------------------------ */

    .header {
        position: sticky;
        top: 0;
    }

    .navbar {
    height: auto;
    min-height: 76px;
    padding: 12px 0;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.logo {
    font-size: 1.15rem;
    line-height: 1.05;
    max-width: 105px;
    flex-shrink: 0;
}

.nav-links {
    gap: 7px;
    flex: 1;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 0;
}

.nav-links a {
    font-size: .62rem;
    white-space: nowrap;
}

.nav-links a::after {
    bottom: -5px;
}

.navbar > .btn-primary {
    display: inline-flex;
    flex-shrink: 0;
    padding: 9px 11px;
    font-size: .58rem;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
    width: 58px;
    min-height: 58px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    }


    /* ------------------------------------------------------
       HERO
    ------------------------------------------------------ */

    .hero {
        padding: 65px 0 30px;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        gap: 55px;
        min-height: auto;
        width: 100%;
    }

    .hero-text {
        width: 100%;
    }

    .section-eyebrow {
        gap: 12px;
        margin-bottom: 22px;
        flex-wrap: wrap;
    }

    .chapter {
        font-size: .85rem;
    }

    .eyebrow-text {
        font-size: .62rem;
        letter-spacing: 3px;
    }

    .hero-title {
        font-size: clamp(4rem, 17vw, 6rem);
        line-height: .88;
        letter-spacing: -2.5px;
        margin: 24px 0 30px;
        max-width: 100%;
    }

    .hero-description {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 32px;
    }

    .hero-buttons {
        gap: 12px;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        padding: 14px 24px;
        font-size: .9rem;
    }


    /* ------------------------------------------------------
       HERO VISUAL / FLOATING TABS
    ------------------------------------------------------ */

    .hero-visual {
        width: 100%;
        min-height: 470px;
        overflow: hidden;
    }

    .floating-tabs {
        position: absolute;
        inset: 0;
        width: 100%;
    }

    .floating-tab {
        padding: 9px 13px;
        font-size: .65rem;
        border-radius: 11px 11px 0 0;
        gap: 7px;
        max-width: 190px;
    }

    .floating-tab::before {
        width: 6px;
        height: 6px;
    }

    /* Rearrange tabs specifically for a phone */

    .tab-1 {
        top: 0;
        left: 4%;
    }

    .tab-2 {
        top: 48px;
        left: 36%;
    }

    .tab-3 {
        top: 96px;
        left: 56%;
    }

    .tab-4 {
        top: 145px;
        left: 13%;
    }

    .tab-5 {
        top: 195px;
        left: 43%;
    }

    .tab-6 {
        top: 245px;
        left: 61%;
    }

    .tab-7 {
        top: 295px;
        left: 24%;
    }

    .tab-8 {
        top: 345px;
        left: 55%;
    }

    .tab-9 {
        top: 395px;
        left: 7%;
    }

    .tab-10 {
        top: 445px;
        left: 35%;
    }

    .tab-11,
    .tab-12 {
        display: none;
    }

    .browser {
        display: none;
    }


    /* ------------------------------------------------------
       PHILOSOPHY
    ------------------------------------------------------ */

    .philosophy {
        margin-top: 20px;
    }

    .philosophy .section-title {
        font-size: clamp(2.8rem, 10vw, 4rem);
        max-width: 100%;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .philosophy-text {
        max-width: 100%;
    }

    .philosophy-text p {
        margin-bottom: 20px;
    }

    .philosophy-card {
        padding: 32px 28px;
        border-radius: 22px;
    }

    .philosophy-card h3 {
        font-size: 2rem;
    }


    /* ------------------------------------------------------
       SERVICES
    ------------------------------------------------------ */

    .services-preview {
        margin-top: 30px;
    }

    .services-preview .section-heading {
        display: block;
        margin-bottom: 40px;
    }

    .pricing-link {
        display: inline-block;
        margin-top: 20px;
    }

    .services-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .service-card {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .service-number {
        margin-bottom: 25px;
    }

    .service-icon {
        display: none;
    }

    .service-card h3 {
        font-size: 1.8rem;
        line-height: 1;
        margin-bottom: 14px;
    }

    .service-card p {
        font-size: .9rem;
        line-height: 1.7;
    }


    /* ------------------------------------------------------
       FEATURED PROJECT
    ------------------------------------------------------ */

    .featured-project {
        margin-top: 30px;
    }

    .project-card {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 28px;
        border-radius: 24px;
    }

    .project-title {
        font-size: clamp(2.8rem, 11vw, 4rem);
    }

    .project-description {
        margin-bottom: 30px;
    }

    .project-stats {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 30px;
    }

    .project-preview {
        height: 360px;
    }


    /* ------------------------------------------------------
       PROCESS
    ------------------------------------------------------ */

    .process {
        margin-top: 30px;
    }

    .process-list {
        margin-top: 45px;
    }

    .process-list li {
        grid-template-columns: 50px 1fr;
        gap: 18px;
        margin-bottom: 35px;
    }

    .process-number {
        font-size: 1.5rem;
    }

    .process-list h3 {
        font-size: 2rem;
    }

    .process-list div {
        padding-bottom: 30px;
    }


    /* ------------------------------------------------------
       ABOUT
    ------------------------------------------------------ */

    .about-preview {
        margin-top: 30px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-image {
        width: 100%;
    }

    .about-content p {
        margin: 25px 0 30px;
    }


    /* ------------------------------------------------------
       FINAL CTA
    ------------------------------------------------------ */

    .final-cta {
        margin-top: 30px;
    }

    .cta-wrapper {
        max-width: 100%;
    }

    .cta-wrapper h2 {
        font-size: clamp(3rem, 13vw, 5rem);
        line-height: .95;
        margin: 25px auto;
    }

    .cta-wrapper p {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 32px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

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

    .signature {
        margin-top: 50px;
    }

    .signature img {
        width: 210px;
    }


    /* ------------------------------------------------------
       FOOTER
    ------------------------------------------------------ */

    .footer {
        margin-top: 70px;
        padding: 60px 0 30px;
    }

    .footer-nav {
        gap: 18px 24px;
    }

    .footer-bottom p {
        font-size: .78rem;
        line-height: 1.6;
    }


    /* ------------------------------------------------------
       ABOUT / STORY
    ------------------------------------------------------ */

    .story-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-top: 30px;
    }

    .story-content {
        max-width: 100%;
        order: 1;
    }

    .story-image {
        order: 2;
    }


    /* ------------------------------------------------------
       SERVICES / PACKAGES
    ------------------------------------------------------ */

    .package-row {
        grid-template-columns: 45px 1fr 25px;
        gap: 15px;
        padding: 30px 0;
    }

    .package-description {
        grid-column: 2 / -1;
    }

    .package-title h3 {
        font-size: 2rem;
    }

    .package-row i {
        font-size: 1rem;
    }

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

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

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


    /* ------------------------------------------------------
       COMPARISON TABLE
    ------------------------------------------------------ */

    .comparison-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* ------------------------------------------------------
       INVESTMENT
    ------------------------------------------------------ */

    .investment-card {
        padding: 36px 25px;
    }

    .investment-card h3 {
        font-size: 2.8rem;
    }

    .investment-includes {
        grid-template-columns: 1fr;
        gap: 4px;
    }


    /* ------------------------------------------------------
       PORTFOLIO
    ------------------------------------------------------ */

    .portfolio-project {
        width: calc(100% - 36px);
        margin-bottom: 90px;
    }

    .portfolio-details {
        grid-template-columns: 1fr;
    }

    .portfolio-preview {
        border-radius: 14px;
    }

    .portfolio-placeholder {
        min-height: 350px;
        padding: 40px 25px;
    }

    .placeholder-content h2 {
        font-size: 2.5rem;
    }


    /* ------------------------------------------------------
       WEBSITE SHOWCASE
    ------------------------------------------------------ */

    .website-showcase {
        padding: 80px 0;
    }

    .website-gallery {
        gap: 18px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .website-gallery-item {
        flex: 0 0 82vw;
    }


    /* ------------------------------------------------------
       LEGAL
    ------------------------------------------------------ */

    .legal-page {
        padding: 60px 0;
    }

    .legal-section {
        padding: 60px 0;
        margin-bottom: 0;
    }
}

/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 480px) {

    .container {
        width: calc(100% - 28px);
    }

    section {
        padding: 60px 0;
    }

    /* Header */

   .navbar {
    min-height: 70px;
    gap: 6px;
    padding: 10px 0;
}

.logo {
    font-size: .9rem;
    max-width: 72px;
}

.nav-links {
    gap: 7px;
}

.nav-links a {
    font-size: .58rem;
}

.navbar > .btn-primary {
    width: 54px;
    min-height: 54px;
    padding: 7px 8px;
    font-size: .55rem;
}


    /* Hero */

    .hero {
        padding-top: 50px;
    }

    .hero-title {
        font-size: clamp(3.5rem, 18vw, 5rem);
    }

    .hero-description {
        font-size: .95rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons a {
        width: 100%;
    }


    /* Hero visual */

    .hero-visual {
        min-height: 430px;
    }

    .floating-tab {
        max-width: 165px;
        padding: 8px 11px;
        font-size: .58rem;
    }

    .tab-11,
    .tab-12 {
        display: none;
    }


    /* Services */

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

    .service-card {
        padding: 28px 24px;
    }


    /* Philosophy */

    .philosophy-card {
        padding: 28px 24px;
    }


    /* Project */

    .project-card {
        padding: 24px;
    }

    .project-preview {
        height: 300px;
    }


    /* Process */

    .process-list li {
        grid-template-columns: 40px 1fr;
        gap: 14px;
    }


   /* Footer */

.footer-nav {
    flex-direction: column;
    gap: 14px;
}

}