:root {
    --bg-color: #FDFEFF;
    --text-color: #242629;
    --text-secondary: #555;
    --accent-color: #242629;
    --card-bg: #FFFFFF;
    --font-family: 'Google Sans Flex', sans-serif;

    --container-width: 1240px;
    /* Wider container for 1440px screens */

    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 48px;
    --spacing-xl: 120px;
    /* More generous spacing */

    --radius-pill: 100px;
    --radius-card: 24px;
}

html {
    overflow-x: hidden;
    /* Prevent horizontal scrollbar at root level */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    line-height: 1.5;
    margin: 0;
    padding-top: 88px;
    overflow-x: hidden;
    /* Prevent horizontal scrollbar */
    /* Reduced from 100px to pull everything up */
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 500;
    line-height: 1.2;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
    /* Increased side padding */
}

/* Floating Header */
.floating-header {
    position: fixed;
    top: 24px;
    /* Move up slightly */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
}

.glass-pill {
    background: #1E1E1E;
    padding: 8px;
    /* Reduced from 12px */
    padding-left: 24px;
    /* Reduced from 32px */
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 32px;
    /* Reduced gap */
    pointer-events: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    height: 60px;
    /* Reduced from 78px */
}

.header-logo img {
    height: 24px;
    /* Reduced from 32px */
    width: auto;
    filter: brightness(0) invert(1);
    /* #FDFEFF visually */
}

.glass-pill nav {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    padding-right: 0;
    /* Padding handled by container */
    height: 100%;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    /* Horizontal padding usually needed for pill shape */
    /* Height calculation: 60px parent - 8px top - 8px bottom = 44px */
    height: 44px;
    border-radius: 100px;
    color: #FDFEFF;
    /* Full alpha per request */
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    background: transparent;
}

.nav-item img {
    width: 20px;
    /* Reduced from 24px */
    height: 20px;
    filter: brightness(0) invert(1) !important;
    /* Force pure white */
    transition: filter 0.3s;
    min-width: 20px;
    opacity: 1 !important;
    /* Force full alpha */
}

.nav-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
    font-size: 14px;
    /* Slightly smaller text */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Active State */
.nav-item.active {
    background: #FDFEFF;
    color: #242629;
    /* Dark text for contrast on white pill */
    padding: 0 20px 0 16px;
}

.nav-item.active img {
    /* brightness(0.14) is approx #242424, close to #242629.
       Simple brightness(0) is black.
       Using nested filters to approximate dark gray from white if needed,
       but assuming base SVG is black, we just need to cancel the invert.
       Using none !important might work, but let's be explicit.
    */
    filter: brightness(0) !important;
    /* Force black regardless of base color */
    opacity: 1 !important;
}

.nav-item.active .nav-text {
    max-width: 100px;
    opacity: 1;
    margin-left: 4px;
}

/* Hover effect for non-active items */
.nav-item:not(.active):hover {
    background: rgba(253, 254, 255, 0.1);
}

/* ================================
   PROJECT PAGE HEADER
   ================================  */

/* Transformed Header for Project Page */
.project-header .glass-pill {
    justify-content: space-between;
    width: auto;
    min-width: 200px;
    padding: 8px;
    /* Equal padding all around */
    padding-left: 20px;
    /* Left padding for logo */
}

.header-logo {
    display: flex;
    align-items: center;
    /* Vertically center logo */
    height: 100%;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FDFEFF;
    color: #242629;
    padding: 12px 20px;
    /* Equal vertical (12px) and horizontal (20px) padding */
    height: 44px;
    /* Match nav-item height */
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    box-sizing: border-box;
}

.back-button:hover {
    background-color: #F8F9FA;
    transform: translateY(-2px);
}

.back-button img {
    width: 20px;
    height: 20px;
    filter: brightness(0);
    /* Black arrow */
}


/* Hero Section */
.hero-section {
    padding-top: 12px;
    padding-bottom: 24px;
    margin-bottom: 80px;
    /* Reduced gap from 100px to 80px */
    max-width: 900px;
    margin-left: initial;
}

/* ... existing code ... */

/* About & Experience Wrapper */
.about-experience-wrapper {
    background-color: #F8F8F8;
    border-radius: 32px;
    padding: 60px 100px;
    /* Increased horizontal padding */
    margin-top: 80px;
    /* Reduced gap from 100px to 80px */
    margin-bottom: var(--spacing-xl);
}

