/* --- SYSTEM VARIABLES --- */
:root {
    --bg: #001028;
    /* Void Black */
    --text: #ffffff;
    /* Pure White (Used for Hero/Navbar) */

    /* ABOUT SECTION COLORS (60% WHITE BACKGROUND) */
    --about-bg: #FFFFFF;
    /* Pure White Background */
    --about-bg-hover: #FFFFFF;
    /* No Hover Change */
    --about-text: #001028;
    /* Dark Blue Body Text (30%) */
    --about-grid: #E0E0E0;
    /* Light Gray Grid */

    /* SERVICE SECTION COLORS (VOID BLACK) */
    --service-bg-gray: var(--bg);
    /* Base: Void Black */
    --service-bg-dark-gray: var(--bg);
    /* No Hover Change */
    --service-text-dark: var(--text);
    /* Text for Dark BG: Pure White */

    --nav-bg: #ffffff;
    /* White Navbar (60%) */
    --nav-text: #001028;
    /* Dark Blue Navbar Text (30%) */
    --grid-line: #E0E0E0;
    /* Light Gray Grid Lines */
    --accent: #FF3300;
    /* Red-Orange Accent (10%) */

    /* TYPOGRAPHY SYSTEM - Refined Hierarchy */
    /* Font Stacks */
    --font-headline: Inter, Helvetica, Arial, sans-serif;
    /* Barlow for headlines - clean, modern, authoritative */
    --font-body: 'Inter', Helvetica, Arial, sans-serif;
    /* Inter for body text - optimal readability */

    /* Responsive Font Sizes (using clamp for fluid scaling) */
    --text-3xl: clamp(48px, 6vw, 80px);
    /* H1 Hero headlines - Barlow 600 SemiBold */
    --text-2xl: clamp(36px, 4.5vw, 56px);
    /* H2 Section primary - Barlow 500 Medium */
    --text-xl: clamp(24px, 3vw, 36px);
    /* H3 tertiary headings - Barlow 400 Regular */
    --text-lg: 28px;
    /* Large text elements */
    --text-base: 20px;
    /* Large body/intro text */
    --text-sm: 17px;
    /* Standard body text - enhanced from 16px */
    --text-xs: 12px;
    /* Captions, labels */

    /* Line Heights - Optimized for readability */
    --lh-hero: 1.05;
    /* Hero titles - tight for impact */
    --lh-headline: 1.15;
    /* Section headlines - balanced */
    --lh-subhead: 1.2;
    /* Subheadings - comfortable */
    --lh-body: 1.65;
    /* Body text - enhanced readability */

    /* Letter Spacing - Refined for each level */
    --ls-hero: -0.02em;
    /* Hero - subtle negative for large text */
    --ls-headline: -0.01em;
    /* H2 - very slight tightening */
    --ls-subhead: 0;
    /* H3 - default */
    --ls-body: 0;
    /* Body text - optimal readability */
    --ls-small: 0.02em;
    /* Small text/labels - improved clarity */
    --ls-uppercase: 0.08em;
    /* Uppercase labels - industry standard */

    /* Font Weights */
    --fw-hero: 700;
    /* H1 - SemiBold */
    --fw-headline: 600;
    /* H2 - Medium */
    --fw-subhead: 400;
    /* H3 - Medium (increased from 400 for better hierarchy) */
    --fw-body: 300;
    /* Body - Light (reduced from 400 for less bold appearance) */
    --fw-emphasis: 500;
    /* Emphasis - Medium (not bold) */

    /* Navigation */
    --fs-nav: 15px;
    /* Navbar link font size */

    /* Spacing */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;

    --header-height: 64px;
}

/* --- RESET --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: auto;
    /* Controlled via JS for dynamic duration */
    overscroll-behavior: none;
    scroll-padding-top: 80px;
    /* Offset for sticky header */
}

body {
    background-color: #ffffff;
    color: var(--text);
    font-family: var(--font-body);
    /* Inter for body text */
    font-size: var(--text-sm);
    /* 17px - enhanced readability */
    font-weight: var(--fw-body);
    /* 400 Regular */
    line-height: var(--lh-body);
    /* 1.65 - comfortable reading */
    letter-spacing: var(--ls-body);
    /* 0 - optimal */
    overflow-x: hidden;
    overscroll-behavior: none;
}

/* --- ACCESSIBILITY UTILITIES --- */
/* Screen reader only - visually hidden but accessible to assistive technologies */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Swiss Page Load Animation - Opt-in for specific elements only */


/* Loading Indicator - Swiss Minimalism */
.swiss-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    z-index: 9999;
    transition: width 300ms linear;
    opacity: 0;
}

