/* =============================================
   DESIGNER HERO SECTION - Screen 01
   Desktop Target: 1440px viewport
   Layer Model: Building Layer 1 First
   ============================================= */

/* CSS Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #ffffff;
    color: #1a1a1a;
}

/* Custom Font for Hero Name */
@font-face {
    font-family: 'Designer';
    src: url('assets/fonts/designer.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* =============================================
   HERO SECTION - Container
   ============================================= */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding-left: 122px;
    padding-right: 122px;
}

/* =============================================
   LAYER 1: Base Background Content
   z-index: 1
   ============================================= */
.hero-background {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 14vh;
}

/* Primary Name Text */
.hero-name {
    font-family: 'Designer', 'Inter', sans-serif;
    font-size: clamp(136.8px, 19.44vw, 280.8px);
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    line-height: 0.9;
    white-space: nowrap;
    width: 100%;
    max-width: none;
    /* Warm orange gradient matching design */
    background: linear-gradient(180deg, #FF8C00 0%, #FF6B00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Philosophy Container */
.philosophy-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(200px, 26vw, 400px);
    margin-top: 12px;
    width: 100%;
}

/* Philosophy Text - Left Node */
.philosophy-left {
    font-size: clamp(18.9px, 1.575vw, 25.2px);
    font-weight: 400;
    color: #2a2a2a;
    letter-spacing: -0.01em;
}

/* Philosophy Text - Right Node */
.philosophy-right {
    font-size: clamp(18.9px, 1.575vw, 25.2px);
    font-weight: 400;
    color: #2a2a2a;
    letter-spacing: -0.01em;
    transform: translateX(45px);
}

.philosophy-right strong {
    font-weight: 600;
}

/* =============================================
   LAYER 2: Avatar Content
   z-index: 2
   ============================================= */
.hero-avatar {
    position: absolute;
    z-index: 2;
    top: 4vh;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Animation on initial load */
    animation: avatarFadeIn 400ms ease-out forwards;
}

.hero-avatar img {
    width: auto;
    height: 125%;
    max-width: none;
    object-fit: contain;
    object-position: bottom center;
}

/* Avatar Animation */
@keyframes avatarFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* =============================================
   LAYER 3: Role Pill
   z-index: 3
   ============================================= */
.role-pill {
    position: absolute;
    z-index: 3;
    bottom: calc(10vh - 20px);
    left: 50%;
    transform: translateX(-50%);
    /* Glass effect */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(200, 200, 200, 0.35);
    border-radius: 18px;
    padding: 12px 24px;
    /* Adjusted padding for layout */
    display: flex;
    align-items: center;
    gap: 16px;
    /* Space between icon and text */
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1), inset 4px 4px 10px rgba(255, 255, 255, 0.5);
    /* Animation - delayed after avatar */
    animation: pillFadeIn 350ms ease-out 400ms forwards;
    opacity: 0;
}

.role-pill span {
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 500;
    color: #3a3a3a;
    letter-spacing: -0.01em;
}

.role-icon {
    width: 50px;
    height: 50px;
    background-color: #2c2c2c;
    /* Dark background for icon container */
    border-radius: 10px;
    /* 10px corner radius */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Removed padding for full image fit */
    overflow: hidden;
    /* Ensure image respects border radius */
}

/* Role Pill Animation */
@keyframes pillFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.96);
    }

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

/* =============================================
   ABOUT SECTION
   ============================================= */
.about {
    width: 100%;
    min-height: 100vh;
    padding: 80px 122px;
    background-color: #ffffff;
}

.about-cards {
    display: flex;
    justify-content: center;
    gap: 0;
    min-height: 638px;
    max-width: 1440px;
    margin: 0 auto;
}

/* =============================================
   COLLAPSED STATE - CARD STYLING
   ============================================= */
.about-card {
    width: 344px;
    height: 638px;
    position: relative;
    background: #ffffff;
    border-radius: 0;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
    box-shadow: -4px 10px 25px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.about-card.is-hidden {
    width: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    flex-shrink: 1;
}

.card-collapsed {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 40px 32px;
    opacity: 1;
    transition: opacity 0.2s ease;
    background: #ffffff;
}

.about-card.is-expanded .card-collapsed {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.card-heading {
    font-family: 'Manrope', sans-serif;
    font-size: 70px;
    font-weight: 600;
    line-height: 109px;
    letter-spacing: 0.5%;
    color: #616161;
    margin: 0;
}

.card-subtext {
    font-family: 'Manrope', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 55px;
    letter-spacing: 0.5%;
    color: #616161;
    margin: 24px 0;
}

.card-expand-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    transition: transform 0.2s ease, background 0.2s ease;
}

.card-expand-btn:hover {
    transform: scale(1.05);
    background: #333;
}

/* =============================================
   EXPANDED STATE - CARD STYLING
   ============================================= */
.card-expanded {
    display: none;
    height: 100%;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

.about-card.is-expanded .card-expanded {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    opacity: 1;
}

.about-card.is-expanded {
    flex: 4;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.expanded-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.expanded-heading {
    font-family: 'Manrope', sans-serif;
    font-size: 60px;
    font-weight: 600;
    letter-spacing: 0.5%;
    color: #616161;
    margin: 0 0 24px 0;
}

.expanded-text {
    font-family: 'Manrope', sans-serif;
    font-size: 25px;
    font-weight: 500;
    letter-spacing: 0.5%;
    color: rgba(97, 97, 97, 0.6);
    line-height: 1.5;
    margin: 0 0 32px 0;
    max-width: 528px;
}

.expanded-hashtag {
    font-family: 'Manrope', sans-serif;
    font-size: 25px;
    font-weight: 300;
    letter-spacing: 0.5%;
    color: #616161;
    font-style: normal;
}

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

.expanded-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

/* Specific positioning for What I do image */
.about-card[data-card="whatido"] .expanded-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
}

.about-card[data-card="whatido"] .expanded-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 95%;
    object-fit: contain;
}

/* Specific positioning for Who am I image */
.about-card[data-card="whoami"] .expanded-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.about-card[data-card="whoami"] .expanded-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* Specific positioning for How I Work image */
.about-card[data-card="howiwork"] .expanded-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.about-card[data-card="howiwork"] .expanded-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* Specific positioning for Why Me Fits image */
.about-card[data-card="whymefits"] .expanded-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.about-card[data-card="whymefits"] .expanded-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.card-collapse-btn {
    position: absolute;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.about-card.is-expanded .card-collapse-btn {
    opacity: 1;
}

.card-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.15);
}

/* =============================================
   NAVIGATION GATE SECTION - Screen 03
   ============================================= */