/* ... existing code ... */

/* Projects Grid */
.projects-section {
    margin-bottom: 0px;
    /* Reset, spacing handled by wrapper margin-top */
}

/* Side Projects Grid */
.side-projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.more-projects {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.more-projects p {
    font-size: 24px;
    color: #999;
    font-weight: 500;
}

/* ... existing code ... */

/* About & Experience Wrapper */
/* Block removed, using the definition lower in file */

.overline {
    font-size: 24px;
    /* Increased from 16px to match reference scale */
    margin-bottom: 12px;
    /* Reduced margin */
    color: #242629;
    font-weight: 400;
    text-transform: none;
    line-height: 1.3;
}

.hero-title {
    font-size: 56px;
    /* Increased slightly for impact */
    margin-bottom: 16px;
    /* Reduced from 24px */
    letter-spacing: -0.03em;
    font-variation-settings: 'wght' 500;
    line-height: 1.1;
}

.hero-meta {
    list-style: none;
    margin-bottom: 32px;
    /* Reduced from 40px */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-meta li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(36, 38, 41, 0.5);
    /* #242629 at 50% alpha */
    font-size: 14px;
}

.hero-meta li img {
    width: 16px;
    height: 16px;
    opacity: 0.5;
    /* 50% opacity on #242629 base */
    /* Removed filter: brightness(0) to prevent forcing black */
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Button Overrides */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    /* Reduced specific padding */
    font-size: 14px;
    /* Slightly smaller text */
    border-radius: 100px;
    /* Fully rounded */
    font-weight: 500;
    /* Medium */
    text-decoration: none;
    /* No underline */
    line-height: 1;
    /* Center text vertically */
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    white-space: nowrap;
}

.btn-primary {
    background-color: #242629;
    color: #FDFEFF;
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #1E1E1E;
}

.btn-outline {
    background-color: #FDFEFF;
    border: 2px solid #242629;
    /* 2pt stroke */
    color: #242629;
}

.btn-outline:hover {
    background-color: #F8F9FA;
    transform: translateY(-2px);
}

.btn-icon-only {
    /* Inherit base button styles but override shape */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    /* Reduced from 56px to match new scale */
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background-color: #FDFEFF;
    border: 2px solid #242629;
    /* Match secondary button style */
    color: #242629;
    transition: all 0.2s;
}

.btn-icon-only:hover {
    background-color: #F8F9FA;
    transform: translateY(-2px);
}

/* Icon-only variant of outline button - maintains pill shape */
.btn-outline-icon {
    padding: 12px 18px;
    /* Slightly narrower than default but maintains pill shape */
    min-width: 48px;
    /* Ensures proper proportions */
}

.btn-outline-icon img {
    margin-right: 0 !important;
    /* Remove margin for icon-only buttons */
}

/* Projects Grid */
.projects-section {
    margin-bottom: 0;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: pointer;
    /* Removed invalid property */
}

.card-image-wrapper {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 16/10;
    /* Roughly matched from image */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card:hover .card-image-wrapper {
    transform: scale(0.98);
    /* Subtle shrinking tap effect or simple scale */
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover .card-image {
    transform: scale(1.05);
}

.card-overlay-icon {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.card-overlay-icon img {
    width: 20px;
    height: 20px;
    filter: invert(1);
}

.project-card:hover .card-overlay-icon {
    opacity: 1;
    transform: translateY(0);
}

/* Star Badge (Top Right - Blackhole Only) */
.star-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    background: #FDFEFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.star-badge img {
    width: 24px;
    height: 24px;
    filter: brightness(0);
    /* Black star */
}

/* Arrow Badge (Bottom Right) */
.arrow-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    /* Rounded square instead of circle */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;
}

.arrow-badge img {
    width: 20px;
    height: 20px;
}

.project-card:hover .arrow-badge {
    opacity: 1;
    transform: translateY(0);
}

/* Fix link styling on project cards */
.project-card {
    text-decoration: none;
    color: inherit;
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Project Metadata Row */
.project-meta-row {
    display: flex;
    justify-content: space-between;
    /* Spread items across full width */
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.5;
    /* 50% opacity for metadata */
    color: #242629;
}

.meta-year {
    text-align: left;
    flex: 0 0 auto;
}

.meta-role {
    text-align: center;
    flex: 1 1 auto;
    /* Take up remaining space and center text */
}

.meta-status {
    text-align: right;
    flex: 0 0 auto;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #888;
    font-weight: 500;
}

.project-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.project-subtitle {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

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

    .hero-title {
        font-size: 36px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-image {
        max-width: 250px;
        margin: 0 auto;
    }

    .experience-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .exp-date {
        color: #888;
        font-size: 13px;
    }

    .exp-details {
        margin-left: 0;
        padding-left: 16px;
    }
}

/* About & Experience Wrapper */
.about-experience-wrapper {
    background-color: #F8F8F8;
    border-radius: 32px;
    padding: 60px 60px;
    /* Generous internal padding */
    margin-bottom: var(--spacing-xl);
}

/* About Section */
.about-section {
    padding-bottom: 60px;
    /* Space between about and experience */
    /* Removed background/border logic since wrapper handles it */
}

.about-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 60px;
    align-items: center;
    /* Center content block relative to image */
}

/* Ensure image fills the container height - removed empty about-image rule */

.about-image img {
    width: 100%;
    /* height: 100%; removed */
    border-radius: var(--radius-card);
    aspect-ratio: 1/1;
    /* Restore square ratio */
    object-fit: cover;
}

.about-content h2 {
    font-size: 32px;
    margin-bottom: 16px;
}

.bio-text {
    font-size: 18px;
    /* Match project pages */
    color: #555;
    margin-bottom: 24px;
    max-width: 100%;
    /* Fill available space */
}

/* Tickers Block */
.tickers-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    /* Fill available space */
    overflow: hidden;
    /* Ensure no scrollbars */
}

.about-content {
    min-width: 0;
    /* Prevents grid blowout from wide content */
}

.ticker-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Faded edges mask */
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* End of ticker container styles */

.ticker-track {
    display: flex;
    gap: 16px;
    width: max-content;
    will-change: transform;
    /* Optimize for JS animation */
}

/* Reverse ticker logic handled in JS now */
/* .ticker-track.reverse-ticker rule removed - empty, handled in JS */
/* .ticker-track:hover rule removed - empty, handled in JS */

/* Skills Pills Ticker Items */
.ticker-track .pill {
    background: #242629;
    color: white;
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    /* Flex shrink 0 prevents squishing */
    flex-shrink: 0;
}

/* Static Skills Pills (Mobile Only) */
.static-skills-pills {
    display: none;
    /* Hidden on desktop */
    gap: 12px;
    margin-bottom: 24px;
}

.skill-pill {
    background: #242629;
    color: white;
    padding: 10px 24px;
    border-radius: 100px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
}

/* Icons Ticker Items */
.ticker-track img {
    height: 32px;
    width: auto;
    opacity: 0.75;
    /* 75% opacity */
    /* 
       To achieve #242629 color from original colorful SVGs:
       This filter approximates #242629
    */
    filter: brightness(0) invert(13%) sepia(8%) saturate(543%) hue-rotate(182deg) brightness(96%) contrast(89%);
    transition: all 0.5s ease;
    flex-shrink: 0;
    margin: 0 12px;
}

.ticker-track img:hover {
    filter: none;
    /* Restore original color */
    opacity: 1;
}

/* Experience Section */
/* Removed .bg-light-section wrapper styles */
/* experience-section rule removed - was empty */

.section-title {
    font-size: 24px;
    margin-bottom: 32px;
    font-weight: 600;
    color: #242629;
}

.experience-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* Reduced from 40px */
}

.experience-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    /* Year on left, content on right */
    gap: 40px;
    align-items: flex-start;
    padding-bottom: 0;
    /* Removed extra padding */
}