.swiss-loader.active {
    opacity: 1;
    animation: swissLoad 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes swissLoad {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* Page Transition - Cross-Fade Only */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

/* Scroll-Triggered Reveals - Optimized for Performance */
.reveal-element {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    /* Use translate3d for GPU acceleration */
    transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
    /* Reduced from 600ms to 400ms */
    will-change: opacity, transform;
    /* Hint to browser for optimization */
}

.reveal-element.revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
    /* Remove hint after animation */
}

/* Never animate text for instant readability */
p,
.small-desc,
.big-text,
li,
td,
address {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Parallax - Hero Background Only (Optimized) */
.parallax-bg {
    /* Removed will-change to reduce GPU overhead */
    transition: none;
    /* Instant updates via JS */
}

/* Disable parallax on mobile for performance */
@media (max-width: 768px) {
    .parallax-bg {
        transform: none !important;
    }

    /* Disable complex hover states on mobile */
    .grid-item:hover,
    .bento-item:hover .bento-img {
        transform: none !important;
    }
}

/* Honor prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .parallax-bg {
        transform: none !important;
    }
}

/* Skeleton Screens - Swiss Structure */
.skeleton {
    background: rgba(0, 16, 40, 0.06);
    /* Solid block, no shimmer */
    border-radius: 0;
    /* Pure geometric form */
    animation: skeletonPulse 1500ms ease-in-out infinite;
}

@keyframes skeletonPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.skeleton-heading {
    height: 40px;
    width: 60%;
    margin-bottom: 16px;
}

.skeleton-text {
    height: 14px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-text:last-child {
    width: 80%;
}

.skeleton-image {
    height: 250px;
    width: 100%;
}

/* Loading Bar - Bottom Indicator */
.loading-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    /* #FF3300 */
    z-index: 9999;
    transition: width 300ms linear;
    opacity: 0;
}

.loading-bar.active {
    opacity: 1;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    width: 100%;
    display: block;
}

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

/* --- TYPOGRAPHY HIERARCHY --- */
/* Barlow for headlines (refined weights), Inter for body */

h1,
.hero-title {
    font-family: var(--font-headline);
    font-size: var(--text-3xl);
    /* clamp(48px, 6vw, 80px) */
    font-weight: var(--fw-hero);
    /* 600 SemiBold */
    line-height: var(--lh-hero);
    /* 1.05 */
    letter-spacing: var(--ls-hero);
    /* -0.02em */
    text-wrap: balance;
    /* Prevent orphans */
}

h2,
.section-label,
.big-text {
    font-family: var(--font-headline);
    font-size: var(--text-2xl);
    /* clamp(36px, 4.5vw, 56px) */
    font-weight: var(--fw-headline);
    /* 500 Medium */
    line-height: var(--lh-headline);
    /* 1.15 */
    letter-spacing: var(--ls-headline);
    /* -0.01em */
    text-wrap: balance;
    /* Prevent orphans */
}

h3 {
    font-family: var(--font-headline);
    font-size: var(--text-xl);
    /* clamp(24px, 3vw, 36px) */
    font-weight: var(--fw-subhead);
    /* 500 Medium - clear step above body 300 */
    line-height: var(--lh-subhead);
    /* 1.2 */
    letter-spacing: 0.03em;
    /* Helps uppercase scannability */
    text-transform: uppercase;
}

p,
.small-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    /* 17px */
    font-weight: var(--fw-body);
    /* 300 Light */
    line-height: var(--lh-body);
    /* 1.65 */
    letter-spacing: var(--ls-body);
    /* 0 */
    max-width: 65ch;
    /* ~50-75 characters per line for optimal readability */
}

.footer-text {
    max-width: 65ch;
}

/* Let mobile use full width so it doesn't feel cramped */
@media (max-width: 768px) {

    p,
    .small-desc,
    .footer-text {
        max-width: 100%;
    }
}

/* Large intro/lead paragraphs */
p.lead,
.intro-text {
    font-size: var(--text-base);
    /* 20px */
    line-height: 1.6;
}

/* Emphasis text - Medium weight, not bold */
strong,
b,
.emphasis {
    font-weight: var(--fw-emphasis);
    /* 500 Medium - less jarring than bold */
}

/* Small text, captions, labels */
small,
.caption {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    /* 12px */
    font-weight: var(--fw-body);
    /* 400 */
    letter-spacing: var(--ls-small);
    /* 0.02em - improved clarity */
}

/* Cell numbers and uppercase labels */
.cell-num,
.label-uppercase {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    /* 12px */
    font-weight: var(--fw-emphasis);
    /* 500 */
    letter-spacing: var(--ls-uppercase);
    /* 0.08em - industry standard for all-caps */
    text-transform: uppercase;
}

/* --- CONTENT OFFSET FIX (MOBILE FIRST DEFAULT) --- */
/* Mobile default: Navbar (64px) + Download Button (64px) stacked vertically = 128px */
main {
    padding-top: calc(var(--header-height) * 0);
}

/* ------------------------ */


/* --- PREMIUM SCROLL MICRO-ANIMATIONS (VELOCITY-BASED) --- */



/* --- PROGRESS LINE (RECOMMENDED ADDITION) --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: var(--accent);
    z-index: 1100;
    width: 0%;
}

/* --- HEADER ELEMENTS (FIXED) --- */
.download-btn {
    position: fixed;
    top: 0;
    right: 0;
    height: var(--header-height);
    background: #001028;
    color: #ffffff;
    padding: 0 20px;
    /* Reduced padding for mobile */
    font-weight: 700;
    font-size: 11px;
    /* Slightly smaller for mobile */
    letter-spacing: 1px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-left: 1px solid #333;
}

/* Mobile: Show "PROFILE ↓" */
.btn-text-mobile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-text-desktop {
    display: none;
}

/* Desktop: Show "DOWNLOAD PROFILE ↓" */
@media (min-width: 769px) {
    .download-btn {
        padding: 0 32px;
        font-size: 12px;
    }

    .btn-text-mobile {
        display: none;
    }

    .btn-text-desktop {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
}

.download-btn:hover {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
}

/* --- ACCESSIBILITY FOCUS STATES --- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.download-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
    background-color: var(--accent);
}

.nav-menu-btn:focus-visible {
    outline: 2px solid var(--nav-text);
    outline-offset: 2px;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: var(--nav-bg);
    color: var(--nav-text);
    padding: 0 16px;
    /* Reduced padding for mobile */
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    border-bottom: 1px solid #e0e0e0;
}

@media (min-width: 769px) {
    .navbar {
        padding: 0 24px;
    }
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    /* Allow to take available space */
}

/* Mobile: Show full company name */
.nav-logo {
    font-family: var(--font-headline);
    /* Barlow for brand authority */
    font-weight: var(--fw-hero);
    /* 600 SemiBold */
    letter-spacing: -0.01em;
    color: var(--nav-text);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    /* Smaller for mobile to fit */
    text-decoration: none;
    white-space: nowrap;
}

/* Desktop: Larger logo */
@media (min-width: 769px) {
    .nav-logo {
        font-size: 14px;
        gap: 10px;
    }
}

.nav-logo .logo-placeholder {
    width: 18px;
    /* Slightly smaller for mobile */
    height: 18px;
    object-fit: contain;
    background: transparent !important;
    border: none !important;
    color: transparent;
    font-size: 0;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .nav-logo .logo-placeholder {
        width: 20px;
        height: 20px;
    }
}

/* Mobile: Show company name in bold */
.logo-text {
    font-family: var(--font-headline);
    /* Barlow for consistency */
    font-size: 0.85em;
    /* Relative to nav-logo size */
    font-weight: var(--fw-hero);
    /* 600 SemiBold */
    letter-spacing: 0.01em;
    display: inline-block;
    /* Show on mobile */
}

/* Desktop: Keep showing or adjust as needed */
@media (min-width: 769px) {
    .logo-text {
        font-size: 1rem;
        font-weight: var(--fw-headline);
        /* 500 Medium */
    }
}

.nav-status {
    font-size: 10px;
    font-family: monospace;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

/* New Icon Aesthetic */
.nav-menu-btn {
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-menu-icon {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
}

/* Hide menu button on mobile as requested */
.nav-menu-btn {
    display: none;
}

/* --- MOBILE NAVIGATION DEFAULT (STACKED/HIDDEN LINKS) --- */
.nav-links {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background: var(--nav-bg);
    color: var(--nav-text);
    padding: 24px;
    border-bottom: 1px solid #eee;
    z-index: 990;

    display: none;
    /* Start hidden */
    flex-direction: column;
    gap: 16px;
}

.nav-links.is-open {
    display: flex;
    /* Show when active (via script.js toggle) */
}

.nav-links a {
    position: relative;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--nav-text);
    padding: 8px 0;
}

/* ---------------------------------------------------- */


/* --- HERO CAROUSEL --- */
.hero-carousel {
    position: relative;
    height: 71vh;
    /* Mobile: Full viewport height */
    width: 100%;
    overflow: hidden;
    perspective: 1000px;
    background: #fff;
    background: #fff;
    border-bottom: 1px solid var(--grid-line);
}

#hero-network-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    /* On top of slides */
    pointer-events: none;
    /* Let clicks pass through */
}

.carousel-track {
    position: relative;
    height: 100%;
    width: 100%;
}

/* Flawless Transition Logic - Reduced opacity transition time */
.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    display: grid;
    place-items: end start;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Parallax - Simplified to single layer for low GPU usage */
.parallax-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transform: scale(1.1);
    z-index: 0;
    filter: brightness(1.1);
}

