/* =========================================================
   PRATYUSH PORTFOLIO — RESPONSIVE.CSS
   Professional responsive overrides
   ---------------------------------------------------------
   IMPORTANT:
   1. Load this file AFTER style.css.
   2. Desktop / laptop >= 1100px is intentionally untouched.
   3. This file targets tablets, phones and landscape devices.
   4. Horizontal page overflow is prevented.
========================================================= */


/* =========================================================
   TABLET + MOBILE FOUNDATION
   <= 1099px
========================================================= */

@media (max-width: 1099px) {

    :root {
        --r-gutter: clamp(16px, 4vw, 32px);
        --r-header-h: 66px;
        --r-anchor: 92px;
        --r-section-y: clamp(52px, 6vw, 68px);
    }

    html {
        width: 100%;
        max-width: 100%;
        scroll-padding-top: var(--r-anchor);
        overflow-x: hidden;
    }

    body {
        width: 100%;
         max-width: 100%;
        overflow-x: hidden !important;
        overscroll-behavior-x: none;
    }

    body,
    main,
    section,
    header,
    footer {
        max-width: 100%;
    }

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

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    strong,
    a,
    button {
        overflow-wrap: break-word;
    }

    .container,
    .services-container,
    .skills-container,
    .process-container,
    .journey-container,
    .client-network-container,
    .contact-container {
        width: calc(100% - (var(--r-gutter) * 2)) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    /*
       Cancel desktop one-screen locks.
       Mobile/tablet should grow naturally vertically.
    */
    .viewport-fit-section,
    #skills.viewport-fit-section,
    #projects.viewport-fit-section,
    #testimonials.viewport-fit-section,
    #contact.viewport-fit-section {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #about,
    #services,
    #skills,
    #projects,
    #process,
    #journey,
    #testimonials,
    #contact {
        scroll-margin-top: var(--r-anchor) !important;
    }


    /* =====================================================
       NAVBAR
    ===================================================== */

    #header {
        top: 8px;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        border-radius: 18px;
        overflow: visible;
    }

    #header .container {
        width: calc(100% - 20px) !important;
    }

    .navbar {
        height: var(--r-header-h);
        gap: 12px;
    }

    .logo {
        min-width: 0;
        gap: 9px;
    }

    .logo-symbol {
        flex: 0 0 auto;
    }

    .logo-name {
        font-size: 0.94rem;
        white-space: nowrap;
    }

    .nav-links,
    .nav-cta {
        display: none !important;
    }

    .menu-button {
        display: block !important;
        flex: 0 0 44px;
        z-index: 1102;
    }

    .mobile-menu {
        position: fixed;
        top: 82px;
        left: 8px;
        right: 8px;
        z-index: 1099;

        display: flex !important;
        flex-direction: column;
        gap: 5px;

        width: auto;
        max-height: calc(100dvh - 96px);
        padding: 14px;
        overflow-y: auto;
        overflow-x: hidden;

        border: 1px solid rgba(168, 85, 247, 0.24);
        border-radius: 18px;

        background:
            linear-gradient(
                145deg,
                rgba(18, 16, 29, 0.98),
                rgba(7, 7, 13, 0.98)
            );

        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);

        box-shadow:
            0 24px 70px rgba(0, 0, 0, 0.52),
            0 0 35px rgba(112, 45, 255, 0.10);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.25s ease;
    }

    .mobile-menu.active,
    .mobile-menu.open,
    .mobile-menu.show,
    .mobile-menu[aria-hidden="false"] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .mobile-menu a {
        width: 100%;
        min-height: 47px;
        padding: 0 14px;

        display: flex;
        align-items: center;

        border: 1px solid transparent;
        border-radius: 12px;

        color: #b9b9c4;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .mobile-menu a:hover,
    .mobile-menu a.active {
        color: #fff;
        border-color: rgba(168, 85, 247, 0.24);
        background: rgba(139, 61, 255, 0.10);
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-section {
        min-height: auto !important;
        padding:
            calc(var(--r-header-h) + 62px)
            0
            82px !important;
    }

    .hero-container {
        min-height: auto !important;
        grid-template-columns: 1fr !important;
        gap: 46px !important;
    }

    .hero-content {
        width: min(100%, 760px);
        margin-inline: auto;
        text-align: center;
    }

    .availability-tag {
        margin-inline: auto;
    }

    .hero-title {
        font-size: clamp(4rem, 12vw, 6.8rem);
    }

    .hero-profession {
        min-height: 44px;
        justify-content: center;
        font-size: clamp(1.4rem, 4.8vw, 2.2rem);
    }

    .hero-description {
        max-width: 680px;
        margin-inline: auto;
        font-size: 0.97rem;
    }

    .hero-buttons,
    .hero-socials {
        justify-content: center;
    }

    .hero-visual {
        width: min(100%, 650px);
        min-height: 590px;
        margin-inline: auto;
    }

    .hero-portrait-wrapper {
        width: min(52vw, 420px);
    }

    .hero-circle-inner {
        width: min(54vw, 430px);
        height: min(54vw, 430px);
    }

    .hero-circle-outer {
        width: min(66vw, 515px);
        height: min(66vw, 515px);
    }

    .stat-projects {
        left: 2%;
    }

    .stat-experience,
    .stat-clients {
        right: 2%;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    #about.about-section,
    .about-section {
        padding: var(--r-section-y) 0 !important;
    }

    .about-container {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
        gap: clamp(36px, 6vw, 58px) !important;
    }

    .about-image-card {
        max-width: 430px;
    }

    .about-experience-card {
        left: -10px;
    }

    .about-title {
        font-size: clamp(2.2rem, 5vw, 3.45rem);
    }

    .about-description {
        font-size: 0.94rem;
    }


    /* =====================================================
       SERVICES
    ===================================================== */

    #services.services,
    .services {
        padding: var(--r-section-y) 0 !important;
    }

    .services-header {
        max-width: 760px;
        margin-bottom: 28px;
    }

    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px;
    }

    .service-card {
        min-width: 0;
        min-height: 300px;
        padding: 24px;
    }

    .service-tags {
        left: 24px;
        right: 24px;
        bottom: 22px;
    }


    /* =====================================================
       SKILLS
    ===================================================== */

    #skills.skills-section,
    .skills-section {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: var(--r-section-y) 0 !important;
        overflow: hidden !important;
    }

    #skills .skills-container,
    .skills-container {
        height: auto !important;
        min-height: 0 !important;

        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .skills-left {
        width: min(100%, 760px);
        margin-inline: auto;
        text-align: center;
    }

    .skills-heading {
        font-size: clamp(2.35rem, 6vw, 3.65rem) !important;
    }

    .skills-heading-line {
        margin-inline: auto;
    }

    .skills-description {
        max-width: 620px !important;
        margin-inline: auto;
    }

    .skills-stats {
        width: min(100%, 650px);
        margin-inline: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .skills-stat {
        min-width: 0;
        justify-content: center;
    }

    /*
       Responsive orbit keeps all icons on one clean outer ring,
       but scales the ring to viewport width.
    */
    #skills .skills-orbit,
    .skills-orbit {
        --orbit-size-r: min(72vw, 560px);
        --orbit-radius-r: calc(var(--orbit-size-r) / 2 - 32px);

        position: relative;
        width: var(--orbit-size-r) !important;
        height: var(--orbit-size-r) !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: 1 / 1;
        margin-inline: auto !important;
        overflow: visible !important;
    }

    #skills .orbit-ring-1,
    #skills .tracker-1 {
        width: 38% !important;
        height: 38% !important;
    }

    #skills .orbit-ring-2,
    #skills .tracker-2 {
        width: 58% !important;
        height: 58% !important;
    }

    #skills .orbit-ring-3,
    #skills .tracker-3 {
        width: 78% !important;
        height: 78% !important;
    }

    #skills .orbit-ring-4,
    #skills .tracker-4 {
        width: calc(100% - 18px) !important;
        height: calc(100% - 18px) !important;
    }

    #skills .tech-node {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;

        width: 72px;
        min-width: 72px;
        margin: 0 !important;

        transform:
            translate(-50%, -50%)
            rotate(var(--r-angle))
            translateX(var(--orbit-radius-r))
            rotate(calc(var(--r-angle) * -1)) !important;

        transform-origin: center center !important;
    }

    #skills .tech-html    { --r-angle: -90deg; }
    #skills .tech-js      { --r-angle: -54deg; }
    #skills .tech-next    { --r-angle: -18deg; }
    #skills .tech-c       { --r-angle: 18deg; }
    #skills .tech-python  { --r-angle: 54deg; }
    #skills .tech-mongodb { --r-angle: 90deg; }
    #skills .tech-nodejs  { --r-angle: 126deg; }
    #skills .tech-java    { --r-angle: 162deg; }
    #skills .tech-react   { --r-angle: 198deg; }
    #skills .tech-css     { --r-angle: 234deg; }

    #skills .tech-node:hover {
        transform:
            translate(-50%, -50%)
            rotate(var(--r-angle))
            translateX(var(--orbit-radius-r))
            rotate(calc(var(--r-angle) * -1))
            scale(1.04) !important;
    }

    #skills .tech-icon {
        width: 54px !important;
        height: 54px !important;
    }

    #skills .tech-icon img {
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        object-fit: contain;
    }

    #skills .tech-node > span {
        margin-top: 6px;
        font-size: 0.66rem;
        white-space: nowrap;
    }

    #skills .tech-details {
        width: min(100%, 720px);
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-inline: auto;
        padding: 28px;
    }


    /* =====================================================
       PROJECTS
    ===================================================== */

    #projects.projects-section,
    .projects-section {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: var(--r-section-y) 0 !important;
        overflow: hidden !important;
    }

    #projects > .container,
    .projects-section > .container {
        width: calc(100% - (var(--r-gutter) * 2)) !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
    }

    .projects-header {
        align-items: flex-start;
        margin-bottom: 26px;
    }

    .projects-title {
        font-size: clamp(2.35rem, 6vw, 3.7rem);
    }

    .project-showcase,
    #projects .project-showcase {
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 42px !important;
    }

    .project-preview-area,
    .project-info,
    #projects .project-preview-area,
    #projects .project-info {
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
    }

    .project-browser {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
    }

    .project-browser-screen {
        width: 100%;
        height: auto !important;
        min-height: 380px !important;
        aspect-ratio: 16 / 10;
        overflow: hidden;
    }

    .project-main-image {
        width: 100%;
        height: 100%;
        min-height: 0 !important;
        object-fit: contain !important;
        object-position: top center;
    }

    .project-info {
        max-width: 760px;
    }

    .project-big-number {
        top: -40px;
        right: 0;
        left: auto;
        font-size: clamp(6rem, 16vw, 9rem);
    }

    /*
       Project chooser intentionally scrolls INSIDE its own row.
       The page itself never scrolls horizontally.
    */
    #projects .project-navigation,
    .project-navigation {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: 0 !important;

        margin-top: 26px !important;
        padding: 6px 12px 12px !important;

        display: flex !important;
        gap: 10px !important;

        overflow-x: auto;
        overflow-y: hidden;

        box-sizing: border-box;
        scroll-padding-inline: 12px;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #projects .project-navigation::-webkit-scrollbar,
    .project-navigation::-webkit-scrollbar {
        display: none;
    }

    #projects .project-arrow,
    .project-arrow {
        flex: 0 0 46px;
        width: 46px !important;
        min-width: 46px !important;
        height: 86px !important;
        min-height: 86px !important;
        margin-inline: 2px;
        align-self: stretch;
    }

    #projects .project-selector,
    .project-selector {
        flex: 0 0 min(360px, 70vw);
        width: auto !important;
        min-width: min(360px, 70vw) !important;
        height: 86px !important;
        min-height: 86px !important;

        grid-template-columns: 84px minmax(0, 1fr) !important;
        gap: 11px !important;
        padding: 9px 11px !important;

        scroll-snap-align: center;
    }

    #projects .project-selector-image,
    .project-selector-image {
        width: 84px !important;
        height: 62px !important;
    }

    #projects .project-selector-content {
        min-width: 0;
    }

    #projects .project-selector-content strong,
    #projects .project-selector-category {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #projects .project-progress,
    .project-progress {
        width: min(100%, 720px) !important;
        height: 14px !important;
        min-height: 14px !important;
        margin: 8px auto 0 !important;
        display: flex !important;
        align-items: center;
    }

    #projects .project-progress-number,
    #projects .project-progress-total {
        display: none !important;
    }

    #projects .project-progress-track {
        width: 100%;
    }


    /* =====================================================
       MY PROCESS
    ===================================================== */

    #process.process-section,
    .process-section {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;

        padding: var(--r-section-y) 0 !important;

        display: block !important;
        overflow: hidden !important;
    }

    #process .process-container {
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
    }

    #process .process-header,
    .process-header {
        max-width: 820px;
        margin: 0 auto 22px !important;
    }

    #process .process-title,
    .process-title {
        font-size: clamp(2.35rem, 6vw, 3.7rem) !important;
    }

    #process .process-timeline,
    .process-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        margin-bottom: 28px !important;
    }

    #process .process-line,
    .process-line {
        display: none !important;
    }

    #process .process-step,
    .process-step {
        min-width: 0;
        min-height: 165px !important;
        padding: 18px !important;

        border: 1px solid rgba(168, 85, 247, 0.17);
        border-radius: 16px;

        background: rgba(255, 255, 255, 0.018);
    }

    #process .process-dashboard,
    .process-dashboard {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        grid-template-columns: 1fr !important;
        overflow: hidden !important;
    }

    #process .process-sidebar,
    .process-sidebar {
        height: auto !important;
        padding: 18px !important;

        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;

        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    #process .process-dashboard-label {
        grid-column: 1 / -1;
    }

    #process .process-nav-item {
        min-width: 0;
        min-height: 76px;
        padding: 10px 8px;

        grid-template-columns: 1fr !important;
        justify-items: center;

        text-align: center;
    }

    #process .process-nav-number {
        display: none;
    }

    #process .process-console,
    .process-console {
        height: auto !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    #process .process-console-body,
    .process-console-body {
        height: auto !important;
        min-height: 260px !important;
        max-height: none !important;
        padding: 28px 24px !important;
        overflow: hidden !important;
    }

    #process .process-terminal,
    .process-terminal {
        max-width: 100%;
        overflow-x: auto;
    }

    #process .process-current,
    .process-current {
        height: auto !important;
        min-height: 260px;
        overflow: visible !important;
    }

    #process .process-bottom,
    .process-bottom {
        margin-top: 20px !important;
    }


    /* =====================================================
       JOURNEY
    ===================================================== */

    #journey.journey-section,
    .journey-section {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;

        padding: var(--r-section-y) 0 !important;

        display: block !important;
        overflow: hidden !important;
    }

    #journey .journey-container {
        height: auto !important;
    }

    #journey .journey-header,
    .journey-header {
        max-width: 820px;
        margin: 0 auto 24px !important;
    }

    #journey .journey-title,
    .journey-title {
        font-size: clamp(2.35rem, 6vw, 3.65rem) !important;
    }

    #journey .journey-grid,
    .journey-grid {
        grid-template-columns: 1fr !important;
        gap: 38px !important;
    }

    #journey .journey-timeline {
        width: min(100%, 760px);
        max-width: 760px;
        margin-inline: auto;
    }

    #journey .journey-right {
        width: min(100%, 850px);
        max-width: 850px;
        margin-inline: auto;
    }

    #journey .journey-current-card {
        min-height: 0 !important;
    }

    #journey .journey-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }


    /* =====================================================
       CLIENT PROOF
    ===================================================== */

    #testimonials.client-network-section,
    .client-network-section {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;

        padding: var(--r-section-y) 0 !important;

        display: block !important;
        overflow: hidden !important;
    }

    #testimonials .client-network-container,
    .client-network-container {
        height: auto !important;
        display: block !important;
    }

    .client-network-header {
        margin-bottom: 24px !important;
    }

    .client-network-title {
        font-size: clamp(2.35rem, 6vw, 3.6rem) !important;
    }

    #testimonials .client-network,
    .client-network {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    /*
       Desktop network wires/hub are decorative.
       On smaller screens cards become a clean grid.
    */
    .client-line,
    .client-network-line,
    .client-hub,
    .client-node {
        display: none !important;
    }

    #testimonials .client-card,
    #testimonials .client-card-featured,
    .client-card,
    .client-card-featured {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 210px;

        padding: 20px !important;
        transform: none !important;
    }

    #testimonials .client-card-featured,
    .client-card-featured {
        grid-column: 1 / -1;
        min-height: 185px;
    }

    .client-stats {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }


    /* =====================================================
       CONTACT
    ===================================================== */

    #contact.contact-section,
    .contact-section {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;

        padding: var(--r-section-y) 0 34px !important;

        display: block !important;
        overflow: hidden !important;
    }

    #contact .contact-container {
        height: auto !important;
    }

    #contact .contact-shell,
    .contact-shell {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 28px !important;

        grid-template-columns: 1fr !important;
        gap: 34px !important;

        overflow: hidden !important;
    }

    #contact .contact-left,
    .contact-left {
        height: auto !important;
        min-height: 560px !important;
        padding: 4px !important;
    }

    .contact-orb-area {
        right: 5%;
        transform: scale(0.9);
        transform-origin: right bottom;
    }

    .contact-form-card {
        width: 100%;
        max-width: 760px;
        margin-inline: auto;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .site-footer {
        width: 100%;
        padding: 14px !important;
        overflow: hidden;
    }

    .footer-container {
        width: 100%;
        max-width: 100%;
    }

    .footer-top {
        padding: 22px 24px;
        gap: 24px;
    }

    .footer-bottom {
        padding: 18px 24px;
        grid-template-columns: 1fr !important;
        gap: 16px;
        text-align: center;
    }

    .footer-decoration {
        display: none !important;
    }

    .footer-center {
        min-width: 0 !important;
    }

    #back-to-top {
        right: 14px;
        bottom: 14px;
        width: 46px;
        height: 46px;
    }
}


