:root {
    /* Colors */
    --bg-paper: #FFFCF6;
    /* Lighter paper color */
    --text-pencil: #1A1A18;
    --color-primary: #0068E5;
    --color-highlight: #327F86;
    --color-accent: #FF4FA3;
    --color-neutral: #E5E7EB;

    /* Fonts */
    --font-sketch: 'Crimson Pro', serif;
    --font-ui: 'Plus Jakarta Sans', sans-serif;

    /* Transitions */
    --ease-sketch: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Elastic */
    --ease-polish: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-behavior: initial;
    width: 100%;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

::selection {
    background-color: rgba(0, 0, 0, 0.05);
    /* Faint grey instead of blue */
    color: inherit;
}

::-moz-selection {
    background-color: rgba(0, 0, 0, 0.05);
    color: inherit;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
    /* Hide default cursor for custom one */
}

body {
    background-color: var(--bg-paper);
    color: var(--text-pencil);
    font-family: var(--font-sketch);
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    transition: background-color 1s ease, color 1s ease;
}

/* Scribble Canvas */
#scribble-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9998;
    /* Right below the cursor (z-index: 9999) */
}

#mesh-net-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -2;
    /* Soft cream background with very subtle mesh grid */
    background-color: #FFFCF6;
    background-image:
        linear-gradient(rgba(180, 176, 168, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 176, 168, 0.12) 1px, transparent 1px);
    background-size: 80px 80px;
    /* Smaller, barely visible mesh squares */
}

/* Custom Cursor */
/* Custom Cursor */
#cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    /* Custom Triangle SVG (Teal #2C5157 fill, White stroke) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l16 10-7 2-4 8z' fill='%232C5157' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    pointer-events: none;
    z-index: 9999;
    transform: translate(0, 0);
    /* Hotspot is top-left tip */
    transition: width 0.3s, height 0.3s, background-color 0.3s, border-radius 0.3s;
}

#cursor.view-case-study {
    width: max-content;
    height: 36px;
    padding: 0 16px;
    background-image: none;
    background-color: rgba(50, 127, 134, 0.9);
    /* Slightly more opaque teal to compensate for blur removal */
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    /* Softer inner reflection */
}

#cursor.view-case-study::after {
    content: "VIEW CASESTUDY";
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 11px;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

#cursor.read-learnings {
    width: max-content;
    height: 36px;
    padding: 0 16px;
    background-image: none;
    background-color: rgba(50, 127, 134, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

#cursor.read-learnings::after {
    content: "Read Learnings";
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 11px;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    white-space: nowrap;
}



/* Header */
.main-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 5% 1rem;
    /* 1rem top, 1rem bottom */
    z-index: 100;
    background-color: rgba(255, 252, 246, 0.75);
    /* Creamy transparent background */
    backdrop-filter: blur(20px);
    /* Strong blur effect */
    -webkit-backdrop-filter: blur(20px);
    transition: padding 0.3s ease, transform 0.3s ease;
    /* Added transform transition */
}

.header-hidden {
    transform: translateY(-100%) !important;
}



.main-header nav {
    display: flex;
    justify-content: flex-end;
    /* Push everything to the right if only links, or space-between if logo exists */
    align-items: center;
    width: 100%;
}

.logo-sketch {
    margin-right: auto;
    /* Pushes logo to left, links to right */
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: -1px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}

.nav-item {
    text-decoration: none;
    color: var(--text-pencil);
    font-size: calc(1.2rem + 2px);
    /* +2px as requested */
    position: relative;
}

.desktop-hide {
    display: none !important;
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--text-pencil);
    transition: width 0.3s var(--ease-sketch);
}

.nav-item:hover::after {
    width: 100%;
}

/* Hero Section - Split Layout */
.hero-section {
    /* min-height: calc(100vh - 250px); - Removed as requested */
    /* Reduced to allow marquee peeking */
    /* Reveal partial marquee */
    display: flex;
    flex-direction: row-reverse;
    /* Visuals Left, Text Right */
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 2rem 5% 1.5rem;
    overflow: hidden;
    gap: 8rem;
    /* Increased spacing as requested */
    scroll-margin-top: 100px;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.hero-text-side {
    flex: 1;
    max-width: 50%;
    text-align: left;
    z-index: 10;
}

.hero-visual-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

.central-mascot-container {
    position: relative;
    z-index: 2;
    margin: 0 1rem;
    /* Reduced from 4rem to bring tags closer */
}

.hero-mascot {
    height: 60vh;
    /* Increased from 45vh */
    max-height: 550px;
    /* Increased max-height */
    width: auto;
    transition: transform 0.3s ease;
}

.mascot-platform {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 20px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    z-index: -1;
    display: none;
}

/* Floating Tags */
.tag-group {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Reduced from 4rem */
    position: relative;
    z-index: 1;
}

.skill-tag {
    background: white;
    padding: 0.4rem 0.8rem;
    /* Standard padding */
    border-radius: 50px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.75rem;
    /* Smaller font */
    color: var(--text-pencil);
    /* box-shadow removed as requested */
    border: 1.5px solid var(--text-pencil);
    /* Thinner border */
    white-space: nowrap;
    position: relative;
    cursor: default;
    transition: transform 0.3s var(--ease-sketch);
}

/* Connectors */
.tag-connector {
    display: none;
    /* Removed as requested */
}

/* Move tags closer to center (mascot's hands) */
.left-tags {
    margin-right: -5rem;
    /* Tighter pull */
    z-index: 5;
    align-items: flex-end;
    /* Align right to push towards center */
}

.right-tags {
    margin-left: -5rem;
    /* Tighter pull */
    z-index: 5;
    align-items: flex-start;
    /* Align left to push towards center */
}

/* Adjust transforms to bring them closer to hands */
/* Static Tag Positioning per Reference Image */

/* LEFT SIDE */
.left-tags .tag-visual {
    transform: translateX(10px) translateY(10px) rotate(-5deg);
    /* Top Left */
}

.left-tags .tag-wireframe {
    transform: translateX(-10px) translateY(10px) rotate(3deg);
    /* Mid-Top Left */
}

.left-tags .tag-startup {
    transform: translateX(20px) translateY(10px) rotate(-3deg);
    /* Mid-Bottom Left */
}

.left-tags .tag-intern {
    transform: translateX(-10px) translateY(20px) rotate(3deg);
    /* Bottom Left */
}

/* RIGHT SIDE */
.right-tags .tag-product {
    transform: translateX(-10px) translateY(10px) rotate(5deg);
    /* Top Right */
}

.right-tags .tag-proto {
    transform: translateX(30px) translateY(10px) rotate(-3deg);
    /* Mid-Top Right */
}

.right-tags .tag-opensource {
    transform: translateX(-20px) translateY(10px) rotate(3deg);
    /* Mid-Bottom Right */
}

.right-tags .tag-hackathon {
    transform: translateX(10px) translateY(20px) rotate(-3deg);
    /* Bottom Right */
}

/* Hero Title at Bottom Overlay */
.hero-title-container {
    margin-top: 2rem;
    /* Reduced space */
    z-index: 3;
    text-align: center;
}

.hero-title {
    font-family: var(--font-sketch);
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 400;
    color: #141413;
    line-height: 1;
    margin-bottom: 1.5rem;
    white-space: normal;
}

.hero-subtitle {
    font-family: var(--font-ui);
    font-size: 1.25rem;
    color: #1A1A18;
    max-width: 90%;
    margin-bottom: 2rem;
    line-height: 1.6;
    font-weight: 500;
}

/* Scroll Indicator */
.scroll-indicator {
    margin-top: 2rem;
    animation: bounce 2s infinite;
}

.scroll-dot {
    animation: scrollDot 2s infinite;
}

@keyframes scrollDot {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

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

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* Physics Container */
#footer {
    position: relative;
    /* overflow: hidden; Removed to allow physics container overlap */
}

#physics-container {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    /* Full width */
    height: 100vh;
    /* Expanded height to prevent clipping */
    max-height: none;
    z-index: 20;
    pointer-events: none;
    /* Allow clicks to pass through by default */
}

@media (max-width: 768px) {
    #physics-container {
        display: block;
        /* Enable on mobile */
    }
}

@media (max-width: 900px) {
    .hero-content-wrapper {
        flex-direction: column;
    }

    .hero-mascot {
        height: 320px;
        filter: none;
    }

    .tag-group {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.5rem;
        margin: 0.5rem 0;
        width: 100%;
        padding: 0 10px;
    }

    .left-tags {
        margin: 0;
        width: 100%;
        transform: translateX(-12px);
    }

    .right-tags {
        margin: 0;
        width: 100%;
        transform: translateX(12px);
    }

    .tag-group .skill-tag {
        /* transform: none !important; - Removed duplicate */
        margin: 4px;
        /* Ensure some spacing */
    }

    .skill-tag {
        font-size: 20px;
        padding: 8px 16px;
    }

    .tag-connector {
        display: none;
    }
}

/* Filled CTA Button */
.btn-filled {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    text-decoration: none;
    background-color: #327F86;
    /* teal */
    color: #fcfbf4;
    /* light cream 50 */
    border-radius: 6px;
    font-size: 20px;
    font-weight: 500;
    border: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-filled:hover {
    transform: translateY(-2px);
    background-color: #266268;
    /* darker teal */
}

.btn-filled svg {
    color: #fcfbf4;
}

/* Mobile-only component, hidden on desktop */
.mobile-case-study-btn {
    display: none !important;
}

/* Sketch CTA Button */
.btn-sketch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    text-decoration: none;
    color: var(--text-pencil);
    font-size: 20px;
    font-weight: bold;
}

