/* === Master Theme Switch === */
/* Change these values to instantly update the site's theme. */ 
:root {
    /* --- Colors --- */
    --text-primary: #212121;       /* For main titles and body text on light backgrounds */
    --text-secondary: #8C8C8C;    /* For subtitles, labels, and muted text */
    --text-inverted: #e0e0e0;      /* For text on dark backgrounds */
    
    --bg-light: #ffffff;          /* Main page background (default) */
    --bg-dark: #212121;           /* For dark sections like 'Our Work' */
    --bg-card: #333333;           /* Background for individual project cards */

    --line-color: #8c8c8c;         /* For graph lines and decorative elements */
    --accent-color: #b94141;      /* Accent color for experiment */

    /* --- Typography --- */
    --font-main: 'Inter', sans-serif;

    /* --- Hero Layout Variables --- */
    /* These variables control the vertical positioning of the hero text and connecting line. */
    --since-block-top: 72vh; /* Vertical position of the 'Since 2022' block */
    --tail-line-offset: 68px; /* Space between the text and the start of the line */
}

/* ONE container controls everything */
.title-block{
    position:absolute;
    top:15%;
    right:10%;
    text-align:right;
}
/* small metadata */
.title-block h3{
    font-family: var(--font-main);
    font-size: 43px;
    font-weight: 300; /* Standardized to 'Light' for consistency */
    color: var(--text-primary);
    margin:0 5px 0;
}
/* main title */
.title-block h1{
    font-family: var(--font-main);
    font-size:110px;
    color: var(--text-primary);
    margin:0;
    line-height:0.9;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}
/* lighter INTO */
.light{
    font-weight: 300; /* Standardized to 'Light' */
    color: var(--text-secondary);
}
/* Since 2022 section */
/* Since 2022 block */
.since-block{
    position:absolute;
    right:10%;
    top: var(--since-block-top);
    text-align:right;
}

.since{
    font-family: var(--font-main);
    font-size:43px;
    font-weight:300;
    color: var(--text-primary);
    margin:0;
}

.system-line{
    font-family: var(--font-main);
    font-size:27px;
    font-weight:400;
    color: var(--text-primary);
    margin-top:4px;
}

.tail-line{
    position:absolute;

    top: var(--tail-line-offset);
    right:1.9px;

    width:2.2px;
    /* This calculation is now fully dynamic. It subtracts the line's starting position */
    /* from the bottom of the hero section (100vh) to find the exact height needed to connect. */
    /* A 19px overlap is added to guarantee a seamless connection without any gaps. */
    height: calc(100vh - var(--since-block-top) - var(--tail-line-offset) + 19px);

    background: var(--text-primary);
}

.graph{
    position:relative;
    width:100vw;
    height:100vh;
    /* Hide the graph initially to prevent a "flash of unstyled content". */
    /* JS will make it visible after setting the animation's starting positions. */
    visibility: hidden;
}

.graph.initialized {
    visibility: visible;
}

.node{
    position:absolute;
    /* Add transition for smooth movement and fade-in. */
    transition: left 1.2s cubic-bezier(0.76, 0, 0.24, 1), 
                top 1.2s cubic-bezier(0.76, 0, 0.24, 1), 
                opacity 0.5s ease-in-out;
}

.dot{
    width:15px;
    height:15px;
    border-radius:50%;
    background: var(--line-color);
}

.line{
    position:absolute;
    height:2px;
    background: var(--line-color);
    transform-origin:left center;
}

.label{
    font-family: var(--font-main);
    font-weight: 500; /* Standardized to 'Medium' */
    color: var(--text-secondary);
}

/* ======================= */
/* === WHAT I DO SECTION === */
/* ======================= */

.what-i-do-section {
    padding: 120px 10%;
    background-color: var(--bg-light);
    box-sizing: border-box;
    overflow: hidden; /* Contains shadows from visuals */
}

/* A generic, reusable style for all main section titles */
.section-title {
    font-family: var(--font-main);
    font-size: 50px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 80px 0;
}

.what-i-do-section .section-title,
.workflow-section .section-title {
    color: var(--text-primary); /* Dark text for light background */
}

.what-i-do-section .section-title {
    margin-bottom: 100px; /* Custom spacing for this section */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 120px; /* Generous vertical space between each service item */
    max-width: 1100px;
    margin: 0 auto;
}

.service-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px; /* Space between visual and text */
    align-items: center;
}

/* By default, visual is on the left (col 1), text on the right (col 2) */
.service-text {
    text-align: left;
}

