@charset "UTF-8";
/* UI/UX project-specific rules: Phasepoint/Chrono Nexus, Clean Future Network, Lotus Lingo, My Deets. */

/* =========================================================
   SHARED UI/UX PROJECT HEADER AND OVERVIEW LAYOUT
   Keep these shared desktop rules here. mobile.css loads last
   and provides the responsive overrides.
   ========================================================= */
body.project-page {
    min-height: 100vh;
    overflow-x: hidden;
    font-size: 18px;
}

.project-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 92vw);
    margin: 0 auto;
    padding-top: 120px;
    padding-bottom: 60px;
}

.project-navigation {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 55px;
    width: 100%;
    margin: 0 auto 60px;
    z-index: 5;
}

.project-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.project-title h1 {
    margin: 0;
    color: #00E5FF;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 58px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.12;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: normal;
}

.project-title .title-break {
    display: block;
    margin-top: 8px;
    color: #FFFFFF;
    font-family: "Jost", sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: none;
}

.project-arrow {
    flex: 0 0 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    color: #FFFFFF;
    text-decoration: none;
}

.arrow-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    transform: translateY(-2px);
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.arrow-triangle {
    display: block;
    width: 0;
    height: 0;
}

.project-arrow.prev .arrow-triangle {
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 14px solid currentColor;
}

.project-arrow.next .arrow-triangle {
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid currentColor;
}

.project-arrow:hover,
.project-arrow:focus-visible {
    color: #00E5FF;
}

.project-arrow:hover .arrow-circle,
.project-arrow:focus-visible .arrow-circle {
    transform: translateY(-2px) scale(1.08);
}

.project-hero {
    width: 100%;
    margin: 0 auto 60px;
    text-align: center;
}

.project-hero > img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.project-hero .lightbox-description {
    display: none;
}

.project-hero.video-hero {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.video-player {
    display: block;
    width: 70%;
    max-width: 700px;
    margin: 0 auto 45px;
}

.video-player iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 8px;
}

.project-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 30px;
    width: 100%;
    margin: 0 auto 70px;
}

.project-details .detail-box {
    min-width: 0;
    text-align: center;
}

.project-details .detail-box h3 {
    margin: 0 0 12px;
    color: #00E5FF;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1.5;
    text-transform: uppercase;
}

.project-details .detail-box p {
    margin: 0 0 5px;
    color: #FFFFFF;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}


body.deets-page {
background:
linear-gradient(
180deg,
#081522,
#302632
);
}

body.lotus-page {
background:
linear-gradient(
180deg,
#081522,
#670031
);
}

body.clean-page {
background:
linear-gradient(
180deg,
#081522,
#003b18
);
}

body.chrono-page {
background:
linear-gradient(
180deg,
#081522,
#28436b
);
}

.chrono-page {
    --chrono-cyan: #00E5FF;
    --chrono-panel: rgba(255, 255, 255, 0.035);
    --chrono-border: rgba(255, 255, 255, 0.14);
    --chrono-muted: rgba(255, 255, 255, 0.68);
}

.chrono-page .case-section {
    width: min(1100px, 92%);
    margin: 80px auto;
}

.chrono-page .case-heading {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 34px;
    padding-bottom: 12px;
    text-align: center;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chrono-page .case-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 42px;
    height: 2px;
    background: var(--chrono-cyan);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.chrono-page .case-heading:hover::after,
.chrono-page .case-heading:focus-visible::after {
    width: 100%;
}

.chrono-page .section-lead {
    max-width: 760px;
    margin: 0 auto 30px;
    color: var(--chrono-muted);
    text-align: center;
    line-height: 1.8;
}

.chrono-page .case-section p {
    line-height: 1.75;
}

.chrono-page .case-section li {
    line-height: 1.65;
    margin-bottom: 8px;
}

.chrono-page .case-section h3 {
    font-family: "Barlow Condensed", sans-serif;
    letter-spacing: 0.04em;
}

.chrono-page .overview-section {
    max-width: 1050px;
    margin-top: 48px;
}

.chrono-page .overview-logo {
    display: block;
    width: 74px;
    height: 74px;
    object-fit: contain;
    margin: 0 auto 16px;
    background: transparent;
}

.chrono-page .overview-intro {
    max-width: 780px;
    margin: 0 auto 10px;
    font-size:clamp(1.125rem, 2vw, 1.3rem);
    text-align: center;
}

.chrono-page .overview-summary {
    max-width: 780px;
    margin: 0 auto 28px;
    text-align: center;
    color: var(--chrono-muted);
}

.chrono-page .overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.chrono-page .overview-statement {
    padding: 24px;
    border: 1px solid var(--chrono-border);
    border-radius: 10px;
    background: var(--chrono-panel);
}

.chrono-page .overview-statement h3 {
    margin: 0 0 12px;
    color: var(--chrono-cyan);
    font-size: 1.15rem;
}

.chrono-page .overview-statement p {
    margin-top: 0;
}

.chrono-page .overview-statement ul {
    padding-left: 20px;
    margin-bottom: 0;
}

.chrono-page .case-carousel {
    margin-top: 30px;
}

.chrono-page .carousel-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.chrono-page .carousel-toolbar > p {
    margin: 0;
    font-family: "Barlow Condensed", sans-serif;
    font-size:1.125rem;
    letter-spacing: 0.12em;
}

.chrono-page .carousel-controls {
    display: flex;
    gap: 8px;
}

.chrono-page .carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--chrono-border);
    border-radius: 50%;
    background: transparent;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease,
                background 0.2s ease;
}

.chrono-page .carousel-arrow:hover,
.chrono-page .carousel-arrow:focus-visible {
    color: #06080B;
    border-color: var(--chrono-cyan);
    background: var(--chrono-cyan);
}

.chrono-page .carousel-track {
    display: grid;
    grid-auto-columns: minmax(78%, 1fr);
    grid-auto-flow: column;
    gap: 18px;
    overflow-x: auto;
    padding: 0 0 14px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: var(--chrono-cyan) rgba(255,255,255,0.1);
    scrollbar-width: thin;
}

.chrono-page .carousel-slide {
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
}

.chrono-page .carousel-slide img {
    transition: filter 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.chrono-page .carousel-slide:hover img {
    filter: brightness(0.86) saturate(1.08);
    box-shadow:
        0 0 0 2px rgba(0, 229, 255, 0.85),
        0 0 18px rgba(0, 229, 255, 0.3);
}

.chrono-page .carousel-slide img:focus-visible {
    outline: 2px solid #00E5FF;
    outline-offset: 4px;
}

.chrono-page .carousel-slide figcaption {
    margin-top: 10px;
    color: var(--chrono-muted);
    font-size:1.125rem;
}

.chrono-page .approach-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.chrono-page .approach-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--chrono-border);
    border-radius: 10px;
    background: var(--chrono-panel);
}

.chrono-page .approach-image {
    display: block;
    width: 100%;
    height: 150px;
    margin-bottom: 20px;
    object-fit: contain;
    background: rgba(255,255,255,0.025);
    border-radius: 6px;
}

.chrono-page .approach-card h3 {
    margin: 0 0 12px;
    color: var(--chrono-cyan);
    font-size: 1.15rem;
}

.chrono-page .approach-card p {
    color: var(--chrono-muted);
}

.chrono-page .approach-card ul {
    padding-left: 18px;
}

.chrono-page .creative-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 36px;
}

.chrono-page .creative-copy p:first-child {
    margin-top: 0;
}

.chrono-page .creative-visuals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.chrono-page .creative-visual {
    min-width: 0;
    margin: 0;
}

.chrono-page .creative-visual img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: contain;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--chrono-border);
    border-radius: 8px;
}

.chrono-page .creative-visual figcaption {
    margin-top: 8px;
    color: var(--chrono-muted);
    font-size:1.125rem;
}

.chrono-page .prototype-section {
    text-align: center;
}

.chrono-page .prototype-preview {
    position: relative;
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 24px;
    overflow: hidden;
    border: 1px solid var(--chrono-border);
    border-radius: 10px;
}

.chrono-page .prototype-preview img {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.chrono-page .prototype-preview:hover img {
    transform: scale(1.015);
}

.chrono-page .prototype-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: rgba(0, 8, 16, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.chrono-page .prototype-preview:hover .prototype-overlay,
.chrono-page .prototype-preview:focus-visible .prototype-overlay {
    opacity: 1;
}

.chrono-page .prototype-open {
    padding: 12px 18px;
    border: 1px solid var(--chrono-cyan);
    color: white;
    background: rgba(0,0,0,0.6);
    font-family: "Barlow Condensed", sans-serif;
    letter-spacing: 0.08em;
}

.chrono-page .prototype-section > .enter-button {
    display: inline-block;
    margin-top: 4px;
}

.chrono-page .ux-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 960px;
    margin: 0 auto;
}

.chrono-page .ux-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--chrono-border);
    border-radius: 8px;
    background: var(--chrono-panel);
}

.chrono-page .ux-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0,229,255,0.4);
    border-radius: 50%;
    color: var(--chrono-cyan);
}

.chrono-page .ux-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chrono-page .ux-item h3 {
    margin: 0 0 5px;
    color: var(--chrono-cyan);
    font-size:1.125rem;
}

.chrono-page .ux-item p {
    margin: 0;
    color: var(--chrono-muted);
    font-size:1.125rem;
}

.chrono-page .gallery-section .project-gallery-row {
    margin-bottom: 26px;
}

.chrono-page .gallery-section .project-image-block {
    margin-bottom: 28px;
}

.chrono-page .gallery-section .project-image-block p {
    color: var(--chrono-muted);
    text-align: center;
}

