/* =========================================================
   DESIGN SYSTEM — ANUJA PORTFOLIO 2026
   Tokens, Typography, Layout, Nav, Tiles, Case Layouts
   ========================================================= */

/* ---------- TOKENS ---------- */

:root {
    /* Colors */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-elevated: #f7f7f8;

    --color-text: #111111;
    --color-text-muted: #555555;

    --color-border-subtle: #e5e5e5;

    --color-accent: #E63946;
    /* Brand coral-red */
    --color-accent-soft: #FDECEF;
    /* Soft coral tint */

    /* Shadows */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-soft-hover: 0 8px 20px rgba(0, 0, 0, 0.08);

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Typography */
    --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    --fw-hairline: 100;
    /* Hero */
    --fw-light: 200;
    /* Body */
    --fw-regular: 400;
    /* Slight emphasis */
    --fw-semibold: 600;
    /* Section headings */

    --fs-hero: clamp(2.4rem, 4vw, 3.4rem);
    --fs-heading: clamp(1.5rem, 3vw, 2.1rem);
    --fs-subheading: 1.1rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;

    --lh-tight: 1.25;
    --lh-normal: 1.6;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Layout */
    --max-width: 1200px;
    --nav-height: 64px;
}

/* ---------- RESET & GLOBAL ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    height: 100%;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    font-weight: var(--fw-regular);
    font-style: normal;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* ---------- FULL-PAGE BACKGROUND SCRIBBLE ---------- */

.page-art-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.page-art-svg {
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.page-scribble {
    fill: none;
    stroke: rgba(230, 57, 70, 0.12);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: pageScribbleDraw 8s ease-in-out infinite;
}

/* Stagger the animation for multiple lines */
.page-scribble:nth-child(2) {
    animation-delay: 1.5s;
}

.page-scribble:nth-child(3) {
    animation-delay: 3s;
}

.page-scribble:nth-child(4) {
    animation-delay: 4.5s;
}

.page-scribble:nth-child(5) {
    animation-delay: 6s;
}

.page-scribble:nth-child(6) {
    animation-delay: 7.5s;
}

@keyframes pageScribbleDraw {
    0% {
        stroke-dashoffset: 2000;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    60% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .page-scribble {
        animation: none;
        stroke-dashoffset: 0;
        stroke: rgba(230, 57, 70, 0.12);
    }
}

/* Ensure all content sits above the background scribble */
nav,
main,
footer {
    position: relative;
    z-index: 1;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Links */
a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

/* Base text tags */
h1,
h2,
h3,
h4 {
    margin: 0 0 var(--space-md);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.015em;
    line-height: var(--lh-tight);
    color: var(--color-text);
}

p {
    margin: 0 0 var(--space-md);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text);
}

.text-center {
    text-align: center;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- TYPOGRAPHY UTILITIES ---------- */

.text-hero {
    font-size: var(--fs-hero);
    font-weight: var(--fw-hairline);
    letter-spacing: -0.03em;
    line-height: var(--lh-tight);
}

.text-heading {
    font-size: var(--fs-heading);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.015em;
}

.text-subheading {
    font-size: var(--fs-subheading);
    font-weight: var(--fw-regular);
}

.text-body {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
}

.text-small {
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
}

.text-meta {
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* ---------- LAYOUT HELPERS ---------- */

.page {
    min-height: 100vh;
    margin-top: 0;
    padding-top: 0;
}

/* Ensure no gap between nav and case study nav */
main.page {
    margin-top: 0;
    padding-top: 0;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Ensure case study nav container has no top margin */
.case-study-nav .container {
    margin-top: 0;
    padding-top: 0;
}

.section {
    padding: var(--space-3xl) 0;
}

.section--tight {
    padding: var(--space-2xl) 0;
}

#contact {
    padding-bottom: calc(var(--space-2xl) * 4.5);
    margin-bottom: var(--space-2xl);
}

.section-heading {
    font-size: var(--fs-heading);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.015em;
    text-align: center;
}

.section-intro {
    max-width: 900px;
    margin: 0 auto var(--space-lg);
    text-align: center;
    color: var(--color-text-muted);
}

.section-intro--wide {
    max-width: 1050px;
}

.section-intro--narrow {
    max-width: 800px;
}

.section-intro--tall {
    max-width: 1000px;
    margin: 0 auto var(--space-2xl);
}

/* Grid helpers */

.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 960px) {

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

/* Simple margin helper */
.mt-lg {
    margin-top: var(--space-lg);
}

.mb-lg {
    margin-bottom: var(--space-lg);
}

/* ---------- NAVIGATION ---------- */

nav {
    background-color: var(--color-bg);
    color: var(--color-text);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1.5rem;
    box-shadow: none;
    border-bottom: none;
    height: var(--nav-height);
    box-sizing: border-box;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    letter-spacing: 0.12em;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    transition: color 0.9s ease;
    text-decoration: none;
}

.nav-links li a:hover,
.nav-links li a.active {
    color: var(--color-accent);
    text-decoration: none;
}

.nav-icon {
    width: 40px;
    height: auto;
}

/* Hamburger */

#hamburger-btn {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    margin-left: auto;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background-color: var(--color-text);
    transition: all 0.9s ease;
}

/* Mobile menu */

#mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.9s ease, opacity 0.9s ease;
    z-index: 1100;
}

#mobile-menu.open {
    display: flex;
    transform: translateX(0);
    opacity: 1;
}

#mobile-menu a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-decoration: none;
}

