.projects-page .projects-header .header-content {
    flex-wrap: wrap;
    gap: 10px 18px;
}

.projects-page .projects-header .primary-navigation {
    display: flex;
    order: 2;
    width: 100%;
    min-width: 0;
    gap: 16px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.projects-page .projects-header .primary-navigation a {
    flex: 0 0 auto;
    color: var(--web-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.projects-page .projects-header .primary-navigation a[aria-current="page"] { color: var(--web-text); }

.projects-hero {
    padding-top: 68px;
    padding-bottom: 58px;
}

.projects-hero-content { max-width: 790px; min-width: 0; }

.projects-hero h1 {
    max-width: 720px;
    margin-bottom: 20px;
    font-size: clamp(2.45rem, 7vw, 4.65rem);
    letter-spacing: -0.06em;
    line-height: 1.01;
}

.projects-hero p:not(.eyebrow) {
    width: 100%;
    max-width: 660px;
    margin-bottom: 0;
    color: var(--web-muted);
    font-size: clamp(1rem, 2vw, 1.12rem);
    line-height: 1.68;
    overflow-wrap: anywhere;
}

.projects-category { padding-top: 56px; }
.projects-products { background: linear-gradient(145deg, rgba(91, 140, 255, 0.05), transparent 60%); }
.projects-demos { background: linear-gradient(145deg, rgba(155, 108, 255, 0.065), transparent 62%); }

.projects-category-heading {
    max-width: 670px;
    min-width: 0;
    margin-bottom: clamp(34px, 5vw, 60px);
}

.projects-category-heading h2 {
    margin-bottom: 0;
    font-size: clamp(1.7rem, 4vw, 2.65rem);
    letter-spacing: -0.05em;
    line-height: 1.08;
}

.project-feature {
    display: grid;
    gap: clamp(24px, 5vw, 64px);
    align-items: center;
    padding: clamp(32px, 6vw, 76px) 0;
    border-top: 1px solid var(--web-border);
}

.project-feature:last-child { border-bottom: 1px solid var(--web-border); }

.project-feature-content { max-width: 480px; min-width: 0; }

.project-meta {
    margin: 0 0 12px;
    color: var(--web-lilac);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.4;
}

.project-feature h3 {
    margin-bottom: 14px;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    letter-spacing: -0.055em;
    line-height: 1.02;
}

.project-feature-content > p:not(.project-meta) {
    margin-bottom: 0;
    color: var(--web-muted);
    font-size: clamp(1rem, 1.8vw, 1.1rem);
    line-height: 1.65;
}

.project-feature-content .project-disclaimer {
    margin-top: 14px;
    color: var(--web-text);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
}

.project-link {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    margin-top: 24px;
}

.project-visual {
    display: block;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--web-border);
    border-radius: 20px;
    background: var(--web-card-strong);
    box-shadow: var(--web-shadow);
}

.project-visual img {
    display: block;
    width: 100%;
    height: auto;
}

.project-visual[href] { transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }

.projects-final { padding-top: 46px; }

.projects-final-card {
    max-width: 900px;
    text-align: left;
}

.projects-final-card h2 { max-width: 700px; }
.projects-final-card > p { line-height: 1.65; }

.projects-footer { margin-top: 0; }

@media (min-width: 720px) {
    .project-feature {
        grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    }

    .project-feature-visual-left .project-visual { grid-column: 1; grid-row: 1; }
    .project-feature-visual-left .project-feature-content { grid-column: 2; grid-row: 1; justify-self: end; }
}

@media (min-width: 1024px) {
    .projects-page .projects-header .header-content { flex-wrap: nowrap; }
    .projects-page .projects-header .primary-navigation { order: 0; width: auto; margin-inline: auto 0; padding-bottom: 0; overflow: visible; }
    .project-feature { min-height: 440px; }
}

@media (max-width: 719px) {
    .projects-page .projects-header .header-content { display: block; }
    .projects-page .projects-header .brand { margin-bottom: 10px; }
    .projects-page .projects-header .primary-navigation {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px 10px;
        width: 100%;
        padding-bottom: 0;
        overflow: visible;
    }
    .projects-page .projects-header .primary-navigation a {
        min-width: 0;
        font-size: 0.72rem;
        line-height: 1.25;
        white-space: normal;
    }
    .projects-hero { padding-top: 50px; padding-bottom: 48px; }
    .projects-hero h1 { font-size: clamp(2.25rem, 10.2vw, 2.8rem); }
    .projects-hero p:not(.eyebrow) { max-width: 100%; }
    .projects-category { padding-top: 48px; }
    .projects-category-heading { margin-bottom: 30px; }
    .project-feature { gap: 23px; padding: 32px 0 40px; }
    .project-visual { order: -1; border-radius: 16px; }
    .project-feature h3 { font-size: clamp(1.95rem, 9vw, 2.55rem); }
    .project-link { min-height: 46px; margin-top: 20px; }
    .projects-final { padding-top: 30px; }
    .projects-final-card { padding: 26px 20px; }
    .projects-final-card .button { width: 100%; }
}

@media (hover: hover) {
    .project-visual[href]:hover {
        border-color: var(--web-border-active);
        box-shadow: 0 18px 42px rgba(91, 140, 255, 0.12);
        transform: translateY(-2px);
    }
}