:root {
    /* Strokes: light grey 0.5px hairlines everywhere (27 Sep 2026) */
    --line: #D2CDC4;
    --line-strong: #A9A398;
    /* Colors */
    --bg-paper: #FFFCF6;
    /* Lighter paper color */
    --text-pencil: #1A1A18;
    --color-primary: #0068E5;
    --color-highlight: #266268;
    --color-highlight-dark: #1B4A4F;
    --color-accent: #FF4FA3;
    --color-neutral: #E5E7EB;

    /* Fonts */
    --font-sketch: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif; /* like Acorn (Ben Shih) */
    --font-ui: 'Figtree', system-ui, sans-serif; /* like Roobert (Ben Shih) */

    /* 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;
}

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. Grid lines removed 4 Oct 2026; to bring them back, restore:
       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; */
    background-color: #FFFCF6;
}

/* 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;
}

/* Pill cursor: "Read case study" on case study cards, "Read Learnings" on books.
   Darkest teal with a light frosted edge; script.js centres it on the pointer. */
#cursor.view-case-study,
#cursor.read-learnings {
    width: max-content;
    height: 40px;
    padding: 0 16px 0 18px;
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
    /* darkest primary, nearly solid: white text stays at about 8.5:1 contrast over any image */
    background-color: rgba(27, 74, 79, 0.94);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 100px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 8px 24px rgba(26, 26, 24, 0.22);
}

#cursor.view-case-study::after,
#cursor.read-learnings::after {
    font-family: var(--t-body, var(--font-ui));
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #FFFFFF;
    white-space: nowrap;
}

#cursor.view-case-study::after {
    content: attr(data-label);
}

#cursor.read-learnings::after {
    content: "Read Learnings";
}

/* small arrow after the label */
#cursor.view-case-study::before,
#cursor.read-learnings::before {
    content: "";
    order: 2;
    width: 14px;
    height: 14px;
    background: #FFFFFF;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
}



/* 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: 0.5px solid var(--line, #E5E1D8);
    /* 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: var(--color-highlight);
    /* 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: var(--color-highlight-dark);
    /* 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 var(--color-highlight);
    color: var(--color-highlight);
    border-radius: 6px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-outline:hover {
    background-color: var(--color-highlight);
    color: #fcfbf4;
    border-color: var(--color-highlight);
}

.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 var(--line, #E5E1D8);
    /* 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 var(--line, #E5E1D8);
    /* 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.5rem;
    /* 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: 0.5px solid var(--line, #E5E1D8);
    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: 0.5px dashed var(--line, #E5E1D8);
    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 {
    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(--line, #E5E1D8);
    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.5rem;
    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 */
    }
}

/* WOP Section */
.wop-section {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

@media (max-width: 768px) {
    .wop-section {
        padding-top: 0;
    }
}

/* Testimonials Section */
.testimonials-section {
    padding: 24px 0 0;
    /* Removed bottom padding for desktop */
    overflow: hidden;
    position: relative;
    scroll-margin-top: 100px;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .testimonials-section {
        padding-bottom: 80px;
        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: 16px;
    /* 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(--line, #E5E1D8);
    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(--line, #E5E1D8);
}

.author-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0.5px solid var(--line, #E5E1D8);
    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(--line, #E5E1D8);
    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 var(--line, #E5E1D8);
}

/* 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: 0.5px solid var(--line, #E5E1D8);
    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 */
.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
    }
}

/* 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%);
    }
}

@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;
    }


    /* 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;
    }



}

/* 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 var(--line, #E5E1D8);
    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: 0.5px solid var(--line, #E5E1D8);
    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;
}



/* 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: 0.5px solid var(--line, #E5E1D8);
    /* 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 32px !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: var(--color-highlight) !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: var(--color-highlight-dark) !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: var(--line-strong, #CFC9BD) !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: var(--card-shadow) !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: 0.5px solid var(--line, #E5E1D8);
        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 Overrides */
@media (max-width: 900px) {

    /* 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: var(--card-border) !important;
        box-shadow: var(--card-shadow) !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: 0.5px solid var(--line, #E5E1D8) !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: var(--color-highlight) !important;
        border-color: var(--color-highlight) !important;
    }

    .mobile-nav-item.btn-outline svg {
        color: var(--color-highlight) !important;
    }

    .mobile-nav-item.btn-outline:hover {
        color: #fcfbf4 !important;
        background-color: var(--color-highlight) !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 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 var(--color-highlight) !important;
        color: var(--color-highlight) !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 */
}

.cta-container {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

/* Base Desktop Settings */
.mobile-wop {
    display: none !important;
}

.desktop-wop {
    display: inline-block;
}

.hero-wop-link {
    display: inline-block;
}

.hero-wop-img {
    height: 36px;
    width: auto;
    display: block;
}

/* Mobile Settings */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .mobile-wop {
        display: inline-block !important;
        margin-bottom: 16px;
    }

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

    .hero-wop-img {
        height: 26px;
    }
}
/* Visually hidden, still read by screen readers and search engines */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== BOOK MODAL: reading note card ===== */
.bm {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.bm[hidden] {
    display: none;
}

.bm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 24, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: bm-fade-in 0.25s ease both;
}

.bm-panel {
    --bm-tint: var(--bg-paper);
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: min(88vh, 720px);
    background: var(--bg-paper);
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 16px;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.12);
    overflow: hidden;
    text-align: left;
    animation: bm-pop-in 0.4s var(--ease-polish) both;
}

