/* Ensure nav bar close (X) icon is visible */
#nav-toggle-btn .fa-times {
    color: #2E7696 !important;
    font-size: 2rem !important;
    display: inline-block !important;
}
.member-card-outer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
}
.member-card-tall {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.member-card-link {
    display: block;
    width: 100%;
    max-width: 200px;
    border-radius: 22px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.member-card-link:focus, .member-card-link:hover {
    box-shadow: 0 8px 24px rgba(46,118,150,0.18), 0 2px 8px rgba(0,0,0,0.10);
    outline: none;
    transform: translateY(-2px) scale(1.04);
}
.custom-member-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 18px;
    justify-items: center;
    align-items: start;
    margin-bottom: 18px;
}
.member-card-design {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.10);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
}
.member-fiah { background: #CB4D3F; }
.member-wota { background: #2E7696; }
.member-eiri { background: #F3BC64; }
.member-earf { background: #633A20; }
.member-card-design .member-leaf-accent {
    position: absolute;
    bottom: -12px;
    left: -12px;
    width: 36px;
    height: 36px;
    z-index: 2;
}
.member-card-design .member-leaf-accent img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.member-avatar-illustration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 85%;
    object-fit: contain;
    z-index: 3;
}
.member-names-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 32px 24px;
    margin-top: 10px;
    margin-bottom: 24px;
    justify-items: center;
}
.member-name-label {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.18rem;
    font-weight: bold;
    color: #222;
    text-align: center;
    margin-top: 14px;
    margin-bottom: 0;
    letter-spacing: 0.5px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Member Detail Page Dynamic Background */
.member-detail-dynamic-bg {
    background: var(--hero-bg-image) center/cover no-repeat, var(--page-bg);
    min-height: 100vh;
}

.member-detail-dynamic-bg .header-section,
.member-detail-dynamic-bg .role-section,
.member-detail-dynamic-bg .contributions-section,
.member-detail-dynamic-bg .intro-panel {
    background-color: var(--hero-shell-bg, #fff);
}

/* ============================================
   MEMBER ROLE PANEL — RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .member-role-section {
        width: 92vw !important;
        min-width: 0 !important;
        border-radius: 0 0 32px 32px !important;
        padding-top: 60px !important;
    }
    .member-role-grid {
        grid-template-columns: 1fr !important;
        padding: 1rem 1rem 0 1rem !important;
        gap: 0.8rem !important;
    }
    .member-role-cell {
        font-size: 0.95rem !important;
    }
    .member-role-cell span {
        font-size: 1.1rem !important;
    }
    .member-role-middle {
        border-left: none !important;
        border-right: none !important;
        border-top: 1.5px solid rgba(255,255,255,0.4) !important;
        border-bottom: 1.5px solid rgba(255,255,255,0.4) !important;
        padding: 0.6rem 0 !important;
    }
    .member-role-spacer {
        height: 1rem !important;
    }
    .member-role-image {
        margin-top: 0.4rem !important;
        margin-bottom: 0.8rem !important;
        width: 85% !important;
    }
}

@media (max-width: 360px) {
    .member-role-section {
        width: 96vw !important;
        padding-top: 50px !important;
        border-radius: 0 0 24px 24px !important;
    }
    .member-role-grid {
        padding: 0.8rem 0.6rem 0 0.6rem !important;
        gap: 0.6rem !important;
    }
    .member-role-cell {
        font-size: 0.85rem !important;
    }
    .member-role-cell span {
        font-size: 1rem !important;
    }
    .member-role-spacer {
        height: 0.5rem !important;
    }
    .member-role-image {
        margin-top: 0.2rem !important;
        margin-bottom: 0.5rem !important;
        width: 90% !important;
    }
}

/* Shared styles used by AboutUs.html and AboutExhi.html */

@font-face {
    font-family: 'WOE';
    src: url('fonts/Rebel-Marker%20-%20WOE.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.font-woe {
    font-family: 'WOE', sans-serif;
}

.font-body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.font-body-light {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 200;
}

.text-fluid-label {
    font-size: clamp(0.8rem, 1.2vw, 1rem);
}

.text-fluid-title {
    font-size: clamp(2.5rem, 8vw, 4.75rem);
    line-height: 0.95;
}

.logo-center-responsive {
    display: block;
    width: clamp(2.1rem, 5vw, 3.1rem);
    height: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}

.intro-logo-responsive {
    display: block;
    width: clamp(5rem, 5vw, 5.5rem);
    height: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}

.Intro-badge {
    position: absolute;
    left: 50%;
    bottom: 0.5rem;
    transform: translate(-50%, 30px);
    width: clamp(5.8rem, 13vw, 8.8rem);
    height: clamp(5.8rem, 13vw, 8.8rem);
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 30;
    pointer-events: none;
}

.intro-image-holder {
    position: relative;
    isolation: isolate;
}

.intro-image-card {
    width: min(100%, 34rem);
    min-height: clamp(7.5rem, 18vw, 10rem);
    aspect-ratio: 24 / 8;
    margin-left: auto;
    margin-right: auto;
    border-radius: clamp(2rem, 6vw, 4rem);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

@media (max-width: 900px) {
    .intro-image-card {
        width: min(100%, 26rem);
        min-height: clamp(6.5rem, 20vw, 8.5rem);
        aspect-ratio: 22 / 8;
    }

    .Intro-badge {
        width: clamp(6.25rem, 16vw, 8rem);
        height: clamp(6.25rem, 16vw, 8rem);
        transform: translate(-50%, 24px);
    }
}

@media (max-width: 640px) {
    .intro-image-card {
        width: min(100%, 24rem);
        min-height: clamp(5.75rem, 24vw, 7.25rem);
        aspect-ratio: 21 / 8;
        border-radius: clamp(1.5rem, 7vw, 3rem);
    }

    .Intro-badge {
        width: clamp(4.5rem, 18vw, 6rem);
        height: clamp(4.5rem, 18vw, 6rem);
        transform: translate(-50%, 16px);
    }
}

.intro-image-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.intro-image-mask::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 14px 26px rgba(0, 0, 0, 0.26), inset 0 -9px 16px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    z-index: 2;
}

.intro-image {
    position: relative;
    z-index: 1;
}

.intro-section-shell {
    padding-top: var(--intro-top-space, 2.5rem);
    padding-bottom: clamp(0.25rem, 1.5vw, 1rem);
    position: relative;
    z-index: 40;
}

/* Per-page theme values */
body.page-about-exhi {
    --page-bg: #111827;
    --site-surface-bg: #FFF7e7;
    --hero-bg-image: url('img/waterPattern.webp');
    --hero-shell-bg: #2E7696;
    --intro-panel-bg: #2E7696;
}

body.page-home {
    --page-bg: #FFF7e7;
    --site-surface-bg: #FFF7e7;
    --hero-bg-image: url('img/earthPattern.webp');
    --hero-shell-bg: #633b21;
    --intro-panel-bg: #633b21;
}

body.page-about-us {
    --page-bg: #FFF7e7;
    --site-surface-bg: #FFF7e7;
    --hero-bg-image: url('img/firePattern.webp');
    --hero-shell-bg: #c94d3e;
    --intro-panel-bg: #c94d3e;
}

body.page-portfolio {
    --page-bg: #FFF7e7;
    --site-surface-bg: #FFF7e7;
    --hero-bg-image: url('img/airPattern.webp');
    --hero-shell-bg: #f2bb65;
    --intro-panel-bg: #f2bb65;
}

body.page-about-exhi,
body.page-home,
body.page-about-us,
body.page-portfolio {
    background-color: var(--page-bg, #FFF7E7) !important;
}

body.page-home .mobile-frame,
body.page-about-exhi .mobile-frame,
body.page-portfolio .mobile-frame,
body.page-about-us .containerHeader {
    background-color: var(--site-surface-bg, #FFF7E7) !important;
    background-image: var(--site-surface-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.intro-panel {
    background: var(--intro-panel-bg, #2E7696);
    border-radius: 0rem;
    padding: var(--intro-panel-padding, clamp(1.5rem, 4vw, 4rem));
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.18);
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    position: relative;
    z-index: 2;
    overflow: visible;
}

.intro-tear-stack {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(-1 * clamp(90px, 13.125vw, 169px));
}

.intro-symbol-wrap {
    position: absolute;
    right: clamp(8px, 2vw, 20px);
    bottom: clamp(16px, 2.8vw, 30px);
    margin: 0;
    padding: 0;
    z-index: 20;
    pointer-events: none;
}

.intro-symbol-image {
    width: clamp(1.35rem, 3.4vw, 3.25rem);
    height: clamp(1.35rem, 3.4vw, 3.25rem);
}

@media (max-width: 640px) {
    .intro-symbol-image {
        width: clamp(0.95rem, 2.8vw, 1.35rem);
        height: clamp(0.95rem, 2.8vw, 1.35rem);
    }
}

.intro-hero-tear {
        display: block;
        position: relative;
        left: auto;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
        max-width: 100%;
        pointer-events: none;
}

.intro-hero-tear-back {
        bottom: auto;
        transform: none;
        height: auto;
        object-fit: contain;
        z-index: 1;
        filter: brightness(0.9) saturate(0.95);
}

.intro-hero-tear-front {
        bottom: auto;
        transform: translateY(-50px);
        margin-top: calc(-1 * clamp(14px, 2.2vw, 28px));
        object-fit: cover;
        z-index: 2;
}

.intro-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--intro-extend-top, 85px));
    height: var(--intro-extend-top, 85px);
    background: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    z-index: -1;
}

@media (min-width: 1024px) {
    .intro-panel,
    .intro-tear-stack {
        width: min(var(--intro-desktop-width, 60vw), 1100px);
        max-width: min(var(--intro-desktop-width, 60vw), 1100px);
    }
}

/* Styles originally from AboutUs.html */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Rebel Marker - WOE';
            background-color: #FFF7E7;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
            color: #333;
            overflow-x: hidden;
            position: relative;
        }

        /* Fixed Leaves on Sides */
        .fixed-leaves {
            position: fixed;
            top: 0;
            height: 100vh;
            width: 60px;
            z-index: 100;
            pointer-events: none;
        }

        .fixed-leaves.left {
            left: 0;
            background: linear-gradient(to right, rgba(76, 175, 80, 0.3), transparent);
        }

        .fixed-leaves.right {
            right: 0;
            background: linear-gradient(to left, rgba(76, 175, 80, 0.3), transparent);
        }

        .leaf-decoration {
            position: absolute;
            width: 40px;
            height: 40px;
            background: #4CAF50;
            border-radius: 0 50% 0 50%;
            opacity: 0.6;
        }

        .fixed-leaves.left .leaf-decoration:nth-child(1) { top: 10%; left: 10px; transform: rotate(-45deg); }
        .fixed-leaves.left .leaf-decoration:nth-child(2) { top: 30%; left: 5px; transform: rotate(-30deg); }
        .fixed-leaves.left .leaf-decoration:nth-child(3) { top: 50%; left: 15px; transform: rotate(-60deg); }
        .fixed-leaves.left .leaf-decoration:nth-child(4) { top: 70%; left: 8px; transform: rotate(-40deg); }
        .fixed-leaves.left .leaf-decoration:nth-child(5) { top: 90%; left: 12px; transform: rotate(-50deg); }

        .fixed-leaves.right .leaf-decoration:nth-child(1) { top: 15%; right: 10px; transform: rotate(45deg) scaleX(-1); }
        .fixed-leaves.right .leaf-decoration:nth-child(2) { top: 35%; right: 5px; transform: rotate(30deg) scaleX(-1); }
        .fixed-leaves.right .leaf-decoration:nth-child(3) { top: 55%; right: 15px; transform: rotate(60deg) scaleX(-1); }
        .fixed-leaves.right .leaf-decoration:nth-child(4) { top: 75%; right: 8px; transform: rotate(40deg) scaleX(-1); }
        .fixed-leaves.right .leaf-decoration:nth-child(5) { top: 95%; right: 12px; transform: rotate(50deg) scaleX(-1); }

        /* Container */
        .container {
            max-width: 480px;
            margin: 0 auto;
            padding: 20px;
            padding-bottom: 120px;
        }

        .containerHeader {
            background-color: var(--site-surface-bg, #F9F5E7);
            background-image: var(--site-surface-image, none);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
            padding: 20px;
            padding-bottom: 20px;
        }

        @media (min-width: 1024px) {
            .containerHeader {
                width: min(var(--intro-desktop-width, 60vw), 1100px);
                max-width: min(var(--intro-desktop-width, 60vw), 1100px);
            }
        }

        @media (min-width: 768px) {
            .container {
                max-width: 600px;
            }
        }

        /* Header Section */
        .header {
            text-align: center;
            padding: 30px 0;
            position: relative;
        }

        .header h1 {
            color: #C94D3E;
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .header p {
            color: #C94D3E;
            font-size: 0.9rem;
        }

        /* About Us Section */
        .about-section {
            background: #C94D3E;
            border-radius: 20px;
            padding: 25px;
            margin-bottom: 20px;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .about-section::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 0;
            right: 0;
            height: 20px;
            background: #FFF7E7;
            border-radius: 50%;
        }

        .about-title {
            text-align: center;
            font-size: 1.3rem;
            margin-bottom: 15px;
        }

        .team-icons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .team-icon {
            width: 30px;
            height: 30px;
            background: white;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #C94D3E;
            font-size: 0.8rem;
        }

        .about-text {
            text-align: center;
            font-size: 0.85rem;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .about-text strong {
            font-weight: bold;
        }

        /* PLACEHOLDER: Insert volcano image here */
        .volcano-image {
            width: 100%;
            height: 150px;
            background: #ddd;
            border-radius: 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 0.8rem;
            border: 2px dashed #999;
        }

        .about-bottom-text {
            text-align: center;
            font-size: 0.8rem;
            line-height: 1.5;
        }

        .about-bottom-text strong {
            color: #FFD700;
        }

        /* Image Grid */
        .image-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: clamp(4px, 1.5vw, 10px);
            margin-bottom: 20px;
            width: 100%;
        }

        .grid-image {
            aspect-ratio: 1;
            background: #ddd;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 0.7rem;
            border: 2px dashed #999;
        }

        .grid-image-fused {
            grid-row: 1 / span 2;
            grid-column: 2 / 3;
            aspect-ratio: auto;
            height: 100%;
            min-height: 100%;
        }

        @media (max-width: 600px) {
            .image-grid {
                grid-template-columns: 1fr 1.3fr 1fr;
                gap: 3px;
            }
        }

        /* Problem Section */
        .problem-section {
            background: transparent;
            border-radius: 0;
            padding: 20px 10px;
            margin-bottom: 20px;
            border: none;
            position: relative;
        }

        .problem-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0;
            flex-shrink: 0;
        }

        .problem-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .statement-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .problem-title {
            color: #C94D3E;
            font-size: clamp(1.6rem, 5vw, 2.2rem);
            font-weight: 800;
            font-family: 'WOE', 'Fredoka', sans-serif;
        }

        .problem-inline-icon {
            width: clamp(28px, 6vw, 40px);
            height: auto;
            object-fit: contain;
        }

        .problem-underline {
            width: 100%;
            height: 3px;
            background: #C94D3E;
            margin-bottom: 12px;
        }

        .problem-text {
            font-size: 1rem;
            line-height: 1.6;
            color: #282828;
            margin-bottom: 16px;
        }

        .problem-dashed-line {
            flex: 1;
            border: none;
            border-top: 2px dashed #C94D3E;
        }

        .statement-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 0;
            flex-shrink: 0;
        }

        .statement-dot {
            width: 14px;
            height: 14px;
            background: #C94D3E;
            border-radius: 50%;
        }

        .statement-title {
            color: #C94D3E;
            font-size: clamp(1.6rem, 5vw, 2.2rem);
            font-weight: 800;
            font-family: 'WOE', 'Fredoka', sans-serif;
            letter-spacing: 1px;
        }

        /* Interactive Purpose/Vision/Mission/Value Section */
        .pvmv-wrapper {
            position: relative;
            margin-bottom: 20px;
        }

        .pvmv-tear {
            display: block;
            width: 100%;
            height: auto;
            position: relative;
            pointer-events: none;
        }

        .pvmv-tear-stack {
            position: relative;
            line-height: 0;
        }

        .pvmv-tear-stack-top {
            margin-bottom: -100px;
            transform: scaleY(-1);
        }

        .pvmv-tear-stack-top .pvmv-tear-back {
            position: relative;
            z-index: 1;
            filter: brightness(0.9) saturate(0.95);
        }

        .pvmv-tear-stack-top .pvmv-tear-front {
            position: relative;
            z-index: 4;
            margin-top: calc(-1 * clamp(14px, 2.2vw, 28px));
            /* Adjust these to move the top front tear */
            top: -90px;        /* + moves down, - moves up */
            margin-bottom: 0px; /* + pushes content down */
        }

        .pvmv-tear-stack-bottom {
            margin-top: -90px;
        }

        .pvmv-tear-stack-bottom .pvmv-tear-front {
            position: relative;
            z-index: 3;
            /* Adjust these to move the bottom front tear */
            top: 80px;        /* + moves down, - moves up */
            margin-top: 0px; /* + pushes away from content above */
        }

        .pvmv-tear-stack-bottom .pvmv-tear-back {
            position: relative;
            z-index: 1;
            top: -30px;
            margin-top: calc(-1 * clamp(14px, 2.2vw, 28px));
            filter: brightness(0.9) saturate(0.95);
        }

        .pvmv-section {
            background: url('img/firePattern.webp') center/cover no-repeat;
            border-radius: 0;
            padding: 30px 20px 25px;
            color: white;
            position: relative;
            z-index: 2;
            overflow: hidden;
        }

        .pvmv-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            z-index: 0;
        }

        .pvmv-mascot {
            position: absolute;
            top: 8px;
            left: 12px;
            width: clamp(30px, 8vw, 48px);
            height: auto;
            object-fit: contain;
            z-index: 3;
            pointer-events: none;
            transition: left 0.4s ease;
        }

        .pvmv-tabs {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }

        .pvmv-tabs-line {
            position: absolute;
            top: 25px;
            left: 12%;
            right: 12%;
            height: 3px;
            background: rgba(255,255,255,0.5);
            z-index: 0;
        }

        .pvmv-tab {
            text-align: center;
            cursor: pointer;
            padding: 10px;
            position: relative;
            z-index: 2;
        }

        .tab-circle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,0.85);
            margin: 0 auto 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            border: 2px solid rgba(255,255,255,0.5);
            position: relative;
            z-index: 2;
        }

        .tab-circle.active {
            background: #FFD700;
            border-color: white;
            transform: scale(1.1);
        }

        .tab-circle i {
            color: #8B4513;
            font-size: 0.9rem;
        }

        .tab-label {
            font-size: 0.75rem;
            font-weight: bold;
        }

        .lion-container {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: #FFD700;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s ease;
        }

        .lion-container.vision-pos {
            right: auto;
            left: 20px;
            background: #FFD700;
        }

        .lion-container.mission-pos {
            right: 50%;
            transform: translateX(50%);
            background: #FF6B35;
        }

        .lion-container.value-pos {
            right: 20px;
            background: #4ECDC4;
        }

        .lion-icon {
            font-size: 2rem;
        }

        .pvmv-content {
            background: rgba(255,255,255,0.92);
            color: #333;
            border-radius: 24px;
            padding: 20px 30px;
            height: 150px;
            position: relative;
            z-index: 1;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            overflow-y: auto;
        }

        .content-slide {
            display: none;
        }

        .content-slide.active {
            display: block;
        }

        .content-slide h3 {
            color: #8B4513;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .content-slide p {
            font-size: 0.85rem;
            line-height: 1.6;
        }

        /* ============================================
           PURPOSE SECTION (AboutExhi - PVMV style)
           ============================================ */
        .purpose-wrapper {
            position: relative;
            margin-bottom: 20px;
        }

        .purpose-panel {
            background: url('img/waterPattern.webp') center/cover no-repeat;
            border-radius: 0;
            padding: 30px 20px 25px;
            color: white;
            position: relative;
            z-index: 2;
            overflow: hidden;
        }

        .purpose-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            z-index: 0;
        }

        .purpose-mascot {
            position: absolute;
            top: 8px;
            right: 12px;
            width: clamp(30px, 8vw, 48px);
            height: auto;
            object-fit: contain;
            z-index: 3;
            pointer-events: none;
        }

        .purpose-heading {
            position: relative;
            z-index: 1;
            text-align: center;
            font-family: 'Fredoka', sans-serif;
            font-size: clamp(1.3rem, 4vw, 1.6rem);
            font-weight: 700;
            color: #fff;
            margin-bottom: 16px;
            text-shadow: 1px 2px 0px rgba(0,0,0,0.3);
        }

        .purpose-content-box {
            background: rgba(255,255,255,0.92);
            color: #333;
            border-radius: 24px;
            padding: 20px 30px;
            position: relative;
            z-index: 1;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        }

        .purpose-content-box p {
            font-size: 0.85rem;
            line-height: 1.6;
            color: #5a3e2b;
        }

        /* Desktop constraint for AboutExhi content sections */
        @media (min-width: 768px) {
            body.page-about-exhi .mobile-frame > section.px-4 {
                max-width: 600px;
                margin-left: auto;
                margin-right: auto;
            }
        }
        @media (min-width: 1024px) {
            .purpose-wrapper {
                width: min(var(--intro-desktop-width, 60vw), 1100px);
                max-width: min(var(--intro-desktop-width, 60vw), 1100px);
                margin-left: auto;
                margin-right: auto;
            }
            body.page-about-exhi .mobile-frame > section.px-4 {
                max-width: min(var(--intro-desktop-width, 60vw), 1100px);
            }
        }

        /* SDGs Section */
        .sdg-section {
            position: relative;
            border-radius: 25px;
            padding: 50px 20px 30px;
            margin-bottom: 80px;
            border: 2.5px dashed #C94D3E;
            background: transparent;
            box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        /* Decorative leaves */
        .sdg-leaf {
            position: absolute;
            font-size: 1.5rem;
            z-index: 2;
        }
        .sdg-leaf-tl { top: -8px; left: -8px; transform: rotate(-45deg); }
        .sdg-leaf-tr { top: -8px; right: -8px; transform: rotate(45deg); }
        .sdg-leaf-bl { bottom: -8px; left: -8px; transform: rotate(-135deg); }
        .sdg-leaf-br { bottom: -8px; right: -8px; transform: rotate(135deg); }

        /* Mascot between cards at top */
        .sdg-mascot {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
        }
        .sdg-mascot img {
            width: 45px;
            height: auto;
        }

        .sdg-cards {
            display: flex;
            gap: 14px;
            align-items: flex-start;
        }

        .sdg-card {
            flex: 1;
            min-width: 0;
            border-radius: 18px;
            padding: 25px 16px 24px;
            color: white;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        /* Staggered layout: orange lower, green higher */
        .sdg-card.orange {
            background: #FF6B35;
            margin-top: 30px;
        }

        .sdg-card.green {
            background: #2E8B57;
            margin-top: 0;
        }

        /* SDG badge at top of card */
        .sdg-badge {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }
        .sdg-badge-label {
            background: #C94D3E;
            color: white;
            font-weight: 800;
            font-size: 0.85rem;
            padding: 5px 14px;
            border-radius: 12px;
            white-space: nowrap;
            display: inline-block;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .sdg-card.orange .sdg-badge-label { background: #e85d20; }
        .sdg-card.green .sdg-badge-label { background: #1a6b3c; }

        /* SDG icon inside card */
        .sdg-card-icon {
            margin: 10px 0 8px;
        }
        .sdg-icon-img {
            width: 50px;
            height: 50px;
            object-fit: contain;
        }

        .sdg-text {
            font-size: 0.7rem;
            line-height: 1.6;
            margin-bottom: 16px;
            padding: 8px 10px;
        }

        .sdg-btn {
            background: rgba(255,255,255,0.2);
            border: 2px solid white;
            color: white;
            padding: 8px 18px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.75rem;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s;
            margin-top: auto;
        }

        .sdg-btn:hover {
            background: white;
            color: inherit;
        }

        /* Quote Section */
        .quote-section {
            background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), #333;
            border-radius: 20px;
            padding: 50px 25px;
            margin-bottom: 20px;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .quote-text {
            font-size: clamp(1.4rem, 4.5vw, 2rem);
            font-weight: 800;
            line-height: 1.35;
            font-family: 'WOE', 'Fredoka', sans-serif;
            text-shadow: 1px 2px 4px rgba(0,0,0,0.4);
        }

        /* FAQ Section */
        .faq-section {
            margin-top: 80px;
            margin-bottom: 80px;
            border: 2.5px dashed #C94D3E;
            border-radius: 25px;
            padding: 30px 20px;
        }

        .faq-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .faq-header h2 {
            color: #C94D3E;
            font-size: 2rem;
            font-family: 'WOE', 'Fredoka', sans-serif;
        }

        .faq-header p {
            color: #666;
            font-size: 0.85rem;
        }

        .faq-item {
            background: #C94D3E;
            border-radius: 15px;
            margin-bottom: 10px;
            overflow: hidden;
            box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .faq-question {
            padding: 15px 20px;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .faq-question i {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .faq-question.active i {
            transform: rotate(180deg);
        }

        .faq-answer {
            background: white;
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.3s ease;
            opacity: 0;
        }

        .faq-answer.active {
            padding: 15px 20px;
            max-height: 300px;
            opacity: 1;
        }

        .faq-answer p {
            font-size: 0.85rem;
            color: #555;
            line-height: 1.5;
        }

        /* Three Images Section */
        .three-images {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 80px;
            perspective: 1000px;
        }

        .tilted-image {
            width: clamp(90px, 22vw, 130px);
            height: clamp(110px, 28vw, 160px);
            background: #ddd;
            border-radius: 12px;
            border: 3px solid #fff;
            box-shadow: 0 4px 14px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 0.7rem;
            overflow: hidden;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .tilted-image:hover {
            transform: scale(1.15) !important;
            box-shadow: 0 8px 28px rgba(0,0,0,0.25);
            z-index: 5;
        }

        .tilted-image:nth-child(1) {
            transform: rotate(-15deg);
        }

        .tilted-image:nth-child(2) {
            transform: translateY(-10px);
            z-index: 2;
        }

        .tilted-image:nth-child(3) {
            transform: rotate(15deg);
        }

        /* Contact Form Section */
        .contact-section {
            background: transparent;
            border-radius: 20px;
            padding: 25px 20px;
            margin-bottom: 20px;
            border: 2px dashed #C94D3E;
        }

        .contact-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .contact-header h2 {
            color: #C94D3E;
            font-size: 1.5rem;
            font-family: 'WOE', 'Fredoka', sans-serif;
        }

        .contact-header p {
            color: #666;
            font-size: 0.8rem;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-row {
            display: flex;
            gap: 10px;
        }

        .form-row .form-group {
            flex: 1;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 0.9rem;
            background: #f9f9f9;
            transition: border-color 0.3s, box-shadow 0.3s;
            box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.12);
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #C94D3E;
        }

        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .submit-btn {
            background: #C94D3E;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 0.9rem;
            float: right;
            transition: transform 0.3s;
        }

        .submit-btn:hover {
            transform: scale(1.05);
        }

        /* Social Media Section */
        .social-section {
            text-align: center;
            margin-bottom: 20px;
        }

        .social-section h3 {
            color: #C94D3E;
            margin-bottom: 15px;
            font-family: 'WOE', 'Fredoka', sans-serif;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .social-icon {
            width: clamp(90px, 25vw, 120px);
            height: clamp(90px, 25vw, 120px);
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: transform 0.3s;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }

        .social-icon:hover {
            transform: translateY(-5px);
        }

        .social-icon.instagram {
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
        }

        .social-icon.tiktok {
            background: #000;
        }

        .social-icon.facebook {
            background: #1877F2;
        }

        .social-icon i {
            font-size: clamp(1.5rem, 5vw, 2.2rem);
            margin-bottom: 4px;
        }

        .social-icon span {
            font-size: 0.6rem;
        }

        /* Footer with Leaves */
        .footer {
            position: relative;
            padding: 40px 20px;
            text-align: center;
        }

        .footer-leaves {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100px;
            background: linear-gradient(to top, #2E8B57, transparent);
            border-radius: 50% 50% 0 0;
        }

        .footer-content {
            position: relative;
            z-index: 2;
        }

        .footer-logo {
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2E8B57;
            font-size: 1.5rem;
        }

        .footer-text {
            color: #2E8B57;
            font-size: 0.75rem;
        }

        .site-footer-image {
            position: relative;
            width: 100%;
            height: clamp(220px, 30vw, 480px);
            margin-top: clamp(60px, 10vw, 100px);
            margin-bottom: 0;
            border-radius: 0;
            overflow: visible;
            --site-footer-image: url('img/footer_wide.png');
            background-image: var(--site-footer-image);
            background-size: 100% 100%;
            background-position: center bottom;
            background-repeat: no-repeat;
        }

        .site-footer-logo {
            position: absolute;
            inset: 0;
            margin: auto;
            width: clamp(72px, 10vw, 130px);
            height: auto;
            max-width: 40%;
            object-fit: contain;
        }

        .site-footer-copy {
            position: absolute;
            left: 50%;
            bottom: clamp(8px, 1.8vw, 16px);
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.88);
            font-size: clamp(0.62rem, 1.2vw, 0.78rem);
            text-align: center;
            line-height: 1.3;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        }

        .footer-divider {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: clamp(-55px, -8vw, -90px);
            width: 50%;
            height: 10px;
            background: #FFF7E7;
            border-radius: 2px;
            opacity: 0.7;
        }

        .footer-symbols-line {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: clamp(-42px, -6vw, -70px);
            width: 35%;
            height: 3px;
            background: #FFF7E7;
            border-radius: 2px;
            opacity: 0.5;
        }

        .footer-symbols {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: clamp(-38px, -5vw, -60px);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: clamp(18px, 4vw, 36px);
        }

        .footer-symbols img {
            width: clamp(28px, 6vw, 50px);
            height: clamp(28px, 6vw, 50px);
            object-fit: contain;
        }

        @media (max-width: 600px) {
            .footer-symbols img {
                width: 22px;
                height: 22px;
            }
            .footer-symbols {
                gap: 12px;
            }
            .site-footer-image {
                height: clamp(180px, 50vw, 260px);
                margin-top: clamp(40px, 8vw, 70px);
            }
            .footer-divider {
                top: clamp(-35px, -6vw, -55px);
                width: 40%;
                height: 6px;
            }
            .footer-symbols-line {
                top: clamp(-26px, -4.5vw, -42px);
                width: 28%;
                height: 2px;
            }
            .footer-symbols {
                top: clamp(-24px, -4vw, -38px);
            }
        }

        /* Fixed Navigation */
        .nav-container {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
        }

        .nav-main {
            width: 60px;
            height: 60px;
            background: #C94D3E;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            position: relative;
            z-index: 10;
        }

        .nav-main:hover {
            transform: scale(1.1);
        }

        .nav-main i {
            color: white;
            font-size: 1.5rem;
            transition: transform 0.3s;
        }

        .nav-main.active i {
            transform: rotate(45deg);
        }

        .nav-items {
            position: absolute;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%) scale(0);
            display: flex;
            gap: 15px;
            opacity: 0;
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .nav-items.active {
            transform: translateX(-50%) scale(1);
            opacity: 1;
            pointer-events: all;
        }

        .nav-item {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            font-size: 0.6rem;
            transition: transform 0.3s;
            cursor: pointer;
        }

        .nav-item:hover {
            transform: translateY(-5px);
        }

        .nav-item i {
            font-size: 1.2rem;
            margin-bottom: 2px;
        }

        .nav-item.home { background: #8B4513; }
        .nav-item.about { background: #C94D3E; }
        .nav-item.event { background: #FFD700; color: #333; }
        .nav-item.portfolio { background: #2E8B57; }

        .nav-container.idle .nav-main {
            opacity: 0.5;
        }

        .nav-container.idle .nav-items {
            opacity: 0;
            pointer-events: none;
        }

        /* Responsive */
        @media (min-width: 768px) {
            .container {
                max-width: 600px;
            }
            
            .fixed-leaves {
                width: 80px;
            }
        }

/* Styles originally from AboutExhi.html */
body {
            font-family: 'Nunito', sans-serif;
            background-color: #f0f4f8;
            overflow-x: hidden;
            width: 100%;
            min-width: 100%;
            min-height: 100vh;
            min-height: 100dvh;
        }
        h1, h2, h3, h4, .font-display {
            font-family: 'Fredoka', sans-serif;
        }
        
        /* Custom Scrollbar Hide */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Animations */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .animate-float {
            animation: float 4s ease-in-out infinite;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }

        /* Paper Tear Effect */
        .paper-tear-top {
            background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='40' viewBox='0 0 1000 40' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,40 L0,10 Q10,15 20,10 T40,10 T60,15 T80,10 T100,12 T120,8 T140,15 T160,10 T180,12 T200,8 T220,15 T240,10 T260,12 T280,8 T300,15 T320,10 T340,12 T360,8 T380,15 T400,10 T420,12 T440,8 T460,15 T480,10 T500,12 T520,8 T540,15 T560,10 T580,12 T600,8 T620,15 T640,10 T660,12 T680,8 T700,15 T720,10 T740,12 T760,8 T780,15 T800,10 T820,12 T840,8 T860,15 T880,10 T900,12 T920,8 T940,15 T960,10 T980,12 T1000,8 L1000,40 Z' fill='%23ffffff'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 40px;
            width: 100%;
            position: absolute;
            top: -39px;
            left: 0;
            z-index: 10;
        }

        .paper-tear-bottom {
            background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='40' viewBox='0 0 1000 40' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L0,30 Q10,25 20,30 T40,30 T60,25 T80,30 T100,28 T120,32 T140,25 T160,30 T180,28 T200,32 T220,25 T240,30 T260,28 T280,32 T300,25 T320,30 T340,28 T360,32 T380,25 T400,30 T420,28 T440,32 T460,25 T480,30 T500,28 T520,32 T540,25 T560,30 T580,28 T600,32 T620,25 T640,30 T660,28 T680,32 T700,25 T720,30 T740,28 T760,32 T780,25 T800,30 T820,28 T840,32 T860,25 T880,30 T900,28 T920,32 T940,25 T960,30 T980,28 T1000,32 L1000,0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 40px;
            width: 100%;
            position: absolute;
            bottom: -39px;
            left: 0;
            z-index: 1;
            transform: rotate(180deg);
        }

        .hero-tear {
            position: absolute;
            left: 0;
            width: 100%;
            height: clamp(44px, 5vw, 86px);
            object-fit: cover;
            pointer-events: none;
        }

        .hero-tear-depth-back {
            bottom: calc(-1 * clamp(36px, 5vw, 96px));
            z-index: 12;
            height: auto;
            object-fit: contain;
            opacity: 1;
            filter: brightness(0.9) saturate(0.95);
        }

        .hero-tear-depth-front {
            bottom: calc(-1 * clamp(12px, 2vw, 28px));
            z-index: 32;
            opacity: 1;
        }

        /* Dashed Line Connector */
        .dashed-path {
            stroke-dasharray: 6, 6;
            animation: dash 30s linear infinite;
        }
        @keyframes dash {
            to { stroke-dashoffset: -1000; }
        }

        /* Mobile-first layout that can expand to full screen */
        .mobile-frame {
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            margin: 0;
            background: var(--site-surface-bg, #F9F5E7);
            min-height: 100vh;
            min-height: 100dvh;
            position: relative;
            box-shadow: none;
            overflow-x: hidden;
            touch-action: pan-x pan-y;
        }

        /* Keep full-bleed layout on large screens */
        @media (min-width: 1200px) {
            .mobile-frame {
                width: 100%;
                min-width: 100%;
                max-width: 100%;
                margin: 0;
            }
        }

        /* Leaf Decorations */
        .leaf-deco {
            position: fixed;
            width: 80px;
            z-index: 50;
            pointer-events: none;
            opacity: 0.9;
        }
        .leaf-top-right { top: 0; right: 0; transform: rotate(0deg); }
        .leaf-bottom-right { bottom: 0; right: 0; transform: rotate(90deg); }
        .leaf-top-left { top: 0; left: 0; transform: rotate(-90deg); }
        .leaf-bottom-left { bottom: 0; left: 0; transform: 180deg; }

        /* Make hero background fill the hero container on all pages */
        .hero-bg-static {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover !important;
            background-repeat: no-repeat;
            background-position: center center !important;
        }

        .hero-bg-image {
            background-image: var(--hero-bg-image);
        }

        .hero-shell-bg {
            position: relative;
            background-color: var(--hero-shell-bg, var(--intro-panel-bg, #2E7696)) !important;
        }

        /* Mobile-first hero sizing across all three pages */
        body.page-home .mobile-frame > header,
        body.page-about-exhi .mobile-frame > header,
        body.page-about-us > header,
        body.page-portfolio #portfolio-page > header {
            position: relative;
            width: 100%;
            height: clamp(270px, 62vw, 450px) !important;
            overflow: visible;
        }

        /* Fallback: ensure hero text is always white and centered */
        .hero-shell-bg .text-fluid-label,
        .hero-shell-bg .text-fluid-title,
        .hero-shell-bg h1,
        .hero-shell-bg div {
            color: #fff;
        }

        /* ============================================
           TAILWIND CSS FALLBACKS
           Ensures layout works if CDN fails on mobile
           ============================================ */

        /* Hero BG layer z-index fallback (Tailwind z-30) */
        .hero-bg-static.hero-bg-image {
            z-index: 30;
        }

        /* Hero text centering fallback (Tailwind: flex flex-col items-center justify-center h-full text-white px-6 text-center z-40) */
        .hero-shell-bg > div:last-child {
            position: relative;
            z-index: 40;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #fff;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            text-align: center;
        }

        /* Nav bar wrapper fallback — target by content, not position */
        #bottom-nav {
            position: fixed;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 50;
            width: 90%;
            max-width: 380px;
        }

        /* Nav menu item fallback (Tailwind: p-3 rounded-2xl flex flex-col items-center gap-1 w-16) */
        .nav-menu-item {
            padding: 0.75rem;
            border-radius: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            width: 4rem;
            border: 0;
            cursor: pointer;
        }
        .nav-menu-item i {
            color: #fff;
            font-size: 1.25rem;
        }
        .nav-menu-item span {
            font-size: 10px;
            font-weight: 700;
            color: #fff;
        }

        /* Intro section horizontal padding fallback (Tailwind: px-6) */
        .intro-section-shell {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        /* ====== COMPREHENSIVE TAILWIND FALLBACKS ====== */

        /* --- Layout --- */
        .flex { display: flex; }
        .grid { display: grid; }
        .hidden { display: none; }
        .block { display: block; }
        .inline-block { display: inline-block; }
        .flex-col { flex-direction: column; }
        .flex-row { flex-direction: row; }
        .flex-row-reverse { flex-direction: row-reverse; }
        .flex-1 { flex: 1 1 0%; }
        .flex-shrink-0 { flex-shrink: 0; }
        .items-center { align-items: center; }
        .items-start { align-items: flex-start; }
        .items-end { align-items: flex-end; }
        .items-stretch { align-items: stretch; }
        .justify-center { justify-content: center; }
        .justify-between { justify-content: space-between; }
        .justify-items-center { justify-items: center; }
        .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .gap-1 { gap: 0.25rem; }
        .gap-2 { gap: 0.5rem; }
        .gap-3 { gap: 0.75rem; }
        .gap-4 { gap: 1rem; }
        .group { position: relative; }

        /* --- Sizing --- */
        .w-full { width: 100%; }
        .h-full { height: 100%; }
        .w-12 { width: 3rem; }
        .w-14 { width: 3.5rem; }
        .w-16 { width: 4rem; }
        .w-20 { width: 5rem; }
        .h-12 { height: 3rem; }
        .h-14 { height: 3.5rem; }
        .h-16 { height: 4rem; }
        .h-20 { height: 5rem; }
        .h-24 { height: 6rem; }
        .h-32 { height: 8rem; }
        .w-\[90\%\] { width: 90%; }
        .h-\[450px\] { height: 450px; }
        .h-\[340px\] { height: 340px; }
        .max-w-\[380px\] { max-width: 380px; }
        .max-w-\[900px\] { max-width: 900px; }
        .max-w-\[28ch\] { max-width: 28ch; }
        .max-w-\[48ch\] { max-width: 48ch; }
        .max-w-\[220px\] { max-width: 220px; }
        .min-w-\[240px\] { min-width: 240px; }
        .max-h-\[220px\] { max-height: 220px; }
        .aspect-video { aspect-ratio: 16/9; }
        .aspect-square { aspect-ratio: 1/1; }
        .aspect-\[4\/3\] { aspect-ratio: 4/3; }
        .aspect-\[16\/9\] { aspect-ratio: 16/9; }
        .w-2\/5 { width: 40%; }

        /* --- Spacing --- */
        .p-2 { padding: 0.5rem; }
        .p-3 { padding: 0.75rem; }
        .p-4 { padding: 1rem; }
        .p-6 { padding: 1.5rem; }
        .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
        .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
        .m-0 { margin: 0; }
        .m-auto { margin: auto; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .mt-0 { margin-top: 0; }
        .mt-1 { margin-top: 0.25rem; }
        .mt-2 { margin-top: 0.5rem; }
        .mt-4 { margin-top: 1rem; }
        .mt-6 { margin-top: 1.5rem; }
        .mb-0 { margin-bottom: 0; }
        .mb-1 { margin-bottom: 0.25rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-5 { margin-bottom: 1.25rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-12 { margin-bottom: 3rem; }
        .ml-auto { margin-left: auto; }
        .mr-auto { margin-right: auto; }
        .ml-2 { margin-left: 0.5rem; }
        .ml-3 { margin-left: 0.75rem; }
        .mr-2 { margin-right: 0.5rem; }
        .mr-3 { margin-right: 0.75rem; }

        /* --- Position --- */
        .relative { position: relative; }
        .absolute { position: absolute; }
        .fixed { position: fixed; }
        .inset-0 { inset: 0; }
        .top-0 { top: 0; }
        .bottom-0 { bottom: 0; }
        .left-0 { left: 0; }
        .right-0 { right: 0; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }
        .z-30 { z-index: 30; }
        .z-40 { z-index: 40; }
        .z-50 { z-index: 50; }

        /* --- Overflow --- */
        .overflow-hidden { overflow: hidden; }
        .overflow-visible { overflow: visible; }
        .pointer-events-none { pointer-events: none; }
        .pointer-events-auto { pointer-events: auto; }

        /* --- Typography --- */
        .text-white { color: #fff; }
        .text-gray-800 { color: rgb(31, 41, 55); }
        .text-gray-700 { color: rgb(55, 65, 81); }
        .text-gray-600 { color: rgb(75, 85, 99); }
        .text-gray-400 { color: rgb(156, 163, 175); }
        .text-center { text-align: center; }
        .text-left { text-align: left; }
        .text-right { text-align: right; }
        .text-xs { font-size: 0.75rem; line-height: 1rem; }
        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
        .text-base { font-size: 1rem; line-height: 1.5rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .text-5xl { font-size: 3rem; line-height: 1; }
        .text-\[10px\] { font-size: 10px; }
        .text-\[11px\] { font-size: 11px; }
        .font-bold { font-weight: 700; }
        .font-semibold { font-weight: 600; }
        .font-black { font-weight: 900; }
        .leading-relaxed { line-height: 1.625; }
        .leading-tight { line-height: 1.25; }
        .tracking-wider { letter-spacing: 0.05em; }
        .tracking-tighter { letter-spacing: -0.05em; }
        .uppercase { text-transform: uppercase; }
        .capitalize { text-transform: capitalize; }
        .text-white\/90 { color: rgba(255,255,255,0.9); }

        /* --- Visual / Colors --- */
        .bg-white { background-color: #fff; }
        .bg-transparent { background-color: transparent; }
        .bg-\[\#FEF5E5\] { background-color: #FEF5E5; }
        .bg-\[\#F0E6DE\] { background-color: #F0E6DE; }
        .bg-\[\#F5DCD9\] { background-color: #F5DCD9; }
        .bg-\[\#DFF0F7\] { background-color: #DFF0F7; }
        .bg-\[\#2a1a11\] { background-color: #2a1a11; }
        .rounded-full { border-radius: 9999px; }
        .rounded-lg { border-radius: 0.5rem; }
        .rounded-xl { border-radius: 0.75rem; }
        .rounded-2xl { border-radius: 1rem; }
        .rounded-3xl { border-radius: 1.5rem; }
        .rounded-\[12px\] { border-radius: 12px; }
        .rounded-\[18px\] { border-radius: 18px; }
        .rounded-\[24px\] { border-radius: 24px; }
        .rounded-\[48px\] { border-radius: 48px; }
        .rounded-\[64px\] { border-radius: 64px; }
        .rounded-\[9999px\] { border-radius: 9999px; }
        .border-0 { border-width: 0; }
        .border-2 { border-width: 2px; }
        .border-dashed { border-style: dashed; }
        .border-white { border-color: #fff; }
        .border-gray-300 { border-color: rgb(209, 213, 219); }
        .border-\[\#F3BC64\] { border-color: #F3BC64; }
        .border-\[\#633A20\] { border-color: #633A20; }
        .border-\[\#CB4D3F\] { border-color: #CB4D3F; }
        .border-\[\#2E7696\] { border-color: #2E7696; }
        .opacity-80 { opacity: 0.8; }
        .opacity-70 { opacity: 0.7; }
        .opacity-90 { opacity: 0.9; }
        .shadow-none { box-shadow: none; }
        .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05); }
        .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
        .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
        .drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07)) drop-shadow(0 2px 2px rgba(0,0,0,0.06)); }
        .object-contain { object-fit: contain; }
        .object-cover { object-fit: cover; }
        .grayscale { filter: grayscale(100%); }

        /* --- Transforms & Transitions --- */
        .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
        .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
        .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
        .duration-300 { transition-duration: 300ms; }
        .duration-500 { transition-duration: 500ms; }
        .duration-700 { transition-duration: 700ms; }
        .duration-1000 { transition-duration: 1000ms; }
        .ease-in-out { transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
        .scale-110 { transform: scale(1.1); }
        .scale-105 { transform: scale(1.05); }

        /* ============================================ */

        /* Nav Expansion */
        .nav-toggle-shell {
            width: 4rem;
            margin-left: auto;
            margin-right: auto;
            background-color: transparent;
            border: 1px solid transparent;
            box-shadow: none;
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
            transition: width 0.35s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
        }

        .nav-toggle-shell:hover,
        .nav-toggle-shell.nav-bar-open {
            background-color: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .nav-toggle-shell.nav-bar-open {
            width: 100%;
        }

        .nav-toggle-label {
            font-size: 0.68rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(55, 65, 81, 0.92);
            pointer-events: none;
            opacity: 0.45;
            margin-top: 1px;
            transition: opacity 0.2s ease;
        }

        #nav-toggle-wrapper:hover .nav-toggle-label {
            opacity: 1;
        }

        #nav-toggle-wrapper.nav-bar-open .nav-toggle-label {
            opacity: 0;
        }

        /* PNG icon opacity behavior */
        .nav-toggle-shell #nav-icon-image {
            opacity: 0.7;
            transition: opacity 0.2s ease;
        }

        .nav-toggle-shell:hover #nav-icon-image,
        .nav-toggle-shell.nav-bar-open #nav-icon-image {
            opacity: 1;
        }

        .floating-nav-menu {
            top: 50%;
            transform: translateY(calc(-50% + var(--flyout-y-offset, 0px)));
            height: 64px;
            pointer-events: none;
        }

        .nav-menu-item {
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) translateX(calc(var(--slot-mult, 0) * var(--slot-step, 74px) * 0.55)) scale(0.35);
            opacity: 0;
            transform-origin: center;
            will-change: transform, opacity;
            pointer-events: auto;
        }
        .nav-open .nav-menu-item {
            transform: translate(-50%, -50%) translateX(calc(var(--slot-mult, 0) * var(--slot-step, 74px))) scale(1);
            opacity: 1;
        }
        
        /* Active Tab Indicator */
        .tab-btn.active .tab-icon {
            filter: none;
            opacity: 1;
            transform: scale(1.1);
        }
        .tab-btn.active .tab-label {
            color: inherit;
            font-weight: 700;
        }
        .tab-btn:not(.active) .tab-icon {
            filter: grayscale(100%) brightness(0.5);
            opacity: 0.6;
        }
        .tab-btn:not(.active) .tab-label {
            color: #9ca3af;
        }

        /* Custom Scroll Snap */
        .snap-container {
            scroll-snap-type: y proximity;
        }
        .snap-child {
            scroll-snap-align: start;
        }

        /* AboutExhi responsive tuning */
        @media (min-width: 768px) {
            body.bg-gray-900 #app,
            body.bg-gray-900.page-about-us {
                font-size: 1.02rem;
            }

            body.bg-gray-900 #app > header,
            body.bg-gray-900.page-about-us > header {
                height: clamp(420px, 52vw, 560px);
            }

            body.bg-gray-900 #app section,
            body.bg-gray-900.page-about-us > section {
                padding-left: clamp(1.5rem, 3vw, 2.5rem);
                padding-right: clamp(1.5rem, 3vw, 2.5rem);
            }

            body.bg-gray-900 #app .tab-btn,
            body.bg-gray-900.page-about-us .tab-btn {
                width: 5.5rem;
            }

            body.bg-gray-900 #app .tab-btn .tab-icon,
            body.bg-gray-900.page-about-us .tab-btn .tab-icon {
                width: 3.75rem;
                height: 3.75rem;
            }

            body.bg-gray-900 #app .tab-btn .tab-label,
            body.bg-gray-900.page-about-us .tab-btn .tab-label {
                font-size: 0.72rem;
            }

            body.bg-gray-900 #app #content-area,
            body.bg-gray-900.page-about-us #content-area {
                min-height: 480px;
            }

            body.bg-gray-900 #app footer,
            body.bg-gray-900.page-about-us footer {
                margin-top: 4rem;
            }
        }

        @media (min-width: 1024px) {
            body.bg-gray-900 #app,
            body.bg-gray-900.page-about-us {
                font-size: 1.06rem;
            }

            body.bg-gray-900 #app h1,
            body.bg-gray-900.page-about-us h1 {
                font-size: clamp(3.5rem, 5vw, 5rem) !important;
            }

            body.bg-gray-900 #app h2,
            body.bg-gray-900.page-about-us h2 {
                font-size: clamp(2rem, 3vw, 2.8rem) !important;
            }

            body.bg-gray-900 #app #nav-menu,
            body.bg-gray-900.page-about-us #nav-menu {
                padding-left: 2rem;
                padding-right: 2rem;
            }
        }

/* ============================================
   Portfolio styles merged from styles.css
   ============================================ */
/* ============================================
   WOE PORTFOLIO - STYLESHEET
   ============================================ */

/* CSS Variables */
:root {
    /* Color Palette */
    --woe-yellow: #E8B84A;
    --woe-yellow-dark: #D4A03A;
    --woe-red: #C84B4B;
    --woe-blue: #4A7A9E;
    --woe-teal: #5BA8A8;
    --woe-cream: #F5F0E6;
    --woe-dark: #2D2D2D;
    --woe-green: #4A7C4E;
    --woe-forest: #3D6B40;
    
    /* Shadows */
    --shadow-outer: 0 4px 15px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
    --shadow-inner: inset 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 3px rgba(0,0,0,0.05);
    --shadow-combined: 0 4px 15px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1), inset 0 2px 8px rgba(0,0,0,0.06), inset 0 1px 3px rgba(0,0,0,0.04);
}

/* Reset handled by shared stylesheet */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
    min-width: 100%;
}

html, body {
    max-width: 100vw;
    min-width: 100%;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-x pan-y;
}

body.portfolio-page-body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--woe-cream);
    color: var(--woe-dark);
    overflow-x: hidden;
    padding-bottom: 0;
}

/* Rebel Marker Font */
.rebel-font {
    font-family: 'WOE', 'Reenie Beanie', cursive;
    font-weight: 700;
    letter-spacing: 2px;
}

/* Reusable Pattern Backgrounds */
.pattern-bg-fire {
    background: url('img/firePattern.webp') center/cover no-repeat;
}
.pattern-bg-water {
    background: url('img/waterPattern.webp') center/cover no-repeat;
}
.pattern-bg-earth {
    background: url('img/earthPattern.webp') center/cover no-repeat;
}
.pattern-bg-air {
    background: url('img/airPattern.webp') center/cover no-repeat;
}

/* Background Colors */
.yellow-bg {
    background-color: var(--woe-yellow);
}

.red-bg {
    background-color: var(--woe-red);
}

.blue-bg {
    background-color: var(--woe-blue);
}

/* ============================================
   PAGE STRUCTURE
   ============================================ */
.page {
    display: none;
    min-height: 100vh;
}

.page.active {
    display: block;
}

/* ============================================
   HEADER SECTION
   ============================================ */
.header-section {
    position: relative;
    overflow: hidden;
    padding: 60px 20px 40px;
}

.header-content {
    text-align: center;
    position: relative;
}

/* Triangle Pattern */
.triangle-pattern {
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15 5 L25 22 L5 22 Z' fill='none' stroke='rgba(0,0,0,0.08)' stroke-width='0.8'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath d='M12 3 L22 20 L2 20 Z' fill='none' stroke='rgba(0,0,0,0.06)' stroke-width='0.6'/%3E%3C/svg%3E");
    background-size: 35px 35px, 28px 28px;
    background-position: 0 0, 15px 15px;
}

/* Leaf Decorations */
.leaf-decoration {
    position: absolute;
    opacity: 0.3;
}

.header-section .leaf-top-left {
    top: 15px;
    left: 15px;
}

.header-section .leaf-top-right {
    top: 30px;
    right: 30px;
}

.header-section .leaf-bottom-left {
    bottom: 30px;
    left: 45px;
}

/* Header Title */
.header-content h1 {
    font-size: 3.5rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.subtitle {
    margin-top: 8px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.9);
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ============================================
   PAPER TEAR EFFECT
   ============================================ */
.paper-tear {
    position: relative;
    height: 30px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        transparent 40%, 
        rgba(255,255,255,0.8) 45%, 
        rgba(255,255,255,0.9) 50%, 
        rgba(255,255,255,0.8) 55%, 
        transparent 60%, 
        transparent 100%
    );
}

.paper-tear::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 15px;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(255,255,255,0.9) 8px,
        rgba(255,255,255,0.9) 12px,
        transparent 12px,
        transparent 20px
    );
    clip-path: polygon(
        0% 100%, 2% 60%, 4% 80%, 6% 50%, 8% 70%, 10% 40%,
        12% 60%, 14% 30%, 16% 50%, 18% 70%, 20% 40%,
        22% 60%, 24% 80%, 26% 50%, 28% 70%, 30% 40%,
        32% 60%, 34% 80%, 36% 50%, 38% 70%, 40% 40%,
        42% 60%, 44% 80%, 46% 50%, 48% 70%, 50% 40%,
        52% 60%, 54% 80%, 56% 50%, 58% 70%, 60% 40%,
        62% 60%, 64% 80%, 66% 50%, 68% 70%, 70% 40%,
        72% 60%, 74% 80%, 76% 50%, 78% 70%, 80% 40%,
        82% 60%, 84% 80%, 86% 50%, 88% 70%, 90% 40%,
        92% 60%, 94% 80%, 96% 50%, 98% 70%, 100% 40%,
        100% 100%
    );
}

/* ============================================
   INTRODUCTION SECTION
   ============================================ */
.intro-section {
    padding: 20px 15px;
    margin-top: -15px;
}

.intro-box {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 24px;
    padding: 25px 20px;
    box-shadow: var(--shadow-combined);
    overflow: hidden;
}

.leaf-pattern-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 5 Q25 15 20 25 Q15 15 20 5' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    pointer-events: none;
}

.intro-title {
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.element-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.element-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.element-icon svg {
    width: 16px;
    height: 16px;
}

.intro-description {
    text-align: center;
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 0 10px;
    position: relative;
    z-index: 1;
}

/* Mascot Container */
.mascot-container {
    position: relative;
    z-index: 1;
    max-width: 280px;
    margin: 0 auto;
}

.mascot-box {
    background: var(--woe-dark);
    border-radius: 20px;
    padding: 12px;
    box-shadow: var(--shadow-inner);
}

.mascot-placeholder {
    aspect-ratio: 16/9;
    border-radius: 14px;
    background: linear-gradient(to bottom, #4a4a4a, #2a2a2a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.mascot-svg {
    margin-bottom: 5px;
}

.image-label {
    font-size: 0.65rem;
    color: #888;
}

.corner-triangle {
    position: absolute;
    bottom: 8px;
    right: 8px;
}

/* ============================================
   MEMBERS SECTION
   ============================================ */
.members-section {
    padding: 30px 15px;
}

@media (max-width: 640px) {
    .members-container {
        max-width: 100%;
        padding: 0 4vw;
    }
    .custom-member-grid, .member-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px 10px;
    }
    .member-card-link {
        max-width: 100%;
    }
    .member-card-design, .member-card-tall {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-radius: 20px !important;
    }
    .member-card-design .member-leaf-accent {
        width: 28px;
        height: 28px;
        bottom: -8px;
        left: -8px;
    }
    .member-name-label {
        font-size: 0.9rem;
        padding-bottom: 6px;
    }
}

.members-container {
    max-width: 650px;
    margin: 0 auto;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

.section-header {
    text-align: center;
    margin-bottom: 25px;
}

.section-title {
    font-size: 2rem;
    color: var(--woe-yellow);
    text-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.section-subtitle {
    font-size: 0.8rem;
    color: #888;
    margin-top: 5px;
}

/* Member Grid */
.member-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}


.member-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    text-decoration: none;
    text-align: center;
    letter-spacing: 1px;
}
.member-card:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(0,0,0,0.16);
}
.member-name {
    width: 100%;
}
.member-fiah { background: #CB4D3F; }
.member-wota { background: #2E7696; }
.member-eiri { background: #F3BC64; color: #333; }
.member-earf { background: #633A20; }

.member-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 18px;
    justify-items: stretch;
    align-items: stretch;
}

/* ============================================
   BRUSH LINE
   ============================================ */
.brush-line-container {
    padding: 20px 15px;
}

.brush-line-container > div {
    max-width: 400px;
    margin: 0 auto;
}

.brush-line {
    height: 8px;
    background: linear-gradient(90deg, 
        var(--woe-yellow) 0%, 
        var(--woe-red) 25%, 
        var(--woe-blue) 50%, 
        var(--woe-teal) 75%, 
        var(--woe-yellow) 100%
    );
    border-radius: 4px;
    transform: rotate(-1deg);
    opacity: 0.7;
}

/* ============================================
   ELEMENT ROW
   ============================================ */
.element-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 15px;
}

.element-row.small {
    gap: 15px;
}

.element-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element-circle.fire {
    background: rgba(200, 75, 75, 0.2);
}

.element-circle.earth {
    background: rgba(232, 184, 74, 0.2);
}

.element-circle.water {
    background: rgba(74, 122, 158, 0.2);
}

.element-circle.small {
    width: 32px;
    height: 32px;
}

.element-circle svg {
    width: 20px;
    height: 20px;
}

.element-circle.small svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   LANDING HERO (HOME PAGE)
   ============================================ */
.landing-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100svh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    background: #0d2818;
    overflow: hidden;
}

.landing-bg-overlay {
    position: absolute;
    inset: 0;
    background-image: url('img/landpageBG.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0;
}

.landing-bg-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* Desktop: image shifted 20% lower, width-filling */
@media (min-width: 768px) {
    .landing-bg-overlay {
        background-position: center 70%;
    }
}

/* Firefly particles */
.landing-fireflies {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.landing-fireflies span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffd96a;
    box-shadow: 0 0 8px 2px rgba(255, 217, 106, 0.6);
    animation: fireflyFloat 6s ease-in-out infinite;
    opacity: 0;
}
.landing-fireflies span:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; animation-duration: 5s; }
.landing-fireflies span:nth-child(2) { top: 25%; left: 80%; animation-delay: 1s; animation-duration: 7s; }
.landing-fireflies span:nth-child(3) { top: 55%; left: 20%; animation-delay: 2s; animation-duration: 6s; }
.landing-fireflies span:nth-child(4) { top: 70%; left: 70%; animation-delay: 0.5s; animation-duration: 8s; }
.landing-fireflies span:nth-child(5) { top: 40%; left: 50%; animation-delay: 3s; animation-duration: 5.5s; }
.landing-fireflies span:nth-child(6) { top: 80%; left: 35%; animation-delay: 1.5s; animation-duration: 7.5s; }
.landing-fireflies span:nth-child(7) { top: 10%; left: 60%; animation-delay: 4s; animation-duration: 6.5s; }
.landing-fireflies span:nth-child(8) { top: 60%; left: 90%; animation-delay: 2.5s; animation-duration: 5s; }

@keyframes fireflyFloat {
    0%, 100% { opacity: 0; transform: translateY(0) translateX(0); }
    20% { opacity: 0.8; }
    50% { opacity: 1; transform: translateY(-20px) translateX(10px); }
    80% { opacity: 0.6; }
}

.landing-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
}

.landing-logo {
    width: clamp(80px, 20vw, 140px);
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.landing-title {
    color: #fff;
    font-size: clamp(2.8rem, 9vw, 4.5rem);
    text-shadow: 2px 3px 0px rgba(0,0,0,0.6);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.landing-subtitle {
    color: rgba(255,255,255,0.7);
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
}

.landing-mascot-scene {
    position: relative;
    width: clamp(120px, 30vw, 180px);
    height: clamp(120px, 30vw, 180px);
}

.landing-mascot {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
    animation: mascotIdle 3s ease-in-out infinite;
}

@keyframes mascotIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.landing-scroll-hint {
    position: absolute;
    bottom: clamp(1.5rem, 4vw, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.55);
    font-family: 'Nunito', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.landing-scroll-hint i {
    font-size: 1rem;
    animation: bounceDown 2s ease-in-out infinite;
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(6px); opacity: 1; }
}

.landing-hero.landing-collapsed {
    max-height: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease,
                padding 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   WHAT TO EXPECT SECTION (HOME PAGE)
   ============================================ */
.what-to-expect-section {
    position: relative;
    z-index: 10;
    background: #633b21;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem);
    text-align: center;
    overflow: hidden;
}

.wte-label {
    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.25rem;
}

.wte-title {
    color: #fff;
    font-size: clamp(2rem, 7vw, 3rem);
    text-shadow: 1px 2px 0px rgba(0,0,0,0.3);
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.wte-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    max-width: 340px;
    margin: 0 auto;
    padding-left: 40px;
}

.wte-path-svg {
    position: absolute;
    left: 11px;
    top: 12px;
    bottom: 12px;
    width: 40px;
    height: calc(100% - 24px);
    z-index: 0;
    overflow: visible;
}

.wte-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.wte-item:hover {
    background: rgba(255,255,255,0.08);
    transform: translateX(4px);
}

.wte-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.15), 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.wte-item:hover .wte-dot {
    transform: scale(1.15);
}

.wte-text {
    text-align: left;
}

.wte-text h3 {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(1.1rem, 3.5vw, 1.3rem);
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.15rem;
}

.wte-text p {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    color: rgba(255,255,255,0.65);
    line-height: 1.4;
}

/* ============================================
   UPCOMING SECTION (HOME PAGE)
   ============================================ */
.upcoming-section {
    position: relative;
    z-index: 10;
    background: var(--site-surface-bg, #FFF7E7);
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3rem);
    text-align: center;
}

.upcoming-label {
    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(99, 59, 33, 0.45);
    margin-bottom: 0.25rem;
}

.upcoming-title {
    color: #633b21;
    font-size: clamp(2rem, 7vw, 3rem);
    text-shadow: 1px 1px 0px rgba(0,0,0,0.08);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.upcoming-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.75rem, 3vw, 1.5rem);
    max-width: 460px;
    margin: 0 auto;
}

.upcoming-card {
    background: #633b21;
    border-radius: 16px;
    padding: clamp(1.2rem, 3vw, 1.8rem) clamp(0.8rem, 2vw, 1.2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 6px 20px rgba(99, 59, 33, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.upcoming-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(99, 59, 33, 0.35);
}

.upcoming-card-icon {
    width: clamp(50px, 12vw, 70px);
    height: clamp(50px, 12vw, 70px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.upcoming-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.upcoming-card-icon-fa {
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.upcoming-card-icon-fa i {
    font-size: clamp(1.5rem, 5vw, 2rem);
    color: rgba(255,255,255,0.8);
}

.upcoming-card-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(0.95rem, 3vw, 1.15rem);
    font-weight: 600;
    color: #fff;
}

.upcoming-speaker {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    font-weight: 700;
    color: rgba(255,255,255,0.85);
}

.upcoming-details {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.upcoming-details p {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.65rem, 2vw, 0.78rem);
    color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
}

.upcoming-details i {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.45);
}

.upcoming-coming-soon {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    color: rgba(255,255,255,0.5);
    font-style: italic;
    padding: 1rem 0;
}

.upcoming-btn {
    display: inline-block;
    margin-top: auto;
    padding: 0.4rem 1.2rem;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(0.7rem, 2vw, 0.8rem);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.upcoming-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
}

/* ============================================
   FOOTER SPACER
   ============================================ */
.footer-spacer {
    height: 0px;
}

.bottom-spacer {
    height: 30px;
}

/* ============================================
   MEMBER PAGE - HEADER
   ============================================ */
.member-header-content {
    padding-top: 20px;
}

.back-button {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.back-button:hover {
    color: white;
}

.back-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.back-icon svg {
    width: 16px;
    height: 16px;
}

.header-decoration {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0.2;
}

.member-name {
    font-size: 2.8rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    line-height: 1.1;
    white-space: pre-line;
    margin-top: 40px;
}

/* ============================================
   ROLE SECTION
   ============================================ */
.role-section {
    padding: 15px;
    margin-top: -10px;
}

.role-box {
    max-width: 400px;
    margin: 0 auto;
    border-radius: 24px;
    padding: 20px;
    box-shadow: var(--shadow-combined);
}

.role-labels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

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

.role-small {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.role-big {
    font-size: 1.3rem;
    font-weight: bold;
    color: white;
}

.role-main, .role-secondary {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
}

.role-divider {
    width: 1px;
    height: 35px;
    background: rgba(255,255,255,0.3);
}

/* Mascot Banner */
.mascot-banner {
    background: var(--woe-dark);
    border-radius: 16px;
    padding: 10px;
    box-shadow: var(--shadow-inner);
}

.mascot-banner-inner {
    aspect-ratio: 16/9;
    border-radius: 12px;
    background: linear-gradient(to bottom, #4a4a4a, #2a2a2a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.mascot-banner-inner svg {
    margin-bottom: 5px;
}

.mascot-banner-inner .image-label {
    font-size: 0.6rem;
    color: #888;
}

.mascot-banner-inner .corner-triangle {
    bottom: 6px;
    right: 6px;
}

.mascot-banner-inner .corner-triangle svg {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* ============================================
   CONTRIBUTIONS SECTION
   ============================================ */
.contributions-section {
    padding: 30px 15px;
}

.contributions-container {
    max-width: 400px;
    margin: 0 auto;
}

.contributions-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 25px;
}

.contributions-wrapper {
    position: relative;
}

.connector-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.contributions-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contribution-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contribution-item.right {
    flex-direction: row-reverse;
}

.contribution-image-card {
    width: 120px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-combined);
}

.contribution-image {
    aspect-ratio: 4/5;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.contribution-image-inner {
    text-align: center;
    padding: 10px;
}

.contribution-image-placeholder {
    width: 45px;
    height: 45px;
    margin: 0 auto 8px;
    border-radius: 8px;
    background: #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contribution-image-placeholder svg {
    width: 25px;
    height: 25px;
}

/* ============================================
   SMALL PHONE BREAKPOINT (360px and below)
   ============================================ */
@media (max-width: 360px) {
    .custom-member-grid,
    .member-names-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px 6px;
    }

    .member-card-design, .member-card-tall {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .member-card-design .member-leaf-accent {
        width: 22px;
        height: 22px;
        bottom: -6px;
        left: -6px;
    }

    .member-name-label {
        font-size: 0.78rem;
    }

    .upcoming-cards {
        grid-template-columns: 1fr;
        max-width: 280px;
    }

    .wte-title,
    .upcoming-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem);
    }

    .landing-title {
        font-size: clamp(2.2rem, 9vw, 3rem);
    }

    .intro-panel {
        padding: clamp(1rem, 3vw, 1.5rem);
    }

    .container {
        padding: 12px;
    }

    .nav-menu-item {
        width: 3.2rem;
        padding: 0.5rem;
    }

    #bottom-nav {
        width: 94%;
    }
}

.contribution-image-label {
    font-size: 0.6rem;
    color: #777;
}

.contribution-corner {
    position: absolute;
    top: 6px;
}

.contribution-item.left .contribution-corner {
    right: 6px;
}

.contribution-item.right .contribution-corner {
    left: 6px;
}

.contribution-corner svg {
    width: 14px;
    height: 14px;
}

.contribution-content {
    flex: 1;
}

.contribution-item.right .contribution-content {
    text-align: right;
}

.contribution-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.contribution-description {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 12px;
    white-space: pre-line;
}

.view-post-btn {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid;
}

/* Member brush line */
.member-brush-line {
    height: 6px;
    border-radius: 3px;
    opacity: 0.6;
}

/* Hero Image */
.hero-image {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
}

.hero-image img {
    width: 60vw;
    height: auto;
    border-radius: 20px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

/* Forest Footer */
.forest-footer {
    margin-top: 15px;
}

.forest-svg {
    width: 100%;
    height: 60px;
    display: block;
}

/* ============================================
   BOTTOM NAVIGATION
   ============================================ */
.bottom-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.nav-label {
    font-size: 0.65rem;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    font-weight: 500;
}

/* Toggle Button */
.nav-toggle {
    position: relative;
    z-index: 10;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.nav-toggle:hover {
    transform: scale(1.05);
}

.nav-toggle.expanded {
    background: rgba(255,255,255,0.9);
    box-shadow: 0 6px 25px rgba(0,0,0,0.25);
    transform: scale(1.1);
}

.toggle-logo {
    width: 38px;
    height: 38px;
    transition: opacity 0.3s;
}

.nav-toggle.expanded .toggle-logo {
    opacity: 0;
}

.logo-svg {
    width: 100%;
    height: 100%;
}

.toggle-close {
    position: absolute;
    width: 24px;
    height: 24px;
    opacity: 0;
    transition: opacity 0.3s;
}

.nav-toggle.expanded .toggle-close {
    opacity: 1;
}

/* Forest Background */
.nav-forest-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.nav-forest-bg svg {
    width: 100%;
    height: 75px;
    display: block;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 380px) {
    .header-content h1 {
        font-size: 3rem;
    }
    
    .member-name {
        font-size: 2.2rem;
    }
    
    .member-grid {
        gap: 8px;
    }
    
    .nav-left {
        margin-right: 40px;
    }
    
    .nav-right {
        margin-left: 40px;
    }
    
    .nav-icon {
        width: 40px;
        height: 40px;
    }
    
    .nav-icon svg {
        width: 18px;
        height: 18px;
    }
}

@media (min-width: 768px) {
    .header-section {
        padding: 80px 30px 50px;
    }
    
    .header-content h1 {
        font-size: 4.5rem;
    }
    
    .intro-box,
    .members-container,
    .role-box,
    .contributions-container {
        max-width: 500px;
    }
    
    .member-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .member-avatar-circle {
        width: 70px;
        height: 70px;
    }
    
    .member-name-label p {
        font-size: 0.8rem;
    }
}

/* ============================================
   EVENT SUBPAGES — DESKTOP/MOBILE TEXT TOGGLE
   ============================================ */
.text-mobile { display: none; }

/* ============================================
   EVENT SUBPAGES (AboutExhi) — MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .text-desktop { display: none; }
    .text-mobile { display: block; }
    .exhi-tabs-section {
        max-width: 90% !important;
    }
    #content-area p,
    #content-area li {
        font-size: 0.78rem;
        line-height: 1.55;
    }
    #content-area h3 {
        font-size: 1.6rem;
    }
    #content-area h4 {
        font-size: 0.9rem;
    }
    #content-area h5 {
        font-size: 0.85rem;
    }
    #content-area .text-base {
        font-size: 0.82rem;
    }
    #content-area .text-sm {
        font-size: 0.78rem;
    }
    #content-area .text-xs {
        font-size: 0.7rem;
    }
    #content-area .text-\[11px\] {
        font-size: 10px;
    }
    #content-area button {
        font-size: 0.75rem;
        padding: 0.35rem 1rem;
    }
    .element-btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }
    .tab-btn .tab-label {
        font-size: 9px;
    }
    .tab-btn .tab-icon {
        width: 2.75rem;
        height: 2.75rem;
    }
    .tab-btn .tab-icon img {
        width: 1.75rem;
        height: 1.75rem;
    }
}

@media (max-width: 360px) {
    .exhi-tabs-section {
        max-width: 94% !important;
    }
    #content-area p,
    #content-area li {
        font-size: 0.72rem;
        line-height: 1.5;
    }
    #content-area h3 {
        font-size: 1.4rem;
    }
    #content-area h4 {
        font-size: 0.82rem;
    }
    #content-area h5 {
        font-size: 0.78rem;
    }
    #content-area .text-base {
        font-size: 0.75rem;
    }
    #content-area .text-sm {
        font-size: 0.72rem;
    }
    #content-area .text-xs {
        font-size: 0.65rem;
    }
    #content-area button {
        font-size: 0.7rem;
        padding: 0.3rem 0.85rem;
    }
    .element-btn {
        font-size: 0.7rem;
        padding: 0.35rem 0.6rem;
    }
}

/* ============================================
   RESPONSIVE TEXT SCALING — ALL PAGES
   ============================================ */

/* Tablet (768px+) */
@media (min-width: 768px) {
    /* AboutExhi tab content */
    #content-area p,
    #content-area li {
        font-size: 0.9rem;
        line-height: 1.65;
    }
    #content-area h4 {
        font-size: 1.1rem;
    }
    #content-area h5 {
        font-size: 1rem;
    }
    #content-area h3 {
        font-size: 2.25rem;
    }
    #content-area .text-base {
        font-size: 1rem;
    }
    #content-area .text-sm {
        font-size: 0.9rem;
    }
    #content-area .text-xs {
        font-size: 0.8rem;
    }

    /* Element switcher buttons */
    .element-btn {
        font-size: 0.95rem;
        padding: 0.6rem 1.2rem;
    }

    /* Global page text scaling */
    .mobile-frame p,
    .mobile-frame li,
    .page-about-us p,
    .page-about-us li,
    .page-about-exhi p,
    .page-about-exhi li,
    .page-home p,
    .page-home li,
    .page-portfolio p,
    .page-portfolio li {
        font-size: 0.9rem;
        line-height: 1.65;
    }
    .mobile-frame h2,
    .page-about-us h2,
    .page-about-exhi h2,
    .page-home h2,
    .page-portfolio h2 {
        font-size: 1.75rem;
    }
    .mobile-frame h3,
    .page-about-us h3,
    .page-about-exhi h3,
    .page-home h3,
    .page-portfolio h3 {
        font-size: 1.35rem;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    /* AboutExhi tab content */
    #content-area p,
    #content-area li {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    #content-area h4 {
        font-size: 1.2rem;
    }
    #content-area h5 {
        font-size: 1.1rem;
    }
    #content-area h3 {
        font-size: 2.5rem;
    }
    #content-area .text-base {
        font-size: 1.05rem;
    }
    #content-area .text-sm {
        font-size: 0.95rem;
    }
    #content-area .text-xs {
        font-size: 0.875rem;
    }
    #content-area button {
        font-size: 0.9rem;
        padding: 0.45rem 1.75rem;
    }

    /* Element switcher buttons */
    .element-btn {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }

    /* Global page text scaling */
    .mobile-frame p,
    .mobile-frame li,
    .page-about-us p,
    .page-about-us li,
    .page-about-exhi p,
    .page-about-exhi li,
    .page-home p,
    .page-home li,
    .page-portfolio p,
    .page-portfolio li {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    .mobile-frame h2,
    .page-about-us h2,
    .page-about-exhi h2,
    .page-home h2,
    .page-portfolio h2 {
        font-size: 2rem;
    }
    .mobile-frame h3,
    .page-about-us h3,
    .page-about-exhi h3,
    .page-home h3,
    .page-portfolio h3 {
        font-size: 1.5rem;
    }
}

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
    #content-area p,
    #content-area li {
        font-size: 1.05rem;
        line-height: 1.75;
    }
    #content-area h4 {
        font-size: 1.35rem;
    }
    #content-area h5 {
        font-size: 1.15rem;
    }
    #content-area h3 {
        font-size: 2.75rem;
    }
    #content-area .text-base {
        font-size: 1.15rem;
    }
    #content-area .text-sm {
        font-size: 1.05rem;
    }
    #content-area .text-xs {
        font-size: 0.95rem;
    }

    .mobile-frame p,
    .mobile-frame li,
    .page-about-us p,
    .page-about-us li,
    .page-about-exhi p,
    .page-about-exhi li,
    .page-home p,
    .page-home li,
    .page-portfolio p,
    .page-portfolio li {
        font-size: 1.05rem;
        line-height: 1.75;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.hidden {
    display: none !important;
}

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