/* =========================================
   CASE STUDY: TYCHE NAILS (FIGMA EXACT)
   ========================================= */

:root {
    --color-black: #000000;
    --color-soft-pink: #E4B4C0;
    --color-vibrant-pink: #FF7ADE;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Georgia', serif;
    --line-color: #d1d1d1;
    --color-line-grey: #a0a0a0;
}

body.case-study-body {
    background-color: #ffffff;
    color: var(--color-black);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.section-02-exact {
    padding-top: 40px;
}

.exact-intro {
    font-size: 0.95rem;
    color: #333;
    max-width: 950px;
    margin: 0 auto 100px 0; /* Left aligned, heavy bottom margin */
    line-height: 1.6;
}

/* --- LAYOUT GRID --- */
.cs-layout-grid {
    display: grid;
    /* By making both side columns exactly 250px, the 1fr middle is perfectly centered! */
    grid-template-columns: 250px 1fr 250px; 
    left: 0%; 
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
}

/* --- SIDEBARS --- */
.cs-sidebar-left {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 80px 0 0 50px;
    display: flex;
    flex-direction: column;
}

.cs-sidebar-right { 
    position: sticky; 
    top: 90px; 
    height: calc(100vh - 90px); 
    display: flex; 
    align-items: center; 
    /* This pushes the button to the right edge of its new, wider 250px column */
    justify-content: flex-end; 
    /* This balances the 50px left-padding of the Contents sidebar */
    padding-right: 50px; 
}

.cs-sidebar-left, .cs-sidebar-right {
    top: 40px; 
    height: calc(100vh - 90px);
}

.cs-main-content {
    padding: 120px 40px 100px 40px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* --- FIXED BUTTONS --- */
.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    border: 1px solid var(--color-black);
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-black);
    text-decoration: none;
    transition: all 0.3s ease;
    width: max-content;
}

.pill-btn:hover {
    background-color: var(--color-soft-pink);
    border-color: var(--color-soft-pink);
    color: #fff;
    transform: translateX(-5px);
}

.circle-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--color-black);
    background: transparent;
    color: var(--color-black);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-top: 540px;
    margin-right: 30px;
}

.circle-btn:hover {
    background-color: var(--color-soft-pink);
    border-color: var(--color-soft-pink);
    color: #fff;
    transform: translateY(-5px);
}

/* --- CONTENTS SCROLLSPY --- */
.contents-wrapper {
    margin-top: 80px;
}

.contents-title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.contents-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contents-nav a {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #888;
    text-decoration: none;
    transition: all 0.3s ease;
}

.contents-nav a:hover {
    color: var(--color-black);
}

.contents-nav a.active {
    color: var(--color-black);
    font-weight: bold;
    position: relative;
}

/* --- TYPOGRAPHY & HEADINGS --- */
.hero-text-center {
    text-align: center;
    margin-bottom: 50px;
}

.hero-overline {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.5;
}

.hero-title {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--color-soft-pink);
    font-size: 5rem;
    font-weight: 400;
    margin-bottom: 25px;
}

.hero-subtitle {
    font-size: 1.05rem;
    color: #333;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.section-header-line {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 80px 0 40px 0;
}

.section-header-line .line {
    flex-grow: 1;
    height: 1px;
    background-color: var(--line-color);
}

.section-heading {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-black);
    font-weight: 500;
    white-space: nowrap;
}

.pink-num {
    color: var(--color-vibrant-pink);
    font-style: italic;
    font-weight: bold;
    margin-right: 5px;
}

.centered-subheading {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.vibrant-italic-heading {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--color-vibrant-pink);
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 10px;
}

.vibrant-italic-heading.small {
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.section-intro {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 30px;
}

.pink-italic-heading {
    font-family: var(--font-heading);
    font-style: italic;
    color: #FF7ADE;
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 20px;
    margin-top: -60px;
    letter-spacing: 0.5px;
}

.dark-serif-heading {
    font-family: var(--font-heading);
    color: #222;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 20px;
}

.italic-desc {
    font-style: italic;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.6;
}

.standard-desc {
    font-size: 0.9rem;
    color: #222;
    line-height: 1.6;
}

.highlight-pink {
    color: #FF7ADE;
}

.small-text {
    font-size: 0.85rem !important;
}

/* --- TIMELINE TRACKERS --- */
.timeline-tracker {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    top: 15px;
    left: 10%;
    right: 10%;
    height: 1px;
    background-color: var(--color-line-grey);
    z-index: 1;
}

.timeline-nodes {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    width: 120px;
}

.node .circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid var(--color-black);
    margin-bottom: 15px;
    transition: border-color 0.3s ease;
}