.chrono-page .carousel-slide img {
    transition: filter 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.chrono-page .carousel-slide:hover img {
    filter: brightness(0.82) sepia(0.15) hue-rotate(155deg) saturate(1.4);
    box-shadow: 0 0 0 2px rgba(0, 174, 255, 0.8),
                0 0 18px rgba(0, 174, 255, 0.3);
}

.chrono-page .carousel-slide img:focus-visible {
    outline: 2px solid #00AEFF;
    outline-offset: 4px;
}

.chrono-page .approach-image-frame {
    margin: 0 0 20px;
    overflow: hidden;
    border-radius: 6px;
}

.chrono-page .approach-image-frame .approach-image {
    margin-bottom: 0;
}

.clean-organic {
    --clean-forest: #234C3A;
    --clean-leaf: #72956D;
    --clean-sage: #B8C9A7;
    --clean-cream: #F2F0E5;
    --clean-paper: #E6EBDD;
    --clean-ink: #26372D;
    --clean-muted: #667568;
    --clean-accent: #C28A55;
}

body.clean-organic .project-year {
    color: #B8C9A7;
}

.clean-organic .project-container {
    position: relative;
    isolation: isolate;
}

.clean-organic .project-container::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 8%;
    left: -8vw;
    width: 32vw;
    height: 38vw;
    max-height: 620px;
    background: radial-gradient(
        ellipse,
        rgba(114, 149, 109, 0.13),
        transparent 70%
    );
    pointer-events: none;
}

.clean-organic .project-container::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 45%;
    right: -10vw;
    width: 36vw;
    height: 42vw;
    max-height: 700px;
    background: radial-gradient(
        ellipse,
        rgba(194, 138, 85, 0.09),
        transparent 70%
    );
    pointer-events: none;
}

.clean-organic .clean-section {
    position: relative;
    width: min(1160px, 90%);
    margin: clamp(70px, 10vw, 130px) auto;
}

.clean-organic .clean-heading {
    margin: 0;
    color: var(--clean-cream);
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 500;
    letter-spacing: 0.09em;
    line-height: 1.12;
    text-align: center;
    text-transform: uppercase;
}

.clean-organic .clean-heading::after {
    content: "";
    display: block;
    width: 58px;
    height: 3px;
    margin: 18px auto 0;
    border-radius: 50%;
    background: var(--clean-leaf);
    transition: width 0.35s ease;
}

.clean-organic .clean-section-heading:hover .clean-heading::after {
    width: 105px;
}

.clean-organic .clean-eyebrow {
    margin: 0 0 14px;
    color: var(--clean-sage);
    font-size:1.125rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
}

.clean-organic .clean-section-heading {
    max-width: 760px;
    margin: 0 auto 42px;
}

.clean-organic .clean-section-heading > p:last-child {
    max-width: 690px;
    margin: 24px auto 0;
    color: rgba(242, 240, 229, 0.78);
    font-size:1.125rem;
    line-height: 1.85;
    text-align: center;
}

.clean-organic .clean-details .detail-box h3 {
    color: var(--clean-sage);
}

.clean-organic .clean-details .detail-box {
    border-color: rgba(184, 201, 167, 0.24);
}

.clean-organic .clean-overview {
    padding: clamp(30px, 5vw, 65px) clamp(18px, 4vw, 55px);
    border: 1px solid rgba(184, 201, 167, 0.15);
    border-radius: 48px 12px 48px 12px;
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(114, 149, 109, 0.15),
            transparent 60%
        ),
        rgba(255, 255, 255, 0.018);
}

.clean-organic .clean-organic-divider {
    width: 90px;
    height: 4px;
    margin: 0 auto 30px;
    border-radius: 50%;
    background: var(--clean-leaf);
    transform: rotate(-3deg);
}

.clean-organic .clean-overview-logo {
    display: block;
    width: 105px;
    height: 105px;
    margin: 0 auto 25px;
    object-fit: contain;
    border-radius: 50%;
}

.clean-organic .clean-overview > .clean-eyebrow {
    margin-bottom: 14px;
}

.clean-organic .clean-intro {
    max-width: 760px;
    margin: 30px auto 14px;
    color: var(--clean-cream);
    font-family: "Playfair Display", serif;
    font-size: clamp(1.4rem, 3vw, 2.25rem);
    line-height: 1.45;
    text-align: center;
}

.clean-organic .clean-overview-copy {
    max-width: 760px;
    margin: 0 auto;
    color: rgba(242, 240, 229, 0.78);
    font-size:1.125rem;
    line-height: 1.9;
    text-align: center;
}

.clean-organic .clean-challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.clean-organic .clean-statement {
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid rgba(184, 201, 167, 0.2);
    border-radius: 28px 8px 28px 8px;
    background: rgba(255, 255, 255, 0.025);
}

.clean-organic .clean-solution {
    border-color: rgba(114, 149, 109, 0.4);
    background: rgba(114, 149, 109, 0.08);
}

.clean-organic .clean-number {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--clean-leaf);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.clean-organic .clean-statement h3,
.clean-organic .clean-process-card h3 {
    margin: 0 0 14px;
    color: var(--clean-cream);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.07em;
}

.clean-organic .clean-statement > p {
    color: var(--clean-cream);
    font-size:1.125rem;
    font-weight: 500;
    line-height: 1.75;
}

.clean-organic .clean-statement ul {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.clean-organic .clean-statement li {
    position: relative;
    margin: 12px 0 0;
    padding-left: 23px;
    color: rgba(242, 240, 229, 0.76);
    line-height: 1.7;
}

.clean-organic .clean-statement li::before {
    content: "";
    position: absolute;
    top: 0.68em;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 2px 6px 2px 6px;
    background: var(--clean-leaf);
    transform: rotate(-15deg);
}

.clean-organic .clean-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.clean-organic .clean-process-card {
    min-width: 0;
}

.clean-organic .clean-process-card figure {
    overflow: hidden;
    margin: 0 0 22px;
    border-radius: 38px 8px 38px 8px;
    background: rgba(255, 255, 255, 0.04);
}

.clean-organic .clean-process-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.clean-organic .clean-process-card:hover img {
    transform: scale(1.035);
}

.clean-organic .clean-step {
    display: block;
    margin-bottom: 10px;
    color: var(--clean-sage);
    font-size:1.125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.clean-organic .clean-process-card h3 {
    font-size: 1.45rem;
    letter-spacing: 0.02em;
}

.clean-organic .clean-process-card > p {
    margin: 0;
    color: rgba(242, 240, 229, 0.73);
    font-size:1.125rem;
    line-height: 1.8;
}

.clean-organic .clean-homepage-feature {
    overflow: hidden;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(184, 201, 167, 0.2);
    border-radius: 44px 10px 44px 10px;
    background: rgba(255, 255, 255, 0.035);
}

.clean-organic .clean-homepage-feature img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 32px 6px 32px 6px;
}

.clean-organic .clean-homepage-feature figcaption,
.clean-organic .clean-screen figcaption,
.clean-organic .clean-campaign-image figcaption {
    padding: 16px 8px 8px;
    color: var(--clean-sage);
    font-size:1.125rem;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.clean-organic .clean-screen-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 30px;
}

.clean-organic .clean-screen {
    overflow: hidden;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(184, 201, 167, 0.16);
    border-radius: 30px 8px 30px 8px;
    background: rgba(255, 255, 255, 0.025);
}

.clean-organic .clean-screen img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 22px 5px 22px 5px;
}

.clean-organic .clean-prototype {
    padding: clamp(30px, 5vw, 65px) clamp(18px, 4vw, 55px);
    border-radius: 12px 50px 12px 50px;
    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(114, 149, 109, 0.14),
            transparent 65%
        ),
        rgba(255, 255, 255, 0.02);
    text-align: center;
}

.clean-organic .clean-prototype-copy {
    max-width: 620px;
    margin: 25px auto 32px;
    color: rgba(242, 240, 229, 0.76);
    line-height: 1.8;
}

.clean-organic .clean-prototype-preview {
    position: relative;
    display: block;
    overflow: hidden;
    width: min(425px, 100%);
    margin: 0 auto;
    border: 1px solid rgba(184, 201, 167, 0.24);
    border-radius: 34px 8px 34px 8px;
}

.clean-organic .clean-prototype-preview img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.clean-organic .clean-prototype-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(25, 54, 40, 0.72);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.clean-organic .clean-prototype-overlay span {
    padding: 14px 22px;
    border: 1px solid rgba(242, 240, 229, 0.8);
    border-radius: 30px;
    color: #F2F0E5;
    font-size:1.125rem;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.clean-organic .clean-prototype-preview:hover img,
.clean-organic .clean-prototype-preview:focus-visible img {
    transform: scale(1.025);
}

.clean-organic .clean-prototype-preview:hover .clean-prototype-overlay,
.clean-organic .clean-prototype-preview:focus-visible .clean-prototype-overlay {
    opacity: 1;
}

.clean-organic .clean-prototype-button {
    margin-top: 28px;
    border-color: #B8C9A7;
    background: #B8C9A7;
    color: #193628;
}

.clean-organic .clean-prototype-button:hover,
.clean-organic .clean-prototype-button:focus-visible {
    border-color: #D7E3C7;
    background: #D7E3C7;
    color: #193628;
}

.clean-organic .clean-campaign-image {
    max-width: 390px;
    margin: 34px auto 0;
    padding: 12px;
    border: 1px solid rgba(184, 201, 167, 0.16);
    border-radius: 36px 8px 36px 8px;
    background: rgba(255, 255, 255, 0.025);
}

.clean-organic .clean-campaign-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 26px 5px 26px 5px;
}

.clean-organic .clean-contact {
    position: relative;
    margin-top: 90px;
    padding: 45px 20px 60px;
    border-top: 1px solid rgba(184, 201, 167, 0.2);
    text-align: center;
}