/* Static Vignette Gradient Overlay */
.hero-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}

/* Align Hero Title to Left Padding */
.hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    padding-left: 24px;
}

/* Hero Title - Using Global Typography System */
.hero-title {
    font-family: var(--font-headline);
    /* Barlow for headlines */
    font-size: var(--text-3xl);
    /* clamp(48px, 6vw, 80px) */
    font-weight: var(--fw-hero);
    /* 600 SemiBold */
    line-height: var(--lh-hero);
    /* 1.05 */
    letter-spacing: var(--ls-hero);
    /* -0.02em */
    text-transform: none;
    margin-bottom: var(--space-lg);
    text-shadow: none;
    /* Remove on mobile */
    text-wrap: balance;
    /* Prevent orphans */
    min-height: 3ch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Progressive text-shadow for larger screens */
@media (min-width: 768px) {
    .hero-title {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}

@media (min-width: 1280px) {
    .hero-title {
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }
}

.no-outline {
    -webkit-text-stroke: none;
    color: #ffffff;
}

.hero-meta-grid {
    display: none;
}

.meta-cell {
    display: none;
}

/* Hidden Hero Carousel Controls */
.carousel-nav {
    display: none !important;
}

.nav-btn {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover {
    background: #ffffff;
    color: #000;
}

.slide-indicators {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 2px;
}

/* Hero Circular Dot Indicators */
.hero-dot-indicators {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 20;
    display: flex;
    gap: 8px;
}

.dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background 200ms ease, transform 200ms ease;
}

.dot-indicator.active {
    background: var(--accent);
}

.dot-indicator:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
}

.dot-indicator:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dot-indicator.active:hover {
    background: var(--accent);
}

/* --- ABOUT SECTION (STATIC) - LIGHT GREY BASE --- */
.about-section {
    position: relative;
    width: 100%;
    background-color: var(--about-bg);
    border-bottom: 1px solid var(--bg);
    /* Changed to dark bg color to hide line between about and bento */
    box-shadow: none;

    /* Mobile Default: Stacked Columns */
    display: flex;
    flex-direction: column;

    content-visibility: auto;
    transition: none;
}

.about-section:hover {
    background-color: var(--about-bg-hover);
}

.about-section .grid-item {
    color: var(--about-text);
    border-color: var(--about-grid);
    min-height: auto;
    /* Mobile default */
}

.about-section .small-desc {
    color: #444444;
}

.about-section .cell-num {
    color: var(--accent);
}

.about-section .big-text {
    color: var(--about-text);
    /* Inherits from global h2: Barlow 500 Medium, clamp(36px, 4.5vw, 56px) */
    /* Inherits letter-spacing: -0.01em, line-height: 1.15 */
}

/* Mobile Phone Scaling (320px-375px) */
@media (max-width: 375px) {

    .about-section .big-text,
    .services-carousel .big-text {
        font-size: clamp(1.125rem, 4vw, 3rem);
        /* 18px mobile */
        line-height: 1.4;
        word-spacing: 0.02em;
        max-width: 100%;
    }
}

/* Medium phones (376px-768px) */
@media (min-width: 376px) and (max-width: 768px) {

    .about-section .big-text,
    .services-carousel .big-text {
        font-size: clamp(1.25rem, 3.5vw, 2.5rem);
        line-height: 1.35;
        max-width: 100%;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {

    .about-section .big-text,
    .services-carousel .big-text {
        font-size: clamp(1.75rem, 3vw, 3rem);
        line-height: 1.3;
        max-width: 40ch;
    }
}

.about-section h3 {
    color: var(--about-text);
}


/* --- SERVICE SECTION (DARK) --- */
.services-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 500px;
    /* Changed from fixed height to min-height for mobile */
    height: auto;
    /* Allow content to determine height on mobile */

    background-color: var(--service-bg-gray);
    border-bottom: none;
    margin-bottom: 0;
    /* No gap with next section */

    content-visibility: auto;
    color: var(--service-text-dark);
}

.services-carousel .service-track {
    position: relative;
}

.services-carousel:hover {
    background-color: var(--service-bg-dark-gray);
    color: var(--service-text-dark);
}

/* Services Circular Dot Indicators */
.service-dot-indicators {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 20;
    display: flex;
    gap: 8px;
}

.service-dot-indicators .dot-indicator {
    background: rgba(255, 255, 255, 0.3);
}

.service-dot-indicators .dot-indicator.active {
    background: var(--accent);
}

.service-dot-indicators .dot-indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

.service-track {
    display: flex;
    width: 500%;
    /* 5 slides = 500% */
    height: 100%;
}

.service-slide {
    min-width: 20%;
    /* 100% / 5 slides = 20% */
    display: flex;
    flex-direction: column;

    /* Remove strict containment on mobile for proper rendering */
    height: auto;
    min-height: 500px;
    padding-bottom: 0 !important;

    overflow: visible;
}

/* --- SERVICE ANIMATION REVERT: REMOVING STAGGERED TEXT REVEAL --- */
.service-slide .grid-item * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Fix text and secondary element colors for the services section */
.services-carousel .section-label,
.services-carousel h3,
.services-carousel .small-desc,
.services-carousel .cell-num {
    color: #ffffff !important;
}

.services-carousel .big-text {
    color: #ffffff !important;
    /* Inherits from global h2: Barlow 500 Medium, clamp(36px, 4.5vw, 56px) */
    /* Inherits letter-spacing: -0.01em, line-height: 1.15 */
    /* Mobile scaling handled in .about-section .big-text media queries above */
}

.services-carousel .minimal-btn {
    color: var(--service-text-dark);
}


/* Minimalistic Controls - Keeping original styles but unused for new logic */
.service-controls {
    /* Kept original styles for layout integrity, but unused in logic */
    position: absolute;
    top: auto;
    bottom: 0;
    width: 100%;
    border-bottom: none;
    border-top: 1px solid var(--grid-line);
    background: rgba(0, 0, 0, 0.8);
    display: flex !important;
    height: 64px;
    padding-right: 0;
    justify-content: center;
    gap: 24px;
    z-index: 20;
}

.slide-indicator-num {
    font-family: monospace;
    font-size: 14px;
    color: var(--text);
}

.minimal-btn {
    width: 64px;
    height: 64px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--grid-line);
    color: var(--text);
}

.minimal-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}