#close-menu {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Nav responsive */

@media (max-width: 960px) {
    .nav-links {
        display: flex;
        gap: 1.5rem;
    }

    /* Hide text links on mobile, keep logo on left and hamburger on right */
    .nav-links li:not(:first-child) {
        display: none;
    }

    #hamburger-btn {
        display: flex;
    }
}

/* ---------- HERO (HOMEPAGE) ---------- */

.hero-section {
    margin-top: var(--nav-height);
    padding: var(--space-3xl) var(--space-md) var(--space-2xl);
    background-color: transparent;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--nav-height));
    position: relative;
    overflow: visible;
}

.hero-content {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
    /* sit above the doodle */
}

/* ---------- HERO DOODLE / VIBE LINE ---------- */

.hero-art-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 1;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.hero-art-svg {
    width: 100%;
    max-width: 1400px;
    height: auto;
    min-height: 300px;
}

.hero-scribble {
    fill: none;
    /* soft coral version of your accent color - reduced by 20% */
    stroke: rgba(230, 57, 70, 0.10);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: heroScribbleDraw 6s ease-in-out infinite;
}

/* Stagger the animation for multiple lines */
.hero-scribble:nth-child(2) {
    animation-delay: 0.5s;
}

.hero-scribble:nth-child(3) {
    animation-delay: 1s;
}

.hero-scribble:nth-child(4) {
    animation-delay: 1.5s;
}

.hero-scribble:nth-child(5) {
    animation-delay: 0.8s;
}

.hero-scribble:nth-child(6) {
    animation-delay: 2s;
}

.hero-scribble:nth-child(7) {
    animation-delay: 1.2s;
}

.hero-scribble:nth-child(8) {
    animation-delay: 0.3s;
}

.hero-scribble:nth-child(9) {
    animation-delay: 1.8s;
}

.hero-scribble:nth-child(10) {
    animation-delay: 0.6s;
}

.hero-scribble:nth-child(11) {
    animation-delay: 2.2s;
}

.hero-scribble:nth-child(12) {
    animation-delay: 1.4s;
}

.hero-scribble:nth-child(13) {
    animation-delay: 0.4s;
}

.hero-scribble:nth-child(14) {
    animation-delay: 2.5s;
}

