@charset "UTF-8";
/* Responsive overrides for pages loading branding-project.css, design-projects.css, and uiux.css. Load this LAST. */

@media (max-width:900px) {
.project-story {
        grid-template-columns:1fr;
        gap:40px;
        margin-bottom:75px;
    }
.story-image-left .story-image,
.story-image-left .story-text,
.story-text-left .story-text,
.story-text-left .story-image {
        order:initial;
    }
.story-text {
        text-align:center;
    }
.story-text h2 {
        font-size:30px;
    }
.story-text p {
        font-size:18px;
    }
.story-image {
        max-width:800px;
        margin:0 auto;
    }
.project-gallery-heading {
        margin:0 auto 50px;
    }
.project-gallery-heading h2 {
        font-size:30px;
    }
}

@media (max-width:768px) {
.project-gallery-row {
        grid-template-columns:1fr;
        gap:45px;
    }
}

@media (max-width:768px) {
.interactive-prototype .enter-button + p {
        transform:none;
    }
}

@media (min-width: 760px) {
.chrono-page .carousel-track {
        grid-auto-columns: calc((100% - 36px) / 3);
    }
.chrono-page .carousel-slide img {
        height: 220px;
    }
}

@media (max-width: 760px) {
.chrono-page .case-section {
        width: 90%;
        margin: 58px auto;
    }
.chrono-page .overview-grid,
.chrono-page .approach-grid,
.chrono-page .creative-grid,
.chrono-page .ux-list {
        grid-template-columns: 1fr;
    }
.chrono-page .approach-image {
        height: 190px;
    }
.chrono-page .creative-visual img {
        height: 180px;
    }
.chrono-page .carousel-track {
        grid-auto-columns: 88%;
    }
.chrono-page .carousel-slide img {
        height: 230px;
    }
.chrono-page .overview-statement {
        padding: 20px;
    }
}