.bm.is-closing .bm-backdrop {
    animation: bm-fade-out 0.22s ease both;
}

.bm.is-closing .bm-panel {
    animation: bm-pop-out 0.22s ease both;
}

.bm-body {
    display: grid;
    grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);
    flex: 1;
    min-height: 0;
}

.bm-cover-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background: color-mix(in srgb, var(--bm-tint) 28%, var(--bg-paper));
    transition: background-color 0.45s var(--ease-polish);
}

.bm-cover {
    width: 100%;
    max-width: 240px;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 3px 8px 8px 3px;
    box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: rotate(-2deg);
}

.bm-info {
    padding: 44px 48px 28px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.bm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 44px 8px 0;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6B6B66;
}

.bm-title {
    margin: 0 0 20px;
    font-family: var(--font-sketch);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-pencil);
}

.bm-highlight {
    margin: 0 0 28px;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--color-highlight);
    font-family: var(--font-sketch);
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--text-pencil);
}

.bm-label {
    margin: 0 0 10px;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B6B66;
}

.bm-learnings {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: bm-note;
}

.bm-learnings li {
    counter-increment: bm-note;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 10px 0;
    border-top: 1px dashed rgba(26, 26, 24, 0.15);
    font-family: var(--font-ui);
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--text-pencil);
}

.bm-learnings li:first-child {
    border-top: none;
    padding-top: 2px;
}

.bm-learnings li::before {
    content: counter(bm-note, decimal-leading-zero);
    font-family: var(--font-sketch);
    font-weight: 700;
    color: var(--color-highlight);
}

/* "Where I applied it": one short line with the project as a link */
.bm-applied-line {
    margin: 24px 0 0;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    line-height: 1.5;
    color: #6B6B66;
}

.bm-applied-line[hidden] {
    display: none;
}

.bm-applied {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--text-pencil);
    text-decoration: underline;
    text-decoration-color: rgba(26, 26, 24, 0.3);
    text-underline-offset: 3px;
}

.bm-applied:hover {
    color: var(--color-highlight);
    text-decoration-color: currentColor;
}

.bm-applied svg {
    flex: none;
    transition: transform 0.2s ease;
}

.bm-applied:hover svg {
    transform: translateX(2px);
}

.bm-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid rgba(26, 26, 24, 0.12);
    background: var(--bg-paper);
}

.bm-arrow,
.bm-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 50%;
    background: var(--bg-paper);
    color: var(--text-pencil);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bm-arrow:hover {
    background: var(--text-pencil);
    color: var(--bg-paper);
}

.bm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

.bm-close:hover {
    transform: rotate(90deg);
}