@keyframes heroScribbleDraw {
    0% {
        stroke-dashoffset: 2000;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    60% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* Slightly softer on very small screens */
@media (max-width: 640px) {
    .hero-art-bg {
        opacity: 1;
    }

    .hero-art-svg {
        width: min(1000px, 130%);
    }

    .hero-scribble {
        stroke: rgba(230, 57, 70, 0.06);
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-scribble {
        animation: none;
        stroke-dashoffset: 0;
        stroke: rgba(230, 57, 70, 0.10);
    }

    .hero-name,
    .hero-role,
    .hero-title,
    .hero-metric,
    .hero-buttons,
    .hero-content>.text-small.text-center.mt-lg {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.hero-name {
    font-size: 1.1rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
    /* Animation handled by JavaScript */
}

.hero-role {
    font-size: 1rem;
    font-weight: var(--fw-regular);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
    /* Animation handled by JavaScript */
}

.hero-title {
    font-size: var(--fs-hero);
    font-weight: var(--fw-hairline);
    letter-spacing: 0.02em;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    /* Animation handled by JavaScript */
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    /* Animation handled by JavaScript */
}

/* Hero fade-in animation */
@keyframes heroFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero metrics fade-in with staggered delays */
.hero-metric {
    /* Animation handled by JavaScript */
}

/* Vibe-coded text fade-in */
.hero-content .text-small.text-center.mt-lg {
    /* Animation handled by JavaScript */
}

/* ---------- BUTTONS ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: var(--fw-regular);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--color-elevated);
    color: var(--color-text);
    transition:
        background-color 0.9s ease,
        color 0.9s ease,
        box-shadow 0.9s ease,
        transform 0.9s ease,
        border-color 0.9s ease;
}

.btn:hover,
.btn:focus-visible {
    background-color: var(--color-accent);
    color: #ffffff;
    box-shadow: var(--shadow-soft-hover);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Circular variant (for arrows, icons) */

.btn.circular-btn {
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.2rem;
    letter-spacing: 0;
}

/* ---------- BIO / ABOUT ---------- */

.bio {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-md) 0;
    text-align: left;
}

.bio p {
    color: var(--color-text-muted);
}

/* About philosophy pills */

.about-philosophy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

.about-pill {
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.4rem;
    box-shadow: var(--shadow-soft);
    font-size: 0.95rem;
    line-height: 1.6;
    transition:
        background-color 0.9s ease,
        box-shadow 0.9s ease,
        transform 0.18s ease,
        color 0.18s ease;
}

.about-pill:hover {
    background-color: var(--color-accent-soft);
    color: var(--color-text);
    box-shadow: var(--shadow-soft-hover);
    transform: translateY(-2px);
}

@media (max-width: 960px) {
    .about-philosophy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .about-philosophy-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- FEATURED PROJECTS GRID ---------- */

#what-my-work-looks-like {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    margin-top: var(--space-3xl);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    max-width: var(--max-width);
    margin: var(--space-lg) auto 0 auto;
    align-items: stretch;
}

.project-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.project-wrapper:hover,
.project-wrapper:focus {
    text-decoration: none;
}

.project-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 2.25rem 2rem 2rem;
    box-shadow: var(--shadow-soft);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    min-height: 480px;
    transition:
        transform 1s ease,
        box-shadow 1s ease,
        background-color 1s ease,
        opacity 1s ease;
}

.project-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

.project-card p {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    transition: color 1s ease;
}

.project-card p strong {
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.project-image {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: -2rem;
    margin-right: -2rem;
    width: calc(100% + 4rem);
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: auto;
    border-radius: 0;
    display: block;
}

/* Hover behavior: lift card and highlight outcome */

.project-card {
    position: relative;
    opacity: 0.98;
}

.project-wrapper:hover .project-card,
.project-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft-hover);
    background-color: var(--color-surface);
    opacity: 1;
}

.project-wrapper:hover .project-card p:last-of-type,
.project-card:hover p:last-of-type {
    color: var(--color-accent);
}

.project-card:hover h3,
.project-card:hover .text-heading {
    color: var(--color-accent);
}

/* Reveal the bottom CTA on hover */

.project-btn {
    margin-top: 1.5rem;
    align-self: center;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 1s ease, transform 1s ease;
}

.project-wrapper:hover .project-btn,
.project-card:hover+.project-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 960px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        min-height: 0;
    }
}

/* ---------- PROJECT ARCHIVE GRID (COMPACT) ---------- */

.project-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    max-width: var(--max-width);
    margin: var(--space-lg) auto 0 auto;
}

.project-archive-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.project-archive-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft-hover);
    text-decoration: none;
}

.project-archive-item:hover .project-archive-info h3 {
    color: var(--color-accent);
}

.project-archive-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-elevated);
}

.project-archive-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.project-archive-item:hover .project-archive-thumb img {
    transform: scale(1.02);
}

.project-archive-info {
    padding: var(--space-md);
}