/* =========================================================
   PORTRAIT TABLET
   <= 900px
========================================================= */

@media (max-width: 900px) {

    :root {
        --r-gutter: clamp(16px, 4vw, 28px);
    }

    .hero-title {
        font-size: clamp(3.8rem, 13vw, 6.1rem);
    }

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

    .hero-portrait-wrapper {
        width: min(60vw, 395px);
    }

    .hero-circle-inner {
        width: min(60vw, 395px);
        height: min(60vw, 395px);
    }

    .hero-circle-outer {
        width: min(72vw, 470px);
        height: min(72vw, 470px);
    }

    .about-container {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .about-visual,
    .about-image-card,
    .about-experience-card {
        display: none !important;
    }

    .about-content {
        width: 100%;
        max-width: 760px;
        margin-inline: auto;
    }

    #skills .skills-orbit,
    .skills-orbit {
        --orbit-size-r: min(78vw, 530px);
    }

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

    #contact .contact-left,
    .contact-left {
        min-height: 520px !important;
    }

    .footer-top {
        flex-direction: column;
        text-align: center;
    }

    .footer-brand,
    .footer-brand-content h3,
    .footer-roles,
    .footer-socials {
        justify-content: center;
    }
}


/* =========================================================
   LARGE PHONE / SMALL TABLET
   <= 700px
========================================================= */

@media (max-width: 700px) {

    :root {
        --r-gutter: 15px;
        --r-header-h: 62px;
        --r-anchor: 84px;
        --r-section-y: 48px;
    }

    #header {
        top: 7px;
        width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        border-radius: 16px;
    }

    #header .container {
        width: calc(100% - 16px) !important;
    }

    .navbar {
        height: var(--r-header-h);
    }

    .logo-name {
        font-size: 0.9rem;
    }

    .mobile-menu {
        top: 76px;
        left: 6px;
        right: 6px;
        max-height: calc(100dvh - 88px);
    }


    /* HERO */

    .hero-section {
        padding: 108px 0 72px !important;
    }

    .hero-container {
        gap: 38px !important;
    }

    .hero-title {
        font-size: clamp(3.35rem, 17vw, 5.5rem);
        line-height: 0.9;
    }

    .hero-profession {
        margin-top: 20px;
        min-height: 40px;
        font-size: clamp(1.28rem, 6vw, 1.8rem);
    }

    .hero-description {
        margin-top: 20px;
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .hero-buttons {
        width: 100%;
        margin-top: 26px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
        min-height: 50px;
        padding: 0 13px;
        font-size: 0.8rem;
    }

    .hero-socials {
        margin-top: 28px;
    }

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

    .hero-portrait-wrapper {
        width: min(70vw, 345px);
    }

    .hero-circle-inner {
        width: min(74vw, 360px);
        height: min(74vw, 360px);
    }

    .hero-circle-outer {
        width: min(88vw, 425px);
        height: min(88vw, 425px);
    }

    .hero-stat {
        min-width: 116px;
        padding: 10px 11px;
        gap: 8px;
    }

    .hero-stat strong {
        font-size: 1.12rem;
    }

    .hero-stat p {
        font-size: 0.55rem;
    }

    .stat-projects {
        top: 18%;
        left: 0;
    }

    .stat-experience {
        top: 9%;
        right: 0;
    }

    .stat-clients {
        right: 0;
        bottom: 12%;
    }

    .hero-floor {
        display: none;
    }


    /* ABOUT */

    .about-visual,
    .about-image-card,
    .about-experience-card {
        display: none !important;
    }

    .about-container {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .about-content {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    .about-title {
        font-size: clamp(2.1rem, 9vw, 3.05rem);
    }

    .about-description {
        font-size: 0.9rem;
    }

    .about-point {
        align-items: flex-start;
        font-size: 0.85rem;
    }

    .about-experience-card {
        left: 10px;
        bottom: 12px;
        width: 116px;
        padding: 14px;
    }


    /* SERVICES */

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

    .service-card {
        min-height: 285px;
    }


    /* SKILLS */

    .skills-stats {
        width: min(100%, 320px);
        grid-template-columns: 1fr;
        justify-items: center;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .skills-stat {
        width: min(100%, 240px);
        justify-content: flex-start;
        margin-left: auto;
        margin-right: auto;
    }

    #skills .skills-orbit,
    .skills-orbit {
        --orbit-size-r: min(92vw, 440px);
        --orbit-radius-r: calc(var(--orbit-size-r) / 2 - 29px);
    }

    #skills .tech-node {
        width: 62px;
        min-width: 62px;
    }

    #skills .tech-icon {
        width: 48px !important;
        height: 48px !important;
    }

    #skills .tech-icon img {
        width: 37px !important;
        height: 37px !important;
        max-width: 37px !important;
        max-height: 37px !important;
    }

    #skills .tech-node > span {
        margin-top: 5px;
        font-size: 0.59rem;
    }

    #skills .skills-core {
        width: 122px !important;
        height: 122px !important;
    }

    #skills .tech-details {
        padding: 22px 20px;
        border-radius: 18px;
    }

    #skills .detail-main-icon {
        width: 76px;
        height: 76px;
    }

    #skills .tech-details h3 {
        font-size: 1.4rem;
    }


    /* PROJECTS */

    .projects-header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 28px;
    }

    .projects-description {
        font-size: 0.86rem;
        line-height: 1.6;
    }

    .projects-view-all {
        width: 100%;
        justify-content: center;
    }

    .project-browser-screen {
        min-height: 300px !important;
        aspect-ratio: 16 / 11;
    }

    .project-info h3 {
        font-size: clamp(2rem, 9vw, 2.75rem);
    }

    .project-info-description {
        font-size: 0.86rem;
    }

    .project-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .project-case-button,
    .project-github-button {
        width: 100%;
        justify-content: center;
    }

    #projects .project-navigation {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #projects .project-arrow {
        flex: 0 0 42px;
        width: 42px !important;
        min-width: 42px !important;
        height: 78px !important;
        min-height: 78px !important;
        margin-inline: 2px;
    }

    #projects .project-selector {
        flex-basis: min(300px, 78vw);
        min-width: min(300px, 78vw) !important;
        height: 78px !important;
        min-height: 78px !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }

    #projects .project-selector-image {
        width: 72px !important;
        height: 54px !important;
    }


    /* PROCESS */

    #process .process-header {
        margin-bottom: 24px !important;
    }

    #process .process-title {
        font-size: clamp(2.1rem, 9vw, 3rem) !important;
    }

    #process .process-timeline {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #process .process-step {
        min-height: 0 !important;
        padding: 18px !important;
    }

    #process .process-step p {
        max-width: none;
    }

    #process .process-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #process .process-nav-item {
        min-height: 70px;
    }

    #process .process-console-body {
        min-height: 235px !important;
        padding: 22px 16px !important;
    }

    #process .process-terminal {
        font-size: 0.64rem;
    }

    #process .terminal-line {
        white-space: normal;
    }

    #process .process-current {
        min-height: 235px;
    }

    #process .process-bottom {
        flex-direction: column;
        gap: 12px;
    }

    #process .process-cta {
        width: 100%;
        justify-content: center;
    }


    /* JOURNEY */

    #journey .journey-title {
        font-size: clamp(2.1rem, 9vw, 3rem) !important;
    }

    #journey .journey-item {
        padding-left: 42px;
    }

    #journey .journey-line {
        left: 11px;
    }

    #journey .journey-node {
        left: 0;
    }

    #journey .journey-card-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    #journey .journey-card > p {
        margin-left: 0;
    }

    #journey .journey-current-main {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    #journey .journey-orb {
        width: 78px;
        height: 78px;
    }

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

    #journey .journey-status-bar {
        min-height: 52px;
        padding: 10px 14px;

        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
    }


    /* CLIENT PROOF */

    #testimonials .client-network,
    .client-network {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    #testimonials .client-card-featured,
    .client-card-featured {
        grid-column: auto;
    }

    #testimonials .client-card,
    #testimonials .client-card-featured,
    .client-card,
    .client-card-featured {
        min-height: 0;
        padding: 18px !important;
    }

    .client-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px;
    }


    /* CONTACT */

    #contact.contact-section {
        padding-bottom: 24px !important;
    }

    #contact .contact-shell,
    .contact-shell {
        padding: 22px 16px !important;
        gap: 28px !important;
        border-radius: 20px !important;
    }

    #contact .contact-left,
    .contact-left {
        min-height: auto !important;
        padding-bottom: 390px !important;
    }

    .contact-title {
        font-size: clamp(2.1rem, 9vw, 3rem);
    }

    .contact-details {
        width: 100%;
    }

    .contact-orb-area {
        right: 50% !important;
        bottom: 10px !important;
        width: 310px;
        transform: translateX(50%) scale(0.86) !important;
        transform-origin: center bottom;
    }

    .contact-form-card {
        padding: 20px 16px;
    }

    .contact-form-row {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

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

    .contact-status {
        grid-template-columns: 1fr !important;
        gap: 10px;
        padding: 12px;
    }

    .contact-status-divider {
        display: none;
    }

    .contact-status-item {
        justify-content: flex-start;
    }


    /* FOOTER */

    .site-footer {
        padding: 10px !important;
    }

    .footer-top {
        padding: 24px 16px;
    }

    .footer-brand {
        flex-direction: column;
    }

    .footer-brand-content h3,
    .footer-roles {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-socials a {
        width: 44px;
        height: 44px;
    }

    .footer-bottom {
        min-height: auto;
        padding: 18px 14px;
    }

    .footer-developed {
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* =========================================================
   PHONES
   <= 500px
========================================================= */

@media (max-width: 500px) {

    :root {
        --r-gutter: 13px;
        --r-section-y: 44px;
    }

    .logo-name {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero-section {
        padding-top: 102px !important;
    }

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

    .hero-eyebrow,
    .availability-tag {
        font-size: 0.64rem;
    }

    .hero-buttons {
        grid-template-columns: 1fr;
    }

    .hero-socials a {
        width: 43px;
        height: 43px;
    }

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

    .hero-portrait-wrapper {
        width: min(76vw, 310px);
    }

    .hero-stat {
        min-width: 103px;
        padding: 9px 10px;
    }

    .stat-icon {
        width: 31px;
        height: 31px;
    }

    .stat-icon svg {
        width: 15px;
        height: 15px;
    }

    .hero-stat strong {
        font-size: 1.03rem;
    }

    .hero-stat p {
        font-size: 0.52rem;
    }

    .about-experience-card {
        width: 108px;
    }

    .service-card {
        padding: 22px 20px;
    }

    .service-tags {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    #skills .skills-orbit,
    .skills-orbit {
        --orbit-size-r: min(94vw, 385px);
        --orbit-radius-r: calc(var(--orbit-size-r) / 2 - 26px);
    }

    #skills .tech-node {
        width: 54px;
        min-width: 54px;
    }

    #skills .tech-icon {
        width: 43px !important;
        height: 43px !important;
    }

    #skills .tech-icon img {
        width: 33px !important;
        height: 33px !important;
        max-width: 33px !important;
        max-height: 33px !important;
    }

    #skills .tech-node > span {
        font-size: 0.51rem;
    }

    #skills .skills-core {
        width: 104px !important;
        height: 104px !important;
    }

    #skills .detail-main-icon {
        width: 68px;
        height: 68px;
    }

    .project-browser-screen {
        min-height: 260px !important;
    }

    .project-actions {
        grid-template-columns: 1fr;
    }

    #projects .project-selector {
        flex-basis: 78vw;
        min-width: 78vw !important;
    }

    #process .process-sidebar {
        grid-template-columns: 1fr 1fr !important;
        padding: 14px !important;
    }

    #process .process-nav-item {
        min-height: 66px;
    }

    #journey .journey-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .client-stats {
        grid-template-columns: 1fr 1fr !important;
    }

    #contact .contact-left {
        padding-bottom: 345px !important;
    }

    .contact-orb-area {
        width: 285px;
        transform: translateX(50%) scale(0.78) !important;
    }

    .contact-field {
        min-height: 48px;
    }

    .contact-textarea {
        min-height: 118px;
    }

    #back-to-top {
        width: 43px;
        height: 43px;
        right: 12px;
        bottom: 12px;
    }
}