/* --- DENSE GRID (General Styles) --- */
.grid-item {
    padding: 32px 24px;
    position: relative;
}

.span-full,
.span-9,
.span-7,
.span-6,
.span-5,
.span-3 {
    grid-column: span 12;
    /* Mobile default: all span full width */
}

.border-right {
    border-right: none;
}

/* Mobile default: remove vertical borders */
.border-btm {
    border-bottom: 1px solid var(--grid-line);
}

/* Overriding grid lines for light and dark sections */
.about-section .border-right,
.about-section .border-btm {
    border-color: var(--about-grid);
}

.services-carousel .border-right,
.services-carousel .border-btm {
    border-color: #2A3B55;
    /* Subtle lighter blue for services */
}

.section-label {
    font-size: 12px;
    /* Secondary/label text - intentionally smaller */
    letter-spacing: 2px;
    margin-bottom: 16px;
    color: var(--accent);
}

.big-text {
    font-size: clamp(1.4rem, 3vw, 2.8rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 900px;
}

.cell-num {
    font-size: 10px;
    /* Secondary UI label */
    opacity: 1;
    display: block;
    margin-bottom: 24px;
}

h3 {
    font-size: 18px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.small-desc {
    font-size: inherit;
    /* Inherits 16px from body - main content */
    line-height: 1.414;
    /* √2 ratio */
    color: #888;
}

/* --- BENTO GRID - CONTAINMENT --- */
.bento-grid {
    /* Mobile Default: Flex column structure */
    display: flex;
    flex-direction: column;
    grid-auto-rows: 250px;
    width: 100%;
    border-bottom: none;
    background: var(--bg);
    margin-top: 0;
    /* No gap with previous section */
    padding-top: 0;

    content-visibility: auto;
    height: auto;
}

.bento-item {
    position: relative;
    overflow: hidden;
    border-right: none;
    /* Mobile default */
    border-bottom: none;
    height: 250px;
    /* Mobile default height */
    width: 100%;
    /* Mobile default width */
}

.bento-img {
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Snappier transform */
.bento-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.3s ease;
    /* Snappier filter */
}

.bento-item:hover .bento-img {
    transform: scale(1.05);
}

.bento-item:hover .bento-img img {
    filter: grayscale(0%) contrast(1);
}

.bento-overlay {
    position: absolute;
    inset: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6));
    opacity: 0.8;
}