.project-archive-info .text-meta {
    margin: 0 0 0.25rem 0;
    font-size: 0.75rem;
}

.project-archive-info h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    transition: color 0.3s ease;
}

@media (max-width: 960px) {
    .project-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

/* ---------- COMMUNITY & WRITING GRID ---------- */

#community {
    padding: var(--space-2xl) var(--space-md) var(--space-3xl);
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    max-width: 900px;
    margin: var(--space-lg) auto 0 auto;
}

.community-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 1.75rem 1.75rem 2rem;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.9s ease, box-shadow 0.9s ease;
}

.community-card p {
    font-size: 0.98rem;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

.community-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft-hover);
}

@media (max-width: 768px) {
    .community-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ---------- LET'S TALK SECTION ---------- */

#lets-talk {
    padding: var(--space-3xl) var(--space-md) var(--space-3xl);
    margin-top: var(--space-3xl);
    padding-bottom: 11rem;
    /* breathing room above fixed footer */
}

#lets-talk p {
    color: var(--color-text-muted);
}

.lets-talk-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

/* “Curious about the person behind the work?” toggle */

.lets-talk-summary-container {
    text-align: center;
    margin-top: var(--space-2xl);
}

.lets-talk-summary-btn {
    background: none;
    border: none;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    transition: color 0.9s ease, transform 0.9s ease;
}

.lets-talk-summary-btn .summary-text {
    font-size: 1.2rem;
}

.lets-talk-summary-btn:hover {
    color: var(--color-text);
    transform: translateY(-2px);
}

.summary-arrow {
    display: inline-flex;
}

/* Details content */

.lets-talk-details {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

.lets-talk-details-content {
    margin-top: var(--space-xl);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.lets-talk-details-content p {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-xl);
}

/* Collapse arrow */

.collapse-arrow {
    margin-top: var(--space-md);
    display: none;
}

details[open] .collapse-arrow {
    display: inline-flex;
}

/* ---------- CREATIVE GRID (PAINTING / POETRY / ETC.) ---------- */

.creative-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-2xl);
}

.creative-item {
    text-align: center;
}

.creative-tile {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.9s ease, box-shadow 0.9s ease;
}

.creative-tile img {
    width: 100%;
    height: auto;
}

.creative-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft-hover);
}

.creative-label-below {
    margin-top: var(--space-sm);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
}

@media (max-width: 960px) {
    .creative-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .creative-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- GENERIC CARD / TILE SYSTEM ---------- */

.card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: var(--space-lg);
    text-decoration: none;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    transition:
        transform 0.9s ease,
        box-shadow 0.9s ease,
        background-color 0.9s ease;
}

/* Cards in grids should fill their grid cell */
.grid .card {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft-hover);
    text-decoration: none;
}

.card:hover h3,
.card:hover .text-heading {
    color: var(--color-accent);
}

/* Hero metric cards - inherit tile UI and hover interactions from .card class */

.card-arrow {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    color: var(--color-accent);
    font-size: 1.5rem;
    font-weight: var(--fw-semibold);
    line-height: 1;
    transition: transform 0.9s ease;
}

.card:hover .card-arrow {
    transform: translate(2px, -2px);
}

/* Band: Full-width edge-to-edge coral bands */
.band {
    background-color: rgba(253, 236, 239, 0.5);
    /* 50% opacity of --color-accent-soft (#FDECEF) */
    border-radius: 0;
    padding: var(--space-xl) var(--space-lg);
    box-shadow: none;
    border: none;
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
    width: calc(100% + 2 * var(--space-md));
    max-width: none;
}

/* Ensure bands extend to viewport edges on larger screens */
@media (min-width: 641px) {
    .band {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        padding-left: calc((100vw - var(--max-width)) / 2 + var(--space-md));
        padding-right: calc((100vw - var(--max-width)) / 2 + var(--space-md));
    }
}

/* Project / case-study tiles grid (generic) */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
    max-width: var(--max-width);
    margin: 0 auto;
}

.tile {
    width: 100%;
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transition:
        transform 0.9s ease,
        box-shadow 0.9s ease,
        background-color 0.9s ease;
    cursor: default;
    position: relative;
}