/* Secondary Outline Button */
.btn-outline {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6px 16px 8px;
    border: 1.5px solid #327F86;
    color: #327F86;
    border-radius: 6px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-outline:hover {
    background-color: #327F86;
    color: #fcfbf4;
    border-color: #327F86;
}

.btn-outline:hover::after {
    width: 0;
}

.btn-outline svg {
    margin-left: 2px;
    transition: transform 0.3s ease;
}

.btn-outline:hover svg {
    color: #fcfbf4;
}

.btn-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.draw-path {
    stroke-dasharray: 500;
    /* Enough to cover perimeter */
    stroke-dashoffset: 0;
    transition: all 0.5s;
}

.btn-sketch:hover .draw-path {
    animation: borderRun 2s linear infinite;
}

@keyframes borderRun {
    0% {
        stroke-dasharray: 60 190 60 190;
        /* Two 60px visible lines separated by gaps */
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 60 190 60 190;
        stroke-dashoffset: -500;
        /* Full loop */
    }
}

.btn-sketch .lucide-arrow-down {
    margin-left: 8px;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .btn-sketch .lucide-arrow-down {
        width: 16px;
        height: 16px;
    }
}

/* Marquee */
.marquee-section {
    overflow: hidden;
    padding: 2rem 0;
    /* Reduced padding further */
    background: rgba(0, 0, 0, 0.02);
    transform: rotate(0deg);
    /* Rotation removed */
    margin-top: -4rem;
    /* Adjusted margin for flat alignment */
    margin-bottom: 50px;
    /* Standardized spacing (50px + next section 50px = 100px) */
    position: relative;
    z-index: 1;
    text-align: center;
}

.marquee-label {
    font-family: var(--font-sketch);
    font-size: 1.5rem;
    color: #1A1A18;
    margin-bottom: 1rem;
    font-weight: 400;
}


.marquee-track {
    display: flex;
    white-space: nowrap;
    width: 200%;
    /* For infinite scroll logic */
}

.marquee-content {
    display: flex;
    gap: 4rem;
    animation: marquee 20s linear infinite;
}

.company-logo {
    font-size: 1.75rem;
    /* Reduced by ~4px from 2rem (32px -> 28px) */
    font-weight: bold;
    color: rgba(0, 0, 0, 0.3);
    font-family: var(--font-ui);
    /* Contrast */
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Transition Point & Polished World */
.transition-point {
    height: 1px;
    width: 100%;
    margin-bottom: 0px;
    /* Removed extra space */
}

/* Body State: Consistent Sketch Mode */
/* Removed polished-mode overrides */

/* Projects Section */
.projects-section {
    max-width: 1920px;
    margin: 0 auto;
    padding: 50px 5%;
    /* Standardized spacing */
    opacity: 0;
    /* Hidden initially, revealed by scroll */
    transform: translateY(50px);
    scroll-margin-top: 100px;
}

.section-title {
    font-family: var(--font-sketch);
    /* Consistent Heading */
    font-size: 3.5rem;
    /* Increased slightly */
    margin-bottom: 1rem;
    /* Reduced margin-bottom here to accommodate subtitle */
    font-weight: 400;
    text-align: center;
    color: #141413;
}

.section-subtitle {
    font-family: var(--font-ui);
    font-size: 18px;
    color: #1A1A18;
    text-align: center;
    max-width: 900px;
    /* Allow full width */
    margin: 0 auto 2.5rem auto;
    /* Reduced bottom margin to content */
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
    /* Allow wrapping when needed */
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

@media (max-width: 768px) {
    .projects-grid {
        gap: 32px;
    }
}


.project-card {
    background: white;
    /* Keep white cards for contrast or make them transparent? User said consistent background. Let's keep cards white for readability but add sketch border. */
    border-radius: 2px;
    /* Less rounded */
    overflow: hidden;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);
    /* subtle shadow */
    transition: transform 0.3s var(--ease-sketch), box-shadow 0.3s var(--ease-sketch);
    will-change: transform;
    border: 0.5px solid #1A1A18;
    /* Solid black stroke */
    position: relative;
    /* Enabled for stretched-link */
    margin-bottom: 0;
    /* Remove bottom spacing */
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {

    .project-card,
    .huge-card {
        transition: none;
        cursor: default;
    }

    .project-card:hover,
    .project-card:active,
    .huge-card:hover,
    .huge-card:active {
        transform: none;
        box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);
    }
}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

.card-media {
    height: 200px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0.5px solid #1A1A18;
    /* Solid dark bottom border */
}

.card-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

.card-info h3 {
    font-family: var(--font-sketch);
    /* Consistent Font */
    margin-bottom: 0.5rem;
    font-size: 1.55rem;
    /* Reduced by ~4px */
    font-weight: 400;
    /* Match highlight-title weight */
}

.card-info p {
    font-family: var(--font-ui);
    color: #1A1A18;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

/* Case Study Link */
.case-study-link {
    display: inline-block;
    color: var(--text-pencil);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    font-family: var(--font-sketch);
    /* border-bottom removed */
}

.case-study-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Project Tags */
.project-tags {
    margin-top: auto;
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.project-tag {
    background: white;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-pencil);
    border: 1px solid var(--text-pencil);
    font-family: var(--font-ui);
}

/* Project Metrics */
.project-metrics {
    display: flex;
    gap: 2.5rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.metric-item {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-family: var(--font-sketch);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-pencil);
    line-height: 1.2;
}

.metric-label {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: #1A1A18;
    margin-top: 0.1rem;
}

/* Featured Section (Huge Cards) */
.featured-section {
    padding-top: 40px;
    padding-bottom: 40px;
    /* Standardized spacing */
}

.featured-grid {
    grid-template-columns: 1fr 1fr;
    /* Force 2 columns on larger screens */
}

.huge-card .huge-media {
    height: 400px;
    /* Double the height of standard cards */
}

@media (max-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }

    .huge-card .huge-media {
        height: 250px;
        /* Smaller on mobile but still substantial */
    }

    .huge-card {
        margin-bottom: 0 !important;
        /* Remove bottom spacing */
    }
}

/* Footer */
/* Old Footer Removed */

@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
        font-weight: 600;
        white-space: nowrap;
    }

    .marquee-content {
        animation-duration: 10s;
    }
}



/* Journey Section (Work Experience) */
.journey-section {
    padding: 50px 5%;
    /* Standardized spacing */
    max-width: 900px;
    margin: 0 auto;
    scroll-margin-top: 100px;
}

.journey-container {
    margin-top: 2rem;
}

.journey-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 2px dashed var(--text-pencil);
    font-family: var(--font-ui);
    color: var(--text-pencil);
    transition: transform 0.2s var(--ease-sketch);
}

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

.journey-item:hover {
    transform: translateX(5px);
}

.journey-role {
    flex: 2;
    font-weight: 600;
    font-size: 1.2rem;
}

.journey-company {
    flex: 1.5;
    font-size: 1.1rem;
    color: #1A1A18;
    text-align: left;
}

.journey-year {
    flex: 0.5;
    text-align: right;
    font-family: var(--font-sketch);
    /* Sketch font for dates looks cool */
    font-size: 1.2rem;
    color: #1A1A18;
}

@media (max-width: 600px) {
    .journey-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .journey-company,
    .journey-year {
        text-align: left;
        width: 100%;
    }
}



/* About Section */
.about-section {
    padding: 24px 5% 24px;
    scroll-margin-top: 100px;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

/* Adjust for polished mode (Removed) */
/* body.polished-mode .about-section {
    background: #f9fafb;
} */

.about-split {
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.about-sketch {
    flex: 0.75;
    /* Further reduced to shift mascot left */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Context for absolute tags */
}

/* ... mascot styles remain ... */

/* ... */

.about-text {
    flex: 1;
    /* Further increased width for text */
}

.about-mascot {
    height: auto;
    width: 100%;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 10;
}

.mascot-default {
    position: relative;
    opacity: 1;
}

.mascot-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0 !important;
    /* Force hide by default, even after skeleton loads */
    transition: opacity 0.3s ease;
}

.about-sketch:hover .mascot-default {
    opacity: 0;
    transform: scale(1.05) rotate(2deg);
}

.about-sketch:hover .mascot-hover {
    opacity: 1 !important;
    transform: scale(1.05) rotate(2deg);
}



.about-text h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
}

.about-text p {
    font-size: 1.375rem;
    /* Increased by 2px (20px -> 22px) */
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #1A1A18;
    letter-spacing: -0.02em;
}



/* Highlight Project Section */
.highlight-project-section {
    padding: 40px 5% 24px;
    /* 40px top, 24px bottom padding for desktop */
    max-width: 1920px;
    margin: 0 auto;
}

.highlight-container {
    display: flex;
    align-items: center;
    gap: 32px;
    /* Reduced from 4rem by ~24px */
    background: rgb(255, 255, 255);
    /* Changed from grey to white */
    border-radius: 4px;
    padding: 32px 16px;
    /* Increased L/R, Decreased Bottom */
    /* Removed individual padding overrides */
    /* Remove bottom padding so image hits edge */
    border: 0.5px solid var(--text-pencil);
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Clip the image at borders */
    position: relative;
}

.highlight-text {
    flex: 1;
    padding-right: 16px;
    /* Add spacing since container padding is gone */
    padding-bottom: 0.5rem;
    /* Reduced bottom spacing */
    z-index: 10;
}

/* ... eyebrow/title ... */

.highlight-media {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.highlight-media .project-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 4px;
    /* Slight rounding to match inner edges if needed */
}

/* Duplicate highlight-phone-mockup removed */