.bento-id {
    font-family: monospace;
    font-size: 10px;
    background: var(--text);
    color: var(--bg);
    padding: 2px 6px;
    align-self: flex-start;
    font-weight: 700;
}

.bento-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text);
}

/* --- PROJECT LIST - CONTAINMENT --- */
/* --- LOGO TICKER (Swiss Style Infinite Scroll) --- */
.logo-ticker {
    width: 100%;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--grid-line);
    padding: 48px 0;
    overflow: hidden;
    position: relative;
}

.ticker-label {
    font-family: var(--font-stack);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nav-text);
    text-align: center;
    /* User requested center */
    margin-bottom: 24px;
    /* Reduced space */
    padding-left: 0;
}

.logo-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: 1 logo at a time */
    gap: 0;
    width: 100%;
    max-width: 900px;
    /* Reduced width to keep items closer */
    margin: 0 auto;
    justify-items: center;
    align-items: center;
    min-height: 120px;
    /* Compact height */
}

@media (min-width: 768px) {
    .logo-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Desktop: 3 columns (1 row of 3 items) */
        gap: 24px;
    }
}

.logo-item {
    display: none;
    /* Hidden by default */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    width: 100%;
    /* Fluid width to fit grid cell */
    height: 80px;
    /* Reduced height (-20%) */
    align-items: center;
    justify-content: center;
}

.logo-item.visible {
    display: flex;
}

.logo-item.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.logo-item img {
    max-width: 180px;
    /* Constrain max width for consistency */
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(0%);
    opacity: 1;
    transition: all 0.3s ease;
}

.logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}




/* --- CONTENT PROTECTION --- */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Disable text selection */
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
    /* Disable image dragging/interaction */
}