.tile h3 {
    font-size: 1.05rem;
    font-weight: var(--fw-semibold);
    margin-bottom: 0.5rem;
}

.tile .tile-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* Hover */

.tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft-hover);
}

.tile:hover h3,
.tile:hover .text-heading {
    color: var(--color-accent);
}

/* Takeover state (full overlay in grid area) */

.tile.takeover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft-hover);
    padding: var(--space-2xl) var(--space-3xl);
    z-index: 10;
    overflow-y: auto;
    transform: none;
}

/* Close button for takeover */

.tile .close-btn {
    display: none;
}

.tile.takeover .close-btn {
    display: flex;
    position: absolute;
    top: 0.9rem;
    right: 1.2rem;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--color-accent);
}

/* Responsive tile grid */

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

    .tile.takeover {
        padding: var(--space-xl) var(--space-md);
    }
}

@media (max-width: 600px) {
    .tile-grid {
        grid-template-columns: 1fr;
    }

    .tile.takeover {
        padding: var(--space-lg) var(--space-sm);
    }
}

/* ---------- ARTICLES / WRITING PAGE VARIANT ---------- */

.articles-page .articles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: var(--max-width);
    margin: var(--space-lg) auto var(--space-3xl) auto;
}

/* Article tile as horizontal card (image left, text right) */

.articles-page .tile.article-tile {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0.9rem 1.25rem;
    min-height: 0;
    cursor: pointer;
}

.articles-page .article-row {
    display: flex;
    gap: 1.5rem;
    width: 100%;
}

.articles-page .article-media {
    flex: 0 0 180px;
}

.articles-page .article-image {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.articles-page .article-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.articles-page .article-body>h2 {
    margin: 0 0 0.2rem;
}

.articles-page .article-body>p {
    margin: 0.15rem 0;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* Collapsed vs open state */

.articles-page .tile.article-tile:not(.is-open) {
    max-height: 140px;
    overflow: hidden;
}

.articles-page .tile .tile-desc {
    display: none;
}

.articles-page .tile.is-open .tile-desc {
    display: block;
    margin-top: var(--space-sm);
}

.articles-page .tile .close-btn {
    display: none;
}

.articles-page .tile.is-open .close-btn {
    display: flex;
}

/* Clamp teaser to two lines */

.articles-page .article-body>p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stack on small screens */

@media (max-width: 640px) {
    .articles-page .tile.article-tile {
        flex-direction: column;
    }

    .articles-page .article-row {
        flex-direction: column;
    }

    .articles-page .article-media {
        flex: 0 0 auto;
    }

    .articles-page .tile.article-tile:not(.is-open)) {
        max-height: 320px;
    }

    .articles-page .article-image {
        height: 140px;
    }
}

/* ---------- CASE STUDY LAYOUT (GENERIC) ---------- */

/* Strategy section image styling */
section figure {
    margin: 0;
}

section figure a {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.9s ease;
}

section figure a:hover {
    box-shadow: var(--shadow-soft-hover);
}

section figure img.article-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
}

section figure figcaption {
    margin-top: var(--space-md);
    text-align: center;
    color: var(--color-text-muted);
}

/* Generic meta two-column block: quotes vs goals, context vs role, etc. */

.case-meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    max-width: 1200px;
    margin: var(--space-xl) auto 0;
    align-items: stretch;
}

.case-meta-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow-soft);
}

.case-meta-eyebrow {
    font-size: var(--fs-small);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.75rem;
}

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

.case-meta-list li {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 1rem;
}

/* “Goals” style variant with left border on each row */

.case-goals-list li {
    position: relative;
    padding-left: 1.25rem;
}

.case-goals-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 4px;
    height: 1.4rem;
    border-radius: 999px;
    background: rgba(230, 57, 70, 0.4);
}

/* Impact section: 3 tiles in first row, 2 tiles in second row */
.impact-grid {
    grid-template-columns: repeat(6, 1fr);
    max-width: 1200px;
}

.impact-grid .case-meta-card:nth-child(1),
.impact-grid .case-meta-card:nth-child(2),
.impact-grid .case-meta-card:nth-child(3) {
    grid-column: span 2;
}

.impact-grid-item-4 {
    grid-column: 2 / span 2;
}

.impact-grid-item-5 {
    grid-column: 4 / span 2;
}