.highlight-eyebrow {
    font-family: var(--font-sketch);
    color: #1A1A18;
    font-size: 1rem;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.highlight-title {
    font-family: var(--font-sketch);
    font-size: 2.25rem;
    line-height: 1.1;
    margin-bottom: 16px;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.highlight-description {
    font-family: var(--font-ui);
    color: #1A1A18;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 16px;
    max-width: 90%;
    letter-spacing: -0.2px;
}

.highlight-tags {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.highlight-tags .skill-tag {
    transform: none !important;
    position: static;
}

.highlight-stats {
    display: flex;
    gap: 3rem;
    margin-bottom: 16px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: var(--font-sketch);
    font-size: 1.5rem;
    /* Increased for desktop */
    font-weight: bold;
    color: var(--text-pencil);
}

.stat-label {
    font-family: var(--font-ui);
    font-size: 1rem;
    /* Increased for desktop */
    color: #1A1A18;
    margin-top: 5px;
}

.btn-highlight {
    background: var(--text-pencil);
    color: white;
}

.btn-highlight .btn-border path {
    stroke: white;
}


/* highlight-media block removed here to avoid duplication */
.highlight-phone-mockup {
    width: 520px;
    /* fixed pixel width instead of percentage */
    max-width: none;
    height: auto;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

.highlight-phone-mockup:hover {
    transform: scale(1.02);
}

/* Responsive Mockup Image Switching */
.mockup-mobile {
    display: none;
    /* Hide mobile version on desktop */
}

.mockup-desktop {
    display: block;
    /* Show desktop version by default */
}

@media (max-width: 900px) {
    .mockup-desktop {
        display: none;
        /* Hide desktop version on mobile */
    }

    .mockup-mobile {
        display: block;
        /* Show mobile version on mobile */
    }
}

/* Testimonials Section */
.testimonials-section {
    padding: 24px 0 80px;
    /* Top padding set to 0 */
    overflow: hidden;
    position: relative;
    scroll-margin-top: 100px;
    margin-bottom: 40px;
}

.testimonials-section .section-title {
    margin-bottom: 16px;
    padding-left: 0;
    /* Removed padding-left and text-align left for center alignment */
}

.testimonials-track-container {
    width: 100%;
    overflow: hidden;
}

.testimonials-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: scroll-left 20s linear infinite;
    /* Faster speed */
    padding-right: 3rem;
    padding-bottom: 40px;
    /* Space for shadow */
    padding-top: 20px;
    /* Space for hover */
    /* Ensure gap at the end for loop */
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.333%);
        /* Move exactly 1/3rd (1 set) */
    }
}

.testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: 4px;
    border: 0.5px solid var(--text-pencil);
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.1);
    /* Sketch shadow */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 600px;
    /* Fixed width for marquee */
    flex-shrink: 0;
}

.testimonial-text {
    font-family: var(--font-ui);
    color: #1A1A18;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    font-style: normal;
    letter-spacing: -0.02em;
}

.text-highlight {
    background-color: rgba(124, 206, 218, 0.5);
    /* #7CCEDA with 50% opacity */
    /* Theme's greenish overlay */
    padding: 0 4px;
    border-radius: 2px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-placeholder {
    width: 50px;
    height: 50px;
    background: #e0e0e0;
    border-radius: 50%;
    border: 0.5px solid var(--text-pencil);
}

.author-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0.5px solid var(--text-pencil);
    object-fit: cover;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-family: var(--font-sketch);
    font-size: 1.2rem;
    color: var(--text-pencil);
    letter-spacing: -0.02em;
}

.author-title {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: #1A1A18;
    letter-spacing: -0.02em;
}

/* Hover Pause */
.testimonials-track:hover {
    animation-play-state: paused;
}

.btn-highlight:hover {
    color: white;
}