.exp-date {
    font-size: 18px;
    font-weight: 600;
    color: #242629;
    /* Align with logo height (48px) */
    height: 48px;
    display: flex;
    align-items: center;
}

.exp-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.exp-header {
    display: flex;
    align-items: center;
    /* Center aligned vertical */
    gap: 16px;
    margin-bottom: 0;
    /* Wrapper handles gap */
}

.company-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: contain;
    background: white;
}

.exp-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exp-title-group h3 {
    font-size: 18px;
    font-weight: 600;
    color: #242629;
    margin-bottom: 0;
}

.exp-role {
    font-size: 16px;
    color: #555;
    font-weight: 400;
}

.exp-details {
    margin-left: 56px;
    list-style: disc;
    color: #555;
    font-size: 18px;
    /* Match project pages */
    line-height: 1.6;
}

.exp-details li {
    margin-bottom: 8px;
}

.independent-projects {
    margin-top: 60px;
}

.subsection-title {
    font-size: 20px;
    margin-bottom: 32px;
    color: #242629;
}

/* FAQ Section */
.faq-section {
    max-width: 100%;
    /* Expand to full width or controlled container */
    margin-bottom: var(--spacing-xl);
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Spacing between separated items */
}

.accordion-item {
    background-color: #242629;
    border-radius: 32px;
    /* Match reference pill shape */
    overflow: hidden;
    color: white;
    /* Remove default active style if unrelated */
}