/* Allow interaction with inputs and links */
input,
textarea,
a {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.logo-text {
    font-family: var(--font-stack);
    font-weight: 500;
    display: block;
    /* Show on mobile */
    font-size: 16px;
    /* Mobile size */
    color: var(--nav-text);
}


/* --- FOOTER (Multi-Column Grid Layout) --- */
.footer-section {
    background: var(--bg);
    padding: 2rem 24px;
    border-top: none;
    color: #ffffff;
    position: relative;
}

#footer-particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.footer-container {
    position: relative;
    z-index: 1;
    max-width: 100%;
    /* Full width */
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Mobile: 2 columns */
    gap: 24px 16px;
    /* row-gap column-gap */
}

/* Footer Columns */
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Column positioning for mobile */
.footer-col:nth-child(1) {
    /* Logo - left column, row 1 */
    grid-column: 1;
    grid-row: 1;
}

.footer-col:nth-child(3) {
    /* Contact - left column, row 2 */
    grid-column: 1;
    grid-row: 2;
}

.footer-col:nth-child(5) {
    /* About - right column, spans rows 1-2 */
    grid-column: 2;
    grid-row: 1 / 3;
}

.footer-col:nth-child(7) {
    /* Links - left column, row 3 */
    grid-column: 1;
    grid-row: 3;
}

.footer-col:nth-child(9) {
    /* Social - right column, row 3 */
    grid-column: 2;
    grid-row: 3;
}

.footer-col:nth-child(11) {
    /* Copyright - spans both columns, row 4 */
    grid-column: 1 / -1;
    grid-row: 4;
}

/* Logo Column */
.footer-logo-large {
    width: 150px;
    /* Enlarged by 50% from 100px */
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    /* Center the logo */
}

.footer-logo-img {
    width: 100%;
    height: auto;
    pointer-events: none;
    filter: brightness(0) invert(1);
}

/* Separator */
.footer-separator {
    display: none;
    /* Hidden on mobile */
}

/* Company Name */
.footer-company {
    margin-bottom: 8px;
}

.footer-company-name {
    font-family: var(--font-stack);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
    text-transform: none;
    text-align: left;
}

/* Contact Section */
.footer-contact-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-contact-block {
    display: flex;
    flex-direction: column;
}

.footer-text {
    font-family: var(--font-stack);
    font-weight: 400;
    font-size: 10px;
    line-height: 1.6;
    color: #ffffff;
    margin: 0;
    text-align: left;
}

.footer-link {
    font-family: var(--font-stack);
    font-weight: 400;
    font-size: 10px;
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    line-height: 1.8;
    transition: color 300ms ease;
}

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

/* Social Icons Column */
.footer-social-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left-align on mobile */
    gap: 16px;
    /* Increased gap to separate button from icons */
}

.footer-social-icons {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    /* Left-align icons on mobile */
    gap: 16px;
    /* Smaller gap on mobile */
}

.footer-social-link {
    color: #ffffff;
    transition: color 300ms ease, transform 300ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-social-link:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

.footer-social-link svg {
    width: 20px;
    /* Slightly smaller on mobile */
    height: 20px;
}

/* Device Indicator */
.footer-device-indicator {
    font-family: var(--font-stack);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    opacity: 0.3;
    margin: 0;
    margin-top: 8px;
}

.footer-device-mobile {
    display: block;
}

.footer-device-desktop {
    display: none;
}

/* Back to Top Button */
.footer-back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-stack);
    font-size: 11px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    transition: all 300ms ease;
    margin: 0 auto 12px;
    /* Center on mobile */
    padding: 8px 12px;
    border: 1px solid #2A3B55;
    border-radius: 4px;
}

.footer-back-to-top:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.footer-back-to-top svg {
    transition: transform 300ms ease;
}

.footer-back-to-top:hover svg {
    transform: translateY(-3px);
}

/* Copyright Column */
.footer-copyright-col {
    gap: 8px;
    text-align: center;
    align-items: center;
}

.footer-copyright {
    font-size: 10px;
    opacity: 0.8;
}

.footer-credit {
    font-size: 10px;
    opacity: 0.6;
}

/* Tablet Layout - 2 Column Grid */
@media (min-width: 480px) and (max-width: 768px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .footer-col:nth-child(1) {
        /* Logo spans both columns */
        grid-column: 1 / -1;
    }

    .footer-col:nth-child(3) {
        /* Contact spans both columns */
        grid-column: 1 / -1;
    }

    .footer-text,
    .footer-company-name {
        text-align: left;
    }

    .footer-logo-large {
        margin: 0;
    }

    .footer-social-col {
        justify-content: flex-start;
    }

    .footer-back-to-top {
        margin: 0 0 12px 0;
    }

    .footer-copyright-col {
        text-align: left;
    }
}