@media (max-width: 480px) {
.chrono-page .creative-visuals {
        grid-template-columns: 1fr;
    }
.chrono-page .carousel-toolbar {
        align-items: flex-end;
    }
.chrono-page .carousel-slide img {
        height: 200px;
    }
.chrono-page .ux-item {
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
.chrono-page .case-heading::after,
.chrono-page .carousel-track,
.chrono-page .prototype-preview img,
.chrono-page .prototype-overlay {
        transition: none;
        scroll-behavior: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
.clean-organic *,
.clean-organic *::before,
.clean-organic *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media (max-width: 800px) {
.clean-organic .clean-challenge-grid {
        grid-template-columns: 1fr;
    }
.clean-organic .clean-process-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
.clean-organic .clean-process-card:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 12px);
        justify-self: center;
    }
.clean-organic .clean-section {
        width: min(92%, 680px);
    }
}

@media (max-width: 800px) {
.lotus-organic .lotus-challenge-grid {
        grid-template-columns: 1fr;
    }
.lotus-organic .lotus-section {
        padding: 24px;
        border-radius: 22px;
    }
.lotus-organic .lotus-feature-image {
        margin-bottom: 32px;
    }
.lotus-organic .lotus-prototype .prototype-image-link {
        width: min(45%, 260px);
    }
}

@media (max-width: 560px) {
.lotus-organic .lotus-section,
.lotus-organic .lotus-overview,
.lotus-organic .lotus-direction,
.lotus-organic .lotus-process {
        padding: 18px;
        border-radius: 18px;
    }
.lotus-organic .lotus-statement {
        padding: 22px;
        border-radius: 18px;
    }
.lotus-organic .lotus-prototype .prototype-image-link {
        width: 70%;
        min-width: 0;
        max-width: 260px;
        border-width: 3px;
        border-radius: 14px;
    }
.lotus-organic .lotus-prototype-overlay {
        min-height: 44px;
        padding: 10px;
        font-size:1.125rem;
        opacity: 1;
    }
.lotus-organic .lotus-prototype-button {
        max-width: 100%;
        padding: 14px 28px;
    }
.lotus-organic .lotus-feature-image {
        padding: 10px;
        border-radius: 16px;
    }
.lotus-organic .lotus-feature-image img {
        border-radius: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
.lotus-organic *,
.lotus-organic *::before,
.lotus-organic *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
    }
}

@media (max-width: 800px) {
.lotus-organic .lotus-direction .story-image,
.lotus-organic .lotus-process .story-image {
        max-width: 480px;
    }
.lotus-organic .lotus-feature-image {
        max-width: 560px;
    }
}

@media (max-width: 560px) {
.lotus-organic .lotus-prototype {
        padding: 24px 18px;
        border-radius: 20px;
    }
.lotus-organic .lotus-prototype .prototype-image-link {
        width: min(75%, 240px);
    }
.lotus-organic .lotus-prototype .lotus-prototype-button {
        padding: 13px 18px;
        font-size:1.125rem;
    }
.lotus-organic .lotus-direction .story-image,
.lotus-organic .lotus-process .story-image {
        max-width: 100%;
    }
.lotus-organic .lotus-feature-image {
        max-width: 100%;
    }
}

@media (max-width: 560px) {
body.lotus-organic .lotus-prototype-showcase {
        flex-direction: column;
        gap: 16px;
        margin-top: 24px;
    }
body.lotus-organic .lotus-prototype .lotus-prototype-showcase
    .prototype-image-link {
        flex: none;
        width: min(75%, 240px);
        max-width: 240px;
    }
body.lotus-organic .lotus-prototype-callout {
        flex: none;
        width: 100%;
        max-width: 240px;
        font-size: 29px;
        transform: none;
    }
body.lotus-organic .lotus-curved-arrow {
        width: 90px;
        transform: rotate(75deg);
        margin-bottom: 10px;
    }
body.lotus-organic .lotus-decoration {
        top: 8px;
        right: 8px;
        width: 65px;
        opacity: 0.2;
    }
}

@media (max-width: 760px) {
body.lotus-organic .lotus-callout-row {
        flex-direction: column;
        gap: 18px;
        margin: 34px auto;
    }
body.lotus-organic .lotus-callout-row
    .lotus-handwritten-callout {
        flex: none;
        width: 100%;
        max-width: 300px;
    }
body.lotus-organic .lotus-callout-row > figure {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
body.lotus-organic .lotus-curved-arrow {
        width: 95px;
    }
body.lotus-organic .lotus-arrow-right {
        transform: rotate(15deg);
    }
body.lotus-organic .lotus-arrow-left {
        transform: rotate(-15deg);
    }
}

@media (max-width: 900px) {
body.lotus-organic .lotus-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 560px) {
body.lotus-organic .lotus-details {
        grid-template-columns: 1fr;
    }
body.lotus-organic {
        background-attachment: scroll;
    }
}

@media (max-width: 560px) {
body.lotus-organic .lotus-callout-row > figure.lotus-games-figure {
        flex: 0 1 180px;
        width: 180px;
        max-width: 75%;
    }
}

@media (max-width: 560px) {
body.lotus-organic .lotus-prototype-showcase .prototype-image-link,
body.lotus-organic .lotus-games-figure {
        flex: 0 1 180px;
        width: 180px;
        max-width: 75%;
    }
}

@media (max-width: 600px) {
.clean-organic .clean-gallery > figure.clean-homepage-feature:first-of-type {
        width: 100%;
    }
}

@media (max-width: 560px) {
.clean-organic .clean-section {
        width: 90%;
        margin: 70px auto;
    }
.clean-organic .clean-overview {
        padding: 30px 18px;
        border-radius: 28px 8px 28px 8px;
    }
.clean-organic .clean-overview-logo {
        width: 85px;
        height: 85px;
    }
.clean-organic .clean-process-grid,
.clean-organic .clean-screen-grid {
        grid-template-columns: 1fr;
    }
.clean-organic .clean-process-card:last-child {
        grid-column: auto;
        width: 100%;
    }
.clean-organic .clean-process-card figure {
        border-radius: 28px 8px 28px 8px;
    }
.clean-organic .clean-homepage-feature {
        padding: 7px;
        border-radius: 26px 7px 26px 7px;
    }
.clean-organic .clean-homepage-feature img {
        border-radius: 20px 5px 20px 5px;
    }
.clean-organic .clean-prototype {
        padding: 30px 16px;
        border-radius: 10px 30px 10px 30px;
    }
.clean-organic .clean-prototype-preview {
        border-radius: 24px 6px 24px 6px;
    }
.clean-organic .clean-prototype-overlay {
        opacity: 1;
        background: linear-gradient(
            to top,
            rgba(25, 54, 40, 0.8),
            transparent 70%
        );
        align-items: flex-end;
    }
.clean-organic .clean-prototype-overlay span {
        padding: 10px 14px;
        font-size:1.125rem;
    }
.clean-organic .clean-contact {
        padding: 35px 15px 45px;
    }
}

@media (max-width: 900px) {
.deets-page .project-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 24px;
    }
.deets-page .deets-prototype-section,
.deets-page .deets-prototype-feature,
.deets-page .deets-system-section,
.deets-page .deets-identity-section,
.deets-page .deets-settings-section {
        grid-template-columns: minmax(0, 1fr);
    }
.deets-page .deets-prototype-preview {
        width: 100%;
        max-width: 340px;
    }
.deets-page .deets-screen-feature,
.deets-page .deets-home-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
.deets-page .deets-screen-feature .deets-screen-image {
        width: 55%;
        max-width: 360px;
        margin-inline: auto;
    }
.deets-page .deets-screen-copy,
.deets-page .deets-home-caption {
        max-width: 680px;
    }
.deets-page .deets-life-grid,
.deets-page .deets-life-timeline {
        gap: 24px;
    }
.deets-page .deets-life-illustration {
        max-width: 460px;
    }
.deets-page .deets-settings-image {
        width: 85%;
    }
}

@media (max-width: 700px) {
.deets-page .deets-life-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
.deets-page .deets-life-feature-copy {
        grid-column: 1;
        grid-row: 1;
    }
.deets-page .deets-life-illustration {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
.deets-page .project-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
    }
.deets-page .project-details .detail-box {
        padding: 16px 12px;
    }
.deets-page .deets-intro-logo {
        width: 180px;
        max-width: 55%;
    }
.deets-page h2 {
        letter-spacing: 0.035em;
    }
.deets-page .deets-intro h2,
.deets-page .deets-prototype-copy h2,
.deets-page .deets-system-copy h2,
.deets-page .deets-settings-copy h2 {
        font-size: clamp(2rem, 9vw, 2.8rem);
    }
.deets-page .deets-screen-feature .deets-screen-image {
        width: 70%;
    }
.deets-page .deets-screen-card .deets-screen-image {
        width: 75%;
    }
.deets-page .deets-screen-grid,
.deets-page .deets-supporting-screens {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
.deets-page .deets-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 10px;
    }
.deets-page .deets-category-item {
        padding: 18px 8px;
    }
.deets-page .deets-category-orb {
        width: 64px;
        height: 64px;
        padding: 12px;
    }
.deets-page .deets-palette {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
.deets-page .deets-swatch {
        min-height: 64px;
        padding: 6px;
    }
.deets-page .deets-swatch span {
        font-size:1.125rem;
    }
.deets-page .deets-life-grid,
.deets-page .deets-life-timeline {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
.deets-page .deets-settings-image {
        width: 100%;
    }
.deets-page .deets-panel {
        padding: 24px 20px;
    }
.deets-page .deets-contact {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
.deets-page *,
.deets-page *::before,
.deets-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 700px) {
body.death-page .death-case-section {
        margin-bottom: 32px;
    }
body.death-page .death-section-heading {
        gap: 12px;
    }
body.death-page .death-section-heading h2 {
        font-size: 30px;
    }
body.death-page .death-section-text p {
        font-size: 18px;
        line-height: 1.8;
    }
body.death-page .death-feature-image {
        margin-bottom: 65px;
    }
}

@media (max-width: 900px) {
body.death-page .project-details {
        gap: 16px;
        margin-bottom: 75px;
    }
body.death-page .project-details .detail-box {
        padding: 22px 12px;
    }
body.death-page .project-story {
        gap: 32px;
        margin-bottom: 75px;
    }
body.death-page .story-text h2,
body.death-page .project-gallery-heading h2 {
        font-size: 32px;
    }
}

@media (max-width: 600px) {
body.death-page .project-hero {
        padding: 10px;
        margin-bottom: 35px;
    }
body.death-page .project-title .title-break {
        line-height: 1.6;
        letter-spacing: 0.08em;
    }
body.death-page .project-details {
        grid-template-columns: 1fr;
        gap: 14px;
    }
body.death-page .project-details .detail-box {
        padding: 22px 18px;
    }
body.death-page .story-text h2,
body.death-page .project-gallery-heading h2 {
        font-size: 30px;
    }
body.death-page .project-gallery-heading {
        padding: 24px 0;
    }
body.death-page .page-contact-link {
        padding: 35px 10px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
body.death-page .story-image img,
body.death-page .project-image-block img {
        transition: none;
    }
}

@media (max-width: 900px) {
body.fox-page .project-details {
        gap: 16px;
        margin-bottom: 75px;
    }
body.fox-page .project-story {
        gap: 32px;
    }
}

@media (max-width: 700px) {
body.fox-page .fox-case-section {
        margin-bottom: 32px;
    }
body.fox-page .fox-section-heading {
        gap: 12px;
    }
body.fox-page .fox-section-heading h2 {
        font-size: 30px;
    }
body.fox-page .fox-section-text p {
        font-size: 18px;
        line-height: 1.8;
    }
body.fox-page .fox-feature-image {
        margin-bottom: 65px;
    }
}

@media (max-width: 600px) {
body.fox-page .project-hero {
        padding: 10px;
        margin-bottom: 35px;
    }
body.fox-page .project-title .title-break {
        line-height: 1.6;
        letter-spacing: 0.07em;
    }
body.fox-page .project-details {
        grid-template-columns: 1fr;
        gap: 14px;
    }
body.fox-page .project-details .detail-box {
        padding: 22px 18px;
    }
body.fox-page .page-contact-link {
        padding: 35px 10px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
body.fox-page .fox-feature-image img {
        transition: none;
    }
}

@media (max-width: 900px) {
body.tip-page .project-details {
        gap: 16px;
        margin-bottom: 75px;
    }
}

@media (max-width: 700px) {
body.tip-page .tip-case-section {
        margin-bottom: 32px;
    }
body.tip-page .tip-section-heading {
        gap: 12px;
    }
body.tip-page .tip-section-heading h2 {
        font-size: 30px;
    }
body.tip-page .tip-section-text p {
        font-size: 18px;
        line-height: 1.8;
    }
body.tip-page .tip-feature-image {
        margin-bottom: 65px;
    }
}

@media (max-width: 600px) {
body.tip-page .project-hero {
        padding: 10px;
        margin-bottom: 35px;
    }
body.tip-page .project-title .title-break {
        line-height: 1.6;
        letter-spacing: 0.06em;
    }
body.tip-page .project-details {
        grid-template-columns: 1fr;
        gap: 14px;
    }
body.tip-page .project-details .detail-box {
        padding: 22px 18px;
    }
body.tip-page .page-contact-link {
        padding: 35px 10px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
body.tip-page .tip-feature-image img {
        transition: none;
    }
}

@media (max-width:900px) {
.project-container {
        width:90vw;
        padding-top:100px;
    }
.project-title h1 {
        font-size:42px;
    }
.project-navigation {
        gap:25px;
    }
.project-details {
        grid-template-columns:repeat(2,1fr);
        gap:35px;
    }
.project-gallery-row {
        grid-template-columns:1fr;
    }
.small-project-image {
        width:75%;
    }
.project-description h2 {
        font-size:30px;
    }
}

@media (max-width:600px) {
.project-details {
        grid-template-columns:1fr;
    }
.project-title h1 {
        font-size:34px;
    }
.project-title-nav h1 {
        font-size:18px;
    }
.project-arrow {
        width:40px;
        height:40px;
    }
}

/* ===== CONSOLIDATED RESPONSIVE REFINEMENTS ===== */
@media (max-width: 900px) {
  .project-container { width:90vw; padding-top:100px; }
  .project-title h1 { font-size:42px; }
  .project-navigation { gap:25px; }
  .project-details { grid-template-columns:repeat(2,minmax(0,1fr)); gap:35px; }
  .project-gallery-row { grid-template-columns:1fr; }
  .small-project-image { width:75%; }
  .project-description h2 { font-size:30px; }
}
@media (max-width: 760px) {
  .project-title-nav { gap:16px; }
  .project-title-nav h1::before { right:calc(100% + 12px); font-size:18px; letter-spacing:.06em; }
  .project-title-nav .project-category-link { font-size:18px; letter-spacing:.06em; }
  body.death-page .death-case-section, body.fox-page .fox-case-section, body.tip-page .tip-case-section { display:block; margin-bottom:38px; padding-top:24px; }
  body.death-page .death-section-heading, body.fox-page .fox-section-heading, body.tip-page .tip-section-heading { margin-bottom:20px; }
  body.fox-page .fox-section-heading, body.fox-page .fox-section-text { grid-column:auto; grid-row:auto; }
  body.tip-page .tip-section-text { padding-left:16px; }
  body.death-page .project-hero img, body.fox-page .project-hero img, body.tip-page .project-hero img, body.death-page .death-feature-image img, body.fox-page .fox-feature-image img, body.tip-page .tip-feature-image img { width:85%; }
  body.death-page .death-feature-image img[src*="2.1.3-death-options"] { width:100%; }
  body.death-page .death-feature-image > p, body.fox-page .fox-feature-image > p, body.tip-page .tip-feature-image > p { width:90%; }
  body.fox-page .fox-case-section .fox-art-placeholder { width:min(30%,140px); max-width:140px; }
  body.fox-page .fox-section-heading { flex-wrap:wrap; gap:10px 15px; }
  body.fox-page .fox-section-heading h2 { font-size:34px; }
  body.tip-page .tip-development-layout { grid-template-columns:minmax(0,1fr); row-gap:24px; }
  body.tip-page .tip-development-layout .tip-section-heading { grid-column:1; grid-row:1; margin-bottom:20px; }
  body.tip-page .tip-development-layout .tip-section-text { grid-column:1; grid-row:2; }
  body.tip-page .tip-development-photo { grid-column:1; grid-row:3; width:100%; max-width:100%; }
  body.tip-page .tip-development-photo img { width:auto; max-width:100%; max-height:480px; }
  body.tip-page .tip-development-image img { width:70%; max-width:70%; }
  body.lotus-organic .lotus-games-figure figcaption { width:100%; max-width:100%; white-space:normal; overflow-wrap:normal; }
  body.lotus-organic .lotus-games-figure figcaption strong { white-space:normal; }
}
@media (max-width: 700px) {
  .chrono-page .carousel-slide { flex-basis:85%; width:85%; }
  body.tip-page .tip-case-section { margin-bottom:32px; }
  body.tip-page .tip-section-heading h2 { font-size:30px; }
  body.tip-page .tip-section-text p { font-size:18px; line-height:1.8; }
  body.tip-page .tip-feature-image { margin-bottom:65px; }
  body.tip-page .tip-development-layout { display:grid; grid-template-columns:minmax(0,1fr); }
  body.tip-page .tip-development-image { width:100%; max-width:100%; }
  body.tip-page .tip-development-image img { width:70%; max-width:70%; }
}
@media (max-width: 600px) {
  .project-details { grid-template-columns:1fr; }
  .project-title h1 { font-size:34px; }
  .project-title-nav h1 { font-size:18px; }
  .project-arrow { width:40px; height:40px; }
  body.tip-page .project-hero { padding:10px; margin-bottom:35px; }
  body.tip-page .project-title .title-break { line-height:1.6; letter-spacing:.06em; }
  body.tip-page .project-details { grid-template-columns:1fr; gap:14px; }
  body.tip-page .project-details .detail-box { padding:22px 18px; }
  body.tip-page .page-contact-link { padding:35px 10px 20px; }
}
@media (max-width: 560px) {
  body.clean-organic .clean-prototype-preview { width:min(212px,75%); max-width:212px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-title-nav { transition:none; }
  body.tip-page .tip-feature-image img { transition:none; }
}


/* Final narrow-screen nav alignment and project-specific responsive fixes. */
@media (max-width: 760px) {
  .project-title-nav { right:12px; left:auto; max-width:calc(100% - 24px); gap:12px; transform:translateY(-50px); }
  .project-scrolled .project-title-nav { transform:translateY(-50%); }
  .project-title-nav .project-category-link { font-size:18px; letter-spacing:.06em; }
}
@media (max-width: 420px) {
  .project-title-nav { gap:8px; right:8px; max-width:calc(100% - 16px); }
  .project-title-nav h1 { font-size:18px; letter-spacing:.04em; }
  .project-title-nav .project-category-link { font-size:18px; letter-spacing:.02em; }
}


/* =========================================================
   TAGGED REPAIR — OCTOBER 2026
   Responsive UI/UX project header and overview layout.
   ========================================================= */
@media (max-width: 900px) {
    body.project-page .project-container {
        width: 90vw;
        padding-top: 100px;
    }
    body.project-page .project-navigation {
        gap: 25px;
    }
    body.project-page .project-title h1 {
        font-size: clamp(32px, 5.2vw, 42px);
    }
    body.project-page .project-title .title-break {
        font-size: clamp(18px, 2.5vw, 24px);
    }
    body.project-page .project-hero.video-hero .video-player {
        width: min(82%, 700px);
    }
    body.project-page .project-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 22px;
    }
}

@media (max-width: 600px) {
    body.project-page .project-container {
        width: 92vw;
        padding-top: 92px;
    }
    body.project-page .project-navigation {
        gap: 10px;
    }
    body.project-page .project-arrow {
        flex: 0 0 32px;
        width: 32px;
        height: 40px;
    }
    body.project-page .project-title h1 {
        font-size: clamp(28px, 8vw, 34px);
        letter-spacing: 0.045em;
        overflow-wrap: break-word;
    }
    body.project-page .project-title .title-break {
        margin-top: 6px;
        font-size: 18px;
        letter-spacing: 0.04em;
        line-height: 1.4;
    }
    body.project-page .project-hero.video-hero .video-player {
        width: 100%;
        max-width: 100%;
        margin-bottom: 32px;
    }
    body.project-page .project-details,
    body.deets-page .project-details {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    body.project-page .project-details .detail-box {
        padding-inline: 8px;
    }
}


/* =========================================================
   SHARED RESPONSIVE NAVIGATION + DESIGN PROJECT LAYOUT
   Tagged repair: keep the desktop nav intact and make the
   compact menu and scrolled project title work together.
   ========================================================= */
@media (max-width: 900px) {
    body.project-page .project-container {
        width: 90vw;
        padding-top: 105px;
    }

    body.project-page .project-navigation {
        gap: 24px;
    }

    body.project-page .project-title h1 {
        font-size: clamp(36px, 5.2vw, 48px);
    }

    body.project-page .project-title .title-break {
        font-size: clamp(18px, 2.5vw, 24px);
    }

    body.project-page .project-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 22px;
    }
}

@media (max-width: 760px) {
    .navbar {
        position: relative;
        justify-content: space-between;
        padding: 0 18px;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 70px;
        right: 0;
        left: 0;
        z-index: 10002;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 10px 18px 18px;
        background: rgba(0, 0, 0, .96);
        border-bottom: 1px solid rgba(255,255,255,.12);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        display: inline-block;
        padding: 13px 8px;
        font-size: 18px;
        letter-spacing: .12em;
    }

    .nav-links.mobile-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Allow the menu to open even when project scroll mode hides desktop links. */
    .project-scrolled .nav-links.mobile-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .project-title-nav {
        left: auto;
        right: 66px;
        gap: 10px;
        max-width: calc(100% - 150px);
        justify-content: flex-end;
        transform: translateY(-50px);
    }

    .project-scrolled .project-title-nav {
        transform: translateY(-50%);
    }

    .project-title-nav h1 {
        font-size: 18px;
        letter-spacing: .04em;
    }

    .project-title-nav .project-category-link {
        font-size: 18px;
        letter-spacing: .04em;
    }

    .project-title-nav .project-arrow {
        flex: 0 0 28px;
        width: 28px;
        height: 38px;
    }

    .project-title-nav .arrow-circle {
        width: 24px;
        height: 24px;
    }

    .project-title-nav .project-arrow.prev .arrow-triangle {
        border-top-width: 6px;
        border-bottom-width: 6px;
        border-right-width: 9px;
    }

    .project-title-nav .project-arrow.next .arrow-triangle {
        border-top-width: 6px;
        border-bottom-width: 6px;
        border-left-width: 9px;
    }

    body.project-page .project-navigation {
        gap: 12px;
        margin-bottom: 42px;
    }

    body.project-page .project-arrow {
        flex: 0 0 34px;
        width: 34px;
        height: 40px;
    }
}

@media (max-width: 600px) {
    body.project-page .project-container {
        width: 92vw;
        padding-top: 94px;
    }

    body.project-page .project-title h1 {
        font-size: clamp(30px, 8vw, 36px);
        letter-spacing: .045em;
        overflow-wrap: break-word;
    }

    body.project-page .project-title .title-break {
        margin-top: 7px;
        font-size: 18px;
        letter-spacing: .04em;
        line-height: 1.45;
    }

    body.project-page .project-details {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    body.project-page .project-details .detail-box {
        padding-inline: 10px;
    }

    .project-title-nav {
        right: 58px;
        max-width: calc(100% - 130px);
        gap: 7px;
    }

    .project-title-nav h1,
    .project-title-nav .project-category-link {
        font-size: 18px;
        letter-spacing: .02em;
    }
}

@media (max-width: 420px) {
    .navbar {
        padding: 0 10px;
    }

    .project-title-nav {
        right: 54px;
        max-width: calc(100% - 112px);
        gap: 5px;
    }

    .project-title-nav h1,
    .project-title-nav .project-category-link {
        font-size: 18px;
        letter-spacing: 0;
    }
}

/* =========================================================
   MOBILE PROJECT NAVIGATION
========================================================= */

@media (max-width: 768px) {

    .navbar {
        overflow: visible;
    }

    .navbar > .project-title-nav {
        top: 0;
        left: 50%;
        right: auto;
        height: 70px;
        width: auto;
        gap: 30px;
        transform: translate(-50%, 100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .navbar.project-scrolled > .project-title-nav {
        left: 50%;
        right: auto;
        transform: translate(-50%, 0);
        opacity: 1;
        visibility: visible;
    }

    .navbar.project-scrolled > .project-title-nav h1,
    .navbar.project-scrolled > .project-title-nav .project-category-link {
        display: none;
    }

    .navbar.project-scrolled > .project-title-nav .project-arrow {
        width: 40px;
        height: 40px;
    }

    .navbar > .logo,
    .navbar > .menu-toggle {
        position: relative;
        z-index: 10002;
    }

    .navbar.project-scrolled > .nav-links {
        visibility: hidden;
        pointer-events: none;
    }
}

/* ============================================
   LOTUS LINGO — RESPONSIVE REFINEMENTS
============================================ */

@media (max-width: 900px) {
    body.lotus-organic .lotus-process {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
        gap: 24px;
    }

    body.lotus-organic .lotus-process .story-text {
        grid-column: 1;
        grid-row: 1;
    }

    body.lotus-organic .lotus-process .story-image {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        max-width: 360px;
    }
}

@media (max-width: 600px) {
    body.lotus-organic .lotus-process {
        grid-template-columns: minmax(0, 1fr);
    }

    body.lotus-organic .lotus-process .story-text {
        grid-column: 1;
        grid-row: 1;
    }

    body.lotus-organic .lotus-process .story-image {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: 360px;
    }

    body.lotus-organic .lotus-experience .lotus-games-figure {
        width: 240px;
        max-width: 100%;
    }
}