/* Project page — Stripe customer story style (e.g. stripe.com/customers/hertz) */

.page-project .hero,
.page-project .timeline-section {
    display: none;
}


/* ==========================================================================
   PARALLAX SCROLL ANIMATIONS
   ========================================================================== */

/* Base parallax section styles */
.parallax-section {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.parallax-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax depth layers - elements move at different speeds */
.parallax-slow {
    --parallax-speed: 0.3;
}

.parallax-medium {
    --parallax-speed: 0.5;
}

.parallax-fast {
    --parallax-speed: 0.7;
}

/* Staggered children animations */
.parallax-section.is-visible .parallax-child {
    opacity: 1;
    transform: translateY(0);
}

.parallax-child {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.parallax-child:nth-child(1) { transition-delay: 0.1s; }
.parallax-child:nth-child(2) { transition-delay: 0.2s; }
.parallax-child:nth-child(3) { transition-delay: 0.3s; }
.parallax-child:nth-child(4) { transition-delay: 0.4s; }
.parallax-child:nth-child(5) { transition-delay: 0.5s; }

/* Hero parallax - special treatment */
.project-hero {
    opacity: 0;
    animation: heroFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.project-hero-visual {
    opacity: 0;
    transform: scale(0.98);
    animation: heroScaleIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

.project-hero-title {
    opacity: 0;
    animation: heroFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

/* Breadcrumb subtle entrance */
.project-breadcrumb {
    opacity: 0;
    transform: translateY(20px);
    animation: parallaxFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

/* Sidebar parallax */
.project-sidebar {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.project-sidebar.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.project-stat {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-sidebar.is-visible .project-stat:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.project-sidebar.is-visible .project-stat:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.project-sidebar.is-visible .project-stat:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

/* Section parallax animations */
.project-section {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.project-section-title {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-section-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.project-section > p {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible > p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* Result cards parallax - staggered entrance */
.project-result-cards {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-result-cards {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.project-result-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-result-card:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.project-section.is-visible .project-result-card:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.project-section.is-visible .project-result-card:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

/* Accordion parallax */
.project-accordion {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-accordion {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

/* Quote parallax */
.project-quote {
    opacity: 0;
    transform: translateY(50px) translateX(-20px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-quote {
    opacity: 1;
    transform: translateY(0) translateX(0);
    transition-delay: 0.5s;
}

/* Project navigation — always visible so users can navigate between projects */
.project-nav {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-nav.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax depth effect on scroll */
[data-parallax-depth] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Keyframe animations */
@keyframes parallaxFadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes parallaxScaleUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hero-specific: no vertical shift, stays at correct 60px padding */
@keyframes heroFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes heroScaleIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .parallax-section,
    .parallax-child,
    .project-hero,
    .project-hero-visual,
    .project-hero-title,
    .project-breadcrumb,
    .project-sidebar,
    .project-stat,
    .project-section,
    .project-section-title,
    .project-section > p,
    .project-result-cards,
    .project-result-card,
    .project-accordion,
    .project-quote,
    .project-nav,
    [data-parallax-depth],
    .process-stage,
    .process-stage-header,
    .process-stage-number,
    .process-stage-title,
    .process-stage-text,
    .process-insights,
    .process-insights-intro,
    .process-insights-list li,
    .process-stage-image,
    .process-ideas,
    .process-idea,
    .process-idea-title,
    .process-idea-text {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

.project-page {
    padding: 60px 0 clamp(3rem, 8vw, 6rem);
    position: relative;
    z-index: 1;
}

.project-page-inner {
    max-width: var(--layout-max-width);
    margin: 0 auto;
}

/* Breadcrumb */
.project-breadcrumb {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* PROJECT body-small: 14px - Inter (breadcrumb) */
.project-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--secondary-text);
}

.project-breadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: 0.35em;
    color: var(--secondary-text);
}

.project-breadcrumb a {
    color: var(--secondary-text);
    transition: color 0.2s ease;
}

.project-breadcrumb a:hover {
    color: var(--text-color);
}

.project-breadcrumb li[aria-current="page"] {
    color: var(--text-color);
    font-weight: 500;
}

/* Hero */
.project-hero {
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* PROJECT h1: 56px - Inter 600 (project title) */
.project-hero-title {
    font-family: var(--font-main);
    font-size: clamp(2rem, 5vw + 1.5rem, 3.5rem); /* 32px–56px */
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-top: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 0;
    color: var(--text-color);
}

.project-hero-subtitle {
    font-size: clamp(1rem, 1.25vw + 0.875rem, 1.25rem);
    line-height: 1.6;
    color: var(--secondary-text);
    margin: 0;
    font-weight: 500;
}

/* Hero visual: same Stripe-like background as result cards (uses --card-blur-* from .page-project) */
.project-hero-visual {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.project-hero-card-placeholder {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1200 / 550;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
    /* Same gradient as result cards; --card-blur-* and --card-blur-y set on .page-project */
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #f0f0f2;
}

[data-theme="light"] .project-hero-card-placeholder {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #eef0f2;
}

[data-theme="dark"] .project-hero-card-placeholder {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #18181b;
}

/* ==========================================================================
   HERO PHONE + SLIDING BUBBLES  (3-layer stack)
   Layer 1 – background image  (app screen content)
   Layer 2 – bubbles            (scrolling chips)
   Layer 3 – phone device frame (transparent PNG on top)
   ========================================================================== */
/* The outer card centres everything */
.project-hero-card-placeholder {
    position: relative;
    overflow: hidden;
}

/* Wrapper centres both images and the bubbles */
.hero-layers {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Both images: identical sizing, centred, full height */
.hero-bg-img,
.hero-phone-img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
    border-radius: 0;
}

/* Background: absolutely positioned behind, centred */
.hero-bg-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Phone frame: on top of everything, centred (flow element) */
.hero-phone-img {
    position: relative;
    z-index: 3;
    pointer-events: none;
}

/* Dark mode: gradient overlay to blend the light app screenshot into the dark card */
[data-theme="dark"] .hero-layers::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

/* Ensure bubbles sit above the dark overlay */
/* Bubbles match the phone screen width (inset from the device bezel)
   and sit 16px from the bottom */
.hero-bubbles {
    position: absolute;
    z-index: 2;
    bottom: 16px;
    left: 3%;
    right: 3%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    pointer-events: none;
}

.hero-bubbles-row {
    overflow: hidden;
}

.hero-bubbles-track {
    display: flex;
    gap: 10px;
    width: max-content;
    will-change: transform;
    animation: heroBubblesScroll 14s linear infinite;
}

/* Middle row scrolls in reverse for visual depth */
.hero-bubbles-track--reverse {
    animation-name: heroBubblesScrollReverse;
    animation-duration: 16s;
}

/* Third row slightly different speed */
.hero-bubbles-row:nth-child(3) .hero-bubbles-track {
    animation-duration: 12s;
}

.hero-bubble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 10px 16px;
    border-radius: 20px;
    font-family: var(--font-main);
    font-size: clamp(0.7rem, 1vw, 0.8125rem);
    font-weight: 500;
    line-height: 1.3;
    flex-shrink: 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-theme="dark"] .hero-bubble {
    background: rgba(40, 40, 45, 0.92);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-theme="light"] .hero-bubble {
    background: rgba(255, 255, 255, 0.82);
    color: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

/* Pause on hover */
.project-hero-card-placeholder:hover .hero-bubbles-track {
    animation-play-state: paused;
}

@keyframes heroBubblesScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes heroBubblesScrollReverse {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Responsive */
@media (max-width: 768px) {
    .hero-bubbles {
        bottom: 12px;
        gap: 6px;
    }

    .hero-bubble {
        padding: 6px 10px;
        font-size: 0.65rem;
        border-radius: 14px;
        gap: 3px;
    }

    .hero-bubbles-track {
        gap: 6px;
    }
}

/* ==========================================================================
   PHARMA HERO — same card as project.html, full-width image (no border/shadow)
   ========================================================================== */
.page-pharma .project-hero-card-placeholder {
    padding: 0;
    display: block;
    aspect-ratio: auto;
    overflow: hidden;
    min-height: 0;
    border: none !important;
    box-shadow: none !important;
    outline: none;
}

.page-pharma .pharma-hero-app {
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
}

.page-pharma .pharma-hero-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
    vertical-align: middle;
    border: none;
    outline: none;
}

/* Pharma hero: hide default phone/bubbles */
.page-pharma .hero-layers {
    display: none;
}

@media (max-width: 768px) {
    .page-pharma .project-hero-card-placeholder {
        padding: 0;
    }
}

/* Two columns: sticky sidebar left, scrolling content right */
.project-layout {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: 0;
    align-items: start;
    margin-top: clamp(2rem, 5vw, 3rem);
}

.project-sidebar {
    position: sticky;
    top: clamp(4rem, 8vw, 5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
}

.project-content-scroll {
    min-width: 0;
}

/* Stats (in sidebar) */
.project-stats {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 0;
}

.project-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* PROJECT h4: 20px - Inter 600 (sidebar stat values) */
.project-stat-value {
    font-family: var(--font-main);
    font-size: var(--text-h4);
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-color);
}

/* PROJECT body-small: 14px - Inter 500 (stat labels) */
.project-stat-label {
    font-family: var(--font-main);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--secondary-text);
}

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

    .project-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--line-color);
    }

    .project-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .project-hero-title {
        font-size: 28px;
    }

    /* All body text 15px on mobile */
    :root {
        --text-body: 15px;
    }

}

@media (max-width: 480px) {
    .project-hero-card-placeholder {
        aspect-ratio: 1 / 1;
    }

    /* H2 margin */
    h2.process-stage-title,
    .project-section-title {
        margin-bottom: 8px;
    }

    /* Section spacing 32px */
    .project-section {
        margin-bottom: 32px;
    }

    /* Tabs: horizontal scroll instead of wrap */
    .feature-gallery-tabs,
    .ideation-gallery-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
    }

    .feature-gallery-tabs::-webkit-scrollbar,
    .ideation-gallery-tabs::-webkit-scrollbar {
        display: none;
    }

    .feature-gallery-tab,
    .ideation-gallery-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Sections: Challenge, Solution, Results */
.project-section {
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* PROJECT h3: 32px - Inter 600 (section titles: About, The problem, Results) */
.project-section-title {
    font-family: var(--font-main);
    font-size: var(--text-h3);
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-color);
}

/* PROJECT body: 17px - Inter 500 (section copy) */
.project-section p {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.7;
    color: var(--secondary-text);
    margin: 0 0 1rem 0;
}

.project-section p:last-child {
    margin-bottom: 0;
}

/* Result stat badges - Apple style grid */
.project-result-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    margin: 20px 0 clamp(2.5rem, 6vw, 4rem) 0;
    padding: clamp(1rem, 3vw, 2rem) 0;
}

@media (max-width: 768px) {
    .project-result-cards {
        margin: 20px 0;
        padding: 0;
    }

    .project-fullwidth-section {
        margin-top: 20px;
    }

    .process-stages {
        gap: 40px;
    }

}

/* Card blur palette: set on .page-project so hero and result cards share the same gradients */
.page-project {
    --card-blur-y: 0.5;
    --card-blur-1a: rgba(200, 185, 230, 0.5);
    --card-blur-1b: rgba(220, 210, 245, 0.25);
    --card-blur-2a: rgba(255, 215, 190, 0.45);
    --card-blur-2b: rgba(255, 230, 210, 0.2);
}
[data-theme="light"] .page-project {
    --card-blur-1a: rgba(195, 178, 225, 0.48);
    --card-blur-1b: rgba(218, 208, 242, 0.22);
    --card-blur-2a: rgba(255, 208, 180, 0.42);
    --card-blur-2b: rgba(255, 228, 208, 0.18);
}
[data-theme="dark"] .page-project {
    --card-blur-1a: rgba(120, 95, 180, 0.4);
    --card-blur-1b: rgba(80, 65, 130, 0.2);
    --card-blur-2a: rgba(200, 130, 90, 0.35);
    --card-blur-2b: rgba(140, 95, 70, 0.18);
}
/* Accent 1: Blue — same opacity as default, pastel blue tint */
[data-accent="1"] .page-project {
    --card-blur-1a: rgba(185, 205, 240, 0.5);
    --card-blur-1b: rgba(210, 225, 250, 0.25);
    --card-blur-2a: rgba(190, 215, 255, 0.45);
    --card-blur-2b: rgba(210, 230, 255, 0.2);
}
[data-theme="light"] [data-accent="1"] .page-project {
    --card-blur-1a: rgba(180, 200, 235, 0.48);
    --card-blur-1b: rgba(208, 222, 248, 0.22);
    --card-blur-2a: rgba(185, 210, 250, 0.42);
    --card-blur-2b: rgba(208, 228, 255, 0.18);
}
[data-theme="dark"] [data-accent="1"] .page-project {
    --card-blur-1a: rgba(80, 110, 180, 0.4);
    --card-blur-1b: rgba(55, 80, 140, 0.2);
    --card-blur-2a: rgba(90, 130, 200, 0.35);
    --card-blur-2b: rgba(70, 110, 170, 0.18);
}
/* Accent 2: Pink — same opacity as default, pastel pink tint */
[data-accent="2"] .page-project {
    --card-blur-1a: rgba(235, 190, 215, 0.5);
    --card-blur-1b: rgba(245, 215, 235, 0.25);
    --card-blur-2a: rgba(240, 200, 220, 0.45);
    --card-blur-2b: rgba(250, 220, 240, 0.2);
}
[data-theme="light"] [data-accent="2"] .page-project {
    --card-blur-1a: rgba(230, 185, 210, 0.48);
    --card-blur-1b: rgba(242, 212, 232, 0.22);
    --card-blur-2a: rgba(235, 195, 218, 0.42);
    --card-blur-2b: rgba(248, 218, 238, 0.18);
}
[data-theme="dark"] [data-accent="2"] .page-project {
    --card-blur-1a: rgba(160, 75, 120, 0.4);
    --card-blur-1b: rgba(120, 50, 90, 0.2);
    --card-blur-2a: rgba(180, 95, 140, 0.35);
    --card-blur-2b: rgba(140, 70, 110, 0.18);
}
/* Accent 3: Green — same opacity as default, pastel green tint */
[data-accent="3"] .page-project {
    --card-blur-1a: rgba(185, 230, 200, 0.5);
    --card-blur-1b: rgba(210, 245, 220, 0.25);
    --card-blur-2a: rgba(190, 235, 210, 0.45);
    --card-blur-2b: rgba(210, 245, 225, 0.2);
}
[data-theme="light"] [data-accent="3"] .page-project {
    --card-blur-1a: rgba(180, 225, 195, 0.48);
    --card-blur-1b: rgba(208, 242, 218, 0.22);
    --card-blur-2a: rgba(185, 230, 205, 0.42);
    --card-blur-2b: rgba(208, 242, 222, 0.18);
}
[data-theme="dark"] [data-accent="3"] .page-project {
    --card-blur-1a: rgba(60, 140, 90, 0.4);
    --card-blur-1b: rgba(40, 100, 65, 0.2);
    --card-blur-2a: rgba(80, 160, 110, 0.35);
    --card-blur-2b: rgba(55, 120, 80, 0.18);
}
/* Accent 4: Purple — same opacity as default, pastel violet tint */
[data-accent="4"] .page-project {
    --card-blur-1a: rgba(220, 190, 245, 0.5);
    --card-blur-1b: rgba(236, 218, 250, 0.25);
    --card-blur-2a: rgba(210, 178, 240, 0.45);
    --card-blur-2b: rgba(228, 205, 248, 0.2);
}
[data-theme="light"] [data-accent="4"] .page-project {
    --card-blur-1a: rgba(212, 178, 238, 0.48);
    --card-blur-1b: rgba(232, 210, 246, 0.22);
    --card-blur-2a: rgba(202, 168, 232, 0.42);
    --card-blur-2b: rgba(224, 202, 242, 0.18);
}
[data-theme="dark"] [data-accent="4"] .page-project {
    --card-blur-1a: rgba(122, 74, 180, 0.4);
    --card-blur-1b: rgba(90, 54, 136, 0.2);
    --card-blur-2a: rgba(142, 92, 196, 0.35);
    --card-blur-2b: rgba(108, 68, 156, 0.18);
}

/* Apple-style result badge: minimal, no card background */
.project-result-card {
    border: none;
    padding: 0;
    text-align: left;
    position: relative;
    background: transparent;
}

/* PROJECT h1: large metric numbers - Apple badge style with gradient */
h1.project-result-card-value {
    display: block;
    font-family: var(--font-main);
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0 0 clamp(0.5rem, 1.5vw, 0.75rem) 0;
    position: relative;
    /* Default gradient - grayscale (light theme) */
    background: linear-gradient(90deg, #18181b 0%, #52525b 50%, #71717a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dark theme default gradient */
[data-theme="dark"] h1.project-result-card-value {
    background: linear-gradient(90deg, #ffffff 0%, #d4d4d8 50%, #a1a1aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Accent 1: Blue - Apple-style gradient (muted indigo-blue) */
[data-accent="1"] h1.project-result-card-value {
    background: linear-gradient(90deg, #1e3a5f 0%, #2563a0 40%, #3b7fc4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"][data-accent="1"] h1.project-result-card-value {
    background: linear-gradient(90deg, #93c5fd 0%, #60a5fa 40%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Accent 2: Pink - Apple-style gradient */
[data-accent="2"] h1.project-result-card-value {
    background: linear-gradient(90deg, #831843 0%, #be185d 40%, #db2777 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"][data-accent="2"] h1.project-result-card-value {
    background: linear-gradient(90deg, #fbcfe8 0%, #f472b6 40%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Accent 3: Green - Apple-style gradient */
[data-accent="3"] h1.project-result-card-value {
    background: linear-gradient(90deg, #14532d 0%, #15803d 40%, #22c55e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"][data-accent="3"] h1.project-result-card-value {
    background: linear-gradient(90deg, #bbf7d0 0%, #4ade80 40%, #22c55e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Accent 4: Purple - Apple-style gradient */
[data-accent="4"] h1.project-result-card-value {
    background: linear-gradient(90deg, #3b0764 0%, #7c3aed 40%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"][data-accent="4"] h1.project-result-card-value {
    background: linear-gradient(90deg, #f5f3ff 0%, #c4b5fd 40%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
    h1.project-result-card-value {
        color: var(--text-color);
        background: none;
        -webkit-text-fill-color: unset;
    }
}

/* PROJECT body: Apple badge description */
.project-result-card-desc {
    font-family: var(--font-main);
    font-size: var(--text-small);
    font-weight: 400;
    line-height: 1.4;
    color: var(--secondary-text);
    margin: 0;
    max-width: 220px;
}

@media (max-width: 600px) {
    .project-result-cards {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 5vw, 2.5rem);
    }

    h1.project-result-card-value {
        font-size: 48px;
    }

    .project-result-card-desc {
        font-size: 14px;
        max-width: none;
    }
}

/* Feature section (large image with expand, title and description below) */
.project-feature {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.25rem);
    margin: clamp(2.5rem, 5vw, 3.5rem) 0;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-feature {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.project-feature-image {
    position: relative;
    width: 100%;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-feature-image {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.6s;
}

.project-feature-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-feature-image:hover img {
    transform: scale(1.01);
}

.project-feature-expand {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: scale(1);
    transition: background 0.2s ease, transform 0.2s ease;
}

.project-feature-expand:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

.project-feature-expand:active {
    transform: scale(0.95);
}

.project-feature-expand svg {
    width: 20px;
    height: 20px;
}

.project-feature-title {
    font-family: var(--font-main);
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-feature-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}

.project-feature-desc {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.7;
    color: var(--secondary-text);
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-feature-desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}

/* Reduce motion for feature section */
@media (prefers-reduced-motion: reduce) {
    .project-feature,
    .project-feature-image,
    .project-feature-title,
    .project-feature-desc {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .project-feature-expand {
        opacity: 1;
        transform: scale(1);
    }
}

/* Lightbox overlay */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), 
                visibility 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: zoom-out;
}

.lightbox-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.lightbox-image-container {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
}

.lightbox-image {
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.6);
    transform: scale(0.85) translateY(30px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: default;
}

.lightbox-overlay.is-active .lightbox-image {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Close button */
.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
                background 0.2s ease;
}

.lightbox-overlay.is-active .lightbox-close {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

.lightbox-close:active {
    transform: scale(0.95);
}

.lightbox-close svg {
    width: 24px;
    height: 24px;
}

/* Navigation buttons */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.2s ease;
}

.lightbox-overlay.is-active .lightbox-nav {
    opacity: 1;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.lightbox-nav svg {
    width: 28px;
    height: 28px;
    transition: transform 0.2s ease;
}

.lightbox-nav-prev {
    left: 24px;
    transform: translateY(-50%) translateX(-20px);
}

.lightbox-overlay.is-active .lightbox-nav-prev {
    transform: translateY(-50%) translateX(0);
}

.lightbox-nav-prev:hover svg {
    transform: translateX(-3px);
}

.lightbox-nav-next {
    right: 24px;
    transform: translateY(-50%) translateX(20px);
}

.lightbox-overlay.is-active .lightbox-nav-next {
    transform: translateY(-50%) translateX(0);
}

.lightbox-nav-next:hover svg {
    transform: translateX(3px);
}

/* Image counter */
.lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    font-family: var(--font-main);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.lightbox-overlay.is-active .lightbox-counter {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Subsection (Final designs and solutions) */
.project-subsection {
    margin: clamp(2.5rem, 5vw, 3.5rem) 0;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-subsection {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.project-subsection-title {
    font-family: var(--font-main);
    font-size: clamp(1.5rem, 3vw + 1rem, 2rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color);
    margin: 0 0 1rem 0;
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-subsection-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s;
}

.project-subsection p {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.7;
    color: var(--secondary-text);
    margin: 0;
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .project-subsection p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

/* Reduce motion for subsection */
@media (prefers-reduced-motion: reduce) {
    .project-subsection,
    .project-subsection-title,
    .project-subsection p {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Process accordion */
.project-accordion {
    margin: clamp(2rem, 5vw, 3rem) 0;
    /* Dashed border matching grid background */
    border-top: 1px dashed var(--line-color);
    border-bottom: 1px dashed var(--line-color);
}

.project-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(1.25rem, 3vw, 1.5rem) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.project-accordion-header:hover .project-accordion-icon {
    opacity: 0.85;
}

.project-accordion-title {
    font-family: var(--font-main);
    font-size: var(--text-h3);
    font-weight: 600;
    color: #F0F4F6;
    margin: 0;
}

[data-theme="light"] .project-accordion-title {
    color: #21262A;
}

/* Button-style icon with plus/minus */
.project-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    /* Default (accent 0): solid text color background */
    background: var(--text-color);
    transition: opacity 0.2s ease;
}

/* Plus/minus lines - default uses bg color (inverted) */
.project-accordion-icon::before,
.project-accordion-icon::after {
    content: '';
    position: absolute;
    background: var(--bg-color);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Horizontal line */
.project-accordion-icon::before {
    width: 14px;
    height: 2px;
}

/* Vertical line */
.project-accordion-icon::after {
    width: 2px;
    height: 14px;
}

/* When expanded, hide vertical line (becomes minus) */
.project-accordion-header[aria-expanded="true"] .project-accordion-icon::after {
    opacity: 0;
    transform: rotate(90deg);
}

/* When a color is selected (not default), use opacity background */
[data-accent="1"] .project-accordion-icon,
[data-accent="2"] .project-accordion-icon,
[data-accent="3"] .project-accordion-icon,
[data-accent="4"] .project-accordion-icon {
    background: color-mix(in srgb, var(--user-accent) 15%, transparent);
}

[data-accent="1"] .project-accordion-header:hover .project-accordion-icon,
[data-accent="2"] .project-accordion-header:hover .project-accordion-icon,
[data-accent="3"] .project-accordion-header:hover .project-accordion-icon,
[data-accent="4"] .project-accordion-header:hover .project-accordion-icon {
    background: color-mix(in srgb, var(--user-accent) 25%, transparent);
    opacity: 1;
}

/* When a color is selected, plus/minus uses accent color */
[data-accent="1"] .project-accordion-icon::before,
[data-accent="1"] .project-accordion-icon::after,
[data-accent="2"] .project-accordion-icon::before,
[data-accent="2"] .project-accordion-icon::after,
[data-accent="3"] .project-accordion-icon::before,
[data-accent="3"] .project-accordion-icon::after,
[data-accent="4"] .project-accordion-icon::before,
[data-accent="4"] .project-accordion-icon::after {
    background: var(--user-accent);
}

.project-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.project-accordion-content.is-expanded {
    grid-template-rows: 1fr;
}

.project-accordion-content-inner {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding-bottom: 0;
    transition: padding-bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-accordion-content.is-expanded .project-accordion-content-inner {
    padding-bottom: clamp(1.25rem, 3vw, 1.5rem);
}

.project-accordion-content p {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.7;
    color: var(--secondary-text);
    margin: 0;
}

/* Process stages */
.process-stages {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 3rem);
}

.process-stage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 20px 0;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-accordion-content.is-expanded .process-stage {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays for stages */
.project-accordion-content.is-expanded .process-stage:nth-child(1) {
    transition-delay: 0.15s;
}
.project-accordion-content.is-expanded .process-stage:nth-child(2) {
    transition-delay: 0.3s;
}
.project-accordion-content.is-expanded .process-stage:nth-child(3) {
    transition-delay: 0.45s;
}
.project-accordion-content.is-expanded .process-stage:nth-child(4) {
    transition-delay: 0.6s;
}

.process-stage-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    opacity: 0;
    transform: translateY(30px) translateX(-20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.1s;
}

.project-accordion-content.is-expanded .process-stage-header {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

h4.process-stage-number {
    font-family: var(--font-main);
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--quaternary-text);
    line-height: 1;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-accordion-content.is-expanded h4.process-stage-number {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

h2.process-stage-title {
    font-family: var(--font-main);
    font-size: var(--text-h2);
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    padding-bottom: 0.1em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    /* Default gradient - grayscale (light theme) */
    background: linear-gradient(90deg, #18181b 0%, #52525b 50%, #71717a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dark theme default gradient */
[data-theme="dark"] h2.process-stage-title {
    background: linear-gradient(90deg, #ffffff 0%, #d4d4d8 50%, #a1a1aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Accent 1: Blue */
[data-accent="1"] h2.process-stage-title {
    background: linear-gradient(90deg, #1e3a5f 0%, #2563a0 40%, #3b7fc4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"][data-accent="1"] h2.process-stage-title {
    background: linear-gradient(90deg, #93c5fd 0%, #60a5fa 40%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Accent 2: Pink */
[data-accent="2"] h2.process-stage-title {
    background: linear-gradient(90deg, #831843 0%, #be185d 40%, #db2777 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"][data-accent="2"] h2.process-stage-title {
    background: linear-gradient(90deg, #fbcfe8 0%, #f472b6 40%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Accent 3: Green */
[data-accent="3"] h2.process-stage-title {
    background: linear-gradient(90deg, #14532d 0%, #15803d 40%, #22c55e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"][data-accent="3"] h2.process-stage-title {
    background: linear-gradient(90deg, #bbf7d0 0%, #4ade80 40%, #22c55e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Accent 4: Purple */
[data-accent="4"] h2.process-stage-title {
    background: linear-gradient(90deg, #3b0764 0%, #7c3aed 40%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"][data-accent="4"] h2.process-stage-title {
    background: linear-gradient(90deg, #f5f3ff 0%, #c4b5fd 40%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
    h2.process-stage-title {
        color: var(--text-color);
        background: none;
        -webkit-text-fill-color: unset;
    }
}

.project-accordion-content.is-expanded h2.process-stage-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
}

/* Process stage text */
.process-stage-text {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.7;
    margin: 0;
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.3s;
}

.project-accordion-content.is-expanded .process-stage-text {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   PROCESS STAGE ROW (text + cards side by side)
   ========================================================================== */

.process-stage-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}

.process-stage-row-content {
    display: flex;
    flex-direction: column;
}

.process-stage-row-content .process-stage-header {
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.process-stage-row-content .process-stage-text {
    margin: 0;
}

.process-stage-row-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   PROCESS STAGE PERSONAS (stacked big persona images, no row)
   ========================================================================== */

.process-stage-personas {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 32px;
}

.process-persona-item {
    width: 100%;
}

.process-persona-image-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
}

.process-persona-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: top center;
    transition: transform 0.3s ease;
}

.process-persona-image-wrap:hover img {
    transform: scale(1.02);
}

.process-persona-image {
    /* No max-height: full image visible, no cropping */
    object-fit: contain;
}

@media (max-width: 768px) {
    .process-stage-personas {
        gap: 24px;
        margin-top: 24px;
    }
}

/* ==========================================================================
   PERSONA BENTO (two cards side by side, zoom to full screen)
   ========================================================================== */

.persona-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 32px;
}

.persona-bento-card {
    position: relative;
    overflow: visible;
}

.persona-bento-image-wrap {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.persona-bento-image-wrap img,
.persona-bento-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: top center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.persona-bento-image-wrap:hover .persona-bento-img {
    transform: scale(1.02);
}

.persona-bento-expand {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.persona-bento-expand:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.08);
}

.persona-bento-expand:active {
    transform: scale(0.95);
}

.persona-bento-expand svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .persona-bento {
        grid-template-columns: 1fr;
        margin-top: 24px;
        gap: 40px;
    }
}

/* ==========================================================================
   DESIGN SYSTEM CARDS (UI component grid — soft cards, component name + variants)
   ========================================================================== */
.design-system-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin-top: 32px;
}

.design-system-card {
    background: var(--card-bg, #f5f5f7);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

[data-theme="dark"] .design-system-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.design-system-card-preview {
    width: 100%;
    height: 128px;
    min-height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.design-system-card-title,
.design-system-card-meta {
    width: 100%;
    text-align: center;
}

.design-system-card-title {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.25rem 0;
    width: 100%;
    text-align: center;
}

.design-system-card-meta {
    font-family: var(--font-main);
    font-size: var(--text-small-14);
    font-weight: 400;
    color: var(--secondary-text);
    margin: 0;
    width: 100%;
    text-align: center;
}

/* Override accordion’s generic p rule so meta keeps 14px token */
.project-accordion-content .design-system-card-meta {
    font-size: var(--text-small-14);
    font-weight: 400;
}

/* Preview: Button (animated states: default → hover → active + cursor) */
.design-system-card-preview-button {
    min-height: 88px;
}

.ds-button-demo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 72px;
}

.ds-button-demo-btn {
    font-family: var(--font-main), 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #0c5c94;
    border: none;
    border-radius: 8px;
    height: 48px;
    padding: 0 24px;
    cursor: default;
    box-shadow: none;
    transform: scale(1);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    animation: ds-button-states 5s ease-in-out infinite;
}

@keyframes ds-button-states {
    /* Default */
    0%, 18% {
        background: #0c5c94;
        box-shadow: none;
        transform: scale(1);
    }
    /* Hover */
    22%, 34% {
        background: #0a4d7a;
        box-shadow: 0 2px 8px rgba(12, 92, 148, 0.35);
        transform: scale(1);
    }
    /* Click / active */
    36%, 42% {
        background: #083d62;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(0.98);
    }
    /* Release → hover */
    46%, 58% {
        background: #0a4d7a;
        box-shadow: 0 2px 8px rgba(12, 92, 148, 0.35);
        transform: scale(1);
    }
    /* Default */
    62%, 100% {
        background: #0c5c94;
        box-shadow: none;
        transform: scale(1);
    }
}

.ds-button-demo-cursor {
    position: absolute;
    width: 28px;
    height: 28px;
    left: 12%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    animation: ds-cursor-demo 5s ease-in-out infinite;
    background: url("assets/cursor.svg") no-repeat center;
    background-size: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

[data-theme="dark"] .ds-button-demo-cursor {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) invert(1) brightness(1.1);
}

@keyframes ds-cursor-demo {
    /* Move in from left */
    0% {
        left: 10%;
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scale(1);
    }
    6% {
        opacity: 1;
    }
    18% {
        left: 42%;
        top: 50%;
        transform: translateY(-50%) scale(1);
    }
    /* Hover over button */
    22%, 34% {
        left: 50%;
        top: 50%;
        transform: translateY(-50%) scale(1);
    }
    /* Click down */
    36% {
        left: 50%;
        top: 50%;
        transform: translateY(-48%) scale(0.88);
    }
    40% {
        transform: translateY(-48%) scale(0.88);
    }
    /* Release */
    44% {
        left: 50%;
        top: 50%;
        transform: translateY(-50%) scale(1);
    }
    /* Hover */
    46%, 58% {
        left: 50%;
        top: 50%;
        transform: translateY(-50%) scale(1);
    }
    /* Move away */
    62% {
        left: 50%;
        transform: translateY(-50%) scale(1);
    }
    85% {
        left: 20%;
        opacity: 1;
    }
    92% {
        left: 10%;
        opacity: 0;
    }
    100% {
        left: 10%;
        top: 50%;
        opacity: 0;
        transform: translateY(-50%) scale(1);
    }
}

/* Preview: Popover */
.ds-preview-popover {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ds-popover-panel {
    width: 80px;
    height: 28px;
    background: #fff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.08);
    display: block;
}
.ds-popover-trigger {
    width: 56px;
    height: 24px;
    background: #22c55e;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ds-popover-trigger-red { background: #ef4444; }
.ds-dot { width: 6px; height: 6px; background: rgba(255,255,255,0.9); border-radius: 50%; }

/* Preview: Typography (static “Scan a product”, Inter, 48px bold, responsive) */
.design-system-card-preview-typography {
    min-height: 72px;
}

.ds-preview-typography-word {
    font-family: 'Inter', var(--font-main), sans-serif;
    font-size: clamp(1.25rem, 4vw, 48px);
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-align: center;
}

.page-pharma .ds-preview-typography-word {
    font-family: 'Inter', var(--font-main), sans-serif;
    font-size: clamp(1.25rem, 4vw, 48px);
    font-weight: 700;
}

/* Preview: Pagination */
.ds-preview-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ds-pagination-prev, .ds-pagination-next {
    width: 20px; height: 20px;
    border: 1.5px solid var(--secondary-text);
    border-radius: 6px;
    opacity: 0.6;
}
.ds-pagination-dot {
    width: 8px; height: 8px;
    background: var(--secondary-text);
    opacity: 0.35;
    border-radius: 50%;
}
.ds-pagination-dot.is-active {
    opacity: 1;
    background: var(--text-color);
}

/* Preview: Color Picker (card: big square + full-spectrum hue bar with thumb, cycles 3 colors) */
.design-system-card-preview-color {
    min-height: 0;
    padding: 0;
}

.ds-preview-color-picker {
    width: 100%;
    max-width: 100px;
    background: #fff;
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

[data-theme="dark"] .ds-preview-color-picker {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Big square: shows selected color (cycles #0C5C94 → #000351 → #B30000), smooth transition */
.ds-color-picker-square {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    animation: ds-color-picker-square 6s linear infinite;
}

@keyframes ds-color-picker-square {
    0% {
        background-color: #0C5C94;
    }
    33.33% {
        background-color: #000351;
    }
    66.66% {
        background-color: #B30000;
    }
    100% {
        background-color: #0C5C94;
    }
}

/* Hue bar: gradient of the 3 colors, thumb stops at each */
.ds-color-picker-hue-wrap {
    position: relative;
    width: 100%;
    height: 8px;
    flex-shrink: 0;
}

.ds-color-picker-hue-track {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg,
        #ff0000 0%,
        #ff8800 12.5%,
        #ffff00 25%,
        #00ff00 37.5%,
        #00ffff 50%,
        #0088ff 62.5%,
        #0000ff 75%,
        #8800ff 87.5%,
        #ff00ff 100%);
}

.ds-color-picker-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    animation: ds-color-picker-thumb 6s linear infinite;
}

@keyframes ds-color-picker-thumb {
    0% {
        left: 0%;
        background-color: #0C5C94;
    }
    33.33% {
        left: 50%;
        background-color: #000351;
    }
    66.66% {
        left: 100%;
        background-color: #B30000;
    }
    100% {
        left: 0%;
        background-color: #0C5C94;
    }
}

/* Preview: Dropdown (trigger same size as menu, label left 16px, chevron rotates) */
.design-system-card-preview-dropdown {
    min-height: 0;
    padding: 0;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
}

.ds-preview-dropdown {
    position: relative;
    width: 100%;
}

.ds-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: clamp(36px, 6vw, 48px);
    min-height: 36px;
    padding: 0 16px 0 16px;
    background: #f6f7f9;
    border: 1px solid #d8d9dc;
    border-radius: 8px;
    box-sizing: border-box;
    animation: ds-dropdown-trigger 4s ease-in-out infinite;
}

.ds-dropdown-label {
    font-family: 'Inter', var(--font-main), sans-serif;
    font-size: clamp(12px, 2vw, 14px);
    font-weight: 400;
    color: #475262;
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ds-dropdown-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ds-dropdown-chevron-icon {
    font-size: 18px;
    color: var(--text-color);
    transition: transform 0.25s ease;
    animation: ds-dropdown-chevron-rotate 4s ease-in-out infinite;
}

@keyframes ds-dropdown-chevron-rotate {
    0%, 45% {
        transform: rotate(0deg);
    }
    50%, 90% {
        transform: rotate(180deg);
    }
    95%, 100% {
        transform: rotate(0deg);
    }
}

.ds-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    min-height: clamp(36px, 6vw, 48px);
    background: #f6f7f9;
    border: 1px solid #d8d9dc;
    border-radius: 8px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    animation: ds-dropdown-menu 4s ease-in-out infinite;
}

.ds-dropdown-item {
    display: flex;
    align-items: center;
    font-family: 'Inter', var(--font-main), sans-serif;
    font-size: clamp(12px, 2vw, 14px);
    font-weight: 400;
    color: #2e343c;
    padding: 0 16px;
    min-height: clamp(36px, 6vw, 48px);
    height: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes ds-dropdown-trigger {
    0%, 45% {
        border-width: 1px;
        border-color: #d8d9dc;
    }
    50%, 95% {
        border-width: 2px;
        border-color: #2e343c;
    }
    100% {
        border-width: 1px;
        border-color: #d8d9dc;
    }
}

@keyframes ds-dropdown-menu {
    0%, 45% {
        opacity: 0;
        visibility: hidden;
    }
    50%, 90% {
        opacity: 1;
        visibility: visible;
    }
    95%, 100% {
        opacity: 0;
        visibility: hidden;
    }
}

[data-theme="dark"] .ds-dropdown-trigger {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .ds-dropdown-label {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .ds-dropdown-trigger {
    animation-name: ds-dropdown-trigger-dark;
}

@keyframes ds-dropdown-trigger-dark {
    0%, 45% {
        border-color: rgba(255, 255, 255, 0.25);
    }
    50%, 95% {
        border-color: var(--text-color);
    }
    100% {
        border-color: rgba(255, 255, 255, 0.25);
    }
}

[data-theme="dark"] .ds-dropdown-menu {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-color);
}

[data-theme="dark"] .ds-dropdown-item {
    color: var(--text-color);
}

/* Preview: Progress bar */
.ds-preview-progress, .ds-preview-slider {
    width: 100%;
    max-width: 100px;
    display: flex;
    align-items: center;
    position: relative;
}
.ds-progress-track, .ds-slider-track {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.08);
    border-radius: 4px;
    display: block;
}
[data-theme="dark"] .ds-progress-track,
[data-theme="dark"] .ds-slider-track { background: rgba(255,255,255,0.12); }
.ds-progress-fill {
    position: absolute;
    left: 0;
    width: 45%;
    height: 8px;
    background: linear-gradient(90deg, #f97316, #fb923c);
    border-radius: 4px;
    display: block;
}
.ds-slider-fill {
    position: absolute;
    left: 0;
    width: 55%;
    height: 8px;
    background: linear-gradient(90deg, #a855f7, #c084fc);
    border-radius: 4px;
}
.ds-slider-thumb {
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px; height: 16px;
    background: #a855f7;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Preview: Radio */
.ds-preview-radio {
    width: 24px; height: 24px;
    border: 2px solid var(--secondary-text);
    border-radius: 50%;
    background: transparent;
    position: relative;
}
.ds-preview-radio::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: #22c55e;
    border-radius: 50%;
}

/* Preview: Checkbox (Figma: unchecked → checked, 24×24, 4px radius) */
.design-system-card-preview-checkbox {
    min-height: 72px;
}

.ds-preview-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-checkbox-box {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #f6f7f9;
    border: 2px solid #475262;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ds-checkbox-cycle 4s ease-in-out infinite;
}

.ds-checkbox-check {
    --ionicon-stroke-width: 48px;
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 16px;
    color: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    animation: ds-checkbox-check 4s ease-in-out infinite;
}

@keyframes ds-checkbox-cycle {
    0%, 40% {
        background-color: #f6f7f9;
        border-color: #475262;
        border-width: 2px;
    }
    50%, 90% {
        background-color: #0c5c94;
        border-color: #0c5c94;
        border-width: 2px;
    }
    100% {
        background-color: #f6f7f9;
        border-color: #475262;
        border-width: 2px;
    }
}

@keyframes ds-checkbox-check {
    0%, 40% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
}

[data-theme="dark"] .ds-checkbox-box {
    animation: ds-checkbox-cycle-dark 4s ease-in-out infinite;
}

@keyframes ds-checkbox-cycle-dark {
    0%, 40% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.4);
    }
    50%, 90% {
        background-color: #0c5c94;
        border-color: #0c5c94;
    }
    100% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.4);
    }
}

/* Preview: Toggle (Figma: 44×24 pill, off #dedede / on #0c5c94, knob 20px white) */
.design-system-card-preview-toggle {
    min-height: 72px;
}

.ds-preview-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 100px;
    background-color: #dedede;
    animation: ds-toggle-track 4s ease-in-out infinite;
}

.ds-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(39, 39, 39, 0.1);
    animation: ds-toggle-knob 4s ease-in-out infinite;
}

@keyframes ds-toggle-track {
    0%, 40% {
        background-color: #dedede;
    }
    50%, 90% {
        background-color: #0c5c94;
    }
    100% {
        background-color: #dedede;
    }
}

@keyframes ds-toggle-knob {
    0%, 40% {
        left: 2px;
    }
    50%, 90% {
        left: 22px;
    }
    100% {
        left: 2px;
    }
}

[data-theme="dark"] .ds-toggle-track {
    animation-name: ds-toggle-track-dark;
}

@keyframes ds-toggle-track-dark {
    0%, 40% {
        background-color: rgba(255, 255, 255, 0.2);
    }
    50%, 90% {
        background-color: #0c5c94;
    }
    100% {
        background-color: rgba(255, 255, 255, 0.2);
    }
}

/* Preview: Incremental stepper (0 up to 5, then down to 0) */
.design-system-card-preview-stepper {
    min-height: 72px;
}

.ds-preview-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.ds-stepper-btn {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #d8d9dc;
    background: #f6f7f9;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.ds-stepper-minus {
    animation-name: ds-stepper-minus-pressed;
}

.ds-stepper-plus {
    animation-name: ds-stepper-plus-pressed;
}

/* Minus: quick press on each decrement (5→4, 4→3, 3→2, 2→1, 1→0) */
@keyframes ds-stepper-minus-pressed {
    0%, 54% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
    55%, 62% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
    62.5%, 65% {
        background-color: #e8e9ec;
        border-color: #c5c6c9;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
        transform: scale(0.96);
    }
    65.5%, 72% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
    72.5%, 75% {
        background-color: #e8e9ec;
        border-color: #c5c6c9;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
        transform: scale(0.96);
    }
    75.5%, 82% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
    82.5%, 85% {
        background-color: #e8e9ec;
        border-color: #c5c6c9;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
        transform: scale(0.96);
    }
    85.5%, 92% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
    92.5%, 95% {
        background-color: #e8e9ec;
        border-color: #c5c6c9;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
        transform: scale(0.96);
    }
    95.5%, 100% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
}

/* Plus: quick press on each increment (0→1, 1→2, 2→3, 3→4, 4→5) */
@keyframes ds-stepper-plus-pressed {
    0%, 7% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
    7.5%, 10% {
        background-color: #e8e9ec;
        border-color: #c5c6c9;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
        transform: scale(0.96);
    }
    10.5%, 17% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
    17.5%, 20% {
        background-color: #e8e9ec;
        border-color: #c5c6c9;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
        transform: scale(0.96);
    }
    20.5%, 27% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
    27.5%, 30% {
        background-color: #e8e9ec;
        border-color: #c5c6c9;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
        transform: scale(0.96);
    }
    30.5%, 37% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
    37.5%, 40% {
        background-color: #e8e9ec;
        border-color: #c5c6c9;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
        transform: scale(0.96);
    }
    40.5%, 47% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
    47.5%, 50% {
        background-color: #e8e9ec;
        border-color: #c5c6c9;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
        transform: scale(0.96);
    }
    50.5%, 100% {
        background-color: #f6f7f9;
        border-color: #d8d9dc;
        box-shadow: none;
        transform: scale(1);
    }
}

.ds-stepper-btn ion-icon {
    font-size: 20px;
}

[data-theme="dark"] .ds-stepper-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .ds-stepper-minus {
    animation-name: ds-stepper-minus-pressed-dark;
}

[data-theme="dark"] .ds-stepper-plus {
    animation-name: ds-stepper-plus-pressed-dark;
}

@keyframes ds-stepper-minus-pressed-dark {
    0%, 54% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
    55%, 62% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
    62.5%, 65% {
        background-color: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(0.96);
    }
    65.5%, 72% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
    72.5%, 75% {
        background-color: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(0.96);
    }
    75.5%, 82% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
    82.5%, 85% {
        background-color: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(0.96);
    }
    85.5%, 92% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
    92.5%, 95% {
        background-color: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(0.96);
    }
    95.5%, 100% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
}

@keyframes ds-stepper-plus-pressed-dark {
    0%, 7% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
    7.5%, 10% {
        background-color: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(0.96);
    }
    10.5%, 17% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
    17.5%, 20% {
        background-color: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(0.96);
    }
    20.5%, 27% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
    27.5%, 30% {
        background-color: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(0.96);
    }
    30.5%, 37% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
    37.5%, 40% {
        background-color: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(0.96);
    }
    40.5%, 47% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
    47.5%, 50% {
        background-color: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.35);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(0.96);
    }
    50.5%, 100% {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        transform: scale(1);
    }
}

.ds-stepper-value-wrap {
    position: relative;
    min-width: 32px;
    height: 1.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', var(--font-main), sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2e343c;
}

[data-theme="dark"] .ds-stepper-value-wrap {
    color: var(--text-color);
}

.ds-stepper-digit {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.ds-stepper-digit[data-digit="0"] { animation-name: ds-stepper-0; }
.ds-stepper-digit[data-digit="1"] { animation-name: ds-stepper-1; }
.ds-stepper-digit[data-digit="2"] { animation-name: ds-stepper-2; }
.ds-stepper-digit[data-digit="3"] { animation-name: ds-stepper-3; }
.ds-stepper-digit[data-digit="4"] { animation-name: ds-stepper-4; }
.ds-stepper-digit[data-digit="5"] { animation-name: ds-stepper-5; }

@keyframes ds-stepper-0 {
    0%, 9% { opacity: 1; }
    9.01%, 90% { opacity: 0; }
    90.01%, 100% { opacity: 1; }
}

@keyframes ds-stepper-1 {
    0%, 9% { opacity: 0; }
    9.01%, 18% { opacity: 1; }
    18.01%, 81% { opacity: 0; }
    81.01%, 90% { opacity: 1; }
    90.01%, 100% { opacity: 0; }
}

@keyframes ds-stepper-2 {
    0%, 18% { opacity: 0; }
    18.01%, 27% { opacity: 1; }
    27.01%, 72% { opacity: 0; }
    72.01%, 81% { opacity: 1; }
    81.01%, 100% { opacity: 0; }
}

@keyframes ds-stepper-3 {
    0%, 27% { opacity: 0; }
    27.01%, 36% { opacity: 1; }
    36.01%, 63% { opacity: 0; }
    63.01%, 72% { opacity: 1; }
    72.01%, 100% { opacity: 0; }
}

@keyframes ds-stepper-4 {
    0%, 36% { opacity: 0; }
    36.01%, 45% { opacity: 1; }
    45.01%, 54% { opacity: 0; }
    54.01%, 63% { opacity: 1; }
    63.01%, 100% { opacity: 0; }
}

@keyframes ds-stepper-5 {
    0%, 45% { opacity: 0; }
    45.01%, 54% { opacity: 1; }
    54.01%, 100% { opacity: 0; }
}

/* Preview: Rating (stars) */
.ds-preview-rating { display: flex; gap: 4px; align-items: center; }
.ds-star {
    width: 18px; height: 18px;
    background: transparent;
    border: 1.5px solid var(--secondary-text);
    opacity: 0.4;
    border-radius: 2px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.ds-star.filled {
    background: #f97316;
    border-color: #f97316;
    opacity: 1;
}

/* Preview: Step indicator */
.ds-preview-steps {
    display: flex;
    align-items: center;
    gap: 2px;
}
.ds-step {
    width: 20px; height: 20px;
    border: 1.5px solid rgba(0,0,0,0.2);
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
[data-theme="dark"] .ds-step { border-color: rgba(255,255,255,0.3); background: transparent; }
.ds-step.done {
    background: #22c55e;
    border-color: #22c55e;
}
.ds-step.active {
    background: #22c55e;
    border-color: #22c55e;
}
.ds-step-check {
    display: block;
    width: 6px; height: 10px;
    margin: -2px 0 0 2px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    box-sizing: border-box;
}
.ds-step-line {
    width: 12px; height: 2px;
    background: var(--secondary-text);
    opacity: 0.35;
}

@media (max-width: 768px) {
    .design-system-cards {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 24px;
    }
}

@media (max-width: 480px) {
    .design-system-cards {
        grid-template-columns: 1fr;
    }
}

/* Lo-fi wireframes background card + continuous slider */
.lofi-slider-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        var(--card-bg);
}

[data-theme="light"] .lofi-slider-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #eef0f2;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

[data-theme="dark"] .lofi-slider-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #18181b;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.lofi-slider {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.lofi-slider-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

/* Only animate when accordion is expanded */
.project-accordion-content.is-expanded .lofi-slider-track {
    animation: lofiScroll 30s linear infinite;
}

.lofi-slider-img {
    display: block;
    height: clamp(220px, 30vw, 400px);
    width: auto;
    flex-shrink: 0;
}

.lofi-slider:hover .lofi-slider-track {
    animation-play-state: paused;
}

@keyframes lofiScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .lofi-slider-card {
        border-radius: 12px;
    }

    .lofi-slider-img {
        height: clamp(160px, 40vw, 260px);
    }
}

/* Process image wrapper with expand button */
.process-image-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.process-image-wrap img {
    transition: transform 0.3s ease;
}

.process-image-wrap:hover img {
    transform: scale(1.02);
}

.process-image-expand {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.process-image-expand:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.08);
}

.process-image-expand:active {
    transform: scale(0.95);
}

.process-image-expand svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .process-stage-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ==========================================================================
   USER QUOTES BENTO GRID (Apple-style cards)
   ========================================================================== */

.user-quotes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
}

.user-quote-card {
    border-radius: 16px;
    padding: clamp(1rem, 2vw, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    /* Same gradient as feature gallery cards */
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        var(--card-bg);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

[data-theme="light"] .user-quote-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #eef0f2;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.03),
        0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

[data-theme="dark"] .user-quote-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #18181b;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.user-quote-app {
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tertiary-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.user-quote-text {
    font-family: var(--font-main);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-color);
    margin: 0;
}

/* Animation on accordion expand */
.user-quote-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-accordion-content.is-expanded .user-quote-card:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.project-accordion-content.is-expanded .user-quote-card:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.project-accordion-content.is-expanded .user-quote-card:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.project-accordion-content.is-expanded .user-quote-card:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

/* Responsive */
@media (max-width: 600px) {
    .user-quotes-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .user-quote-card {
        padding: 1rem;
    }
    
    .user-quote-text {
        font-size: 0.875rem;
    }
}

/* Process insights section */
.process-insights {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.5s;
}

.project-accordion-content.is-expanded .process-insights {
    opacity: 1;
    transform: translateY(0);
}

.process-insights-intro {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-accordion-content.is-expanded .process-insights-intro {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
}

.process-insights-list {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.process-insights-list li {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.5;
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-accordion-content.is-expanded .process-insights-list li:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.6s;
}

.project-accordion-content.is-expanded .process-insights-list li:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.7s;
}

.project-accordion-content.is-expanded .process-insights-list li:nth-child(3) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.8s;
}

.project-accordion-content.is-expanded .process-insights-list li:nth-child(4) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.9s;
}

.process-insights-list li::marker {
    color: var(--tertiary-text);
}

/* Process stage image - parallax style */
.process-stage-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-top: 0;
    display: block;
}

/* Process ideas (brainstorming section) */
.process-ideas {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 2.5rem);
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.2s;
}

.project-accordion-content.is-expanded .process-ideas {
    opacity: 1;
    transform: translateY(0);
}

.process-idea {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-accordion-content.is-expanded .process-idea {
    opacity: 1;
    transform: translateY(0);
}

.project-accordion-content.is-expanded .process-idea:nth-child(1) {
    transition-delay: 0.3s;
}

.project-accordion-content.is-expanded .process-idea:nth-child(2) {
    transition-delay: 0.5s;
}

.project-accordion-content.is-expanded .process-idea:nth-child(3) {
    transition-delay: 0.7s;
}

.process-idea-title {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(20px) translateX(-10px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-accordion-content.is-expanded .process-idea:nth-child(1) .process-idea-title {
    opacity: 1;
    transform: translateY(0) translateX(0);
    transition-delay: 0.35s;
}

.project-accordion-content.is-expanded .process-idea:nth-child(2) .process-idea-title {
    opacity: 1;
    transform: translateY(0) translateX(0);
    transition-delay: 0.55s;
}

.project-accordion-content.is-expanded .process-idea:nth-child(3) .process-idea-title {
    opacity: 1;
    transform: translateY(0) translateX(0);
    transition-delay: 0.75s;
}

.process-idea-text {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--secondary-text);
    line-height: 1.7;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-accordion-content.is-expanded .process-idea:nth-child(1) .process-idea-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.project-accordion-content.is-expanded .process-idea:nth-child(2) .process-idea-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.project-accordion-content.is-expanded .process-idea:nth-child(3) .process-idea-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}

.process-idea .process-stage-image {
    margin-top: 0.5rem;
}

/* ==========================================================================
   HOW MIGHT WE SECTION
   ========================================================================== */

.hmw-intro {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--secondary-text);
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .hmw-intro {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.hmw-title {
    font-size: clamp(2rem, 4vw + 1.5rem, 3rem) !important;
    margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

.hmw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 2rem);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .hmw-grid {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

/* Apple-style HMW items */
.hmw-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hmw-item-icon {
    font-size: 32px;
    color: var(--tertiary-text);
}

.hmw-item-text {
    font-family: var(--font-main);
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--secondary-text);
    margin: 0;
    text-align: left;
}

.hmw-item-text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

/* Accordion animations for HMW items */
.project-accordion-content.is-expanded .hmw-item:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.project-accordion-content.is-expanded .hmw-item:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.project-accordion-content.is-expanded .hmw-item:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.project-accordion-content.is-expanded .hmw-item:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.hmw-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .hmw-card:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.project-section.is-visible .hmw-card:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.project-section.is-visible .hmw-card:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.project-section.is-visible .hmw-card:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}

.hmw-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-section.is-visible .hmw-card:nth-child(1) .hmw-icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.5s;
}

.project-section.is-visible .hmw-card:nth-child(2) .hmw-icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.6s;
}

.project-section.is-visible .hmw-card:nth-child(3) .hmw-icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.7s;
}

.project-section.is-visible .hmw-card:nth-child(4) .hmw-icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.8s;
}

.hmw-icon svg {
    width: 48px;
    height: 48px;
}

.hmw-text {
    font-family: var(--font-main);
    font-size: clamp(1rem, 1.5vw + 0.875rem, 1.125rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-color);
    margin: 0;
}

@media (max-width: 900px) {
    .hmw-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .hmw-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .hmw-item-icon {
        font-size: 28px;
    }
    
    .hmw-icon {
        width: 48px;
        height: 48px;
    }
    
    .hmw-icon svg {
        width: 40px;
        height: 40px;
    }
}

/* HMW Grid inside accordion */
.hmw-grid-accordion {
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.3s;
}

.project-accordion-content.is-expanded .hmw-grid-accordion {
    opacity: 1;
    transform: translateY(0);
}

.hmw-grid-accordion .hmw-card {
    opacity: 0;
    transform: translateY(25px);
}

.project-accordion-content.is-expanded .hmw-grid-accordion .hmw-card:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.project-accordion-content.is-expanded .hmw-grid-accordion .hmw-card:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.project-accordion-content.is-expanded .hmw-grid-accordion .hmw-card:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

.project-accordion-content.is-expanded .hmw-grid-accordion .hmw-card:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}

.hmw-grid-accordion .hmw-icon {
    opacity: 0;
    transform: scale(0.8);
}

.project-accordion-content.is-expanded .hmw-grid-accordion .hmw-card:nth-child(1) .hmw-icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.5s;
}

.project-accordion-content.is-expanded .hmw-grid-accordion .hmw-card:nth-child(2) .hmw-icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.6s;
}

.project-accordion-content.is-expanded .hmw-grid-accordion .hmw-card:nth-child(3) .hmw-icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.7s;
}

.project-accordion-content.is-expanded .hmw-grid-accordion .hmw-card:nth-child(4) .hmw-icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.8s;
}

/* Reduce motion for HMW section */
@media (prefers-reduced-motion: reduce) {
    .hmw-intro,
    .hmw-grid,
    .hmw-grid-accordion,
    .hmw-card,
    .hmw-item,
    .hmw-icon {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Quote */
.project-quote {
    margin: clamp(2rem, 5vw, 3rem) 0 0 0;
    padding: clamp(1.5rem, 4vw, 2rem) 0 0 clamp(1.5rem, 4vw, 2rem);
    border-left: 3px solid var(--accent-color);
    padding-left: clamp(1.25rem, 3vw, 1.75rem);
}

.project-quote p {
    font-size: clamp(1.0625rem, 1.25vw + 0.9375rem, 1.1875rem);
    line-height: 1.65;
    font-style: italic;
    color: var(--text-color);
    margin: 0 0 0.75rem 0;
}

.project-quote-footer {
    font-size: clamp(0.875rem, 1vw + 0.75rem, 1rem);
    color: var(--secondary-text);
    font-style: normal;
    font-weight: 500;
}

/* ==========================================================================
   FULL-WIDTH SECTION (Final Designs)
   ========================================================================== */

.project-fullwidth-section {
    width: 100%;
    margin: 64px 0 0 0;
    padding: 0;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-fullwidth-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Process section - 64px gap from final designs */
.project-process-section {
    margin-top: 64px;
}

.project-process-section .project-accordion {
    opacity: 1;
    transform: none;
}

.project-fullwidth-section .project-subsection {
    text-align: left;
    max-width: none;
    margin: 0 0 clamp(2rem, 4vw, 3rem) 0;
    opacity: 1;
    transform: none;
}

.project-fullwidth-section .project-subsection-title {
    opacity: 1;
    transform: none;
    transition: none;
}

.project-fullwidth-section .project-subsection p {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Bottom layout continuation */
.project-layout-bottom {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.project-layout-bottom .project-sidebar-spacer {
    visibility: hidden;
}

.project-section-continued {
    margin-top: 0;
}

/* ==========================================================================
   APPLE INTELLIGENCE STYLE FEATURE GALLERY
   ========================================================================== */

.feature-gallery {
    margin: clamp(2rem, 4vw, 3rem) 0;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-fullwidth-section.is-visible .feature-gallery,
.project-section.is-visible .feature-gallery {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

/* Background card - same width as hero card */
.feature-gallery-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
    margin-bottom: 20px;
    aspect-ratio: 1200 / 550;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        var(--card-bg);
}

[data-theme="light"] .feature-gallery-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #eef0f2;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

[data-theme="dark"] .feature-gallery-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #18181b;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Tabs and descriptions aligned to page layout */
.feature-gallery-tabs,
.feature-gallery-descriptions {
    max-width: var(--layout-max-width, 1200px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--layout-padding, clamp(1rem, 4vw, 2rem));
}

/* Image wrapper - contains all images stacked */
.feature-gallery-image-wrap {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
}

/* Individual images - absolute positioned, fade in/out with smooth animation */
.feature-gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.05) translateY(10px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    will-change: opacity, transform;
}

.feature-gallery-image.is-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    z-index: 1;
}

/* Exiting image animation */
.feature-gallery-image.is-exiting {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    z-index: 0;
}

.feature-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-gallery-image.is-active img:hover {
    transform: scale(1.02);
}

/* ==========================================================================
   NOTIFICATION PHONE MOCKUP + ANIMATION (Tab 2)
   Uses a static phone frame image with animated notification overlay
   ========================================================================== */


/* Expand button on gallery image */
.feature-gallery-expand {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.feature-gallery-expand:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.08);
}

.feature-gallery-expand:active {
    transform: scale(0.95);
}

.feature-gallery-expand svg {
    width: 18px;
    height: 18px;
}

/* Tab titles - Apple style with underline */
.feature-gallery-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line-color);
    position: relative;
}

.feature-gallery-tab {
    position: relative;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.5rem, 1vw, 0.75rem);
    font-family: var(--font-main);
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--tertiary-text);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
    line-height: 1.3;
    /* Push the tab down by 1px so the ::after overlaps the border */
    margin-bottom: -1px;
}

.feature-gallery-tab:hover {
    color: var(--text-color);
}

/* Sliding tab indicator */
.feature-gallery-tab-indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(160, 130, 200, 0.9) 0%,
        rgba(220, 160, 120, 0.9) 50%,
        rgba(160, 130, 200, 0.9) 100%
    );
    transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.feature-gallery-tab.is-active {
    color: var(--text-color);
}

/* Accent-specific tab indicator gradients */
/* Blue */
[data-accent="1"] .feature-gallery-tab-indicator {
    background: linear-gradient(
        90deg,
        rgba(59, 130, 246, 0.9) 0%,
        rgba(96, 165, 250, 0.9) 50%,
        rgba(59, 130, 246, 0.9) 100%
    );
}

/* Pink */
[data-accent="2"] .feature-gallery-tab-indicator {
    background: linear-gradient(
        90deg,
        rgba(236, 72, 153, 0.9) 0%,
        rgba(244, 114, 182, 0.9) 50%,
        rgba(236, 72, 153, 0.9) 100%
    );
}

/* Green */
[data-accent="3"] .feature-gallery-tab-indicator {
    background: linear-gradient(
        90deg,
        rgba(34, 197, 94, 0.9) 0%,
        rgba(74, 222, 128, 0.9) 50%,
        rgba(34, 197, 94, 0.9) 100%
    );
}

/* Purple */
[data-accent="4"] .feature-gallery-tab-indicator {
    background: linear-gradient(
        90deg,
        rgba(124, 58, 237, 0.9) 0%,
        rgba(167, 139, 250, 0.9) 50%,
        rgba(124, 58, 237, 0.9) 100%
    );
}

/* Descriptions - no animation, instant switch */
.feature-gallery-descriptions {
    position: relative;
    min-height: 3em;
    text-align: left;
    max-width: 100%;
    padding: 0;
}

.feature-gallery-desc {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.7;
    color: var(--secondary-text);
    margin: 0;
    display: none;
}

.feature-gallery-desc.is-active {
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .feature-gallery-card {
        padding: 0;
        border-radius: 12px;
        aspect-ratio: 4 / 3;
    }
    
    .feature-gallery-image-wrap {
        border-radius: 8px;
    }
    
    .feature-gallery-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0.5rem 1.5rem;
        /* Fade right edge to hint at more tabs */
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }

    .feature-gallery-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .feature-gallery-tab {
        padding: 0.5rem 0.5rem;
        font-size: 0.9375rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .feature-gallery-descriptions {
        min-height: 4em;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .project-fullwidth-section,
    .feature-gallery,
    .feature-gallery-image {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .feature-gallery-image {
        display: none;
    }
    
    .feature-gallery-image.is-active {
        display: block;
        position: relative;
    }
    
    .feature-gallery-tab-indicator {
        transition: none !important;
    }
}

/* ==========================================================================
   IDEATION GALLERY (inside accordion) - mirrors feature gallery
   ========================================================================== */

.ideation-gallery {
    display: flex;
    flex-direction: column;
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* Background card */
.ideation-gallery-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
    margin-bottom: 20px;
    aspect-ratio: 1200 / 550;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #f0f0f2;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

[data-theme="light"] .ideation-gallery-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #eef0f2;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

[data-theme="dark"] .ideation-gallery-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #18181b;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Image wrapper */
.ideation-gallery-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
}

/* Individual images */
.ideation-gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.05) translateY(10px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    will-change: opacity, transform;
}

.ideation-gallery-image.is-active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    z-index: 1;
}

.ideation-gallery-image.is-exiting {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    z-index: 0;
}

.ideation-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Plaid image: show full width without cropping */
.ideation-gallery-image[data-ideation-image="1"] img {
    object-fit: contain;
}

.ideation-gallery-image.is-active img:hover {
    transform: scale(1.02);
}

/* Expand button */
.ideation-gallery-expand {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s ease, transform 0.2s ease;
}

.ideation-gallery-expand:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.08);
}

.ideation-gallery-expand:active {
    transform: scale(0.95);
}

.ideation-gallery-expand svg {
    width: 18px;
    height: 18px;
}

/* Tab titles */
.ideation-gallery-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line-color);
    position: relative;
}

.ideation-gallery-tab {
    position: relative;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.5rem, 1vw, 0.75rem);
    font-family: var(--font-main);
    font-size: var(--text-h4);
    font-weight: 600;
    color: var(--tertiary-text);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    margin-bottom: -1px;
    white-space: nowrap;
}

.ideation-gallery-tab:hover {
    color: var(--text-color);
}

.ideation-gallery-tab.is-active {
    color: var(--text-color);
}

/* Sliding tab indicator */
.ideation-gallery-tab-indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(160, 130, 200, 0.9) 0%,
        rgba(220, 160, 120, 0.9) 50%,
        rgba(160, 130, 200, 0.9) 100%
    );
    transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

/* Accent-specific tab indicator gradients */
[data-accent="1"] .ideation-gallery-tab-indicator {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.9) 0%, rgba(96, 165, 250, 0.9) 50%, rgba(59, 130, 246, 0.9) 100%);
}
[data-accent="2"] .ideation-gallery-tab-indicator {
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.9) 0%, rgba(244, 114, 182, 0.9) 50%, rgba(236, 72, 153, 0.9) 100%);
}
[data-accent="3"] .ideation-gallery-tab-indicator {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.9) 0%, rgba(74, 222, 128, 0.9) 50%, rgba(34, 197, 94, 0.9) 100%);
}
[data-accent="4"] .ideation-gallery-tab-indicator {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.9) 0%, rgba(167, 139, 250, 0.9) 50%, rgba(124, 58, 237, 0.9) 100%);
}

/* Descriptions */
.ideation-gallery-descriptions {
    position: relative;
    min-height: 3em;
    text-align: center;
}

.ideation-gallery-desc {
    font-family: var(--font-main);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.7;
    color: var(--secondary-text);
    margin: 0;
    display: none;
}

.ideation-gallery-desc.is-active {
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .ideation-gallery-card {
        padding: 0;
        border-radius: 12px;
        aspect-ratio: 4 / 3;
    }
    
    .ideation-gallery-image-wrap {
        border-radius: 8px;
    }
    
    .ideation-gallery-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0.5rem 1rem;
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }

    .ideation-gallery-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .ideation-gallery-tab {
        padding: 0.5rem 0.5rem;
        font-size: 0.9375rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .ideation-gallery-descriptions {
        min-height: 4em;
    }
}

/* ==========================================================================
   WORDS OF APPRECIATION — Apple-style cards (text left, photo right, gradient)
   ========================================================================== */

.project-reviews-section {
    margin-top: clamp(3rem, 8vw, 5rem);
    padding-top: clamp(2rem, 5vw, 3rem);
    width: 100%;
}

.project-reviews-title {
    font-family: var(--font-main);
    font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-color);
    text-align: left;
    margin: 0 0 clamp(2rem, 5vw, 3rem);
}

.reviews-carousel {
    position: relative;
    width: 100%;
}

.reviews-carousel-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 56px;
    scrollbar-width: none;
}

.reviews-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Card: same background as hero (uses --card-blur-* from .page-project); 250px height; quote + name left, photo right from bottom */
.review-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 300px;
    height: auto;
    padding: 0 20px 0 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    text-align: left;
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #f0f0f2;
}

[data-theme="light"] .review-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #eef0f2;
}

[data-theme="dark"] .review-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #18181b;
}

.review-card-quote {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding-bottom: 40px;
}

.review-quote {
    font-family: var(--font-main);
    font-size: clamp(1rem, 1.5vw + 0.75rem, 1.25rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-color);
    margin: 0;
    position: relative;
    padding-left: 3.5rem;
}

.review-quote::before {
    content: "\201C";
    font-family: "Fraunces", serif;
    font-size: 100px;
    line-height: 1;
    color: var(--text-color);
    position: absolute;
    top: -0.5rem;
    left: 0;
}

.review-card-author {
    flex-shrink: 0;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}

.review-author-photo {
    width: 300px;
    height: 300px;
    border-radius: 0;
    object-fit: cover;
    object-position: bottom;
    flex-shrink: 0;
}

.review-author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-left: 3.5rem;
}

.review-author-name {
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
}

.review-author-role {
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--secondary-text);
}

/* Paddlenav: Apple-style chevrons, right-aligned */
.reviews-carousel-nav {
    position: absolute;
    bottom: 0;
    left: auto;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.reviews-paddlenav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.reviews-paddlenav li {
    margin: 0;
    padding: 0;
}

.reviews-paddlenav .left-item,
.reviews-paddlenav .right-item {
    width: 36px;
    height: 36px;
}

.reviews-carousel-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--text-color);
    color: var(--bg-color);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.reviews-paddlenav .right-item .reviews-carousel-btn {
    margin-left: 8px;
}

[data-theme="dark"] .reviews-carousel-btn {
    border-color: transparent;
    box-shadow: none;
}

.reviews-carousel-btn .icon-control {
    width: 20px;
    height: 20px;
}

.reviews-carousel-btn:hover:not(:disabled) {
    opacity: 0.85;
}

.reviews-carousel-btn.is-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.reviews-carousel-btn.is-disabled .icon-control {
    opacity: 1;
}

.reviews-carousel-dots {
    display: none;
}

@media (max-width: 600px) {
    .reviews-carousel-track {
        padding-left: 0;
        padding-right: 0;
    }

    .review-card {
        min-width: 100%;
        flex: 0 0 100%;
        height: auto;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        gap: 1rem;
    }

    .review-card-quote {
        width: 100%;
        padding-bottom: 32px;
    }

    .review-card-author {
        align-self: stretch;
        margin-top: 1.25rem;
    }

    .review-author-photo {
        width: 100px;
        height: 100px;
    }

    .review-quote {
        font-size: 0.9375rem;
        line-height: 1.5;
        padding-left: 0;
    }

    .review-quote::before {
        font-size: 72px;
        position: static;
    }

    .review-author-info {
        padding-left: 0;
    }

    .reviews-carousel-dots {
        margin-left: 0;
    }
}

/* Project navigation */
.project-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 64px;
    padding-top: clamp(2rem, 5vw, 3rem);
}

.project-nav-item {
    font-family: var(--font-main);
    font-size: var(--text-h3, 1.25rem);
    font-weight: 500;
    color: var(--quaternary-text);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    transition: color 0.25s ease;
    cursor: pointer;
}

[data-theme="light"] .project-nav-item:hover,
[data-theme="light"] .project-nav-item.is-active {
    color: #000;
}

[data-theme="dark"] .project-nav-item:hover,
[data-theme="dark"] .project-nav-item.is-active {
    color: #fff;
}

.project-nav-item.is-active {
    font-weight: 600;
}

@media (max-width: 600px) {
    .project-nav {
        flex-wrap: wrap;
    }

    .project-nav-item {
        padding: 8px 12px;
    }
}

/* ==========================================================================
   MOBILE OVERRIDES (must be last to win cascade)
   ========================================================================== */
@media (max-width: 768px) {
    .process-stage {
        padding: 0;
    }

    h2.process-stage-title {
        font-size: 32px;
    }

    .project-nav {
        width: 100%;
        margin-top: 20px;
        justify-content: space-between;
    }

    .project-fullwidth-section {
        margin-top: 20px;
    }

    .project-sidebar {
        border-bottom: none;
    }

    .project-nav {
        flex-wrap: nowrap;
    }

    .project-nav-item {
        font-size: 0.9rem;
        padding: 8px 8px;
    }

    .ideation-gallery-tabs {
        justify-content: flex-start;
    }

    .project-hero-title {
        margin-top: 20px !important;
    }

    .project-hero {
        margin-bottom: 20px !important;
    }

    .hero-bg-img,
    .hero-phone-img {
        height: 90%;
    }
}

/* ==========================================================================
   DUAL-CARD ACCORDION (Apple iPad accessories style)
   Two cards side by side — active 80%, collapsed 20%, click to swap
   ========================================================================== */

.dual-card-container {
    display: flex;
    gap: 12px;
    height: clamp(480px, 55vw, 680px);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-fullwidth-section.is-visible .dual-card-container {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* Each card */
.dual-card {
    position: relative;
    flex: 1;
    min-width: 0;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        var(--card-bg);
}

[data-theme="light"] .dual-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #eef0f2;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

[data-theme="light"] .dual-card-list {
    border-top-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .dual-card-item {
    border-bottom-color: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .dual-card {
    background:
        radial-gradient(
            ellipse 220% 180% at 5% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-1a) 0%,
            var(--card-blur-1b) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 220% 180% at 95% calc(var(--card-blur-y, 0.5) * 100%),
            var(--card-blur-2a) 0%,
            var(--card-blur-2b) 30%,
            transparent 55%
        ),
        #18181b;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.dual-card.is-active {
    flex: 8;
    cursor: default;
}

/* ---------- Collapsed label (visible when NOT active) ---------- */

.dual-card-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dual-card.is-active .dual-card-label {
    opacity: 0;
    pointer-events: none;
    transition-delay: 0s;
}

/* Arrow icon with circle background — matches process accordion icon */
.dual-card-label-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--text-color);
    color: var(--bg-color);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease;
    animation: dual-card-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Accent color variants — match process accordion */
[data-accent="1"] .dual-card-label-icon,
[data-accent="2"] .dual-card-label-icon,
[data-accent="3"] .dual-card-label-icon,
[data-accent="4"] .dual-card-label-icon {
    background: color-mix(in srgb, var(--user-accent) 15%, transparent);
    color: var(--user-accent);
}

.dual-card-label-icon ion-icon {
    font-size: 18px;
    display: block;
}

/* Hover — whole collapsed card animates */
.dual-card:hover:not(.is-active) {
    background-color: color-mix(in srgb, var(--text-color) 8%, transparent);
}

.dual-card:hover:not(.is-active) .dual-card-label-icon {
    animation: none;
}

/* First card (left): nudge right on hover */
.dual-card:first-child:hover:not(.is-active) {
    transform: translateX(3px);
}

/* Second card (right): nudge left on hover */
.dual-card:last-child:hover:not(.is-active) {
    transform: translateX(-3px);
}

/* Accent hover variants */
[data-accent="1"] .dual-card:hover:not(.is-active) .dual-card-label-icon,
[data-accent="2"] .dual-card:hover:not(.is-active) .dual-card-label-icon,
[data-accent="3"] .dual-card:hover:not(.is-active) .dual-card-label-icon,
[data-accent="4"] .dual-card:hover:not(.is-active) .dual-card-label-icon {
    background: color-mix(in srgb, var(--user-accent) 25%, transparent);
}

/* Breathing pulse animation */
@keyframes dual-card-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-color) 25%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--text-color) 0%, transparent);
    }
}

[data-accent="1"] .dual-card-label-icon,
[data-accent="2"] .dual-card-label-icon,
[data-accent="3"] .dual-card-label-icon,
[data-accent="4"] .dual-card-label-icon {
    animation-name: dual-card-pulse-accent;
}

@keyframes dual-card-pulse-accent {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--user-accent) 25%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--user-accent) 0%, transparent);
    }
}

/* ---------- Inner content (visible when active) ---------- */

.dual-card-inner {
    display: grid;
    grid-template-columns: 3fr 7fr;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dual-card.is-active .dual-card-inner {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.15s;
}

/* ---------- Images area (left 70%) ---------- */

.dual-card-images {
    position: relative;
    overflow: hidden;
}

.dual-card-img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    will-change: opacity, transform;
}

.dual-card-img.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 1;
}

.dual-card-img.is-exiting {
    opacity: 0;
    transform: scale(0.97);
    z-index: 0;
}

.dual-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center; /* devices sit at bottom of card, not floating */
    display: block;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dual-card-img.is-active img:hover {
    transform: scale(1.02);
}

/* Expand button */
.dual-card-expand {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dual-card-expand:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.08);
}

.dual-card-expand:active {
    transform: scale(0.95);
}

.dual-card-expand svg {
    width: 18px;
    height: 18px;
}

/* ---------- Accordion area (right 30%) ---------- */

.dual-card-accordions {
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0 clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem);
    overflow-y: auto;
    scrollbar-width: none;
    order: -1;
}

.dual-card-accordions::-webkit-scrollbar {
    display: none;
}

h3.dual-card-heading {
    font-family: var(--font-main);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 clamp(0.75rem, 1.5vw, 1rem) 0;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.dual-card.is-active h3.dual-card-heading {
    opacity: 1;
    transform: translateY(0);
}

/* Accordion list */
.dual-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.dual-card-item {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dual-card.is-active .dual-card-item {
    opacity: 1;
    transform: translateY(0);
}

.dual-card.is-active .dual-card-item:nth-child(1) {
    transition-delay: 0.2s;
}
.dual-card.is-active .dual-card-item:nth-child(2) {
    transition-delay: 0.28s;
}
.dual-card.is-active .dual-card-item:nth-child(3) {
    transition-delay: 0.36s;
}

/* Trigger */
.dual-card-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: clamp(0.75rem, 1.25vw, 1rem) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

h4.dual-card-item-title {
    font-family: var(--font-main);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
    margin: 0;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Chevron — smooth spring rotation */
.dual-card-chevron {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--tertiary-text);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dual-card-item.is-active .dual-card-chevron {
    transform: rotate(180deg);
    color: var(--text-color);
}

/* Expandable body — smooth Apple-style grid animation */
.dual-card-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.dual-card-item.is-active .dual-card-body {
    grid-template-rows: 1fr;
}

.dual-card-body > p {
    min-height: 0;
    overflow: hidden;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.65;
    color: var(--text-color);
    margin: 0;
    padding-bottom: clamp(0.625rem, 1vw, 0.875rem);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.dual-card-item.is-active .dual-card-body > p {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .dual-card-inner {
        grid-template-columns: 4fr 6fr;
    }
}

@media (max-width: 768px) {
    .dual-card-container {
        flex-direction: column;
        height: auto;
        gap: 8px;
    }

    .dual-card {
        border-radius: 12px;
        transition: flex 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Collapsed card: horizontal bar */
    .dual-card:not(.is-active) {
        flex: none;
        height: 48px;
    }

    .dual-card:not(.is-active) .dual-card-label {
        padding: 0;
    }

    .dual-card:not(.is-active) .dual-card-label-icon {
        width: 32px;
        height: 32px;
    }

    .dual-card:not(.is-active) .dual-card-label-icon ion-icon {
        font-size: 16px;
        /* Point downward on mobile (stacked layout) */
        transform: rotate(90deg);
    }

    .dual-card:first-child:hover:not(.is-active),
    .dual-card:last-child:hover:not(.is-active) {
        transform: translateY(2px);
    }

    /* Active card: full content, stacked */
    .dual-card.is-active {
        flex: none;
    }

    .dual-card-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
    }

    .dual-card-images {
        aspect-ratio: 16 / 10;
    }

    .dual-card-accordions {
        padding: 16px 16px 20px 16px;
        order: 0;
    }
}

/* ---------- Reduce motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .dual-card-container,
    .dual-card,
    .dual-card-label,
    .dual-card-inner,
    .dual-card-img,
    .dual-card-body,
    .dual-card-body > p,
    .dual-card-chevron,
    .dual-card-item,
    .dual-card-item-title,
    .dual-card-label-icon,
    h3.dual-card-heading {
        transition: none !important;
        animation: none !important;
    }

    .dual-card-container,
    h3.dual-card-heading,
    .dual-card-item {
        opacity: 1 !important;
        transform: none !important;
    }
}