.node.active .circle {
    border: 2px solid #FF7ADE;
}

.node p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #444;
    line-height: 1.4;
}

/* --- STRUCTURAL CSS LINES --- */
/* The elbow line dropping from the first circle */
.connector-elbow-top {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 1px;
    height: 190px;
    background-color: var(--color-line-grey);
}
.connector-elbow-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0px; /* distance it travels right */
    height: 1px;
    background-color: var(--color-line-grey);
}
.connector-elbow-top::before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 60px;
    width: 1px;
    height: 0px; /* final drop down */
    background-color: var(--color-line-grey);
}

/* The branching line dropping to wireframes */
.connector-branch-bottom {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 1px;
    height: 60px;
    background-color: var(--color-line-grey);
}
.connector-branch-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    top: 60px;
    left: -200px; /* Span width left */
    width: 400px; /* Total span width */
    height: 30px; /* Drop down to images */
    border-top: 1px solid var(--color-line-grey);
    border-left: 1px solid var(--color-line-grey);
    border-right: 1px solid var(--color-line-grey);
}

/* Vertical lines beside text blocks */
.vertical-spacer-line {
    width: 1px;
    height: 80px;
    background-color: var(--color-line-grey);
    margin-left: 70px;
    margin-bottom: 20px;
}
.vertical-spacer-line.long {
    height: 120px;
}

/* --- GRIDS & LISTS --- */
.project-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
    margin-top: 60px;
}

.meta-item h4 {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: bold;
}

.meta-item p {
    font-size: 0.85rem;
    color: #444;
    line-height: 1.6;
}

.two-col-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.two-col-text h4 {
    font-size: 0.95rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.two-col-text p {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 15px;
    line-height: 1.6;
}

.custom-list {
    padding-left: 20px;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.7;
}

.custom-list.bulleted {
    list-style-type: disc;
}

.custom-list li {
    margin-bottom: 15px;
}

.custom-list li strong {
    color: var(--color-black);
}

.intro-list {
    margin-bottom: 50px;
}

/* --- GRIDS & PLACEMENTS --- */
.system-diagram-grid {
    display: grid;
    grid-template-columns: 300px 1fr; /* Exact ratio from Figma */
    gap: 20px;
    align-items: end; /* Aligns text to bottom of the diagram */
    margin-top: 150px; /* Space for the top connector line */
}

.user-flow-grid {
    display: grid;
    grid-template-columns: 280px 1fr 280px; /* 3 Column Flow */
    gap: 40px;
    align-items: start;
    margin-top: 120px;
}

.user-flow-grid .left-col {
    padding-top: 80px; /* Aligns the text lower than the start of the flowchart */
}

.user-flow-grid .right-col {
    padding-top: 40px;
}

.ux-decisions h4 {
    font-size: 0.9rem;
    font-family: var(--font-body);
    margin-bottom: 15px;
    color: #222;
}

.diagram-asset {
    width: 100%;
    height: auto;
    display: block;
}

.flowchart-img {
    max-width: 200px;
    width: 80%;
    height: 100%;;
    margin: 0 auto;
}

/* --- WIREFRAMES GRID --- */
.wireframes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 120px; /* Space for the branching line */
    padding: 0 50px;
}

.wireframe-asset {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* =========================================
   SECTIONS 03 & 04 OVERRIDES
   ========================================= */

/* --- Section 03 Custom Timeline Line --- */
.connector-s03-polished {
    position: absolute;
    top: 90px; /* Starts just below the circle */
    right: 60px; /* Centers exactly under the 3rd node (which is 120px wide) */
    width: calc(93% - 60px); /* Spans from the 3rd node to the exact center of the tracker */
    height: 30px; /* Drops down */
    border-right: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    z-index: 0;
    pointer-events: none;
}

.connector-s03-polished::after {
    content: '';
    position: absolute;
    bottom: -50px; /* Drops down another 30px from the bottom-left corner */
    left: 0; /* Aligns exactly with the center of the page */
    width: 1px;
    height: 50px;
    background-color: var(--line-color);
}

.mb-l {
    margin-bottom: 60px; /* Adds breathing room before the heading */
}

/* --- Section 04 Engineering Grid --- */
.engineering-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-top: 60px;
}