.bm-shelf {
    display: flex;
    flex: 1;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    /* room for the current cover: lifted 6px plus a 3.5px ring, inside a scroll box that clips */
    padding: 14px 6px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.bm-shelf::-webkit-scrollbar {
    display: none;
}

.bm-shelf-book {
    flex-shrink: 0;
    width: 34px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: none;
    overflow: hidden;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.25s var(--ease-polish), box-shadow 0.2s ease;
}

.bm-shelf-book img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-shelf-book:hover {
    opacity: 0.85;
}

.bm-shelf-book[aria-current="true"] {
    opacity: 1;
    transform: translateY(-6px);
    box-shadow: 0 0 0 2px var(--bg-paper), 0 0 0 3.5px var(--color-highlight);
}

.bm-counter {
    min-width: 44px;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: #6B6B66;
}

.bm button:focus-visible,
.bm a:focus-visible,
.library-book:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 3px;
}

@keyframes bm-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bm-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes bm-pop-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bm-pop-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(12px) scale(0.98); }
}

/* Mobile: bottom sheet */
@media (max-width: 700px) {
    .bm {
        padding: 0;
        align-items: end;
    }

    .bm-panel {
        width: 100%;
        max-height: 92vh;
        border-bottom: none;
        border-radius: 20px 20px 0 0;
        box-shadow: none;
        animation-name: bm-sheet-in;
    }

    .bm.is-closing .bm-panel {
        animation-name: bm-sheet-out;
    }

    .bm-body {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .bm-cover-wrap {
        padding: 28px 0 22px;
    }

    .bm-cover {
        max-width: 132px;
    }

    .bm-info {
        padding: 22px 20px 24px;
        overflow: visible;
    }

    .bm-title {
        font-size: 1.6rem;
    }

    .bm-highlight {
        font-size: 1.2rem;
    }

    .bm-footer {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        gap: 8px;
    }

    .bm-shelf {
        justify-content: flex-start;
    }

    .bm-shelf-book {
        width: 28px;
        height: 42px;
    }

    .bm-counter {
        display: none;
    }

    @keyframes bm-sheet-in {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    @keyframes bm-sheet-out {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .bm-backdrop,
    .bm-panel,
    .bm.is-closing .bm-backdrop,
    .bm.is-closing .bm-panel {
        animation: none;
    }
}

/* =========================================================
   DESIGN SYSTEM PASS
   Tokens, one card style, section rhythm, nav résumé button,
   static journey/articles/testimonials, footer email, cursor.
   ========================================================= */
:root {
    /* Three background tones, alternated section by section */
    --bg-sand: #E1DACD;
    --bg-ink: #1E1C1B;
    --color-accent-ink: #14545E;

    /* One card style everywhere */
    --card-bg: #FFFFFF;
    --card-border: 0.5px solid var(--line, #E5E1D8);
    --card-radius: 4px;
    --card-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 7px 7px 0 rgba(0, 0, 0, 0.15);
}

.text-accent {
    color: var(--color-accent-ink);
}

/* ----- Section rhythm: paper / sand alternating, ink footer -----
   Page order: hero · journey · work · experience · testimonials · faq ·
   articles · about · library · gallery · footer. If sections move,
   update this list so sand and paper keep alternating. */
.journey-marquee,
#experience.experience-section,
#faq.faq-section,
#about.about-section,
.gallery-love-section {
    background: var(--bg-sand);
}

#articles.gallery-section,
#library.library-section,
#testimonials.testimonials-section {
    background: transparent;
}

#experience.experience-section {
    padding-top: 56px;
    padding-bottom: 56px;
}

#about.about-section,
#faq.faq-section {
    padding-top: 56px;
    padding-bottom: 56px;
}

.footer-section {
    background: var(--bg-ink);
}

/* ----- Cards ----- */
.highlight-container,
.project-card,
.article-card .gallery-item-inner,
.love-item,
.faq-item,
.testimonial-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.article-card,
.article-card .gallery-image-container,
.article-card .gallery-image {
    border-radius: var(--card-radius);
}

.highlight-container:hover,
.project-card:hover,
.article-card:hover .gallery-item-inner,
.faq-item:hover,
.testimonial-card:hover {
    box-shadow: var(--card-shadow-hover);
}

/* Whole card is clickable through the title link (keyboard and screen reader friendly) */
.highlight-container,
.project-card {
    position: relative;
}

.card-link {
    color: inherit;
    text-decoration: none;
}

.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card-link:focus-visible {
    outline: none;
}

.highlight-container:has(.card-link:focus-visible),
.project-card:has(.card-link:focus-visible) {
    outline: 2px solid var(--color-highlight);
    outline-offset: 4px;
}

@media (max-width: 768px) {
    /* On phones only the title and the "View case study" button open the project */
    .card-link::after {
        display: none;
    }
}

/* ----- Cursor: native everywhere, custom pill only on cards and books ----- */
#cursor {
    opacity: 0;
    transition: opacity 0.15s ease, width 0.3s, height 0.3s, background-color 0.3s, border-radius 0.3s;
}

