@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* Brand Overrides & Dark Mode Design System for Artsy Amigos */

:root {
    --ff-serif: 'Instrument Serif', Georgia, serif;
    --ff-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --clr-bg: #0C0C0C;
    --clr-text: #FAF7F2;
    --clr-muted: rgba(250, 247, 242, 0.75);
    --clr-accent: #FF4D24;
    --clr-border: rgba(255, 255, 255, 0.15);
}

/* Default Brand Styles */
.logo-text {
    font-family: var(--ff-sans);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: currentColor;
}

html:not([data-theme="dark"]) .logo-text {
    color: #12110b !important;
}

.block-intro-about__bg,
.block-wrapper svg.bg-graphic,
.hero-page__bg-graphic {
    opacity: 0.08 !important;
    pointer-events: none !important;
}

/* Brand Logo & Icon Image System */
.header-brand-icon {
    height: 38px;
    width: auto;
    max-height: 38px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-logo-img {
    height: 38px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.brand-pill-icon {
    height: 22px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s ease, filter 0.2s ease;
}

html:not([data-theme="dark"]) .brand-logo-img,
html:not([data-theme="dark"]) .brand-pill-icon {
    filter: invert(1) hue-rotate(180deg);
    /* Converts white line art to sleek dark charcoal for light mode */
    mix-blend-mode: multiply;
}

html[data-theme="dark"] .brand-logo-img,
html[data-theme="dark"] .brand-pill-icon {
    filter: none;
    /* Crisp white line art on dark background */
    mix-blend-mode: screen;
}

/* ==========================================
   Comprehensive Weichie.com Dark Theme System
   ========================================== */

/* 1. Global Dark Theme Variables & Background */
[data-theme="dark"] {
    --clr-black: #FAF7F2 !important;
    --clr-text: #FAF7F2 !important;
    --clr-light-beige: #0C0C0C !important;
    --clr-off-white: #0C0C0C !important;
    --clr-beige: #161616 !important;
    --clr-glass: rgba(12, 12, 12, 0.85) !important;
    --clr-bg: #0C0C0C !important;
    color-scheme: dark !important;
}

[data-theme="dark"] body,
[data-theme="dark"] main,
[data-theme="dark"] .archive,
[data-theme="dark"] .single-case {
    background-color: #0C0C0C !important;
    font-family: var(--ff-sans);
    color: #FAF7F2 !important;
}

/* 2. Global Dark Container & Section Backgrounds */
[data-theme="dark"] body,
[data-theme="dark"] main,
[data-theme="dark"] .content,
[data-theme="dark"] [data-barba="wrapper"],
[data-theme="dark"] [data-barba="container"],
[data-theme="dark"] .block-wrapper,
[data-theme="dark"] .hero-homepage,
[data-theme="dark"] .hero-homepage__stage,
[data-theme="dark"] .hero-homepage__canvas,
[data-theme="dark"] .block-hero-homepage,
[data-theme="dark"] .archive,
[data-theme="dark"] .single-service,
[data-theme="dark"] .single-post,
[data-theme="dark"] .single-case,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .footer,
[data-theme="dark"] .site-header {
    background-color: #131311 !important;
    color: #f4efea !important;
}

/* 3. Typography & Text Elements in Dark Mode */
[data-theme="dark"] .logo-text,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .card__title,
[data-theme="dark"] .hero-homepage__title,
[data-theme="dark"] .hero-homepage__title-line,
[data-theme="dark"] .latest-work__heading,
[data-theme="dark"] .archive__title {
    color: #f4efea !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span:not(.pill-contact__icon),
[data-theme="dark"] a:not(.pill-contact):not(.hero-homepage__label-link),
[data-theme="dark"] li,
[data-theme="dark"] dt,
[data-theme="dark"] dd,
[data-theme="dark"] label,
[data-theme="dark"] .hero-homepage__description,
[data-theme="dark"] .footer a,
[data-theme="dark"] .footer p,
[data-theme="dark"] .nav-main__link {
    color: #c5c0b8 !important;
}

/* 4. Interactive Link Hover States in Dark Mode */
[data-theme="dark"] .nav-main__link:hover,
[data-theme="dark"] .footer a:hover {
    color: #ff4f31 !important;
}

/* 5. Cards & Containers in Dark Mode (Weichie #22211e) */
[data-theme="dark"] .card,
[data-theme="dark"] .card__body,
[data-theme="dark"] .latest-work__item,
[data-theme="dark"] .archive__grid-item,
[data-theme="dark"] .technology__row-button,
[data-theme="dark"] .block-intro-about,
[data-theme="dark"] .team__member-card,
[data-theme="dark"] [data-background="beige"] {
    background-color: #22211e !important;
    border-color: rgba(244, 239, 234, 0.12) !important;
    color: #f4efea !important;
}

/* 6. Control Buttons in Dark Mode */
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .lang-switcher {
    background-color: #22211e !important;
    color: #f4efea !important;
    border: 1px solid rgba(244, 239, 234, 0.12) !important;
}

[data-theme="dark"] .theme-toggle__icon {
    color: #f4efea !important;
}

[data-theme="dark"] *,
[data-theme="dark"] *::before,
[data-theme="dark"] *::after {
    border-color: rgba(244, 239, 234, 0.12);
}

/* Service Filter Chips Active & Hover Brand Accent Color (#ff4f31) */
.archive__chip[data-active],
.archive__chip[data-active] .archive__chip__label,
.archive__chip[data-active] .archive__chip__icon,
.archive__chip[data-active] svg,
.archive__chip:hover,
.archive__chip:hover .archive__chip__label,
.archive__chip:hover .archive__chip__icon,
.archive__chip:hover svg {
    color: #ff4f31 !important;
}

[data-theme="dark"] .archive__chip[data-active],
[data-theme="dark"] .archive__chip[data-active] .archive__chip__label,
[data-theme="dark"] .archive__chip[data-active] .archive__chip__icon,
[data-theme="dark"] .archive__chip[data-active] svg,
[data-theme="dark"] .archive__chip:hover,
[data-theme="dark"] .archive__chip:hover .archive__chip__label,
[data-theme="dark"] .archive__chip:hover .archive__chip__icon,
[data-theme="dark"] .archive__chip:hover svg {
    color: #ff4f31 !important;
}

/* ==========================================
   Hero Homepage Service Navigation Labels
   ========================================== */
.hero-homepage__labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    margin: 2.5rem auto 0 auto;
    padding: 0;
    list-style: none;
    z-index: 10;
    position: relative;
}

.hero-homepage__label {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.hero-homepage__label-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4rem 0.6rem;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-family: var(--ff-sans, sans-serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity 0.2s ease, color 0.2s ease;
    outline: none;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}

.hero-homepage__label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
}

.hero-homepage__label-icon svg,
.hero-homepage__label-icon path {
    width: 1.35rem;
    height: 1.35rem;
    display: block;
    transition: fill 0.2s ease, color 0.2s ease;
}

.hero-homepage__label-text {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
}

/* --- LIGHT MODE --- */
html:not([data-theme="dark"]) .hero-homepage__label-link,
body:not([data-theme="dark"]) .hero-homepage__label-link {
    color: #12110b !important;
}

html:not([data-theme="dark"]) .hero-homepage__label-text,
body:not([data-theme="dark"]) .hero-homepage__label-text {
    color: #12110b !important;
}

html:not([data-theme="dark"]) .hero-homepage__label-icon svg,
html:not([data-theme="dark"]) .hero-homepage__label-icon path,
body:not([data-theme="dark"]) .hero-homepage__label-icon svg,
body:not([data-theme="dark"]) .hero-homepage__label-icon path {
    fill: #12110b !important;
    color: #12110b !important;
}

/* Light mode hover/active: icon turns orange-red (#ff4f31), text stays dark (#12110b) */
html:not([data-theme="dark"]) .hero-homepage__label-link.is-active .hero-homepage__label-icon svg,
html:not([data-theme="dark"]) .hero-homepage__label-link.is-active .hero-homepage__label-icon path,
html:not([data-theme="dark"]) .hero-homepage__label-link:hover .hero-homepage__label-icon svg,
html:not([data-theme="dark"]) .hero-homepage__label-link:hover .hero-homepage__label-icon path,
body:not([data-theme="dark"]) .hero-homepage__label-link.is-active .hero-homepage__label-icon svg,
body:not([data-theme="dark"]) .hero-homepage__label-link.is-active .hero-homepage__label-icon path,
body:not([data-theme="dark"]) .hero-homepage__label-link:hover .hero-homepage__label-icon svg,
body:not([data-theme="dark"]) .hero-homepage__label-link:hover .hero-homepage__label-icon path {
    fill: #ff4f31 !important;
    color: #ff4f31 !important;
}

/* --- DARK MODE --- */
html[data-theme="dark"] .hero-homepage__label-link,
body[data-theme="dark"] .hero-homepage__label-link,
[data-theme="dark"] .hero-homepage__label-link {
    color: #ffffff !important;
}

html[data-theme="dark"] .hero-homepage__label-text,
body[data-theme="dark"] .hero-homepage__label-text,
[data-theme="dark"] .hero-homepage__label-text {
    color: #ffffff !important;
}

html[data-theme="dark"] .hero-homepage__label-icon svg,
html[data-theme="dark"] .hero-homepage__label-icon path,
body[data-theme="dark"] .hero-homepage__label-icon svg,
body[data-theme="dark"] .hero-homepage__label-icon path,
[data-theme="dark"] .hero-homepage__label-icon svg,
[data-theme="dark"] .hero-homepage__label-icon path {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Dark mode hover/active: icon turns orange-red (#ff4f31), text stays crisp white (#ffffff) */
html[data-theme="dark"] .hero-homepage__label-link.is-active .hero-homepage__label-icon svg,
html[data-theme="dark"] .hero-homepage__label-link.is-active .hero-homepage__label-icon path,
html[data-theme="dark"] .hero-homepage__label-link:hover .hero-homepage__label-icon svg,
html[data-theme="dark"] .hero-homepage__label-link:hover .hero-homepage__label-icon path,
body[data-theme="dark"] .hero-homepage__label-link.is-active .hero-homepage__label-icon svg,
body[data-theme="dark"] .hero-homepage__label-link.is-active .hero-homepage__label-icon path,
body[data-theme="dark"] .hero-homepage__label-link:hover .hero-homepage__label-icon svg,
body[data-theme="dark"] .hero-homepage__label-link:hover .hero-homepage__label-icon path,
[data-theme="dark"] .hero-homepage__label-link.is-active .hero-homepage__label-icon svg,
[data-theme="dark"] .hero-homepage__label-link.is-active .hero-homepage__label-icon path,
[data-theme="dark"] .hero-homepage__label-link:hover .hero-homepage__label-icon svg,
[data-theme="dark"] .hero-homepage__label-link:hover .hero-homepage__label-icon path {
    fill: #ff4f31 !important;
    color: #ff4f31 !important;
}

html[data-theme="dark"] .hero-homepage__label-link.is-active .hero-homepage__label-text,
html[data-theme="dark"] .hero-homepage__label-link:hover .hero-homepage__label-text,
body[data-theme="dark"] .hero-homepage__label-link.is-active .hero-homepage__label-text,
body[data-theme="dark"] .hero-homepage__label-link:hover .hero-homepage__label-text,
[data-theme="dark"] .hero-homepage__label-link.is-active .hero-homepage__label-text,
[data-theme="dark"] .hero-homepage__label-link:hover .hero-homepage__label-text {
    color: #ffffff !important;
}

/* ==========================================
   Card Descriptions & Project Modal System
   ========================================== */

.card__description {
    font-size: 0.9375rem;
    line-height: 1.45;
    margin-top: 0.5rem;
    color: #666666;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-theme="dark"] .card__description {
    color: #c5c0b8 !important;
}

/* Project Lightbox Modal Styling */
.project-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.project-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.project-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.project-modal__dialog {
    position: relative;
    z-index: 2;
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.25rem;
    max-width: 48rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: #f4efea;
}

.project-modal.is-open .project-modal__dialog {
    transform: scale(1);
}

.project-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.project-modal__close:hover {
    background: #ff4f31;
    border-color: #ff4f31;
    transform: scale(1.05);
}

.project-modal__media {
    width: 100%;
    max-height: 26rem;
    overflow: hidden;
    background: #09090b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.project-modal__image {
    width: 100%;
    height: 100%;
    max-height: 26rem;
    object-fit: cover;
    display: block;
}

.project-modal__body {
    padding: 2rem;
}

.project-modal__category {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ff4f31;
    margin-bottom: 0.5rem;
}

.project-modal__title {
    font-size: 2rem;
    font-weight: 700;
    color: #f4efea;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

.project-modal__desc {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #c5c0b8;
    margin-bottom: 1.75rem;
}

.project-modal__footer {
    display: flex;
    justify-content: flex-end;
}

.project-modal__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: #ff4f31;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.project-modal__cta:hover {
    background: #e03e22;
    transform: translateY(-2px);
}

/* ==========================================
   Weichie.com Case Study Detail Page System
   ========================================== */

/* 1. Case Hero & Top Navigation */
.case-hero-section {
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.case-hero__back-bar {
    margin-bottom: 2rem;
}

.case-hero__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ff4f31 !important;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.case-hero__back-link:hover {
    transform: translateX(-4px);
}

.case-hero__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.case-hero__title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.case-hero__visit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 79, 49, 0.4);
    background: rgba(255, 79, 49, 0.08);
    color: #ff4f31 !important;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.case-hero__visit-btn:hover {
    background: #ff4f31;
    color: #ffffff !important;
    border-color: #ff4f31;
    transform: translateY(-2px);
}

.case-hero__tagline {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    line-height: 1.4;
    font-weight: 400;
    color: var(--clr-text, #f4efea);
    margin-bottom: 2.5rem;
    max-width: 54rem;
}

.elbow {
    color: #ff4f31 !important;
    font-weight: 700;
    margin-right: 0.25rem;
}

/* 2. Metadata Grid */
.case-hero__meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(244, 239, 234, 0.12);
    border-bottom: 1px solid rgba(244, 239, 234, 0.12);
    margin-bottom: 3rem;
}

.case-meta__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.case-meta__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888888;
}

.case-meta__value {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--clr-text, #f4efea);
}

.case-meta__tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tech-pill {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--clr-text, #f4efea);
}

/* 3. Hero Media Container */
.case-hero__media-container {
    width: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #18181b;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.case-hero__media-img {
    width: 100%;
    height: auto;
    max-height: 42rem;
    object-fit: cover;
    display: block;
}

/* 4. Client Overview Section */
.case-overview-section {
    padding: 4rem 0;
}

.case-overview__grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3.5rem;
}

@media (max-width: 991px) {
    .case-overview__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.case-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ff4f31 !important;
    margin-bottom: 0.75rem;
}

.case-overview__heading {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.case-overview__lead {
    font-size: 1.1875rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #c5c0b8;
}

.case-overview__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.case-overview__bullets li {
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--clr-text, #f4efea);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* 5. Narrative Section & Browser Mockup */
.case-narrative-section {
    padding: 3rem 0;
}

.case-narrative__block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    margin-bottom: 4rem;
}

@media (max-width: 991px) {
    .case-narrative__block {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.case-narrative__heading {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
}

.case-narrative__body {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #c5c0b8;
}

.case-browser-mockup {
    border-radius: 0.75rem;
    overflow: hidden;
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.case-browser-mockup__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #22211e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.case-browser-mockup__header .dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}

.case-browser-mockup__header .dot.red { background: #ff5f56; }
.case-browser-mockup__header .dot.yellow { background: #ffbd2e; }
.case-browser-mockup__header .dot.green { background: #27c93f; }

.case-browser-mockup__header .url-bar {
    margin-left: 0.75rem;
    font-size: 0.75rem;
    color: #888888;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.75rem;
    border-radius: 4px;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-browser-mockup__img {
    width: 100%;
    height: auto;
    display: block;
}

/* 6. Strategy Accordions */
.case-strategy-section {
    padding: 4rem 0;
    border-top: 1px solid rgba(244, 239, 234, 0.12);
}

.case-strategy__header {
    margin-bottom: 2.5rem;
}

.case-strategy__heading {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0;
}

.case-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.case-accordion__item {
    background: #22211e;
    border: 1px solid rgba(244, 239, 234, 0.12);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.case-accordion__item[open] {
    border-color: rgba(255, 79, 49, 0.4);
}

.case-accordion__summary {
    padding: 1.25rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    user-select: none;
    color: var(--clr-text, #f4efea);
}

.case-accordion__summary::-webkit-details-marker {
    display: none;
}

.case-accordion__icon {
    color: #ff4f31 !important;
    font-weight: 700;
}

.case-accordion__content {
    padding: 0 1.5rem 1.25rem 3rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #c5c0b8;
}

/* 7. Next / Previous Project Footer Navigation */
.case-nav-section {
    padding: 4rem 0 6rem 0;
    border-top: 1px solid rgba(244, 239, 234, 0.12);
}

.case-nav__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 767px) {
    .case-nav__grid {
        grid-template-columns: 1fr;
    }
}

.case-nav__card {
    display: flex;
    flex-direction: column;
    padding: 2.25rem;
    background: #22211e;
    border: 1px solid rgba(244, 239, 234, 0.12);
    border-radius: 1rem;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.case-nav__card:hover {
    transform: translateY(-4px);
    border-color: #ff4f31;
}

.case-nav__sub {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ff4f31 !important;
    margin-bottom: 0.5rem;
}

.case-nav__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-text, #f4efea);
    margin: 0 0 0.35rem 0;
}

.case-nav__cat {
    font-size: 0.875rem;
    color: #888888;
}

/* ==========================================
   Weichie.com Exact Parity & Typography Rules
   ========================================== */

/* --- LIGHT MODE WORK PAGE TYPOGRAPHY --- */
html:not([data-theme="dark"]) .archive__title,
body:not([data-theme="dark"]) .archive__title {
    font-family: var(--ff-serif) !important;
    font-size: clamp(3.5rem, 6vw, 5.5rem) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    color: #12110b !important;
}

html:not([data-theme="dark"]) .intro__text,
body:not([data-theme="dark"]) .intro__text {
    font-family: var(--ff-sans) !important;
    font-size: clamp(1.125rem, 1.5vw, 1.35rem) !important;
    line-height: 1.6 !important;
    color: rgba(18, 17, 11, 0.75) !important;
    max-width: 680px !important;
}

html:not([data-theme="dark"]) .intro__arrow,
body:not([data-theme="dark"]) .intro__arrow {
    color: #FF4D24 !important;
}

html:not([data-theme="dark"]) .archive__chip,
body:not([data-theme="dark"]) .archive__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(18, 17, 11, 0.18) !important;
    background: transparent !important;
    color: #12110b !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

html:not([data-theme="dark"]) .archive__chip .archive__chip__label,
html:not([data-theme="dark"]) .archive__chip .archive__chip__icon,
html:not([data-theme="dark"]) .archive__chip svg {
    color: #12110b !important;
    fill: #12110b !important;
}

html:not([data-theme="dark"]) .archive__chip[data-active],
html:not([data-theme="dark"]) .archive__chip:hover,
body:not([data-theme="dark"]) .archive__chip[data-active],
body:not([data-theme="dark"]) .archive__chip:hover {
    background: #12110b !important;
    color: #FAF7F2 !important;
    border-color: #12110b !important;
}

html:not([data-theme="dark"]) .archive__chip[data-active] .archive__chip__label,
html:not([data-theme="dark"]) .archive__chip[data-active] .archive__chip__icon,
html:not([data-theme="dark"]) .archive__chip[data-active] svg,
html:not([data-theme="dark"]) .archive__chip:hover .archive__chip__label,
html:not([data-theme="dark"]) .archive__chip:hover .archive__chip__icon,
html:not([data-theme="dark"]) .archive__chip:hover svg {
    color: #FAF7F2 !important;
    fill: #FAF7F2 !important;
}

html:not([data-theme="dark"]) .archive__grid-item .card__title {
    font-family: var(--ff-sans) !important;
    font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
    font-weight: 600 !important;
    line-height: 1.25;
    margin: 0.75rem 0 0.25rem 0;
    color: #12110b !important;
}

html:not([data-theme="dark"]) .archive__grid-item .card__subtitle {
    font-size: 0.875rem !important;
    color: rgba(18, 17, 11, 0.6) !important;
    display: block;
}

/* --- DARK MODE WORK PAGE TYPOGRAPHY --- */
html[data-theme="dark"] .archive__title,
body[data-theme="dark"] .archive__title {
    font-family: var(--ff-serif) !important;
    font-size: clamp(3.5rem, 6vw, 5.5rem) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    color: #FAF7F2 !important;
}

html[data-theme="dark"] .intro__text,
body[data-theme="dark"] .intro__text {
    font-family: var(--ff-sans) !important;
    font-size: clamp(1.125rem, 1.5vw, 1.35rem) !important;
    line-height: 1.6 !important;
    color: rgba(250, 247, 242, 0.75) !important;
    max-width: 680px !important;
}

html[data-theme="dark"] .intro__arrow,
body[data-theme="dark"] .intro__arrow {
    color: #FF4D24 !important;
}

html[data-theme="dark"] .archive__chip,
body[data-theme="dark"] .archive__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: transparent !important;
    color: #FAF7F2 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

html[data-theme="dark"] .archive__chip .archive__chip__label,
html[data-theme="dark"] .archive__chip .archive__chip__icon,
html[data-theme="dark"] .archive__chip svg {
    color: #FAF7F2 !important;
    fill: #FAF7F2 !important;
}

html[data-theme="dark"] .archive__chip[data-active],
html[data-theme="dark"] .archive__chip:hover,
body[data-theme="dark"] .archive__chip[data-active],
body[data-theme="dark"] .archive__chip:hover {
    background: #FAF7F2 !important;
    color: #111111 !important;
    border-color: #FAF7F2 !important;
}

html[data-theme="dark"] .archive__chip[data-active] .archive__chip__label,
html[data-theme="dark"] .archive__chip[data-active] .archive__chip__icon,
html[data-theme="dark"] .archive__chip[data-active] svg,
html[data-theme="dark"] .archive__chip:hover .archive__chip__label,
html[data-theme="dark"] .archive__chip:hover .archive__chip__icon,
html[data-theme="dark"] .archive__chip:hover svg {
    color: #111111 !important;
    fill: #111111 !important;
}

html[data-theme="dark"] .archive__grid-item .card__title {
    font-family: var(--ff-sans) !important;
    font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
    font-weight: 600 !important;
    line-height: 1.25;
    margin: 0.75rem 0 0.25rem 0;
    color: #FAF7F2 !important;
}

html[data-theme="dark"] .archive__grid-item .card__subtitle {
    font-size: 0.875rem !important;
    color: rgba(250, 247, 242, 0.6) !important;
    display: block;
}

.archive__grid-item .card,
[data-theme="dark"] .archive__grid-item .card {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.archive__grid-item .card__media {
    border-radius: 1.25rem !important;
    overflow: hidden !important;
    margin-bottom: 1rem;
    background: #18181b;
    aspect-ratio: 16 / 10;
}

.archive__grid-item .card__image {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-radius: 1.25rem !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.archive__grid-item .card:hover .card__image {
    transform: scale(1.04) !important;
}

.archive__grid-item .card__description {
    display: none !important;
}

/* ==========================================
   Single Case Study Page Exact Parity
   ========================================== */

.case-hero__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #FF4D24 !important;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.case-hero__title {
    font-family: var(--ff-serif) !important;
    font-size: clamp(3.5rem, 7vw, 6.5rem) !important;
    font-weight: 400 !important;
    line-height: 1.0 !important;
    letter-spacing: -0.02em !important;
    color: #FAF7F2 !important;
    margin: 0;
}

.case-hero__visit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #FF4D24 !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.case-hero__visit-link:hover {
    opacity: 0.85;
    text-decoration: underline;
}

.case-hero__meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 3.5rem;
}

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

.case-meta__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(250, 247, 242, 0.5);
    margin-bottom: 0.5rem;
}

.case-meta__value {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #FAF7F2;
}

.case-overview__heading {
    font-family: var(--ff-serif) !important;
    font-size: clamp(2.25rem, 4vw, 3.5rem) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: #FAF7F2 !important;
    margin: 0;
}

.case-overview__lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(250, 247, 242, 0.85);
    margin-bottom: 2rem;
}

.case-overview__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.case-overview__bullets li {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #FAF7F2;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

/* System Architecture Node Diagram */
.case-architecture-nodes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.arch-node {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.875rem;
    font-weight: 600;
    color: #FAF7F2;
}

.arch-node__icon {
    color: #FF4D24;
}

/* Weichie Browser Frame (#F3F3F3) */
.case-browser-mockup {
    border-radius: 1rem;
    overflow: hidden;
    background: #F3F3F3;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    margin: 3rem 0;
}

.case-browser-mockup__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: #E5E5E5;
    border-bottom: 1px solid #D4D4D4;
}

.case-browser-mockup__header .dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
}

.case-browser-mockup__header .dot.red { background: #FF5F56; }
.case-browser-mockup__header .dot.yellow { background: #FFBD2E; }
.case-browser-mockup__header .dot.green { background: #27C93F; }

.case-browser-mockup__header .url-bar {
    margin-left: 0.75rem;
    font-size: 0.8125rem;
    color: #666666;
    background: #FFFFFF;
    padding: 0.25rem 1rem;
    border-radius: 6px;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #E5E5E5;
}

.case-browser-mockup__body img {
    width: 100%;
    height: auto;
    display: block;
}

/* Strategy Accordions */
.case-accordion-list {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
}

.case-accordion__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.5rem 0;
}

.case-accordion__summary {
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FAF7F2;
}

.case-accordion__summary::-webkit-details-marker {
    display: none;
}

.case-accordion__icon {
    color: #FF4D24;
    font-size: 1.5rem;
    font-weight: 400;
}

.case-accordion__content {
    padding-top: 1rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(250, 247, 242, 0.75);
}

/* Next Project Footer Link */
.next-project-footer {
    padding: 6rem 0 4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
}

.next-project__sub {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #FF4D24;
    margin-bottom: 1rem;
    display: block;
}

.next-project__title {
    font-family: var(--ff-serif) !important;
    font-size: clamp(3rem, 7vw, 5.5rem) !important;
    font-weight: 400 !important;
    color: #FAF7F2 !important;
    text-decoration: none !important;
    line-height: 1.1;
    display: inline-block;
    transition: transform 0.3s ease;
}

.next-project__title:hover {
    transform: translateY(-4px);
    color: #FF4D24 !important;
}

.next-project__back-link {
    display: inline-block;
    margin-top: 3rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.6) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.next-project__back-link:hover {
    color: #FAF7F2 !important;
}

/* Zero-Lag Instant Reveal & Performance System */
[data-reveal],
[data-text-reveal],
[data-reveal-chain],
.block-wrapper,
.hero-homepage,
.latest-work__grid,
.latest-work__item,
.archive__grid-item {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Exact Weichie.com Staggered Showcase System */
.latest-work__showcase {
    position: relative !important;
}

.latest-work__callout {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    margin: 0 !important;
}

.latest-work__callout--bottom {
    position: absolute !important;
    inset: auto auto 0 0 !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
}

@media (min-width: 992px) {
    .latest-work__grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(2rem, 5vw, 6rem) minmax(0, 1fr) clamp(1rem, 2vw, 2.5rem) minmax(0, 1fr) !important;
        align-items: start !important;
        column-gap: 0 !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .latest-work__item {
        margin: 0 !important;
    }

    .latest-work__item[data-pos="1"] {
        grid-column: 1 !important;
    }

    .latest-work__item[data-pos="2"] {
        grid-column: 3 !important;
    }

    .latest-work__item[data-pos="3"] {
        grid-column: 5 !important;
    }

    .latest-work__item[data-pos="2"]::before {
        content: "" !important;
        width: 100% !important;
        display: block !important;
        aspect-ratio: 9/8 !important;
    }

    .latest-work__item[data-pos="3"]::before {
        content: "" !important;
        width: 100% !important;
        display: block !important;
        aspect-ratio: 9/4 !important;
    }
}

@media (max-width: 991px) {
    .latest-work__showcase {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .latest-work__callout,
    .latest-work__callout--bottom {
        position: static !important;
        margin: 1rem 0 !important;
    }

    .latest-work__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .latest-work__item[data-pos="2"]::before,
    .latest-work__item[data-pos="3"]::before {
        display: none !important;
    }
}

.latest-work__item .card__media {
    border-radius: 1.25rem !important;
    overflow: hidden !important;
    background: #18181b !important;
    aspect-ratio: 16 / 10 !important;
}

.latest-work__item .card__image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.latest-work__item .card:hover .card__image {
    transform: scale(1.04) !important;
}

/* Prevent Barba.js Container Fade & Black Screen Issues */
[data-barba="container"],
[data-barba="wrapper"],
main.archive,
main.content,
main.single-case,
main.single-service,
body {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: opacity 0s !important;
}