/* Desktop Layout */
@media (min-width: 769px) {
    .footer-section {
        padding: 28px 48px;
    }

    .footer-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        /* Spread across full width */
        gap: 0;
        padding: 0 48px;
    }

    .footer-col {
        text-align: left;
        padding: 0 16px;
        justify-content: flex-start;
        flex: 1;
    }

    /* Specific column widths for balance */
    .footer-col:nth-child(1) {
        /* Logo */
        flex: 0 0 130px;
        padding-left: 0;
    }

    .footer-col:nth-child(3) {
        /* Contact */
        flex: 0 0 220px;
    }

    .footer-col:nth-child(5) {
        /* About */
        flex: 1 1 300px;
        max-width: 360px;
    }

    .footer-col:nth-child(7) {
        /* Links */
        flex: 0 0 130px;
    }

    .footer-col:nth-child(9) {
        /* Social */
        flex: 0 0 90px;
    }

    .footer-col:nth-child(11) {
        /* Copyright */
        flex: 0 0 150px;
        padding-right: 0;
    }

    .footer-logo-large {
        margin: 0 auto;
        /* Center the logo */
        width: 137px;
        /* 50% larger than 91px = 136.5px, rounded to 137px */
    }

    .footer-separator {
        display: block;
        width: 1px;
        background: #2A3B55;
        align-self: stretch;
        margin: 0 12px;
    }

    .footer-company-name {
        font-size: 14px;
        text-align: left;
    }

    .footer-text {
        font-size: 10px;
        line-height: 1.5;
        text-align: left;
    }

    .footer-link {
        font-size: 10px;
        line-height: 1.8;
    }

    .footer-contact-section {
        gap: 4px;
        align-items: flex-start;
    }

    .footer-company {
        margin-bottom: 4px;
    }

    /* Social Icons - Vertical on Desktop */
    .footer-social-col {
        align-items: center;
        /* Keep centered on desktop */
    }

    .footer-social-icons {
        flex-direction: row;
        gap: 16px;
        align-items: center;
    }

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

    .footer-device-mobile {
        display: none;
    }

    .footer-device-desktop {
        display: block;
    }

    .footer-back-to-top {
        margin: 0 0 12px 0;
    }

    .footer-copyright-col {
        align-items: flex-start;
        gap: 6px;
        text-align: left;
    }

    .footer-copyright,
    .footer-credit {
        font-size: 9px;
    }
}

/* Social Icons (Future) */
.social-icons {
    display: inline-flex;
    gap: 16px;
    align-items: center;
}

.social-icon {
    width: 20px;
    height: 20px;
    fill: #001028;
    transition: fill 300ms ease;
}

.social-icon:hover {
    fill: var(--accent);
}

/* Remove duplicate page load animation */
body.loading * {
    opacity: 0;
}

body.loaded h1,
body.loaded h2,
body.loaded h3,
body.loaded .hero-title,
body.loaded .section-label {
    animation: swissFadeIn 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    /* Headings first */
}

body.loaded p,
body.loaded .small-desc,
body.loaded .big-text,
body.loaded address,
body.loaded .footer-contact {
    animation: swissFadeIn 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms forwards;
    /* Body text 100ms after */
}

body.loaded img,
body.loaded .bento-item,
body.loaded .carousel-slide {
    animation: swissFadeIn 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 150ms forwards;
    /* Images 150ms after */
}

@keyframes swissFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Loading Indicator - Swiss Minimalism */
.swiss-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    /* #FF3300 */
    z-index: 9999;
    transition: width 300ms linear;
    opacity: 0;
}