.nav-gate {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 122px 0;
    /* Removed 80px bottom padding to tighten the gap */
    margin-top: -250px;
    overflow: hidden;
}

/* Decorative Diagonal Lines - REMOVED */
.nav-gate-line {
    display: none;
}

/* Navigation Links - Shared Styles */
.nav-gate-link {
    display: flex;
    align-items: center;
    gap: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.nav-gate-link:hover {
    opacity: 0.7;
}

/* Navigation Icon */
.nav-gate-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #1a1a1a;
    transition: transform 0.3s ease;
}

.nav-gate-icon svg {
    width: 50px;
    height: 50px;
}

/* Case Studies icon - rotate 180deg on hover */
.nav-gate-case-studies:hover .nav-gate-icon {
    transform: rotate(180deg);
}

/* Projects icon - rotate -90deg on hover */
.nav-gate-projects:hover .nav-gate-icon {
    transform: rotate(-90deg);
}

/* Navigation Headings */
.nav-gate-heading {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(80px, 10vw, 140px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1a1a1a;
    margin: 0;
    text-transform: uppercase;
}

/* Case Studies - Top Left Position */
.nav-gate-case-studies {
    align-self: flex-start;
    margin-bottom: 20px;
}

/* Divider with Line */
.nav-gate-divider {
    position: relative;
    width: calc(100% + 244px);
    margin-left: -122px;
    margin-right: -122px;
    padding: 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 100px;
}

.nav-gate-divider-line {
    position: absolute;
    left: 258px;
    right: 258px;
    top: 50%;
    height: 0.5px;
    background-color: #c0c0c0;
}

/* Supporting Text */
.nav-gate-subtext {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 400;
    color: #666666;
    letter-spacing: 0.01em;
    line-height: 1.5;
    max-width: 700px;
    text-align: center;
    background-color: #ffffff;
    padding: 0 40px;
    position: relative;
    z-index: 1;
    margin: 0;
}

/* Projects - Bottom Right Position */
.nav-gate-projects {
    align-self: flex-end;
    margin-right: 123px;
}

/* Case Studies - Position adjustment */
.nav-gate-case-studies {
    margin-left: 103px;
}

/* =============================================
   CASE STUDIES LIST VIEW - Screen 04
   ============================================= */
.case-studies-view {
    display: none;
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background-color: #ffffff;
    padding: 20px 147px 40px;
    /* Increased horizontal padding by 25px per side */
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-studies-view.is-visible {
    display: block;
    opacity: 1;
}

/* Page Title */
.cs-page-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 40px 0;
    text-transform: uppercase;
}

/* Timeline Container */
/* Case Studies View Container */
.case-studies-view {
    padding-top: 140px;
}

.cs-timeline {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Case Study Item */
.cs-item {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

/* Visual Block - Folder Style */
.cs-visual {
    display: flex;
    justify-content: center;
}

.cs-item-left .cs-visual {
    justify-content: center;
    padding-left: 55px;
}

.cs-item-right .cs-visual {
    justify-content: center;
    padding-right: 55px;
}

.cs-folder {
    width: 280px;
    height: 264px;
    position: relative;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08));
}

.cs-folder-tab {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 17px;
    background: linear-gradient(135deg, #e8e8e8 0%, #d4d4d4 100%);
    border-radius: 8px 8px 0 0;
}

.cs-folder-body {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: 16px;
    padding: 120px 24px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.cs-folder-title {
    font-family: 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #4a4a4a;
    margin: 0 0 8px 0;
}

.cs-folder-subtitle {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #888888;
    margin: 0;
}

/* Connector / Timeline */
.cs-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cs-number {
    display: none;
}

.cs-line {
    display: none;
}

/* Timeline Curve */
.cs-timeline-curve {
    display: none;
}

/* Content Block */
.cs-content {
    max-width: 400px;
}

.cs-item-left .cs-content {
    text-align: left;
}

.cs-item-right .cs-content {
    text-align: right;
    margin-left: auto;
}

.cs-time {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #888888;
    display: block;
    margin-bottom: 12px;
}

.cs-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.cs-description {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.cs-role {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #888888;
    display: block;
    margin-bottom: 24px;
}

/* Action Buttons */
.cs-actions {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 16px;
}

.cs-item-right .cs-actions {
    justify-content: flex-end;
}

.cs-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 24px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cs-btn-primary {
    background-color: #4a4a4a;
    color: #ffffff;
    border: none;
}

.cs-btn-primary:hover {
    background-color: #333333;
}

.cs-btn-secondary {
    background-color: transparent;
    color: #4a4a4a;
    border: 1px solid #d0d0d0;
}

.cs-btn-secondary:hover {
    background-color: #f5f5f5;
    border-color: #aaaaaa;
}

/* Back Button */
.cs-back-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.cs-back-btn:hover {
    background-color: #f5f5f5;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* =============================================
   TIMELINE CONNECTOR LAYER (Background Layer)
   Bounded to .cs-timeline container, not viewport
   ============================================= */
.timeline-layer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 321px;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.timeline-svg {
    width: 100%;
    height: 100%;
    /* Let SVG scale naturally to fit container height */
}

/* Number Nodes */
.timeline-node {
    fill: transparent;
    stroke: #c0c0c0;
    stroke-width: 1;
}

.timeline-node-text {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    fill: #999999;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* Connecting Path */
.timeline-path {
    fill: none;
    stroke: #c0c0c0;
    stroke-width: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: timeline-reveal 0.6s ease-out forwards;
}

@keyframes timeline-reveal {
    to {
        stroke-dashoffset: 0;
    }
}

/* =============================================
   PREVIEW SCREEN - SmartMeet
   ============================================= */
/* =============================================
   PREVIEW SCREEN - SmartMeet
   Fixed Viewport, No Scroll
   ============================================= */
.preview-screen {
    display: none;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #ffffff;
    padding: 140px 120px 0;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-direction: column;
}

.preview-screen.is-visible {
    display: flex;
    opacity: 1;
}

/* Header Bar */
.preview-header-bar {
    width: 100%;
    margin: 0;
    padding: 60px 24px 40px;
    /* Reduced by 40% from 40px */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 20;
}

.preview-header {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(31.3px, 3.86vw, 41.7px);
    /* Increased by another 5% from clamp(29.8px, 3.68vw, 39.7px) */
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1a1a1a;
    text-transform: uppercase;
    margin: 0;
    flex: 1;
    text-align: center;
}

.preview-content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    transform: translateY(-10px);
    /* Move 10px upward */
}

/* Project Identity */
.preview-identity {
    max-width: none;
    /* Expanded to allow one-line flow */
    margin: 0 0 24px 0;
    padding-left: 50px;
    /* Additional Padding */
    text-align: left;
    flex-shrink: 0;
}

.preview-project-name {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(29px, 3.6vw, 38.6px);
    /* Increased by another 5% from clamp(27.6px, 3.45vw, 36.8px) */
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px 0;
}

.preview-descriptor {
    font-family: 'Manrope', sans-serif;
    font-size: 19.3px;
    /* Increased by another 5% from 18.4px */
    font-weight: 400;
    color: #666666;
    margin: 0;
}

/* Content Sections */
.preview-section {
    max-width: none;
    /* Expanded to allow one-line flow */
    margin: 0 0 20px 0;
    padding-left: 50px;
    /* Additional Padding */
    flex-shrink: 0;
}

.preview-section-title {
    font-family: 'Manrope', sans-serif;
    font-size: 16.9px;
    /* Increased by another 5% from 16.1px */
    font-weight: 600;
    color: #888888;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.preview-section-content {
    font-family: 'Manrope', sans-serif;
    font-size: 18.1px;
    /* Increased by another 5% from 17.25px */
    font-weight: 400;
    color: #4a4a4a;
    line-height: 1.6;
    margin: 0;
}

/* Bullet List */
.preview-list {
    font-family: 'Manrope', sans-serif;
    font-size: 18.1px;
    /* Increased by another 5% from 17.25px */
    font-weight: 400;
    color: #4a4a4a;
    line-height: 1.6;
    margin: 0;
    padding-left: 20px;
}

.preview-list li {
    margin-bottom: 4px;
}

/* Mockup Preview */
.preview-mockups {
    margin: auto auto 0;
    display: flex;
    justify-content: center;
    margin-bottom: -40px;
    /* Tuck slightly */
    flex-shrink: 1;
    z-index: 1;
}

.preview-mockup-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: -40px;
    position: relative;
    transform: scale(0.9);
    /* Slight scale down to fit */
    transform-origin: bottom center;
}

.preview-mockup {
    width: 140px;
    /* Slightly smaller base size */
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.preview-mockup-left {
    transform: translateX(20px) rotate(-5deg);
    z-index: 1;
}

.preview-mockup-center {
    z-index: 3;
    transform: scale(1.1);
}

.preview-mockup-right {
    transform: translateX(-20px) rotate(5deg);
    z-index: 2;
}

/* Gradient Overlay & CTA */
.preview-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 1) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 40px;
    z-index: 10;
    pointer-events: none;
}

.preview-cta {
    text-align: center;
    pointer-events: auto;
    /* Re-enable clicks */
}

.preview-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background-color: #1a1a1a;
    color: #ffffff;
    border: none;
    border-radius: 32px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.preview-cta-btn:hover {
    background-color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.preview-cta-subtext {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #888888;
    margin: 12px 0 0 0;
}

/* Standard Circular Back Button (Preview) */
.preview-header-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid #000000;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    transition: all 0.2s;
    position: absolute;
    left: 180px;
}

.preview-header-back-btn:hover {
    background-color: #f5f5f5;
}

/* =============================================
   FULL CASE STUDY VIEW - SmartMeet
   Block 01: Fixed Header & Intro
   ============================================= */
.cs-full-view {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cs-full-view.is-visible {
    display: block;
    opacity: 1;
}

/* Fixed Header */
.cs-fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    /* Standardize height */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    /* Safari support */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cs-fixed-header .cs-progress-nav {
    margin: 0;
    z-index: 21;
}

.cs-fixed-header .preview-header {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin: 0;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.cs-header-back-btn {
    margin: 0;
    z-index: 21;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.cs-header-title {
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 500;
    color: #000000;
    margin: 0 0 16px 0;
    text-align: center;
}

.cs-progress-nav {
    display: flex;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 4px;
    border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.cs-progress-link {
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    /* Smaller, cleaner */
    font-weight: 500;
    color: #666666;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.cs-progress-link.active {
    background-color: #000000;
    color: #ffffff;
    border-radius: 20px;
}

/* Content Container */
.cs-content-container {
    padding-top: 130px;
    /* Reduced by additional 30% from 180px */
    width: 100%;
    max-width: 1400px;
    /* Tighter width for editorial feel */
    margin: 0 auto;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 200px;
}

/* Identity & Meta Block */
.cs-intro-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
    /* Reduced margin */
    gap: 60px;
    padding-top: 20px;
}

.cs-identity-left {
    flex: 1;
}

.cs-project-title {
    font-family: 'Manrope', sans-serif;
    font-size: 52px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.cs-project-subtitle {
    font-family: 'Manrope', sans-serif;
    font-size: 52px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.cs-project-desc {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    margin: 0;
    max-width: 700px;
    line-height: 1.6;
}

.cs-meta-right {
    flex: 0 0 280px;
    text-align: left;
    padding-top: 8px;
    /* Visual alignment with title baseline */
}

.cs-meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cs-meta-list li {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    margin-bottom: 6px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.cs-meta-list li::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background-color: #000000;
    border-radius: 50%;
    opacity: 0.4;
}

/* Text Sections */
.cs-text-section {
    margin-bottom: 60px;
    /* Tighter spacing between sections */
    max-width: 800px;
    /* Reading width */
}

.cs-section-heading {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.cs-body-text {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    line-height: 1.6;
    margin: 0;
}

/* =============================================
   SPLIT BLOCKS - Why it Matters / Who it Impacts
   ============================================= */
.cs-split-block {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 60px;
    width: 100%;
    max-width: 1220px;
    /* Matched to uber-existing-frame width */
}

.cs-split-content {
    flex: 1;
    max-width: none;
    /* Allow content to span the wider container */
}

.cs-split-list {
    list-style: none;
    /* Using custom bullets like in reference */
    padding: 0;
    margin: 0;
}

.cs-split-list li {
    display: flex;
    align-items: flex-start;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.cs-split-list li::before {
    content: "•";
    margin-right: 15px;
    font-size: 18px;
    color: #555555;
    margin-top: 4px;
    font-weight: bold;
}

.cs-split-item-title {
    font-weight: 600;
    color: #111111;
    margin-right: 8px;
    flex-shrink: 0;
}

.cs-split-item-desc {
    font-weight: 400;
    color: #555555;
}


/* =============================================
   EXISTING APPROACHES - Data Viz
   ============================================= */
#cs-existing-approaches {
    margin-bottom: 30px;
    /* Reduced to 50% */
}

.cs-stats-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-top: 40px;
}

.cs-stats-left {
    flex: 1.2;
    /* ~60% */
}

.cs-stats-right {
    flex: 0.8;
    /* ~40% */
    transform: translateX(232px);
}

.cs-stats-subheading {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin: 0 0 32px 0;
    line-height: 1.3;
}

/* Horizontal Bars */
.cs-bar-row {
    margin-bottom: 24px;
}

.cs-bar-label {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    margin-bottom: 8px;
    display: block;
    line-height: 1.6;
}

.cs-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cs-bar-track {
    width: 100%;
    height: 8px;
    background-color: #E6E6E6;
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
    /* Take available space */
}

.cs-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    /* Start at 0 for animation */
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-bar-value {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    min-width: 30px;
    line-height: 1.6;
}

/* Circular Chart */
.cs-circle-wrapper {
    display: flex;
    align-items: center;
    gap: 32px;
}

.cs-circle-chart {
    position: relative;
    width: 210px;
    /* Increased by ~30% */
    height: 210px;
}

.cs-circle-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.cs-circle-bg {
    fill: none;
    stroke: #E6E6E6;
    stroke-width: 12;
    /* Thicker stroke matching visual */
}

.cs-circle-progress {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 565;
    /* 2 * PI * 90 */
    stroke-dashoffset: 565;
    /* Start full offset (empty) */
    transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-circle-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    /* Ensure centering works for block text */
}

.cs-circle-percentage {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    line-height: 1;
    margin-bottom: 4px;
}

.cs-circle-label {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    white-space: normal;
    line-height: 1.6;
}

/* Legend */
.cs-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #4a4a4a;
}

.cs-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cs-legend-val {
    margin-left: auto;
    /* Push to right */
    font-weight: 600;
    color: #000000;
    padding-left: 12px;
}

/* =============================================
   IDEATION & PROCESS
   ============================================= */
#cs-process {
    margin-top: 40px;
    /* Adjusted from -170px to fix overlap after container nesting */
}


.cs-process-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    /* Increased by 100% from 60px */
    margin-top: 0;
    /* logic moved to container #cs-ideation */
    width: 100%;
    align-items: center;
    /* Vertically align columns */
    padding-left: 0;
}

.cs-process-subheading {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin: 0 0 24px 0;
    line-height: 1.3;
}

.cs-process-list {
    list-style-type: none;
    /* Custom bullets */
    padding: 0;
    margin: 0;
}

.cs-process-list li {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    white-space: nowrap;
}

.cs-process-list li::before {
    content: '○';
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
    flex-shrink: 0;
}



/* =============================================
   DESIGN EXECUTION
   ============================================= */
#cs-design {
    margin-top: 60px;
    position: relative;
    width: 100%;
    margin-bottom: 28px;
    /* Further reduced by 30% from 40px */
    padding-left: 0;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

#cs-design .cs-section-heading,
#uber-design .cs-section-heading {
    margin-left: 0;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 24px;
    line-height: 1.3;
}

.cs-execution-subtext {
    margin-left: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    margin-bottom: 28px;
    line-height: 1.6;
}

#cs-validation,
#uber-validation {
    margin-top: -60px;
    padding-top: 18px;
    padding-left: 0;
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

.cs-usability-group {
    padding-bottom: 30px;
    /* Spacing between groups */
}

.cs-usability-heading {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    padding-bottom: 20px;
    margin: 0;
    text-align: left;
    line-height: 1.3;
}

.cs-usability-question {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    padding-bottom: 5px;
    margin: 0;
    text-align: left;
    line-height: 1.3;
}

.cs-usability-description {
    padding-left: 30px;
    padding-right: 122px;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    margin: 0;
    text-align: left;
    padding-bottom: 5px;
    width: 100%;
    max-width: none;
    line-height: 1.6;
}

/* BLOCK 10.5: FACULTY FEATURES */
.cs-faculty-section {
    padding: 80px 0;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    text-align: left;
}

.cs-faculty-grid {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    margin-top: 60px;
    padding-bottom: 40px;
}

.cs-faculty-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 255px;
    /* Reduced by 15% from 300px */
}

.cs-faculty-mockup {
    width: 100%;
    height: auto;
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.cs-faculty-item.left {
    transform: translateX(51px) rotate(-8deg);
    /* Reduced by 15% from 60px */
    z-index: 1;
}

.cs-faculty-item.center {
    transform: scale(1.1);
    z-index: 2;
}

.cs-faculty-item.right {
    transform: translateX(-51px) rotate(8deg);
    /* Reduced by 15% from -60px */
    z-index: 1;
}

.cs-faculty-label {
    margin-top: 30px;
    background: #FFFFFF;
    padding: 10px 24px;
    border-radius: 30px;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #111111;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}

/* BLOCK 12: FINAL OUTCOME */
.cs-outcome-section {
    background-color: #FFFFFF;
    width: 100%;
    margin-top: -55px;
    /* Adjusted from 5px to move 20px upward */
    padding-bottom: 70px;
    /* Standardized to 70px */
}

.cs-outcome-container {
    max-width: 1440px;
    margin: 0 auto;
    text-align: left;
    padding-bottom: 48px;
    /* Reduced by 40% from 80px */
}

.cs-outcome-title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    padding-top: 60px;
    margin: 0;
    line-height: 1.3;
}

.cs-outcome-bullets {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    /* 20px gap below title */
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* 14px gap between bullets */
}

.cs-outcome-bullets li {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    position: relative;
    padding-left: 1.25em;
    line-height: 1.6;
}

.cs-outcome-bullets li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #555555;
}

.cs-cta-row {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cs-cta-text {
    font-family: 'Manrope', sans-serif;
    font-size: 52px;
    font-weight: 700;
    color: #000000;
    margin: 0;
    line-height: 1.2;
}

.cs-cta-button {
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    background-color: #000000;
    padding: 12px 20px;
    border-radius: 999px;
    display: inline-block;
}

.cs-cta-button:hover {
    opacity: 0.8;
}

/* 3-Column Grid Layout */
.cs-exec-grid {
    display: grid;
    grid-template-columns: minmax(300px, 420px) 120px 1fr;
    gap: 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
    position: relative;
}

/* Column 1: Mockups */
/* Column 1: Mockups (Now Horizontal Row) */
.cs-exec-col-mockups {
    grid-column: 1 / -1;
    /* Span full width */
    display: flex;
    flex-direction: row;
    /* Horizontal alignment */
    justify-content: space-between;
    /* Equal spacing */
    align-items: center;
    gap: 44px;
    /* Increased by 10% from 40px */
    padding-top: 20px;
}

.cs-mockup-wrapper {
    width: auto;
    /* Allow shrink */
    display: flex;
    justify-content: center;
    position: relative;
    flex: 1;
    /* Distribute space */
}

.cs-exec-mockup {
    width: 100%;
    max-width: 225px;
    /* 300px * 0.75 = 225px */
    height: auto;
    border-radius: 20px;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
    /* Initial state for animation */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Row 2: Timeline (Horizontal) */
.cs-exec-timeline-horizontal {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 44px;
    /* Increased by 10% from 40px */
    position: relative;
    overflow: hidden;
    /* Lock scroll explicitly */
    padding-top: 95px;
    /* Moved 15px above from 110px */
    margin-bottom: 60px;
}

.cs-timeline-wrapper {
    flex: 1;
    /* Match mockup wrappers */
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.cs-timeline-node-horz {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 2px solid #D9D9D9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    z-index: 2;
}

.cs-timeline-track-horz {
    position: absolute;
    top: 115px;
    /* Adjusted for 95px padding (95+20) */
    left: 10%;
    right: 10%;
    /* Shortened by 20% (centered) */
    height: 2px;
    background-color: #E6E6E6;
    z-index: 0;
}

/* Row 3: Content (Horizontal) */
.cs-exec-row-content {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 44px;
    /* Increased by 10% from 40px */
    margin-bottom: 80px;
}

.cs-content-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    /* Center the block relative to the column */
}

/* Reuse existing .cs-step-block styles, but maybe adjust width if needed */
.cs-step-block {
    width: 100%;
    max-width: 300px;
    /* Limit width for readability, similar to mockups */
    text-align: left;
    /* Keep text left aligned inside the block */
}

/* SMARTMEET DESIGN EXECUTION LABELS (20% INCREASE) */
.cs-exec-label {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin: 0;
    text-align: left;
    line-height: 1.3;
}

.cs-exec-sublabel {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin: 0;
    padding-top: 15px;
    text-align: left;
    line-height: 1.3;
}

.cs-exec-step-bullets {
    padding: 0;
    margin: 15px 0 0 0;
    list-style: disc;
    padding-left: 20px;
    text-align: left;
}

.cs-exec-step-bullets li {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    margin-bottom: 8px;
    line-height: 1.6;
}


/* ACADCOMP EXISTING APPROACHES CUSTOM SECTION */
.uber-existing-frame {
    width: 100%;
    margin: 80px auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    box-sizing: border-box;
}

.uber-existing-frame .cs-section-heading {
    margin-bottom: 40px;
    text-align: left;
}

.uber-existing-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.uber-existing-item {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    font-family: 'Manrope', sans-serif;
    line-height: 1.6;
}

.uber-existing-item::before {
    content: "•";
    margin-right: 15px;
    font-size: 18px;
    color: #555555;
    margin-top: 4px;
    font-weight: bold;
}

.uber-item-title {
    font-weight: 600;
    font-size: 18px;
    color: #111111;
    margin-right: 8px;
    flex-shrink: 0;
    text-align: left;
}

.uber-item-desc {
    font-weight: 400;
    font-size: 18px;
    color: #555555;
    text-align: left;
}

/* DESIGN EXECUTION - Vertical Storyteller Flow */
.cs-vertical-flow {
    position: relative;
    max-width: 1000px;
    margin: 60px auto;
    padding: 40px 0;
}

.cs-vertical-connector {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: repeating-linear-gradient(to bottom,
            #E6E6E6,
            #E6E6E6 10px,
            transparent 10px,
            transparent 20px);
    transform: translateX(-50%);
    z-index: 1;
}

.cs-step-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 120px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.cs-step-row.cs-step-reverse {
    flex-direction: row-reverse;
}

.cs-step-mockup {
    flex: 0 0 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cs-step-mockup img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease;
}

.cs-step-mockup:hover img {
    transform: translateY(-10px);
}

.cs-mockup-dual {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.cs-mockup-dual img {
    max-width: 180px;
}

.cs-step-content {
    flex: 0 0 45%;
    padding: 0 20px;
}

.cs-step-number {
    width: 40px;
    height: 40px;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 20px;
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px #E6E6E6;
}

/* Specific Node Positioning Alignment */
.cs-step-row .cs-step-content {
    display: flex;
    flex-direction: column;
}

.cs-step-row:nth-child(even) .cs-step-content {
    align-items: flex-end;
    text-align: right;
}

.cs-step-row:nth-child(even) .cs-step-bullets {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cs-step-title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 12px;
    line-height: 1.3;
}

.cs-step-subtitle {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 16px;
    line-height: 1.3;
}

.cs-step-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cs-step-bullets li {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
}

.cs-step-bullets li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #555555;
}

.cs-step-row:nth-child(even) .cs-step-bullets li {
    padding-left: 0;
    padding-right: 20px;
}

.cs-step-row:nth-child(even) .cs-step-bullets li::before {
    left: auto;
    right: 0;
}

/* Header Tweaks */
.cs-header-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cs-fixed-header .preview-header {
    margin: 0;
    padding: 0;
}

/* Usability Tweaks */
.cs-usability-group ul {
    list-style: none;
    padding-left: 30px;
}

.cs-usability-group ul li {
    margin-bottom: 8px;
    position: relative;
}

.cs-usability-group ul li::before {
    content: "→";
    position: absolute;
    left: -20px;
    color: #000;
}


/* Specific Node Positioning - Calculated to align with Mockup Centers
   Mockup approx height is ~600-800px depending on scaling. 
   Assuming consistent stack. 
   We will use Flex/Grid gap logic or simple nth-child positioning if height is fluid.
   Better approach: Use sticky positioning or just let JS align them? 
   User said "Timeline nodes ... aligned horizontally with Center of interaction".
   
   SIMPLER PURE CSS APPROACH: 
   The mockups define the flow. 
   Actually, the Node should probably be IN the grid row if we did row-based grid. 
   But user asked for Column-based Grid.
   
   We'll use CSS spacing to match the Mockup gap. 
   If Mockup wrapper is flexible height, this is tricky specifically in CSS only without subgrid.
   However, we can assume the images correspond to the steps.
   
   Let's use `calc` based on typical mockup aspect ratio?
   Or better: Change layout to distinct ROWS?
   User asked: "COLUMN 1 ..., COLUMN 2 ..., COLUMN 3 ...".
   But visual alignment is row-based.
   
   Safe bet: Use simple top offsets percentages or calc if we know the size.
   Images are variable.
   
   Alternative: Make .cs-exec-grid have 3 rows?
   No, user specifically described "COLUMN 1... Stack 3 mockups. COLUMN 2... Timeline. COLUMN 3... Content".
   
   I will use `top` percentages for nodes as a close approximation, or standard spacing if images are uniform height.
   Images are cs1_sm1.png (709x1439). They are uniform.
   
   Let's assume the mockups render at a consistent height (e.g. 600px).
   Gap is 64px.
   Center of 1st = 300px.
   Center of 2nd = 600 + 64 + 300 = 964px.
   Center of 3rd = 600 + 64 + 600 + 64 + 300 = 1628px.
   
   Since images are responsive, pixel values fail.
   
   REVISED STRATEGY for Timeline Dots:
   I will put the dots inside the HTML structure next to the mockups or use JS to align them perfectly if CSS fails.
   But to respect "3 Column Grid" request strictly:
   I'll set the Timeline Col to `display: flex; flex-direction: column; justify-content: space-between; padding: [half-mockup-height] 0`.
*/
.cs-exec-col-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* To distribute nodes exactly like mockups */
    gap: 64px;
    /* Matches mockup gap */
    padding-top: 0;
}

/* We need to position the dots at the CENTER of the mockups.
   If mockup is flow content, we need to push the dot down.
*/
.cs-timeline-node {
    /* Use margin to separate them */
    /* If we assume mockup is ~600px tall, center is 300px. */
    /* So first node needs top margin of ~300px? */
    /* Let's use a spacer div methodology or relative top. */

    position: relative;
    top: 300px;
    /* Approximately center of 600px mockup */
    /* This implies Mockups are rendered at ~600px height. */
}

/* Column 3: Content */
.cs-exec-col-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Matches user request */
    padding-top: 250px;
    /* Align text block center with mockup center approximately */
}

.cs-step-block {
    min-height: 600px;
    /* Match mockup height for rhythm */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cs-exec-title {
    font-family: 'Manrope', sans-serif;
    font-size: 42px;
    font-weight: 600;
    /* Semibold */
    color: #1a1a1a;
    letter-spacing: -1px;
    margin-bottom: 35px;
    line-height: 1.2;
}

.cs-exec-subtitle {
    font-family: 'Manrope', sans-serif;
    font-size: 36px;
    font-weight: 600;
    /* Semibold */
    color: rgba(0, 0, 0, 0.6);
    /* 60% opacity roughly on black base, or stick to rgba */
    letter-spacing: -1px;
    margin-bottom: 35px;
}

.cs-exec-list {
    list-style: none;
    padding: 0;
}

.cs-exec-list li {
    font-family: 'Manrope', sans-serif;
    font-size: 36px;
    font-weight: 400;
    /* Regular */
    color: rgba(0, 0, 0, 0.6);
    /* 60% opacity */
    letter-spacing: -1px;
    line-height: 1.5;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
}

.cs-exec-list li::before {
    content: '○';
    font-size: 30px;
    /* Match text size */
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
    width: auto;
    height: auto;
    background-color: transparent;
    border-radius: 0;
}

/* Mobile Responsive */


/* =============================================
   MY PROJECTS SCREEN (D-04)
   ============================================= */
.projects-view {
    background-color: #FFFFFF;
    height: 100vh;
    width: 100%;
    padding: 40px 147px 120px 147px;
    /* Increased horizontal padding by 25px per side */
    z-index: 900;
    position: relative;
    overflow: hidden;
}

.projects-header {
    max-width: 960px;
    margin: 0 auto 80px auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projects-back-btn {
    position: absolute;
    left: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.projects-back-btn:hover {
    opacity: 0.6;
}

.projects-page-title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #000000;
    letter-spacing: -1px;
    margin: 0;
}

.projects-list-container {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.project-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 24px 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
    /* Animation base state */
    opacity: 0;
    transform: translateY(20px);
}

.project-item.is-animated {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.project-item:hover {
    opacity: 0.6;
}

.project-badge {
    width: 36px;
    height: 36px;
    border: 1px solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    flex-shrink: 0;
    margin-top: 4px;
}

.project-info {
    flex: 1;
}

.project-item-title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #000000;
    letter-spacing: -1px;
    margin: 0 0 8px 0;
}

.project-item-desc {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.4;
    margin: 0;
}

.project-divider {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: 24px;
    width: 100%;
}

/* =============================================
   PROJECT DETAIL VIEW (D-04.1)
   ============================================= */
.project-detail-view {
    background-color: #FFFFFF;
    min-height: 100vh;
    width: 100%;
    padding-bottom: 0;
    z-index: 950;
    position: relative;
    font-family: 'Manrope', sans-serif;
    /* Forced for all content */
}

.project-detail-view *,
.project-detail-view h1,
.project-detail-view h2,
.project-detail-view h3,
.project-detail-view p,
.project-detail-view span,
.project-detail-view li {
    font-family: 'Manrope', sans-serif !important;
}

.project-detail-header {
    width: 100%;
    padding: 32px 0 0 200px;
    /* Left align with 200px padding */
    position: relative;
    display: flex;
    justify-content: flex-start;
    /* Aligned left */
    align-items: center;
    gap: 0;
}

.project-detail-back-btn,
.back-btn {
    position: absolute;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid #000000;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    padding: 0;
}

.project-detail-back-btn:hover,
.back-btn:hover {
    opacity: 0.6;
}

/* Standardized Header Bar for Projects */
.preview-header-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    /* Fixed positioning */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    /* White fill for efficiency */
    z-index: 1000;
    padding: 20px 24px;
    /* Reduced by 40% from 40px */
}

/* Generic Header Padding (Preview Screens & Case Studies) */
.preview-header-bar .preview-header {
    padding-left: 0;
    margin-left: -30px;
    /* Reduced by additional 130px from 100px */
}

/* Specific Override for Project Full View (+50px) */
.project-detail-view .preview-header {
    padding-left: 20px;
    /* Reduced by additional 130px from 150px */
}

/* Specific Fix for Full Case Study View (Prevents wrapping) */
.cs-fixed-header .preview-header {
    white-space: nowrap;
    /* Prevent title from breaking into multiple lines */
}

/* Add padding to container to prevent content hiding behind fixed header */
.project-detail-view {
    padding-top: 100px;
}

.project-detail-page-title {
    font-family: 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #000000;
    letter-spacing: -1px;
    margin: 0;
    text-align: center;
}

.project-intro {
    text-align: center;
    margin-top: 18px;
    /* Reduced by 40% from 30px */
    padding: 0 20px;
}

.project-detail-name {
    font-family: 'Manrope', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #000000;
    letter-spacing: -1px;
    margin: 0;
}

.project-detail-desc {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    margin: 12px 0 0 0;
    padding: 0 200px;
    /* Added 200px padding */
}

.core-flow-section {
    text-align: center;
    margin-top: 80px;
    /* Standardized spacing */
    padding: 0 20px;
}

.detail-section-title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #111111;
    margin: 0;
    line-height: 1.3;
}

.detail-section-subtext {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #555555;
    margin: 8px 0 0 0;
    line-height: 1.6;
}

.detail-cta-btn {
    background-color: #000000;
    color: #FFFFFF;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 22px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.detail-cta-btn:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.ui-screens-section {
    text-align: center;
    margin-top: 80px;
    /* Standardized spacing */
}

.ui-screens-list {
    max-width: 1080px;
    margin: 64px auto 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 120px;
    /* Large vertical spacing */
}

.ui-screen-block {
    display: flex;
    align-items: flex-start;
    /* Align to the top of the content column */
    justify-content: center;
    gap: 30px;
    /* Horizontal gap between image and text */
    width: 100%;
    /* Animation base state */
    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);
}

.ui-screen-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.zigzag-right {
    flex-direction: row;
}

.zigzag-left {
    flex-direction: row;
}

.ui-screen-image {
    flex: 1;
    max-width: 45%;
    display: flex;
    justify-content: center;
}

.ui-screen-image img {
    width: 100%;
    max-width: 224px;
    /* Reduced original 320px by 30% */
    height: auto;
    /* Maintain aspect ratio */
    border-radius: 24px;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
    /* Precisely as specified x:0, y:-2, blur:15 */
}

.ui-screen-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background-color: #ffffff;
    /* Added white fill color */
    padding: 20px;
    /* Added some padding for the background */
    border-radius: 12px;
}

/* Decorative circle node below the screen block */
.ui-screen-node {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 0.5px solid rgba(161, 161, 161, 0.6);
    /* 0.5px grey stroke with 60% opacity */
    margin: 40px auto 0 auto;
    /* Centered under the block and lines */
    display: flex;
    align-items: center;
    justify-content: center;
}

.zigzag-right .ui-screen-content {
    align-items: flex-start;
}

.ui-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ui-bullets li {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 500;
    /* Medium */
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
    letter-spacing: normal;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.check-icon {
    flex-shrink: 0;
    margin-top: 4px;
}

.insight-section {
    text-align: center;
    margin-top: -40px;
    /* Moved up 40px (0px -> -40px) */
    padding: 0 200px;
    /* Added 200px left/right padding */
}

.insight-text {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    margin: 12px 0 100px 0;
}

/* =============================================
   T-SHIRT DESIGN PROJECTS SCREEN
   ============================================= */

.tshirt-project-view {
    background-color: #FFFFFF;
    height: 100vh;
    /* Unscrollable as per request */
    width: 100%;
    position: relative;
    /* Lock scroll */
    padding-top: 110px;
    /* Reduced from 140px to tighten gap */
}

.tshirt-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px 64px 32px;
    /* Top padding reduced to 0 (was 64px) for 70% total gap reduction */
    text-align: center;
}

/* Typography */
.tshirt-section-title {
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.tshirt-subtitle {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 45px;
    /* Reduced by 20% from 56px */
}

/* Quote Container */
.tshirt-quote-container {
    margin: 0 auto 56px auto;
    /* Reduced by 20% from 70px */
    max-width: 800px;
}

.tshirt-quote {
    font-family: 'Manrope', sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: #000000;
    font-style: italic;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(20px);
}

/* Product Visuals Container */
.tshirt-visuals-container {
    position: relative;
    width: 100%;
    height: 480px;
    height: 350px;
    /* Reduced height further (480->350px) to tighten layout */
    margin: -40px auto 10px auto;
    /* Reduced margin-bottom (28->10px) to pull footer up */
    display: flex;
    align-items: center;
    justify-content: center;
}

.tshirt-product {
    position: absolute;
    transition: all 0.3s ease;
}

.tshirt-product img {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    border-radius: 30px;
    outline: 1px solid #FFFFFF;
    outline-offset: -1px;
}

/* Center Hoodie - Primary Focus */
.tshirt-center img {
    height: 300px;
    /* Reduced by additional 25% from 400px */
}

.tshirt-center {
    z-index: 3;
    opacity: 0;
    transform: translateY(15px);
    /* Moved up: 30px -> 15px (Y-15px) */
}

.tshirt-left {
    left: 24%;
    /* Moved out by 4% (28->24%) to shift ~10-15px away from center */
    z-index: 1;
    opacity: 0;
    transform: translateY(15px) translateX(-20px);
    /* Moved up: 30px -> 15px (Y-15px) */
}

.tshirt-left img {
    height: 300px;
    /* Matched to center image height */
    transform: rotate(-8deg);
}

.tshirt-right {
    right: 24%;
    /* Moved out by 4% (28->24%) to shift ~10-15px away from center */
    z-index: 1;
    opacity: 0;
    transform: translateY(15px) translateX(20px);
    /* Moved up: 30px -> 15px (Y-15px) */
}

.tshirt-right img {
    height: 300px;
    /* Matched to center image height */
    transform: rotate(8deg);
}

/* Footer */
.tshirt-footer {
    margin-top: 0px;
    /* Reduced from 20px to 0 to minimize scroll risk */
}

.tshirt-footer p {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
}

/* =============================================
   TRANSITION ANIMATIONS
   ============================================= */

/* Entry Transition - Fade in + Translate Up */
@keyframes tshirtFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Quote Animation */
.tshirt-quote.animate-in {
    animation: tshirtFadeInUp 600ms ease-out forwards;
}

/* Product Sequential Animations */
.tshirt-center.animate-in {
    animation: tshirtFadeInUp 600ms ease-out 200ms forwards;
}

.tshirt-left.animate-in {
    animation: tshirtFadeInUp 600ms ease-out 400ms forwards;
}

.tshirt-right.animate-in {
    animation: tshirtFadeInUp 600ms ease-out 600ms forwards;
}

/* View Transition Classes */
.tshirt-view-entering {
    animation: tshirtFadeInUp 500ms ease-in-out forwards;
}

.tshirt-view-exiting {
    opacity: 0.8;
    transform: translateY(-16px);
    transition: all 500ms ease-in-out;
}



/* =============================================
   UI SCREEN HIGHLIGHT BLOCK - LAYERED COMPOSITION
   ============================================= */

/* Container for the entire block */
.ui-screen-highlight-block {
    position: relative;
    width: 100%;
    height: 440px;
    margin: 80px 0;
    padding-left: 200px;
    /* No background, no card, no shadow */
}

/* Layer 1: Anchor Circle (Structural Base) */
.ui-anchor-circle {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 2px solid rgba(207, 202, 202, 0.5);
    top: 0;
    left: 87px;
    z-index: 1;
}

/* Layer 2: Feature Text Lines */
.ui-feature-text {
    position: absolute;
    top: 30px;
    left: 260px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ui-feature-line {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #FFFFFF;
    padding: 12px 24px 12px 12px;
    border-radius: 4px;
}

.ui-tick-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.ui-feature-line span {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    white-space: nowrap;
    letter-spacing: -0.01em;
}


/* Layer 3: Mobile Mockup (Primary Visual Focus) */
.ui-mockup-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

.ui-mockup-image {
    width: auto;
    height: 420px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 15px rgba(0, 0, 0, 0.1));
}

/* Layer 4: Numbered Label (Glass Morphism) */
.ui-number-label {
    position: absolute;
    top: -15px;
    left: 85px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid #D9D9D9;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(151, 151, 151, 0.6);
}

/* =============================================
   MIRRORED UI SCREEN BLOCK - RIGHT ALIGNED
   ============================================= */

.ui-screen-mirrored {
    padding-left: 0;
    padding-right: 200px;
    margin-top: -380px;
}

.ui-screen-mirrored .ui-mockup-container {
    left: auto;
    right: 0;
}

.ui-screen-mirrored .ui-anchor-circle {
    left: auto;
    right: 90px;
}

.ui-screen-mirrored .ui-feature-text {
    left: auto;
    right: 275px;
    top: calc(50% - 130px);
    transform: translateY(-50%);
}

.ui-screen-mirrored .ui-number-label {
    left: auto;
    right: 85px;
}

/* Section Container Styling */
.ui-screens-section {
    background-color: #FFFFFF;
    padding: 60px 40px 25px 40px;
    /* Bottom padding reduced by 30% (36px -> 25px) */
    margin-top: -10px;
}

.ui-screens-list {
    /* Container for blocks - currently holds one */
    width: 100%;
}

/* UI Screen Block Group Wrapper */
.ui-screen-block-group {
    margin-bottom: 0;
}

.ui-screen-block-group:first-child {
    margin-top: -25px;
}

.ui-screen-block-group:nth-child(2),
.ui-screen-block-group:nth-child(3) {
    margin-top: -300px;
}

.ui-screen-block-group:last-child {
    margin-bottom: 0;
}

/* =============================================
   SECTION 1 — CREATIVE EXTENSIONS (GATEWAY)
   ============================================= */
.creative-extensions {
    background-color: #ffffff;
    width: 100%;
    height: auto;
    /* Allow heights to be determined by content */
    margin-top: -138px;
    /* Reduced gap by another 20px (total 100px reduction including padding removal) */
    position: relative;
    z-index: 1;
    /* Stay above background elements */
    overflow: hidden;
    padding: 120px 122px 0;
    /* 120px top padding as requested; 122px matches main layout grid */
}

.section-title {
    font-family: 'Manrope', sans-serif;
    font-size: 56px;
    /* Matched to footer title size */
    font-weight: 700;
    color: #000000;
    margin-bottom: 56px;
    /* Space between title and split cards */
    text-align: center;
    /* Center aligned as requested */
}

.ce-split-container {
    display: flex;
    width: 100%;
    height: 580px;
    /* Fixed height for the cards container */
    position: relative;
    z-index: 0;
}

.ce-split-card {
    flex: 1;
    height: 100%;
    position: relative;
    text-decoration: none;
    transition: filter 0.3s ease;
    display: flex;
    padding: 60px;
    overflow: hidden;
    /* Each card is now a separate frame */
}

.ce-split-card:hover {
    filter: brightness(1.05);
}

/* Left Card: Museum of Art */
.ce-split-card.left {
    background: linear-gradient(135deg, #FFDB94 0%, #FFBD38 100%);
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 30px 0 0 30px;
}

/* Right Card: My Flutter Interfaces */
.ce-split-card.right {
    background: linear-gradient(225deg, #A4B8BC 0%, #6D7D81 100%);
    justify-content: flex-end;
    align-items: flex-start;
    text-align: right;
    border-radius: 0 30px 30px 0;
}

.ce-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    z-index: 20;
    /* Keep text above mockup images */
}

.ce-split-title {
    margin: 0;
    max-width: 300px;
}

.left .ce-split-title {
    font-family: 'Italiana', serif;
    font-size: 84px;
    font-weight: 400;
    line-height: 1.1;
    color: #FFFFFF;
}

.right .ce-split-title {
    font-family: 'Kode Mono', monospace;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.2;
    color: #000000;
    text-transform: capitalize;
    margin-left: auto;
    /* Align to right with button */
    text-align: right;
}

/* Common Circular Button Style */
.ce-split-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ce-split-card:hover .ce-split-btn {
    transform: scale(1.1);
}

.left .ce-split-btn {
    background-color: #FFFFFF;
    color: #FFBD38;
    align-self: flex-start;
}

.right .ce-split-btn {
    background-color: #000000;
    color: #FFFFFF;
    align-self: flex-end;
}

/* Fixed arrow icons to match requested direction (pointing outward) */
.left .ce-split-btn svg {
    transform: rotate(0deg);
    /* Points top-right */
}

.right .ce-split-btn svg {
    transform: rotate(270deg);
    /* Points top-left */
}

/* Individual Card Mockups */
.ce-card-mockup {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: auto;
    object-fit: contain;
    pointer-events: none;
    z-index: 10;
}

.ce-img-art {
    right: -215px;
    /* Shifted +10px right (total -215px) */
    height: 105%;
    /* Increased size by 5% */
    bottom: -45px;
    /* Brought 30px further down (total -45px) */
    filter: drop-shadow(-20px 20px 40px rgba(0, 0, 0, 0.15));
}

.ce-img-flutter {
    left: -200px;
    /* Shifted 200px left within the right frame */
    filter: drop-shadow(20px 20px 40px rgba(0, 0, 0, 0.15));
}

/* Responsive adjustments */





/* =============================================
   SECTION 2 — FOOTER (CONTACT CLOSURE)
   ============================================= */
.site-footer {
    background-color: #ffffff;
    padding: 80px 147px 120px 147px;
    /* Increased horizontal padding by 25px per side */
    text-align: center;
    position: relative;
    /* For pseudo-element positioning */
}

.site-footer::before {
    content: "";
    display: block;
    width: calc(100% - 400px);
    /* 200px left + 200px right */
    height: 1px;
    background-color: rgba(0, 0, 0, 0.05);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-title {
    font-family: 'Inter', sans-serif;
    font-size: 56px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 24px;
}

.footer-contact-text {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 0;
    margin-bottom: 48px;
}

.footer-social-row {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.footer-social-link {
    color: #888;
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-social-link:hover {
    color: #333;
    transform: translateY(-4px);
}