.accordion-header {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 24px 32px;
    /* More padding for pill shape */
    color: #FDFEFF;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.accordion-header:hover {
    background-color: #2F3136;
}

.arrow-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
    /* Force to white */
    transition: transform 0.3s ease;
}

.accordion-item.active .arrow-icon {
    transform: rotate(180deg);
}

.accordion-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
    background-color: #242629;
    /* Same as item bg for seamless look */
}

.accordion-content p {
    padding: 0 32px 32px;
    /* Match header padding */
    font-size: 18px;
    /* Match project pages */
    line-height: 1.6;
    color: rgba(253, 254, 255, 0.75);
    /* Light grey text */
    opacity: 0;
    transition: opacity 0.3s ease;
    max-width: 900px;
    /* Readability limit */
}

.accordion-item.active .accordion-content p {
    opacity: 1;
}

/* Footer */
.site-footer {
    padding: 100px 0 40px;
    text-align: center;
}

.footer-cta {
    font-size: 48px;
    margin-bottom: 40px;
    line-height: 1.2;
}

.footer-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 80px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    border-top: 1px solid #EEE;
    padding-top: 24px;
}

@media (max-width: 768px) {
    .footer-cta {
        font-size: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
}

/* ================================
   TYPOGRAPHY DESIGN SYSTEM
   ================================  */

/* Body Text */
.body-text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.body-text-sm {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Subsection Headings (H3) */
.subsection-heading {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--spacing-sm);
}

/* Content Lists */
.content-list {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary);
    list-style: disc;
    margin-left: 24px;
    gap: 12px;
    display: flex;
    flex-direction: column;
}

.content-list-numbered {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary);
    list-style: decimal;
    margin-left: 24px;
    gap: 12px;
    display: flex;
    flex-direction: column;
}

/* Spacing Utilities */
.mb-0 {
    margin-bottom: 0 !important;
}

.mb-16 {
    margin-bottom: var(--spacing-sm) !important;
}