.swiss-loader.active {
    opacity: 1;
    animation: swissLoad 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes swissLoad {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* Page Transition - Cross-Fade Only */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

.footer-address,
.footer-contact {
    font-family: var(--font-stack);
    font-size: var(--text-xs);
    /* √2 scale: 10px */
    line-height: 1.414;
    /* √2 ratio */
    color: #001028;
    /* Dark Blue Body Text (30%) */
    margin: 0;
    text-align: left;
    /* Swiss: always left-aligned */
}

.footer-contact strong {
    color: #001028;
    /* Dark Blue (30%) */
    font-weight: 700;
}

.footer-contact a {
    color: #001028;
    /* Dark Blue (30%) */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact a:hover {
    color: var(--accent);
    text-decoration: none;
    /* No underline effects */
}

.device-status-indicator {
    position: absolute;
    bottom: 12px;
    /* Mobile default position */
    right: 12px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: monospace;
    color: #666;
}


/* --- DESKTOP ENHANCEMENTS (min-width: 769px) --- */
@media (min-width: 769px) {

    /* --- GENERAL FIXES --- */
    /* Desktop Offset: Navbar (64px) + 1px border */
    main {
        padding-top: calc(var(--header-height) + 1px);
    }

    /* Hero Title Mobile Scaling */
    .hero-title {
        font-size: clamp(4rem, 5vw, 12rem);
    }

    /* Hero Height for Desktop */
    .hero-carousel {
        height: 55vh;
    }

    /* --- NAVBAR/HEADER --- */
    .navbar {
        padding-right: 240px;
        /* Space for download button */
    }

    .nav-left {
        gap: 40px;
        /* Ensure logo area has high contrast from nav links */
        padding-right: 40px;
        height: 100%;
    }

    .nav-logo {
        gap: 10px;
        font-size: 18px;
    }

    .nav-logo .logo-placeholder {
        width: 50px;
        /* Enlarged for desktop */
        height: auto;
        /* Maintain aspect ratio */
        max-height: 50px;
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        position: absolute;
        /* Center absolutely */
        top: 0;
        /* Reset top position from mobile styles */
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: 100%;
        background: transparent;
        padding: 0;
        border: none;
        gap: 32px;
        margin-right: 0;
        align-items: center;
    }

    .nav-links a {
        font-size: var(--fs-nav);
        /* ≈15px */
        font-weight: 500;
        padding: 0;
        opacity: 0.6;
        transition: opacity 0.3s;
        position: relative;
        text-decoration: none;
        /* Remove default underline */
    }

    .nav-links a:hover,
    .nav-links a.active {
        opacity: 1;
        text-decoration: none;
    }

    /* Accent underline */
    .nav-links a.active::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--accent);
    }

    .nav-menu-btn {
        display: none !important;
    }

    .logo-text {
        display: block;
        /* Show on desktop */
        font-size: 0.8em;
        /* 15% bigger on desktop */
    }

    .carousel-nav {
        display: none !important;
    }

    /* --- GRID FIXES (REINTRODUCE GRID STRUCTURE) --- */
    .about-section {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

    /* Services Carousel Auto Height & Compact Layout on Desktop */
    .services-carousel {
        height: auto;
        /* Allow content to define height */
        min-height: unset;
    }

    .service-slide {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        height: auto;
        /* Allow content to define height */
        min-height: unset;
        /* Override mobile min-height */
        contain: content;
        overflow: visible;
    }

    /* Compact Services Desktop Overrides */
    .services-carousel .grid-item {
        padding: 32px 24px;
        /* Match About Section airiness */
    }

    .services-carousel .grid-item.span-full {
        padding: 32px 24px;
    }

    .services-carousel .section-label {
        margin-bottom: 12px;
        /* Reduced spacing */
    }

    .services-carousel .big-text {
        line-height: 1.2;
        margin-bottom: 10px;
        /* Reduced breathing room */
        padding: 0;
    }

    .services-carousel h3 {
        line-height: 1.3;
        margin-bottom: 8px;
        /* Reduced margin */
        margin-top: 0;
    }

    .services-carousel .small-desc {
        line-height: 1.4;
        margin: 0;
    }

    .services-carousel .cell-num {
        margin-bottom: 12px;
        /* Reduced margin */
    }

    /* Column Spanning */
    .span-full {
        grid-column: span 12;
    }

    .span-9 {
        grid-column: span 9;
    }

    .span-8 {
        grid-column: span 8;
    }

    .span-7 {
        grid-column: span 7;
    }

    .span-6 {
        grid-column: span 6;
    }

    .span-5 {
        grid-column: span 5;
    }

    .span-4 {
        grid-column: span 4;
    }

    .span-3 {
        grid-column: span 3;
    }

    /* Border Restoration */
    .border-right {
        border-right: 1px solid var(--grid-line);
    }

    .bento-item {
        border-right: none;
    }

    /* Bento Grid Structure */
    .bento-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: 280px;
        /* Base row height */
        grid-auto-flow: dense;
        /* Pack items tightly */
    }

    .bento-item {
        height: 100%;
        /* Fill grid cell */
    }

    .row-span-2 {
        grid-row: span 2;
    }

    .row-span-3 {
        grid-row: span 3;
    }

    /* Premium Hover Effect */
    .grid-item:hover {
        transform: none;
        box-shadow: none;
    }

    /* Indicator Position */
    .device-status-indicator {
        bottom: 24px;
        right: 24px;
    }

    /* Services carousel - no border */
    .services-carousel {
        border-bottom: none;
    }
}

/* --- TABLET VIEW (768px - 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Navbar adjustments for tablet */
    .navbar {
        padding: 0 20px;
        padding-right: 180px;
        /* Space for download button */
    }

    .nav-left {
        gap: 24px;
        padding-right: 24px;
    }

    .nav-logo {
        font-size: 14px;
    }

    .nav-logo .logo-placeholder {
        width: 35px;
        height: auto;
        max-height: 35px;
    }

    .nav-links {
        gap: 20px;
    }

    .nav-links a {
        font-size: 14px;
    }

    /* Download button for tablet */
    .download-btn {
        padding: 0 24px;
        font-size: 11px;
    }

    /* Hero adjustments */
    .hero-carousel {
        height: 60vh;
    }

    .hero-title {
        font-size: clamp(3rem, 4.5vw, 5rem);
    }

    /* Grid adjustments for tablet */
    .about-section,
    .service-slide {
        grid-template-columns: repeat(6, 1fr);
    }

    .span-3 {
        grid-column: span 3;
    }

    .span-6 {
        grid-column: span 6;
    }

    .span-full {
        grid-column: span 6;
    }

    /* Bento grid for tablet */
    .bento-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 240px;
    }

    /* Services carousel spacing */
    .services-carousel .grid-item {
        padding: 28px 20px;
    }

    /* Footer adjustments */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .footer-separator {
        display: none;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 5rem;
    }

    .span-9 {
        grid-column: span 9;
    }

    .span-3 {
        grid-column: span 3;
    }
}