#cursor.view-case-study,
#cursor.read-learnings {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .highlight-container,
    .project-card,
    .sw-card,
    .ib-card,
    a.tl-media,
    .csx-more-card,
    .gr-report,
    .gr-tool,
    .ev-report-card,
    .library-book,
    .highlight-container a,
    .project-card a,
    .sw-card a,
    .ib-card a,
    .csx-more-card a,
    .gr-report a,
    .gr-tool a,
    .ev-report-card a {
        cursor: none;
    }
}

@media (hover: none) {
    #cursor {
        display: none;
    }
}

/* ----- Nav: filled résumé button ----- */
.nav-resume {
    display: inline-flex;
    align-items: center;
    padding: 6px 18px;
    border-radius: 6px;
    background: var(--color-highlight);
    color: #FCFBF4;
    font-size: calc(1.2rem + 2px);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.nav-resume:hover {
    background: var(--color-highlight-dark);
}

.mobile-nav-links .mobile-nav-item.nav-resume {
    display: inline-block;
    background: var(--color-highlight);
    color: #FCFBF4 !important;
    margin-top: 8px;
    padding: 10px 28px;
    font-size: inherit;
}

.mobile-nav-item.nav-resume::after {
    display: none;
}

.mobile-nav-links .mobile-nav-item.nav-resume:hover {
    background: var(--color-highlight-dark);
    color: #FCFBF4 !important;
}

/* ----- Journey: captioned screens, scrolled by hand ----- */
.journey-strip {
    display: flex;
    gap: 28px;
    padding: 0 5% 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: 0 5%;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 26, 24, 0.35) transparent;
    cursor: grab;
}

.journey-strip.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.journey-strip:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: -2px;
}

.journey-shot {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
}

.journey-shot img {
    display: block;
    height: 400px;
    width: auto;
    border: 0.5px solid var(--line, #E5E1D8);
    border-radius: 12px;
    -webkit-user-drag: none;
}

.journey-shot figcaption {
    margin-top: 10px;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: #55554F;
}

.journey-shot figcaption strong {
    font-weight: 700;
    color: var(--text-pencil);
}

@media (max-width: 768px) {
    .journey-strip {
        gap: 16px;
        padding: 24px 16px 12px;
        scroll-padding: 0 16px;
    }

    .journey-shot img {
        height: 280px;
    }
}

/* ----- Articles: static grid ----- */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 8px 5% 24px;
}

.articles-grid .article-card,
.articles-grid .gallery-item.article-card {
    flex: none !important;
    width: auto !important;
    height: auto !important;
}

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

@media (max-width: 600px) {
    /* Swipe row on phones, no auto-scroll */
    .articles-grid {
        display: flex;
        gap: 16px;
        padding: 8px 16px 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        scrollbar-width: none;
    }

    .articles-grid::-webkit-scrollbar {
        display: none;
    }

    .articles-grid .article-card,
    .articles-grid .gallery-item.article-card {
        flex: 0 0 72vw !important;
        scroll-snap-align: start;
    }
}