/* Alternating layout: for the 2nd, 4th, etc. item, swap the columns */
.service-item:nth-child(even) .service-visual {
    grid-column: 2;
}
.service-item:nth-child(even) .service-text {
    grid-column: 1;
    grid-row: 1;
}

.service-visual {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    aspect-ratio: 16 / 9;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.service-visual:hover {
    transform: scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #f0f0f0; /* BG for images that are loading */
}

.service-item h3 {
    font-family: var(--font-main);
    font-size: 28px; /* Slightly larger heading */
    color: var(--text-primary);
    margin: 0 0 15px 0;
    font-weight: 600;
}

.service-item p {
    font-family: var(--font-main);
    font-size: 17px; /* Slightly larger body text */
    color: var(--text-secondary);
    line-height: 1.8; /* More line height for readability */
    margin: 0;
}

/* ============================= */
/* === CREATIVE PRINCIPIPLES SECTION === */
/* ============================= */
.creative-principles-section,
.tools-section {
    background-color: var(--bg-dark);
    padding: 80px 10% 120px; /* Add more bottom padding */
    box-sizing: border-box;
    min-height: auto; /* Height is now determined by content */
}

/* Since the tools section follows the principles section, remove its top padding to make them feel connected */
.tools-section {
    padding-top: 0;
    border-bottom: 1px solid var(--line-color); /* Separator for the section below */
}

.creative-principles-section .section-title,
.tools-section .section-title,
.Work-block .section-title {
    color: var(--text-inverted); /* Light text for dark backgrounds */
}

.skills-grid {
    display: grid;
    /* Create a responsive 2-column grid on desktop, stacking to 1 on mobile */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    /* Constrain the max width and center the grid for a more breathable layout */
    max-width: 1560px; /* Increased by 30% for more horizontal space */
    margin: 60px auto 0;
}

.skill-card {
    background-color: #2a2a2a;
    border-radius: 20px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Add a subtle stroke for definition */
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.skill-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.skill-card--highlight {
    /* Keep the default background, but use the accent color for the stroke */
    border-color: var(--accent-color);
    border-width: 2px; /* Make the stroke more prominent */
}

.skill-card h3 {
    /* Font size is consistent with "What I Do" section headings */
    font-family: var(--font-main);
    font-size: 28px;
    color: var(--text-inverted);
    margin: 0 0 15px 0;
    font-weight: 600;
}

.skill-card p {
    /* Font size and color are consistent with "What I Do" section text */
    font-family: var(--font-main);
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ============================= */
/* === SOFTWARE SKILLS SECTION === */
/* ============================= */

.software-grid {
    display: grid;
    /* Create a responsive grid of square cards */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 60px auto 0;
}

.software-item {
    /* Turn each item into a card */
    background-color: #2a2a2a;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between header and description */
    text-align: left;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.software-item-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.software-item img {
    height: 35px;
    width: 35px;
    object-fit: contain;
}

.software-item span {
    font-family: var(--font-main);
    font-size: 18px;
    color: var(--text-inverted); /* Make text a bit brighter inside the card */
    font-weight: 600;
}

.software-item-description {
    font-family: var(--font-main);
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.software-item:hover {
    opacity: 1; /* Bring to full opacity on hover */
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* --- Supportive Skills (Pills) --- */
.supportive-skills-wrapper {
    margin-top: 80px; /* Space between primary cards and this section */
    text-align: center;
}

.supportive-skills-title {
    font-family: var(--font-main);
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 500;
    margin: 0 0 25px 0;
}

.pills-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.skill-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 20px;
    border-radius: 50px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.skill-pill:hover {
    opacity: 1;
}

.skill-pill img {
    height: 20px;
    width: 20px;
}

.skill-pill span {
    font-size: 15px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ======================= */
/* === WORKFLOW SECTION === */
/* ======================= */
.workflow-section {
    padding: 120px 10%;
    background-color: var(--bg-light);
    box-sizing: border-box;
    min-height: auto; /* Height is now determined by content */
}

.workflow-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1600px;
    margin: 0 auto;
}

.workflow-step {
    background-color: #fdfdfd; /* A barely-there background */
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    box-sizing: border-box;
    position: relative; /* So we can position the arrow pseudo-element */
}

.step-content h3 {
    font-family: var(--font-main);
    font-size: 22px;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    font-weight: 600;
}

.step-content p {
    font-family: var(--font-main);
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* --- Highlighted Final Step --- */
.workflow-step--highlight {
    border-color: var(--text-primary);
    background-color: #fff;
}

/* --- Accent Step (for experiment) --- */
.workflow-step--accent {
    border-color: var(--accent-color);
}

/* Add connecting arrows on wider screens where items are likely in a single row */
@media (min-width: 1400px) {
    .workflow-step:not(:last-child)::after {
        content: '›';
        position: absolute;
        right: -18px; /* Positioned in the middle of the 30px gap */
        top: 50%;
        transform: translateY(-50%);
        font-size: 40px;
        font-weight: 100; /* Make the arrow glyph very thin */
        color: var(--text-secondary);
        opacity: 0.6;
        pointer-events: none; /* Make sure it doesn't interfere with mouse events */
    }
}

/* ======================= */
/* === FEATURED WORK SECTION === */
/* ======================= */

.Work-block {
    width: 100%;
    min-height: 100vh; /* Changed from fixed height to be flexible and grow with content */
    background-color: var(--bg-dark);
    /* Margin is set to 0 to create a seamless flow from the hero section. */
    margin-top: 0;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
    padding: 80px 0; /* Vertical padding for the section */
    border-bottom: 1px solid var(--line-color); /* Separator for the section below */
}

/* ================================= */
/* === FILTER BUTTONS === */
/* ================================= */

.filter-container {
    text-align: center;
    margin-bottom: 60px; /* Space between buttons and gallery */
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    padding: 0 10%; /* Align with gallery padding */
}

.filter-btn {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
    background-color: transparent;
    border: 1px solid var(--text-secondary);
    padding: 10px 25px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    color: var(--text-inverted);
    border-color: var(--text-inverted);
}

.filter-btn.active {
    color: var(--bg-dark);
    background-color: var(--text-inverted);
    border-color: var(--text-inverted);
}

/* Special subtle style for the 'Reels' button */
.filter-btn.filter-btn--reel {
    border-style: dashed;
    font-style: italic;
}

/* ================================= */
/* === DYNAMIC VIDEO GALLERY === */
/* ================================= */

/* --- Grid Container --- */
/* This uses CSS Grid to create a responsive, auto-fitting layout. */
.video-gallery {
    display: grid;
    /* Create as many columns as can fit, with a minimum width of 350px */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    /* 10% side padding to align with the hero content above */
    padding: 0 10%;
    box-sizing: border-box;
}

/* --- Individual Card Styling --- */
.video-card {
    background-color: var(--bg-card);
    border-radius: 20px; /* Increased for a softer, "iPhone-style" continuous corner */
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.video-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.video-card .thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-bottom: 2px solid var(--line-color);
}

.video-card .card-title {
    font-family: var(--font-main);
    font-size: 20px;
    color: var(--text-inverted);
    padding: 20px;
    margin: 0;
    font-weight: 500;
}

/* --- Special styling for Reel cards --- */
.video-card.reel-card {
    max-width: 280px; /* Reduce card width to prevent stretching low-res thumbnails */
    margin: 0 auto; /* Center the smaller card within its grid column */
}

.video-card.reel-card .thumbnail {
    aspect-ratio: 9 / 16;
}

/* =================================== */
/* === PROJECT VIDEO POPUP (MODAL) === */
/* =================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    background-color: var(--bg-card);
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    max-width: 80vw; /* Changed to 80% of the viewport width for a larger view */
    max-height: 95vh;
    display: flex;
    flex-direction: row; /* Changed to row for side-by-side layout */
    transform: scale(0.95);
    transition: transform 0.3s ease;
    overflow: hidden; /* Prevent double scrollbars */
    gap: 30px; /* Space between video and text */
}

.modal-overlay.open .modal-content {
    transform: scale(1);
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-inverted);
    font-size: 35px;
    cursor: pointer;
    line-height: 1;
    z-index: 10; /* Ensure it's above the video content */
}

.modal-video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 16px; /* Slightly smaller radius for a nested element */
    overflow: hidden;
    flex: 3; /* This makes the video container take up 75% of the space */
    min-width: 0; /* Prevents flexbox overflow issues */
}

.modal-video-wrapper > * {
    width: 100%;
    height: 100%;
    border: none; /* Remove default iframe border */
}

.modal-text-content {
    flex: 1; /* This makes the text container take up 25% of the space */
    overflow-y: auto; /* Allow only this section to scroll if content is long */
    min-width: 0;
}

#modal-title {
    font-family: var(--font-main);
    color: var(--text-inverted);
    font-size: 24px;
    margin: 0 0 10px 0;
}

#modal-description {
    font-family: var(--font-main);
    line-height: 1.7;
    color: var(--text-secondary);
    font-size: 16px;
    margin: 0;
}

/* --- Responsive Rule for Modal --- */
/* On screens smaller than 800px, stack the video on top of the text */
@media (max-width: 800px) {
    .modal-content {
        flex-direction: column;
        overflow-y: auto; /* Allow the whole modal to scroll on mobile */
    }
}

/* ================================= */
/* === CONTACT FORM POPUP (MODAL) === */
/* ================================= */

/* Re-use modal-overlay styles, but allow specific overrides */
.contact-modal-overlay {
    /* Inherits from .modal-overlay */
}

.contact-modal-content {
    flex-direction: column; /* Always stacked */
    max-width: 550px; /* A good width for a form */
    width: 90%;
    gap: 10px;
    padding: 40px;
}

.contact-modal-content h2 {
    font-family: var(--font-main);
    color: var(--text-inverted);
    font-size: 28px;
    margin: 0;
    text-align: center;
}

.contact-modal-content .modal-subtitle {
    font-family: var(--font-main);
    color: var(--text-secondary);
    font-size: 16px;
    text-align: center;
    margin: 0 0 25px 0;
    line-height: 1.6;
}

#contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 15px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 12px;
    color: var(--text-inverted);
    font-family: var(--font-main);
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#contact-form input:focus,
#contact-form textarea:focus {
    outline: none;
    border-color: var(--text-inverted);
    box-shadow: 0 0 0 3px rgba(224, 224, 224, 0.2);
}

/* --- Formspree AJAX Messages --- */
.form-success,
.form-error {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 12px;
    text-align: center;
    font-family: var(--font-main);
    line-height: 1.6;
}

/* The library hides these by default, we just style them */
.form-success {
    background-color: rgba(40, 167, 69, 0.15);
    color: #d4edda;
    border: 1px solid rgba(40, 167, 69, 0.5);
}

.form-error {
    background-color: rgba(220, 53, 69, 0.15);
    color: #f8d7da;
    border: 1px solid rgba(220, 53, 69, 0.5);
}

.form-field-error {
    color: #f8d7da;
    font-size: 14px;
    margin-top: -10px;
    margin-bottom: 5px;
    display: block;
    text-align: left;
    padding-left: 5px;
}

.form-submit-btn {
    margin-top: 10px;
    width: 100%;
    border: none; /* Buttons don't have borders by default, but good to be explicit */
}

/* ============================= */
/* === PERSISTENT CTA BAR      === */
/* ============================= */

.persistent-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8vh;
    z-index: 900; /* Below modal (1000), above most other content */
    display: flex;
    align-items: center;
    transition: background-color 0.4s ease;
    box-sizing: border-box;
    /* Default state (dark bar for light page background) */
    background-color: var(--text-primary);
}