.highlight-media {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.laptop-placeholder {
    width: 100%;
    max-width: 500px;
    height: 350px;
    background: #333;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

@media (max-width: 900px) {
    .highlight-container {
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
    }

    .highlight-title {
        font-size: 2.5rem;
    }
}

/* FAQ Section */
.faq-section {
    padding: 24px 5% 50px;
    scroll-margin-top: 100px;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

/* Footer Bottom Layout */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    /* Subtle separator */
}

.footer-instruction {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.footer-instruction:hover,
.footer-instruction:active {
    color: #ffffff;
}

.footer-arrow {
    height: 12px;

    /* Adjust size to match text */
}

/* FAQ Section Redesign */
.faq-section {
    padding: 40px 16px;
    /* Reduced side margins as per user request */
    width: 100%;
    margin: 0 auto;
    overflow: visible;
}

.faq-header {
    text-align: center;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-section .section-title {
    margin-bottom: 0.5rem;
    /* Slight space */
    line-height: 1;
    /* Tighter line height to reduce visual gap */
}

.faq-subtitle {
    font-family: var(--font-ui);
    color: #1A1A18;
    font-size: 1.1rem;
    margin-top: 0;
    /* Reduced from 10px */
    margin-bottom: 0;
}

/* Two Column Layout */
.faq-content-wrapper {
    display: flex;
    align-items: center;
    /* Align top so mascot doesn't center if list is long? Or center? User liked "center" before? */
    /* Let's keep center vertical alignment as it looks better with mascot */
    justify-content: center;
    /* Center the whole block */
    gap: 3rem;
    padding: 0;
    /* Remove extra padding */
    max-width: 1400px;
    /* Allow wider content */
    margin: 0 auto;
}

.faq-mascot-container {
    flex: 0 0 450px;
    display: flex;
    justify-content: center;
    position: relative;
}

.faq-mascot-img {
    width: 100%;
    max-width: 450px;
    height: auto;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
    transition: transform 0.1s ease;
    /* Fast transition for beat */
}

/* Singing Animation */
.mascot-singing {
    animation: singBounce 0.45s ease-in-out infinite alternate;
}

@keyframes singBounce {
    0% {
        transform: translateY(8px);
    }

    /* Down */
    100% {
        transform: translateY(-8px);
    }

    /* Up */
}

.mascot-open {
    animation: toggleOpen 0.45s linear infinite alternate;
}

.mascot-closed {
    animation: toggleClosed 0.45s linear infinite alternate;
}

@keyframes toggleOpen {

    0%,
    49% {
        opacity: 1;
    }

    /* Visible when down */
    50%,
    100% {
        opacity: 0;
    }

    /* Hidden when up */
}

@keyframes toggleClosed {

    0%,
    49% {
        opacity: 0;
    }

    /* Hidden when down */
    50%,
    100% {
        opacity: 1;
    }

    /* Visible when up */
}

/* Vinyl Orbits */
.orbit-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: -1;
    pointer-events: none;
}

.mini-disc {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.disc-1 {
    width: 50px;
    height: 50px;
    margin: -25px;
    animation: orbit1 4s linear infinite;
}

.disc-2 {
    width: 80px;
    height: 80px;
    margin: -40px;
    animation: orbit2 7s linear infinite reverse;
    opacity: 0.8;
}

.disc-3 {
    width: 40px;
    height: 40px;
    margin: -20px;
    animation: orbit3 5s linear infinite 1s;
    opacity: 0.9;
}

@keyframes orbit1 {
    from {
        transform: rotate(0deg) translateX(180px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(180px) rotate(1440deg);
    }
}

@keyframes orbit2 {
    from {
        transform: rotate(0deg) translateX(260px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(260px) rotate(-1440deg);
    }
}

@keyframes orbit3 {
    from {
        transform: rotate(0deg) translateX(320px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(320px) rotate(1440deg);
    }
}

/* Swing Animation */
.dj-swing {
    animation: swingBeat 0.5s ease-in-out infinite alternate;
}

@keyframes swingBeat {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-4px);
    }

    /* 4px up and down */
}

.faq-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 750px;
}

.faq-item {
    background: #fff;
    border: 0.5px solid var(--text-pencil);
    border-radius: 4px;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 7px 7px 0px rgba(0, 0, 0, 0.15);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

/* FAQ Responsive */
@media (max-width: 900px) {
    .faq-content-wrapper {
        flex-direction: column;
        gap: 3rem;
    }

    .faq-mascot-container {
        flex: 0 0 auto;
        width: 100%;
        max-width: 300px;
        order: -1;
    }

    .faq-container {
        width: 100%;
        max-width: 100%;
    }
}

.faq-question span:first-child {
    font-family: var(--font-sketch);
    font-size: 20px;
    color: var(--text-pencil);
    font-weight: 500;
}

.faq-icon {
    font-family: var(--font-ui);
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fafafa;
}

.faq-answer p {
    display: block;
    padding: 0 1rem;
    margin-bottom: 1rem;
    font-family: var(--font-ui);
    color: #1A1A18;
    line-height: 1.6;
}

.faq-answer p:first-child {
    padding-top: 1rem;
}

.faq-answer p:last-child {
    padding-bottom: 1.5rem;
    margin-bottom: 0;
}

/* Active State */
.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-item.active .faq-answer {
    /* Max-height will be handled by JS */
    border-top: 1px solid #eee;
}

/* Gallery Section */
.gallery-section {
    padding: 0 0 50px;
    overflow: hidden;
    background: transparent;
}

.gallery-section .section-title {
    text-align: center;
    margin-bottom: 16px;
}

.articles-static .section-title {
    margin-bottom: 1rem;
}

/* 3D Container */
.gallery-track-container {
    width: 100%;
    overflow: hidden;
    padding: 60px 0;
    /* Increased padding for 3D vertical space */
    perspective: 1000px;
    /* Essential for 3D depth */
    position: relative;
    /* Ensure it creates a stacking context */
    z-index: 10;
    /* Bring above background elements */
    pointer-events: auto;
    /* Ensure it captures events */
}

.gallery-track-container.simple-marquee,
.gallery-track-container {
    perspective: none;
    padding: 30px 0;
}


/* 3D Track */
.gallery-track {
    display: flex;
    gap: 3rem;
    /* Reduced from 5rem */
    width: max-content;
    /* Animation removed for JS control */
    transform-style: preserve-3d;
    /* Keep children 3D */
    will-change: transform;
    /* Performance hint */
}

/* 3D Items */
.gallery-item {
    width: 250px;
    /* Reduced from 300px */
    height: 250px;
    /* Reduced from 300px */
    flex-shrink: 0;
    /* Move layout props to inner/front if needed, but keeping container size here is good */
    perspective: 1000px;
    /* Individual card perspective */
    background: transparent;
    /* Inner has background */
    border: none;
    /* Border moves to faces */
    box-shadow: none;
    /* Shadow moves to faces */
    /* Remove old visual styles from container */
    /* transition removed to avoid fighting with JS loop */
    transform-style: preserve-3d;
    will-change: transform;
    pointer-events: auto;
    /* Explicitly enable interactions */
}

.gallery-item-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Flip on hover REMOVED as requested */
/* Flip on hover REMOVED & replaced with z-index logic below */

.gallery-item:hover {
    z-index: 10000 !important;
    /* Bring to front for click */
}

/* Front and Back Faces */
.gallery-item-front,
.gallery-item-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: white;
    border: 0.5px solid #000000;
}

/* Back styling - Hidden/Disabled */
.gallery-item-back {
    display: none;
    /* Completely hide back face */
    /* transform: rotateY(180deg); */
    background-color: #f8f8f8;
    padding: 1rem;
    color: var(--text-dark);
}

.gallery-item-back h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.gallery-item-back p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.gallery-item:hover {
    /* Ensure hovered item is always on top for interaction */
    z-index: 10000 !important;
    cursor: pointer;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* Prevent image dragging issues */
}

/* =========================================
   Footer Section
   ========================================= */

.footer-section {
    padding: 50px 5% 50px;
    background: #1E1C1B;
    position: relative;
    overflow: hidden;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4rem;
    /* max-width: 1200px; removed */
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Brand Side */
.footer-brand {
    flex: 1;
    min-width: 300px;
}

.footer-heading {
    font-family: var(--font-ui);
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: #ffffff;
    white-space: nowrap;
    /* Prevent wrapping for typing effect */
}

.cursive-highlight {
    font-family: var(--font-sketch);
    font-weight: 400;
    font-style: italic;
    /* Imitate handwriting slant */
    /* border-bottom removed */
    position: relative;
    display: inline;
}

.cursive-highlight::after {
    content: '|';
    position: absolute;
    right: -10px;
    color: #ffffff;
    animation: blink 0.7s infinite;
    opacity: 0;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.footer-quote {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 500px;
}

.footer-socials {
    display: flex;
    gap: 1.5rem;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    color: #ffffff;
    transition: transform 0.2s var(--ease-sketch), box-shadow 0.2s var(--ease-sketch), border-color 0.2s ease;
}

.social-icon svg {
    width: 20px;
    height: 20px;
}

.social-icon:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
}

/* Links Side */
.footer-right-side {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer-links-container {
    display: flex;
    gap: 1.5rem;
    width: 420px;
}



.footer-column {
    flex: 0 0 124px;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 1rem;
}

.footer-column ul li a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-ui);
    font-size: 1rem;
    position: relative;
    transition: color 0.2s ease;
}

.footer-column ul li a:hover {
    color: #ffffff;
}

.footer-column ul li a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1.2px;
    background: rgba(255, 255, 255, 0.4);
    transition: width 0.3s var(--ease-sketch);
}

.footer-column ul li a:hover::after {
    width: 100%;
}

/* Bottom Bar */
.footer-bottom {
    margin: 4rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
}

.copyright {
    font-family: var(--font-ui);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.9rem;
}



/* Watermark */


/* Responsive Footer */
@media (max-width: 900px) {
    .footer-section {
        padding: 4rem 5% 2rem;
    }

    .footer-content {
        flex-direction: column;
        gap: 3rem;
    }

    .footer-brand {
        min-width: 0;
        width: 100%;
    }

    .footer-heading {
        font-size: 2rem;
        white-space: normal;
    }

    .footer-quote {
        max-width: 100%;
    }

    .footer-socials {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .footer-right-side {
        width: 100%;
    }

    .footer-links-container {
        gap: 1rem;
        justify-content: flex-start;
        width: 100%;
        flex-wrap: nowrap;
    }

    .footer-column {
        flex: 1;
        min-width: 0;
    }

    .footer-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .footer-section {
        padding: 3rem 5% 2rem;
    }

    .footer-heading {
        font-size: 1.75rem;
    }

    .footer-quote {
        font-size: 1rem;
    }

    .social-icon {
        width: 44px;
        height: 44px;
    }

    .footer-links-container {
        gap: 1rem;
    }
}


/* About Section Override */
.about-text .section-title {
    text-align: left;
}



/* Mobile Overlay Styles */
/* Mobile Overlay Logic Removed */



.mobile-mascot-wrapper {
    position: relative;
    display: inline-block;
    width: fit-content;
}

/* Full Screen Button */
.btn-fullscreen {
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: 2rem;
    position: relative;
    color: var(--text-pencil);
    transition: transform 0.2s var(--ease-sketch);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-fullscreen:hover {
    transform: scale(1.1);
}

.btn-fullscreen .material-symbols-sharp {
    font-size: 2rem;
}

/* Tooltip */
.btn-fullscreen .tooltip {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: white;
    padding: 0.5rem 1rem;
    border: 1px solid var(--text-pencil);
    border-radius: 4px;
    font-family: var(--font-sketch);
    font-size: 1rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
    z-index: 200;
}

.btn-fullscreen:hover .tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Terms Modal */
#book-modal {
    overflow: hidden !important;
}

.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    /* Hide Scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.modal::-webkit-scrollbar {
    display: none !important;
}


.modal-content {
    margin: 5% auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 800px;
    position: relative;
    animation: zoomIn 0.3s ease;
    padding-bottom: 50px;
}

.modal-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: block;
}

.close-modal {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    line-height: 1;
    z-index: 2001;
}

.close-modal:hover {
    color: var(--text-pencil);
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

/* LOADER STYLES */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-paper);
    background-image: url('assets/paper-texture.webp');
    background-repeat: repeat;
    background-blend-mode: multiply;
    z-index: 10000;
    /* Topmost */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-content {
    position: relative;
    width: 100%;
    height: 100%;
}

#loader-text {
    position: absolute;
    top: 50px;
    right: 5%;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 10.5rem;
    color: #07311E;
    line-height: 1;
    opacity: 0.3;
}

/* Loading Bar at Bottom */
.loader-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    /* Thin line */
    background: transparent;
    z-index: 10;
}

#loader-progress {
    height: 100%;
    width: 0%;
    background-color: #07311E;
    transition: width 0.1s linear;
    position: relative;
    /* Context for mascot */
}

#loader-mascot {
    position: absolute;
    right: 0;
    bottom: 40px;
    height: 360px;
    width: auto;
    transform: translateX(50%);
}

/* My Library Section */
.library-section {
    padding: 50px 0 24px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.library-marquee-container {
    width: 100%;
    margin-top: 2rem;
    overflow: hidden;
    padding: 2rem 0;
    /* Space for hover scale */
    position: relative;
}

.library-track {
    display: flex;
    gap: 3rem;
    /* Space between books */
    width: max-content;
    animation: scrollLibrary 40s linear infinite;
    padding-left: 3rem;
}

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

.library-book {
    flex-shrink: 0;
    width: auto;
    cursor: pointer;
    transition: transform 0.3s var(--ease-sketch), box-shadow 0.3s var(--ease-sketch);
    position: relative;
}

.book-cover {
    width: auto;
    height: 360px;
    border-radius: 4px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.06);
    /* Very soft shadow */
    transition: transform 0.3s var(--ease-sketch);
    display: block;
    border: 1.2px solid #C2B8A5;
}

.library-book:hover .book-cover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 6px 10px 16px rgba(0, 0, 0, 0.08);
}

@keyframes scrollLibrary {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Book Modal Content */
.book-modal-content {
    max-width: 1000px;
    width: 90%;
    min-height: 600px;
    max-height: 85vh;
    flex-direction: row;
    position: relative;
    padding: 0;
    overflow: hidden;
    /* Prevent clipping on the container */
    border-radius: 20px;
    background: #fff;
    text-align: left;
    display: flex;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.05);
    animation: zoomIn 0.3s var(--ease-sketch);
    /* Total Scrollbar Removal */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.book-modal-content::-webkit-scrollbar {
    display: none !important;
}



.book-details {
    display: flex;
    width: 100%;
    height: 100%;
}

.modal-book-cover {
    width: 35%;
    height: 100%;
    object-fit: cover;
    border-right: 1px solid var(--color-neutral);
}

.book-info {
    padding: 3rem;
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    /* Allow internal scrolling if content overflows but hide bar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.book-info::-webkit-scrollbar {
    display: none !important;
}



/* Header with Counter and Nav */
.book-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    width: 100%;
}

.modal-counter {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: #1A1A18;
    background: #f0f0f0;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    font-weight: 500;
    margin: 0;
}

.modal-nav-controls {
    display: flex;
    gap: 10px;
}

.nav-mini-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-heading);
    padding: 0 5px;
    transition: transform 0.2s ease;
    line-height: 1;
}