/* ----- Testimonials: static grid ----- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 5% 0;
}

.testimonials-grid .testimonial-card {
    flex: none !important;
    width: auto !important;
    height: auto !important;
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 12px 16px 0;
    }
}

/* ----- Footer: plain email with copy ----- */
.footer-email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.footer-email-link {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: #FCFBF4;
    text-decoration: underline;
    text-decoration-color: rgba(252, 251, 244, 0.35);
    text-underline-offset: 4px;
}

.footer-email-link:hover {
    text-decoration-color: currentColor;
}

.footer-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(252, 251, 244, 0.35);
    border-radius: 999px;
    background: transparent;
    color: #FCFBF4;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer-copy:hover {
    background: rgba(252, 251, 244, 0.08);
}

.footer-copy.is-copied {
    border-color: #9FE1CB;
    color: #9FE1CB;
}

.footer-email-link:focus-visible,
.footer-copy:focus-visible {
    outline: 2px solid #9FE1CB;
    outline-offset: 3px;
}

/* ----- Type scale: 80 hero / 56 section / 40 feature / 24 card ----- */
@media (max-width: 768px) {
    .section-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 2rem;
    }
}

/* ----- Reduced motion: stop the book marquee too ----- */
@media (prefers-reduced-motion: reduce) {
    .library-track {
        animation: none;
    }

    .library-marquee-container {
        overflow-x: auto;
    }
}

/* Side Quests: one wide card (media left, info right) */
.side-quest-card {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .side-quest-card {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        align-items: stretch;
    }

    .side-quest-card .huge-media {
        height: 100%;
        min-height: 400px;
    }
}

/* One stroke rule (27 Sep 2026): if the outer box has a stroke, the boxes and images inside it do not.
   Buttons, chips and the coloured testimonial frames keep theirs. */
.bw-panel .sw-media,
.bw-panel .ot-app,
.bw-panel .ot-app img,
.bw-panel .ab-graph,
.bw-panel .wr-card-img,
.bw-panel.tk-section img,
.bw-panel .hk-card,
.bw-panel .hk-card img,
.bw-panel .book-cover,
.wm-piece img,
.wm-piece .wm-logo,
.af-film,
.tl-panel .tl-media,
.tq-card img,
.gr-card img,
.gr-card div,
.ev-report-card img,
.csx-impact .csx-impact-card,
.csx-more .csx-more-card,
.csx-more-card img,
.csx-toc .csx-toc-cta,
.cs-card-section .cs-summary-full-image {
    border-color: transparent !important;
}

/* Type (27 Sep 2026): Bricolage Grotesque headings with tight tracking, like Acorn on benshih.design */
h1, h2, h3, h4,
.bw-title, .ot-label, .section-title, .tl-title, .hk-result, .asknish-headline {
    letter-spacing: -0.025em;
}

/* Work page, Internship Work (asked 2026-10-04): the Softworker card spans both columns and
   is built like the QuickServe card at the top (.highlight-container), with a video instead
   of the phone mockup. Clinqo and Bitcoin Keeper sit side by side under it. */
.featured-grid > .highlight-container {
    grid-column: 1 / -1;
}

/* Card titles on the Work page are all 24px over 30px, like the project cards
   (QuickServe, Softworker, Clinqo, Bitcoin Keeper, InlineAI); type.css sets highlight titles with !important */
.work-page .highlight-title,
.work-page .highlight-title .card-link {
    font-size: 24px !important;
    line-height: 30px !important;
    letter-spacing: -0.01em !important;
}

.work-page .highlight-title {
    margin-bottom: 8px !important;
}

.sw-highlight .highlight-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 770;
    object-fit: cover;
    border-radius: 8px;
    border: 0.5px solid var(--line, #E5E1D8);
    background: #F4EFE6;
}

/* Softworker and InlineAI cards (asked 4 Oct 2026): the same gap on all four sides of the video.
   The video column stretches to the height of the text column and the video fills it,
   instead of sitting in the middle with empty space above and below. */
@media (min-width: 901px) {
    .sw-highlight {
        align-items: stretch;
        padding: 24px;
        gap: 40px;
    }

    .sw-highlight .highlight-media {
        flex: 1 1 0;
        align-self: stretch;
        height: auto;
    }

    .sw-highlight .highlight-video {
        height: 100%;
        min-height: 320px;
        aspect-ratio: auto;
    }

    .sw-highlight .highlight-text {
        flex: 1 1 0;
        align-self: center;
        padding: 8px 8px 8px 0;
    }
}