.persistent-cta-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10%;
    box-sizing: border-box;
    gap: 20px;
}

.persistent-cta .cta-text {
    font-family: var(--font-main);
    font-size: 18px;
    margin: 0;
    color: var(--text-inverted); /* Default text color for dark bar */
    transition: color 0.4s ease;
}

.persistent-cta .cta-button {
    flex-shrink: 0; /* Prevent button from shrinking */
    /* Default: Light button for dark bar */
    color: var(--text-primary);
    background-color: var(--text-inverted);
}

/* --- Light Theme for Dark Section --- */
.persistent-cta.light-theme {
    background-color: var(--bg-light);
}

.persistent-cta.light-theme .cta-text {
    color: var(--text-primary);
}

.persistent-cta.light-theme .cta-button {
    /* Dark button for light bar */
    color: var(--text-inverted);
    background-color: var(--text-primary);
}

/* ============================= */
/* === CONTACT / HIRE ME SECTION === */
/* ============================= */

.contact-section {
    padding: 120px 10%;
    background-color: var(--bg-light);
    text-align: center;
    box-sizing: border-box;
    border-top: 1px solid #e0e0e0; /* A subtle separator line */
}

.contact-content {
    max-width: 700px;
    margin: 0 auto;
}

.contact-section h2 {
    font-family: var(--font-main);
    font-size: 50px;
    color: var(--text-primary);
    margin: 0 0 20px 0;
    font-weight: 600;
}