.nav-mini-btn:hover {
    transform: scale(1.2);
    color: var(--color-primary);
}

#modal-book-title {
    font-family: var(--font-sketch);
    font-size: 2.2rem;
    /* Kept large title */
    color: var(--text-heading);
    line-height: 1.1;
    margin: 0 0 0.2rem 0;
    display: block;
    width: 100%;
}

#modal-book-author {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    color: #1A1A18;
    margin-bottom: 0.5rem;
    font-style: italic;
}

.book-rating {
    color: #FBC02D;
    /* Darker Yellow (Amber 700) */
    font-size: 1.2rem;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.book-learning-section {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 16px;
    margin-top: 1.5rem;
    /* Added space above the box */
    margin-bottom: 0;
}

.book-learning-section h5 {
    margin: 0 0 1rem 0;
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--text-heading);
    font-size: 1rem;
}

#modal-book-learning {
    margin: 0;
    padding-left: 1.2rem;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    color: var(--text-pencil);
    line-height: 1.6;
}

#modal-book-desc {
    display: none;
}

@media (max-width: 768px) {
    .modal {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .modal-nav {
        /* Keep them below content on mobile as row */
        position: static;
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        /* But wait, modal is flex column */
        /* So Order: Prev, Content, Next ? No */
        /* I want Content then Buttons row? */
        /* Easier to keep absolute for mobile or just use order */
    }

    /* Using Order to put buttons below */
    .prev-modal {
        order: 2;
        margin-right: 10px;
    }

    .next-modal {
        order: 3;
        margin-left: 10px;
    }

    .book-modal-content {
        order: 1;
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%;
    }

    /* Actually, user wants buttons "near". Let's try side-by-side below */
    .modal {
        flex-direction: column;
    }

    .modal-nav {
        position: absolute;
        bottom: 10vh;
    }

    .prev-modal {
        left: 20%;
        right: auto;
        margin: 0;
    }

    .next-modal {
        right: 20%;
        left: auto;
        margin: 0;
    }

    .book-modal-content {
        flex-direction: column;
        min-height: 80vh;
        max-height: 85vh;
        width: 92%;
        margin-bottom: 20px;
        overflow-y: auto;
    }

    .modal-book-cover {
        width: 100%;
        height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--color-neutral);
    }

    .book-info {
        width: 100%;
        padding: 1.5rem;
    }
}

/* Articles Marquee Overrides */
#articles.gallery-section {
    padding: 24px 0;
    /* User requested 24px top and bottom */
    background: #E1DACD;
}

.articles-marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 0 0 30px 0;
    /* Reduced top padding as heading/subtitle handle it */
}

.articles-track {
    display: inline-flex;
    gap: 2rem;
    will-change: transform;
    animation: marquee 90s linear infinite;
    align-items: flex-start;
}

.articles-marquee-container:hover .articles-track {
    animation-play-state: paused;
}

.article-card {
    flex-shrink: 0;
    width: 360px;
    /* Updated width as per user request */
    height: auto;
    border-radius: 20px;
    background: transparent;
    white-space: normal;
    /* Reset white-space for inside card */
}

/* Inherits .gallery-item styling but we override the border */
.article-card .gallery-item-inner {
    /* 0.5px black stroke as requested */
    border: 0.5px solid #000000;
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.1);
    /* Keep shadow but remove the 2px box-shadow stroke */
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s var(--ease-sketch);
}

.article-card:hover .gallery-item-inner {
    box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 0.1);
}

.article-card .gallery-image-container {
    position: relative;
    width: 100%;
    height: auto;
    /* Allow natural height */
}

.article-card .gallery-image {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.article-card .gallery-image.hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.article-card:hover .gallery-image.default {
    opacity: 0;
}

.article-card:hover .gallery-image.hover {
    opacity: 1;
}

/* Responsive Overrides (if needed) */
@media (max-width: 900px) {

    /* For mobile, if you want a grid instead of a marquee, you can reset it here. 
       If you want to keep the marquee on mobile, just adjust the width. */
    .article-card {
        width: 280px;
    }
}

/* Image Styling within Card */
.article-card .gallery-image {
    width: 100%;
    height: auto;
    /* Natural height */
    object-fit: contain;
    /* Ensure full image is visible */
    display: block;
    transition: opacity 0.3s ease, transform 0.5s ease;
}

.article-card .gallery-image.default {
    position: relative;
    /* Takes up space */
    z-index: 1;
}

.article-card .gallery-image.hover {
    position: absolute;
    /* Overlays */
    top: 0;
    left: 0;
    height: 100%;
    /* Matches container */
    width: 100%;
    opacity: 0;
    /* Hidden by default */
    z-index: 2;
    object-fit: cover;
    /* Cover the same area */
}

/* Enlarge image on (zoom effect) - Subtle */
.article-card .gallery-item-inner:hover .gallery-image {
    transform: scale(1.03);
}

.article-card .gallery-item-inner:hover .gallery-image.hover {
    opacity: 1;
    /* Show on hover */
}

/* Testimonial Spacing Override */
.testimonials-section .section-title {
    margin-bottom: 48px;
}

/* Waving Mascot (Swapped to FAQ) */
.waving-mascot-wrapper:hover .mascot-default {
    opacity: 0;
}

.waving-mascot-wrapper:hover .mascot-hover {
    opacity: 1 !important;
}

/* Journey Marquee Section */
.journey-marquee {
    padding: 24px 0;
    overflow: hidden;
    background: #E1DACD;
}

.journey-track-container {
    width: 100%;
    overflow: hidden;
}

.journey-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    /* Animation removed for JS control */
    padding-top: 0;
    /* Space for hover scale up */
    padding-bottom: 0;
    /* Space for shadow */
}

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

.marquee-journey-item {
    flex-shrink: 0;
}

.marquee-journey-item img {
    height: 400px;
    width: auto;
    border-radius: 12px;
    /* Shadow removed for flat look */
    border: 1.2px solid var(--text-pencil);
    transition: transform 0.3s ease;
}

.marquee-journey-item:hover img {
    /* Removed transform: scale(1.02) to prevent clipping with 0 padding */
    transform: none;
}

@media (max-width: 768px) {
    .marquee-journey-item img {
        height: 400px;
        /* Scaled by 1.5x (250 * 1.5) */
    }
}

/* --- Work Experience Section --- */
.experience-section {
    padding: 80px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.center-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 3rem;
}



/* GALLERY OF LOVE SECTION */
.gallery-love-section {
    padding: 60px 0;
    overflow: hidden;
    background: #E1DACD;
}

.gallery-love-section .center-title {
    margin-bottom: 16px;
}

.love-track {
    display: inline-flex;
    /* animation: marquee 15s linear infinite; REMOVED for JS Drag */
    gap: 30px;
    will-change: transform;
}

.love-marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 20px 0;
    cursor: grab;
}

.love-marquee-container:active {
    cursor: grabbing;
}

