/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
}

/* For long URLs or super long strings, wrap safely without splitting words */
body, p, span, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Optional: Improve text rendering */
html, body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.8));
    z-index: 9999;
    transition: width 0.1s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

html {
    scroll-behavior: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #000;
    background: #fff;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Performance optimizations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* For long URLs or super long strings, wrap safely without splitting words */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* For long URLs or super long strings, wrap safely without splitting words */
p, span, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* GPU acceleration for animated elements */
.scroll-animated {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) !important;
    will-change: auto;
}

/* Performance optimization for large screens */
@media (min-width: 2560px) {
    /* Reduce will-change usage on large screens to improve performance */
    .scroll-animated,
    .about-expand-button {
        will-change: auto;
    }
    
    /* Optimize transforms for better performance */
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Reduce repaints by containing transforms */
    .graphic-service-image,
    .graphic-service-video,
    video,
    img {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    /* Prevent word wrapping in the middle of words */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #000;
    padding: 24px 0;
    transition: all 0.3s ease;
}

.navbar.scrolled {
    padding: 16px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
    gap: 20px;
}

.logo-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
}

.logo-btn:hover {
    transform: scale(1.05);
}

/* Individual Pills Connected by Faint Lines */
.nav-pill-container {
    display: flex;
    align-items: center;
    background: transparent;
    gap: 10px;
    position: relative;
    height: 44px;
    min-height: 44px;
}

/* Centered navigation pills */
.nav-pill-center {
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Contact Us on the right */
.nav-pill-right {
    position: absolute;
    right: 0;
}

.nav-segment {
    flex: 0 1 auto;
    background: transparent;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    cursor: pointer;
    position: relative;
    padding: 0 16px;
    text-align: center;
    text-decoration: none;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
    border: 1.5px solid #BDBDBD;
    border-radius: 999px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: fit-content;
}

/* Extra padding for longer text items */
.nav-segment[href*="website-design"],
.nav-segment[href*="graphic-design"] {
    padding: 0 20px;
}

/* Connecting lines removed */

/* Hover state - soft inner glow with outer glow effect */
.nav-segment:hover {
    box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.12), 
                0 0 20px rgba(255, 255, 255, 0.3),
                0 0 40px rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Active state - prominent glass effect */
.nav-segment.active,
.nav-segment[aria-current="page"] {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.12) 40%, rgba(255, 255, 255, 0.05) 70%, transparent 100%);
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Contact Us button - white background with black text */
.nav-pill-right .nav-segment {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-color: #FFFFFF;
}

.nav-pill-right .nav-segment:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.1),
                0 0 20px rgba(255, 255, 255, 0.4),
                0 0 40px rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 1);
}

.mobile-menu-btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.mobile-menu-btn span {
    width: 24px;
    height: 2px;
    background: #fff;
    transition: all 0.3s ease;
}

.mobile-menu {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mobile-menu-content a {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: block;
}

.mobile-menu-content a:hover {
    transform: scale(1.1);
}

/* Mobile and Tablet: Hide navigation pills and show hamburger menu when items don't fit */
@media (max-width: 1049px) {
    .nav-wrapper,
    .nav-pill-container {
        display: none !important;
    }
    
    .mobile-menu-btn {
        display: flex !important;
        z-index: 1001 !important;
        position: relative !important;
    }
    
    .nav-container {
        justify-content: space-between !important;
    }
    
    /* Ensure logo and hamburger are properly spaced */
    .logo-btn {
        flex-shrink: 0 !important;
    }
}

@media (min-width: 1050px) {
    .nav-pill-container {
        display: flex;
        flex-direction: row;
    }
    .mobile-menu-btn {
        display: none;
    }
}

/* Mobile: Shrink proportionally, keep individual pill shape */
@media (max-width: 639px) {
    .nav-pill-container {
        display: none !important;
    }
    
    .nav-segment {
        font-size: 0.75rem;
        padding: 0 16px;
        letter-spacing: 0.05em;
        border-radius: 999px;
    }
    
    /* Keep connectors on mobile */
    .nav-segment:not(:last-child)::after {
        height: 50%;
    }
    
    /* Maintain connection effect on mobile */
    .nav-segment:not(:last-child) {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .nav-segment:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

/* Hero Section */
.hero {
    position: relative;
    height: calc(100dvh - 80px);
    min-height: calc(100dvh - 80px);
    width: 100%;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    margin-top: 80px;
    /* Prevent scroll-based scale effects on hero section */
    transform: none !important;
    /* Lock dimensions - JavaScript will set fixed pixel values */
    box-sizing: border-box;
}

/* Second Hero Section */
.hero-secondary {
    position: relative;
    height: 100dvh;
    min-height: 100dvh;
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 40px;
    z-index: 10;
    overflow: visible;
    /* Prevent scroll-based scale effects on hero section */
    transform: none !important;
    /* Lock dimensions - JavaScript will set fixed pixel values */
    box-sizing: border-box;
}

/* Background Text - Behind Spline but in front of background */
.hero-secondary-bg-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
    width: 100%;
    max-width: 100%;
    padding: 0;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
}

.hero-secondary-bg-text-content {
    font-size: clamp(3rem, 8vw, 10rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    box-sizing: border-box;
}

.hero-secondary-bg-text-content .bg-word {
    display: inline-block;
    color: rgba(0, 0, 0, 0.08);
    opacity: 0;
    margin-right: 0.2em;
}

.bg-word-1 {
    animation: fadeInWord 1s ease-out 2.5s forwards;
}

.bg-word-2 {
    animation: fadeInWord 1s ease-out 2.8s forwards;
}

.bg-word-3 {
    animation: fadeInWord 1s ease-out 3.1s forwards;
}

@keyframes fadeInWord {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .hero-secondary-bg-text-content {
        font-size: clamp(2.5rem, 7vw, 6rem);
        letter-spacing: 0.005em;
    }
}

@media (max-width: 767px) {
    .hero-secondary-bg-text {
        padding: 0;
    }
    
    .hero-secondary-bg-text-content {
        font-size: clamp(1.5rem, 6vw, 4rem);
        letter-spacing: 0;
        padding: 0 3%;
    }
}

/* Spline Container for Second Hero */
.spline-container-secondary {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Hard-set height to prevent reflow during Spline loading phases */
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100% !important;
    /* Prevent scroll-based transforms and resizing */
    transform: none !important;
    transform-origin: center center !important;
    will-change: auto !important;
    contain: layout style paint !important; /* Isolate from layout changes */
    box-sizing: border-box !important;
}

.spline-canvas-secondary {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    pointer-events: auto;
    cursor: pointer;
    filter: grayscale(100%) brightness(1.1) contrast(0.95);
    /* Hard-set dimensions to prevent reflow during Spline loading */
    /* Prevent scroll-based transforms and resizing */
    transform: none !important;
    transform-origin: center center !important;
    will-change: auto !important;
    contain: layout style paint !important; /* Isolate from layout changes */
    object-fit: contain !important;
    box-sizing: border-box !important;
}

/* Fallback image for mobile */
.spline-fallback-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
    touch-action: pan-y pan-x;
    filter: grayscale(100%) brightness(1.1) contrast(0.95);
    transform: none !important;
    transform-origin: center center !important;
    will-change: auto !important;
    contain: layout style paint !important;
    box-sizing: border-box !important;
    /* Fade-in animation handled by JavaScript */
    transition: opacity 1s ease-in;
}

/* Override for tablets - force visibility even in media query range */
.spline-tablet-visible.spline-canvas-secondary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.spline-tablet-visible.spline-container-secondary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile only: Ensure fallback image is visible and Spline canvas is hidden */
@media (max-width: 768px), (hover: none) {
    .spline-canvas-secondary:not(.spline-tablet-visible) {
        display: none !important;
        visibility: hidden !important;
    }
    
    .spline-fallback-image {
        display: block !important;
        visibility: visible !important;
    }
}

/* Mobile: Disable pointer events and allow scrolling */
@media (max-width: 768px), (hover: none) {
    .spline-canvas-secondary {
        pointer-events: none !important;
        touch-action: pan-y pan-x !important; /* Allow all scrolling */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .spline-container-secondary {
        pointer-events: none !important;
        touch-action: pan-y pan-x !important; /* Allow all scrolling */
    }
    
    /* Ensure hero sections don't block scrolling */
    .hero-secondary {
        overflow: visible !important;
        position: relative !important;
    }
}

/* Logo on Robot Body */
.hero-secondary-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 10px), -50%);
    z-index: 15;
    opacity: 0;
    animation: fadeInLogo 1s ease-out 2.5s forwards;
    pointer-events: none;
    /* Ensure positioning is relative to hero section, not viewport */
    margin: 0;
}

.hero-secondary-logo-container {
    position: relative;
    width: clamp(120px, 15vw, 200px);
    height: auto;
    display: inline-block;
    perspective: 1000px;
}

.hero-secondary-logo-image {
    width: clamp(120px, 15vw, 200px);
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}


@keyframes fadeInLogo {
    from {
        opacity: 0;
        transform: translate(calc(-50% - 10px), -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(calc(-50% - 10px), -50%) scale(1);
    }
}

@media (max-width: 767px) {
    /* Ensure logo is centered within hero section, not viewport */
    .hero-secondary-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(calc(-50% - 10px), -50%);
        /* Ensure it's positioned relative to hero section */
        margin: 0;
    }
    
    .hero-secondary-logo-container {
        width: clamp(180px, 35vw, 280px) !important;
    }
    
    .hero-secondary-logo-image {
        width: clamp(180px, 35vw, 280px) !important;
    }
}

/* Futuristic Tech-UI Panels for Hero Secondary - Black Glass Style */
.hero-panel {
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 14px 16px;
    border-radius: 12px;
    backdrop-filter: blur(12px) saturate(120%);
    min-width: 160px;
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    z-index: 5;
    opacity: 0;
    animation: heroPanelFadeIn 0.8s ease-out forwards;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.hero-panel:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8));
    z-index: 6;
}

.hero-panel::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 12px;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(-12deg);
}


.hero-panel-title {
    font-weight: 700;
    letter-spacing: 0.6px;
    font-size: 13px;
    color: #fff;
    margin-bottom: 4px;
}

.hero-panel-muted {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
    display: block;
}

.hero-panel-big {
    font-size: 22px;
    font-weight: 700;
    margin-top: 6px;
    color: #fff;
    line-height: 1;
}

/* Panel positioning - Varied sizes and layouts */
.hero-panel-specs {
    left: 32px;
    top: 100px;
    width: 200px;
    padding: 16px 18px;
    animation-delay: 1.5s;
    transform: rotate(-1deg);
}

.hero-panel-specs:hover {
    transform: translateY(-6px) rotate(0deg);
}

.hero-panel-metrics {
    right: 32px;
    top: 100px;
    width: 180px;
    padding: 20px 18px;
    animation-delay: 1.7s;
    transform: rotate(1deg);
}

.hero-panel-metrics:hover {
    transform: translateY(-6px) rotate(0deg);
}

.hero-panel-modules {
    left: 24px;
    bottom: 48px;
    width: 240px;
    padding: 18px 20px;
    animation-delay: 1.9s;
    transform: rotate(0.5deg);
}

.hero-panel-modules:hover {
    transform: translateY(-6px) rotate(0deg);
}

.hero-panel-process {
    right: 24px;
    bottom: 48px;
    width: clamp(280px, 37vw, 420px);
    min-width: 320px;
    padding: clamp(14px, 2vw, 20px) clamp(16px, 2.5vw, 24px);
    animation-delay: 2.1s;
    transform: rotate(-0.5deg);
    overflow: visible;
    box-sizing: border-box;
}

.hero-panel-process:hover {
    transform: translateY(-6px) rotate(0deg);
}

/* Ensure workflow buttons fit properly */
.hero-panel-process > div[style*="display:flex"] {
    gap: clamp(4px, 0.8vw, 8px) !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
}

.hero-panel-process > div[style*="display:flex"] > div[style*="flex:1"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: clamp(8px, 1.2vw, 10px) clamp(6px, 1vw, 8px) !important;
}

.hero-panel-process > div[style*="display:flex"] > div[style*="font-size:12px"] {
    flex-shrink: 0 !important;
    font-size: clamp(10px, 1.2vw, 12px) !important;
}

/* Robot Configuration Loadout - No Card */
.hero-loadout {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    padding: 0;
    opacity: 0;
    z-index: 5;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    animation: heroLoadoutFadeIn 0.8s ease-out 2.3s forwards;
}

@keyframes heroLoadoutFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateY(-8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateY(0) scale(1);
    }
}

/* Achievements - No Card */
.hero-achievements {
    position: absolute;
    right: 32px;
    top: 55%;
    transform: translateY(-50%);
    width: 240px;
    padding: 0;
    opacity: 0;
    z-index: 5;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    animation: heroAchievementsFadeIn 0.8s ease-out 2.5s forwards;
}

@keyframes heroAchievementsFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateY(-8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateY(0) scale(1);
    }
}

/* Chip style */
.hero-chip {
    display: inline-block;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-right: 6px;
    font-weight: 500;
}

/* Progress bar */
.hero-progress {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 10px;
}

.hero-progress > i {
    display: block;
    height: 100%;
    width: 60%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
    animation: progressFill 1.5s ease-out forwards;
}

@keyframes heroPanelFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: 60%;
    }
}