@media (max-width: 900px) {
    .case-meta-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .case-meta-card {
        padding: 1.5rem 1.5rem;
    }

    .impact-grid-item-4,
    .impact-grid-item-5 {
        grid-column: 1;
    }
}

/* Case study process steps (1–4 buttons + text + carousel) */

.case-process-steps {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin: var(--space-lg) auto var(--space-md);
}

.case-process-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(230, 57, 70, 0.08);
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
    font-size: 0.95rem;
    cursor: pointer;
    transition:
        background-color 0.9s ease,
        color 0.9s ease,
        transform 0.15s ease;
}

.case-process-btn:hover {
    background-color: var(--color-accent);
    color: #ffffff;
    transform: scale(1.05);
}

.case-process-btn.is-active {
    background-color: var(--color-accent);
    color: #ffffff;
}

/* Process text block */

.case-process-text {
    max-width: 900px;
    margin: 0 auto var(--space-xl);
    text-align: left;
    min-height: 220px;
}

.case-process-text ul {
    list-style: disc;
    padding-left: 1.5rem;
}

/* ---------- RC PROCESS CAROUSEL (ReportCaster Design Process) ---------- */
.rc-process-section {
    position: relative;
}

.rc-process-steps {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin: var(--space-lg) auto var(--space-md);
}

.rc-process-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(230, 57, 70, 0.08);
    color: var(--color-accent);
    font-weight: var(--fw-semibold);
    font-size: 0.95rem;
    cursor: pointer;
    transition:
        background-color 0.9s ease,
        color 0.9s ease,
        transform 0.9s ease;
}

.rc-process-btn:hover {
    background-color: var(--color-accent);
    color: #ffffff;
    transform: scale(1.05);
}

.rc-process-btn.is-active {
    background-color: var(--color-accent);
    color: #ffffff;
}

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

.rc-process-track {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.rc-process-step {
    width: 100%;
    display: none;
    /* Hidden by default, shown via JS */
    flex-direction: column;
}

.rc-process-step.is-active {
    display: flex;
    /* Show active step */
}

/* Narrow the tiles in the Work section carousel */
.rc-process-step .case-meta-card {
    max-width: 1200px;
    margin: 0 auto;
}

.rc-process-text {
    max-width: 900px;
    margin: 0 auto var(--space-xl);
    text-align: left;
}

.rc-process-text h3 {
    margin-top: 0;
    margin-bottom: var(--space-md);
}

.rc-process-text p {
    margin-bottom: var(--space-md);
}

.rc-process-text p:last-child {
    margin-bottom: 0;
}

/* Case UI carousel (generic) */

.case-carousel {
    position: relative;
    max-width: var(--max-width);
    margin: var(--space-lg) auto 0 auto;
}

.case-carousel-frame {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
}

.case-carousel-track {
    display: flex;
}

.case-carousel-slide {
    flex: 0 0 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.9s ease;
}

.case-carousel-slide.is-active-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
}

.case-carousel-image {
    width: 100%;
    max-height: 620px;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-hover);
}

.case-carousel-caption {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* Carousel arrows */

.case-carousel-nav {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: var(--space-md);
}

.case-carousel-prev,
.case-carousel-next {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(230, 57, 70, 0.12);
    color: var(--color-accent);
    cursor: pointer;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    transition:
        background-color 0.9s ease,
        color 0.9s ease,
        transform 0.15s ease;
}

.case-carousel-prev:hover,
.case-carousel-next:hover {
    background-color: var(--color-accent);
    color: #ffffff;
    transform: scale(1.05);
}

/* ---------- FOOTER ---------- */

footer {
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem 1.75rem;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04);
    z-index: 1000;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1%;
    right: 1%;
    height: 1px;
    background: var(--color-border-subtle);
}

footer .w-100 {
    width: 100%;
}

footer .flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
}

.footer-center {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0;
    margin: 0 auto;
}

.footer-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.footer-left,
.footer-right {
    font-size: 1rem;
    white-space: nowrap;
}

@media (max-width: 768px) {

    .footer-left,
    .footer-right {
        display: none;
    }

    .footer-center {
        justify-content: center;
    }
}

/* ---------- SCROLL REVEAL ---------- */