.love-item {
    flex-shrink: 0;
    width: 360px;
    height: 360px;
    border: 1.2px solid #1A1A18;
    /* 1px stroke */
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.love-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- MOBILE RESPONSIVENESS OVERHAUL --- */
@media (max-width: 768px) {

    /* General Layout */
    body {
        font-size: 16px;
        overflow-x: hidden;
    }

    main {
        padding-top: 0 !important;
    }

    /* Header */
    .main-header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    .nav-links {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-item {
        font-size: 1rem;
    }

    /* Hero Section */
    .hero-section {
        flex-direction: column-reverse;
        /* Mascot top, text bottom usually, or standard column */
        text-align: center;
        padding: 0 16px 24px !important;
        /* 0 top padding, 16px left/right, 1rem bottom */
        height: auto;
        min-height: auto;
        gap: 16px;
        /* Fixed spacing between containers */
    }

    .hero-text-side {
        width: 100%;
        max-width: 100%;
        /* Override desktop 50% limit */
        padding: 0;
        /* Margin removed as requested */
        box-sizing: border-box;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        /* Spacing reduced to 0 to test min limit */
        padding-top: 8px;
        /* Use padding instead for spacing */
        height: auto;
        /* Ensure responsive height */
    }

    .hero-title {
        text-align: center;
        width: 100%;
        max-width: 100%;
        font-size: 32px !important;
        text-shadow: none !important;
        white-space: normal;
        margin-bottom: 12px !important;
        padding: 0 20px;
        /* Force wrapping by adding padding on sides */
    }

    .hero-subtitle {
        text-align: center;
        width: 100%;
        max-width: 100%;
        font-size: 14px !important;
        text-shadow: none !important;
        white-space: normal;
        margin-bottom: 12px !important;
    }

    .section-subtitle {
        white-space: normal !important;
        text-align: center;
        width: 100%;
        max-width: 100%;
        font-size: 14px !important;
        margin-bottom: 32px !important;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 100%;
        font-size: 14px !important;
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }

    /* Resize Resume Button */
    .btn-sketch,
    .btn-filled {
        padding: 0.5rem 1rem;
        font-size: 18px !important;
    }

    .btn-sketch svg,
    .btn-filled svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* --- Hero Skill Tags Mobile --- */
    .tag-group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
        pointer-events: none;
        /* Let clicks pass through to mascot if needed */
        margin: 0;
    }

    .left-tags,
    .right-tags {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        flex-direction: column;
        gap: 1rem;
    }

    .left-tags {
        left: -4px;
        /* Moved 12px more left (8 - 12) */
        align-items: flex-start;
    }

    .right-tags {
        right: -4px;
        /* Moved 12px more right (8 - 12) */
        align-items: flex-end;
    }

    /* Scope strictly to Hero Tags to avoid shrinking Startup tags */
    .tag-group .skill-tag {
        /* transform: none !important; - Removed to allow animation */
        font-size: 10px !important;
        /* Adjusted to 20px */
        border-width: 1px;
        padding: 0.4rem 0.8rem;
        /* Adjusted padding */
        margin: 6px;
        /* Increased vertical spacing by +4px total (was 4px) */
        animation: mobile-wave 3s ease-in-out infinite;
        /* Slower duration for hinge effect */
    }

    @keyframes mobile-wave {

        0%,
        100% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(3deg);
        }
    }

    /* Left Tags - Hinged Right */
    .left-tags .skill-tag {
        transform-origin: right center;
    }

    .left-tags .tag-startup {
        order: 1;
        animation-delay: 0s;
    }

    .left-tags .tag-wireframe {
        order: 2;
        animation-delay: 0.5s;
    }

    .left-tags .tag-intern {
        order: 3;
        animation-delay: 1s;
    }

    /* Right Tags - Hinged Left */
    .right-tags .skill-tag {
        transform-origin: left center;
        animation-direction: reverse;
        /* Opposite phase */
    }

    .right-tags .tag-proto {
        order: 1;
        animation-delay: 0.2s;
    }

    .right-tags .tag-hackathon {
        order: 2;
        animation-delay: 0.7s;
    }

    .right-tags .tag-opensource {
        order: 3;
        animation-delay: 1.2s;
    }

    .right-tags .tag-proto {
        order: 1;
    }

    .right-tags .tag-hackathon {
        order: 2;
    }

    .right-tags .tag-opensource {
        order: 3;
    }

    .left-tags .tag-startup {
        order: 1;
    }

    .left-tags .tag-wireframe {
        order: 2;
    }

    .left-tags .tag-intern {
        order: 3;
    }

    /* --- Card Typography Mobile --- */
    /* Generic Project Cards */
    .projects-section {
        padding: 24px 16px !important;
        /* Fixed 16px side padding */
    }

    .highlight-project-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .project-card {
        margin-bottom: 0 !important;
        /* Remove 32px spacing */
    }

    .project-card h3 {
        font-size: 24px !important;
    }

    .card-info {
        padding: 24px 16px !important;
        /* Default was 1.5rem (24px). User wants 16px sides. */
    }

    .project-card p {
        font-size: 16px !important;
    }

    .project-card .project-tag {
        font-size: 12px !important;
    }

    .project-card .metric-label {
        font-size: 14px !important;
        /* Match stat-label */
    }

    .project-card .metric-value {
        font-size: 18px !important;
        /* Match stat-number */
        font-weight: bold !important;
    }

    .project-card .case-study-link {
        font-size: 16px !important;
    }

    /* Specific Startup/Highlight Card Overrides */
    .highlight-tags .skill-tag {
        font-size: 12px !important;
    }

    .highlight-title {
        font-size: 24px !important;
        line-height: 1.2;
        font-weight: 500 !important;
        /* Adjusted to 500 for a lighter feel */
        letter-spacing: 0.01em !important;
        /* 1% letter spacing */
    }

    .highlight-description {
        font-size: 16px !important;
        width: 100% !important;
        /* Force full width */
        max-width: none !important;
        /* Remove any desktop limits */
    }

    .highlight-eyebrow {
        font-size: 14px !important;
    }

    .metric-item {
        display: flex;
        flex-direction: column;
        flex: 1 1 calc(50% - 12px);
        margin-bottom: 12px;
        text-align: left;
    }

    .metric-item:nth-child(3) {
        flex: 1 1 100%;
    }

    .project-metrics {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin-bottom: 0 !important;
        /* Removed bottom margin */
        justify-content: flex-start !important;
    }

    .metric-value {
        font-size: 1.25rem !important;
    }

    .metric-label {
        font-size: 14px !important;
        white-space: normal !important;
        /* Allow wrapping so they fit in 2 columns */
        word-wrap: break-word;
    }

    .stat-number {
        font-size: 18px !important;
        /* Numbers 18px */
        white-space: normal !important;
        word-wrap: break-word;
    }

    .stat-label {
        font-size: 14px !important;
        /* Labels 14px */
        white-space: normal !important;
        /* Allow wrapping */
        word-wrap: break-word;
    }

    /* Mobile Only Case Study Button */
    .mobile-case-study-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background-color: #327F86 !important;
        /* Primary Teal */
        color: #fcfbf4 !important;
        padding: 10px 20px;
        border-radius: 6px;
        text-decoration: none;
        font-family: var(--font-ui);
        font-size: 14px;
        /* Updated to 14px */
        font-weight: 600;
        margin-top: 16px;
        width: 100%;
        /* Full width */
        box-sizing: border-box;
        transition: background-color 0.3s ease;
    }

    .mobile-case-study-btn:active {
        background-color: #266268 !important;
    }

    .mobile-case-study-btn svg {
        stroke: #fcfbf4;
    }

    .highlight-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 16px 0 24px !important;
        /* Bottom margin 24px */
        justify-content: flex-start !important;
        /* Left align tags */
        width: 100%;
    }

    .highlight-tags .skill-tag {
        font-size: 12px !important;
        padding: 4.8px 12.8px !important;
        /* 4.8px top/bottom, 12.8px sides */
        white-space: nowrap;
        background: #ffffff !important;
        /* White bg as requested */
        border-color: #1A1A18 !important;
        transform: none !important;
        /* Stop any floating/movement */
        animation: none !important;
        /* Stop any animation */
        box-shadow: none !important;
        /* Remove shadow to look flat */
    }

    /* Reorder tags to push B2C to the second line with Pre-seed Funded */
    .highlight-tags .skill-tag:nth-child(1) {
        order: 1;
    }

    .highlight-tags .skill-tag:nth-child(2) {
        order: 3;
    }

    .highlight-tags .skill-tag:nth-child(3) {
        order: 2;
    }

    .highlight-tags .skill-tag:nth-child(4) {
        order: 4;
    }

    /* Stats Layout - 2 on top row, 1 on bottom row */
    .highlight-stats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin-top: 1rem;
        margin-bottom: 0 !important;
        /* Removed bottom margin */
        width: 100%;
        justify-content: flex-start !important;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
        flex: 1 1 calc(50% - 12px);
        margin-bottom: 12px;
        text-align: left;
    }

    .stat-item:nth-child(3) {
        flex: 1 1 100%;
    }

    /* Fix Highlight Text Width - Full Width Background */
    .highlight-text {
        width: 100%;
        padding: 0 16px 24px 16px !important;
        /* Top 0, sides 16px, bottom 24px */
        box-sizing: border-box;
        text-align: left !important;
        display: block !important;
    }

    .highlight-title {
        line-height: 1.1 !important;
        margin-bottom: 8px !important;
        text-align: left !important;
    }

    .highlight-description {
        font-size: 16px !important;
        line-height: 1.4 !important;
        text-align: left !important;
        margin-bottom: 24px !important;
    }

    /* Override Container Padding to allow child background to touch edges */
    /* Override Container Padding to allow child background to touch edges */
    .highlight-container {
        padding: 0 !important;
        /* Remove container padding so text div is full width */
        overflow: hidden;
        /* Ensure rounded corners if any are maintained */

        display: flex !important;
        flex-direction: column !important;
        /* Image (first child) goes to top, text (second child) goes to bottom */
        gap: 0 !important;
        /* Force zero gap */
    }

    /* Startup Image Styling Mobile */
    .highlight-media,
    .highlight-phone-mockup {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: block !important;
        object-fit: contain;
    }

    .highlight-media {
        background: #ffffff;
        /* Use the green/beige background color from desktop for the image area */
        padding: 16px 16px 24px 16px !important;
        /* Add 16px top padding as requested */
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    /* Ensure Startup Button matches */
    .highlight-project-section .btn-sketch {
        font-size: 16px !important;
    }

    .highlight-project-section .btn-highlight {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
    }

    .highlight-project-section .btn-border {
        display: none !important;
    }

    /* If hero uses grid or flex, adjust here. Assuming flex based on typical setups */
    /* Adjusting based on inferred structure */

    /* Marquees */
    .journey-marquee,
    .gallery-love-section {
        padding: 0 0 24px 0 !important;
    }

    .gallery-love-section .section-title {
        margin-bottom: 16px !important;
    }

    .marquee-journey-item img {
        height: 280px;
        /* Adjusted height */
    }

    .love-item {
        width: 320px;
        height: 320px;
    }

    /* Projects Section */
    .projects-container {
        grid-template-columns: 1fr;
        /* Stack projects */
        padding: 0 1rem;
    }

    .project-card {
        margin-bottom: 2rem;
    }


    /* Library Section */
    .library-track {
        flex-wrap: wrap;
        justify-content: center;
    }

    .library-book {
        width: 45%;
        /* 2 per row */
        margin-bottom: 1rem;
    }

    /* About Section */
    .about-sketch {
        flex-direction: column;
        text-align: center;
    }

    .about-text {
        width: 100%;
        padding: 1rem;
        text-align: center;
    }

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

    /* FAQ Section */
    .faq-content-wrapper {
        flex-direction: column;
    }

    .faq-mascot-container {
        width: 150px;
        height: 150px;
        margin: 0 auto 2rem;
    }

    /* Footer */
    .main-footer {
        padding: 2rem 1rem;
        text-align: center;
    }

    .footer-content {
        flex-direction: column;
        gap: 2rem;
    }
}