/* =========================================================
   SMALL PHONES
   <= 390px
========================================================= */

@media (max-width: 390px) {

    :root {
        --r-gutter: 11px;
        --r-section-y: 40px;
    }

    #header {
        width: calc(100% - 10px) !important;
        max-width: calc(100% - 10px) !important;
    }

    .logo-name {
        font-size: 0.82rem;
    }

    .menu-button {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .hero-title {
        font-size: clamp(2.85rem, 18.5vw, 3.95rem);
    }

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

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

    .hero-portrait-wrapper {
        width: min(78vw, 282px);
    }

    .hero-circle-inner {
        width: min(80vw, 295px);
        height: min(80vw, 295px);
    }

    .hero-circle-outer {
        width: min(94vw, 345px);
        height: min(94vw, 345px);
    }

    .hero-stat {
        min-width: 94px;
        padding: 8px;
    }

    .hero-stat p {
        max-width: 62px;
    }

    .about-title,
    .services-title,
    .skills-heading,
    .projects-title,
    #process .process-title,
    #journey .journey-title,
    .client-network-title,
    .contact-title {
        font-size: clamp(1.95rem, 10vw, 2.65rem) !important;
    }

    .service-card {
        min-height: 295px;
    }

    #skills .skills-orbit,
    .skills-orbit {
        --orbit-size-r: min(96vw, 345px);
        --orbit-radius-r: calc(var(--orbit-size-r) / 2 - 24px);
    }

    #skills .tech-node {
        width: 49px;
        min-width: 49px;
    }

    #skills .tech-icon {
        width: 39px !important;
        height: 39px !important;
    }

    #skills .tech-icon img {
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }

    #skills .tech-node > span {
        font-size: 0.47rem;
    }

    #skills .skills-core {
        width: 94px !important;
        height: 94px !important;
    }

    .project-browser-screen {
        min-height: 230px !important;
    }

    #projects .project-navigation {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #projects .project-arrow {
        flex: 0 0 38px;
        width: 38px !important;
        min-width: 38px !important;
        margin-inline: 2px;
    }

    #projects .project-selector {
        flex-basis: 80vw;
        min-width: 80vw !important;
        grid-template-columns: 66px minmax(0, 1fr) !important;
        padding: 8px !important;
    }

    #projects .project-selector-image {
        width: 66px !important;
        height: 52px !important;
    }

    #process .process-sidebar {
        grid-template-columns: 1fr !important;
    }

    #process .process-nav-item {
        min-height: 58px;
        grid-template-columns: 34px 1fr !important;
        justify-items: start;
        text-align: left;
    }

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

    .client-stats {
        grid-template-columns: 1fr !important;
    }

    #contact .contact-left {
        padding-bottom: 315px !important;
    }

    .contact-orb-area {
        width: 260px;
        transform: translateX(50%) scale(0.72) !important;
    }

    .footer-roles {
        gap: 6px;
    }

    .developed-text {
        font-size: 0.82rem;
    }
}