@media (min-width: 769px) and (max-width: 819px) {
    /* Hero secondary height locked by JavaScript to prevent viewport changes on scroll */
    /* Stack panels between 769px and 819px, but keep absolute positioning at 820px+ */
    
    .hero-panel-specs,
    .hero-panel-metrics,
    .hero-panel-modules,
    .hero-panel-process,
    .hero-loadout,
    .hero-achievements,
    .hero-panel-badge {
        position: static !important;
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        border-radius: 10px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .hero-panel {
        padding: 12px !important;
        min-width: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .hero-panel-big {
        font-size: 18px;
    }
}

/* Mobile phones - hide hero panels/stat boxes */
@media (max-width: 768px) {
    /* Hero secondary height locked by JavaScript to prevent viewport changes on scroll */
    
    /* Hide all hero panels/stat boxes on mobile phones */
    .hero-panel-specs,
    .hero-panel-metrics,
    .hero-panel-modules,
    .hero-panel-process,
    .hero-loadout,
    .hero-achievements,
    .hero-panel-badge {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .hero-panel {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

.hero-secondary-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

.hero-secondary-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}

.hero-secondary-title {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 40px 0;
}

.hero-secondary-title span {
    display: block;
}

.hero-secondary-title .accent {
    color: rgba(0, 0, 0, 0.4);
}

.hero-secondary-subtitle {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin: 0 0 60px 0;
    font-weight: 300;
    letter-spacing: 0.01em;
}

.hero-secondary-cta {
    margin-top: 40px;
}

.hero-secondary-button {
    display: inline-block;
    padding: 20px 50px;
    background: #000;
    border: 2px solid #000;
    color: #fff;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-secondary-button:hover {
    background: #fff;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
    .hero-secondary {
        padding: 80px 24px;
        min-height: 80dvh;
    }
    
    .hero-secondary-title {
        margin-bottom: 30px;
    }
    
    .hero-secondary-subtitle {
        margin-bottom: 40px;
    }
}

/* Spline 3D Container */
.spline-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Hard-set height to prevent reflow during Spline loading phases */
    height: calc(100dvh - 80px) !important;
    min-height: calc(100dvh - 80px) !important;
    max-height: calc(100dvh - 80px) !important;
    width: 100% !important;
    /* Prevent scroll-based transforms and resizing */
    transform: none !important;
    transform-origin: center center !important;
    will-change: auto !important;
    contain: layout style paint !important; /* Isolate from layout changes */
    box-sizing: border-box !important;
}

.spline-canvas {
    width: 100% !important;
    height: calc(100dvh - 80px) !important;
    min-height: calc(100dvh - 80px) !important;
    max-height: calc(100dvh - 80px) !important;
    pointer-events: none;
    filter: grayscale(100%) brightness(1.2) contrast(0.9);
    /* Hard-set dimensions to prevent reflow during Spline loading */
    /* Prevent scroll-based transforms and resizing */
    transform: none !important;
    transform-origin: center center !important;
    will-change: auto !important;
    contain: layout style paint !important; /* Isolate from layout changes */
    object-fit: contain !important;
    box-sizing: border-box !important;
}

/* Mobile: Ensure scrolling works past Spline */
@media (max-width: 768px), (hover: none) {
    .spline-canvas {
        pointer-events: none !important;
        touch-action: pan-y pan-x !important; /* Allow all scrolling */
    }
    
    .spline-container {
        pointer-events: none !important;
        touch-action: pan-y pan-x !important; /* Allow all scrolling */
    }
    
    .hero,
    .hero-secondary {
        overflow: visible !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        position: relative !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }
    
    /* Ensure body/html can scroll */
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Dark Overlay for Logo Contrast */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: radial-gradient(circle at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%);
    opacity: 0;
    animation: overlayFadeIn 1.5s ease-out 0.5s forwards;
}

@keyframes overlayFadeIn {
    to {
        opacity: 1;
    }
}

/* Hero Logo Container */
.hero-logo-container {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animated Geometric Corner Accents */
.hero-corner {
    position: absolute;
    width: 96px;
    height: 96px;
    border: 4px solid rgba(255, 255, 255, 0.8);
    opacity: 0;
}

.hero-corner-top-left {
    top: -48px;
    left: -48px;
    border-top: 4px solid rgba(255, 255, 255, 0.8);
    border-left: 4px solid rgba(255, 255, 255, 0.8);
    border-right: none;
    border-bottom: none;
    transform: scale(0) rotate(-45deg);
    animation: cornerTopLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}

.hero-corner-top-right {
    top: -48px;
    right: -48px;
    border-top: 4px solid rgba(255, 255, 255, 0.8);
    border-right: 4px solid rgba(255, 255, 255, 0.8);
    border-left: none;
    border-bottom: none;
    transform: scale(0) rotate(45deg);
    animation: cornerTopRight 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}

.hero-corner-bottom-left {
    bottom: -48px;
    left: -48px;
    border-bottom: 4px solid rgba(255, 255, 255, 0.8);
    border-left: 4px solid rgba(255, 255, 255, 0.8);
    border-top: none;
    border-right: none;
    transform: scale(0) rotate(45deg);
    animation: cornerBottomLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
}

.hero-corner-bottom-right {
    bottom: -48px;
    right: -48px;
    border-bottom: 4px solid rgba(255, 255, 255, 0.8);
    border-right: 4px solid rgba(255, 255, 255, 0.8);
    border-top: none;
    border-left: none;
    transform: scale(0) rotate(-45deg);
    animation: cornerBottomRight 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards;
}

@keyframes cornerTopLeft {
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes cornerTopRight {
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes cornerBottomLeft {
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes cornerBottomRight {
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Glowing Border Frame */
.hero-frame {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 0 40px rgba(255, 255, 255, 0.3),
        inset 0 0 40px rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: scale(1.2);
    animation: frameFadeIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
}

@keyframes frameFadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Logo with Dramatic Entrance */
.hero-logo-wrapper {
    position: relative;
    padding: 80px 80px;
    opacity: 0;
    transform: scale(0.5) rotateY(90deg);
    animation: logoEntrance 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
    transform-style: preserve-3d;
}

@keyframes logoEntrance {
    to {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

.hero-logo-image {
    width: 500px;
    max-width: 80vw;
    height: auto;
    position: relative;
    z-index: 10;
    display: block;
    filter: invert(1) drop-shadow(0 0 30px rgba(255, 255, 255, 0.5));
}

/* Tagline Below Logo */
.hero-tagline {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 24px;
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
    animation: taglineFadeIn 1s ease-out 2.2s forwards;
}

.hero-tagline p {
    color: #fff;
    letter-spacing: 0.4em;
    font-size: 0.9rem;
    white-space: nowrap;
}

.hero-tagline-line {
    height: 1px;
    width: 64px;
    background: rgba(255, 255, 255, 0.6);
    transform: scaleX(0);
    animation: taglineLineExpand 0.8s ease-out 2.4s forwards;
}

@keyframes taglineFadeIn {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes taglineLineExpand {
    to {
        transform: scaleX(1);
    }
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    animation: 
        scrollIndicatorFadeIn 1s ease-out 2.8s forwards,
        scrollIndicatorFloat 2s ease-in-out 2.8s infinite;
}

.scroll-mouse {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.scroll-dot {
    width: 4px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    animation: scrollDot 2s ease-in-out infinite;
}

@keyframes scrollIndicatorFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes scrollDot {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}

@keyframes scrollIndicatorFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* About Section - Clean & Simple */
.about {
    position: relative;
    min-height: 100dvh;
    background: transparent;
    padding: 0;
    overflow: visible;
    z-index: 2;
}

.about-container {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    position: relative;
    overflow: visible;
    align-items: stretch;
}

.about-title-section {
    background: transparent;
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    position: relative;
    transition: padding-top 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                padding-bottom 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                justify-content 0s 1.2s;
    flex-shrink: 0;
    margin: 0;
    box-sizing: border-box;
}

.about-container.expanded .about-title-section {
    padding-top: 80px;
    padding-bottom: 20px;
    min-height: 0;
    justify-content: flex-start;
    margin: 0;
    transition: padding-top 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                padding-bottom 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                justify-content 0s;
}

@media (min-width: 1024px) {
    .about-title-section {
        padding: 120px 80px;
    }
    
    .about-content-section {
        padding: 0 80px;
    }
}

.about-number {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.1);
    line-height: 1;
    margin-bottom: 40px;
    letter-spacing: -0.05em;
    text-align: center;
    transition: font-size 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                margin-bottom 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                margin-top 0s 1.2s;
    margin-top: 0;
}

.about-container.expanded .about-number {
    font-size: clamp(2rem, 4vw, 4rem);
    margin-bottom: 20px;
    margin-top: 0;
    transition: font-size 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                margin-bottom 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                margin-top 0s;
}

.about-title {
    font-size: clamp(2rem, 6vw, 6rem);
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    margin-bottom: 80px;
    letter-spacing: -0.03em;
    text-align: center;
    transition: font-size 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                margin-bottom 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    padding: 0 20px;
    max-width: 100%;
}

.about-container.expanded .about-title {
    font-size: clamp(2rem, 6vw, 6rem);
    margin-bottom: 20px;
}

.about-title span {
    display: inline;
    white-space: nowrap;
}

/* Mobile: Allow wrapping and respect margins */
@media (max-width: 768px) {
    .about-title {
        white-space: normal !important;
        overflow: visible !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 0 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .about-title span {
        white-space: normal !important;
        display: inline-block !important;
    }
    
    .about-title-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}

.about-title .accent {
    color: rgba(0, 0, 0, 0.5);
}

.about-divider {
    width: 80px;
    height: 2px;
    background: #000;
    margin: 0 auto 60px;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                margin 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-container.expanded .about-divider {
    opacity: 0;
    margin: 0 auto 0;
    height: 0;
}

/* About Content Section - Clean Reveal */
.about-content-section {
    background: transparent;
    padding: 0 40px;
    overflow: clip;
    max-height: 0;
    opacity: 0;
    transform: translateY(40px);
    margin: 0;
    margin-top: 0;
    transition: max-height 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                padding-bottom 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                margin-top 0s 1.2s;
    flex-shrink: 0;
}

.about-container.expanded .about-content-section {
    max-height: 5000px;
    opacity: 1;
    transform: translateY(0);
    padding: 0 40px 80px;
    margin: 0;
    margin-top: 0;
    transition: max-height 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                padding-bottom 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                margin-top 0s;
}


.about-content-wrapper {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 1;
}

@media (min-width: 1024px) {
    .about-content-wrapper {
        padding: 0 0 120px;
    }
    
    .about-container.expanded .about-content-wrapper {
        padding: 0 0 0;
    }
}

.about-content-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: start;
}


@media (min-width: 1024px) {
    .about-content-row {
        grid-template-columns: 1.5fr 1fr;
        gap: 80px;
    }
}


/* Expand Button Styles */
.about-expand-button-container {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                margin-top 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-container.expanded .about-expand-button-container {
    opacity: 0;
    pointer-events: none;
    margin-top: 0;
}

.cursor-animation-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.about-expand-button {
    background: transparent;
    border: 2px solid rgba(0, 0, 0, 0.3);
    color: #000;
    padding: 20px 50px;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: default;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.about-expand-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    transition: left 0.5s ease;
}

.about-expand-button:hover::before {
    left: 100%;
}

.expand-button-text {
    position: relative;
    z-index: 1;
}

.expand-button-icon {
    position: relative;
    z-index: 1;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.about-expand-button.clicked {
    border-color: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.05);
}

.about-expand-button.clicked .expand-button-icon {
    transform: translateX(10px);
}

.animated-cursor {
    position: absolute;
    top: 50%;
    left: -10%;
    width: 36px;
    height: 36px;
    color: #000;
    z-index: 10;
    pointer-events: none;
    transform-origin: center center;
    transform: translate(-50%, -50%);
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.animated-cursor svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
    transition: filter 0.2s ease;
}

.animated-cursor:hover svg {
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 12px rgba(0, 0, 0, 0.3));
}

.cursor-click-ripple {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 9;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

@media (max-width: 768px) {
    .cursor-animation-container {
        height: 150px;
        margin-bottom: 40px;
    }
    
    .cursor-click-target {
        width: 100px;
        height: 100px;
        right: 10%;
    }
    
    .click-target-icon {
        font-size: 2rem;
    }
    
    .animated-cursor {
        left: 5%;
    }
}

@media (min-width: 1024px) {
    .about-right {
        padding: 120px 80px;
    }
}

.about-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 0;
}

.about-label {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.about-line {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
}

.about-content-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.about-text-block {
    max-width: 600px;
}

.about-lead {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: #000;
    line-height: 1.6;
    margin-bottom: 24px;
    font-weight: 500;
}

.about-body {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(30px, 4vw, 80px);
    align-items: start;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.about-container.expanded .about-stats-grid {
    opacity: 1;
}

@media (max-width: 1023px) {
    .about-stats-grid {
        grid-template-columns: 1fr;
        gap: clamp(20px, 3vw, 40px);
    }
}

.about-stat {
    text-align: left;
    padding: clamp(10px, 1.5vw, 30px);
}

.stat-value {
    font-size: clamp(2.5rem, 5vw, 6rem);
    font-weight: 700;
    color: #000;
    line-height: 1;
    margin-bottom: clamp(8px, 1vw, 20px);
    letter-spacing: -0.02em;
}

@media (min-width: 1920px) {
    .stat-value {
        font-size: clamp(4rem, 4vw, 7rem);
    }
}

@media (min-width: 2560px) {
    .stat-value {
        font-size: clamp(5rem, 4.5vw, 8rem);
    }
}

.stat-desc {
    font-size: clamp(0.85rem, 1.2vw, 1.3rem);
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.4;
}

/* Team Section */
.about-team-section {
    margin-top: 80px;
    padding-top: 80px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
}

@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 60px;
    }
}

.team-member {
    display: flex;
    flex-direction: column;
    gap: 12px;
    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);
}

.about-container.expanded .team-member:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.2s;
}

.about-container.expanded .team-member:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.3s;
}

.about-container.expanded .team-member:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.4s;
}

.team-member-role {
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 8px;
}

.team-member-name {
    color: #000;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

@media (min-width: 1024px) {
    .about-team-section {
        margin-top: 100px;
        padding-top: 100px;
    }
    
    .team-grid {
        gap: 80px;
    }
    
    .team-member-name {
        font-size: 1.5rem;
    }
}

/* Team Photo and Blurb Layout */
.about-team-photo-blurb {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin: 60px 0 80px;
}

.about-team-blurb {
    /* Text styling handled by .section-text-large */
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

.about-team-blurb p,
.about-team-blurb .section-text-large {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    text-align: left !important;
    max-width: 100% !important;
}

.about-team-image {
    text-align: center;
}

.about-team-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Responsive: Stack on mobile and tablet */
@media (max-width: 1049px) {
    .about-team-photo-blurb {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center !important;
    }
    
    .about-team-blurb {
        text-align: center !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    
    .about-team-blurb p,
    .about-team-blurb .section-text-large {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        text-align: center !important;
        max-width: 100% !important;
    }
    
    .about-team-image {
        order: 2;
    }
    
    .about-team-blurb {
        order: 1;
    }
}


/* The Full Package Section */
.full-package-section {
    background: linear-gradient(to right, #000, #333);
    padding: 0 20px;
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100dvh;
    height: auto;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: visible;
}

.full-package-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .full-package-container {
        padding: 0 40px;
    }
}

@media (min-width: 1400px) {
    .full-package-container {
        padding: 0 60px;
    }
}

@media (min-width: 1920px) {
    .full-package-container {
        padding: 0 80px;
        max-width: 100%;
        width: 100%;
    }
}

@media (min-width: 2560px) {
    .full-package-container {
        padding: 0 120px;
        max-width: 100%;
        width: 100%;
    }
}

@media (min-width: 3840px) {
    .full-package-container {
        padding: 0 160px;
        max-width: 100%;
        width: 100%;
    }
}

.full-package-header {
    text-align: center;
}

.full-package-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.full-package-video {
    margin-top: 60px;
    display: flex;
    justify-content: space-between; /* Video on left, text on right */
    align-items: flex-start; /* Align to top so button appears under title */
    gap: 60px;
    position: relative;
    width: 100%;
    /* Allow overflow for scaled video */
    overflow: visible;
    min-height: 400px; /* Ensure enough space for video */
}

@media (max-width: 1023px) {
    .full-package-video {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    
    .landing-web-video-container {
        max-width: 100% !important;
        width: 100%;
        order: 1;
    }
    
    .landing-web-video-container video {
        width: 100%;
        height: auto;
        max-height: 50dvh;
        object-fit: contain;
    }
    
    .full-package-text {
        width: 100%;
        text-align: center;
        padding-left: 0;
        order: 2;
    }
    
    .full-package-title {
        text-align: center !important;
        transform: none !important;
    }
    
    .learn-more-button {
        margin: 20px auto 0;
        display: block;
    }
}

/* Title text on the right */
.full-package-text {
    flex: 0 0 auto;
    z-index: 5;
    padding-left: 40px;
    align-self: flex-start; /* Align to top so button appears under title */
}

.full-package-title {
    font-size: clamp(4rem, 8vw, 8rem); /* Match services title style */
    font-weight: 700;
    color: #fff; /* White for black background section */
    line-height: 1.1;
    letter-spacing: -0.03em; /* Match other section titles */
    text-align: right; /* Align text to the right */
    margin: 0;
    opacity: 1;
    transform: translateX(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    /* Ensure it's visible when animated */
    visibility: visible;
}

.full-package-title span {
    display: block; /* Each span on its own line */
    white-space: nowrap;
}

.full-package-title .accent {
    color: rgba(255, 255, 255, 0.5); /* Grey accent like other titles */
}

.full-package-title.animate-in {
    opacity: 1;
    transform: translateX(0);
}

@media (min-width: 1024px) {
    .full-package-video {
        flex-wrap: nowrap;
    }
}

.full-package-video video {
    max-width: 400px;
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%) brightness(1.1) contrast(0.95);
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.full-package-video video.playing {
    opacity: 1;
}

/**
 * Laptop Container - Static Position
 * 
 * Structure:
 * - .laptop-zoom-wrapper: Container for laptop (no scroll effect)
 * - .laptop-video-container: Laptop video positioned on the left
 * - .laptop-screen-window: Transparent area where content shows through
 */
.laptop-zoom-wrapper {
    position: relative;
    width: 100%;
    display: block;
    /* Take up space in flex layout, aligned left and vertically centered */
    flex: 0 1 auto;
    max-width: 1400px; /* Base size - video will be scaled 4x inside */
    align-self: center; /* Vertically center */
    margin-left: -250px; /* Move left */
    margin-right: auto;
    margin-top: -600px; /* Move up slightly more */
    margin-bottom: 0;
    /* Allow overflow for scaled video */
    overflow: visible;
    /* Ensure proper positioning */
    padding: 0;
    /* Ensure it doesn't shrink below content */
    min-width: 0;
    /* Account for 4x scale - container needs to be larger */
    min-height: 0;
    /* Ensure wrapper doesn't clip scaled content */
    height: auto;
}

.laptop-video-container {
    position: relative;
    max-width: 1400px; /* Base size */
    width: 100%;
    height: auto;
    z-index: 10;
    /* Scale the video slightly less and move left more */
    transform: scale(3.5) translateX(-150px);
    transform-origin: top left;
    /* Natural position on the left */
    margin-left: 0;
    margin-right: auto;
    /* Ensure video is visible */
    display: block;
    visibility: visible;
}

.laptop-video-container video {
    width: 100%;
    height: auto;
    display: block;
    /* Mix blend mode for transparent effect - adjust based on video */
    mix-blend-mode: normal;
    pointer-events: none;
    /* Ensure video is visible */
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.laptop-video-container video.playing {
    opacity: 1;
}

/**
 * Transparent Screen Window
 * 
 * This creates a "window" in the laptop screen where website content shows through.
 * Adjust the top, left, width, and height values to match your laptop video's screen position.
 * 
 * The content behind the laptop will be visible through this transparent area,
 * creating the effect of viewing the website through the laptop screen.
 * 
 * HOW IT WORKS:
 * - The screen window is positioned absolutely within the laptop video container
 * - As the laptop zooms, this window scales proportionally
 * - Content behind the laptop (from the page) shows through this transparent area
 * - When fully zoomed, the screen window fills most of the viewport, revealing the site content
 */
.laptop-screen-window {
    position: absolute;
    /* IMPORTANT: Adjust these values to match your laptop screen position in the video */
    /* These percentages are relative to the laptop video container */
    top: 8%;
    left: 7%;
    width: 86%;
    height: 78%;
    background: transparent;
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
    /* No blur initially - content shows through clearly */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    /* Optional: Add subtle border to define screen edges when zoomed */
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Ensure content behind is visible */
    mix-blend-mode: normal;
}

/* When zoomed, the screen window reveals content with optional subtle effects */
.laptop-video-container.zoomed .laptop-screen-window {
    /* Optional: Add very slight blur for screen-like effect */
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
    /* Slightly more visible border when zoomed */
    border-color: rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for laptop zoom */
@media (min-width: 1024px) {
    .full-package-section {
        padding: 0 40px;
    }
    
    .full-package-video {
        margin-top: 80px;
        justify-content: space-between; /* Laptop on left, text on right */
        gap: 80px;
    }
    
    .laptop-zoom-wrapper {
        flex: 0 1 auto;
        max-width: 1400px; /* Base size - video scaled 4x inside */
        margin-left: 0;
    }
    
    .laptop-video-container {
        max-width: 1400px; /* Base size - scaled 4x with transform */
    }
    
    .full-package-text {
        padding-left: 60px;
    }
    
    .full-package-title {
        font-size: clamp(4rem, 8vw, 8rem); /* Match services title */
    }
}

@media (min-width: 1400px) {
    .full-package-section {
        padding: 0 60px;
    }
}

@media (min-width: 1920px) {
    .full-package-section {
        padding: 0 80px;
    }
}

@media (min-width: 2560px) {
    .full-package-section {
        padding: 0 120px;
        max-width: 100%;
        width: 100%;
    }
    
    .full-package-video {
        gap: clamp(80px, 6vw, 120px);
        margin-top: clamp(80px, 6vw, 120px);
    }
    
    .full-package-title {
        font-size: clamp(8rem, 10.67vw, 10.67rem); /* Scale: 8rem * 1.33 = 10.67rem */
    }
    
    .full-package-text {
        padding-left: clamp(60px, 4vw, 80px);
    }
    
    .landing-web-video-container {
        max-width: 85%;
    }
}

@media (min-width: 3840px) {
    .full-package-section {
        padding: 0 160px;
        max-width: 100%;
        width: 100%;
    }
    
    .full-package-video {
        gap: clamp(120px, 8vw, 160px);
        margin-top: clamp(120px, 8vw, 160px);
    }
    
    .full-package-title {
        font-size: clamp(10.67rem, 16vw, 16rem); /* Scale: 8rem * 2 = 16rem */
    }
    
    .full-package-text {
        padding-left: clamp(80px, 5.33vw, 106.67px);
    }
    
    .landing-web-video-container {
        max-width: 90%;
    }
}

@media (max-width: 1023px) {
    .full-package-video {
        flex-direction: column; /* Stack on mobile */
        align-items: flex-start;
        gap: 40px;
    }
    
    .laptop-zoom-wrapper {
        margin-right: 0;
        max-width: 100%;
    }
    
    .laptop-video-container {
        max-width: 100%;
        padding: 0 20px;
        transform: scale(2); /* Smaller scale on mobile */
        transform-origin: top left;
    }
    
    .full-package-text {
        padding-left: 0;
        width: 100%;
    }
    
    .full-package-title {
        white-space: normal;
        text-align: left;
    }
}

/* Services Section - Redesigned */
/* Services is now part of the about section */

/* Fixed Laser Beams Background for All Sections (except hero) */
.laser-beams-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    pointer-events: none;
    z-index: 1;
    opacity: 0.12;
}

/* Services laser beams removed - using fixed background instead */

@keyframes laserBeamfast {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

@keyframes laserBeamslow {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 0.6;
    }
    40% {
        opacity: 1;
    }
    70% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

@keyframes laserBeampulse {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    30% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    70% {
        opacity: 1;
    }
    90% {
        opacity: 0.4;
    }
    100% {
        opacity: 0;
    }
}

.services-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 40px;
    position: relative;
    z-index: 2;
    background: transparent;
}

@media (min-width: 1024px) {
    .services-wrapper {
        padding: 160px 80px;
    }
}

/* Consolidated services-wrapper rules - moved to comprehensive media queries below */

.services-header-new {
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    text-align: left;
}

.services-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    gap: 40px;
}

.services-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.services-label {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.services-number-large {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.1);
    line-height: 1;
    letter-spacing: -0.05em;
    align-self: baseline;
    flex-shrink: 0;
}

.services-title-container {
    position: relative;
    display: inline-block;
}

.services-title-new {
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 2;
    text-align: left;
    display: inline-block;
    flex: 1;
    padding-bottom: 20px;
}

@media (min-width: 1920px) {
    .services-title-new {
        font-size: 8.5rem;
    }
}

.services-title-new .accent {
    color: rgba(0, 0, 0, 0.4);
}

/* MS.UXUI Sage Green Accent */
.website-design-designer .services-title-new .accent {
    color: #96aa9f; /* Sage green */
}

/* Expertise Cursor Animation */
.expertise-cursor {
    position: absolute;
    width: 36px;
    height: 36px;
    color: #000;
    z-index: 10;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    will-change: left, top, opacity;
    backface-visibility: hidden;
}

.expertise-cursor svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
}

.expertise-design-box {
    position: absolute;
    border: 2px solid #000;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    will-change: transform, width, height, opacity;
    backface-visibility: hidden;
    transform-origin: top left;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.service-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: none;
    width: 100%;
    height: 100%;
}

/* Ensure all service cards have equal width */
.services-grid {
    grid-auto-rows: 1fr;
}

.service-card-link {
    display: flex;
    width: 100%;
}

.service-card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

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

.service-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 60px 40px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    --magnetic-x: 0px;
    --magnetic-y: 0px;
    --scroll-tilt: 0deg;
    transform: 
        translateY(0)
        perspective(1000px)
        rotateX(var(--scroll-tilt));
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: #000;
    transition: height 0.4s ease;
}

.service-card:hover::before {
    height: 100%;
}

.service-card.featured::before {
    background: #fff;
}

/* Scroll Animation States */
.service-card.revealed {
    opacity: 1 !important;
    transform: translateY(0) rotateX(0deg) perspective(1000px) rotateX(var(--scroll-tilt)) !important;
}

.about-stat.revealed {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

.contact-info-item.revealed {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.text-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Scroll Animation Classes */
.scroll-animated {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scaleX(1) !important;
}

.service-card:hover {
    border-color: #000;
    transform: 
        translate(var(--magnetic-x), var(--magnetic-y))
        translateY(-8px)
        perspective(1000px)
        rotateX(var(--scroll-tilt));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-card.featured {
    border-color: #000;
    background: #000;
    color: #fff;
}

.service-card.featured .service-name,
.service-card.featured .service-description,
.service-card.featured .service-capabilities span {
    color: #fff;
}

.service-card-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 24px;
}

.service-id {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.2);
    line-height: 1;
}

.service-card.featured .service-id {
    color: rgba(255, 255, 255, 0.3);
}

.service-name {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: #000;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.service-description {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
    margin-bottom: 32px;
}

.service-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.service-capabilities span {
    padding: 8px 16px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

.service-card:hover .service-capabilities span {
    border-color: #000;
    color: #000;
}

.service-card.featured .service-capabilities span {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

.service-card.featured:hover .service-capabilities span {
    border-color: #fff;
    color: #fff;
}

/* Printing Pull-out Banner */
.service-card-printing {
    overflow: hidden;
    position: relative;
}

.printing-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 0;
    background: #000;
    color: #fff;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    pointer-events: none;
}

.service-card-printing:hover .printing-banner {
    max-height: 400px;
    opacity: 1;
    pointer-events: auto;
}

.printing-banner-content {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

.service-card-printing:hover .printing-banner-content {
    opacity: 1;
    transform: translateY(0);
}

.printing-banner-header {
    margin-bottom: 30px;
}

.printing-banner-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    display: block;
}

.printing-banner-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.printing-banner-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.service-card-printing:hover .printing-banner-item:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.service-card-printing:hover .printing-banner-item:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.service-card-printing:hover .printing-banner-item:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.printing-banner-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.printing-banner-cta {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease 0.6s, transform 0.3s ease 0.6s;
}

.service-card-printing:hover .printing-banner-cta {
    opacity: 1;
    transform: translateY(0);
}

.printing-banner-cta span {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    display: inline-block;
    transition: transform 0.3s ease;
}

.service-card-printing:hover .printing-banner-cta span {
    transform: translateX(5px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .service-card-printing:hover .printing-banner {
        max-height: 350px;
    }
    
    .printing-banner-content {
        padding: 30px 25px;
    }
}

/* Contact Section - Redesigned */
.contact {
    position: relative;
    min-height: 100dvh;
    background: #000;
    padding: 0;
    overflow: visible;
    z-index: 2;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100dvh;
}

@media (min-width: 1024px) {
    .contact-container {
        grid-template-columns: 55% 45%;
    }
}

.contact-form-section {
    background: #000;
    padding: 120px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 1024px) {
    .contact-form-section {
        padding: 160px 80px;
    }
}

.contact-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 60px;
}

.contact-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.contact-number {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.1);
    line-height: 1;
    letter-spacing: -0.05em;
}

.contact-title {
    font-size: clamp(3rem, 7vw, 7rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 80px;
    letter-spacing: -0.03em;
}

.contact-title .accent {
    color: rgba(255, 255, 255, 0.5);
}

.contact-form-new {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.form-field {
    position: relative;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.125rem;
    padding: 16px 0;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.form-field select::-ms-expand {
    display: none;
}

.form-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px 12px;
    padding-right: 28px;
}

.form-field select option {
    background: #000;
    color: #fff;
    padding: 12px;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-bottom-color: #fff;
}

.form-field label {
    position: absolute;
    top: 16px;
    left: 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    pointer-events: none;
    transition: all 0.3s ease;
}

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label,
.form-field select:focus + label,
.form-field select:not([value=""]) + label {
    top: -8px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Move label up when select has a value */
.form-field select:valid + label {
    top: -8px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.submit-btn-new {
    margin-top: 16px;
    padding: 20px 40px;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    font-family: inherit;
    font-weight: 600;
}

.submit-btn-new:hover {
    background: #fff;
    color: #000;
}

.submit-btn-new .arrow {
    transition: transform 0.3s ease;
}

.submit-btn-new:hover .arrow {
    transform: translateX(8px);
}

.contact-info-section {
    background: #000;
    padding: 120px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 1024px) {
    .contact-info-section {
        padding: 160px 80px;
    }
}

.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

.contact-info-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info-item.full-width {
    grid-column: 1 / -1;
}

.info-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.info-link {
    color: #fff;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.info-link:hover {
    color: rgba(255, 255, 255, 0.6);
}

.info-text {
    color: #fff;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.6;
}

.social-links-new {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.social-links-new a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
    display: inline-block;
}

.social-links-new a:hover {
    color: rgba(255, 255, 255, 0.6);
}

.contact-footer {
    background: #000;
    padding: 80px 40px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    margin-top: 0;
}

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

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin-bottom: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 80px;
    }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
}

.footer-tagline {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-contact-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-contact-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
}

.footer-contact-link {
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.footer-contact-link:hover {
    color: rgba(255, 255, 255, 0.7);
    transform: translateX(4px);
}

.footer-social {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-social-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
}

.footer-social-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-social-link {
    color: #fff;
    font-size: 0.95rem;
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
    position: relative;
    padding-left: 0;
}

.footer-social-link::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width 0.3s ease;
}

.footer-social-link:hover {
    color: rgba(255, 255, 255, 0.8);
    transform: translateX(4px);
}

.footer-social-link:hover::before {
    width: 100%;
}

.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
}

.footer-text {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-align: center;
}

/* Website Design Page - Hero Section */
.website-design-hero {
    position: relative;
    height: calc(100dvh - 80px);
    min-height: calc(100dvh - 80px);
    width: 100%;
    max-width: 100%;
    background: transparent;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
    box-sizing: border-box;
    margin-top: 80px;
}

.website-design-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px;
    gap: 0;
    position: relative;
    z-index: 1;
    min-height: calc(100dvh - 80px);
}

@media (min-width: 768px) {
    .website-design-content {
        padding: 0 60px;
    }
}

@media (min-width: 1024px) {
    .website-design-content {
        padding: 0 80px;
    }
}

@media (min-width: 1400px) {
    .website-design-content {
        padding: 0 120px;
    }
}

@media (min-width: 1920px) {
    .website-design-content {
        padding: 0 160px;
    }
}

.website-design-video-container {
    position: relative;
    width: 100%;
    max-width: 85%;
    height: auto;
    z-index: 2;
    background: transparent;
    margin: 0;
    padding: 0;
    max-height: 70dvh;
    order: 2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Video Title - Integrated with video */
.website-design-video-title {
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin: 300px 0 60px 0;
    padding: 0 40px;
    order: 1;
    z-index: 10;
    box-sizing: border-box;
    position: relative;
}

@media (min-width: 768px) {
    .website-design-content {
        padding: 100px 60px;
    }
    
    .website-design-video-title {
        margin: 0 0 80px 0;
        padding: 0 60px;
    }
    
    .website-design-video-title h2 {
        font-size: clamp(3rem, 5.5vw, 6rem);
    }
    
    .website-design-video-container {
        max-width: 80%;
        max-height: 75dvh;
    }
}

@media (min-width: 1024px) {
    .website-design-content {
        padding: 120px 80px;
    }
    
    .website-design-video-title {
        margin: 340px 0 100px 0;
        padding: 0 80px;
}

    .website-design-video-title h2 {
        font-size: clamp(3.5rem, 6vw, 6.5rem);
    }
    
    .website-design-video-container {
        max-width: 75%;
        max-height: 75dvh;
        border-radius: 16px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
    }
}

.website-design-video-title h2 {
    font-size: clamp(2.5rem, 5vw, 5.5rem);
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    opacity: 1;
    transform: translateY(0);
}

.website-design-video-title h2.text-revealed {
    opacity: 1;
    transform: translateY(0);
}

.website-design-video-title h2 .accent {
    color: rgba(0, 0, 0, 0.4);
}

@media (min-width: 1024px) {
    .website-design-video-title h2 {
        font-size: clamp(4rem, 7vw, 7rem);
    }
}

@media (min-width: 1920px) {
    .website-design-video-title h2 {
        font-size: 8.5rem;
    }
}


/* Hide video title on graphic design page */
.website-design-hero:has(#graphicDesignVideo) .website-design-video-title {
    display: none;
}

/* Graphic Design Video Specific Positioning */
.website-design-video-container:has(#graphicDesignVideo) {
    position: relative;
    width: 100%;
    max-width: 80%;
    order: 1;
    margin-top: 40px;
    max-height: 65dvh;
}

/* Graphic Design Title Container */
.website-design-hero:has(#graphicDesignVideo) .website-design-title-container {
    position: relative;
    right: auto;
    left: auto;
    text-align: center;
    order: 2;
    display: none;
}

/* Graphic Design Title - align text to left */
.website-design-hero:has(#graphicDesignVideo) .website-design-title {
    text-align: left;
}

/* Video container positioning removed - now using flexbox column layout */

.website-design-video-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    opacity: 1;
    transition: opacity 1s ease-in-out, transform 0.3s ease;
    position: relative;
    z-index: 1;
    background: transparent;
    transform: scale(1);
    transform-origin: center;
    border-radius: inherit;
}

/* Graphic Design Video */
#graphicDesignVideo {
    transform: scale(1);
    transform-origin: center;
}

.website-design-title-container {
    position: relative;
    width: 100%;
    max-width: 90%;
    z-index: 10;
    text-align: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(0);
    pointer-events: none;
    display: none !important;
    overflow: visible;
    order: 2;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .website-design-title-container {
        text-align: center;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title-container {
        text-align: center;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title {
        text-align: center;
    }
}

@media (min-width: 1400px) {
    .website-design-title-container {
        text-align: center;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title-container {
        text-align: center;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title {
        text-align: center;
    }
}

@media (min-width: 1920px) {
    .website-design-title-container {
        text-align: center;
        max-width: 90%;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title-container {
        text-align: center;
        max-width: 90%;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title {
        text-align: center;
    }
}

.website-design-title-container.animate-in {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    visibility: visible;
    z-index: 10;
    display: block;
    transition: opacity 1s ease-out, transform 1s ease-out, visibility 0s linear 0s;
}

.website-design-title {
    font-size: clamp(4rem, 8vw, 6rem); /* Match services title style */
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    letter-spacing: -0.03em; /* Match other section titles */
    margin: 0;
    text-align: center;
    position: relative;
    width: 100%;
}

@media (min-width: 1024px) {
    .website-design-title {
        font-size: clamp(3.5rem, 5vw, 5rem);
    }
}

@media (min-width: 1400px) {
    .website-design-title {
        font-size: clamp(4rem, 5.5vw, 5.5rem);
    }
}

@media (min-width: 1920px) {
    .website-design-title {
        font-size: clamp(4.5rem, 6vw, 6rem);
    }
}

.website-design-title span {
    display: block; /* Each span on its own line */
    white-space: nowrap;
}

.website-design-title .accent {
    color: rgba(0, 0, 0, 0.4); /* Grey accent */
}

.website-design-title .power-text {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.power-underline {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 2px;
    background: rgba(0, 0, 0, 0.4);
    transform-origin: left;
    transition: width 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.power-cursor {
    position: absolute;
    width: 24px;
    height: 24px;
    color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, left 2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.power-cursor svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
}

/* Website Design Content Section - Transparent Background with Laser Beams */
.website-design-content-section {
    position: relative;
    min-height: auto !important;
    background: transparent;
    padding: 120px 20px;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    margin: 0 auto;
    height: auto !important;
}

@media (min-width: 1024px) {
    .website-design-content-section {
        padding: 160px 40px;
    }
}

@media (min-width: 1400px) {
    .website-design-content-section {
        padding: 180px 60px;
    }
}

@media (min-width: 1920px) {
    .website-design-content-section {
        padding: 200px 120px;
    }
}

@media (min-width: 2560px) {
    .website-design-content-section {
        padding: clamp(240px, 15vw, 320px) clamp(160px, 10vw, 213.33px);
    }
}

@media (min-width: 3840px) {
    .website-design-content-section {
        padding: clamp(320px, 20vw, 400px) clamp(213.33px, 14.22vw, 320px);
    }
}

.website-design-content-wrapper {
    max-width: 2000px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    display: block;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Consolidated website-design-content-wrapper rules - moved to comprehensive media queries below */

@media (min-width: 768px) {
    .website-design-content-wrapper {
        padding: 0 30px;
    }
}

@media (min-width: 1024px) {
    .website-design-content-wrapper {
        padding: 0 40px;
    }
}

@media (min-width: 1400px) {
    .website-design-content-wrapper {
        padding: 0 60px;
    }
}

@media (min-width: 1920px) {
    .website-design-content-wrapper {
        padding: 0 120px;
    }
}

/* Consolidated website-design-content-wrapper padding rules - moved to comprehensive media queries below */

@media (max-width: 767px) {
    .website-design-content-wrapper {
        padding: 0 24px;
    }
}

/* Process Steps - New Design */
.website-design-process-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 100px;
    flex-wrap: wrap;
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.process-item {
    flex: 0 1 auto;
    min-width: 200px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 30px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    transition: all 0.3s ease;
    position: relative;
}

@media (min-width: 1024px) {
    .process-item {
        flex: 0 1 auto;
        min-width: 250px;
        max-width: 350px;
        padding: 50px 40px;
    }
}

@media (min-width: 1400px) {
    .process-item {
        min-width: 280px;
        max-width: 400px;
        padding: 60px 50px;
    }
}

@media (min-width: 1920px) {
    .process-item {
        min-width: 300px;
        max-width: 450px;
        padding: 70px 60px;
    }
}

.process-item:hover {
    border-color: #000;
    background: rgba(0, 0, 0, 0.02);
    transform: translateY(-4px);
}

.process-number {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.1);
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: -0.05em;
}

.process-content {
    width: 100%;
}

.process-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: #000;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.process-description {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.6;
    margin: 0;
}

.process-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 10px;
}

.process-connector svg {
    width: 60px;
    height: 2px;
}

@media (max-width: 767px) {
    .website-design-process-new {
        flex-direction: column;
        gap: 30px;
    }
    
    .process-item {
        max-width: 100%;
        width: 100%;
    }
    
    .process-connector {
        transform: rotate(90deg);
        margin: 10px 0;
    }
    
    .process-connector svg {
        width: 40px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .website-design-process-new {
        gap: 30px;
    }
    
    .process-item {
        min-width: 180px;
        max-width: 250px;
    }
    
    .process-connector svg {
        width: 40px;
    }
}

@media (min-width: 1024px) {
    .website-design-process-new {
        gap: 60px;
        flex-wrap: nowrap;
    }
    
    .process-connector svg {
        width: 80px;
    }
}

@media (min-width: 1400px) {
    .website-design-process-new {
        gap: 80px;
    }
    
    .process-connector svg {
        width: 100px;
    }
}

@media (min-width: 1920px) {
    .website-design-process-new {
        gap: 100px;
    }
    
    .process-connector svg {
        width: 120px;
    }
}

/* Creative Process Design */
.process-creative-container {
    margin-bottom: 120px;
    width: 100%;
    position: relative;
}

.process-section-label {
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    margin-bottom: 60px;
}

.process-creative-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 2000px;
    margin: 0 auto;
    align-items: stretch;
    justify-items: center;
    width: 100%;
}

.process-card-creative {
    position: relative;
    overflow: visible;
    height: 100%;
    display: flex;
    width: 100%;
    max-width: 100%;
}

.process-card-powerful {
    background: #fff;
    border: 3px solid #000;
    padding: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.process-card-powerful:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    border-color: #000;
}

.process-card-powerful.cursor-hovering {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    border-color: #000;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Process Cursor Animation */
.process-cursor {
    position: absolute;
    width: 36px;
    height: 36px;
    color: #000 !important;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.process-cursor svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
    transition: filter 0.2s ease;
}

.process-cursor svg path {
    fill: #000 !important;
    stroke: #000 !important;
}

.process-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.5));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-card-powerful:hover .process-card-accent {
    transform: scaleX(1);
}

.process-card-content {
    padding: 40px 30px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.process-number-wrapper {
    margin-bottom: 30px;
    position: relative;
    min-height: clamp(6rem, 12vw, 10rem);
    display: flex;
    flex-direction: column;
}

.process-number-creative {
    font-size: clamp(6rem, 12vw, 10rem);
    font-weight: 900;
    color: rgba(0, 0, 0, 0.05);
    line-height: 0.9;
    letter-spacing: -0.08em;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    height: clamp(6rem, 12vw, 10rem);
    width: 100%;
    box-sizing: border-box;
}

.process-card-powerful:hover .process-number-creative {
    color: rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

.process-number-label {
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: -20px;
    margin-left: 8px;
    position: relative;
    z-index: 3;
}

.process-title-creative {
    font-size: clamp(1.3rem, 3vw, 2.2rem);
    font-weight: 900;
    color: #000;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 auto 15px auto;
    line-height: 1.1;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    white-space: nowrap;
    text-align: center !important;
    width: 100%;
    display: block;
    min-width: 0;
}

.process-card-powerful:hover .process-title-creative {
    color: #000;
    transform: scale(1.05);
}

.process-title-underline {
    width: 0;
    height: 4px;
    background: #000;
    margin: 0 auto 30px auto;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
}

.process-card-powerful:hover .process-title-underline {
    width: 120px;
}

.process-description-creative {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    color: rgba(0, 0, 0, 0.75);
    line-height: 1.7;
    margin: 0 0 20px 0;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
    font-weight: 400;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    min-width: 0;
}

.process-card-powerful:hover .process-description-creative {
    color: rgba(0, 0, 0, 0.9);
    transform: translateX(4px);
}

.process-arrow-powerful {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: rgba(0, 0, 0, 0.2);
    font-weight: 300;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: auto;
    align-self: flex-end;
    margin-left: auto;
    opacity: 0;
    transform: translateX(-30px) scale(0.8);
    z-index: 2;
}

.process-card-powerful:hover .process-arrow-powerful {
    opacity: 1;
    transform: translateX(0) scale(1);
    color: #000;
}

@media (min-width: 768px) {
    .process-creative-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
        align-items: stretch;
        justify-items: stretch;
    }
    
    .process-card-creative {
        width: 100%;
        max-width: 400px;
    }
    
    .process-card-content {
        padding: 35px 25px;
    }
    
    .process-section-label {
        margin-bottom: 80px;
    }
    
    .process-number-creative {
        font-size: clamp(6rem, 12vw, 10rem);
        height: clamp(6rem, 12vw, 10rem);
    }
}

@media (min-width: 1920px) {
    .process-card-creative {
        max-width: 400px;
    }
}

@media (min-width: 1024px) {
    .process-creative-grid {
        gap: 60px;
    }
    
    .process-card-content {
        padding: 40px 30px;
    }
}

@media (min-width: 1400px) {
    .process-creative-grid {
        gap: 80px;
    }
    
    .process-card-content {
        padding: 60px 50px;
    }
}

@media (min-width: 1920px) {
    .process-creative-container {
        width: 100%;
        max-width: 100%;
        margin-bottom: 120px;
    }
    
    .process-section-label {
        font-size: 0.9rem;
        margin-bottom: 80px;
    }
    
    .process-creative-grid {
        max-width: 100%;
        width: 100%;
        gap: 80px;
    }
    
    .process-card-creative {
        max-width: 400px;
        width: 100%;
    }
    
    .process-card-content {
        padding: 60px 50px;
    }
    
    .process-number-creative {
        font-size: 10rem;
        height: 10rem;
    }
    
    .process-number-wrapper {
        min-height: 10rem;
        margin-bottom: 30px;
    }
    
    .process-number-label {
        font-size: 0.85rem;
    }
    
    .process-title-creative {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }
    
    .process-description-creative {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }
    
    .process-arrow-powerful {
        font-size: 4rem;
    }
    
    .process-title-underline {
        height: 4px;
        margin-bottom: 30px;
    }
    
    .process-card-powerful:hover .process-title-underline {
        width: 160px;
    }
}

/* Legacy Process Steps - Keep for backwards compatibility */
.website-design-process {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 80px;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    padding: 0 20px;
}

.process-step {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 auto;
    min-width: 0;
}

.process-arrow {
    font-size: 1.5rem;
    color: #000;
    font-weight: 300;
    flex-shrink: 0;
}

.process-label {
    font-size: clamp(1.5rem, 3vw, 3rem);
    color: #000;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: visible;
}

/* Main Content */
.website-design-main-content {
    max-width: 800px;
}

.website-design-text {
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    margin: 0;
}

@media (min-width: 1920px) {
    .website-design-text {
        font-size: 1.375rem;
    }
}

/* Subheadline */
.website-design-subheadline {
    margin: 60px 0 40px;
    text-align: center;
}

.subheadline-text {
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 1920px) {
    .subheadline-text {
        font-size: 1.625rem;
    }
}

/* Top CTA */
.website-design-cta-top {
    text-align: center;
    margin-bottom: 80px;
}

.cta-button-primary {
    display: inline-block;
    padding: 20px 50px;
    background: transparent;
    border: 2px solid rgba(0, 0, 0, 0.3);
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-button-primary:hover {
    border-color: #000;
    background: rgba(0, 0, 0, 0.05);
}

/* Section Styles */
.section-title-main {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
    text-align: center;
}

/* Creative flowing display for section text */
p.section-text-large,
.section-text-large {
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
    color: rgba(0, 0, 0, 0.85) !important;
    line-height: 1.95 !important;
    margin: 0 0 60px 0 !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    position: relative !important;
    text-align: left !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
}

/* Override for team blurb section - prevent weird word wrapping */
.about-team-blurb .section-text-large,
.about-team-photo-blurb .about-team-blurb .section-text-large {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* Flowing decorative accent - top left */
p.section-text-large::before,
.section-text-large::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    left: -40px !important;
    width: 60px !important;
    height: 60px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 0 100% 0 !important;
    transform: rotate(-5deg) !important;
    z-index: 0 !important;
}

/* Flowing decorative accent - bottom right */
p.section-text-large::after,
.section-text-large::after {
    content: '' !important;
    position: absolute !important;
    bottom: -20px !important;
    right: -40px !important;
    width: 60px !important;
    height: 60px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 100% 0 0 0 !important;
    transform: rotate(-5deg) !important;
    z-index: 0 !important;
}

/* First letter styling */
p.section-text-large::first-letter,
.section-text-large::first-letter {
    font-size: clamp(3.5rem, 6vw, 5rem) !important;
    font-weight: 700 !important;
    float: left !important;
    line-height: 0.75 !important;
    margin-right: 12px !important;
    margin-top: 8px !important;
    color: #000 !important;
    letter-spacing: -0.02em !important;
}

@media (min-width: 1024px) {
    p.section-text-large,
    .section-text-large {
        padding: 0 60px !important;
    }
    
    p.section-text-large::before,
    .section-text-large::before {
        left: 0 !important;
        width: 80px !important;
        height: 80px !important;
    }
    
    p.section-text-large::after,
    .section-text-large::after {
        right: 0 !important;
        width: 80px !important;
        height: 80px !important;
    }
}

@media (min-width: 1400px) {
    p.section-text-large,
    .section-text-large {
        padding: 0 80px !important;
    }
    
    p.section-text-large::before,
    .section-text-large::before,
    p.section-text-large::after,
    .section-text-large::after {
        width: 100px !important;
        height: 100px !important;
    }
}

@media (min-width: 1920px) {
    .section-text-large {
        font-size: 1.625rem;
    }
}

/* Responsive font sizes removed - causing glitches on large screens */

/* Responsive font sizes removed - causing glitches on large screens */

/* Brand Promise */
.brand-promise-container {
    margin: 60px 0 50px;
    padding: 40px 0;
    position: relative;
}

.brand-promise-label {
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}

.brand-promise-content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.brand-promise-line-1 {
    font-size: clamp(1.3rem, 2.8vw, 2rem);
    line-height: 1.4;
    margin: 0;
}

.brand-promise-brand {
    color: rgba(0, 0, 0, 0.5);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand-promise-text {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 400;
}

.brand-promise-line-2 {
    font-size: clamp(1.5rem, 3.2vw, 2.3rem);
    line-height: 1.3;
    margin: 0;
    padding-left: 20px;
}

.brand-promise-emphasis {
    color: #000;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand-promise-divider {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
    margin: 20px auto;
}

.brand-promise-line-3 {
    font-size: clamp(1.1rem, 2.4vw, 1.7rem);
    line-height: 1.5;
    margin: 0;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 300;
    font-style: italic;
}

.brand-promise-contrast {
    color: rgba(0, 0, 0, 0.6);
}

.brand-promise-line-4 {
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    line-height: 1.4;
    margin: 0;
    padding-top: 8px;
}

.brand-promise-bold {
    color: #000;
    font-weight: 700;
    letter-spacing: -0.01em;
    position: relative;
    display: inline-block;
}

.brand-promise-bold::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(150, 170, 159, 0.3);
    transform: scaleX(0.95);
    transform-origin: center;
    z-index: -1;
}

@media (min-width: 768px) {
    .brand-promise-container {
        margin: 80px 0 60px;
        padding: 50px 0;
    }
    
    .brand-promise-content {
        gap: 20px;
    }
    
    .brand-promise-line-2 {
        padding-left: 30px;
    }
    
    .brand-promise-divider {
        width: 120px;
        margin: 24px auto;
    }
    
    .brand-promise-line-4 {
        padding-top: 12px;
    }
}

@media (min-width: 1024px) {
    .brand-promise-container {
        margin: 100px 0 80px;
        padding: 60px 0;
    }
    
    .brand-promise-content {
        gap: 24px;
    }
    
    .brand-promise-line-2 {
        padding-left: 40px;
    }
    
    .brand-promise-divider {
        width: 150px;
        margin: 28px auto;
    }
    
    .brand-promise-line-4 {
        padding-top: 16px;
    }
}

.section-text {
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-text-emphasis {
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    color: #000;
    line-height: 1.7;
    font-weight: 500;
    margin: 30px auto;
    max-width: 900px;
    text-align: center;
}

@media (min-width: 1920px) {
    .section-text {
        font-size: 1.375rem;
    }
    
    .section-text-emphasis {
        font-size: 1.625rem;
    }
}

/* About Section */
.website-design-about {
    position: relative;
    padding: 120px 20px;
    background: transparent;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: visible;
    overflow-y: visible;
}

@media (min-width: 1024px) {
    .website-design-about {
        padding: 160px 40px;
    }
}

@media (min-width: 1400px) {
    .website-design-about {
        padding: 180px 60px;
    }
}

@media (min-width: 1920px) {
    .website-design-about {
        padding: 200px 120px;
    }
}

@media (min-width: 2560px) {
    .website-design-about {
        padding: clamp(240px, 15vw, 320px) clamp(160px, 10vw, 213.33px);
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (min-width: 3840px) {
    .website-design-about {
        padding: clamp(320px, 20vw, 400px) clamp(213.33px, 14.22vw, 320px);
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* What Makes Our Websites Different - Video Layout */
.website-design-different-layout {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin: 60px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .website-design-different-layout {
        gap: 80px;
    }
}

@media (min-width: 1400px) {
    .website-design-different-layout {
        gap: 100px;
    }
}

@media (min-width: 1920px) {
    .website-design-different-layout {
        gap: 120px;
    }
}

.different-content {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.different-highlights {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.highlight-item {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 30px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

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

.highlight-item:hover {
    padding-left: 10px;
}

.highlight-number {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.1);
    line-height: 1;
    letter-spacing: -0.05em;
    flex-shrink: 0;
    min-width: 80px;
}

.highlight-content {
    flex: 1;
}

.highlight-title {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: #000;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.highlight-text {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    margin: 0;
}

.different-video-container {
    width: 100%;
    position: relative;
    border: none;
    background: transparent;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}

.different-video {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transform: scale(1);
    transform-origin: center;
}

@media (min-width: 768px) {
    .different-video {
        max-width: 120%;
        transform: scale(1.1);
    }
}

@media (min-width: 1024px) {
    .different-video {
        max-width: 100%;
        transform: scale(1);
    }
}

@media (min-width: 1400px) {
    .different-video {
        max-width: 110%;
        transform: scale(1.05);
    }
}

@media (min-width: 1920px) {
    .different-video {
        max-width: 100%;
        transform: scale(1);
    }
}

@media (min-width: 2560px) {
    .different-video {
        max-width: 100%;
        transform: scale(1.1);
    }
}

@media (min-width: 3840px) {
    .different-video {
        max-width: 100%;
        transform: scale(1.2);
    }
}

.different-statement {
    margin-top: 60px;
    padding: 50px;
    background: rgba(150, 170, 159, 0.05);
    border-left: 3px solid #96aa9f;
    position: relative;
}

.statement-main {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: #000;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 16px 0;
}

.statement-accent {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    color: #96aa9f;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

.statement-sub {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
    margin: 0;
    font-style: italic;
}

@media (max-width: 1023px) {
    .different-video-container {
        position: relative;
        top: auto;
    }
    
    .different-statement {
        padding: 40px 30px;
    }
}

/* Text Block Layout */
.website-design-text-block {
    margin: 40px 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.website-design-text-block + .website-design-text-block {
    margin-top: 60px;
}

/* Statement Piece */
.website-design-statement-piece {
    margin: 100px auto;
    max-width: 1100px;
    padding: clamp(60px, 8vw, 120px) clamp(40px, 6vw, 100px);
    text-align: center;
    position: relative;
    background: rgba(0, 0, 0, 0.02);
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-left: 4px solid #000;
    border-right: 4px solid #000;
    overflow: hidden;
    box-sizing: border-box;
}

.statement-piece-animated {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
}

.statement-piece-number {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(0, 0, 0, 0.5);
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.statement-piece-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: #000;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 30px 0;
    letter-spacing: -0.02em;
    text-transform: none;
}

.statement-piece-text {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: #000;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    letter-spacing: -0.01em;
    text-transform: none;
}

.statement-piece-standalone .statement-piece-text {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

@media (min-width: 1920px) {
    .website-design-statement-piece {
        max-width: 100%;
        width: 100%;
    }
    
    .statement-piece-title {
        font-size: 2.5rem;
    }
    
    .statement-piece-text {
        font-size: 1.875rem;
    }
    
    .statement-piece-standalone .statement-piece-text {
        font-size: 3.5rem;
    }
    
    .statement-piece-standalone {
        width: 100%;
        max-width: 100%;
        padding: clamp(80px, 10vw, 160px) clamp(60px, 8vw, 120px);
    }
}

.statement-accent-word {
    color: #000;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 0.1em;
    position: relative;
    z-index: 2;
    padding-top: 0.5em;
}

/* Stopwatch Background - Only for animated statement piece */
.statement-piece-animated .stopwatch-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.statement-piece-animated .stopwatch-svg {
    width: 100%;
    height: 100%;
    max-width: 450px;
    max-height: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 2560px) {
    .statement-piece-animated .stopwatch-svg {
        max-width: clamp(450px, 30vw, 600px); /* 450px * 1.33 = 598.5px */
        max-height: clamp(450px, 30vw, 600px);
    }
}

@media (min-width: 3840px) {
    .statement-piece-animated .stopwatch-svg {
        max-width: clamp(600px, 23.44vw, 900px); /* 450px * 2 = 900px */
        max-height: clamp(600px, 23.44vw, 900px);
    }
}

/* Stopwatch Hand Animations */
.stopwatch-second-hand {
    transform-origin: 100px 100px;
    animation: tickSecond 1s steps(60, end) infinite;
}

.stopwatch-minute-hand {
    transform-origin: 100px 100px;
    animation: tickMinute 60s linear infinite;
}

@keyframes tickSecond {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes tickMinute {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.statement-piece-text {
    position: relative;
    z-index: 1;
}

/* Animated Statement Piece */
.statement-piece-animated {
    opacity: 1;
}

.statement-piece-animated .animated-text {
    display: inline-block;
    opacity: 0;
}

.statement-piece-animated .animated-text-1,
.statement-piece-animated .animated-text-2,
.statement-piece-animated .animated-text-4 {
    transform: translateY(20px) translateX(0) !important;
}

.statement-piece-animated.animate .animated-text-1 {
    animation: fadeInUp 0.8s ease-out 0.2s forwards !important;
}

.statement-piece-animated.animate .animated-text-2 {
    animation: fadeInUp 0.6s ease-out 0.6s forwards;
}

.statement-piece-animated.animate .animated-text-3 {
    animation: pulseIn 0.8s ease-out 0.9s forwards, subtlePulse 2s ease-in-out 2s infinite;
    position: relative;
}

.statement-piece-animated.animate .animated-text-4 {
    animation: fadeInUp 0.6s ease-out 1.2s forwards;
}

/* Keyframe Animations */
@keyframes fadeInContainer {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) translateX(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

@keyframes pulseIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Continuous pulse animation for "seconds" word */
.statement-piece-animated .animated-text-3 {
    animation: pulseIn 0.8s ease-out 0.9s forwards, subtlePulse 2s ease-in-out 2s infinite;
}

@keyframes subtlePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@media (max-width: 767px) {
    .website-design-statement-piece {
        margin: 60px auto;
        padding: 50px 30px;
    }
    
    .statement-piece-title {
        font-size: clamp(1.25rem, 4vw, 1.75rem);
        margin-bottom: 20px;
    }
    
    .statement-piece-text {
        font-size: clamp(1rem, 3vw, 1.25rem);
    }
    
    .statement-piece-standalone .statement-piece-text {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}

@media (min-width: 1400px) {
    .website-design-statement-piece {
        padding: 100px 80px;
    }
}

/* Statement Pieces Grid - Side by Side */
.statement-pieces-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 80px 0;
    width: 100%;
    max-width: 100%;
    position: relative;
}

@media (min-width: 768px) {
    .statement-pieces-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 1024px) {
    .statement-pieces-grid {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 1400px) {
    .statement-pieces-grid {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 1920px) {
    .statement-pieces-grid {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .statement-pieces-grid {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
}

/* White Card Variant */
.statement-piece-white {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 60px 40px;
    margin: 0;
}

.statement-piece-white .statement-piece-number {
    color: rgba(0, 0, 0, 0.5);
}

.statement-piece-white .statement-piece-title {
    color: #000;
}

.statement-piece-white .statement-piece-text {
    color: #000;
}

/* Black Card Variant */
.statement-piece-black {
    background: #000;
    border: 1px solid #000;
    padding: 60px 40px;
    margin: 0;
}

.statement-piece-black .statement-piece-number {
    color: rgba(255, 255, 255, 0.5);
}

.statement-piece-black .statement-piece-title {
    color: #fff;
}

.statement-piece-black .statement-piece-text {
    color: #fff;
}

@media (max-width: 767px) {
    .statement-piece-white,
    .statement-piece-black {
        padding: 50px 30px;
    }
}

@media (min-width: 1400px) {
    .statement-piece-white,
    .statement-piece-black {
        padding: 80px 60px;
    }
}

/* Split Layout */
.website-design-split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin: 60px 0;
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .website-design-split-layout {
        grid-template-columns: repeat(2, 1fr);
        gap: 60px;
    }
}

@media (min-width: 1024px) {
    .website-design-split-layout {
        gap: 80px;
    }
}

@media (min-width: 1400px) {
    .website-design-split-layout {
        gap: 100px;
    }
}

@media (min-width: 1920px) {
    .website-design-split-layout {
        gap: 120px;
    }
}

.split-content-left,
.split-content-right {
    text-align: left;
}

.split-intro {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: #000;
    font-weight: 500;
    margin-bottom: 20px;
}

.split-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 30px;
}

.split-label {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: #000;
    font-weight: 600;
    margin-bottom: 20px;
}

/* List Styles */
.website-design-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.website-design-list li {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
    line-height: 1.8;
}

.website-design-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #96aa9f;
    transform: translateY(-50%);
}

/* Benefits Elegant Design */
.benefits-elegant-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 100px 0;
    position: relative;
}

.benefits-elegant-section {
    padding: 60px 0;
    position: relative;
}

.benefits-elegant-label {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    color: #000;
    font-weight: 600;
    margin-bottom: 50px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 20px;
}

@media (min-width: 1920px) {
    .benefits-elegant-label {
        font-size: 2rem;
    }
}

.benefits-elegant-label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: #000;
}

.benefits-elegant-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.benefit-elegant-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.benefit-elegant-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.02);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.benefit-elegant-item:hover {
    padding-left: 20px;
}

.benefit-elegant-item:hover::before {
    width: 100%;
}

.benefit-elegant-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.benefit-elegant-item:hover .benefit-elegant-dot {
    transform: scale(1.5);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

.benefit-elegant-text {
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    color: #000;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, font-weight 0.3s ease;
}

@media (min-width: 1920px) {
    .benefit-elegant-text {
        font-size: 1.625rem;
    }
}

.benefit-elegant-item:hover .benefit-elegant-text {
    transform: translateX(8px);
    font-weight: 500;
}

.benefits-elegant-divider {
    width: 1px;
    height: 0;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2), transparent);
    margin: 0 auto;
    transition: height 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.benefits-elegant-wrapper:hover .benefits-elegant-divider {
    height: 60px;
}

@media (min-width: 768px) {
    .benefits-elegant-wrapper {
        flex-direction: row;
        gap: 80px;
        align-items: flex-start;
    }
    
    .benefits-elegant-section {
        flex: 1;
        padding: 0;
    }
    
    .benefits-elegant-divider {
        width: 1px;
        height: 100%;
        min-height: 400px;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.15), transparent);
        margin: 0;
    }
    
    .benefit-elegant-item {
        padding: 32px 0;
    }
}

@media (min-width: 1024px) {
    .benefits-elegant-wrapper {
        gap: 120px;
    }
    
    .benefit-elegant-item {
        padding: 36px 0;
    }
}

@media (min-width: 1400px) {
    .benefits-elegant-wrapper {
        gap: 160px;
    }
    
    .benefit-elegant-item {
        padding: 40px 0;
    }
}

@media (max-width: 767px) {
    .benefits-elegant-wrapper {
        margin: 80px 0;
    }
    
    .benefits-elegant-section {
        padding: 50px 0;
    }
    
    .benefits-elegant-label {
        margin-bottom: 40px;
    }
    
    .benefit-elegant-item {
        padding: 24px 0;
        gap: 20px;
    }
}

/* Large Emphasis Text */
.website-design-emphasis-large {
    margin: 80px auto 0;
    max-width: 900px;
    text-align: center;
}

.website-design-emphasis-large p {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: #000;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

/* Qualities Tags */
.website-design-qualities {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 40px 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.website-design-qualities span {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: #000;
    font-weight: 500;
    padding: 12px 24px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: transparent;
    transition: all 0.3s ease;
}

.website-design-qualities span:hover {
    border-color: #000;
    background: rgba(0, 0, 0, 0.05);
}

/* Designer Section - Creative Layout */
.designer-creative-header {
    margin-bottom: 80px;
    text-align: center;
}

.designer-label-creative {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.designer-title-creative {
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    letter-spacing: -0.03em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.designer-title-line {
    display: block;
}

.designer-title-accent {
    display: block;
    color: #87A96B;
    position: relative;
}

.designer-creative-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
    margin: 80px 0;
    position: relative;
}

@media (min-width: 1024px) {
    .designer-creative-layout {
        grid-template-columns: 1.1fr 1fr;
        gap: 100px;
        align-items: start;
    }
}

/* Visual Area - Creative Overlapping Layout */
.designer-visual-area {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.designer-logo-creative {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    max-width: 280px;
    z-index: 3;
    transform: rotate(-5deg);
    transition: transform 0.3s ease;
}

.designer-logo-creative:hover {
    transform: rotate(0deg) scale(1.05);
}

.logo-frame {
    padding: 20px;
    background: #fff;
    border: 2px solid #000;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
    position: relative;
}

.logo-frame::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: #87A96B;
    border: 2px solid #000;
}

.designer-logo-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.designer-logo-video {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.designer-image-creative {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 65%;
    max-width: 500px;
    z-index: 2;
    transform: rotate(3deg);
    transition: transform 0.3s ease;
}

.designer-image-creative:hover {
    transform: rotate(0deg) scale(1.02);
}

.image-frame {
    padding: 15px;
    background: #fff;
    border: 2px solid #000;
    box-shadow: -8px 8px 0 rgba(0, 0, 0, 0.1);
    position: relative;
}

.image-frame::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: -10px;
    width: 30px;
    height: 30px;
    background: #87A96B;
    border: 2px solid #000;
}

.designer-image-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    min-height: 400px;
}

/* Content Area */
.designer-content-creative {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.designer-intro-text {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
}

.designer-qualities-creative {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
}

.quality-item {
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    color: #000;
    font-weight: 600;
    padding: 16px 20px;
    border: 2px solid #000;
    background: transparent;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.quality-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #87A96B;
    transition: left 0.3s ease;
    z-index: -1;
}

.quality-item:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.quality-item:hover::before {
    left: 0;
}

.designer-philosophy-creative {
    margin-top: 20px;
}

.philosophy-quote {
    padding: 40px;
    border-left: 4px solid #87A96B;
    background: rgba(135, 169, 107, 0.05);
    position: relative;
}

.philosophy-quote::before {
    content: '"';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 4rem;
    color: #87A96B;
    opacity: 0.3;
    font-family: serif;
    line-height: 1;
}

.philosophy-quote-text {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: #000;
    font-style: italic;
    line-height: 1.6;
    margin: 0 0 20px 0;
    padding-left: 30px;
}

.philosophy-attribution {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
    text-align: right;
    margin: 0;
    padding-left: 30px;
}

@media (max-width: 1023px) {
    .designer-visual-area {
        min-height: 400px;
        margin-bottom: 40px;
    }
    
    .designer-logo-creative {
        position: relative;
        width: 50%;
        max-width: 250px;
        margin-bottom: -40px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .designer-image-creative {
        position: relative;
        width: 70%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .designer-creative-layout {
        gap: 60px;
    }
}

/* Designer Section - Split Layout */
.designer-split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin: 80px 0;
    align-items: start;
}

@media (min-width: 1024px) {
    .designer-split-layout {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: start;
    }
}

@media (min-width: 1400px) {
    .designer-split-layout {
        gap: 100px;
    }
}

/* Left: Content Section */
.designer-content-section {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.designer-intro-text {
    margin-bottom: 20px;
}

.designer-mission-section {
    margin-top: 20px;
}

/* Right: Visual Section (Image with Phone Video in Corner) */
.designer-visual-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
}

.designer-photo-wrapper {
    position: relative;
    width: 100%;
}

.designer-intro-photo {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.designer-logo-display {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 200px;
    max-width: 40%;
    z-index: 10;
}

@media (min-width: 768px) {
    .designer-logo-display {
        width: 250px;
        top: -30px;
        right: -30px;
    }
}

@media (min-width: 1024px) {
    .designer-logo-display {
        width: 300px;
        top: -40px;
        right: -40px;
    }
}

@media (min-width: 1400px) {
    .designer-logo-display {
        width: 350px;
        top: -50px;
        right: -50px;
    }
}

.ms-logo-video {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));
}

.designer-name-section {
    width: 100%;
}

.designer-name {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #000;
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.designer-role {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
    font-weight: 500;
}

.designer-photo-wrapper {
    position: relative;
    width: 100%;
}

.designer-intro-photo {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.designer-name-section {
    width: 100%;
}

.designer-name {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #000;
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.designer-role {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
    font-weight: 500;
}

.designer-logo-display {
    width: 100%;
    max-width: 300px;
    margin-top: 20px;
    position: relative;
}

@media (min-width: 1024px) {
    .designer-logo-display {
        max-width: 350px;
    }
}

@media (min-width: 1400px) {
    .designer-logo-display {
        max-width: 400px;
    }
}

.ms-logo-video {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.mission-header {
    margin-bottom: 30px;
}

.mission-label {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 15px;
}

.mission-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: #000;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0;
}

.ms-uxui-mission {
    color: #96aa9f;
    font-weight: 700;
}

/* MS.UXUI Text in Sage Green */
.ms-uxui-text {
    color: #96aa9f;
    font-weight: 600;
}

/* MS.UXUI Translucent Green Box */
.ms-uxui-green-box {
    background: rgba(150, 170, 159, 0.6);
    border: 1px solid rgba(150, 170, 159, 0.4);
    border-radius: 0;
    padding: 24px;
    margin-top: 30px;
    backdrop-filter: blur(10px);
}

/* Default: Green box below both columns (for laptops) */
.ms-uxui-green-box-mobile {
    display: none !important;
}

/* Desktop: Green box below both columns */
.ms-uxui-green-box-desktop {
    display: block !important;
    margin-top: 80px;
    width: 100%;
    max-width: 100%;
}

/* XS: 0–480px - Show desktop version (below columns) */
@media (max-width: 480px) {
    .ms-uxui-green-box-mobile {
        display: none !important;
    }
    
    .ms-uxui-green-box-desktop {
        display: block !important;
    }
}

/* SM: 481–640px - Show desktop version (below columns) */
@media (min-width: 481px) and (max-width: 640px) {
    .ms-uxui-green-box-mobile {
        display: none !important;
    }
    
    .ms-uxui-green-box-desktop {
        display: block !important;
    }
}

/* MD: 641–768px - Show desktop version (below columns) */
@media (min-width: 641px) and (max-width: 768px) {
    .ms-uxui-green-box-mobile {
        display: none !important;
    }
    
    .ms-uxui-green-box-desktop {
        display: block !important;
    }
}

/* LG: 769–1024px - Show desktop version (below columns) */
@media (min-width: 769px) and (max-width: 1024px) {
    .ms-uxui-green-box-mobile {
        display: none !important;
    }
    
    .ms-uxui-green-box-desktop {
        display: block !important;
    }
}

/* XL: 1025–1280px - Show desktop version (below columns) */
@media (min-width: 1025px) and (max-width: 1280px) {
    .ms-uxui-green-box-mobile {
        display: none !important;
    }
    
    .ms-uxui-green-box-desktop {
        display: block !important;
    }
}

/* 2XL: 1281–1536px (includes 1425px laptops) - Show desktop version (below columns) */
@media (min-width: 1281px) and (max-width: 1536px) {
    .ms-uxui-green-box-mobile {
        display: none !important;
    }
    
    .ms-uxui-green-box-desktop {
        display: block !important;
    }
}

/* Above 1536px (Large Monitors): Show mobile version (in left column) */
@media (min-width: 1537px) {
    .ms-uxui-green-box-mobile {
        display: block !important;
    }
    
    .ms-uxui-green-box-desktop {
        display: none !important;
    }
}

.ms-uxui-green-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ms-uxui-green-line-1 {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    line-height: 1.6;
    margin: 0;
}

.ms-uxui-green-emphasis {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    letter-spacing: -0.01em;
    display: inline-block;
}

.ms-uxui-green-normal {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

.ms-uxui-green-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 8px;
    padding: 12px 0 8px 0;
    margin-left: 0;
}

.ms-uxui-green-action {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    position: relative;
    padding: 4px 0;
    display: inline-block;
}

.ms-uxui-green-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    right: -4px;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: skewX(-8deg);
    z-index: -1;
}

.ms-uxui-green-separator {
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 400;
    margin: 0 4px;
}

.ms-uxui-green-actions .ms-uxui-green-separator {
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 400;
}

.ms-uxui-green-divider {
    width: 60px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    margin: 8px 0;
}

.ms-uxui-green-line-2 {
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    line-height: 1.6;
    margin: 0;
    padding-top: 4px;
}

.ms-uxui-green-bold {
    color: #ffffff;
    font-weight: 600;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.ms-uxui-green-outcome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 0 0;
    margin-left: 0;
}

.ms-uxui-green-outcome-text {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.ms-uxui-green-outcome-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    right: -4px;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: skewX(-8deg);
    z-index: -1;
}

.ms-uxui-green-outcome .ms-uxui-green-separator {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
    .ms-uxui-green-box {
        padding: 28px;
    }
    
    .ms-uxui-green-content {
        gap: 20px;
    }
    
    .ms-uxui-green-actions {
        gap: 16px 12px;
        padding: 16px 0 12px 0;
    }
    
    .ms-uxui-green-divider {
        width: 80px;
        margin: 12px 0;
    }
    
    .ms-uxui-green-outcome {
        gap: 12px;
        padding: 12px 0 0 0;
    }
}

@media (min-width: 1024px) {
    .ms-uxui-green-box {
        padding: 32px;
    }
    
    .ms-uxui-green-content {
        gap: 24px;
    }
    
    .ms-uxui-green-actions {
        gap: 20px 16px;
        padding: 20px 0 16px 0;
    }
    
    .ms-uxui-green-divider {
        width: 100px;
        margin: 16px 0;
    }
    
    .ms-uxui-green-outcome {
        gap: 16px;
        padding: 16px 0 0 0;
    }
}

/* Visual Section */
.designer-visual-creative {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
}

.designer-profile-card {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.profile-image-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.designer-profile-img {
    width: 90%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.5s ease;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .designer-profile-img {
        width: 85%;
    }
}


.profile-info-card {
    padding: 30px 0;
    background: transparent;
    border: none;
    margin-left: 5%;
}

@media (min-width: 1024px) {
    .profile-info-card {
        margin-left: 7.5%;
    }
}

.designer-name-creative {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #000;
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.designer-role-creative {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
    font-weight: 500;
}

.designer-logo-video-creative {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    position: relative;
}

@media (min-width: 768px) {
    .designer-logo-video-creative {
        max-width: 280px;
    }
}

@media (min-width: 1024px) {
    .designer-logo-video-creative {
        max-width: 320px;
        margin: 0;
        position: absolute;
        bottom: -20px;
        right: -20px;
        z-index: 2;
    }
}

@media (min-width: 1400px) {
    .designer-logo-video-creative {
        max-width: 380px;
        bottom: -30px;
        right: -30px;
    }
}

@media (min-width: 1920px) {
    .designer-logo-video-creative {
        max-width: 450px;
        bottom: -40px;
        right: -40px;
    }
}

.logo-video-container {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 15px;
    position: relative;
    transition: all 0.3s ease;
    width: 100%;
}

@media (min-width: 768px) {
    .logo-video-container {
        padding: 18px;
    }
}

@media (min-width: 1024px) {
    .logo-video-container {
        padding: 20px;
    }
}

@media (min-width: 1400px) {
    .logo-video-container {
        padding: 25px;
    }
}

@media (min-width: 1920px) {
    .logo-video-container {
        padding: 30px;
    }
}

.logo-video-container:hover {
    border-color: rgba(0, 0, 0, 0.2);
}

.logo-video-container::before {
    content: '';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: #96aa9f;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.designer-logo-video-creative video {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    background: transparent;
}

/* Content Section */
.designer-content-creative {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.designer-intro-creative {
    position: relative;
}

.intro-text-creative {
    font-size: clamp(1rem, 1.8vw, 1.375rem);
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    margin: 0;
}

.designer-mission-creative {
    background: rgba(150, 170, 159, 0.03);
    border-left: 2px solid #96aa9f;
    padding: 40px;
    position: relative;
}

.mission-header-creative {
    margin-bottom: 30px;
}

.mission-label {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    display: block;
    margin-bottom: 12px;
}

.mission-title-creative {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: #000;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.mission-items-creative {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mission-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

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

.mission-item:hover {
    padding-left: 8px;
}

.mission-icon {
    font-size: 1.25rem;
    color: #96aa9f;
    font-weight: 300;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.mission-item p {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.7;
    margin: 0;
}

/* Legacy Designer Section Layout - Keep for backwards compatibility */
.website-design-designer-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin: 60px 0;
    align-items: start;
}

@media (min-width: 768px) {
    .website-design-designer-layout {
        grid-template-columns: 1fr 1.2fr;
        gap: 80px;
    }
}

.designer-images-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

@media (min-width: 768px) {
    .designer-images-container {
        flex-direction: row;
        gap: 40px;
        align-items: flex-start;
    }
}

.designer-logo-container {
    width: 100%;
    position: relative;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .designer-logo-container {
        width: 40%;
        max-width: 300px;
    }
}

.designer-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
}

.designer-image-container {
    width: 100%;
    position: relative;
}

@media (min-width: 768px) {
    .designer-image-container {
        width: 60%;
    }
}

.designer-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.designer-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.designer-content .website-design-text-block {
    margin: 0;
}

.designer-content .website-design-qualities {
    margin: 0;
}

.designer-content .website-design-philosophy-block {
    margin: 0;
}

/* Philosophy Block */
.website-design-philosophy-block {
    margin-top: 80px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Checklist Grid */
.website-design-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 40px 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.checklist-item {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 16px 0;
    padding-left: 40px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.checklist-item::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #000;
    font-size: 1.2em;
    font-weight: 600;
}

/* Creative Service Section Styles */
.service-intro-creative {
    margin: 60px 0 50px;
    text-align: center !important;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-intro-main {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    color: #000;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 auto 20px auto;
    letter-spacing: -0.01em;
    text-align: center !important;
    width: 100%;
    display: block;
}

.service-intro-sub {
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin: 0 auto;
    text-align: center !important;
    width: 100%;
    display: block;
}

@media (min-width: 1920px) {
    .service-intro-main {
        font-size: 2.75rem;
    }
    
    .service-intro-sub {
        font-size: 1.625rem;
    }
}

.service-checklist-creative {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 60px 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.checklist-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background: transparent;
    border: 2px solid rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.checklist-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.03);
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.checklist-card:hover {
    border-color: #000;
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.checklist-card:hover::before {
    left: 0;
}

.checklist-number {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.08);
    line-height: 1;
    letter-spacing: -0.05em;
    flex-shrink: 0;
    min-width: 80px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: color 0.4s ease;
}

.checklist-card:hover .checklist-number {
    color: rgba(0, 0, 0, 0.15);
}

.checklist-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.checklist-title {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 600;
    color: #000;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
    transition: transform 0.3s ease;
}

.checklist-card:hover .checklist-title {
    transform: translateX(4px);
}

.service-emphasis-creative {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 80px auto 0;
    max-width: 900px;
}

.emphasis-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
}

.emphasis-text {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    color: #000;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Mobile: Allow text to wrap */
@media (max-width: 767px) {
    .emphasis-text {
        white-space: normal !important;
        padding: 0 20px;
        max-width: 100%;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .service-emphasis-creative {
        flex-direction: column;
        gap: 20px;
    }
    
    .emphasis-line {
        width: 60px;
    }
}

@media (min-width: 1920px) {
    .emphasis-text {
        font-size: 2rem;
    }
}

@media (min-width: 768px) {
    .service-checklist-creative {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (min-width: 1024px) {
    .service-checklist-creative {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
    
    .service-intro-creative {
        margin: 80px 0 60px;
    }
    
    .service-checklist-creative {
        margin: 80px 0;
    }
}

@media (min-width: 1400px) {
    .service-checklist-creative {
        gap: 40px;
    }
}

/* Service Process Grid - Compact Design */
.service-process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 60px auto;
    max-width: 1200px;
    padding: 0 24px;
}

.process-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 30px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    text-align: center;
    min-height: 180px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.process-grid-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.process-grid-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.process-grid-item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.process-grid-item:hover::before {
    opacity: 1;
}

.process-grid-item:hover::after {
    left: 100%;
}

.process-grid-number {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.15);
    line-height: 1;
    letter-spacing: -0.05em;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.process-grid-item:hover .process-grid-number {
    color: rgba(0, 0, 0, 0.3);
    transform: scale(1.15);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.process-grid-title {
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    font-weight: 600;
    color: #000;
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.process-grid-item:hover .process-grid-title {
    transform: translateY(-2px);
    color: #000;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1920px) {
    .service-process-grid {
        gap: 40px;
        max-width: 100%;
    }
    
    .process-grid-item {
        padding: 70px 50px;
        min-height: 240px;
    }
    
    .process-grid-number {
        font-size: 4.5rem;
    }
    
    .process-grid-title {
        font-size: 1.375rem;
    }
}

/* Responsive Design */
@media (min-width: 768px) {
    .service-process-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin: 80px auto;
    }
    
    .process-grid-item {
        padding: 50px 30px;
        min-height: 200px;
    }
}

@media (min-width: 1024px) {
    .service-process-grid {
        gap: 30px;
        margin: 100px auto;
    }
    
    .process-grid-item {
        padding: 60px 40px;
        min-height: 220px;
    }
    
    .process-grid-number {
        font-size: clamp(3.5rem, 6vw, 5rem);
        margin-bottom: 20px;
    }
    
    .process-grid-title {
        font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    }
}

@media (min-width: 1400px) {
    .service-process-grid {
        gap: 40px;
    }
    
    .process-grid-item {
        padding: 70px 50px;
        min-height: 240px;
    }
}

/* Serve Grid */
.website-design-serve-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 40px 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.serve-item {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    transition: all 0.3s ease;
}

.serve-item:hover {
    border-color: #000;
    background: rgba(0, 0, 0, 0.05);
}

/* Split Emphasis */
.website-design-split-emphasis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin: 80px 0 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .website-design-split-emphasis {
        grid-template-columns: repeat(2, 1fr);
    }
}

.split-emphasis-left,
.split-emphasis-right {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: #000;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    padding: 40px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
}

.split-emphasis-right {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Services Header Styles for Website Design */
.website-design-about .services-header-new,
.website-design-designer .services-header-new,
.website-design-different .services-header-new,
.website-design-service .services-header-new,
.website-design-matters .services-header-new,
.website-design-results .services-header-new,
.website-design-serve .services-header-new,
.website-design-approach .services-header-new,
.website-design-ux .services-header-new,
.website-design-edge .services-header-new,
.website-design-content-msg .services-header-new {
    margin-bottom: 0;
}

.website-importance-block {
    margin: 60px 0;
    text-align: center;
}

.importance-intro {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: #000;
    font-weight: 500;
    margin-bottom: 20px;
}

.importance-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 30px;
}

.importance-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
    margin: 0 auto;
}

.importance-list li {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding-left: 30px;
    position: relative;
}

.importance-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: rgba(0, 0, 0, 0.5);
}

/* Designer Section */
.website-design-designer {
    position: relative;
    padding: 40px 40px 120px 40px;
    background: transparent;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Green Section */
.designer-green-section {
    position: relative;
    padding: 40px 40px;
    background: rgba(150, 170, 159, 0.6);
    z-index: 2;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .designer-green-section {
        padding: 60px 80px;
    }
}

@media (min-width: 1400px) {
    .designer-green-section {
        padding: 60px 120px;
    }
}

@media (min-width: 1920px) {
    .designer-green-section {
        padding: 60px 160px;
    }
}

@media (min-width: 2560px) {
    .designer-green-section {
        padding: 80px 200px;
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 3840px) {
    .designer-green-section {
        padding: 100px 240px;
        width: 100%;
        max-width: 100%;
    }
}

.green-section-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 2560px) {
    .green-section-layout {
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 3840px) {
    .green-section-layout {
        width: 100%;
        max-width: 100%;
    }
}

.green-section-title-wrapper {
    margin-bottom: 60px;
    text-align: left;
}

@media (min-width: 1024px) {
    .green-section-title-wrapper {
        margin-bottom: 40px;
    }
}

.green-section-title {
    font-size: clamp(4rem, 8vw, 5.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0;
    text-align: left;
}

@media (min-width: 1024px) {
    .green-section-title {
        font-size: clamp(3.5rem, 5vw, 4.5rem);
    }
}

@media (min-width: 1400px) {
    .green-section-title {
        font-size: clamp(4rem, 5.5vw, 5rem);
    }
}

@media (min-width: 1920px) {
    .green-section-title {
        font-size: clamp(4rem, 7vw, 7rem);
    }
}

.green-section-title span {
    display: inline;
    white-space: normal;
}

.green-section-title .accent {
    color: #3b4639;
}

.green-power-text {
    position: relative;
    display: inline-block;
}

.green-power-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    width: 0;
    transition: width 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.green-power-cursor {
    position: absolute;
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease, left 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.green-section-title {
    position: relative;
}

.green-section-title-wrapper {
    position: relative;
}

@media (max-width: 1023px) {
    .green-section-title-wrapper {
        margin-bottom: 40px;
    }
    
    .green-section-title {
        font-size: clamp(2.5rem, 6vw, 4rem);
        text-align: center;
    }
}

@media (max-width: 767px) {
    .green-section-title {
        font-size: clamp(2rem, 5vw, 3rem);
    }
}

@media (min-width: 1024px) {
    .green-section-layout {
        grid-template-columns: 1fr;
        gap: 80px;
    }
}

.green-section-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    width: 100%;
}

@media (min-width: 1024px) {
    .green-section-main {
        grid-template-columns: 1fr 1.5fr;
        gap: 60px;
        align-items: center;
    }
}

@media (min-width: 1400px) {
    .green-section-main {
        gap: 80px;
    }
}

.green-section-video {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.green-section-text {
    width: 100%;
    position: relative;
    padding: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

@media (min-width: 1024px) {
    .green-section-text {
        padding: 50px;
    }
}

.green-text-content {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.9;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.01em;
    position: relative;
}

.green-text-content::first-letter {
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 700;
    float: left;
    line-height: 0.8;
    margin-right: 8px;
    margin-top: 4px;
    color: rgba(255, 255, 255, 1);
}

/* Creative Green Text Layout - Compact Horizontal */
.green-text-creative {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.green-quote-modern {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 30px;
    align-items: start;
    padding: 20px 0;
}

.green-quote-accent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}

.green-quote-accent-line {
    width: 2px;
    height: 80px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
    border-radius: 2px;
}

.green-quote-accent-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.green-quote-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.green-quote-main {
    font-size: clamp(1.4rem, 3vw, 1.75rem);
    color: rgba(255, 255, 255, 1);
    line-height: 1.5;
    margin: 0;
    font-weight: 300;
    letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
    .green-quote-main {
        font-size: clamp(1.3rem, 2.2vw, 1.5rem);
    }
}

@media (min-width: 1400px) {
    .green-quote-main {
        font-size: clamp(1.4rem, 2.5vw, 1.6rem);
    }
}

.green-quote-highlight {
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    position: relative;
    display: inline-block;
}

.green-quote-highlight::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    transform: scaleX(0.8);
    transform-origin: left;
}

.green-quote-sub {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
    letter-spacing: 0.01em;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 1024px) {
    .green-quote-sub {
        font-size: clamp(1rem, 1.8vw, 1.15rem);
    }
}

@media (min-width: 1400px) {
    .green-quote-sub {
        font-size: clamp(1.1rem, 2vw, 1.2rem);
    }
}

.green-quote-signature {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
}

.green-quote-signature-line {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
}

.green-quote-name {
    font-size: clamp(0.85rem, 1.3vw, 1rem);
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-style: normal;
}

@media (min-width: 768px) {
    .green-quote-modern {
        gap: 40px;
    }
    
    .green-quote-accent-line {
        height: 100px;
    }
    
    .green-quote-body {
        gap: 28px;
    }
    
    .green-quote-sub {
        padding-left: 30px;
    }
    
    .green-quote-signature-line {
        width: 60px;
    }
}

/* Green Section Social Media Icons */
.green-section-social {
    display: flex;
    gap: 24px;
    margin-top: 40px;
    align-items: center;
}

.green-section-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.green-section-social-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
}

.green-section-social-link svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

@media (min-width: 1024px) {
    .green-section-social {
        gap: 32px;
        margin-top: 50px;
    }
    
    .green-section-social-link {
        width: 56px;
        height: 56px;
    }
    
    .green-section-social-link svg {
        width: 28px;
        height: 28px;
    }
}

@media (min-width: 1024px) {
    .green-quote-modern {
        gap: 50px;
        padding: 30px 0;
    }
    
    .green-quote-accent-line {
        height: 120px;
    }
    
    .green-quote-body {
        gap: 32px;
    }
    
    .green-quote-sub {
        padding-left: 40px;
    }
    
    .green-quote-signature {
        margin-top: 20px;
    }
    
    .green-quote-signature-line {
        width: 80px;
    }
}

.green-text-line {
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
    margin: 0;
}

.green-text-emphasis {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.green-text-medium {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.green-text-final {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
}

.green-text-bold {
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
}

.green-text-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.green-text-label {
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
}

.green-text-value {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: rgba(255, 255, 255, 1);
    font-weight: 500;
}

.green-text-separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.2em;
    margin: 0 4px;
}

@media (min-width: 768px) {
    .green-text-creative {
        gap: 24px;
    }
    
    .green-text-inline {
        gap: 16px 24px;
        padding: 24px 0;
    }
}

@media (min-width: 1024px) {
    .green-text-creative {
        gap: 28px;
    }
    
    .green-text-inline {
        gap: 20px 32px;
    }
}

.green-section-image {
    width: 100%;
    position: relative;
}

.green-intro-photo {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.green-name-section {
    margin-top: 30px;
    width: 100%;
}

.green-designer-name {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.green-designer-role {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
    font-weight: 500;
}

.ms-phone-video-green {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
    display: block;
}

@media (min-width: 768px) {
    .ms-phone-video-green {
        max-width: 350px;
    }
}

@media (min-width: 1024px) {
    .ms-phone-video-green {
        max-width: 400px;
    }
}

@media (min-width: 1400px) {
    .ms-phone-video-green {
        max-width: 450px;
    }
}

@media (min-width: 1920px) {
    .ms-phone-video-green {
        max-width: 500px;
    }
}

.green-section-content {
    width: 100%;
}

.green-header {
    margin-bottom: 60px;
}

@media (min-width: 1024px) {
    .green-header {
        margin-bottom: 80px;
    }
}

.green-header .services-label {
    color: rgba(255, 255, 255, 0.7);
}

.green-header .services-title-new {
    color: #fff;
}

.green-header .services-title-new .accent {
    color: rgba(255, 255, 255, 0.6);
}

.green-text {
    color: rgba(255, 255, 255, 0.9);
}

.green-section-content .mission-label {
    color: rgba(255, 255, 255, 0.7);
}

.green-section-content .mission-title {
    color: #fff;
}

.green-section-content .website-design-list li {
    color: rgba(255, 255, 255, 0.9);
}

.green-section-content .website-design-list li::before {
    color: rgba(255, 255, 255, 0.6);
}

.green-section-content .ms-uxui-text {
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
}

@media (min-width: 1024px) {
    .website-design-designer {
        padding: 80px 80px 160px 80px;
    }
}

@media (min-width: 1400px) {
    .website-design-designer {
        padding: 100px 120px 180px 120px;
    }
}

@media (min-width: 1920px) {
    .website-design-designer {
        padding: 120px 160px 200px 160px;
    }
}

@media (min-width: 2560px) {
    .website-design-designer {
        padding: 140px 200px 240px 200px;
        max-width: 2400px;
        margin: 0 auto;
    }
}

@media (min-width: 3840px) {
    .website-design-designer {
        padding: 160px 240px 280px 240px;
        max-width: 2800px;
        margin: 0 auto;
    }
}

.designer-qualities {
    list-style: none;
    padding: 0;
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 800px;
}

.designer-qualities li {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: #000;
    font-weight: 500;
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: transparent;
}

.designer-philosophy {
    margin-top: 60px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.philosophy-label {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}

.philosophy-text {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    color: #000;
    font-style: italic;
    line-height: 1.6;
}

/* Different Section */
.website-design-different {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

.different-list {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    max-width: 700px;
}

.different-list li {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.different-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: rgba(0, 0, 0, 0.5);
}

/* Service Section */
.website-design-service {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

.service-checklist {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    max-width: 800px;
}

.service-checklist li {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
}

/* Matters Section */
.website-design-matters {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

.matters-list {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    max-width: 700px;
}

.matters-list li {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
}

.matters-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.5em;
    line-height: 0.8;
}

/* Results Section */
.website-design-results {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

.results-list {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    max-width: 700px;
}

.results-list li {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
}

.results-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: rgba(0, 0, 0, 0.5);
}

/* Serve Section */
.website-design-serve {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

.serve-list {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    max-width: 900px;
}

.serve-list li {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
    text-align: center;
}

/* Approach Section */
.website-design-approach {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

.approach-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin: 40px 0;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.approach-block {
    text-align: left;
}

.approach-label {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: #000;
    font-weight: 600;
    margin-bottom: 20px;
}

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

.approach-list li {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
}

.approach-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: rgba(0, 0, 0, 0.5);
}

/* UX Section */
.website-design-ux {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

.ux-list {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    max-width: 700px;
}

.ux-list li {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
}

.ux-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: rgba(0, 0, 0, 0.5);
}

/* Edge Section */
.website-design-edge {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

.edge-list {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    max-width: 700px;
}

.edge-list li {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
}

.edge-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.5em;
    line-height: 0.8;
}

/* Content & Messaging Section */
.website-design-content-msg {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

.content-list {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    max-width: 700px;
}

.content-list li {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    padding: 12px 0;
    padding-left: 30px;
    position: relative;
}

.content-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .serve-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .website-design-about,
    .website-design-designer,
    .website-design-different,
    .website-design-service,
    .website-design-matters,
    .website-design-results,
    .website-design-serve,
    .website-design-approach,
    .website-design-ux,
    .website-design-edge,
    .website-design-content-msg {
        padding: 160px 40px;
    }
}

@media (min-width: 1400px) {
    .website-design-service {
        padding: 180px 60px;
    }
}

@media (min-width: 1920px) {
    .website-design-service {
        padding: 200px 120px;
    }
}

@media (min-width: 2560px) {
    .website-design-service {
        padding: clamp(240px, 15vw, 320px) clamp(160px, 10vw, 213.33px);
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (min-width: 3840px) {
    .website-design-service {
        padding: clamp(320px, 20vw, 400px) clamp(213.33px, 14.22vw, 320px);
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Features Section */
.website-design-features {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

.website-design-features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

.website-design-feature {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-number {
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.1);
    line-height: 1;
    letter-spacing: -0.05em;
}

.feature-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #000;
    letter-spacing: 0.05em;
    margin: 0;
}

.feature-description {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
    margin: 0;
}

/* Why It Matters Section */
.website-design-why {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

.why-title-section {
    margin-bottom: 80px;
    text-align: center;
}

.why-number {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.1);
    line-height: 1;
    margin-bottom: 40px;
    letter-spacing: -0.05em;
}

.why-title {
    font-size: clamp(2rem, 6vw, 6rem);
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    margin-bottom: 0;
    letter-spacing: -0.03em;
    text-align: center;
}

.why-title span {
    display: inline;
    white-space: nowrap;
}

.why-title .accent {
    color: rgba(0, 0, 0, 0.5);
}

.why-text-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: start;
}

.why-text-block {
    max-width: 600px;
    margin: 0 auto;
}

.why-lead {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: #000;
    line-height: 1.6;
    margin-bottom: 24px;
    font-weight: 500;
}

.why-body {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.8;
}

.why-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

.why-stat {
    text-align: left;
}

.why-stat .stat-value {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: #000;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.why-stat .stat-desc {
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.6);
}

/* CTA Section */
.website-design-cta {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
    text-align: center;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.cta-title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.cta-text {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.7;
    margin-bottom: 40px;
}

.cta-button {
    display: inline-block;
    padding: 20px 50px;
    background: transparent;
    border: 2px solid rgba(0, 0, 0, 0.3);
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-button:hover {
    border-color: #000;
    background: rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .website-design-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 80px;
    }
    
    .why-text-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 80px;
    }
    
    .why-stats {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    .website-design-features {
        padding: 160px 80px;
    }
    
    .website-design-why {
        padding: 160px 80px;
    }
    
    .website-design-cta {
        padding: 160px 80px;
    }
    
    .website-design-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 100px;
    }
}

@media (min-width: 1400px) {
    .website-design-cta {
        padding: 180px 100px;
    }
}

@media (min-width: 1920px) {
    .website-design-cta {
        padding: 200px 160px;
        max-width: 100%;
        width: 100%;
    }
    
    .cta-content {
        max-width: 1066.67px; /* 800px * 1.33 for better scaling */
        width: 100%;
    }
    
    .cta-title {
        font-size: 4rem;
    }
    
    .cta-text {
        font-size: 1.125rem;
    }
    
    .cta-button,
    .cta-button-primary {
        padding: 24px 60px;
        font-size: 1rem;
    }
}

@media (min-width: 2560px) {
    .website-design-cta {
        padding: clamp(240px, 16vw, 320px) clamp(213.33px, 14.22vw, 266.67px);
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .cta-content {
        max-width: clamp(800px, 53.33vw, 1066.67px); /* 800px * 1.33 = 1066.67px */
        width: 100%;
    }
    
    .cta-title {
        font-size: clamp(4rem, 5.33vw, 5.33rem); /* 4rem * 1.33 = 5.32rem */
        margin-bottom: clamp(24px, 1.6vw, 32px);
    }
    
    .cta-text {
        font-size: clamp(1.125rem, 1.5vw, 1.5rem); /* 1.125rem * 1.33 = 1.49625rem */
        margin-bottom: clamp(40px, 2.67vw, 53.33px);
    }
    
    .cta-button,
    .cta-button-primary {
        padding: clamp(24px, 1.6vw, 32px) clamp(60px, 4vw, 80px);
        font-size: clamp(1rem, 1.33vw, 1.33rem); /* 1rem * 1.33 = 1.33rem */
    }
}

@media (min-width: 3840px) {
    .website-design-cta {
        padding: clamp(320px, 21.33vw, 400px) clamp(266.67px, 17.78vw, 400px);
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .cta-content {
        max-width: clamp(1066.67px, 71.11vw, 1600px); /* 800px * 2 = 1600px */
        width: 100%;
    }
    
    .cta-title {
        font-size: clamp(5.33rem, 8vw, 8rem); /* 4rem * 2 = 8rem */
        margin-bottom: clamp(32px, 2.13vw, 48px);
    }
    
    .cta-text {
        font-size: clamp(1.5rem, 2.25vw, 2.25rem); /* 1.125rem * 2 = 2.25rem */
        margin-bottom: clamp(53.33px, 3.56vw, 80px);
    }
    
    .cta-button,
    .cta-button-primary {
        padding: clamp(32px, 2.13vw, 48px) clamp(80px, 5.33vw, 120px);
        font-size: clamp(1.33rem, 2vw, 2rem); /* 1rem * 2 = 2rem */
    }
}

@media (min-width: 1024px) {
    .website-design-content-section {
        padding: 160px 40px;
    }
    
    .website-design-process {
        gap: 80px;
        margin-bottom: 100px;
    }
    
    .process-arrow {
        font-size: 2.5rem;
    }
    
    .process-label {
        font-size: clamp(2.5rem, 5vw, 5rem); /* Even larger on desktop */
    }
}

@media (max-width: 1023px) {
    .website-design-content {
        flex-direction: column;
        gap: 40px;
        padding: 0 24px;
    }
    
    .website-design-video-container {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        max-height: 50dvh;
        margin: 0 auto;
    }
    
    .website-design-video-container video {
        transform: scale(1);
        transform-origin: center;
    }
    
    .website-design-title-container {
        position: absolute;
        right: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 0;
    }
    
    .website-design-title {
        text-align: center;
        font-size: clamp(2.5rem, 6vw, 4rem);
    }
}

@media (max-width: 767px) {
    .website-design-hero {
        padding: 0;
    }
    
    .website-design-content {
        padding: 0 20px;
    }
    
    .website-design-video-container {
        bottom: auto;
        max-height: 40dvh;
    }
    
    .website-design-title-container {
        position: absolute;
        right: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding: 20px;
    }
    
    .website-design-title {
        font-size: clamp(2rem, 5vw, 3rem);
    }
}

@media (min-width: 1024px) {
    .contact-footer {
        padding: 100px 80px 50px;
    }
    
    .footer-content {
        gap: 100px;
        margin-bottom: 80px;
        padding-bottom: 80px;
    }
    
    .footer-logo {
        font-size: 3rem;
    }
}

/* Graphic Design Service Sections */
.graphic-design-service-section {
    position: relative;
    padding: 120px 40px;
    background: transparent;
    z-index: 2;
}

/* Prevent scrolling for sections with videos/images, but not concept shoots */
.graphic-design-service-section:not(#concept-shoots) {
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
}

@media (min-width: 1024px) {
    .graphic-design-service-section {
        padding: 160px 80px;
    }
}

@media (min-width: 1400px) {
    .graphic-design-service-section {
        padding: 180px 120px;
    }
}

@media (min-width: 1920px) {
    .graphic-design-service-section {
        padding: 200px 160px;
    }
}

.graphic-service-layout {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

@media (min-width: 1024px) {
    .graphic-service-layout {
        flex-direction: row;
        gap: 80px;
        align-items: center;
    }
    
    .graphic-service-layout-reverse {
        flex-direction: row-reverse;
    }
}

.graphic-service-content {
    flex: 1;
    width: 100%;
    overflow: visible !important;
    box-sizing: border-box;
    height: auto !important;
    max-height: none !important;
}

@media (min-width: 1024px) {
    .graphic-service-content {
        flex: 1;
        max-width: 50%;
    }
}

.graphic-service-description {
    margin-top: 40px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.graphic-service-description .section-text-large {
    text-align: left;
    margin-bottom: 40px;
    max-width: 100% !important;
    padding: 0 !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

/* Hide or constrain decorative elements for graphic design sections */
.graphic-service-description .section-text-large::before,
.graphic-service-description .section-text-large::after {
    display: none !important;
}

.graphic-service-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
    width: 100%;
    box-sizing: border-box;
}

.graphic-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.6;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
}

.graphic-feature-item span:not(.graphic-feature-dot) {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.graphic-feature-dot {
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.5em;
}

.graphic-service-image {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Allow posters video container to show larger video */
.graphic-service-image:has(#postersVideo) {
    overflow: visible;
    z-index: 1;
}

@media (min-width: 1024px) {
    .graphic-service-image {
        flex: 1;
        max-width: 50%;
    }
}

.graphic-service-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: none !important;
    transform: scale(0.85);
    transform-origin: center;
}

/* Don't apply general scale to specific videos that have their own transforms */
.graphic-service-video#logoVideo,
.graphic-service-video#postersVideo,
.graphic-service-video#invitationsVideo {
    transform-origin: center;
    /* Keep their specific transform values */
}

/* Don't scale hero video */
.website-design-hero:has(#graphicDesignVideo) .graphic-service-video,
.website-design-hero:has(#graphicDesignVideo) video,
.website-design-hero:has(#graphicDesignVideo) #graphicDesignVideo {
    transform: none !important;
}

/* Logo Video - Reduced size */
#logoVideo {
    transform: scale(0.8) translateY(0px);
    transform-origin: center;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: none !important;
}

@media (min-width: 1024px) {
    #logoVideo {
        transform: scale(0.85) translateY(0px);
    }
}

@media (min-width: 1400px) {
    #logoVideo {
        transform: scale(0.9) translateY(0px);
    }
}

@media (min-width: 1920px) {
    #logoVideo {
        transform: scale(0.95) translateY(0px);
    }
}

@media (min-width: 2560px) {
    #logoVideo {
        transform: scale(0.71) translateY(0px); /* 0.95 / 1.33 = 0.71 */
    }
}

@media (min-width: 3840px) {
    #logoVideo {
        transform: scale(0.475) translateY(0px); /* 0.95 / 2 = 0.475 */
    }
}

/* Allow logo video container to show smaller video */
.graphic-service-image:has(#logoVideo) {
    overflow: visible;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Posters Video - Reduced size */
#postersVideo {
    transform: scale(0.75) translateY(100px);
    transform-origin: center;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: none !important;
}

@media (min-width: 1024px) {
    #postersVideo {
        transform: scale(0.8) translateY(120px);
    }
}

@media (min-width: 1400px) {
    #postersVideo {
        transform: scale(0.85) translateY(140px);
    }
}

@media (min-width: 1920px) {
    #postersVideo {
        transform: scale(0.9) translateY(160px);
    }
}

@media (min-width: 2560px) {
    #postersVideo {
        transform: scale(0.68) translateY(clamp(160px, 12.03vw, 213.33px)); /* 0.9 / 1.33 = 0.68, 160px * 1.33 = 213.33px */
    }
}

@media (min-width: 3840px) {
    #postersVideo {
        transform: scale(0.45) translateY(clamp(213.33px, 8.33vw, 320px)); /* 0.9 / 2 = 0.45, 160px * 2 = 320px */
    }
}

/* Invitations Video - Reduced size */
#invitationsVideo {
    transform: scale(0.9) translateY(100px);
    transform-origin: center;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: none !important;
}

@media (min-width: 1024px) {
    #invitationsVideo {
        transform: scale(0.95) translateY(120px);
    }
}

@media (min-width: 1400px) {
    #invitationsVideo {
        transform: scale(1.0) translateY(140px);
    }
}

@media (min-width: 1920px) {
    #invitationsVideo {
        transform: scale(1.05) translateY(160px);
    }
}

@media (min-width: 2560px) {
    #invitationsVideo {
        transform: scale(0.79) translateY(clamp(160px, 12.03vw, 213.33px)); /* 1.05 / 1.33 = 0.79, 160px * 1.33 = 213.33px */
    }
}

@media (min-width: 3840px) {
    #invitationsVideo {
        transform: scale(0.525) translateY(clamp(213.33px, 8.33vw, 320px)); /* 1.05 / 2 = 0.525, 160px * 2 = 320px */
    }
}

/* Allow invitations video container to show larger video */
.graphic-service-image:has(#invitationsVideo) {
    overflow: visible;
    z-index: 1;
}

/* Printing Image - Reduced size (not hero section) */
#printingImage {
    /* Mobile: no scaling to prevent crashes from memory usage */
    transform: scale(1.0) translateY(20px) !important;
    transform-origin: center;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: none !important;
    will-change: auto;
}

/* Tablet and up: apply scaling */
@media (min-width: 768px) {
    #printingImage {
        transform: scale(1.2) translateY(50px) !important;
    }
}

@media (min-width: 1024px) {
    #printingImage {
        transform: scale(1.3) translateY(80px) !important;
        max-height: none !important;
    }
}

@media (min-width: 1400px) {
    #printingImage {
        transform: scale(1.4) translateY(100px) !important;
        max-height: none !important;
    }
}

@media (min-width: 1920px) {
    #printingImage {
        transform: scale(1.5) translateY(120px) !important;
        max-height: none !important;
    }
}

@media (min-width: 2560px) {
    #printingImage {
        transform: scale(1.13) translateY(clamp(120px, 9.02vw, 160px)) !important; /* 1.5 / 1.33 = 1.13, 120px * 1.33 = 160px */
        max-height: none !important;
    }
}

@media (min-width: 3840px) {
    #printingImage {
        transform: scale(0.75) translateY(clamp(160px, 6.67vw, 240px)) !important; /* 1.5 / 2 = 0.75, 120px * 2 = 240px */
        max-height: none !important;
    }
}

/* Allow printing image container to show larger image */
.graphic-service-image:has(#printingImage) {
    overflow: visible !important;
    z-index: 1;
    max-height: none !important;
    height: auto !important;
}

/* Prevent all graphic design sections from being scrollable */
/* Exclude concept shoots section */
.graphic-design-service-section:not(#concept-shoots) .website-design-content-wrapper {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Ensure all videos and images in graphic design sections don't cause scrolling */
/* Exclude concept shoots section */
.graphic-design-service-section:not(#concept-shoots) video,
.graphic-design-service-section:not(#concept-shoots) img {
    max-height: none !important;
    object-fit: contain !important;
}

@media (min-width: 1024px) {
    .graphic-design-service-section:not(#concept-shoots) video,
    .graphic-design-service-section:not(#concept-shoots) img {
        max-height: none !important;
    }
}

@media (min-width: 1400px) {
    .graphic-design-service-section:not(#concept-shoots) video,
    .graphic-design-service-section:not(#concept-shoots) img {
        max-height: none !important;
    }
}

@media (min-width: 1920px) {
    .graphic-design-service-section:not(#concept-shoots) video,
    .graphic-design-service-section:not(#concept-shoots) img {
        max-height: none !important;
    }
}

/* Business Card Image - Make larger */
.business-card-image {
    /* Mobile: no scaling to prevent crashes from memory usage */
    transform: scale(1.0) translateY(20px) !important;
    transform-origin: center;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: none !important;
    /* Force GPU acceleration but limit memory */
    will-change: auto;
}

/* Tablet and up: apply scaling */
@media (min-width: 768px) {
    .business-card-image {
        transform: scale(1.5) translateY(50px) !important;
    }
}

@media (min-width: 1024px) {
    .business-card-image {
        transform: scale(1.8) translateY(80px) !important;
    }
}

@media (min-width: 1400px) {
    .business-card-image {
        transform: scale(2.0) translateY(100px) !important;
    }
}

@media (min-width: 1920px) {
    .business-card-image {
        transform: scale(2.2) translateY(120px) !important;
    }
}

@media (min-width: 2560px) {
    .business-card-image {
        transform: scale(1.65) translateY(clamp(120px, 9.02vw, 160px)) !important; /* 2.2 / 1.33 = 1.65 */
    }
}

@media (min-width: 3840px) {
    .business-card-image {
        transform: scale(1.9) translateY(clamp(160px, 6.67vw, 240px)) !important; /* 2.2 / 2 = 1.1 */
    }
}

/* T-Shirt Images - Reduced size for monitors */
.tshirt-image {
    /* Mobile: no scaling to prevent crashes from memory usage */
    transform: scale(1.0) !important;
    transform-origin: center;
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Force GPU acceleration but limit memory */
    will-change: auto;
    max-width: 100%;
}

/* Tablet and up: apply scaling */
@media (min-width: 768px) {
    .tshirt-image {
        transform: scale(0.7) !important;
    }
}

@media (min-width: 1024px) {
    .tshirt-image {
        transform: scale(0.8) !important;
    }
}

@media (min-width: 1400px) {
    .tshirt-image {
        transform: scale(0.9) !important;
    }
}

@media (min-width: 1920px) {
    .tshirt-image {
        transform: scale(1.0) !important;
    }
}

@media (min-width: 2560px) {
    .tshirt-image {
        transform: scale(0.75) !important; /* 1.0 / 1.33 = 0.75 */
    }
}

@media (min-width: 3840px) {
    .tshirt-image {
        transform: scale(0.5) !important; /* 1.0 / 2 = 0.5 */
    }
}

/* Allow business card image container to show larger image */
.graphic-service-image:has(.business-card-image) {
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tote Bag Images - Reduced size */
.totebag-image {
    transform: scale(0.7) translateY(50px) !important;
    transform-origin: center;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: none !important;
}

@media (min-width: 1024px) {
    .totebag-image {
        transform: scale(0.8) translateY(80px) !important;
    }
}

@media (min-width: 1400px) {
    .totebag-image {
        transform: scale(0.9) translateY(100px) !important;
    }
}

@media (min-width: 1920px) {
    .totebag-image {
        transform: scale(1.0) translateY(120px) !important;
    }
}

@media (min-width: 2560px) {
    .totebag-image {
        transform: scale(0.75) translateY(clamp(120px, 9.02vw, 160px)) !important; /* 1.0 / 1.33 = 0.75 */
    }
}

@media (min-width: 3840px) {
    .totebag-image {
        transform: scale(0.5) translateY(clamp(160px, 6.67vw, 240px)) !important; /* 1.0 / 2 = 0.5 */
    }
}

/* Allow tote bag image container to show larger image */
.graphic-service-image:has(.totebag-image) {
    overflow: visible !important;
    position: relative !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure parent containers don't clip tote bag images */
.graphic-design-service-section:has(.totebag-image),
.website-design-content-wrapper:has(.totebag-image),
.graphic-service-layout:has(.totebag-image) {
    overflow: visible !important;
}

.graphic-image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.graphic-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.graphic-image-placeholder video,
.graphic-service-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.graphic-image-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.graphic-fallback-content {
    text-align: center;
    padding: 40px;
}

.graphic-fallback-content span {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 600;
    color: rgba(0, 0, 0, 0.3);
    letter-spacing: 0.1em;
}

@media (max-width: 767px) {
    .graphic-design-service-section {
        padding: 80px 24px;
    }
    
    .graphic-service-layout {
        gap: 40px;
    }
    
    .graphic-service-description .section-text-large {
        font-size: 1rem;
        margin-bottom: 30px;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .graphic-feature-item {
        font-size: 0.95rem;
        gap: 12px;
    }
    
    /* Fix video clipping on mobile */
    .graphic-service-image {
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }
    
    .graphic-image-placeholder {
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }
    
    /* Reset video transforms on mobile */
    #logoVideo,
    #postersVideo,
    #invitationsVideo {
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        max-height: 60dvh;
    }
    
    .graphic-service-video {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        max-height: 60dvh;
    }
    
    /* Ensure containers don't clip */
    .graphic-service-image:has(#logoVideo),
    .graphic-service-image:has(#postersVideo),
    .graphic-service-image:has(#invitationsVideo) {
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }
}

/* Package Selection Styles */
.package-selection-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
}

@media (min-width: 768px) {
    .package-selection-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

.package-option {
    position: relative;
    cursor: pointer;
    display: block;
}

.package-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.package-card {
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.package-option:hover .package-card {
    border-color: rgba(0, 0, 0, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.package-option input[type="radio"]:checked + .package-card {
    border-color: #000;
    border-width: 3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.package-popular {
    border-color: #000;
    border-width: 3px;
}

.package-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: #000;
    color: #fff;
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 4px;
}

.package-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.package-name {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: #000;
    margin: 0;
    letter-spacing: -0.02em;
}

.package-price {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    color: #000;
}

.package-subtitle {
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 20px;
    font-weight: 500;
}

.package-details {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.package-details li {
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.6;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    text-transform: none;
    font-weight: normal;
}

.package-details li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000;
    font-weight: bold;
}

.package-details li:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .package-selection-grid {
        gap: 20px;
    }
    
    .package-card {
        padding: 24px;
    }
    
    .package-details li {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }
}

/* ============================================
   COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   Covers: Small phones, Large phones, Tablets, Desktop, Large monitors
   ============================================ */

/* ===== SMALL PHONES (320px - 480px) ===== */
@media (max-width: 480px) {
    /* Hide cursor and underline animations on mobile */
    .power-cursor,
    .power-underline,
    .power-cursor-web,
    .power-underline-web,
    .expertise-cursor,
    .expertise-underline,
    .about-us-cursor,
    .about-us-underline,
    .process-cursor,
    .green-power-cursor,
    .green-power-underline,
    .branding-cursor,
    .branding-underline {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Navigation */
    .navbar {
        padding: 16px 0;
    }
    
    .nav-container {
        padding: 0 16px;
    }
    
    .logo-btn {
        font-size: 1.25rem;
    }
    
    .mobile-menu-content a {
        font-size: 1.25rem;
    }
    
    /* Hero Sections */
    .hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 60px 16px;
    }
    
    .hero-secondary {
        padding: 60px 16px;
        min-height: auto;
    }
    
    .hero-secondary-bg-text {
        padding: 0 16px;
    }
    
    .hero-secondary-bg-text-content {
        font-size: clamp(1.25rem, 5vw, 3rem);
        white-space: normal;
        word-wrap: break-word;
    }
    
    .hero-secondary-logo-container {
        width: clamp(180px, 35vw, 280px) !important;
    }
    
    .hero-secondary-logo-image {
        width: clamp(180px, 35vw, 280px) !important;
    }
    
    /* Website Design Hero */
    .website-design-hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 60px 16px;
    }
    
    .website-design-content {
        flex-direction: column;
        gap: 30px;
        padding: 0 16px !important;
    }
    
    .website-design-video-container {
        width: 100%;
        max-width: 100%;
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        max-height: 40dvh;
        margin: 0 auto;
    }
    
    .website-design-video-container video {
        width: 100%;
        height: auto;
        max-height: 40dvh;
        object-fit: contain;
    }
    
    .website-design-title-container {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        text-align: center;
        padding: 0;
        width: 100%;
    }
    
    .website-design-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
        text-align: center;
        line-height: 1.2;
    }
    
    .website-design-title span {
        display: block;
    }
    
    /* Spline Container */
    .spline-container,
    .spline-container-secondary {
        width: 100%;
        height: 100%;
    }
    
    .spline-canvas,
    .spline-canvas-secondary {
        width: 100%;
        height: 100%;
    }
    
    /* Content Sections */
    .website-design-content-section {
        padding: 60px 20px !important;
    }
    
    .website-design-content-wrapper {
        padding: 0 16px !important;
    }
    
    /* Black Sections */
    .full-package-section,
    .black-section-below-expertise,
    .black-section-below-transparent {
        padding: 0 20px !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }
    
    /* Full Package Section - Mobile Styling */
    .full-package-video {
        flex-direction: column;
        gap: 40px;
        margin-top: 40px;
        align-items: center;
    }
    
    .landing-web-video-container {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .landing-web-video-container video {
        width: 100%;
        height: auto;
        max-height: 50dvh;
        object-fit: contain;
    }
    
    .full-package-text {
        width: 100%;
        text-align: center;
        padding-left: 0;
        order: 2;
    }
    
    .full-package-title {
        font-size: clamp(2rem, 8vw, 3.5rem) !important;
        text-align: center !important;
        transform: none !important;
    }
    
    .full-package-title span {
        display: block;
    }
    
    .learn-more-button {
        margin: 20px auto 0;
        display: block;
    }
    
    .black-section-layout {
        flex-direction: column;
        gap: 40px;
    }
    
    .black-section-video-container {
        width: 100%;
        max-width: 100%;
    }
    
    .black-section-video-container video {
        width: 100%;
        height: auto;
        max-height: 50dvh;
    }
    
    .black-section-text {
        width: 100%;
        text-align: center;
    }
    
    .black-section-title {
        font-size: clamp(2rem, 8vw, 3.5rem) !important;
        text-align: center;
    }
    
    .learn-more-button-black {
        margin: 20px auto 0;
    }
    
    /* Transparent Sections */
    .transparent-section-above-expertise,
    .transparent-section-below-graphic {
        padding: 60px 20px !important;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 16px;
    }
    
    /* Graphic Design Sections */
    .graphic-design-service-section {
        padding: 60px 20px !important;
    }
    
    .graphic-service-layout {
        flex-direction: column;
        gap: 40px;
    }
    
    .graphic-service-content {
        width: 100%;
    }
    
    .graphic-service-image {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }
    
    .graphic-image-placeholder {
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }
    
    /* Reset video transforms on mobile */
    #logoVideo,
    #postersVideo,
    #invitationsVideo {
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        max-height: 50dvh;
    }
    
    .graphic-service-video {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        max-height: 50dvh;
    }
    
    /* Ensure containers don't clip */
    .graphic-service-image:has(#logoVideo),
    .graphic-service-image:has(#postersVideo),
    .graphic-service-image:has(#invitationsVideo) {
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }
    
    /* Text Sizes */
    .services-title-new {
        font-size: clamp(2rem, 8vw, 3.5rem) !important;
    }
    
    .section-text-large {
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
    }
    
    /* Forms */
    .form-container {
        padding: 20px 16px;
    }
    
    .form-step {
        padding: 20px 16px;
    }
    
    .form-field {
        margin-bottom: 20px;
    }
    
    .form-field input,
    .form-field textarea,
    .form-field select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 16px;
    }
    
    /* Package Cards */
    .package-selection-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .package-card {
        padding: 20px;
    }
    
    /* Process Steps */
    .website-design-process-new {
        flex-direction: column;
        gap: 20px;
    }
    
    .process-item {
        width: 100%;
        max-width: 100%;
        padding: 30px 20px;
    }
    
    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .testimonial-card {
        padding: 30px 20px;
    }
    
    /* Founder/Team Sections */
    .founder-section-modern {
        padding: 40px 20px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
    .founder-photo-modern {
        max-width: 100%;
        margin-bottom: 30px;
    }
    
    .team-modern-grid {
        gap: 40px;
    }
    
    /* Footer */
    .contact-footer {
        padding: 60px 20px 30px;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 40px;
    }
}

/* ===== LARGE PHONES (481px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {
    /* Hide cursor and underline animations on mobile */
    .power-cursor,
    .power-underline,
    .power-cursor-web,
    .power-underline-web,
    .expertise-cursor,
    .expertise-underline,
    .about-us-cursor,
    .about-us-underline,
    .process-cursor,
    .green-power-cursor,
    .green-power-underline,
    .branding-cursor,
    .branding-underline {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Navigation */
    .navbar {
        padding: 20px 0;
    }
    
    .nav-container {
        padding: 0 24px;
    }
    
    /* Hero Sections */
    .hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 80px 24px;
    }
    
    .hero-secondary {
        padding: 80px 24px;
        min-height: auto;
    }
    
    .hero-secondary-bg-text {
        padding: 0 24px;
    }
    
    .hero-secondary-bg-text-content {
        font-size: clamp(2rem, 6vw, 4.5rem);
    }
    
    .hero-secondary-logo-container {
        width: clamp(100px, 18vw, 180px);
    }
    
    .hero-secondary-logo-image {
        width: clamp(100px, 18vw, 180px);
    }
    
    /* Website Design Hero */
    .website-design-hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 80px 24px;
    }
    
    .website-design-content {
        flex-direction: column;
        gap: 40px;
        padding: 0 24px !important;
    }
    
    .website-design-video-container {
        width: 100%;
        max-width: 90%;
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        max-height: 45dvh;
        margin: 0 auto;
    }
    
    .website-design-video-container video {
        width: 100%;
        height: auto;
        max-height: 45dvh;
        object-fit: contain;
    }
    
    .website-design-title-container {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        text-align: center;
        padding: 0;
        width: 100%;
    }
    
    .website-design-title {
        font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
        text-align: center;
    }
    
    .website-design-title span {
        display: block;
    }
    
    /* Content Sections */
    .website-design-content-section {
        padding: 80px 30px !important;
    }
    
    .website-design-content-wrapper {
        padding: 0 30px !important;
    }
    
    /* Black Sections */
    .full-package-section,
    .black-section-below-expertise,
    .black-section-below-transparent {
        padding: 0 20px !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }
    
    /* Full Package Section - Large Phone Styling */
    .full-package-video {
        flex-direction: column;
        gap: 50px;
        margin-top: 50px;
        align-items: center;
    }
    
    .landing-web-video-container {
        width: 100%;
        max-width: 90%;
        order: 1;
    }
    
    .landing-web-video-container video {
        width: 100%;
        height: auto;
        max-height: 50dvh;
        object-fit: contain;
    }
    
    .full-package-text {
        width: 100%;
        text-align: center;
        padding-left: 0;
        order: 2;
    }
    
    .full-package-title {
        font-size: clamp(2.5rem, 7vw, 4.5rem) !important;
        text-align: center !important;
        transform: none !important;
    }
    
    .learn-more-button {
        margin: 20px auto 0;
        display: block;
    }
    
    .black-section-layout {
        flex-direction: column;
        gap: 50px;
    }
    
    .black-section-video-container {
        width: 100%;
        max-width: 90%;
    }
    
    .black-section-title {
        font-size: clamp(2.5rem, 7vw, 4.5rem) !important;
    }
    
    /* Transparent Sections */
    .transparent-section-above-expertise,
    .transparent-section-below-graphic {
        padding: 80px 30px !important;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    /* Graphic Design Sections */
    .graphic-design-service-section {
        padding: 80px 30px !important;
    }
    
    .graphic-service-layout {
        flex-direction: column;
        gap: 50px;
    }
    
    /* Fix video clipping on large phones */
    .graphic-service-image {
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }
    
    .graphic-image-placeholder {
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }
    
    /* Reset video transforms on large phones */
    #logoVideo,
    #postersVideo,
    #invitationsVideo {
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        max-height: 55dvh;
    }
    
    .graphic-service-video {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        max-height: 55dvh;
    }
    
    /* Ensure containers don't clip */
    .graphic-service-image:has(#logoVideo),
    .graphic-service-image:has(#postersVideo),
    .graphic-service-image:has(#invitationsVideo) {
        overflow: visible;
        width: 100%;
        max-width: 100%;
    }
    
    /* Forms */
    .form-container {
        padding: 30px 24px;
    }
    
    .package-selection-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    /* Process Steps */
    .website-design-process-new {
        gap: 30px;
    }
    
    .process-item {
        min-width: 200px;
        max-width: 280px;
    }
    
    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Founder/Team Sections */
    .founder-section-modern {
        padding: 50px 30px;
    }
}

/* ===== TABLETS (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Navigation */
    .nav-links-desktop {
        gap: 32px;
    }
    
    .nav-links-desktop a {
        font-size: 0.85rem;
    }
    
    /* Hero Sections */
    .hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 100px 40px;
    }
    
    .hero-secondary {
        padding: 100px 40px;
    }
    
    .hero-secondary-bg-text {
        padding: 0 40px;
    }
    
    .hero-secondary-bg-text-content {
        font-size: clamp(2.5rem, 7vw, 5.5rem);
    }
    
    .hero-secondary-logo-container {
        width: clamp(140px, 16vw, 200px);
    }
    
    .hero-secondary-logo-image {
        width: clamp(140px, 16vw, 200px);
    }
    
    /* Website Design Hero */
    .website-design-hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 100px 40px;
    }
    
    .website-design-content {
        flex-direction: row;
        gap: 50px;
        padding: 0 40px !important;
    }
    
    .website-design-video-container {
        width: 50%;
        max-width: 50%;
        position: relative;
        bottom: auto;
        max-height: 60dvh;
    }
    
    .website-design-video-container video {
        width: 100%;
        height: auto;
        max-height: 60dvh;
        object-fit: contain;
    }
    
    .website-design-title-container {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 50%;
        text-align: left;
        padding: 0;
    }
    
    .website-design-title {
        font-size: clamp(3rem, 5vw, 4.5rem) !important;
        text-align: left;
    }
    
    /* Content Sections */
    .website-design-content-section {
        padding: 100px 40px !important;
    }
    
    .website-design-content-wrapper {
        padding: 0 40px !important;
    }
    
    /* Black Sections */
    .full-package-section,
    .black-section-below-expertise,
    .black-section-below-transparent {
        padding: 0 50px !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }
    
    .black-section-layout {
        gap: 60px;
    }
    
    .black-section-video-container {
        max-width: 50%;
    }
    
    .black-section-title {
        font-size: clamp(3rem, 6vw, 5rem) !important;
    }
    
    /* Transparent Sections */
    .transparent-section-above-expertise,
    .transparent-section-below-graphic {
        padding: 100px 50px !important;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    /* Graphic Design Sections */
    .graphic-design-service-section {
        padding: 100px 50px !important;
    }
    
    .graphic-service-layout {
        gap: 60px;
    }
    
    /* Forms */
    .package-selection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    /* Process Steps */
    .website-design-process-new {
        gap: 40px;
        flex-wrap: wrap;
    }
    
    .process-item {
        min-width: 220px;
        max-width: 300px;
    }
    
    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    /* Founder/Team Sections */
    .founder-section-modern {
        padding: 60px 40px;
        gap: 60px;
    }
    
    .founder-photo-modern {
        max-width: 350px;
    }
}

/* ===== DESKTOP MONITORS (1025px - 1920px) ===== */
@media (min-width: 1025px) and (max-width: 1920px) {
    /* Navigation */
    .nav-container {
        max-width: 1400px;
        padding: 0 40px;
    }
    
    .nav-links-desktop {
        gap: 40px;
    }
    
    /* Hero Sections */
    .hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 120px 60px;
        max-width: 100%;
    }
    
    .hero-logo-container {
        max-width: 100%;
    }
    
    .hero-logo-wrapper {
        padding: 80px 80px;
    }
    
    .hero-logo-image {
        width: clamp(500px, 25vw, 650px);
        max-width: 80vw;
    }
    
    .hero-corner {
        width: 110px;
    }
    
    .hero-corner-top-left {
        top: -55px;
        left: -55px;
    }
    
    .hero-corner-top-right {
        top: -55px;
        right: -55px;
    }
    
    .hero-corner-bottom-left {
        bottom: -55px;
        left: -55px;
    }
    
    .hero-corner-bottom-right {
        bottom: -55px;
        right: -55px;
    }
    
    .hero-tagline {
        top: 60%;
    }
    
    .hero-tagline p {
        font-size: 0.95rem;
        letter-spacing: 0.45em;
    }
    
    .hero-tagline-line {
        width: 72px;
    }
    
    .hero-secondary {
        padding: 120px 60px;
        max-width: 100%;
    }
    
    .hero-secondary-bg-text {
        padding: 0 60px;
        max-width: 100%;
    }
    
    .hero-secondary-bg-text-content {
        font-size: clamp(3rem, 8vw, 8rem);
        max-width: 100%;
    }
    
    .hero-secondary-logo-container {
        width: clamp(150px, 15vw, 200px);
    }
    
    .hero-secondary-logo-image {
        width: clamp(150px, 15vw, 200px);
    }
    
    /* Website Design Hero */
    .website-design-hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 120px 60px;
    }
    
    .website-design-content {
        flex-direction: column;
        gap: 0;
        padding: 120px 60px !important;
        align-items: center;
        max-width: 1400px;
    }
    
    .website-design-video-title {
        margin: 0 0 100px 0;
        padding: 0 60px;
    }
    
    .website-design-video-title h2 {
        font-size: clamp(3.5rem, 6vw, 6.5rem);
    }
    
    .website-design-video-container {
        width: 100%;
        max-width: 75%;
        position: relative;
        bottom: auto;
        max-height: 75dvh;
        order: 2;
        margin: 0;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
    }
    
    .website-design-video-container video {
        width: 100%;
        height: auto;
        max-height: 65dvh;
        object-fit: contain;
    }
    
    .website-design-title-container {
        position: relative;
        top: auto;
        width: 100%;
        max-width: 90%;
        text-align: center;
        padding: 0;
        order: 2;
        margin-top: 20px;
        box-sizing: border-box;
    }
    
    .website-design-title {
        font-size: clamp(3.5rem, 5vw, 5rem) !important;
        text-align: center;
        width: 100%;
    }
    
    /* Graphic Design Hero - special positioning */
    .website-design-hero:has(#graphicDesignVideo) .website-design-content {
        flex-direction: column;
        gap: 100px;
        max-width: 1800px;
        padding: 0 80px !important;
        align-items: center;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-video-container {
        width: 100%;
        max-width: 70%;
        max-height: 60dvh;
        order: 1;
        margin-top: 50px;
        margin-bottom: 0;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-video-container video {
        max-height: 60dvh;
    }
    
    .website-design-hero:has(#graphicDesignVideo) #graphicDesignVideo {
        transform: scale(1) translate(-40px, 0);
        transform-origin: center;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title-container {
        text-align: center;
        width: 100%;
        max-width: 90%;
        order: 2;
        margin-top: 20px;
        box-sizing: border-box;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title {
        font-size: clamp(5.5rem, 6.5vw, 8rem) !important;
        text-align: center;
        width: 100%;
    }
    
    /* Content Sections */
    .website-design-content-section {
        padding: 120px 40px !important;
    }
    
    .website-design-content-wrapper {
        padding: 0 40px !important;
    }
    
    /* Black Sections */
    .full-package-section,
    .black-section-below-expertise,
    .black-section-below-transparent {
        padding: 0 40px !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }
    
    .black-section-layout {
        gap: 80px;
    }
    
    .black-section-video-container {
        max-width: 45%;
    }
    
    /* Transparent Sections */
    .transparent-section-above-expertise,
    .transparent-section-below-graphic {
        padding: 120px 80px !important;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }
    
    /* Graphic Design Sections */
    .graphic-design-service-section {
        padding: 140px 80px !important;
    }
    
    .graphic-service-layout {
        gap: 80px;
    }
    
    /* Forms */
    .package-selection-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
    
    /* Process Steps */
    .website-design-process-new {
        gap: 60px;
        flex-wrap: nowrap;
    }
    
    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
    }
    
    /* Founder/Team Sections */
    .founder-section-modern {
        padding: 70px 50px;
        gap: 70px;
    }
    
    .founder-photo-modern {
        max-width: 400px;
    }
}

/* ===== LARGE MONITORS (1921px+) ===== */
@media (min-width: 1921px) {
    /* Navigation */
    .nav-container {
        max-width: 1600px;
        padding: 0 60px;
    }
    
    /* Hero Sections */
    .hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 160px 100px;
        max-width: 100%;
    }
    
    .hero-logo-container {
        max-width: 100%;
    }
    
    .hero-logo-wrapper {
        padding: 100px 100px;
    }
    
    .hero-logo-image {
        width: clamp(500px, 25vw, 700px);
        max-width: 80vw;
    }
    
    .hero-corner {
        width: 120px;
    }
    
    .hero-corner-top-left {
        top: -60px;
        left: -60px;
    }
    
    .hero-corner-top-right {
        top: -60px;
        right: -60px;
    }
    
    .hero-corner-bottom-left {
        bottom: -60px;
        left: -60px;
    }
    
    .hero-corner-bottom-right {
        bottom: -60px;
        right: -60px;
    }
    
    .hero-tagline {
        top: 60%;
    }
    
    .hero-tagline p {
        font-size: 1rem;
        letter-spacing: 0.5em;
    }
    
    .hero-tagline-line {
        width: 80px;
    }
    
    .hero-secondary {
        padding: 160px 100px;
        max-width: 100%;
    }
    
    .hero-secondary-bg-text {
        padding: 0 100px;
        max-width: 100%;
    }
    
    .hero-secondary-bg-text-content {
        font-size: clamp(4rem, 8vw, 10rem);
        max-width: 100%;
    }
    
    .hero-secondary-logo-container {
        width: clamp(180px, 15vw, 220px);
    }
    
    .hero-secondary-logo-image {
        width: clamp(180px, 15vw, 220px);
    }
    
    /* Website Design Hero */
    .website-design-hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 160px 100px;
        max-width: 100%;
    }
    
    .website-design-content {
        flex-direction: column;
        gap: 0;
        padding: 140px 100px !important;
        max-width: 1600px;
        margin: 0 auto;
        width: 100%;
        align-items: center;
    }
    
    .website-design-video-title {
        margin: 0 0 120px 0;
        padding: 0 100px;
    }
    
    .website-design-video-title h2 {
        font-size: clamp(4rem, 6.5vw, 7rem);
    }
    
    .website-design-video-container {
        width: 100%;
        max-width: 70%;
        position: relative;
        bottom: auto;
        max-height: 80dvh;
        order: 2;
        margin: 0;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.25);
    }
    
    .website-design-video-container video {
        width: 100%;
        height: auto;
        max-height: 70dvh;
        object-fit: contain;
    }
    
    .website-design-title-container {
        position: relative;
        top: auto;
        width: 100%;
        max-width: 90%;
        text-align: center;
        padding: 0;
        order: 2;
        margin-top: 30px;
        box-sizing: border-box;
    }
    
    .website-design-title {
        font-size: clamp(4rem, 5vw, 6rem) !important;
        text-align: center;
        width: 100%;
    }
    
    /* Graphic Design Hero - special positioning */
    .website-design-hero:has(#graphicDesignVideo) .website-design-content {
        flex-direction: column;
        gap: 120px;
        max-width: 2000px;
        padding: 0 120px !important;
        align-items: center;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-video-container {
        width: 100%;
        max-width: 65%;
        max-height: 65dvh;
        order: 1;
        margin-top: 60px;
        margin-bottom: 0;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-video-container video {
        max-height: 65dvh;
    }
    
    .website-design-hero:has(#graphicDesignVideo) #graphicDesignVideo {
        transform: scale(1) translate(-40px, 0);
        transform-origin: center;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title-container {
        text-align: center;
        width: 100%;
        max-width: 90%;
        order: 2;
        margin-top: 30px;
        box-sizing: border-box;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title {
        font-size: clamp(6.5rem, 7vw, 9.5rem) !important;
        text-align: center;
        width: 100%;
    }
    
    /* Content Sections */
    .website-design-content-section {
        padding: 160px 60px !important;
    }
    
    .website-design-content-wrapper {
        padding: 0 60px !important;
    }
    
    /* Black Sections */
    .full-package-section,
    .black-section-below-expertise,
    .black-section-below-transparent {
        padding: 0 60px !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }
    
    .black-section-layout {
        gap: 100px;
    }
    
    .black-section-video-container {
        max-width: 40%;
    }
    
    /* Transparent Sections */
    .transparent-section-above-expertise,
    .transparent-section-below-graphic {
        padding: 160px 120px !important;
    }
    
    /* Services Grid */
    .services-grid {
        gap: 60px;
        max-width: 1600px;
        margin: 0 auto;
    }
    
    /* Graphic Design Sections */
    .graphic-design-service-section {
        padding: 180px 120px !important;
    }
    
    .graphic-service-layout {
        gap: 100px;
    }
    
    /* Forms */
    .package-selection-grid {
        gap: 50px;
        max-width: 1400px;
        margin: 0 auto;
    }
    
    /* Process Steps */
    .website-design-process-new {
        gap: 80px;
        max-width: 1600px;
        margin: 0 auto;
    }
    
    /* Testimonials */
    .testimonials-grid {
        gap: 60px;
        max-width: 1600px;
        margin: 0 auto;
    }
    
    /* Founder/Team Sections */
    .founder-section-modern {
        padding: 80px 60px;
        gap: 80px;
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .founder-photo-modern {
        max-width: 450px;
    }
}

/* ===== ULTRA-WIDE MONITORS (2560px+) ===== */
@media (min-width: 2560px) {
    /* Navigation */
    .nav-container {
        max-width: 2000px;
        padding: 0 80px;
    }
    
    /* Hero Sections */
    .hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 200px 120px;
        max-width: 100%;
    }
    
    .hero-logo-container {
        max-width: 100%;
    }
    
    .hero-logo-wrapper {
        padding: 120px 120px;
    }
    
    .hero-logo-image {
        width: clamp(600px, 20vw, 800px);
        max-width: 70vw;
    }
    
    .hero-corner {
        width: 140px;
    }
    
    .hero-corner-top-left {
        top: -70px;
        left: -70px;
    }
    
    .hero-corner-top-right {
        top: -70px;
        right: -70px;
    }
    
    .hero-corner-bottom-left {
        bottom: -70px;
        left: -70px;
    }
    
    .hero-corner-bottom-right {
        bottom: -70px;
        right: -70px;
    }
    
    .hero-tagline {
        top: 60%;
    }
    
    .hero-tagline p {
        font-size: 1.1rem;
        letter-spacing: 0.6em;
    }
    
    .hero-tagline-line {
        width: 100px;
    }
    
    .hero-secondary {
        padding: 200px 120px;
        max-width: 100%;
    }
    
    .hero-secondary-bg-text {
        padding: 0 120px;
        max-width: 100%;
    }
    
    .hero-secondary-bg-text-content {
        font-size: clamp(5rem, 6vw, 12rem);
        max-width: 100%;
    }
    
    .hero-secondary-logo-container {
        width: clamp(200px, 12vw, 280px);
    }
    
    .hero-secondary-logo-image {
        width: clamp(200px, 12vw, 280px);
    }
    
    /* Website Design Hero */
    .website-design-hero {
        height: calc(100dvh - 80px);
        min-height: calc(100dvh - 80px);
        padding: 200px 120px;
        max-width: 100%;
    }
    
    .website-design-content {
        flex-direction: column;
        gap: 0;
        padding: 200px 120px !important;
        max-width: 100% !important;
        margin: 0 !important;
        width: 100%;
        align-items: center;
    }
    
    .website-design-video-title {
        margin: 0 0 160px 0;
        padding: 0 120px;
    }
    
    .website-design-video-title h2 {
        font-size: clamp(5rem, 7.5vw, 9rem);
    }
    
    .website-design-video-container {
        width: 100%;
        max-width: 65%;
        position: relative;
        bottom: auto;
        max-height: 85dvh;
        order: 2;
        margin: 0;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 50px 120px rgba(0, 0, 0, 0.3);
    }
    
    .website-design-video-container video {
        width: 100%;
        height: auto;
        max-height: 75dvh;
        object-fit: contain;
    }
    
    .website-design-title-container {
        position: relative;
        top: auto;
        width: 100%;
        max-width: 90%;
        text-align: center;
        padding: 0;
        order: 2;
        margin-top: 40px;
        box-sizing: border-box;
    }
    
    .website-design-title {
        font-size: clamp(5rem, 4vw, 7rem) !important;
        text-align: center;
        width: 100%;
    }
    
    /* Graphic Design Hero - special positioning */
    .website-design-hero:has(#graphicDesignVideo) .website-design-content {
        flex-direction: column;
        gap: 140px;
        max-width: 100% !important;
        padding: 0 160px !important;
        align-items: center;
        margin: 0 !important;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-video-container {
        width: 100%;
        max-width: 60%;
        max-height: 70dvh;
        order: 1;
        margin-top: 70px;
        margin-bottom: 0;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-video-container video {
        max-height: 70dvh;
    }
    
    .website-design-hero:has(#graphicDesignVideo) #graphicDesignVideo {
        transform: scale(1) translate(-40px, 0);
        transform-origin: center;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title-container {
        text-align: center;
        width: 100%;
        max-width: 90%;
        order: 2;
        margin-top: 40px;
        box-sizing: border-box;
    }
    
    .website-design-hero:has(#graphicDesignVideo) .website-design-title {
        font-size: clamp(7.5rem, 6vw, 11rem) !important;
        text-align: center;
        width: 100%;
    }
    
    /* Content Sections */
    .website-design-content-section {
        padding: 200px 80px !important;
        max-width: 100%;
        width: 100%;
        display: block;
    }
    
    .website-design-content-wrapper {
        padding: 0 80px !important;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        display: block;
    }
    
    /* Black Sections */
    .full-package-section,
    .black-section-below-expertise,
    .black-section-below-transparent {
        padding: 0 80px !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    .black-section-layout {
        gap: clamp(120px, 8vw, 160px);
    }
    
    .black-section-video-container {
        max-width: 40%;
    }
    
    /* Black Section Responsive Scaling */
    .black-section-title {
        font-size: clamp(7rem, 9.31vw, 9.31rem) !important; /* Scale: 7rem * 1.33 = 9.31rem */
    }
    
    .black-section-text {
        font-size: clamp(1.125rem, 1.5vw, 1.5rem);
    }
    
    /* Transparent Sections */
    .transparent-section-above-expertise,
    .transparent-section-below-graphic {
        padding: clamp(200px, 13.33vw, 266.67px) clamp(140px, 9.33vw, 186.67px) !important;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    /* Services Grid */
    .services-grid {
        gap: 80px;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    /* Graphic Design Sections */
    .graphic-design-service-section {
        padding: 220px 140px !important;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    .graphic-service-layout {
        gap: 120px;
    }
    
    /* Forms */
    .package-selection-grid {
        gap: 60px;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    /* Process Steps */
    .website-design-process-new {
        gap: 100px;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    /* Testimonials */
    .testimonials-grid {
        gap: 80px;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    /* Founder/Team Sections */
    .founder-section-modern {
        padding: 100px 80px;
        gap: 100px;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    .founder-photo-modern {
        max-width: 550px;
    }
}

/* ===== 4K MONITORS (3840px+) ===== */
/* Consolidated into comprehensive media query below - removed duplicate */

/* ===== LANDSCAPE ORIENTATION FIXES ===== */
@media (max-width: 1024px) and (orientation: landscape) {
    .hero {
        height: auto;
        min-height: calc(100dvh - 80px);
        padding: 40px 20px;
    }
    
    .hero-secondary {
        min-height: auto;
        padding: 60px 30px;
    }
    
    .hero-secondary-bg-text-content {
        font-size: clamp(2rem, 5vw, 4rem);
    }
    
    .website-design-hero {
        height: auto;
        min-height: calc(100dvh - 80px);
        padding: 60px 30px;
    }
    
    .website-design-video-container {
        max-height: 60dvh;
    }
    
    .website-design-video-container video {
        max-height: 60dvh;
    }
    
    .black-section-video-container video {
        max-height: 60dvh;
    }
    
    .graphic-service-video video {
        max-height: 60dvh;
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-links-desktop a,
    .mobile-menu-content a,
    .learn-more-button-black,
    button,
    .package-card {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .process-item:hover,
    .package-card:hover,
    .service-card:hover {
        transform: none;
    }
}

/* ===== HIGH DPI DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp rendering on retina displays */
    .logo-btn,
    .services-title-new,
    .black-section-title {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .navbar,
    .mobile-menu,
    .mobile-menu-btn,
    video,
    .scroll-progress {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .website-design-content-section,
    .full-package-section {
        page-break-inside: avoid;
    }
}

/* ===== RESPONSIVE UTILITY CLASSES ===== */
/* Hide on mobile */
.hide-mobile {
    display: block;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop */
.hide-desktop {
    display: none;
}

@media (min-width: 769px) {
    .hide-desktop {
        display: block;
    }
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive videos */
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent horizontal scroll */
body,
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Container max-widths */
.container,
.nav-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.website-design-content-wrapper {
    box-sizing: border-box;
}

/* Text overflow prevention */
.services-title-new,
.black-section-title,
.section-text-large,
h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Mobile: Ensure black section title wraps properly */
@media (max-width: 767px) {
    .black-section-title {
        padding: 0 20px;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
    }
    
    .black-section-title span {
        display: block;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* Form responsive fixes */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Grid responsive fallbacks */
.grid-responsive {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 481px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (min-width: 769px) {
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
}

@media (min-width: 1025px) {
    .grid-responsive {
        grid-template-columns: repeat(4, 1fr);
        gap: 50px;
    }
}

/* Flex responsive utilities */
.flex-responsive {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 769px) {
    .flex-responsive {
        flex-direction: row;
        gap: 40px;
    }
}

/* Spacing utilities for different screen sizes */
@media (max-width: 480px) {
    .spacing-mobile {
        padding: 20px;
        margin: 20px 0;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .spacing-tablet {
        padding: 30px;
        margin: 30px 0;
    }
}

@media (min-width: 769px) {
    .spacing-desktop {
        padding: 40px;
        margin: 40px 0;
    }
}

/* ===== COMPREHENSIVE RESPONSIVE SCALING (Desktop 1920px as Base Ratio) ===== */
/* All elements scale proportionally based on desktop (1920px) as reference */

@media (min-width: 2560px) {
    /* Use full width - containers are already full width, content inside is centered via padding */
    .container,
    .nav-container,
    .footer-container,
    .about-wrapper,
    .website-design-content-wrapper,
    .website-design-content-section,
    .website-design-content,
    .services-wrapper,
    .transparent-section-content,
    .fast-turnaround-info,
    .green-section-layout,
    .graphic-design-service-section,
    .package-selection-grid,
    .website-design-process-new,
    .testimonials-grid,
    .founder-section-modern,
    .website-design-about,
    .website-design-service,
    .website-design-designer,
    .website-design-cta {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Scale ratio: 2560/1920 = 1.33 */
    
    /* Specific padding for services-wrapper */
    .services-wrapper {
        padding: clamp(160px, 10vw, 213.33px) clamp(80px, 5vw, 106.67px) !important;
    }
    
    /* Specific padding for website-design-content-wrapper */
    .website-design-content-wrapper {
        padding: 0 clamp(160px, 10vw, 213.33px) !important;
    }
    
    /* Services Titles */
    .services-title-new {
        font-size: clamp(7rem, 9.31vw, 9.31rem); /* 7rem * 1.33 */
    }
    
    /* Process Cards */
    .process-creative-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: clamp(120px, 8vw, 160px);
    }
    
    .process-section-label {
        font-size: clamp(0.9rem, 1.2vw, 1.2rem); /* 0.9rem * 1.33 = 1.197rem */
        margin-bottom: clamp(80px, 5.33vw, 106.67px);
    }
    
    .process-creative-grid {
        gap: clamp(80px, 5.33vw, 106.67px); /* 80px * 1.33 = 106.67px */
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .process-card-creative {
        max-width: clamp(400px, 26.67vw, 533.33px) !important; /* 400px * 1.33 = 532px */
        width: 100%;
    }
    
    .process-card-content {
        padding: clamp(60px, 4vw, 80px) clamp(50px, 3.33vw, 66.67px); /* 60px * 1.33 = 80px, 50px * 1.33 = 66.67px */
    }
    
    .process-number-creative {
        font-size: clamp(10rem, 13.33vw, 13.3rem); /* 10rem * 1.33 = 13.3rem */
        height: clamp(10rem, 13.33vw, 13.3rem);
    }
    
    .process-number-wrapper {
        min-height: clamp(10rem, 13.33vw, 13.3rem);
        margin-bottom: clamp(30px, 2vw, 40px);
    }
    
    .process-number-label {
        font-size: clamp(0.85rem, 1.13vw, 1.13rem); /* 0.85rem * 1.33 = 1.1305rem */
    }
    
    .process-title-creative {
        font-size: clamp(2.2rem, 2.93vw, 2.93rem); /* 2.2rem * 1.33 = 2.926rem */
        margin-bottom: clamp(15px, 1vw, 20px);
    }
    
    .process-description-creative {
        font-size: clamp(1.4rem, 1.87vw, 1.87rem); /* 1.4rem * 1.33 = 1.862rem */
        margin-bottom: clamp(20px, 1.33vw, 26.67px);
    }
    
    .process-arrow-powerful {
        font-size: clamp(4rem, 5.33vw, 5.33rem); /* 4rem * 1.33 = 5.32rem */
    }
    
    .process-title-underline {
        height: clamp(4px, 0.27vw, 5.33px);
        margin-bottom: clamp(30px, 2vw, 40px);
    }
    
    .process-card-powerful:hover .process-title-underline {
        width: clamp(160px, 10.67vw, 213.33px); /* 160px * 1.33 = 212.8px */
    }
    
    /* Statement Pieces */
    .website-design-statement-piece {
        max-width: 100% !important;
        width: 100% !important;
        padding: clamp(100px, 6.67vw, 133.33px) clamp(80px, 5.33vw, 106.67px);
    }
    
    .statement-piece-title {
        font-size: clamp(2.5rem, 3.33vw, 3.33rem); /* 2.5rem * 1.33 = 3.325rem */
    }
    
    .statement-piece-text {
        font-size: clamp(1.875rem, 2.5vw, 2.5rem); /* 1.875rem * 1.33 = 2.49375rem */
    }
    
    .statement-piece-standalone .statement-piece-text {
        font-size: clamp(3.5rem, 4.67vw, 4.67rem); /* 3.5rem * 1.33 = 4.655rem */
    }
    
    .statement-piece-standalone {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Buttons */
    .cta-button-primary,
    .cta-button,
    .learn-more-button {
        padding: clamp(18px, 1.2vw, 24px) clamp(50px, 3.33vw, 66.67px);
        font-size: clamp(0.9rem, 1.2vw, 1.2rem);
    }
    
    /* Designer Section */
    .designer-intro-photo {
        max-width: clamp(400px, 26.67vw, 533.33px);
    }
    
    .designer-name {
        font-size: clamp(2rem, 2.67vw, 2.67rem);
    }
    
    .designer-role {
        font-size: clamp(1rem, 1.33vw, 1.33rem);
    }
    
    /* Service Process Grid */
    .service-process-grid {
        gap: clamp(40px, 2.67vw, 53.33px);
        max-width: 100%;
    }
    
    .process-grid-item {
        padding: clamp(70px, 4.67vw, 93.33px) clamp(50px, 3.33vw, 66.67px);
        min-height: clamp(240px, 16vw, 320px);
    }
    
    .process-grid-number {
        font-size: clamp(4.5rem, 6vw, 6rem); /* 4.5rem * 1.33 = 5.985rem ≈ 6rem */
        margin-bottom: clamp(20px, 1.33vw, 26.67px);
    }
    
    .process-grid-title {
        font-size: clamp(1.375rem, 1.83vw, 1.83rem); /* 1.375rem * 1.33 = 1.82875rem */
    }
    
    /* Green Section */
    .green-section-title {
        font-size: clamp(7rem, 9.31vw, 9.31rem) !important; /* 7rem * 1.33 = 9.31rem */
    }
    
    .green-description-line-1,
    .green-description-line-2,
    .green-description-line-3,
    .green-description-line-4 {
        font-size: clamp(1.5rem, 2vw, 2rem);
    }
    
    /* Brand Promise */
    .brand-promise-content {
        font-size: clamp(1.25rem, 1.67vw, 1.67rem);
    }
    
    /* CTA Section */
    .cta-title {
        font-size: clamp(4rem, 5.33vw, 5.33rem);
    }
    
    .cta-text {
        font-size: clamp(1.125rem, 1.5vw, 1.5rem);
    }
    
    /* Video Containers */
    .green-section-video {
        max-width: clamp(400px, 26.67vw, 533.33px);
    }
    
    .different-video-container {
        max-width: 100%;
    }
    
    /* Images */
    .designer-photo-wrapper img {
        max-width: clamp(400px, 26.67vw, 533.33px);
    }
    
    /* Grid Gaps */
    .statement-pieces-grid {
        gap: clamp(40px, 2.67vw, 53.33px);
    }
    
    .service-process-grid {
        gap: clamp(40px, 2.67vw, 53.33px);
    }
    
    /* Spacing */
    .website-design-about,
    .website-design-designer,
    .website-design-service {
        padding-top: clamp(200px, 13.33vw, 266.67px);
        padding-bottom: clamp(200px, 13.33vw, 266.67px);
    }
    
    /* Hero Panel Stat Boxes */
    .hero-panel {
        padding: clamp(14px, 1.87vw, 18.67px) clamp(16px, 2.13vw, 21.33px) !important;
        min-width: clamp(160px, 21.33vw, 213.33px) !important;
        border-radius: clamp(12px, 1.6vw, 16px) !important;
    }
    
    .hero-panel-title {
        font-size: clamp(13px, 1.73vw, 17.33px) !important;
    }
    
    .hero-panel-big {
        font-size: clamp(22px, 2.93vw, 29.33px) !important;
    }
    
    .hero-panel-specs {
        left: clamp(32px, 4.27vw, 42.67px) !important;
        top: clamp(100px, 13.33vw, 133.33px) !important;
        width: clamp(200px, 26.67vw, 266.67px) !important;
        padding: clamp(16px, 2.13vw, 21.33px) clamp(18px, 2.4vw, 24px) !important;
    }
    
    .hero-panel-metrics {
        right: clamp(32px, 4.27vw, 42.67px) !important;
        top: clamp(100px, 13.33vw, 133.33px) !important;
        width: clamp(180px, 24vw, 240px) !important;
        padding: clamp(20px, 2.67vw, 26.67px) clamp(18px, 2.4vw, 24px) !important;
    }
    
    .hero-panel-modules {
        left: clamp(24px, 3.2vw, 32px) !important;
        bottom: clamp(48px, 6.4vw, 64px) !important;
        width: clamp(240px, 32vw, 320px) !important;
        padding: clamp(18px, 2.4vw, 24px) clamp(20px, 2.67vw, 26.67px) !important;
    }
    
    .hero-panel-process {
        right: clamp(24px, 3.2vw, 32px) !important;
        bottom: clamp(48px, 6.4vw, 64px) !important;
        width: clamp(320px, 40vw, 480px) !important;
        min-width: 320px !important;
        padding: clamp(16px, 2.13vw, 21.33px) clamp(20px, 2.67vw, 26.67px) !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    
    .hero-loadout {
        left: clamp(32px, 4.27vw, 42.67px) !important;
        width: clamp(220px, 29.33vw, 293.33px) !important;
    }
    
    .hero-achievements {
        right: clamp(32px, 4.27vw, 42.67px) !important;
        width: clamp(240px, 32vw, 320px) !important;
    }
    
    .hero-chip {
        padding: clamp(6px, 0.8vw, 8px) clamp(8px, 1.07vw, 10.67px) !important;
        font-size: clamp(12px, 1.6vw, 16px) !important;
    }
    
    /* Override inline styles for hero panel stat boxes */
    .hero-panel-metrics .hero-panel-title,
    .hero-panel-metrics div.hero-panel-title,
    .hero-panel-metrics div[style*="font-size:11px"] {
        font-size: clamp(11px, 1.47vw, 14.67px) !important;
    }
    
    .hero-panel-metrics #creativeIndex,
    .hero-panel-metrics .hero-panel-big,
    .hero-panel-metrics div[style*="font-size:32px"] {
        font-size: clamp(32px, 4.27vw, 42.67px) !important;
        line-height: 1 !important;
    }
    
    .hero-panel-metrics div[style*="font-size:0.65rem"],
    .hero-panel-metrics > div > div[style*="font-size"] {
        font-size: clamp(0.65rem, 0.87vw, 0.87rem) !important;
    }
    
    /* Scale all hero panel text elements */
    .hero-panel-specs div[style*="font-size"],
    .hero-panel-modules div[style*="font-size"],
    .hero-panel-process div[style*="font-size"],
    .hero-loadout div[style*="font-size"],
    .hero-achievements div[style*="font-size"] {
        font-size: clamp(0.65rem, 0.87vw, 0.87rem) !important;
    }
    
    /* Ensure graphic design containers don't crop videos/images */
    .graphic-design-service-section,
    .graphic-service-layout,
    .graphic-service-content,
    .graphic-service-image,
    .graphic-image-placeholder,
    .website-design-content-section,
    .website-design-content-wrapper {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
}

@media (min-width: 3840px) {
    /* Use full width - containers are already full width, content inside is centered via padding */
    .container,
    .nav-container,
    .footer-container,
    .about-wrapper,
    .website-design-content-wrapper,
    .website-design-content-section,
    .website-design-content,
    .services-wrapper,
    .transparent-section-content,
    .fast-turnaround-info,
    .green-section-layout,
    .graphic-design-service-section,
    .package-selection-grid,
    .website-design-process-new,
    .testimonials-grid,
    .founder-section-modern,
    .website-design-about,
    .website-design-service,
    .website-design-designer,
    .website-design-cta {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Scale ratio: 3840/1920 = 2 */
    
    /* Specific padding for services-wrapper */
    .services-wrapper {
        padding: clamp(213.33px, 13.33vw, 284.44px) clamp(106.67px, 6.67vw, 142.22px) !important;
    }
    
    /* Specific padding for website-design-content-wrapper */
    .website-design-content-wrapper {
        padding: 0 clamp(213.33px, 14.22vw, 320px) !important;
    }
    
    /* Services Titles */
    .services-title-new {
        font-size: clamp(9.31rem, 14vw, 14rem); /* 7rem * 2 */
    }
    
    /* Process Cards */
    .process-creative-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: clamp(160px, 10.67vw, 240px);
    }
    
    .process-section-label {
        font-size: clamp(1.2rem, 1.8vw, 1.8rem); /* 0.9rem * 2 = 1.8rem */
        margin-bottom: clamp(106.67px, 7.11vw, 160px);
    }
    
    .process-creative-grid {
        gap: clamp(106.67px, 7.11vw, 160px); /* 80px * 2 = 160px */
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .process-card-creative {
        max-width: clamp(533.33px, 35.56vw, 800px) !important; /* 400px * 2 = 800px */
        width: 100%;
    }
    
    .process-card-content {
        padding: clamp(80px, 5.33vw, 120px) clamp(66.67px, 4.44vw, 100px); /* 60px * 2 = 120px, 50px * 2 = 100px */
    }
    
    .process-number-creative {
        font-size: clamp(13.3rem, 17.78vw, 20rem); /* 10rem * 2 = 20rem */
        height: clamp(13.3rem, 17.78vw, 20rem);
    }
    
    .process-number-wrapper {
        min-height: clamp(13.3rem, 17.78vw, 20rem);
        margin-bottom: clamp(40px, 2.67vw, 60px);
    }
    
    .process-number-label {
        font-size: clamp(1.13rem, 1.51vw, 1.7rem); /* 0.85rem * 2 = 1.7rem */
    }
    
    .process-title-creative {
        font-size: clamp(2.93rem, 4.38vw, 4.4rem); /* 2.2rem * 2 = 4.4rem */
        margin-bottom: clamp(20px, 1.33vw, 30px);
    }
    
    .process-description-creative {
        font-size: clamp(1.87rem, 2.8vw, 2.8rem); /* 1.4rem * 2 = 2.8rem */
        margin-bottom: clamp(26.67px, 1.78vw, 40px);
    }
    
    .process-arrow-powerful {
        font-size: clamp(5.33rem, 8vw, 8rem); /* 4rem * 2 = 8rem */
    }
    
    .process-title-underline {
        height: clamp(5.33px, 0.4vw, 8px);
        margin-bottom: clamp(40px, 2.67vw, 60px);
    }
    
    .process-card-powerful:hover .process-title-underline {
        width: clamp(213.33px, 14.22vw, 320px); /* 160px * 2 = 320px */
    }
    
    /* Statement Pieces */
    .statement-piece-title {
        font-size: clamp(3.33rem, 5vw, 5rem); /* 2.5rem * 2 = 5rem */
    }
    
    .statement-piece-text {
        font-size: clamp(2.5rem, 3.75vw, 3.75rem); /* 1.875rem * 2 = 3.75rem */
    }
    
    .statement-piece-standalone .statement-piece-text {
        font-size: clamp(4.67rem, 7vw, 7rem); /* 3.5rem * 2 = 7rem */
    }
    
    .statement-piece-standalone {
        width: 100%;
        max-width: 100%;
    }
    
    /* Buttons */
    .cta-button-primary,
    .cta-button,
    .learn-more-button {
        padding: clamp(24px, 1.6vw, 36px) clamp(66.67px, 4.44vw, 100px);
        font-size: clamp(1.2rem, 1.8vw, 1.8rem);
    }
    
    /* Designer Section */
    .designer-intro-photo {
        max-width: clamp(533.33px, 35.56vw, 800px);
    }
    
    .designer-name {
        font-size: clamp(2.67rem, 4vw, 4rem);
    }
    
    .designer-role {
        font-size: clamp(1.33rem, 2vw, 2rem);
    }
    
    /* Service Process Grid */
    .service-process-grid {
        gap: clamp(53.33px, 4vw, 80px);
        max-width: 100%;
    }
    
    .process-grid-item {
        padding: clamp(93.33px, 7vw, 140px) clamp(66.67px, 5vw, 100px);
        min-height: clamp(320px, 24vw, 480px);
    }
    
    .process-grid-number {
        font-size: clamp(6rem, 9vw, 9rem); /* 4.5rem * 2 = 9rem */
        margin-bottom: clamp(26.67px, 2vw, 40px);
    }
    
    .process-grid-title {
        font-size: clamp(1.83rem, 2.75vw, 2.75rem); /* 1.375rem * 2 = 2.75rem */
    }
    
    /* Green Section */
    .green-section-title {
        font-size: clamp(9.31rem, 14vw, 14rem) !important; /* 7rem * 2 = 14rem */
    }
    
    .green-description-line-1,
    .green-description-line-2,
    .green-description-line-3,
    .green-description-line-4 {
        font-size: clamp(2rem, 3vw, 3rem);
    }
    
    /* Brand Promise */
    .brand-promise-content {
        font-size: clamp(1.67rem, 2.5vw, 2.5rem);
    }
    
    /* CTA Section */
    .cta-title {
        font-size: clamp(5.33rem, 8vw, 8rem);
    }
    
    .cta-text {
        font-size: clamp(1.5rem, 2.25vw, 2.25rem);
    }
    
    /* Video Containers */
    .green-section-video {
        max-width: clamp(533.33px, 35.56vw, 800px);
    }
    
    .different-video-container {
        max-width: 100%;
    }
    
    /* Images */
    .designer-photo-wrapper img {
        max-width: clamp(533.33px, 35.56vw, 800px);
    }
    
    /* Grid Gaps */
    .statement-pieces-grid {
        gap: clamp(53.33px, 4vw, 80px);
    }
    
    .service-process-grid {
        gap: clamp(53.33px, 4vw, 80px);
    }
    
    /* Spacing */
    .website-design-about,
    .website-design-designer,
    .website-design-service {
        padding-top: clamp(266.67px, 17.78vw, 400px);
        padding-bottom: clamp(266.67px, 17.78vw, 400px);
    }
    
    /* Hero Panel Stat Boxes */
    .hero-panel {
        padding: clamp(18.67px, 2.5vw, 28px) clamp(21.33px, 2.86vw, 32px) !important;
        min-width: clamp(213.33px, 28.57vw, 320px) !important;
        border-radius: clamp(16px, 2.14vw, 24px) !important;
    }
    
    .hero-panel-title {
        font-size: clamp(17.33px, 2.32vw, 26px) !important;
    }
    
    .hero-panel-big {
        font-size: clamp(29.33px, 3.93vw, 44px) !important;
    }
    
    .hero-panel-specs {
        left: clamp(42.67px, 5.71vw, 64px) !important;
        top: clamp(133.33px, 17.86vw, 200px) !important;
        width: clamp(266.67px, 35.71vw, 400px) !important;
        padding: clamp(21.33px, 2.86vw, 32px) clamp(24px, 3.21vw, 36px) !important;
    }
    
    .hero-panel-metrics {
        right: clamp(42.67px, 5.71vw, 64px) !important;
        top: clamp(133.33px, 17.86vw, 200px) !important;
        width: clamp(240px, 32.14vw, 360px) !important;
        padding: clamp(26.67px, 3.57vw, 40px) clamp(24px, 3.21vw, 36px) !important;
    }
    
    .hero-panel-modules {
        left: clamp(32px, 4.29vw, 48px) !important;
        bottom: clamp(64px, 8.57vw, 96px) !important;
        width: clamp(320px, 42.86vw, 480px) !important;
        padding: clamp(24px, 3.21vw, 36px) clamp(26.67px, 3.57vw, 40px) !important;
    }
    
    .hero-panel-process {
        right: clamp(32px, 4.29vw, 48px) !important;
        bottom: clamp(64px, 8.57vw, 96px) !important;
        width: clamp(420px, 52vw, 640px) !important;
        min-width: 420px !important;
        overflow: visible !important;
        padding: clamp(21.33px, 2.86vw, 32px) clamp(26.67px, 3.57vw, 40px) !important;
    }
    
    .hero-loadout {
        left: clamp(42.67px, 5.71vw, 64px) !important;
        width: clamp(293.33px, 39.29vw, 440px) !important;
    }
    
    .hero-achievements {
        right: clamp(42.67px, 5.71vw, 64px) !important;
        width: clamp(320px, 42.86vw, 480px) !important;
    }
    
    .hero-chip {
        padding: clamp(8px, 1.07vw, 12px) clamp(10.67px, 1.43vw, 16px) !important;
        font-size: clamp(16px, 2.14vw, 24px) !important;
    }
    
    /* Override inline styles for hero panel stat boxes */
    .hero-panel-metrics .hero-panel-title,
    .hero-panel-metrics div.hero-panel-title,
    .hero-panel-metrics div[style*="font-size:11px"] {
        font-size: clamp(14.67px, 1.96vw, 22px) !important;
    }
    
    .hero-panel-metrics #creativeIndex,
    .hero-panel-metrics .hero-panel-big,
    .hero-panel-metrics div[style*="font-size:32px"] {
        font-size: clamp(42.67px, 5.71vw, 64px) !important;
        line-height: 1 !important;
    }
    
    .hero-panel-metrics div[style*="font-size:0.65rem"],
    .hero-panel-metrics > div > div[style*="font-size"] {
        font-size: clamp(0.87rem, 1.16vw, 1.3rem) !important;
    }
    
    /* Scale all hero panel text elements */
    .hero-panel-specs div[style*="font-size"],
    .hero-panel-modules div[style*="font-size"],
    .hero-panel-process div[style*="font-size"],
    .hero-loadout div[style*="font-size"],
    .hero-achievements div[style*="font-size"] {
        font-size: clamp(0.87rem, 1.16vw, 1.3rem) !important;
    }
    
    /* Ensure graphic design containers don't crop videos/images */
    .graphic-design-service-section,
    .graphic-service-layout,
    .graphic-service-content,
    .graphic-service-image,
    .graphic-image-placeholder,
    .website-design-content-section,
    .website-design-content-wrapper {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
}

/* Mobile and Tablet: Increase Title Font Sizes (under 1050px) */
@media (max-width: 1049px) {
    /* Main Section Titles */
    .services-title-new {
        font-size: clamp(3rem, 10vw, 5rem) !important;
    }
    
    .full-package-title {
        font-size: clamp(3rem, 10vw, 5rem) !important;
    }
    
    .black-section-title {
        font-size: clamp(2.5rem, 9vw, 4.5rem) !important;
    }
    
    .green-section-title {
        font-size: clamp(2.5rem, 9vw, 4.5rem) !important;
    }
    
    .website-design-title {
        font-size: clamp(2.5rem, 9vw, 4.5rem) !important;
    }
    
    .website-design-video-title h2 {
        font-size: clamp(2.5rem, 9vw, 4.5rem) !important;
    }
    
    /* Hero Titles */
    .hero-title,
    .section-title {
        font-size: clamp(2.5rem, 9vw, 4.5rem) !important;
    }
    
    /* About and Other Section Titles */
    .about-title,
    .section-title-large {
        font-size: clamp(2.5rem, 9vw, 4.5rem) !important;
    }
    
    /* Statement Piece Titles */
    .statement-piece-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    }
    
    /* Process Card Titles */
    .process-title-creative {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
    }
    
    /* Designer Name */
    .designer-name {
        font-size: clamp(2rem, 7vw, 3rem) !important;
    }
    
    /* Mission Title */
    .mission-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    }
    
    /* Printing page - Remove title spacing */
    .graphic-design-service-section .services-title-row,
    .graphic-design-service-section .services-title-new {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .graphic-design-service-section .services-header-new {
        gap: 5px !important;
    }
}

/* ===== GLOBAL VERTICAL STACKING AND CENTERING FOR ALL PAGES (Hamburger Menu Breakpoint) ===== */
/* Applies to all widths with hamburger menu (max-width: 1049px) */
/* EXCLUDES: Index hero section (.hero-secondary) */
@media (max-width: 1049px) {
    /* Content Wrappers - Center and add padding */
    .website-design-content-wrapper,
    .about-wrapper,
    .services-wrapper,
    .contact-wrapper,
    .graphic-design-wrapper,
    .printing-wrapper,
    .website-form-container,
    .black-section-content,
    .transparent-section-content {
        padding: 0 20px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* Content Sections - Center and stack */
    .website-design-content-section,
    .about-intro-section,
    .about-stats-section,
    .about-mission-section,
    .services-content-section,
    .services-intro-section,
    .contact-content-section,
    .graphic-design-content-section,
    .printing-content-section,
    .website-form-section,
    .black-section-below-expertise,
    .black-section-below-transparent,
    .transparent-section-above-expertise,
    .transparent-section-below-graphic,
    .graphic-design-service-section {
        padding: 40px 20px !important;
        text-align: center !important;
    }

    /* Section Headers - Center */
    .services-header-new,
    .section-header,
    .about-header {
        text-align: center !important;
    }

    .services-label,
    .section-label,
    .about-label {
        text-align: center !important;
    }

    .services-title-row {
        display: flex !important;
        justify-content: center !important;
    }

    .services-title-new,
    .section-title,
    .about-title {
        text-align: center !important;
    }

    /* Grid Layouts - Stack to single column and center */
    .services-grid,
    .process-creative-grid,
    .statement-pieces-grid,
    .service-process-grid,
    .testimonials-grid,
    .about-stats-grid,
    .package-selection-grid,
    .content-grid,
    .about-grid,
    .website-design-process-new {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 30px !important;
        justify-items: center !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* Grid Items - Center content */
    .service-card,
    .process-card-creative,
    .website-design-statement-piece,
    .process-grid-item,
    .testimonial-item,
    .about-stat,
    .package-card,
    .team-member-card,
    .process-item {
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Team Member Cards - Stack vertically */
    .team-member-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .team-member-photo {
        margin: 0 auto !important;
    }

    .team-member-info {
        text-align: center !important;
    }

    /* Split Layouts - Stack vertically and center */
    .designer-split-layout,
    .website-design-different-layout,
    .about-split-layout,
    .services-split-layout,
    .green-section-main,
    .black-section-layout,
    .graphic-service-layout,
    .team-member-card {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 40px !important;
        justify-items: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Black Section Layout - Stack and center */
    .black-section-layout {
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
    }

    .black-section-text,
    .black-section-video-container {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .black-section-video-container video {
        margin: 0 auto !important;
        display: block !important;
    }

    /* Content Sections within Split Layouts */
    .designer-content-section,
    .designer-visual-section,
    .different-content,
    .different-video-container,
    .green-section-video,
    .green-section-title-wrapper {
        text-align: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .designer-intro-text,
    .designer-mission-section,
    .website-design-text,
    .brand-promise-container,
    .green-section-description {
        text-align: center !important;
    }

    /* Images and Videos - Center */
    .designer-photo-wrapper,
    .designer-intro-photo,
    .different-video-container,
    .green-section-video,
    .section-image,
    .content-image {
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Video Containers - Center and size appropriately */
    .different-video-container video,
    .green-section-video video,
    .ms-phone-video-green,
    .primoMockupVideo {
        margin: 0 auto !important;
        display: block !important;
    }

    /* Text Content - Center */
    .website-design-text,
    .about-text,
    .services-text,
    .contact-text,
    .mission-title,
    .brand-promise-content,
    .green-description-line-1,
    .green-description-line-2,
    .green-description-line-3,
    .green-description-line-4,
    .section-text,
    .section-text-large,
    .website-design-text-block,
    .black-section-text,
    .team-member-bio,
    .team-member-name,
    .team-member-role {
        text-align: center !important;
    }

    /* Lists - Center with proper bullet alignment */
    .website-design-list,
    .about-list,
    .services-list,
    .importance-list,
    .matters-list,
    .results-list,
    .serve-list,
    .approach-list,
    .ux-list,
    .edge-list,
    .content-list,
    .service-checklist {
        text-align: left !important;
        display: inline-block !important;
        margin: 0 auto !important;
        max-width: 90% !important;
        width: auto !important;
    }

    /* Improve list item appearance when centered */
    .website-design-list li,
    .about-list li,
    .services-list li,
    .importance-list li,
    .matters-list li,
    .results-list li,
    .serve-list li,
    .approach-list li,
    .ux-list li,
    .edge-list li,
    .content-list li,
    .service-checklist li {
        text-align: left !important;
        padding-left: 35px !important;
        position: relative !important;
    }

    /* Better bullet point positioning and styling for centered lists */
    .website-design-list li::before {
        left: 12px !important;
        width: 10px !important;
        height: 10px !important;
        background: #96aa9f !important;
        border-radius: 50% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .matters-list li::before,
    .edge-list li::before {
        left: 12px !important;
        font-size: 1.2em !important;
        color: rgba(0, 0, 0, 0.6) !important;
        line-height: 1.2 !important;
    }

    .importance-list li::before,
    .approach-list li::before {
        left: 8px !important;
        color: rgba(0, 0, 0, 0.5) !important;
        font-weight: 300 !important;
    }

    .results-list li::before {
        left: 10px !important;
        color: rgba(0, 0, 0, 0.6) !important;
        font-size: 1.1em !important;
    }

    .ux-list li::before,
    .content-list li::before {
        left: 10px !important;
        color: rgba(0, 0, 0, 0.5) !important;
        font-size: 1em !important;
    }

    /* Buttons and CTAs - Center */
    .cta-button,
    .cta-button-primary,
    .section-cta,
    .website-design-cta-top,
    .website-design-cta {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 40px auto !important;
    }

    .cta-content {
        text-align: center !important;
    }

    .cta-title,
    .cta-text {
        text-align: center !important;
    }

    /* Social Links - Center */
    .green-section-social,
    .footer-social-links {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    /* Process Section - Center */
    .process-creative-container {
        text-align: center !important;
    }

    .process-section-label {
        text-align: center !important;
    }

    .process-card-content {
        text-align: center !important;
    }

    .process-title-creative,
    .process-description-creative {
        text-align: center !important;
    }

    /* Service Intro - Center */
    .service-intro-creative {
        text-align: center !important;
    }

    .service-intro-main,
    .service-intro-sub {
        text-align: center !important;
    }

    /* Emphasis Section - Center */
    .service-emphasis-creative {
        text-align: center !important;
    }

    .emphasis-text {
        text-align: center !important;
    }

    /* Designer Name Section - Center */
    .designer-name-section {
        text-align: center !important;
    }

    .designer-name,
    .designer-role {
        text-align: center !important;
    }

    /* Green Box - Center */
    .ms-uxui-green-box {
        margin: 30px auto !important;
        text-align: center !important;
    }

    .ms-uxui-green-content {
        text-align: center !important;
    }

    /* Statement Pieces - Center */
    .statement-piece-title,
    .statement-piece-text {
        text-align: center !important;
    }

    /* Brand Promise - Center */
    .brand-promise-label {
        text-align: center !important;
    }

    .brand-promise-content {
        text-align: center !important;
    }

    /* Forms - Center */
    .form-container,
    .contact-form,
    .website-intake-form,
    .website-form-header {
        text-align: center !important;
    }

    .form-label,
    .form-title,
    .form-subtitle {
        text-align: center !important;
    }

    .form-section,
    .form-section-header {
        text-align: center !important;
    }

    .form-row {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .form-field {
        width: 100% !important;
    }

    .form-group {
        text-align: left !important;
        width: 100% !important;
    }

    /* Footer Content - Center on mobile/tablet */
    .footer-content {
        text-align: center !important;
    }

    .footer-brand,
    .footer-contact,
    .footer-social {
        text-align: center !important;
    }

    /* Additional Page-Specific Elements */
    /* About Page */
    .about-expand-button {
        margin: 20px auto !important;
        display: block !important;
    }

    /* Services Page */
    .services-intro-text {
        text-align: center !important;
    }

    /* Graphic Design Page */
    .graphic-service-image,
    .graphic-service-video {
        margin: 0 auto !important;
        display: block !important;
    }

    /* Contact Page */
    .contact-info {
        text-align: center !important;
    }

    /* Printing Page */
    .printing-service-item {
        text-align: center !important;
    }

    /* Album Page */
    .album-grid {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
    }

    .album-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Full Package Section (Website Design) */
    .full-package-section,
    .full-package-container {
        padding: 0 20px !important;
    }

    .full-package-video {
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
    }

    /* Ensure all flex containers stack vertically */
    [class*="layout"]:not(.hero-secondary):not(.hero-secondary *) {
        flex-direction: column !important;
    }

    [class*="split"]:not(.hero-secondary):not(.hero-secondary *) {
        flex-direction: column !important;
    }

    /* Ensure all grid containers are single column */
    [class*="grid"]:not(.hero-secondary):not(.hero-secondary *) {
        grid-template-columns: 1fr !important;
    }
}

/* Team Blurb - Override global word-break rules */
.about-team-photo-blurb .about-team-blurb,
.about-team-photo-blurb .about-team-blurb p,
.about-team-photo-blurb .about-team-blurb .section-text-large {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* ===== TABLET FIXES: Word Wrapping and Padding (769px - 1049px) ===== */
@media (min-width: 769px) and (max-width: 1049px) {
    /* Word Wrapping - Prevent text from being cut off */
    * {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    body {
        line-height: 1.6 !important;
    }
    
    /* Ensure all text containers allow wrapping */
    h1, h2, h3, h4, h5, h6,
    p, span, div, a, li, td, th {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
    
    /* Prevent long words from breaking layout */
    .services-title-new,
    .section-title,
    .about-title,
    .hero-title,
    .full-package-title,
    .black-section-title,
    .green-section-title,
    .website-design-title,
    .statement-piece-title,
    .process-title-creative {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        white-space: normal !important;
    }
    
    /* Section Padding - Add proper top and bottom padding */
    .website-design-content-section,
    .about-intro-section,
    .about-stats-section,
    .about-mission-section,
    .services-content-section,
    .services-intro-section,
    .contact-content-section,
    .graphic-design-content-section,
    .printing-content-section,
    .website-form-section,
    .black-section-below-expertise,
    .black-section-below-transparent,
    .transparent-section-above-expertise,
    .transparent-section-below-graphic,
    .graphic-design-service-section,
    .website-design-designer,
    .website-design-about,
    .website-design-service,
    .website-design-cta {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    /* Hero Sections - Proper padding */
    .hero,
    .hero-secondary,
    .website-design-hero {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
    
    /* Content Wrappers - Ensure proper spacing */
    .website-design-content-wrapper,
    .about-wrapper,
    .services-wrapper,
    .contact-wrapper,
    .graphic-design-wrapper,
    .printing-wrapper,
    .website-form-container {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
    /* Full Package Section */
    .full-package-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    /* Process Section */
    .process-creative-container {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
    
    /* Designer Section */
    .designer-split-layout {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
    
    /* Green Section */
    .designer-green-section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    /* Black Sections */
    .black-section-below-expertise,
    .black-section-below-transparent {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    /* Transparent Sections */
    .transparent-section-above-expertise,
    .transparent-section-below-graphic {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    /* Service Grid Items - Prevent text overflow */
    .service-card,
    .process-card-creative,
    .website-design-statement-piece,
    .process-grid-item,
    .testimonial-item,
    .package-card {
        padding: 30px 20px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Lists - Ensure proper wrapping */
    .website-design-list,
    .importance-list,
    .matters-list,
    .results-list,
    .serve-list,
    .approach-list,
    .ux-list,
    .content-list {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Text Content - Ensure wrapping */
    .website-design-text,
    .about-text,
    .services-text,
    .contact-text,
    .section-text,
    .statement-piece-text,
    .process-description-creative {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.7 !important;
    }
    
    /* Buttons - Prevent text cutoff */
    .cta-button,
    .cta-button-primary,
    button,
    .btn {
        word-wrap: break-word !important;
        white-space: normal !important;
        padding: 14px 18px !important;
    }
    
    /* Form Elements - Proper spacing */
    .form-container,
    .website-form-container {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    /* Footer - Proper spacing */
    .contact-footer,
    .footer-container {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* FINAL OVERRIDE: Team Blurb Word Wrapping - Must be at end to override all other rules */
.about-team-photo-blurb .about-team-blurb p.section-text-large,
.about-team-photo-blurb .about-team-blurb .section-text-large,
.about-team-blurb p.section-text-large,
.about-team-blurb .section-text-large {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: none !important;
    white-space: normal !important;
    max-width: 100% !important;
    text-align: left !important;
    /* Prevent mid-word breaks - only break at word boundaries */
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
}

@media (max-width: 1049px) {
    .about-team-photo-blurb .about-team-blurb p.section-text-large,
    .about-team-photo-blurb .about-team-blurb .section-text-large,
    .about-team-blurb p.section-text-large,
    .about-team-blurb .section-text-large {
        text-align: center !important;
    }
}

/* Chrome scroll fix - Lock scrolling to the page, not sections */
html, body {
    overflow-y: auto;
}

section {
    overflow-y: visible;
}