@media (max-width: 480px) {

    /* Smaller Mobile adjustments */
    .logo-sketch {
        font-size: 24px;
    }

    .love-item {
        width: 320px;
        height: 320px;
    }

    .library-book {
        width: 100%;
        /* 1 per row on very small screens */
    }

    .section-title {
        font-size: 2rem;
    }

    .btn-filled,
    .btn-sketch,
    .btn-outline {
        font-size: 18px !important;
    }

    .btn-filled svg,
    .btn-sketch svg,
    .btn-outline svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* --- Hamburger Menu & Drawer --- */
.hamburger-menu {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
    color: var(--text-pencil);
    padding: 0;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    /* Hidden by default */
    width: 70%;
    max-width: 300px;
    height: 100vh;
    background-color: #EDE7D7;
    /* Updated cream background */
    border-left: 0.5px solid #adadad;
    /* 1px black stroke */
    z-index: 2000;
    padding: 60px 28px;
    /* Increased side padding by 8px (20px -> 28px) */
    transition: right 0.4s ease-in-out;
    /* Changed from var(--ease-sketch) to ease-in-out */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mobile-drawer.active {
    right: 0;
    /* Slide in */
}

.close-drawer {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-pencil);
}

.mobile-nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.mobile-nav-item {
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--text-pencil);
    font-weight: 500;
    /* Medium weight */
    display: block;
    width: 100%;
}

.mobile-drawer-resume-btn {
    margin-top: 24px;
    /* Spacing from nav items */
    padding: 12px 24px;
    background-color: #1A1A18;
    /* Black background */
    color: #FFFFFF;
    /* White text */
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
    display: block;
    width: 100%;
    /* Full width */
    transition: background-color 0.3s ease;
}

.mobile-drawer-resume-btn:hover {
    background-color: #1a1a1a;
    /* Darker on hover */
}

@media (max-width: 768px) {
    .hamburger-menu {
        display: flex;
    }

    .nav-links {
        display: none !important;
        /* Hide desktop nav */
    }

    .main-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 16px 16px;
        /* 8px top/bottom, 16px left/right */
    }

    /* Remove Custom Cursor on Mobile */
    #cursor {
        display: none !important;
    }

    /* Reset Body Cursor */
    * {
        cursor: auto !important;
    }
}

/* Ensure no hover effects on touch */
@media (hover: none) {
    #cursor {
        display: none !important;
    }

    * {
        cursor: auto !important;
    }
}

/* Mobile Article Marquee Animation & Fixes */
.mobile-only-duplicate {
    display: none;
}

.mobile-about-title {
    display: none;
}

/* Mobile Articles Marquee — native drag scroll, no auto-animation */
@media (max-width: 900px) {
    #articles {
        overflow: visible !important;
        padding: 0 !important;
    }

    #articles .section-title {
        padding-top: 24px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #articles .section-subtitle {
        padding-top: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Container: overflow:hidden — JS drives the track translateX for loop + drag */
    .articles-marquee-container {
        overflow: hidden !important;
        display: block !important;
        width: 100% !important;
        padding: 0 0 24px 0 !important;
        margin: 0 !important;
        animation: none !important;
    }

    .articles-marquee-container::-webkit-scrollbar {
        display: none;
    }

    /* Track: inline-flex row, no CSS animation */
    .articles-track {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        gap: 24px !important;
        align-items: flex-start;
        animation: none !important;
        will-change: auto;
    }

    .gallery-item.article-card {
        flex: 0 0 280px !important;
        width: 280px !important;
        margin-bottom: 0 !important;
    }

    .article-card .gallery-image-container,
    .article-card img {
        height: auto !important;
        width: 100% !important;
        object-fit: contain !important;
        image-rendering: -webkit-optimize-contrast;
    }

    /* No hover / tap visual effects on article cards */
    .article-card:hover .gallery-item-inner,
    .article-card:active .gallery-item-inner {
        box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.1) !important;
        transform: none !important;
    }

    .article-card .gallery-item-inner:hover .gallery-image,
    .article-card .gallery-item-inner:active .gallery-image {
        transform: none !important;
    }

    /* Keep default image visible, hide hover image */
    .article-card:hover .gallery-image.default,
    .article-card:active .gallery-image.default {
        opacity: 1 !important;
    }

    .article-card:hover .gallery-image.hover,
    .article-card:active .gallery-image.hover {
        opacity: 0 !important;
    }
}