.bold-heading {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-black);
    margin-bottom: 15px;
}

.mt-m { margin-top: 40px; }

/* --- KEEP EXPLORING CARDS (Widened & Height-Matched) --- */

/* 1. Widen the grid to break out of the center column */
.keep-exploring-section .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Reduced gap gives cards more width */
    width: 110%; /* Expands past the default bounds */
    margin-left: -5%; /* Re-centers the wider grid */
}

/* 2. Equalize heights and structure the flex layout */
.keep-exploring-section .project-card {
    border: 1px solid #8d6b7b;
    border-radius: 12px;
    padding: 25px 20px; 
    background: #fff;
    box-shadow: none;
    display: flex; /* Turns the card into a flex container */
    flex-direction: column; /* Stacks items vertically */
    height: 100%; /* Ensures all cards stretch to the tallest one in the row */
}

.keep-exploring-section .project-card:hover {
    transform: translateY(-5px);
}

.keep-exploring-section .project-top-container {
    width: 100%;
    height: 220px; 
    margin: 0 0 25px 0;
    border: 1px solid #e1d2da; 
    border-radius: 8px;
    background: #fff;
}

.keep-exploring-section .project-top-container img {
    padding: 30px; 
}

/* Text Formatting */
.keep-exploring-section h3 {
    font-size: 1.8rem;
    padding: 0;
    margin-bottom: 8px;
}

.keep-exploring-section .subtitle {
    font-size: 0.85rem;
    padding: 0;
    margin-bottom: 20px;
}

/* 3. Force the description to fill empty space */
.keep-exploring-section .desc {
    font-size: 0.85rem;
    padding: 0;
    margin-bottom: 30px;
    line-height: 1.6;
    flex-grow: 1; /* This pushes the tags down to the bottom! */
}

/* 4. Lock tags to the bottom */
.keep-exploring-section .tags {
    padding: 0;
    margin-top: auto; /* Aligns flush to the bottom */
}

.keep-exploring-section .tag {
    background-color: #DA3C3B !important; 
    padding: 8px 16px;
    font-size: 0.65rem;
    border-radius: 20px;
}

/* --- IMAGES & VIDEO --- */
.full-width-img {
    width: 100%;
    height: auto;
    display: block;
}

.full-image-block {
    margin: 40px 0;
}

.full-video-block {
    margin: 60px 0;
}

.full-width-video {
    width: 100%;
    height: auto;
    display: block;
}

.border-radius-lg {
    border-radius: 12px;
}

.shadow-light {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.mt-l { margin-top: 60px; }
.mt-xl { margin-top: 100px; }

/* --- OUTRO SECTION --- */
.cs-outro {
    text-align: center;
    margin-top: 100px;
    padding-bottom: 60px;
}

.thin-line {
    border: 0;
    height: 1px;
    background-color: var(--line-color);
    margin-bottom: 60px;
}

.outro-links {
    margin-top: 20px;
    font-size: 0.85rem;
    color: #555;
}

.outro-links a {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- KEEP EXPLORING CAROUSEL --- */
.keep-exploring-section {
    text-align: center;
    padding: 60px 0 100px 0;
}

.carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    max-width: 600px;
    margin: 0 auto;
}

.carousel-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--color-black);
    cursor: pointer;
    transition: color 0.3s ease;
}

.carousel-btn:hover {
    color: var(--color-vibrant-pink);
}

.carousel-track-wrapper {
    overflow: hidden;
    width: 350px; /* Width of one card */
    border-radius: 12px;
    border: 1px solid var(--line-color);
}

.carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cs-card {
    min-width: 350px;
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
}