/* =========================================================
   SHORT LANDSCAPE DEVICES
   <= 1099px and <= 600px height
========================================================= */

@media (max-width: 1099px) and (max-height: 600px) and (orientation: landscape) {

    :root {
        --r-header-h: 56px;
        --r-anchor: 76px;
        --r-section-y: 46px;
    }

    #header {
        top: 5px;
    }

    .navbar {
        height: var(--r-header-h);
    }

    .mobile-menu {
        top: 67px;
        max-height: calc(100dvh - 75px);
    }

    .hero-section {
        padding-top: 88px !important;
    }

    .hero-container {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr) !important;
        align-items: center;
        gap: 24px !important;
    }

    .hero-content {
        text-align: left;
    }

    .availability-tag {
        margin-inline: 0;
    }

    .hero-profession,
    .hero-buttons,
    .hero-socials {
        justify-content: flex-start;
    }

    .hero-title {
        font-size: clamp(3rem, 9vw, 4.8rem);
    }

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

    .hero-portrait-wrapper {
        width: min(31vw, 290px);
    }

    .hero-stat {
        transform: scale(0.84);
    }
}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (max-width: 1099px) and (hover: none),
       (max-width: 1099px) and (pointer: coarse) {

    .service-card:hover,
    .project-selector:hover,
    .project-arrow:hover,
    .about-button:hover,
    .primary-button:hover,
    .secondary-button:hover {
        transform: none !important;
    }
}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   FINAL MOBILE / TABLET PRODUCTION OVERRIDES
   ========================================================= */