.mb-24 {
    margin-bottom: var(--spacing-md) !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

/* Content Image Container */
.content-image {
    margin-bottom: 40px;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.content-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Italic text utility for UX decisions */
.text-italic {
    font-style: italic;
}

/* Bold text utility */
.text-bold {
    font-weight: 600;
}

/* ================================
   CAROUSEL SYSTEM
   ================================  */

/* Carousel Section Container */
.carousel-section {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
}

.custom-carousel {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio - ensures all carousel images match this ratio */
    width: 100%;
    margin-bottom: 0;
    overflow: hidden;
    /* Changed to hidden to prevent horizontal scrollbar */
}

/* Base Slide Styling (Hero/Extended) */
.carousel-slide {
    position: absolute;
    width: 85%;
    /* Extended width (Hero) */
    height: 100%;
    top: 0;
    left: 7.5%;
    /* Center (100-85)/2 */
    margin-left: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    transform: translateX(0) scale(0.8);
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Default: show full image for Hero Carousel images */
    border-radius: 24px;
}

/* Thumbnail slide uses cover to match aspect ratio */
.carousel-slide.thumbnail-slide img {
    object-fit: cover;
}

/* Active State */
.carousel-slide.active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 10;
}

/* Previous State (Left) */
.carousel-slide.prev {
    opacity: 1;
    /* Fully visible per request */
    transform: translateX(-90%) scale(0.5);
    /* 50% height, shifted left with gap */
    z-index: 5;
    cursor: pointer;
}

/* Next State (Right) */
.carousel-slide.next {
    opacity: 1;
    /* Fully visible */
    transform: translateX(90%) scale(0.5);
    /* 50% height, shifted right with gap */
    z-index: 5;
    cursor: pointer;
}

/* Carousel Controls (Hero Default) */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 120px;
    /* Vertical pill */
    background: #FDFEFF;
    border: 2px solid #242629;
    /* Secondary Style */
    border-radius: 100px;
    box-shadow: none;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.carousel-control:hover {
    transform: translateY(-50%) translateY(-2px);
    background-color: #F8F9FA;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-control.prev {
    left: 20px;
}

.carousel-control.next {
    right: 20px;
}

.carousel-control img {
    width: 24px;
    height: auto;
}

/* Article Carousel Overrides (Fixed Width, Circular Buttons) */
.article-carousel {
    max-width: 800px;
    width: fit-content;
    /* Shrink to fit content (image) */
    margin: 32px auto 40px auto;
    position: relative;
    padding: 0;
    /* Remove padding strategy */
    overflow: visible;
    /* Allow buttons to sit outside */
}

/* Override base overflow: hidden */
.article-carousel.carousel-section {
    overflow: visible;
}

.article-carousel .custom-carousel {
    height: auto;
    /* Allow height to be dictated by content */
    padding-bottom: 0;
    /* Remove aspect ratio hack */
    width: 100%;
}

.article-carousel .carousel-control {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border-width: 1px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.article-carousel .carousel-control:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.article-carousel .carousel-control.prev {
    left: -64px;
    /* 48px button + 16px gap = 64px offset from image edge */
}

.article-carousel .carousel-control.next {
    right: -64px;
}

.article-carousel .carousel-control img {
    width: 20px;
}

/* Article Slide Override (Shrink Wrap) */
.article-carousel .carousel-slide {
    width: auto;
    /* Let intrinsic size rule */
    max-width: 100%;
    left: 0;
    transform: none;
    margin: 0;
    position: absolute;
    /* Default state */
}

/* Article Active Override */
.article-carousel .carousel-slide.active {
    position: relative;
    /* Takes up flow, defining container size */
    transform: none;
    left: 0;
    z-index: 10;
}

/* Article Active Override */
.article-carousel .carousel-slide.active {
    transform: translateX(0) scale(1);
    left: 0;
}

.carousel-slide.active {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    left: 50%;
}

.carousel-slide.prev,
.carousel-slide.next {
    opacity: 0;
    /* Hide side previews */
    pointer-events: none;
}

/* Indicators Override */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    align-items: center;
    /* Center Vertically */
}

/* Default Circle (Inactive Screenshots) */
.carousel-dot {
    width: 8px;
    height: 8px;
    /* Circle */
    background: #E0E0E0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

/* Active Screenshot Pill (Darkened) */
.carousel-dot:not(.is-thumbnail).active {
    background: #242629;
    transform: scale(1.2);
}

/* Thumbnail Icon Base (Always an Icon) */
.carousel-dot.is-thumbnail {
    width: 16px;
    height: 16px;
    border-radius: 0;
    background-color: transparent;
    background-image: url('../assets/Projects/thumbnail_icon_rr.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0);
    /* Make icon black */
    transition: opacity 0.3s ease;
}

/* Active Thumbnail */
.carousel-dot.is-thumbnail.active {
    opacity: 1;
    transform: scale(1.2);
}

/* Inactive Thumbnail (Reduced Opacity) */
.carousel-dot.is-thumbnail:not(.active) {
    opacity: 0.15;
    /* Distinctly faded */
    transform: scale(1);
}

/* Hide side slides to match "Single Image View" request */
.carousel-slide.prev,
.carousel-slide.next {
    opacity: 0;
    pointer-events: none;
}

/* ================================
   FLOATING ACTION BUTTON (FAB)
   ================================  */

/* Floating Action Button (FAB) */
.fab-visit-website {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    /* Inherits padding, color, bg from .btn-primary */
}

.fab-visit-website:hover {
    /* Inherits translateY from .btn:hover */
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
}

/* ================================
   PROJECT LINKS GRID
   ================================  */

/* Footer Project Links */
.project-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

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

.project-link-card {
    display: block;
    position: relative;
    /* Added: enables absolutely-positioned badges to work */
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.project-link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Arrow badge hidden by default in "If you're interested" section, shown on hover */
.project-link-card .arrow-badge {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-link-card:hover .arrow-badge {
    opacity: 1;
    transform: translateY(0);
}

/* Star badge always visible */
.project-link-card .star-badge {
    opacity: 1;
}

/* Ensure badge icons in project-link-card match index page size */
.project-link-card .arrow-badge img,
.project-link-card .star-badge img {
    width: 20px;
    height: 20px;
}

.project-link-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Refined Meta Grid */
.meta-grid {
    display: flex;
    gap: 60px;
    margin-bottom: 60px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    /* Subtle separator */
    padding-top: 32px;
}

.meta-item {
    display: flex;
    gap: 12px;
}

.meta-label {
    font-weight: 700;
    color: #9AA0A6;
    /* Lighter grey for label */
    font-size: 16px;
    width: 80px;
    /* Fixed width for alignment if stacked */
}

.meta-value {
    color: #242629;
    font-size: 16px;
    font-weight: 400;
}

/* ================================
   MOBILE RESPONSIVE STYLES
   ================================ */

@media (max-width: 768px) {

    /* ---- NAVIGATION: Move to Bottom ---- */
    body {
        padding-top: 0;
        padding-bottom: 100px;
        /* Space for bottom nav */
    }

    .floating-header {
        top: auto;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }

    .glass-pill {
        padding: 12px 16px;
        gap: 16px;
        height: auto;
        min-height: 60px;
    }

    /* Hide navigation text, show only icons */
    .nav-text {
        display: none;
    }

    .glass-pill nav {
        gap: 12px;
    }

    .nav-item {
        padding: 12px;
        min-width: 44px;
        /* Touch target size */
        justify-content: center;
    }

    .nav-item img {
        margin: 0;
    }

    .header-logo {
        display: flex;
        align-items: center;
    }

    /* ---- CONTAINER & SPACING ---- */
    .container {
        padding: 0 20px;
    }

    /* ---- TYPOGRAPHY ---- */
    .overline {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .hero-title {
        font-size: 32px !important;
        line-height: 1.25;
        margin-bottom: 24px;
    }

    .section-title {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .subsection-heading {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .body-text {
        font-size: 16px;
        line-height: 1.6;
    }

    /* ---- HERO SECTION ---- */
    .hero-section {
        margin-top: 40px;
        margin-bottom: 60px;
    }

    .hero-meta {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
    }

    .hero-meta li {
        font-size: 14px;
    }

    .cta-group {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 32px;
    }

    .btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        font-size: 16px;
    }

    /* Hero actions - ensure buttons wrap and don't overflow */
    .hero-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }

    .hero-actions .btn {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        padding: 12px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    .hero-actions .btn-outline-icon {
        flex: 0 0 auto;
        width: 48px !important;
        min-width: 48px;
        padding: 12px !important;
    }

    /* ---- PROJECT CARDS ---- */
    .projects-grid {
        grid-template-columns: 1fr;
        /* Single column */
        gap: 24px;
    }

    .project-card {
        margin-bottom: 0;
    }

    .card-image-wrapper {
        margin-bottom: 16px;
    }

    .project-meta {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .project-card h3 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .project-card p {
        font-size: 15px;
        line-height: 1.5;
    }

    /* Side projects - full width on mobile */
    .project-card[style*="width: 62.5%"] {
        width: 100% !important;
    }

    /* ---- BADGES ---- */
    .star-badge,
    .arrow-badge {
        width: 36px;
        height: 36px;
    }

    .star-badge img,
    .arrow-badge img {
        width: 16px;
        height: 16px;
    }

    /* ---- ABOUT SECTION ---- */

    /* About wrapper on mobile */
    .about-experience-wrapper {
        background-color: #F8F8F8;
        border-radius: 24px;
        padding: 32px 20px;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .about-section {
        padding-bottom: 40px;
    }

    /* Grid becomes single column */
    .about-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px;
        width: 100%;
        max-width: 100%;
    }

    /* Image styling */
    .about-image {
        order: 1;
        /* Image first */
        width: 100%;
    }

    .about-image img {
        width: 100%;
        border-radius: 20px;
    }

    /* Content styling - critical width constraints */
    .about-content {
        order: 2;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        /* Allow flex shrinking */
        overflow: hidden;
    }

    .about-content h2 {
        font-size: 24px;
        margin-bottom: 16px;
        font-weight: 600;
    }

    .bio-text {
        font-size: 16px;
        line-height: 1.6;
        color: #242629;
        margin-bottom: 24px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
    }

    /* Skills pills ticker - show on mobile (same as desktop) */
    .tickers-block {
        gap: 16px;
        width: 100%;
        max-width: 100%;
    }

    /* Show scrolling skills ticker on mobile */
    .ticker-container {
        display: block;
        width: 100%;
    }

    /* Keep logo ticker visible */
    .ticker-container:last-child {
        display: block;
    }

    .about-container {
        flex-direction: column;
        gap: 32px;
        margin-bottom: 60px;
    }

    .about-text {
        max-width: 100%;
        word-wrap: break-word;
    }

    .about-image-wrapper {
        max-width: 100%;
        order: -1;
        /* Image first on mobile */
    }

    /* ---- EXPERIENCE SECTION ---- */
    /* Override desktop grid layout with vertical flex stacking for mobile */
    .experience-item {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        align-items: flex-start;
        gap: 20px;
        padding: 24px 0;
        border-bottom: 1px solid #E0E0E0;
    }

    .experience-item:last-child {
        border-bottom: none;
    }

    .exp-date {
        font-size: 16px;
        font-weight: 600;
        min-width: auto;
        margin-bottom: 0;
        height: auto;
    }

    .exp-content {
        width: 100%;
    }

    .exp-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .company-logo {
        max-width: 48px;
        max-height: 48px;
        flex-shrink: 0;
    }

    .exp-title-group {
        flex: 1;
    }

    .exp-title-group h3 {
        font-size: 18px;
        margin-bottom: 4px;
    }

    .exp-role {
        font-size: 14px;
        color: #666;
    }

    .exp-details {
        width: 100%;
        margin: 0;
        padding-left: 20px;
    }

    .exp-details li {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 8px;
        color: #555;
    }

    /* Experience section fixes (old classes for backward compatibility) */
    .experience-year {
        font-size: 16px;
        font-weight: 600;
        min-width: auto;
        margin-bottom: 0;
    }

    .experience-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .experience-details h3 {
        font-size: 18px;
        margin-bottom: 4px;
    }

    .experience-details p {
        font-size: 14px;
        color: #666;
        margin-bottom: 0;
    }

    .experience-description {
        width: 100%;
    }

    .experience-description ul {
        margin: 0;
        padding-left: 20px;
    }

    .experience-description li {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 8px;
        color: #555;
    }

    /* ---- SKILLS TICKER ---- */
    .ticker-section {
        margin-bottom: 60px;
    }

    .ticker-item {
        font-size: 16px;
        padding: 0 24px;
    }

    /* ---- FAQ SECTION ---- */
    .faq-container {
        gap: 12px;
    }

    .faq-item {
        padding: 20px;
    }

    .faq-question {
        font-size: 16px;
        padding-right: 40px;
    }

    .faq-answer {
        font-size: 15px;
        line-height: 1.6;
    }

    /* ---- FOOTER ---- */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .social-links {
        justify-content: center;
    }

    /* ---- PROJECT PAGES ---- */

    /* Back button on project pages */
    .project-header .glass-pill {
        padding: 12px 20px;
        gap: 20px;
    }

    .back-button {
        font-size: 14px;
        gap: 8px;
    }

    /* Meta grid */
    .meta-grid {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    .meta-item {
        flex-direction: column;
        gap: 8px;
    }

    .meta-label {
        width: auto;
        font-size: 14px;
    }

    .meta-value {
        font-size: 15px;
    }

    /* Carousels */
    .carousel-section {
        margin-bottom: 32px;
    }

    .carousel-slide {
        width: 95%;
        left: 2.5%;
    }

    .carousel-slide.prev,
    .carousel-slide.next {
        opacity: 0;
    }

    .carousel-control {
        width: 40px;
        height: 40px;
    }

    .carousel-control img {
        width: 20px;
        height: 20px;
    }

    .carousel-indicators {
        bottom: -32px;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
    }

    /* Article content */
    article {
        margin-bottom: 40px;
    }

    /* ---- PROJECT PAGE MOBILE OPTIMIZATIONS ---- */

    /* Floating button - move to top-right on mobile */
    .fab-visit-website {
        top: 80px !important;
        right: 20px !important;
        bottom: auto !important;
        left: auto !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        width: auto !important;
        max-width: calc(100vw - 40px) !important;
    }

    /* Hide carousel arrow buttons on mobile */
    .carousel-control.prev,
    .carousel-control.next {
        display: none !important;
    }

    /* Carousel indicators - enhanced for mobile */
    .carousel-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
        padding: 0;
    }

    .carousel-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: rgba(36, 38, 41, 0.15);
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        padding: 0;
        position: relative;
    }

    .carousel-dot::before {
        content: '';
        position: absolute;
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
        /* Invisible larger touch area */
    }

    .carousel-dot.active {
        background-color: #242629;
        transform: scale(1.2);
    }

    /* Thumbnail-style indicators for hero carousels */
    .carousel-dot.is-thumbnail {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('../assets/Projects/thumbnail_icon_rr.svg');
        background-color: transparent;
        opacity: 0.15;
    }

    .carousel-dot.is-thumbnail.active {
        opacity: 1;
        transform: scale(1);
    }

    article h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    article h3 {
        font-size: 20px;
        margin-bottom: 16px;
    }

    article p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    article ul,
    article ol {
        padding-left: 24px;
        margin-bottom: 16px;
    }

    article li {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 8px;
    }

    /* Image sections */
    .image-section {
        margin-bottom: 40px;
    }

    .image-section img {
        border-radius: 16px;
    }

    /* Project link cards */
    .related-projects {
        gap: 16px;
    }

    .project-link-card {
        margin-bottom: 16px;
    }

    .project-link-card h3 {
        font-size: 18px;
    }

    /* Floating action button */
    .floating-action-btn {
        bottom: 100px;
        /* Above bottom nav */
        right: 20px;
        padding: 14px 24px;
        font-size: 14px;
    }

    /* ---- SECTIONS SPACING ---- */
    section {
        margin-bottom: 60px;
    }

    .mb-24 {
        margin-bottom: 16px !important;
    }


    .mb-48 {
        margin-bottom: 32px !important;
    }

    /* ---- VISIBILITY TOGGLES ---- */
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block;
    }

    /* ---- SIDE PROJECTS CAROUSEL ---- */
    .side-projects-carousel {
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .side-projects-carousel .carousel-track {
        display: flex;
        transition: transform 0.3s ease;
        width: 100%;
    }

    .side-projects-carousel .carousel-slide {
        min-width: 100%;
        flex-shrink: 0;
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        left: 0 !important;
        height: auto !important;
    }

    .side-projects-carousel .carousel-slide .project-card {
        width: 100% !important;
    }

    .more-projects-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        padding: 40px 20px;
    }

    .more-projects-slide p {
        font-size: 24px;
        color: #888;
        text-align: center;
        line-height: 1.4;
    }

    /* Carousel Indicators for Side Projects */
    .side-projects-carousel .carousel-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
        padding: 0;
    }

    .side-projects-carousel .carousel-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: rgba(36, 38, 41, 0.15);
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        padding: 0;
        position: relative;
    }

    .side-projects-carousel .carousel-dot::before {
        content: '';
        position: absolute;
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
    }

    .side-projects-carousel .carousel-dot.active {
        background-color: #242629;
        transform: scale(1.2);
    }
}

/* Desktop: show grid, hide carousel */
@media (min-width: 769px) {
    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none !important;
    }

    /* Ensure side projects grid maintains original layout */
    .side-projects-grid {
        display: flex;
        gap: 32px;
        align-items: flex-start;
    }

    /* Side project card should be 60% of main project card width */
    /* Main project ≈ 48.5%, so 60% of that ≈ 29.1% */
    .side-projects-grid .project-card {
        width: 29.1% !important;
        max-width: 29.1%;
    }

    /* More projects placeholder takes remaining space */
    .side-projects-grid .more-projects {
        flex: 1;
    }
}