.card-img-wrapper {
    width: 100%;
    height: 200px;
    background: #f9f9f9;
    padding: 20px;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-info {
    padding: 20px;
    border-top: 1px solid var(--line-color);
}

.card-info h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.card-info p {
    font-size: 0.8rem;
    color: #666;
}

/* --- ANIMATIONS --- */
.pop-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.pop-in.delay-1 { transition-delay: 0.2s; }
.pop-in.delay-2 { transition-delay: 0.4s; }

.pop-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   DARK MODE OVERRIDES (Perfect Contrast)
   ========================================= */

body.dark-mode.case-study-body {
    background-color: #1a1a1a; /* Dark charcoal, not pure black */
    color: #e0e0e0; /* Soft white for body text */
}

/* --- IMAGE SWAPPING LOGIC --- */
/* Hide the dark image by default */
.img-dark { 
    display: none; 
}
/* When dark mode is active, hide light image, show dark image */
body.dark-mode .img-light { 
    display: none; 
}
body.dark-mode .img-dark { 
    display: block; 
}

/* --- TEXT COLORS: PURE WHITE --- */
body.dark-mode .section-heading,
body.dark-mode .bold-heading,
body.dark-mode .italic-subheading,
body.dark-mode .bold-subheading,
body.dark-mode .restricted-title,
body.dark-mode .hero-subtitle,
body.dark-mode .meta-item h4,
body.dark-mode .two-col-text h4,
body.dark-mode .engineering-grid h4,
body.dark-mode .dark-serif-heading, /* Added */
body.dark-mode .ux-decisions h4,    /* Added */
body.dark-mode .outro-links a {     /* Outro Links Added */
    color: #ffffff; 
}

/* --- TEXT COLORS: SOFT WHITE/GREY --- */
body.dark-mode .section-intro,
body.dark-mode .standard-desc,
body.dark-mode .custom-list li,
body.dark-mode .meta-item p,
body.dark-mode .caption-desc,
body.dark-mode .caption-block p,
body.dark-mode .contents-nav a,
body.dark-mode .two-col-text p,
body.dark-mode .restricted-desc,
body.dark-mode .exact-intro,        /* Added */
body.dark-mode .italic-desc,        /* Added */
body.dark-mode .node p,             /* Added timeline text */
body.dark-mode .outro-links,        /* Added */
body.dark-mode .outro-links p {     /* Added */
    color: #cccccc;
}

body.dark-mode .custom-list li strong {
    color: #ffffff;
}

/* Sidebar Active State */
body.dark-mode .contents-nav a.active {
    color: #ffffff;
    font-weight: bold;
}

/* Structural Lines */
/* 1. Elements that use BACKGROUND-COLOR for their lines */
body.dark-mode .section-header-line .line,
body.dark-mode .thin-line,
body.dark-mode .timeline-line,
body.dark-mode .connector-s03-polished::after,
body.dark-mode .connector-s03-mobile::after,
body.dark-mode .connector-elbow-top,
body.dark-mode .connector-elbow-top::before,
body.dark-mode .connector-elbow-top::after,
body.dark-mode .connector-branch-bottom,
body.dark-mode .vertical-spacer-line {
    background-color: #555555;
}

/* 2. Elements that use BORDERS for their lines (Crucial Fix) */
body.dark-mode .connector-s03-polished,
body.dark-mode .connector-s03-mobile,
body.dark-mode .connector-branch-bottom::after {
    border-color: #555555;
    background-color: transparent !important; /* Ensures the box stays invisible */
}

/* Timeline Circles */
body.dark-mode .node .circle {
    background-color: #1a1a1a;
    border-color: #bababa;
}
body.dark-mode .node.active .circle {
    /* Uses whatever accent color is set for that specific case study */
    border-color: var(--color-accent-teal, var(--color-vibrant-pink, var(--color-loop-solid, #fff))); 
}

/* Floating Buttons */
body.dark-mode .pill-btn,
body.dark-mode .circle-btn {
    border-color: #e0e0e0;
    color: #e0e0e0;
}

body.dark-mode .pill-btn:hover,
body.dark-mode .circle-btn:hover {
    color: #ffffff;
    border-color: transparent;
}

/* Keep Exploring Cards */
body.dark-mode .keep-exploring-section .project-card {
    background-color: #2e2e2e;
    border-color: #595959;
}

body.dark-mode .keep-exploring-section .project-top-container {
    background-color: #2a2a2a;
    border-color: #444444;
}

body.dark-mode .keep-exploring-section h3 {
    color: #ffffff;
}

/* Tables (If applicable, like in Loop) */
body.dark-mode .hci-table th {
    background: #222222;
    color: #ffffff;
    border-color: #444444;
}
body.dark-mode .hci-table td {
    border-color: #444444;
    color: #cccccc;
}

/* Restricted Block (If applicable, like in Cocopan) */
body.dark-mode .restricted-block {
    background-color: #222222;
    border-color: #555555;
}
body.dark-mode .restricted-actions {
    background-color: #2a2a2a;
    border-color: #444444;
}
body.dark-mode .github-solid-btn {
    background-color: #ffffff;
    color: #000000;
}
body.dark-mode .github-solid-btn:hover {
    background-color: var(--color-accent-amber);
    color: #ffffff;
}

/* =========================================
   MASTER RESPONSIVE OVERRIDES (TABLET & MOBILE)
   ========================================= */

/* --- TABLET VIEW (Max 1100px) --- */
@media (max-width: 1100px) {
    /* Collapse the 3-column grid into 1 column */
    .cs-layout-grid {
        grid-template-columns: 1fr;
        width: 100%;
        left: 0;
    }

    /* Keep the back button, but remove fixed positioning */
    .cs-sidebar-left {
        position: relative;
        height: auto;
        padding: 100px 5% 20px 5%; /* Accounts for fixed navbar */
        top: 0;
    }

    /* Hide the Table of Contents & Floating Back to Top */
    .contents-wrapper, 
    .cs-sidebar-right {
        display: none; 
    }

    /* Expand main content */
    .cs-main-content {
        padding: 20px 5% 60px 5%;
        max-width: 100%;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    /* Convert specific 3-column elements to 2-columns on tablet */
    .project-meta-grid, 
    .mobile-grid-3,
    .caption-grid-3,
    .sdg-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .keep-exploring-section .projects-grid {
        width: 100%;
        margin-left: 0;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- MOBILE VIEW (Max 768px) --- */
@media (max-width: 768px) {
    /* Typography Scaling */
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 0.95rem; }
    .section-heading { font-size: 1.6rem; }
    .accent-italic-heading { font-size: 2.2rem; }
    .accent-italic-heading.small { font-size: 1.5rem; }
    .left-align-heading { font-size: 1.8rem; text-align: center; }

    /* Spacing Reductions */
    .mt-xl { margin-top: 60px; }
    .mt-l { margin-top: 40px; }
    .section-header-line { margin: 50px 0 30px 0; }
    
    /* Grid Stacking (Forces everything to 1 column) */
    .project-meta-grid, 
    .two-col-text, 
    .engineering-grid,
    .system-diagram-grid, 
    .user-flow-grid, 
    .wireframes-grid,
    .two-col-images,
    .mobile-grid-2,
    .mobile-grid-3,
    .sdg-grid,
    .caption-grid-2, 
    .caption-grid-3,
    .keep-exploring-section .projects-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        width: 100%;
    }

    .keep-exploring-section .project-card { padding: 20px 15px; }
    .caption-block { padding: 0; }

    /* Complex Layout Adjustments (Hide Desktop-only lines) */
    .connector-elbow-top,
    .connector-elbow-top::before,
    .connector-elbow-top::after,
    .connector-branch-bottom,
    .connector-branch-bottom::after,
    .connector-s03-polished,
    .connector-s03-polished::after,
    .connector-s03-mobile,
    .connector-s03-mobile::after,
    .vertical-spacer-line,
    .timeline-line {
        display: none !important; 
    }

    /* Turn the timeline nodes into a wrapped list instead of fixed line */
    .timeline-tracker {
        margin-bottom: 40px;
    }
    .timeline-nodes {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    /* Fix specific text paddings that look weird when stacked */
    .user-flow-grid .left-col, 
    .user-flow-grid .right-col,
    .diagram-text-col,
    .flow-col-left,
    .flow-col-right {
        padding-top: 0; 
    }

    /* Loop HCI Table Mobile View */
    .hci-table thead { display: none; }
    .hci-table td {
        display: block;
        width: 100% !important;
        border-right: none !important;
    }
    .hci-table td:first-child {
        font-weight: bold;
        font-size: 1.1rem;
        border-bottom: 1px dashed var(--line-color);
        padding-bottom: 5px;
        background: #fafafa;
    }
    body.dark-mode .hci-table td:first-child { background: #222; }
    .hci-table td:last-child {
        padding-top: 10px;
        border-bottom: 2px solid var(--line-color);
    }
}

/* --- SMALL MOBILE VIEW (Max 480px) --- */
@media (max-width: 480px) {
    .hero-title { font-size: 2.2rem; }
    .restricted-block { padding: 30px 20px; }
    .restricted-title { font-size: 1.5rem; }
    .cs-sidebar-left { padding-top: 80px; } 
    .pill-btn { padding: 8px 15px; font-size: 0.8rem; }
}