/* Remove the 10+ / 10+ / 2+ skills stats block everywhere */
.skills-stats {
    display: none !important;
}


/* =========================================================
   TABLET + MOBILE — CONSISTENT SECTION SPACING
   ========================================================= */

@media (max-width: 900px) {

    #about,
    #services,
    #skills,
    #projects,
    #process,
    #journey,
    #testimonials,
    #contact {
        padding-top: 46px !important;
        padding-bottom: 46px !important;
    }

    #about .container,
    #services .container,
    #skills .container,
    #projects .container,
    #process .container,
    #journey .container,
    #testimonials .container,
    #contact .container,
    .about-container,
    .services-container,
    .skills-container,
    .process-container,
    .journey-container,
    .client-network-container,
    .contact-container {
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* About image must not appear on tablet/mobile */
    .about-visual,
    .about-image-card,
    .about-experience-card {
        display: none !important;
    }

    .about-container {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .about-content {
        width: 100% !important;
        max-width: 760px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Keep main content buttons visible and inside the viewport */
    .primary-button,
    .secondary-button,
    .about-button,
    .projects-view-all,
    .project-case-button,
    .project-github-button,
    .process-cta {
        max-width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }
}


/* =========================================================
   MOBILE — CLEAN, EVEN PAGE GAPS
   ========================================================= */

@media (max-width: 700px) {

    #about,
    #services,
    #skills,
    #projects,
    #process,
    #journey,
    #testimonials,
    #contact {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    #about .container,
    #services .container,
    #skills .container,
    #projects .container,
    #process .container,
    #journey .container,
    #testimonials .container,
    #contact .container,
    .about-container,
    .services-container,
    .skills-container,
    .process-container,
    .journey-container,
    .client-network-container,
    .contact-container {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .services-header,
    .projects-header,
    .process-header,
    .journey-header,
    .client-network-header {
        margin-bottom: 22px !important;
    }

    .skills-container,
    .project-showcase,
    .journey-grid,
    .contact-shell {
        gap: 22px !important;
    }

    /* Keep normal action buttons visible */
    .primary-button,
    .secondary-button,
    .about-button,
    .projects-view-all,
    .project-case-button,
    .project-github-button,
    .process-cta {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    /* =====================================================
       PROJECTS — MOBILE STACKED CARD LAYOUT
       No arrows, no sideways carousel.
       Three projects shown one below another.
       ===================================================== */

    #projects,
    .projects-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #projects > .container,
    #projects .container,
    .projects-section > .container,
    .projects-section .container,
    .projects-container {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #projects .projects-header,
    .projects-section .projects-header,
    #projects .section-header,
    .projects-section .section-header {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        align-items: center !important;
        transform: none !important;
    }

    #projects .project-showcase,
    .projects-section .project-showcase,
    .project-showcase {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    #projects .project-preview-area,
    #projects .project-info,
    #projects .project-browser,
    #projects .project-display,
    .project-preview-area,
    .project-info,
    .project-browser,
    .project-display {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #projects .project-browser-screen,
    .project-browser-screen {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 10 !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    #projects .project-main-image,
    .project-main-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: top center !important;
        display: block !important;
    }

    /* Remove carousel controls completely on mobile */
    #projects .project-arrow,
    #projects .project-prev,
    #projects .project-next,
    .project-arrow,
    .project-prev,
    .project-next {
        display: none !important;
    }

    #projects .project-progress,
    .project-progress {
        display: none !important;
    }

    /* Turn the project selector row into 3 normal vertical cards */
    #projects .project-navigation,
    .project-navigation {
        width: 100% !important;
        max-width: 100% !important;
        margin: 24px auto 0 !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;

        overflow: visible !important;
        scroll-snap-type: none !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    #projects .project-selector,
    .project-selector {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 12px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;

        border-radius: 16px !important;
        overflow: hidden !important;
        scroll-snap-align: none !important;
        box-sizing: border-box !important;
    }

    /* Full website preview visible in every project box */
    #projects .project-selector-image,
    .project-selector-image {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;

        border-radius: 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #projects .project-selector-image img,
    .project-selector-image img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;

        object-fit: contain !important;
        object-position: top center !important;

        display: block !important;
    }

    #projects .project-selector-content,
    .project-selector-content {
        width: 100% !important;
        min-width: 0 !important;
        padding: 2px 2px 4px !important;
        text-align: left !important;
    }

    #projects .project-selector-number,
    .project-selector-number {
        display: block !important;
        margin-bottom: 4px !important;
    }

    #projects .project-selector-content strong,
    .project-selector-content strong,
    #projects .project-selector-category,
    .project-selector-category {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.35 !important;
    }


    /* =====================================================
       PROCESS / JOURNEY / CONTACT — avoid clipping
       ===================================================== */

    #process .process-dashboard,
    #process .process-console,
    #process .process-current,
    #journey .journey-current-card,
    #contact .contact-shell,
    .process-dashboard,
    .process-console,
    .process-current,
    .journey-current-card,
    .contact-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #process .process-console-body {
        overflow-x: auto !important;
    }

    #contact .contact-form-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


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

@media (max-width: 500px) {

    #about,
    #services,
    #skills,
    #projects,
    #process,
    #journey,
    #testimonials,
    #contact {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    #projects > .container,
    #projects .container,
    .projects-section > .container,
    .projects-section .container,
    .projects-container {
        width: calc(100% - 20px) !important;
    }

    #projects .project-selector,
    .project-selector {
        padding: 10px !important;
        gap: 9px !important;
        border-radius: 14px !important;
    }

    #projects .project-selector-image,
    .project-selector-image {
        border-radius: 10px !important;
    }

    .hero-buttons,
    .project-actions {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    #about,
    #services,
    #skills,
    #projects,
    #process,
    #journey,
    #testimonials,
    #contact {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    #projects > .container,
    #projects .container,
    .projects-section > .container,
    .projects-section .container,
    .projects-container {
        width: calc(100% - 16px) !important;
    }

    #projects .project-navigation,
    .project-navigation {
        gap: 12px !important;
    }

    #projects .project-selector,
    .project-selector {
        padding: 9px !important;
    }
}