.contact-section p {
    font-family: var(--font-main);
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 40px 0;
}

.cta-button {
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-inverted);
    background-color: var(--text-primary);
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

/* For the new button elements that replaced the `a` tags */
.cta-button {
    cursor: pointer;
    border: none;
}

.cta-button:hover {
    background-color: #000; /* A slightly darker hover state */
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ============================= */
/* === SITE FOOTER             === */
/* ============================= */

.site-footer {
    background-color: var(--bg-light);
    color: var(--text-secondary); /* This grey works on light backgrounds too */
    padding: 50px 10%;
    box-sizing: border-box;
    font-family: var(--font-main);
    font-size: 15px;
    position: relative; /* For the observer to have a layout element to track */
    z-index: 10;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1600px;
    margin: 0 auto;
}

.footer-info, .footer-contact, .footer-social {
    flex: 1;
    min-width: 250px;
}

.footer-info {
    text-align: left;
}

.footer-info p {
    margin: 5px 0;
    line-height: 1.6;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.footer-contact a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.footer-contact a:hover {
    color: var(--accent-color);
}

.footer-social {
    text-align: right;
}

.footer-social a {
    display: inline-block;
    color: var(--text-secondary);
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social a:hover {
    color: var(--text-primary);
    transform: scale(1.1);
}

.footer-social svg {
    width: 28px;
    height: 28px;
}


/* =================================== */
/* === MOBILE RESPONSIVE OVERRIDES === */
/* =================================== */

/* These styles apply only on screens 768px wide or smaller */
@media (max-width: 768px) {

    /* --- 1. Hero Section Cleanup --- */

    /* Hide the complex graph on mobile for clarity and performance */
    .graph {
        display: none;
    }

    /* Re-style the hero container to stack text vertically */
    .hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 80vh; /* Give it significant height */
        padding: 0 5vw; /* Add side padding */
        box-sizing: border-box;
    }

    /* Remove absolute positioning to allow stacking */
    .title-block,
    .since-block {
        position: static;
        text-align: center;
        width: 100%;
    }

    .title-block {
        margin-bottom: 15vh; /* Create space between the two text blocks */
    }

    /* Hide the decorative line on mobile */
    .tail-line {
        display: none;
    }

    /* --- 2. Typography Scaling --- */

    .title-block h3,
    .since {
        font-size: 6vw; /* Use viewport-width units for responsive text */
    }

    .title-block h1 {
        font-size: 16vw; /* Make the main title large and impactful */
        line-height: 1;
    }

    .system-line {
        font-size: 4.5vw;
    }

    /* --- 3. Gallery Adjustments --- */
    .filter-container {
        gap: 10px;
        margin-bottom: 40px;
        padding: 0 5%;
    }

    .filter-btn {
        font-size: 14px;
        padding: 8px 20px;
    }

    .video-gallery {
        /* Reduce side padding and gap for a tighter mobile grid */
        padding: 0 5%;
        gap: 25px;
    }

    /* --- 4. Contact Section Scaling --- */
    .contact-section {
        padding: 80px 5%;
    }

    .contact-section h2 {
        font-size: 10vw;
    }

    .contact-section p {
        font-size: 4.5vw;
    }

    /* --- 5. What I Do Section --- */
    .what-i-do-section {
        padding: 80px 5%;
    }

    .what-i-do-section h2 {
        font-size: 10vw;
        margin-bottom: 60px;
    }

    .services-container {
        gap: 80px;
    }

    .service-item {
        grid-template-columns: 1fr; /* Stack to a single column */
        gap: 30px;
    }

    /* Reset the alternating order on mobile */
    .service-item:nth-child(even) .service-visual,
    .service-item:nth-child(even) .service-text {
        grid-column: auto;
        grid-row: auto;
    }

    .service-text {
        text-align: center;
    }

    .service-item h3 { font-size: 24px; }
    .service-item p { font-size: 16px; }

    /* Hide CTA bar on mobile to save screen space */
    .persistent-cta {
        display: none;
    }

    /* --- 6. Creative Principles Section --- */
    .creative-principles-section {
        padding: 80px 5% 100px;
    }

    .skill-card {
        min-height: 180px;   /* Give it a minimum height so it doesn't look too flat */
        padding: 30px;
    }

}

    /* --- 7. Footer --- */
    .site-footer {
        padding: 40px 5%;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
    }

    .footer-info, .footer-contact, .footer-social {
        text-align: center;
        min-width: 100%;
    }

    .footer-social {
        margin-top: 10px;
    }
}