.clean-organic .clean-contact p {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

body.lotus-organic {
    --lotus-peach: #FFF5EF;
    --lotus-peach-deep: #F9E4DC;
    --lotus-green: #C5E6A5;
    --lotus-green-deep: #477653;
    --lotus-pink: #B83268;
    --lotus-pink-dark: #50152F;
    --lotus-blue: #BDE5F3;
    --lotus-ink: #302832;
    --lotus-muted: #71656D;
    --lotus-white: #FFFCFA;

    background: linear-gradient(
        180deg,
        #06080B 0%,
        #321022 45%,
        #5B1B3B 75%,
        #760052 100%
    );

    color: var(--lotus-ink);
}

.lotus-organic .project-container {
    position: relative;
    z-index: 1;
}

.lotus-organic .lotus-section,
.lotus-organic .project-story {
    position: relative;
    margin-top: clamp(48px, 7vw, 100px);
    margin-bottom: clamp(48px, 7vw, 100px);
}

.lotus-organic .lotus-section {
    padding: clamp(24px, 4vw, 56px);
    border-radius: 28px;
    background: var(--lotus-peach);
    color: var(--lotus-ink);
    overflow: hidden;
}

.lotus-organic .lotus-section p,
.lotus-organic .lotus-section li {
    color: var(--lotus-ink);
}

.lotus-organic .lotus-section-heading {
    max-width: 820px;
    margin: 0 auto 32px;
    text-align: center;
}

.lotus-organic .lotus-section-heading > p:last-child {
    max-width: 700px;
    margin: 16px auto 0;
    line-height: 1.75;
}

.lotus-organic .lotus-eyebrow {
    margin: 0 0 10px;
    color: var(--lotus-pink);
    font-family: "Barlow Condensed", sans-serif;
    font-size:1.125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
}

.lotus-organic .lotus-section h2,
.lotus-organic .lotus-section-heading h2 {
    margin-top: 0;
    color: var(--lotus-pink-dark);
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.15;
}

.lotus-organic .project-story .story-text h2 {
    color: var(--lotus-pink-dark);
}

.lotus-organic .project-story .story-text p {
    color: var(--lotus-ink);
    line-height: 1.8;
}

.lotus-organic .lotus-overview,
.lotus-organic .lotus-direction,
.lotus-organic .lotus-process {
    padding: clamp(20px, 3vw, 38px);
    border-radius: 24px;
    background: var(--lotus-peach);
    color: var(--lotus-ink);
}

.lotus-organic .lotus-overview .story-image img,
.lotus-organic .lotus-direction .story-image img,
.lotus-organic .lotus-process .story-image img {
    border-radius: 18px;
}

.lotus-organic .lotus-overview .story-image p,
.lotus-organic .lotus-direction .story-image p,
.lotus-organic .lotus-process .story-image p {
    color: var(--lotus-muted);
    font-size:1.125rem;
    line-height: 1.6;
}

.lotus-organic .lotus-challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.lotus-organic .lotus-statement {
    padding: clamp(22px, 3vw, 36px);
    border-radius: 22px;
    color: var(--lotus-ink);
}

.lotus-organic .lotus-challenge-card {
    background: var(--lotus-blue);
}

.lotus-organic .lotus-solution-card {
    background: var(--lotus-green);
}

.lotus-organic .lotus-statement p {
    color: var(--lotus-ink);
}

.lotus-organic .lotus-number {
    display: block;
    margin-bottom: 16px;
    color: var(--lotus-pink);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.lotus-organic .lotus-statement h3 {
    margin: 0 0 14px;
    color: var(--lotus-pink-dark);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.lotus-organic .lotus-statement p {
    margin: 0 0 14px;
    line-height: 1.75;
}

.lotus-organic .lotus-statement p:last-child {
    margin-bottom: 0;
}

.lotus-organic .lotus-prototype {
    text-align: center;
}

.lotus-organic .lotus-prototype .lotus-section-heading {
    padding: 0 18px;
}

.lotus-organic .lotus-prototype .prototype-image-link {
    position: relative;
    display: block;
    width: min(33%, 260px);
    min-width: 200px;
    margin: 28px auto;
    overflow: hidden;
    border: 5px solid var(--lotus-white);
    border-radius: 22px;
    background: var(--lotus-peach-deep);
    box-shadow: 0 14px 36px rgba(80, 21, 47, 0.16);
}

.lotus-organic .lotus-prototype .prototype-image-link img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.lotus-organic .lotus-prototype .prototype-image-link:hover img {
    transform: scale(1.015);
}

.lotus-organic .lotus-prototype-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 56px;
    padding: 12px 10px;
    box-sizing: border-box;
    background: rgba(80, 21, 47, 0.92);
    color: white;
    font-family: "Barlow Condensed", sans-serif;
    font-size:1.125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.lotus-organic .lotus-prototype .prototype-image-link:hover
.lotus-prototype-overlay,
.lotus-organic .lotus-prototype .prototype-image-link:focus-visible
.lotus-prototype-overlay {
    opacity: 1;
}

.lotus-organic .lotus-prototype-button {
    display: inline-block;
    margin: 8px auto 0;
    padding: 15px 38px;
    box-sizing: border-box;
}

.lotus-organic .enter-button {
    border: 1px solid var(--lotus-pink);
    border-radius: 999px;
    background: var(--lotus-pink);
    color: white;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.lotus-organic .enter-button:hover {
    background: var(--lotus-pink-dark);
    border-color: var(--lotus-pink-dark);
    color: white;
    transform: translateY(-2px);
}

.lotus-organic .lotus-feature-image {
    width: 100%;
    max-width: 1100px;
    margin: 30px auto 44px;
    padding: clamp(10px, 2vw, 22px);
    border: 1px solid rgba(80, 21, 47, 0.08);
    border-radius: 22px;
    background: var(--lotus-white);
    box-sizing: border-box;
}

.lotus-organic .lotus-feature-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}

.lotus-organic .lotus-feature-image figcaption {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 4px 4px;
    color: var(--lotus-muted);
    font-size:1.125rem;
    line-height: 1.6;
}

.lotus-organic .lotus-feature-image figcaption strong {
    color: var(--lotus-pink-dark);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.lotus-organic .lotus-logo-animation {
    width: 100%;
    max-width: 900px;
    margin: 28px auto 0;
}

.lotus-organic .lotus-logo-animation .video-player {
    overflow: hidden;
    border: 5px solid var(--lotus-white);
    border-radius: 20px;
    background: var(--lotus-peach-deep);
}

.lotus-organic .lotus-logo-animation video {
    display: block;
    width: 100%;
    height: auto;
}

.lotus-organic .lotus-logo-animation figcaption {
    margin-top: 12px;
    color: var(--lotus-muted);
    text-align: center;
    font-size:1.125rem;
}

.lotus-organic .lotus-contact {
    margin-top: clamp(48px, 7vw, 100px);
}

body.lotus-organic .lotus-contact > p {
    color: #FFFFFF;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

.lotus-organic .story-image img,
.lotus-organic .lotus-feature-image img {
    max-width: 100%;
}

.lotus-organic a:focus-visible {
    outline: 3px solid var(--lotus-green-deep);
    outline-offset: 4px;
}

body.lotus-organic {
    --lotus-pink-accent: #D77DBF;
    --lotus-gradient-yellow: #E8D9A9;
    --lotus-gradient-pink: #E3C1D1;
}

.lotus-organic .lotus-overview,
.lotus-organic .lotus-challenge,
.lotus-organic .lotus-prototype {
    background: linear-gradient(
        135deg,
        var(--lotus-gradient-yellow) 0%,
        var(--lotus-gradient-pink) 100%
    );
}

.lotus-organic .lotus-direction,
.lotus-organic .lotus-brand {
    background: linear-gradient(
        225deg,
        var(--lotus-gradient-yellow) 0%,
        var(--lotus-gradient-pink) 100%
    );
}

.lotus-organic .lotus-process {
    background: linear-gradient(
        135deg,
        #FBE5ED 0%,
        #FFF5CC 100%
    );
}

.lotus-organic .lotus-challenge-card {
    background: #CAE8F9;
}

.lotus-organic .lotus-solution-card {
    background: #DDF7DF;
}

.lotus-organic .lotus-eyebrow {
    color: #B83268;
}

.lotus-organic .lotus-prototype-overlay {
    background: rgba(80, 21, 47, 0.94);
    color: #FFFFFF;
}

.lotus-organic .lotus-prototype {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: clamp(28px, 5vw, 58px);
    border: 1px solid rgba(184, 50, 104, 0.12);
    border-radius: 26px;
}

.lotus-organic .lotus-prototype .lotus-section-heading {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.lotus-organic .lotus-prototype .lotus-section-heading h2 {
    color: #50152F;
}

.lotus-organic .lotus-prototype .lotus-section-heading > p:last-child {
    color: #302832;
    line-height: 1.8;
}

.lotus-organic .lotus-prototype .prototype-image-link {
    display: block;
    position: relative;
    width: min(100%, 240px);
    min-width: 0;
    margin: 4px auto;
    overflow: hidden;
    border: 3px solid #FFFFFF;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(80, 21, 47, 0.13);
}

.lotus-organic .lotus-prototype .prototype-image-link img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.lotus-organic .lotus-prototype .prototype-image-link:hover img {
    transform: scale(1.02);
}

.lotus-organic .lotus-prototype-overlay {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 8px;
    box-sizing: border-box;
    font-family: "Barlow Condensed", sans-serif;
    font-size:1.125rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.lotus-organic .lotus-prototype .prototype-image-link:hover
.lotus-prototype-overlay,
.lotus-organic .lotus-prototype .prototype-image-link:focus-visible
.lotus-prototype-overlay {
    opacity: 1;
}

.lotus-organic .lotus-prototype .lotus-prototype-button {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 14px 30px;
    border: 2px solid #50152F;
    border-radius: 999px;
    background: #50152F;
    color: #FFFFFF;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-align: center;
    text-decoration: none;
}

.lotus-organic .lotus-prototype .lotus-prototype-button:hover {
    background: #B83268;
    border-color: #B83268;
    color: #FFFFFF;
}

.lotus-organic .lotus-direction .story-image,
.lotus-organic .lotus-process .story-image {
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
}

.lotus-organic .lotus-direction .story-image img,
.lotus-organic .lotus-process .story-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.lotus-organic .lotus-feature-image {
    width: 100%;
    max-width: 620px;
    margin: 30px auto 44px;
    padding: clamp(10px, 1.5vw, 18px);
    box-sizing: border-box;
}

.lotus-organic .lotus-feature-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.lotus-organic .lotus-brand .lotus-logo-animation {
    width: 100%;
    max-width: 760px;
    margin: 28px auto 0;
}

.lotus-organic .lotus-contact .enter-button {
    display: inline-block;
    width: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #00E5FF;
    box-shadow: none;
    font-family: "Barlow Condensed", sans-serif;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.35em;
	text-transform: uppercase;
    font-weight: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

.lotus-organic .lotus-contact .enter-button:hover {
    border: none;
    background: transparent;
    color: #FFFFFF;
    box-shadow: none;
    transform: none;
}

body.lotus-organic {
    --lotus-pink-accent: #F09BC5;
    --lotus-gradient-green: #426B4B;
    --lotus-gradient-pink: #A94F76;
    --lotus-gradient-blue: #648FA9;
}

body.lotus-organic .lotus-overview,
body.lotus-organic .lotus-challenge,
body.lotus-organic .lotus-prototype,
body.lotus-organic .lotus-experience,
body.lotus-organic .lotus-process {
    background: linear-gradient(
        135deg,
        #426B4B 0%,
        #A94F76 58%,
        #648FA9 100%
    );
    color: #FFF8FC;
}

body.lotus-organic .lotus-direction,
body.lotus-organic .lotus-brand {
    background: linear-gradient(
        225deg,
        #426B4B 0%,
        #A94F76 58%,
        #648FA9 100%
    );
    color: #FFF8FC;
}

body.lotus-organic .lotus-section h2,
body.lotus-organic .lotus-section h3,
body.lotus-organic .project-story h2,
body.lotus-organic .project-story h3,
body.lotus-organic .lotus-section p,
body.lotus-organic .project-story .story-text p {
    color: #FFF8FC;
}

body.lotus-organic .lotus-eyebrow {
    color: #FFD0E5;
}

body.lotus-organic .lotus-statement,
body.lotus-organic .lotus-challenge-card,
body.lotus-organic .lotus-solution-card {
    background: rgba(25, 17, 25, 0.58);
    color: #FFF8FC;
    border-color: rgba(255, 208, 229, 0.35);
}

body.lotus-organic .lotus-feature-image figcaption,
body.lotus-organic .story-image > p {
    color: #FFF0F7;
}

body.lotus-organic .project-story h2,
body.lotus-organic .lotus-section-heading h2 {
    color: #E6F5FF;
}

body.lotus-organic .project-story h2::after,
body.lotus-organic .lotus-section-heading h2::after {
    background-color: #00E5FF;
}

body.lotus-organic .lotus-number {
    color: #F3B7D5;
}

body.lotus-organic .lotus-prototype .lotus-section-heading p,
body.lotus-organic .lotus-prototype .lotus-prototype-overlay {
    color: #FFFFFF;
}

body.lotus-organic .lotus-contact > p {
    color: #FFFFFF;
    font-size:18px;
    font-weight: 400;
    line-height: 1.6;
}

body.lotus-organic .lotus-overview h2,
body.lotus-organic .lotus-challenge .lotus-section-heading h2,
body.lotus-organic .lotus-prototype .lotus-section-heading h2,
body.lotus-organic .lotus-experience .lotus-section-heading h2,
body.lotus-organic .lotus-brand .lotus-section-heading h2 {
    color: #E6F5FF !important;
}

body.lotus-organic .lotus-prototype .lotus-section-heading p {
    color: #FFFFFF !important;
}

body.lotus-organic .lotus-prototype-overlay {
    color: #FFFFFF !important;
}

body.lotus-organic .project-story h2,
body.lotus-organic .lotus-section h2,
body.lotus-organic .lotus-section-heading h2 {
    color: #E6F5FF !important;
}

body.lotus-organic .project-story h2::after,
body.lotus-organic .lotus-section h2::after,
body.lotus-organic .lotus-section-heading h2::after {
    content: none !important;
    display: none !important;
}

body.lotus-organic .lotus-decoration {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 0;
    width: clamp(75px, 10vw, 125px);
    height: auto;
    color: #FFD0E5;
    opacity: 0.28;
    pointer-events: none;
}

body.lotus-organic .lotus-overview,
body.lotus-organic .lotus-challenge,
body.lotus-organic .lotus-brand {
    position: relative;
    overflow: hidden;
}

body.lotus-organic .lotus-overview .story-text,
body.lotus-organic .lotus-overview .story-image,
body.lotus-organic .lotus-challenge .lotus-section-heading,
body.lotus-organic .lotus-challenge .lotus-challenge-grid,
body.lotus-organic .lotus-brand .lotus-section-heading,
body.lotus-organic .lotus-brand .lotus-logo-animation {
    position: relative;
    z-index: 1;
}

body.lotus-organic .lotus-prototype-showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 5vw, 64px);
    width: 100%;
    margin: 30px auto 18px;
}

body.lotus-organic .lotus-prototype .lotus-prototype-showcase
.prototype-image-link {
    flex: 0 1 240px;
    width: 240px;
    min-width: 0;
    margin: 0;
}

body.lotus-organic .lotus-prototype-callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 1 220px;
    gap: 0;
    color: #FFD0E5;
    font-family: "Caveat", cursive;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transform: rotate(-3deg);
    transition: color 0.25s ease, transform 0.25s ease;
}

body.lotus-organic .lotus-curved-arrow {
    display: block;
    width: 120px;
    max-width: 100%;
    height: auto;
    margin-bottom: 4px;
    color: #FFD0E5;
}

body.lotus-organic .lotus-prototype-callout:hover {
    color: #FFFFFF;
    transform: rotate(0deg) translateY(-2px);
}

body.lotus-organic .lotus-prototype-callout:hover .lotus-curved-arrow {
    color: #FFFFFF;
}

body.lotus-organic .lotus-callout-row {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 54px);
    width: 100%;
    margin: 42px auto;
}

body.lotus-organic .lotus-callout-row > * {
    min-width: 0;
}

body.lotus-organic .lotus-callout-row.lotus-callout-left
.lotus-handwritten-callout {
    flex: 0 0 220px;
}

body.lotus-organic .lotus-callout-row.lotus-callout-left
> figure,
body.lotus-organic .lotus-callout-row.lotus-callout-right
> figure {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    margin: 0;
}

body.lotus-organic .lotus-games-figure .video-player {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

body.lotus-organic .lotus-brand .lotus-logo-animation {
    width: auto;
    max-width: none;
    margin: 0;
}

body.lotus-organic .lotus-brand .lotus-logo-animation .video-player {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

body.lotus-organic .lotus-handwritten-callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 220px;
    color: #F3B7D5;
    font-family: "Caveat", cursive;
    font-size: clamp(25px, 2.8vw, 34px);
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
}

body.lotus-organic .lotus-curved-arrow {
    display: block;
    width: 125px;
    max-width: 100%;
    height: auto;
    margin: 6px auto 0;
    color: currentColor;
    overflow: visible;
}

body.lotus-organic .lotus-callout-right
.lotus-handwritten-callout {
    flex: 0 0 220px;
}

body.lotus-organic .lotus-games-figure figcaption,
body.lotus-organic .lotus-logo-animation figcaption {
    margin-top: 14px;
    color: #FFF8FC;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
}

body.lotus-organic .lotus-games-figure figcaption strong {
    display: block;
    margin-bottom: 4px;
    color: #E6F5FF;
    font-size: 18px;
}

body.lotus-organic {
    background: linear-gradient(
        120deg,
        #050507 0%,
        #173C61 35%,
        #71344F 66%,
        #284C37 100%
    );
    background-attachment: fixed;
    color: #FFFFFF;
}

body.lotus-organic .lotus-overview {
    background: #173C61;
}

body.lotus-organic .lotus-challenge {
    background: #71344F;
}

body.lotus-organic .lotus-prototype {
    background: #284C37;
}

body.lotus-organic .lotus-direction {
    background: #24445A;
}

body.lotus-organic .lotus-process {
    background: #302832;
}

body.lotus-organic .lotus-experience {
    background: #284C37;
}

body.lotus-organic .lotus-brand {
    background: #71344F;
}

body.lotus-organic .lotus-section,
body.lotus-organic .project-story {
    color: #FFFFFF;
}

body.lotus-organic .lotus-section p,
body.lotus-organic .project-story .story-text p,
body.lotus-organic .story-image > p {
    color: #FFFFFF;
}

body.lotus-organic .project-story h2,
body.lotus-organic .lotus-section h2,
body.lotus-organic .lotus-section-heading h2 {
    color: #E6F5FF !important;
}

body.lotus-organic .project-story h2::after,
body.lotus-organic .lotus-section h2::after,
body.lotus-organic .lotus-section-heading h2::after {
    content: none !important;
    display: none !important;
}

body.lotus-organic .lotus-eyebrow {
    color: #F3B7D5;
    font-size: 18px;
    line-height: 1.5;
}

body.lotus-organic .lotus-challenge-card {
    background: #365F7D;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

body.lotus-organic .lotus-solution-card {
    background: #426B4B;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

body.lotus-organic .lotus-statement,
body.lotus-organic .lotus-statement p,
body.lotus-organic .lotus-statement h3 {
    color: #FFFFFF;
}

body.lotus-organic .lotus-number {
    color: #F3B7D5;
}

body.lotus-organic .story-text p,
body.lotus-organic .lotus-section p,
body.lotus-organic .story-image > p,
body.lotus-organic .lotus-feature-image figcaption,
body.lotus-organic .lotus-games-figure figcaption,
body.lotus-organic .lotus-logo-animation figcaption {
    font-size: 18px;
}

body.lotus-organic .lotus-handwritten-callout {
    color: #F3B7D5;
}

body.lotus-organic .lotus-prototype-overlay {
    font-size: 18px;
    color: #FFFFFF;
}

body.lotus-organic .lotus-contact > p {
    color: #FFFFFF;
    font-size: 18px;
}

body.lotus-organic .project-title h1,
body.lotus-organic .project-title-nav h1 {
    color: #F3B7D5;
}

body.lotus-organic .project-title .title-break {
    color: #E6F5FF;
}

body.lotus-organic .project-year {
    color: #F3B7D5;
}

body.lotus-organic .story-image > p,
body.lotus-organic .lotus-feature-image figcaption,
body.lotus-organic .lotus-games-figure figcaption,
body.lotus-organic .lotus-logo-animation figcaption {
    color: #FFFFFF !important;
    font-size: 18px;
    line-height: 1.6;
}

body.lotus-organic .project-title-nav h1 {
    color: #00E5FF !important;
}

body.lotus-organic .lotus-details .detail-box h3 {
    color: #F3B7D5 !important;
    font-size: 18px;
}

body.lotus-organic .lotus-details .detail-box {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

body.lotus-organic .lotus-prototype-showcase .prototype-image-link {
    display: block;
    flex: 0 1 180px;
    width: 180px;
    max-width: 180px;
    min-width: 0;
    margin: 0;
}

body.lotus-organic .lotus-prototype-showcase .prototype-image-link img {
    display: block;
    width: 100%;
    height: auto;
}

body.lotus-organic .lotus-games-figure {
    flex: 0 1 180px;
    width: 180px;
    max-width: 180px;
    min-width: 0;
    margin: 0;
}

body.lotus-organic .lotus-games-figure video.video-player {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

body.lotus-organic .lotus-callout-row > figure.lotus-games-figure {
    flex: 0 0 180px;
    width: 180px;
    max-width: 180px;
    min-width: 0;
    margin: 0;
}

body.lotus-organic .lotus-callout-row > figure.lotus-games-figure video.video-player {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.clean-organic .clean-gallery > figure.clean-homepage-feature:first-of-type {
    width: min(78%, 760px);
    margin-right: auto;
    margin-left: auto;
}

.clean-organic .clean-gallery > figure.clean-homepage-feature:first-of-type img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.clean-organic .clean-contact p {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

body.deets-page {
    --deets-plum: #302632;
    --deets-lavender: #AB8FA8;
    --deets-mauve: #866F84;
    --deets-yellow: #E8E45C;
    --deets-pale: #C6B9C4;
    --deets-white: #FFFFFF;
    --deets-cyan: #00E5FF;
    --deets-panel: #3D3042;
    --deets-panel-light: #49384E;
    --deets-panel-border: #5C4961;

    color: var(--deets-white);
    overflow-x: hidden;
}

.deets-page .project-container {
    position: relative;
    z-index: 2;
}

body.deets-page .project-year {
    color: #a690a6;
}

body.deets-page .project-title h1 {
    color: var(--deets-mauve) !important;
}

body.deets-page .project-title .title-break {
    display: block;
    margin-top: 8px;
    color: var(--deets-yellow) !important;
}

body.deets-page .project-title-nav h1 {
    color: var(--deets-cyan) !important;
}

.deets-page .deets-intro-copy > .deets-text-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 12px 0 0 auto;
    text-align: right;
}

.deets-page .deets-prototype-section .enter-button::after {
    display: none !important;
    content: none !important;
}

.deets-page #deets-screens .deets-section-heading {
    margin-bottom: 36px;
}

.deets-page #deets-categories .deets-category-grid {
    margin-top: 34px;
}

.deets-page .deets-life-illustration {
    margin-bottom: 38px;
}

.deets-page .project-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.deets-page .project-details .detail-box {
    box-sizing: border-box;
    min-width: 0;
    padding: 20px 10px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--deets-white);
    box-shadow: none;
}

.deets-page .project-details .detail-box h3 {
    margin-bottom: 12px;
    color: var(--deets-yellow);
    letter-spacing: 0.12em;
}

.deets-page .project-details .detail-box p {
    margin: 5px 0;
    color: var(--deets-white);
    line-height: 1.6;
}

.deets-page .deets-eyebrow {
    margin: 0 0 14px;
    color: var(--deets-yellow);
    font-family: "Barlow Condensed", sans-serif;
    font-size:1.125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
}

.deets-page .deets-panel h2,
.deets-page .deets-panel h3,
.deets-page .deets-section h2,
.deets-page .deets-section h3 {
    color: var(--deets-white);
}

.deets-page .deets-panel p,
.deets-page .deets-section p {
    line-height: 1.8;
}

.deets-page .deets-panel,
.deets-page .deets-section {
    margin-top: clamp(56px, 8vw, 100px);
}

.deets-page .deets-panel {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    padding: clamp(26px, 5vw, 64px);
    border: 1px solid var(--deets-panel-border);
    border-radius: 22px;
    background: var(--deets-panel);
    color: var(--deets-white);
}

.deets-page .deets-panel .deets-eyebrow {
    color: var(--deets-yellow);
}

.deets-page .deets-panel h2,
.deets-page .deets-panel h3,
.deets-page .deets-panel p:not(.deets-eyebrow) {
    color: var(--deets-white);
}

.deets-page h2 {
    letter-spacing: 0.045em;
    line-height: 1.16;
}

.deets-page h3 {
    letter-spacing: 0.035em;
    line-height: 1.25;
}

.deets-page .deets-text-link {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    color: var(--deets-yellow);
    font-family: "Jost", sans-serif;
    font-size:clamp(1.125rem, 1.8vw, 1.35rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.deets-page .deets-text-link:hover {
    border-bottom-color: var(--deets-yellow);
    color: var(--deets-white);
}

.deets-page .deets-text-link span {
    margin-left: 5px;
    color: var(--deets-yellow);
}

.deets-page .deets-prototype-section .enter-button {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 30px 0 0;
    padding: 14px 38px;
    border: 1px solid var(--deets-yellow);
    border-radius: 0;
    background: var(--deets-yellow);
    color: var(--deets-plum);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.25s ease, color 0.25s ease;
}

.deets-page .deets-prototype-section .enter-button:hover {
    border-color: var(--deets-yellow);
    background: var(--deets-mauve);
    color: var(--deets-white);
}

.deets-page .deets-intro {
    display: block;
    width: 100%;
    padding-top: 32px;
}

.deets-page .deets-intro-copy {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.deets-page .deets-intro h2,
.deets-page .deets-prototype-copy h2,
.deets-page .deets-system-copy h2,
.deets-page .deets-settings-copy h2 {
    margin: 0 0 22px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(2.2rem, 4.6vw, 4rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0.045em;
}

.deets-page .deets-lead {
    color: var(--deets-white);
    font-size:clamp(1.125rem, 1.5vw, 1.2rem);
}

.deets-page .deets-intro-copy > p {
    margin-bottom: 22px;
}

.deets-page .deets-intro-copy > p:last-of-type {
    margin-bottom: 26px;
}

.deets-page .deets-intro-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 155px;
    max-width: 42%;
    margin: 0 auto 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.deets-page .deets-intro-logo img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    box-shadow: none;
    object-fit: contain;
}

.deets-page .deets-logo-artwork {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 280px;
    isolation: isolate;
}

.deets-page .deets-logo-image {
    position: relative;
    z-index: 1;
    width: 100%;
}

.deets-page .deets-logo-image img {
    display: block;
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
    border: 0;
    box-shadow: none;
    object-fit: contain;
}

.deets-page .deets-image-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    color: var(--deets-yellow);
    font-family: "Barlow Condensed", sans-serif;
    font-size:1.125rem;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.deets-page .deets-prototype-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
    align-items: center;
    gap: clamp(30px, 6vw, 80px);
}

.deets-page .deets-prototype-copy,
.deets-page .deets-section-intro {
    min-width: 0;
}

.deets-page .deets-prototype-copy > p,
.deets-page .deets-section-intro > p:not(.deets-eyebrow) {
    color: var(--deets-pale);
    line-height: 1.8;
}

.deets-page .deets-prototype-preview {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
    padding: 8px;
    overflow: hidden;
    border: 1px solid rgba(232, 228, 92, 0.55);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.deets-page .deets-prototype-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    border-radius: 8px;
    object-fit: contain;
}

.deets-page .deets-image-link-label {
    display: block;
    padding: 15px 4px 5px;
    color: var(--deets-yellow);
    font-family: "Barlow Condensed", sans-serif;
    font-size:1.125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
}

.deets-page .deets-prototype-preview:hover {
    border-color: var(--deets-yellow);
}

.deets-page .deets-prototype-section .deets-text-link {
    display: inline-block;
    padding: 12px 42px;
    border: 1px solid var(--deets-yellow);
    border-radius: 999px;
    color: var(--deets-yellow);
    text-align: center;
    text-decoration: none;
}

.deets-page .deets-prototype-section .deets-text-link:hover {
    border-color: var(--deets-yellow);
    background: rgba(232, 228, 92, 0.08);
    color: var(--deets-white);
}

.deets-page .deets-prototype-feature {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(30px, 6vw, 80px);
}

.deets-page .deets-prototype-artwork {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 18px;
    border: 1px solid rgba(198, 185, 196, 0.25);
    background: rgba(48, 38, 50, 0.55);
    text-align: center;
    text-decoration: none;
    isolation: isolate;
}

.deets-page .deets-prototype-artwork img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-height: 650px;
    margin: 0 auto;
    border: 0;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
    object-fit: contain;
    transition: transform 0.3s ease;
}

.deets-page .deets-prototype-artwork:hover img {
    transform: translateY(-4px);
}

.deets-page .deets-prototype-overlay {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 18px;
    color: var(--deets-yellow);
    font-family: "Barlow Condensed", sans-serif;
    font-size:1.125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.deets-page .deets-screen-feature,
.deets-page .deets-home-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
    margin-bottom: 40px;
}

.deets-page .deets-screen-image {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(198, 185, 196, 0.28);
    border-radius: 6px;
    background: rgba(48, 38, 50, 0.8);
}

.deets-page .deets-screen-image img,
.deets-page .deets-system-image img,
.deets-page .deets-settings-image img,
.deets-page .deets-system-artwork img,
.deets-page .deets-settings-artwork img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    object-fit: contain;
}

.deets-page .deets-screen-copy h3,
.deets-page .deets-screen-card h3,
.deets-page .deets-home-caption h3 {
    margin: 0 0 12px;
    color: var(--deets-white);
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.15;
}

.deets-page .deets-screen-copy > p:last-child,
.deets-page .deets-screen-card > p:last-child,
.deets-page .deets-home-caption p {
    color: var(--deets-pale);
}

.deets-page .deets-screen-grid,
.deets-page .deets-supporting-screens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 36px);
}

.deets-page .deets-screen-card {
    min-width: 0;
    padding: clamp(16px, 2.5vw, 28px);
    border: 1px solid rgba(198, 185, 196, 0.25);
    border-radius: 6px;
    background: rgba(48, 38, 50, 0.65);
}

.deets-page .deets-screen-card .deets-screen-image {
    width: 50%;
    max-width: 300px;
    margin: 0 auto 24px;
}

.deets-page .deets-screen-number {
    display: block;
    margin-bottom: 12px;
    color: var(--deets-yellow);
    font-family: "Barlow Condensed", sans-serif;
    font-size:1.125rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.deets-page .deets-system-section,
.deets-page .deets-identity-section {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
}

.deets-page .deets-system-copy,
.deets-page .deets-identity-copy {
    min-width: 0;
}

.deets-page .deets-system-copy > p:not(.deets-eyebrow),
.deets-page .deets-identity-copy > p:not(.deets-eyebrow) {
    color: var(--deets-pale);
    line-height: 1.8;
}

.deets-page .deets-system-image {
    min-width: 0;
    overflow: hidden;
    border-radius: 6px;
    background: var(--deets-pale);
}

.deets-page .deets-palette {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 26px;
}

.deets-page .deets-swatch {
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    min-width: 0;
    min-height: 72px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.deets-page .deets-swatch span {
    font-family: "DM Mono", monospace;
    font-size:18px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.deets-page .swatch-plum {
    background: #302632;
    color: #FFFFFF;
}

.deets-page .swatch-lavender {
    background: #AB8FA8;
    color: #302632;
}

.deets-page .swatch-mauve {
    border: 2px solid #E8E45C;
    background: #866F84;
    color: #FFFFFF;
}

.deets-page .swatch-yellow {
    background: #E8E45C;
    color: #302632;
}

.deets-page .swatch-gray {
    background: #C6B9C4;
    color: #302632;
}

.deets-page .swatch-white {
    background: #FFFFFF;
    color: #302632;
}

.deets-page .deets-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
}

.deets-page .deets-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    padding: 24px 16px;
    border: 1px solid var(--deets-panel-border);
    border-radius: 18px;
    background: var(--deets-panel-light);
    color: var(--deets-white);
    text-align: center;
}

.deets-page .deets-category-orb {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 78px;
    height: 78px;
    margin-bottom: 20px;
    padding: 15px;
    overflow: hidden;
    border: 2px solid var(--deets-yellow);
    border-radius: 50%;
    background: var(--deets-yellow);
    color: var(--deets-plum);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    box-shadow: 0 0 0 7px rgba(171, 143, 168, 0.12);
}

.deets-page .deets-category-orb img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    border: 0;
    box-shadow: none;
    object-fit: contain;
}

.deets-page .deets-category-item h3 {
    margin: 0 0 8px;
    color: var(--deets-white);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
}

.deets-page .deets-category-item p {
    max-width: 260px;
    margin: 0;
    color: var(--deets-pale);
    font-size:1.125rem;
}

.deets-page .deets-category-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(74px, 9vw, 112px);
    aspect-ratio: 1;
    margin: 0 auto 18px;
    border: 3px solid var(--deets-yellow);
    border-radius: 50%;
    background: var(--deets-mauve);
    color: var(--deets-white);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 8px rgba(48, 38, 50, 0.2);
}

.deets-page .deets-life-grid,
.deets-page .deets-life-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 4vw, 32px);
    align-items: start;
}

.deets-page .deets-life-card {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    padding: 30px 26px;
    border: 1px solid rgba(232, 228, 92, 0.45);
    border-radius: 18px;
    background: var(--deets-panel-light);
    color: var(--deets-white);
}

.deets-page .deets-stage-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 24px;
    border: 2px solid var(--deets-yellow);
    border-radius: 50%;
    color: var(--deets-yellow);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
}

.deets-page .deets-life-card h3,
.deets-page .deets-life-copy h3 {
    margin: 0 0 10px;
    color: var(--deets-white);
    font-family: "Barlow Condensed", sans-serif;
    font-size: clamp(1.4rem, 2.3vw, 1.9rem);
    line-height: 1.15;
}

.deets-page .deets-stage-tag {
    margin: 0 0 16px;
    color: var(--deets-yellow);
    font-size:1.125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.deets-page .deets-life-card > p:last-child,
.deets-page .deets-life-copy p:last-child {
    margin-bottom: 0;
    color: var(--deets-pale);
}

.deets-page .deets-life-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(30px, 5vw, 70px);
    margin-bottom: 56px;
}

.deets-page .deets-life-feature-copy {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.deets-page .deets-life-illustration {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 100%;
    max-width: 520px;
    min-width: 0;
    margin: 24px auto;
}

.deets-page .deets-life-illustration img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.deets-page .deets-settings-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}

.deets-page .deets-settings-copy {
    width: 100%;
    max-width: 760px;
    min-width: 0;
}

.deets-page .deets-settings-copy h2 {
    margin-inline: auto;
}

.deets-page .deets-settings-copy > p {
    max-width: 700px;
    margin: 0 auto 18px;
    color: var(--deets-pale);
    line-height: 1.8;
}

.deets-page .deets-settings-image {
    width: 70%;
    max-width: 720px;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 6px;
    background: var(--deets-pale);
}

.deets-page .deets-settings-artwork img {
    max-width: 100%;
    margin: 0 auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.deets-page .deets-contact {
    position: relative;
    z-index: 2;
    margin-top: clamp(55px, 8vw, 100px);
    padding: 35px 15px 45px;
    text-align: center;
}

.deets-page .deets-contact p {
    color: var(--deets-white);
}

.deets-page .deets-contact .enter-button {
    border-radius: 0;
}

.deets-page a:focus-visible,
.deets-page button:focus-visible {
    outline: 2px solid var(--deets-yellow);
    outline-offset: 4px;
}

.deets-page .deets-growth-line {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 18px auto 0;
    overflow: visible;
}


/* ===== OCTOBER 2026 FINAL UI/UX REFINEMENTS ===== */

/* My Deets: preserve the project's muted plum/yellow palette. */
body.deets-page { font-size:18px; }

/* Clean Future Network: green title, compact prototype preview, no underline. */
body.clean-organic .project-title h1 { color:#7FD69A !important; }
body.clean-organic .clean-prototype-preview { width:min(212px,100%); max-width:212px; margin:0 auto; }
body.clean-organic .clean-prototype-button { margin-top:28px; }
body.clean-organic .clean-prototype .enter-button::after { display:none !important; }

/* Lotus Lingo: callout left; game walkthrough and prototype centered. */
body.lotus-organic .lotus-callout-row.lotus-callout-left { justify-content:flex-start; }
body.lotus-organic .lotus-games-figure { display:flex; flex:0 0 180px; flex-direction:column; align-items:center; width:180px; max-width:180px; margin-left:auto; margin-right:auto; align-self:center; }
body.lotus-organic .lotus-games-figure video.video-player { display:block; width:100%; max-width:100%; height:auto; margin:0 auto; }
body.lotus-organic .lotus-games-figure figcaption { width:max-content; max-width:none; margin:14px 0 0; text-align:center; white-space:nowrap; letter-spacing:.015em; }
body.lotus-organic .lotus-games-figure figcaption strong { display:block; margin-bottom:4px; font-size:18px; letter-spacing:.055em; white-space:nowrap; }
body.lotus-organic .lotus-statement h3, body.lotus-organic .lotus-feature-image figcaption strong { letter-spacing:.09em; }
body.lotus-organic .lotus-prototype { display:flex; flex-direction:column; align-items:center; text-align:center; }
body.lotus-organic .lotus-prototype .prototype-image-link { display:block; margin-left:auto; margin-right:auto; }
body.lotus-organic .lotus-prototype .lotus-prototype-button, body.lotus-organic .lotus-prototype .enter-button { align-self:center; }

/* Chrono Nexus: horizontal carousel, no hover glow or recoloring. */
.chrono-page .carousel-track { display:flex; align-items:flex-start; gap:36px; overflow-x:auto; overflow-y:hidden; padding:10px 8px 22px; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
.chrono-page .carousel-slide { position:relative; flex:0 0 min(65%,620px); width:min(65%,620px); min-width:0; margin:0; scroll-snap-align:start; }
.chrono-page .carousel-slide img { display:block; width:100%; max-width:100%; height:auto; filter:none; box-shadow:none; transition:none; }
.chrono-page .carousel-slide:hover img, .chrono-page .case-carousel .carousel-slide:hover img { filter:none !important; box-shadow:none !important; }


/* =========================================================
   TAGGED REPAIR — OCTOBER 2026
   Shared UI/UX project header, video, and overview alignment.
   Keep these overrides at the END of uiux.css so they win
   over older project-specific declarations above.
   ========================================================= */
body.project-page .project-container {
    box-sizing: border-box;
    width: min(1200px, 92vw);
    margin-inline: auto;
}

body.project-page .project-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
}

body.project-page .project-title {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    text-align: center;
}

body.project-page .project-title h1 {
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(36px, 4.2vw, 58px);
    line-height: 1.12;
}

body.project-page .project-title .title-break {
    display: block;
    width: 100%;
    margin: 8px auto 0;
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.08em;
}

body.project-page .project-hero.video-hero {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-inline: auto;
    text-align: center;
}

body.project-page .project-hero.video-hero .video-player {
    flex: 0 1 700px;
    width: min(70%, 700px);
    max-width: 700px;
    margin: 0 auto 45px;
}

body.project-page .project-hero.video-hero .video-player iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 0 auto;
}

body.project-page .project-year {
    display: block;
    width: 100%;
    margin: 0 auto 28px;
    text-align: center;
}

body.project-page .project-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    width: 100%;
    margin: 0 auto 70px;
}

body.project-page .project-details .detail-box {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    text-align: center;
}

body.project-page .project-details .detail-box h3,
body.project-page .project-details .detail-box p {
    font-size: max(18px, 1rem);
    overflow-wrap: anywhere;
}

/* My Deets: purple main title, yellow subtitle, and centered overview. */
body.deets-page .project-title h1 {
    color: var(--deets-purple, #866F84) !important;
}
body.deets-page .project-title .title-break {
    color: var(--deets-yellow, #E8E45C) !important;
    font-size: clamp(18px, 2vw, 28px);
    letter-spacing: 0.08em;
    text-align: center;
}
body.deets-page .project-details {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    text-align: center;
}

/* ============================================
   MY DEETS — REQUESTED PAGE ADJUSTMENTS
============================================ */

/* 01 / Dashboard: reduce the image container to 50%. */
body.deets-page #deets-screens .deets-screen-feature .deets-screen-image {
    width: 50%;
    max-width: none;
    margin-inline: auto;
}

/* Add 10px more space between the illustration and growth arrow. */
body.deets-page .deets-life-illustration .deets-growth-line {
    margin-top: 28px;
}

/* Keep all life-stage text together in the left column. */
body.deets-page .deets-life-text-column {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

/* Keep the illustration in the right column. */
body.deets-page .deets-life-illustration {
    grid-column: 2;
    grid-row: 1;
}

/* Stack the text and illustration on smaller screens. */
@media (max-width: 700px) {
    body.deets-page .deets-life-text-column {
        grid-column: 1;
        grid-row: 1;
    }

    body.deets-page .deets-life-illustration {
        grid-column: 1;
        grid-row: 2;
    }
}


/* Phasepoint: cyan hover treatment for Concept in Focus carousel. */
.chrono-page .carousel-slide:hover img,
.chrono-page .case-carousel .carousel-slide:hover img {
    filter: none !important;
    box-shadow: 0 0 0 2px #00E5FF, 0 0 24px rgba(0, 229, 255, 0.28) !important;
}

/* Bring the Lotus year closer to the walkthrough while keeping it centered
   above the four project-detail columns. */
body.lotus-organic .project-hero.video-hero.lotus-video {
    margin-bottom: 12px;
}

body.lotus-organic .project-year {
    margin: 0 auto 24px;
    text-align: center;
}

/* Overview: separate the copy from the mockup and style its caption with
   the existing solution green. */
body.lotus-organic .lotus-overview .story-text p:last-child {
    margin-bottom: clamp(26px, 4vw, 44px);
}

body.lotus-organic .lotus-overview .story-image {
    align-self: center;
    min-width: 0;
}

body.lotus-organic .lotus-overview .story-image > p {
    box-sizing: border-box;
    width: 100%;
    margin: 14px auto 0;
    padding: 12px 16px;
    background: #426B4B;
    color: #FFFFFF !important;
    text-align: center;
    line-height: 1.5;
}

/* Prototype: preserve the existing 240px image size and center it on the
   page; position the linked handwritten arrow/callout to its right. */
body.lotus-organic .lotus-prototype-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: clamp(18px, 3vw, 42px);
    width: 100%;
    margin: 30px auto 18px;
}

body.lotus-organic .lotus-prototype .lotus-prototype-showcase .prototype-image-link {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    flex: 0 0 240px;
    width: 240px;
    max-width: 100%;
    margin: 0;
    border-color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(54, 95, 125, 0.2);
}

body.lotus-organic .lotus-prototype-callout {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    width: 100%;
    max-width: 220px;
    margin: 0;
    color: #365F7D;
    transform: none;
}

body.lotus-organic .lotus-prototype-callout .lotus-curved-arrow {
    color: #365F7D;
}

body.lotus-organic .lotus-prototype-callout:hover,
body.lotus-organic .lotus-prototype-callout:focus-visible {
    color: #173C61;
    transform: translateY(-2px);
}

body.lotus-organic .lotus-prototype-callout:hover .lotus-curved-arrow,
body.lotus-organic .lotus-prototype-callout:focus-visible .lotus-curved-arrow {
    color: #173C61;
}

/* Use the existing challenge blue for the prototype hover overlay instead
   of introducing maroon. */
body.lotus-organic .lotus-prototype .prototype-image-link:hover,
body.lotus-organic .lotus-prototype .prototype-image-link:focus-visible {
    border-color: #365F7D;
}

body.lotus-organic .lotus-prototype .prototype-image-link:hover .lotus-prototype-overlay,
body.lotus-organic .lotus-prototype .prototype-image-link:focus-visible .lotus-prototype-overlay {
    background: rgba(54, 95, 125, 0.96);
    color: #FFFFFF !important;
}

/* Creative direction: challenge blue image panel, centered caption, and
   enough space before the following COLOR, TYPE & COMPONENTS eyebrow. */
body.lotus-organic .lotus-direction .story-image {
    box-sizing: border-box;
    padding: clamp(12px, 2vw, 22px);
    background: #365F7D;
}

body.lotus-organic .lotus-direction .story-image > p {
    margin: 14px auto 0;
    color: #FFFFFF !important;
    text-align: center;
}

body.lotus-organic .lotus-direction .story-text .lotus-eyebrow {
    margin-top: clamp(24px, 4vw, 44px);
}

body.lotus-organic .lotus-direction .story-text > p:first-child {
    margin-top: clamp(24px, 4vw, 44px);
}

/* Process: switch the former maroon/plum panel to the existing solution
   green. Scale the concept-map image and its caption together to 50%. */
body.lotus-organic .lotus-process {
    background: #426B4B;
    color: #FFFFFF;
}

body.lotus-organic .lotus-process .story-text p,
body.lotus-organic .lotus-process .story-text .lotus-eyebrow,
body.lotus-organic .lotus-process .story-text h2 {
    color: #FFFFFF !important;
}

body.lotus-organic .lotus-process .story-image {
    width: 50%;
    max-width: 270px;
    min-width: 0;
    justify-self: center;
    padding: 10px;
    background: #426B4B;
}

body.lotus-organic .lotus-process .story-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

body.lotus-organic .lotus-process .story-image > p {
    margin: 12px auto 0;
    color: #FFFFFF !important;
    text-align: center;
}

/* The app experience: keep the games video centered within the row while
   the handwritten callout remains on its left. */
body.lotus-organic .lotus-experience .lotus-callout-row.lotus-callout-left {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 5vw, 60px);
}

body.lotus-organic .lotus-experience .lotus-callout-row.lotus-callout-left > .lotus-handwritten-callout {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 220px;
    flex: initial;
}

body.lotus-organic .lotus-experience .lotus-callout-row.lotus-callout-left > .lotus-games-figure {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    width: 180px;
    max-width: 100%;
    flex: 0 1 180px;
    margin: 0 auto;
}

body.lotus-organic .lotus-experience .lotus-games-figure video.video-player {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Katakana lesson panel: challenge blue, centered white caption. */
body.lotus-organic .lotus-experience .lotus-feature-image {
    box-sizing: border-box;
    padding: clamp(12px, 2vw, 22px);
    background: #365F7D;
}

body.lotus-organic .lotus-experience .lotus-feature-image figcaption {
    align-items: center;
    width: 100%;
    padding: 16px 4px 4px;
    color: #FFFFFF !important;
    text-align: center;
}

body.lotus-organic .lotus-experience .lotus-feature-image figcaption strong,
body.lotus-organic .lotus-experience .lotus-feature-image figcaption span {
    color: #FFFFFF !important;
    text-align: center;
}

/* Chrono Nexus: retain each carousel image's natural proportions, prevent
   flex/grid stretching and overlapping, and keep the cyan hover outline. */
body.chrono-page .case-carousel {
    min-width: 0;
    max-width: 100%;
}

body.chrono-page .carousel-track {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 8px 22px;
    scroll-snap-type: x mandatory;
    isolation: isolate;
}

body.chrono-page .carousel-slide {
    position: relative;
    display: block;
    flex: 0 0 min(65%, 620px);
    width: min(65%, 620px);
    min-width: 0;
    max-width: 100%;
    height: auto;
    margin: 0;
    overflow: visible;
    scroll-snap-align: start;
}

body.chrono-page .carousel-slide img {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    max-height: none;
    margin: 0;
    object-fit: contain;
    object-position: center;
    filter: none;
    box-shadow: none;
    transition: box-shadow 0.25s ease;
}

body.chrono-page .carousel-slide:hover img,
body.chrono-page .case-carousel .carousel-slide:hover img {
    filter: none !important;
    box-shadow: 0 0 0 2px #00E5FF, 0 0 24px rgba(0, 229, 255, 0.28) !important;
}

body.chrono-page .ux-icon {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
}

body.chrono-page .ux-icon svg,
body.chrono-page .ux-icon img {
    display: block;
    width: 21px !important;
    max-width: 21px !important;
    height: 21px !important;
    max-height: 21px !important;
    object-fit: contain;
}

@media (max-width: 760px) {
    body.lotus-organic .lotus-prototype-showcase {
        grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr);
        gap: 12px;
    }

    body.lotus-organic .lotus-prototype-callout {
        max-width: 100%;
        font-size: clamp(18px, 3.5vw, 25px);
    }

    body.lotus-organic .lotus-prototype-callout .lotus-curved-arrow {
        width: 90px;
    }

    body.lotus-organic .lotus-process .story-image {
        width: 60%;
        max-width: 270px;
    }
}

@media (max-width: 560px) {
    body.lotus-organic .lotus-prototype-showcase {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    body.lotus-organic .lotus-prototype .lotus-prototype-showcase .prototype-image-link {
        flex: 0 1 240px;
        width: 240px;
        max-width: 100%;
    }

    body.lotus-organic .lotus-prototype-callout {
        align-self: center;
        width: auto;
        max-width: 100%;
    }

    body.lotus-organic .lotus-experience .lotus-callout-row.lotus-callout-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body.lotus-organic .lotus-experience .lotus-callout-row.lotus-callout-left > .lotus-handwritten-callout {
        order: 0;
        width: 100%;
        max-width: 220px;
    }

    body.lotus-organic .lotus-experience .lotus-callout-row.lotus-callout-left > .lotus-games-figure {
        order: 1;
        width: 180px;
        max-width: 75%;
    }

    body.lotus-organic .lotus-process .story-image {
        width: 70%;
        max-width: 270px;
    }

    body.chrono-page .carousel-slide {
        flex-basis: 88%;
        width: 88%;
    }
}


/* ============================================
   LOTUS LINGO — REQUESTED VISUAL REFINEMENTS
   October 2026
============================================ */

/* Match each eyebrow/title box to the requested existing palette color. */
body.lotus-organic .lotus-overview .lotus-eyebrow {
    background: #365F7D;
    color: #FFFFFF;
}

body.lotus-organic .lotus-prototype .lotus-eyebrow {
    background: #426B4B;
    color: #FFFFFF;
}

body.lotus-organic .lotus-direction .lotus-eyebrow {
    background: #365F7D;
    color: #FFFFFF;
}

body.lotus-organic .lotus-process .lotus-eyebrow {
    background: #71344F;
    color: #FFFFFF;
}

body.lotus-organic .lotus-experience .lotus-eyebrow {
    background: #426B4B;
    color: #FFFFFF;
}

body.lotus-organic .lotus-brand .lotus-eyebrow {
    background: #365F7D;
    color: #FFFFFF;
}

/* Keep the eyebrow boxes neat and consistent. */
body.lotus-organic .lotus-eyebrow {
    display: table;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 8px 14px;
    line-height: 1.5;
}

/* Remove the green box from the mobile app mockup caption. */
body.lotus-organic .lotus-overview .story-image > p {
    background: transparent;
    padding: 0;
}

/* Use the Design Opportunity maroon around the design-system image. */
body.lotus-organic .lotus-direction .story-image {
    background: #71344F;
}

/* Return the prototype arrow and link to the existing pink accent. */
body.lotus-organic .lotus-prototype-callout {
    color: #F3B7D5;
}

body.lotus-organic .lotus-prototype-callout .lotus-curved-arrow {
    color: #F3B7D5;
}

body.lotus-organic .lotus-prototype-callout:hover,
body.lotus-organic .lotus-prototype-callout:focus-visible {
    color: #F3B7D5;
    transform: translateY(-2px);
}

body.lotus-organic .lotus-prototype-callout:hover .lotus-curved-arrow,
body.lotus-organic .lotus-prototype-callout:focus-visible .lotus-curved-arrow {
    color: #F3B7D5;
}

/* Add consistent space after paragraphs throughout Lotus Lingo. */
body.lotus-organic .project-story .story-text p,
body.lotus-organic .lotus-section p {
    margin-bottom: 1.1em;
}

body.lotus-organic .project-story .story-text p:last-child,
body.lotus-organic .lotus-section p:last-child {
    margin-bottom: 0;
}

/* App concept map: text on the left, image on the right. */
body.lotus-organic .lotus-process {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
}

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

body.lotus-organic .lotus-process .story-image {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 100%;
    max-width: 360px;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #71344F;
}

/* Center the games video and make its presentation match the prototype. */
body.lotus-organic .lotus-experience .lotus-callout-row.lotus-callout-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

body.lotus-organic .lotus-experience .lotus-games-figure {
    display: flex;
    flex: 0 1 240px;
    flex-direction: column;
    align-items: center;
    width: 240px;
    max-width: 100%;
    margin: 0 auto;
}

body.lotus-organic .lotus-experience .lotus-games-figure video.video-player {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Put the animated-logo caption directly underneath its video. */
body.lotus-organic .lotus-brand .project-hero.video-hero.lotus-logo-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    gap: 0;
}

body.lotus-organic .lotus-brand .lotus-logo-animation .video-player {
    display: block;
    flex: none;
    width: min(100%, 760px);
    max-width: 760px;
    margin: 0 auto;
}

body.lotus-organic .lotus-brand .lotus-logo-animation figcaption {
    display: block;
    width: 100%;
    margin: 14px auto 0;
    text-align: center;
}

/* =========================================================
   CHRONO NEXUS — TARGETED OCTOBER 2026 REPAIRS
   ========================================================= */

/* 1. Overview summary: match the full width of both cards */
body.chrono-page .overview-summary {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}


/* 2. Restore the Chrono lightbox overlay */
body.chrono-page .lightbox {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(3, 8, 16, 0.92);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

body.chrono-page .lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.chrono-page .lightbox-box {
    position: relative;
    width: min(1200px, 96vw);
    max-height: 90vh;
    overflow: auto;
    box-sizing: border-box;
    padding: 34px;
    background: #081522;
    border: 1px solid rgba(0, 229, 255, 0.4);
    border-radius: 16px;
}

body.chrono-page .lightbox-main {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
    align-items: start;
    gap: 32px;
}

body.chrono-page .lightbox-image-panel {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.chrono-page .lightbox-image-large {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    cursor: default;
}

body.chrono-page .lightbox-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
}

body.chrono-page .lightbox-text-content {
    width: 100%;
}

body.chrono-page .lightbox-title {
    color: #00E5FF;
    margin-top: 0;
}

body.chrono-page .lightbox-description {
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.8;
}

body.chrono-page .lightbox-supporting-images {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

body.chrono-page .lightbox-supporting-images[hidden] {
    display: none !important;
}

body.chrono-page .lightbox-support-item {
    width: min(100%, 320px);
    margin: 0;
    text-align: right;
}

body.chrono-page .lightbox-support-item img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    margin-left: auto;
}

body.chrono-page .lightbox-support-item figcaption {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    text-align: right;
}

body.chrono-page .approach-card.lightbox-image img {
    cursor: zoom-in;
}


/* 3. Gallery: four images in two side-by-side pairs */
body.chrono-page .gallery-section .project-gallery-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 36px;
    width: 100%;
}

body.chrono-page .gallery-section .project-image-block {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

body.chrono-page .gallery-section .project-image-block img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
    margin-inline: auto;
}

body.chrono-page .gallery-section .project-image-block p {
    text-align: center;
}


/* Responsive adjustments for these same elements */
@media (max-width: 760px) {
    body.chrono-page .lightbox {
        padding: 12px;
    }

    body.chrono-page .lightbox-box {
        padding: 24px 18px;
        max-height: 94vh;
    }

    body.chrono-page .lightbox-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    body.chrono-page .lightbox-image-large {
        max-height: 48vh;
    }

    body.chrono-page .lightbox-supporting-images {
        align-items: center;
    }

    body.chrono-page .lightbox-support-item {
        width: min(100%, 320px);
        text-align: center;
    }

    body.chrono-page .lightbox-support-item figcaption {
        text-align: center;
    }

    body.chrono-page .gallery-section .project-gallery-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
}


/* =========================================================
   UI/UX CATEGORY PAGE — COMPACT DESKTOP GRID
   This file is loaded only by uiux.html.
   ========================================================= */


body.design-page .design-grid {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    width: 100%;
    max-width: 560px;
    gap: 32px;
    justify-content: center;
    align-content: start;
    align-items: start;
    margin: 10px auto 0;
}

body.design-page .design-card {
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
}

body.design-page .design-card .card-image-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    overflow: hidden;
}

body.design-page .design-card .card-image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.design-page .design-card .portfolio-card-title {
    margin: 8px 0 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
}

body.design-page .design-card .software-overlay {
    width: 100%;
    height: 100%;
}

/* Tablet */
@media (max-width: 900px) {
    body.design-page .design-grid {
        grid-template-columns: repeat(2, minmax(0, 220px));
        gap: 24px;
    }
}

/* Phone */
@media (max-width: 480px) {
    body.design-page .design-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    body.design-page .design-card .portfolio-card-title {
        font-size: 14px;
    }
}