/* Mobile Library Marquee */
@media (max-width: 900px) {
    .library-section {
        padding: 50px 0;
        overflow: hidden;
    }

    .library-section .section-title {
        margin-bottom: 8px !important;
        padding-top: 48px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .library-section .section-subtitle {
        margin-bottom: 32px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .library-marquee-container {
        display: flex !important;
        overflow-x: auto !important;
        padding-bottom: 24px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-left: 5%;
        padding-right: 5%;
        width: 100%;
    }

    .library-marquee-container::-webkit-scrollbar {
        display: none;
    }

    .library-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 24px !important;
        align-items: center;
        width: max-content !important;
    }

    .library-book {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .book-cover {
        height: 320px !important;
        width: auto !important;
        display: block;
        border: 1.5px solid var(--text-pencil);
        box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }
}

/* Mobile About Redesign */
@media (max-width: 900px) {
    .mobile-about-title {
        display: block;
        text-align: center;
        margin-bottom: 0px !important;
        /* Matches section-title style but centered */
    }

    .desktop-about-title {
        display: none;
    }

    .about-split {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .about-sketch {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 0px !important;
        /* Removed spacing */
    }

    .mascot-wrapper,
    .about-mascot {
        width: 320px !important;
        /* Increased size */
        height: auto !important;
        max-width: none !important;
        pointer-events: auto !important;
    }

    .about-text {
        text-align: center !important;
        padding: 0 0px !important;
        width: 100% !important;
    }

    .about-text p {
        text-align: center !important;
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 900px) {
    .mockup-desktop {
        display: none !important;
    }

    .waving-mascot-wrapper {
        width: 280px !important;
        pointer-events: none !important;
        max-width: none !important;
        display: block !important;
        margin: 0 auto !important;
        position: relative !important;
        /* Reduced padding/margin for tighter layout */
        padding-bottom: 1rem !important;
        height: auto !important;
    }

    .faq-mascot-container {
        display: block !important;
        height: auto !important;
        margin-bottom: 0px !important;
        width: 100% !important;
        max-width: 320px !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .orbit-container {
        display: none !important;
    }

    .faq-content-wrapper {
        gap: 0.5rem !important;
    }

    .faq-answer p {
        padding: 0 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .faq-answer p:first-child {
        padding-top: 0.7rem !important;
    }

    .faq-answer p:last-child {
        padding-bottom: 0.7rem !important;
    }

    .faq-question {
        padding: 0.7rem 1rem !important;
    }

    .faq-question span:first-child {
        font-size: 18px !important;
    }

    .faq-header {
        margin-bottom: 8px !important;
    }

    .testimonial-card {
        width: 320px !important;
        height: auto !important;
        padding: 1rem !important;
    }

    .testimonial-text {
        font-size: 16px !important;
    }

    .section-title {
        margin-bottom: 16px !important;
    }

    .footer-heading {
        font-size: 32px !important;
        white-space: normal !important;
    }

    .cursive-highlight {
        display: block !important;
        width: fit-content;
        margin: 0;
    }

    /* Fix Paper Texture Jitter on Mobile */
    .paper-texture {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 120dvh !important;
        /* Oversized to ensure coverage */
        min-height: 100% !important;
        z-index: -1 !important;
        background-attachment: scroll !important;
        pointer-events: none !important;
        /* create context but don't move */
        transform: translateZ(0);
    }

    .footer-quote {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .social-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .footer-socials {
        display: flex !important;
        justify-content: space-between !important;
    }
}

/* Mobile Loader Overrides */
@media (max-width: 900px) {
    #loader-mascot {
        height: 180px !important;
    }

    #loader-text {
        font-size: 5rem !important;
        top: 25px !important;
        right: 5% !important;
    }

    /* Section Title Spacing */
    .section-title {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* Library Marquee Spacing */
    .library-marquee-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .library-section {
        padding: 0px 0 !important;
    }

    .library-section .section-title {
        padding-top: 48px !important;
        margin-bottom: 8px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .library-section .section-subtitle {
        margin-bottom: 32px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Love Marquee Spacing */
    .love-marquee-container {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /* FAQ Section Spacing */
    #faq {
        padding: 40px 16px !important;
    }

    /* Testimonials Section Spacing */
    #testimonials {
        padding: 16px 0 24px 0 !important;
    }

    #testimonials .section-title {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-bottom: 24px !important;
    }


    /* About Section Spacing */
    #about {
        padding: 32px 16px !important;
        /* Fixed 16px side padding */
    }


    /* Enable Horizontal Scroll for Testimonials */
    .testimonials-track-container {
        width: 100% !important;
        overflow: hidden !important;
        /* Hidden for CSS animation smoothness */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding-bottom: 20px;

        /* Hide scrollbar */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .testimonials-track-container::-webkit-scrollbar {
        display: none;
    }



    .testimonials-track {
        display: flex !important;
        width: max-content !important;
        animation: none !important;
        /* Disabled for JS control */
        will-change: transform;
        gap: 16px !important;
        padding: 0 16px !important;
        /* Start/End padding */
    }

    /* Adjust Card Sizing for Scroll */
    .testimonial-card {
        flex: 0 0 85vw !important;
        max-width: 320px !important;
        margin-right: 0 !important;
        /* Gap handles spacing */
        white-space: normal !important;
        /* Ensure text wraps */
        height: auto !important;
        /* Allow height to fit content */
        padding: 1.5rem !important;
    }

    .testimonial-text {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Footer Spacing */
    #footer {
        padding: 24px 16px 32px 16px !important;
    }

    .footer-heading {
        margin-bottom: 16px !important;
    }

    .footer-bottom {
        margin-top: 24px !important;
        padding-top: 24px !important;
    }

    /* Fix clipping by parent */
    .gallery-section {
        overflow: visible !important;
        padding: 0 !important;
    }

    .gallery-section .section-title,
    .gallery-section .section-subtitle {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Articles marquee: no override needed here — handled in 900px block above */
    .article-card {
        transform: none !important;
        perspective: none !important;
    }

    .article-card .gallery-item-inner {
        border: 1px solid #000 !important;
        box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1) !important;
        transform: none !important;
        backface-visibility: visible !important;
    }
}

/* --- FORCE OVERRIDE MOBILE DRAWER STYLES --- */
@media (min-width: 901px) {
    .mobile-drawer {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .mobile-drawer {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        background: #F0EEE7 !important;
        /* Nice paper beige */
        border-bottom: 2px solid #1A1A18 !important;
        /* Only bottom border */
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-radius: 0 0 16px 16px !important;
        /* Rounded bottom corners */
        padding: 48px 24px 48px 24px !important;
        transform: translateY(-150%) !important;
        transition: transform 0.4s ease-in-out !important;
        /* Smooth Ease In Out */
        z-index: 10000 !important;
        box-shadow: 0px 10px 0px rgba(0, 0, 0, 0.15) !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-drawer.active {
        transform: translateY(0) !important;
    }

    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99;
    }

    .mobile-nav-links {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
        /* Reduced from 2rem */
        align-items: center !important;
        width: 100% !important;
        font-size: 18px !important;
        /* Enforced font size */
    }

    .mobile-nav-item {
        font-family: var(--font-sketch) !important;
        font-size: 18px !important;
        color: #1A1A18 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        transition: color 0.2s ease !important;
    }

    .mobile-nav-item:hover {
        color: var(--color-primary) !important;
    }

    .mobile-nav-item.btn-outline {
        color: #327F86 !important;
        border-color: #327F86 !important;
    }

    .mobile-nav-item.btn-outline svg {
        color: #327F86 !important;
    }

    .mobile-nav-item.btn-outline:hover {
        color: #fcfbf4 !important;
        background-color: #327F86 !important;
    }

    .mobile-nav-item.btn-outline:hover svg {
        color: #fcfbf4 !important;
    }

    .close-drawer {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        background: transparent !important;
        border: none !important;
        color: #1A1A18 !important;
        cursor: pointer !important;
        padding: 5px !important;
    }

    /* Resume Button in Drawer */
    .mobile-drawer-resume-btn {
        background: #1A1A18 !important;
        color: white !important;
        font-family: var(--font-sketch) !important;
        padding: 10px 28px !important;
        border-radius: 4px !important;
        font-size: 1.3rem !important;
        text-decoration: none !important;
        display: inline-block !important;
        margin-top: 0rem !important;
        transform: none !important;
        box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2) !important;
        transition: transform 0.2s ease !important;
    }

    .mobile-drawer-resume-btn:active {
        transform: scale(0.95) !important;
    }

    /* Resize Resume Button Icon */
    .btn-sketch .lucide {
        width: 16px !important;
        height: 16px !important;
    }
}

/* --- Mobile Book Modal Bottom Sheet --- */
@media (max-width: 900px) {

    /* 1. Modal Container - Bottom Alignment */
    #book-modal {
        display: none;
        /* Hidden by default, JS toggles flex */
        /* Force flex */
        flex-direction: column !important;
        /* Explicit column */
        justify-content: flex-end !important;
        /* Push to bottom */
        align-items: center !important;
        /* Center horizontally */
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        /* Full screen height */
        z-index: 10000 !important;
        overflow-x: hidden !important;
        /* Force no scroll */
    }

    /* Reset box-sizing for all modal children */
    #book-modal * {
        box-sizing: border-box !important;
    }

    /* 2. Modal Content - Bottom Sheet Styling */
    .book-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        /* Top corners rounded */
        padding: 24px !important;
        height: 80vh !important;
        /* Fixed 80% Viewport Height */
        max-height: 80vh !important;
        overflow: visible !important;
        /* Allow Close Button to sit outside */
        animation: slideUp 0.4s ease-out !important;
        /* Slide up animation */
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        /* Fix horizontal scroll */
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slideDown {
        from {
            transform: translateY(0);
            opacity: 1;
        }

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

    .book-modal-content.closing {
        animation: slideDown 0.4s ease-in forwards !important;
    }

    /* 3. Internal Layout - CSS Grid Magic */
    .book-details {
        display: grid !important;
        /* Columns: Image (120px) | Gap (16px) | Rest (1fr) */
        grid-template-columns: 120px 1fr !important;
        grid-template-rows: min-content min-content min-content min-content auto !important;
        /* Stack compactly */
        gap: 0px 16px !important;
        /* Row Gap 0, Col Gap 16px */
        align-items: start !important;
        overflow-y: auto !important;
        /* Scroll WITHIN details */
        flex: 1 !important;
        /* Take remaining height */
        padding-bottom: 20px !important;
        /* Padding for scroll end */
        width: 100% !important;
        /* Fix width issues */
    }

    /* 4. Flatten the .book-info wrapper to let children participate in Grid */
    .book-info {
        display: contents !important;
    }

    /* 5. Grid Placement & Styling */

    /* Top Row: Nav & Counter (Full Width) */
    .book-top-row {
        grid-column: 1 / -1 !important;
        /* Spans full width */
        grid-row: 1 / 2 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 32px !important;
        /* Increased to 32px */
        width: 100% !important;
    }

    /* Image: Left Column, Shifted down 1 row */
    .modal-book-cover {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 5 !important;
        /* Spans rows 2, 3, 4 */
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 2/3 !important;
        object-fit: cover !important;
        margin-bottom: 0px !important;
        border: 1px solid #ddd !important;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
    }

    .modal-counter {
        background: #f0f0f0 !important;
        border-radius: 12px !important;
        padding: 4px 12px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1A1A18 !important;
        margin: 0 !important;
    }

    .modal-nav-controls {
        gap: 12px !important;
        display: flex !important;
    }

    .nav-mini-btn {
        font-size: 18px !important;
        padding: 4px !important;
        color: #1A1A18 !important;
        /* Black icons */
        background: none !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Wrapped Text Details (Right Column) */
    .book-text-details {
        grid-column: 2 / 3 !important;
        grid-row: 2 / 5 !important;
        /* Spans the same vertical space */
        display: flex !important;
        flex-direction: column !important;
        align-self: start !important;
    }

    .book-text-details>* {
        margin: 0 !important;
        padding-bottom: 8px !important;
        /* Vertical bottom padding as requested */
    }

    /* Rating */
    .book-rating {
        color: #FFC107 !important;
        font-size: 16px !important;
        text-align: left !important;
    }

    /* Title */
    #modal-book-title {
        font-family: var(--font-sketch) !important;
        font-size: 24px !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    /* Author */
    #modal-book-author {
        font-size: 14px !important;
        color: #1A1A18 !important;
        font-style: italic !important;
        text-align: left !important;
    }

    /* Learnings Section - Footer style */
    .book-learning-section {
        grid-column: 1 / -1 !important;
        /* Full Width */
        grid-row: 5 / 6 !important;
        /* Bottom Row */
        background: #f8f9fa !important;
        /* Light gray bg */
        border-radius: 16px !important;
        padding: 20px !important;
        margin-top: 24px !important;
        /* Space from top section */
        text-align: left !important;
    }

    .book-learning-section h5 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        color: #333 !important;
    }

    .book-learning-section ul li {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        line-height: 1.5 !important;
        color: #1A1A18 !important;
    }

    /* Close Button Positioning */
    .close-modal {
        display: flex !important;
        position: absolute !important;
        top: -60px !important;
        /* Floating above */
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10002 !important;

        /* Style as white circle with big X */
        width: 44px !important;
        height: 44px !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 28px !important;
        line-height: 1 !important;
        color: #000000 !important;
        font-weight: 300 !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        opacity: 1 !important;
    }
}

/* Mobile Startup Journey Padding Override */
@media (max-width: 768px) {
    .journey-track {
        padding: 24px 0 !important;
    }

    .section-title {
        padding-bottom: 0 !important;
        margin-bottom: 8px !important;
    }

    .mobile-about-title {
        margin-bottom: 0px !important;
    }

    /* Refine View More Work Button for Mobile as tertiary outline */
    .view-more-cta-section .btn-filled {
        background-color: var(--bg-paper) !important;
        border: 1.5px solid #327F86 !important;
        color: #327F86 !important;
        padding: 8px 16px !important;
        font-size: 15px !important;
        border-radius: 6px !important;
        box-shadow: none !important;
        transform: none !important;
        display: inline-flex !important;
        min-width: auto !important;
    }

    .view-more-cta-section .btn-filled .btn-text {
        font-size: 15px !important;
        font-weight: 500 !important;
    }

    .view-more-cta-section .btn-filled svg {
        display: none !important;
    }

    .view-more-cta-section {
        padding: 24px 16px 32px !important;
    }

    .highlight-project-section {
        padding: 24px 16px !important;
    }

    /* Short Case Study Cards - Reduce description bottom margin */
    #work.projects-section .project-card {
        will-change: transform, opacity;
    }

    #work.projects-section .project-card .card-info p {
        font-size: 16px;
    }
}

/* Performance Optimizations: Rendering Hints */
#featured,
#work,
#faq,
#experience {
    content-visibility: auto;
    contain-intrinsic-size: 1px 1200px;
    /* Better estimation for large cards */
}