/* ---------- SECTION-LEVEL STATIC SCRIBBLE MOTIF ---------- */

.section-with-art {
    position: relative;
    overflow: hidden;
}

.section-art-bg {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 1;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.section-art-bg .hero-art-svg {
    width: 100%;
    max-width: 1400px;
    height: auto;
    min-height: 300px;
}

.section-scribble {
    fill: none;
    stroke: rgba(230, 57, 70, 0.10);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Ensure content sits above the scribble */
.section-with-art .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .section-art-bg {
        opacity: 1;
    }

    .section-scribble {
        stroke: rgba(230, 57, 70, 0.08);
    }
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- UI CAROUSEL STYLES ---------- */
.ui-carousel {
    position: relative;
    width: 100%;
    margin-bottom: var(--space-3xl);
}

.carousel-track-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.9s ease;
}

.carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    transition: transform 0.9s ease;
}

.carousel-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-slide a {
    display: block;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0 auto;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.carousel-slide .caption {
    margin-top: var(--space-md);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.carousel-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.carousel-prev,
.carousel-next {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-accent);
    cursor: pointer;
    transition: background-color 0.9s ease, transform 0.9s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: var(--color-accent);
    color: white;
    transform: scale(1.1);
}

/* ---------- CASE STUDY PILL NAVIGATION ---------- */

.case-study-nav {
    position: sticky;
    top: calc(var(--nav-height) - 1px);
    background-color: var(--color-bg);
    border-bottom: none;
    padding: var(--space-sm) 0;
    z-index: 999;
    backdrop-filter: blur(10px);
    background-color: var(--color-bg);
    margin: 0;
    padding-top: 0;
    padding-bottom: var(--space-sm);
    box-shadow: none;
    margin-top: 0;
    margin-bottom: 0;
}

.case-study-nav-list {
    display: flex;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    scroll-behavior: smooth;
}

.case-study-nav-list::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.case-study-nav-list li {
    flex-shrink: 0;
}

.case-study-nav-list a {
    display: block;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: var(--fw-regular);
    white-space: nowrap;
    transition: all 0.9s ease;
    border: 1px solid transparent;
}

.case-study-nav-list a:hover {
    background-color: var(--color-accent-soft);
    color: var(--color-text);
    border-color: transparent;
}

.case-study-nav-list a.active {
    background-color: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
    font-weight: var(--fw-semibold);
}

/* Scroll offset for anchor links */
section[id] {
    scroll-margin-top: calc(var(--nav-height) + 60px);
}

@media (max-width: 640px) {
    .case-study-nav {
        padding: var(--space-xs) 0;
    }

    .case-study-nav-list {
        gap: var(--space-xs);
        padding: 0 var(--space-sm);
    }

    .case-study-nav-list a {
        padding: 0.5rem var(--space-sm);
        font-size: 0.85rem;
    }
}

/* ---------- CREATIVE HUB / WRITING PAGE STYLES ---------- */

.page-creative-hub,
main.page-creative-hub {
    margin-top: var(--nav-height) !important;
    padding-top: 0;
}

.article-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    max-width: 1200px;
    margin: var(--space-lg) auto 0;
}

@media (max-width: 960px) {
    .article-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .article-list-grid {
        grid-template-columns: 1fr;
    }
}

.article-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: transform 0.9s ease, box-shadow 0.9s ease, background-color 0.9s ease;
    text-align: left;
    border: none;
    width: 100%;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft-hover);
}

.article-card:hover h3,
.article-card:hover .text-heading {
    color: var(--color-accent);
}

.article-card .text-meta {
    margin-bottom: 0.35rem;
}

.article-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.article-card p {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* Slide-in article panel */
.article-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1600;
}

.article-panel-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s 0s;
}

.article-panel {
    width: min(1200px, 100%);
    height: 100%;
    background: var(--color-bg);
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: var(--space-xl);
    padding-top: calc(var(--nav-height) + var(--space-2xl));
    padding-bottom: calc(var(--space-3xl) + var(--space-2xl));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.article-panel-backdrop.is-visible .article-panel {
    transform: translateX(0%);
}

.article-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
}

.article-panel-title {
    font-size: 1.4rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
    margin: 0;
}