/* Work cards (4 Oct 2026): teal marks what matters, everything else stays ink.
   Eyebrow and proof numbers are teal; titles keep their colour on hover; descriptions, labels and tags stay neutral. */
.highlight-container .highlight-eyebrow {
    color: var(--color-highlight, #266268);
}

.highlight-container .stat-number,
.project-card .metric-value {
    color: var(--color-highlight, #266268);
}

/* Home InlineAI card: its numbers stay ink (asked 4 Oct 2026) */
.ib-card .stat-number,
.ib-card .stat-number .counter-value {
    color: var(--text-pencil, #1A1A18);
}


/* Work page opening matches the Growth page (4 Oct 2026): same top spacing, a small teal
   eyebrow, a 64px page title, and key words in teal like Growth's title. */
.work-page #startup {
    padding-top: 48px;
}

.page-eyebrow {
    display: block;
    margin: 0 0 12px;
    text-align: center;
    font-family: var(--t-body, 'Figtree', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-highlight-dark, #1B4A4F);
}

.work-page #startup .page-title {
    font-size: 64px !important;
    line-height: 1.05 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.work-page .section-title em {
    font-style: normal;
    color: var(--color-highlight-dark, #1B4A4F);
}

.work-page .section-subtitle strong {
    font-weight: 600;
    color: var(--color-highlight-dark, #1B4A4F);
}

@media (max-width: 768px) {
    .work-page #startup {
        padding-top: 32px;
    }

    .work-page #startup .page-title {
        font-size: 40px !important;
    }
}

/* Hover cursor pill as real glass (asked 2026-10-04): frosted, see-through white with a light
   sheen and a bright rim, dark teal text and arrow. Was a 94% solid teal pill. */
#cursor.view-case-study,
#cursor.read-learnings {
    background-color: rgba(255, 255, 255, 0.22);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.16) 55%, rgba(255, 255, 255, 0.32) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(255, 255, 255, 0.25),
        0 10px 30px rgba(26, 26, 24, 0.18),
        0 2px 6px rgba(26, 26, 24, 0.08);
}
#cursor.view-case-study::after,
#cursor.read-learnings::after {
    color: #123F44;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
#cursor.view-case-study::before,
#cursor.read-learnings::before { background: #123F44; }

/* Work page card eyebrow (e.g. DESIGNING UNDER CONSTRAINTS): small label like the page eyebrows,
   so the 24px title leads (4 Oct 2026) */
.work-page .highlight-eyebrow {
    display: block;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 8px !important;
}

/* Work page: the title sits close under its kicker (asked 2026-10-05); the generic
   .section-title top padding (24px) made the gap 36px, now it is just the kicker's 12px */
.work-page #startup .page-title { padding-top: 0 !important; }

/* Work page Softworker, InlineAI and QuickServe cards on phones (asked 2026-10-05): the poster that
   script.js paints behind each preview video (shown until the video plays, e.g. if autoplay is
   blocked) now covers only the video's own area, not the 16px padding around it, so it no longer
   shows as a bigger image around the inset video. */
@media (max-width: 900px) {
    .highlight-media {
        background-origin: content-box !important;
        background-clip: content-box !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
}

/* Work page on phones (asked 2026-10-05):
   1. number rows: the first number gets the whole line (its label is usually the longest),
      the other two share the row under it (was 2 on top, 1 below)
   2. small project cards: 16px between the line of text and the View case study button (was 40px) */
@media (max-width: 768px) {
    .highlight-stats .stat-item { flex: 1 1 calc(50% - 12px) !important; }
    .highlight-stats .stat-item:first-child { flex: 1 1 100% !important; }
    .highlight-stats .stat-item:nth-child(3) { flex: 1 1 calc(50% - 12px) !important; }

    #work .project-card .card-info > p { margin-bottom: 0 !important; }
    #work .project-card .mobile-case-study-btn { margin-top: 16px !important; }
}