.article-panel-meta {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent);
}

.article-panel-close-btn {
    border: none;
    background: transparent;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    color: var(--color-text-muted);
    transition: color 0.9s ease;
}

.article-panel-close-btn:hover {
    color: var(--color-text);
}

/* Corner close button */
.article-panel-corner-close {
    position: absolute;
    top: calc(var(--nav-height) + var(--space-md));
    right: var(--space-lg);
    width: 40px;
    height: 40px;
    border: none;
    background: var(--color-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    z-index: 10;
    transition: all 0.9s ease;
    color: var(--color-text);
    font-size: 1.5rem;
    line-height: 1;
}

.article-panel-corner-close:hover {
    background: var(--color-accent);
    color: #fff;
    transform: scale(1.1);
    box-shadow: var(--shadow-soft-hover);
}

.article-panel-body {
    margin-top: var(--space-md);
    padding-bottom: var(--space-2xl);
}

.article-panel-body h2,
.article-panel-body h3,
.article-panel-body h4 {
    margin-top: var(--space-lg);
}

.article-panel-body p {
    margin-bottom: var(--space-md);
}

.article-panel-body ul,
.article-panel-body ol {
    margin-bottom: var(--space-md);
    padding-left: 1.25rem;
}

/* Digital art carousel */
.creative-carousel {
    max-width: 900px;
    margin: var(--space-2xl) auto 0;
    text-align: center;
}

.creative-carousel-frame {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: var(--color-surface);
    padding: var(--space-md);
}

.creative-carousel-frame img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
}

.creative-carousel-caption {
    margin-top: var(--space-sm);
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.creative-carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.creative-carousel-button {
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-subtle);
    padding: 0.35rem 0.9rem;
    background: var(--color-surface);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--color-text);
    transition: all 0.9s ease;
}

.creative-carousel-button:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: transparent;
}

.creative-carousel-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- CREATIVE HUB — 4-TILE CREATIVE EXPRESSIONS ---------- */

.creative-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-lg);
    align-items: stretch;
}

.creative-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition:
        transform 0.9s ease,
        box-shadow 0.9s ease,
        background-color 0.9s ease;
}

.creative-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft-hover);
}

.creative-card:hover h3,
.creative-card:hover .text-heading {
    color: var(--color-accent);
}

.creative-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.creative-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.creative-card-body {
    padding: 1.5rem 1.5rem 1.75rem;
}

.creative-card-body .text-meta {
    margin-bottom: 0.35rem;
}

.creative-card-body .text-heading {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.creative-card-body .text-small {
    margin-bottom: 0;
    color: var(--color-text-muted);
}

/* Responsive layout for smaller screens */
@media (max-width: 960px) {
    .creative-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .creative-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- IMAGE LIGHTBOX / ZOOM ---------- */
.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.image-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.image-lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
}

.image-lightbox-content {
    position: relative;
    z-index: 10001;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.image-lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.image-lightbox-caption {
    color: var(--color-bg);
    text-align: center;
    font-size: 0.9rem;
    max-width: 800px;
    padding: 0 var(--space-md);
}

.image-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--color-bg);
    font-size: 2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    line-height: 1;
    padding: 0;
}

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

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

@media (max-width: 640px) {
    .image-lightbox-content {
        max-width: 100vw;
        max-height: 100vh;
        padding: var(--space-md);
    }

    .image-lightbox-content img {
        max-height: 75vh;
    }

    .image-lightbox-close {
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.5);
    }

    .image-lightbox-caption {
        font-size: 0.85rem;
    }
}

/* ---------- PDF VIEWER MODAL ---------- */
.pdf-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.pdf-viewer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.pdf-viewer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(4px);
}

.pdf-viewer-content {
    position: relative;
    z-index: 10001;
    width: 95vw;
    height: 95vh;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.pdf-viewer-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    background-color: var(--color-bg);
}

.pdf-viewer-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--color-bg);
    font-size: 2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    line-height: 1;
    padding: 0;
    z-index: 10002;
}

.pdf-viewer-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

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

@media (max-width: 640px) {
    .pdf-viewer-content {
        width: 100vw;
        height: 100vh;
        padding: var(--space-md);
    }

    .pdf-viewer-close {
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.5);
    }
}