/* ===========================
   Maxenra Design System
   =========================== */

:root {
    /* Primary Colors - XD Design System */
    --primary-purple: #614D84;
    --light-purple: #9D84CC;
    --very-light-purple: #D8D2E3;
    --dark-purple: #4A3A5F;
    --text-gray: #606060;
    --light-gray: #C7C7C7;
    --lighter-gray: #F8F9FA;
    --black: #000000;
    --white: #FFFFFF;
    --shadow: rgba(0, 0, 0, 0.1);
    
    /* Gradients */
    --purple-gradient: linear-gradient(135deg, #614D84 0%, #9D84CC 100%);
    --purple-gradient-dark: linear-gradient(135deg, #4A3A5F 0%, #614D84 100%);
    
    /* Typography - XD Specifications */
    --font-family: 'articulat-cf', 'Open Sans', sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Font Sizes */
    --font-size-h1: 35px;
    --font-size-h2: 26px;
    --font-size-h3: 19px;
    --font-size-body: 14px;
    --font-size-small: 12px;
    
    /* Responsive Scale Factor */
    --scale-factor: 1;
    
    /* Responsive Breakpoints */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    
    /* Responsive Spacing */
    --spacing-xs: clamp(0.5rem, 2vw, 1rem);
    --spacing-sm: clamp(1rem, 3vw, 1.5rem);
    --spacing-md: clamp(1.5rem, 4vw, 2rem);
    --spacing-lg: clamp(2rem, 5vw, 3rem);
    --spacing-xl: clamp(3rem, 6vw, 4rem);
    
    /* Responsive Typography with clamp() */
    --font-h1-responsive: clamp(24px, 5vw, 35px);
    --font-h2-responsive: clamp(18px, 4vw, 26px);
    --font-h3-responsive: clamp(16px, 3vw, 19px);
    --font-body-responsive: clamp(14px, 2vw, 16px);
    
    /* Container Max Widths */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
    --container-1440p: 1440px;
    
    /* Footer Arc Visibility Ratio */
    --footer-arc-visibility: 0.186; /* 18.6% of circle visible */
}

/* Scale factor for 1440p displays (2560x1440) */
@media (min-width: 2560px) {
    :root {
        --scale-factor: 1.33;
    }
}

/* Scale factor for 4K displays (3840x2160) */
@media (min-width: 3840px) {
    :root {
        --scale-factor: 1.5;
    }
}

/* ===========================
   Reset & Base Styles
   =========================== */

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

html {
    scroll-behavior: smooth;
}

/* Disable smooth scroll during JS animation to prevent conflict */
html.no-smooth {
    scroll-behavior: auto !important;
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    color: var(--text-gray);
    background-color: var(--white);
    position: relative; /* Contain absolute positioned elements */
    padding-top: 90px; /* Space for fixed header at base resolution */
}

/* Responsive Images - Global Rule */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent horizontal overflow on all sections */
main, section, article, aside, div {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Responsive tables */
table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Mobile-first container */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

/* ===========================
   Header Base Styles
   =========================== */
/* These must come BEFORE media queries to allow proper overriding */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 1000;
}

/* Header with white background for non-hero pages */
.header.solid {
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 25px 0; /* Base: 25px + 40px logo + 25px = 90px total */
}

/* Match homepage header layout for solid header */
.header.solid .container {
    max-width: none;
    padding: 0;
}

.header.solid .header-content {
    padding: 0 100px;
    align-items: center; /* Align items to center like homepage */
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: var(--container-sm);
        padding: 0 20px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: var(--container-md);
        padding: 0 30px;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    body {
        padding-top: 82px;
    }

    .header.solid {
        padding: 22px 0;
    }

    .header.solid .header-content {
        padding: 0 20px;
    }

    .logo {
        height: 38px;
        width: auto;
        max-width: 100%;
    }

    .footer-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 30px;
        gap: 40px;
    }

    .footer-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        min-width: 200px;
    }

    .footer-logo {
        max-height: 70px;
        width: auto;
    }

    .footer-address {
        text-align: left;
        font-size: 13px;
        line-height: 1.5;
        color: var(--white);
        margin: 0;
        width: auto;
    }

    .footer-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 30px;
    }

    .footer-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        max-width: 100%;
        justify-content: flex-end;
    }

    .footer-link {
        font-size: 15px;
    }

    .footer-social {
        justify-content: flex-end;
        gap: 15px;
    }

    .footer-center {
        display: none;
    }

    .hero {
        height: calc(100vh - 82px);
        height: calc(100svh - 82px);
        min-height: calc(600px - 82px);
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: var(--container-lg);
        padding: 0 40px;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: var(--container-xl);
    }

    body {
        padding-top: 100px; /* 1200px: header height */
    }

    /* Slightly larger padding at 1200px */
    .header.solid {
        padding: 30px 0; /* 30px + 40px logo + 30px = 100px total */
    }

    .header-homepage {
        padding: 30px 0; /* Match solid header for consistency */
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: var(--container-xxl);
    }
}

/* Intermediate scaling breakpoints */
@media (min-width: 1440px) {
    .container {
        max-width: 1330px;
    }

    .main-content .container {
        max-width: 1480px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1380px;
    }

    .main-content .container {
        max-width: 1600px;
    }
}

@media (min-width: 1680px) {
    .container {
        max-width: 1410px;
    }

    .main-content .container {
        max-width: 1700px;
    }
}

/* 1440p displays (1920px viewport width) */
@media (min-width: 1920px) {
    .container {
        max-width: var(--container-1440p);
    }

    .main-content .container {
        max-width: 1800px;  /* Increased from 1600px */
    }
}

/* Ultra-wide displays */
@media (min-width: 2560px) {
    .container {
        max-width: 1600px;
    }

    .main-content .container {
        max-width: 2400px;  /* Increased from 2200px */
    }
}

@media (min-width: 3840px) {
    .container {
        max-width: 2200px;  /* Increased from 1800px */
    }

    .main-content .container {
        max-width: 3000px;  /* New for 4K displays */
    }
}

/* ===========================
   Header
   =========================== */

/* NOTE: Header base styles moved before media queries for proper cascade */

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* Homepage header - navigation aligned to right */
.header-homepage {
    padding: 25px 0; /* Base: 25px + 40px logo + 25px = 90px total */
}

.header-homepage .container {
    max-width: none;
    padding: 0;
}

.header-homepage .header-content {
    justify-content: flex-end;
    padding-right: 100px;
}

.logo-link {
    display: inline-block;
}

.logo {
    height: 40px;  /* Reduced from 45px for better nav alignment */
    width: auto;
}

.nav {
    display: flex;
    gap: 50px;
    align-items: center;
}


.nav-link {
    color: #614D84;
    text-decoration: none;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    letter-spacing: 0px;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-purple);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    width: 45px;
    height: 45px;
}

.mobile-menu-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary-purple);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}

.mobile-menu-btn span:first-child {
    top: 12px;
}

.mobile-menu-btn span:nth-child(2) {
    top: 50%;
    transform: translate(-50%, -50%);
}

.mobile-menu-btn span:last-child {
    bottom: 12px;
}

.mobile-menu-btn.active span:first-child {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}

.mobile-menu-btn.active span:last-child {
    bottom: 50%;
    transform: translate(-50%, 50%) rotate(-45deg);
}

/* ===========================
   Hero Section (Homepage)
   =========================== */

.hero {
    height: calc(100vh - 90px); /* Account for fixed header */
    height: calc(100svh - 90px); /* mobile-safe viewport height with header */
    min-height: calc(600px - 90px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('assets/backgrounds/herobg@2x.png');
    background-image: -webkit-image-set(
        url('assets/optimized/backgrounds/herobg.webp') 1x,
        url('assets/optimized/backgrounds/herobg@2x.webp') 2x
    );
    background-image: image-set(
        url('assets/optimized/backgrounds/herobg.webp') 1x,
        url('assets/optimized/backgrounds/herobg@2x.webp') 2x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* White overlay removed - showing full background opacity */

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
    transform: translateY(-5vh);
}

.hero-logo {
    width: clamp(313px, 80vw, 500px);
    height: auto;
    margin: 0 auto;
    filter: brightness(0) invert(1);
}

.hero-tagline {
    font-size: clamp(18px, 4vw, 32px);
    font-weight: var(--font-weight-light);
    color: #FFFFFF;
    line-height: 1.375;
    letter-spacing: 0px;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.scroll-indicator {
    position: absolute;
    bottom: 81.5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 2;
    /* Improve touch target for mobile */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    pointer-events: auto;
}

/* Add larger touch area for mobile */
@media (max-width: 768px) {
    .scroll-indicator {
        /* Increase tap target size on mobile */
        padding: 15px;
    }

    /* Adjust hero height for mobile header (75px) */
    .hero {
        height: calc(100vh - 75px);
        height: calc(100svh - 75px);
        min-height: calc(600px - 75px);
    }
}

.scroll-indicator img {
    width: 54px;
    height: 26px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Ensure clicks pass through to parent */
    filter: brightness(0) invert(1);
}

.scroll-indicator:hover img,
.scroll-indicator:active img {
    opacity: 1;
}

/* Hero Content Scaling - Override clamp() caps for larger displays */
@media (min-width: 1200px) {
    /* Adjust hero height for 1200px+ header (100px) */
    .hero {
        height: calc(100vh - 100px);
        height: calc(100svh - 100px);
        min-height: calc(600px - 100px);
    }
}

@media (min-width: 1440px) {
    /* Adjust hero height for 1440px+ header (110px) */
    .hero {
        height: calc(100vh - 110px);
        height: calc(100svh - 110px);
        min-height: calc(600px - 110px);
    }

    .hero-logo {
        max-width: 530px;
        width: clamp(313px, 80vw, 530px);
    }

    .hero-tagline {
        font-size: clamp(18px, 4vw, 35px);
        max-width: 960px;
    }

    .scroll-indicator img {
        width: 60px;
        height: 29px;
    }
}

@media (min-width: 1600px) {
    /* Adjust hero height for 1600px+ header (115px) */
    .hero {
        height: calc(100vh - 115px);
        height: calc(100svh - 115px);
        min-height: calc(600px - 115px);
    }

    .hero-logo {
        max-width: 585px;
        width: clamp(313px, 80vw, 585px);
    }

    .hero-tagline {
        font-size: clamp(18px, 4vw, 37px);
        max-width: 1020px;
    }

    .scroll-indicator img {
        width: 64px;
        height: 31px;
    }
}

@media (min-width: 1680px) {
    /* Adjust hero height for 1680px+ header (118px) */
    .hero {
        height: calc(100vh - 118px);
        height: calc(100svh - 118px);
        min-height: calc(600px - 118px);
    }

    .hero-logo {
        max-width: 610px;
        width: clamp(313px, 80vw, 610px);
    }

    .hero-tagline {
        font-size: clamp(18px, 4vw, 39px);
        max-width: 1060px;
    }

    .scroll-indicator img {
        width: 68px;
        height: 33px;
    }
}

@media (min-width: 1920px) {
    /* Adjust hero height for 1920px+ header (130px) */
    .hero {
        height: calc(100vh - 130px);
        height: calc(100svh - 130px);
        min-height: calc(600px - 130px);
    }

    .hero-logo {
        max-width: 650px;
        width: clamp(313px, 80vw, 650px);
    }

    .hero-tagline {
        font-size: clamp(18px, 4vw, 42px);
        max-width: 1400px;  /* Increased to prevent wrapping */
    }

    .scroll-indicator img {
        width: 72px;
        height: 35px;
    }
}

@media (min-width: 2560px) {
    /* Adjust hero height for 2560px+ header (150px) */
    .hero {
        height: calc(100vh - 150px);
        height: calc(100svh - 150px);
        min-height: calc(600px - 150px);
    }

    .hero-logo {
        max-width: 750px;
        width: clamp(313px, 80vw, 750px);
    }

    .hero-tagline {
        font-size: clamp(18px, 4vw, 48px);
        max-width: 1800px;  /* Increased to prevent wrapping */
    }

    .scroll-indicator img {
        width: 80px;
        height: 39px;
    }
}

/* ===========================
   Main Content Section
   =========================== */

.main-content {
    padding: 40px 0;
    background: var(--white);
    position: relative;
    overflow: visible;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
}

.main-content .container {
    padding: 0 40px;
}

.main-content-wrapper {
    position: relative;
    width: 100%;
}

.content-text {
    max-width: clamp(580px, 43vw, 850px);
    position: relative;
    z-index: 2;
    margin-top: 100px;
    margin-left: 0;
}

.content-text h1 {
    font-size: 36px;
    font-weight: var(--font-weight-light);
    color: var(--text-gray);
    line-height: 1.25;
    margin: 0 0 150px 0;
}

/* H1 and description-text use controlled responsive sizing with clamp() */

.content-decoration {
    position: absolute;
    right: 0;
    top: clamp(-40px, -4vh, -80px);
    z-index: 1;
    pointer-events: none;
    width: clamp(250px, 25vw, 700px);
    height: clamp(250px, 25vw, 700px);
}

.circle-decoration {
    width: 100%;
    height: 100%;
}

.description-text {
    max-width: 900px;
    margin-left: 200px;
    margin-right: 0;
    margin-top: clamp(200px, 25vh, 450px); /* Responsive spacing: smaller on MacBook Air, larger on 1440p */
    position: relative;
    z-index: 2;
}

.description-text p {
    font-family: 'articulat-cf', var(--font-family);
    font-weight: normal;
    font-size: 16px;
    line-height: 1.375;
    color: #606060;
    text-align: left;
    letter-spacing: 0;
    margin: 0;
}

/* Description-text now uses clamp() for smooth responsive scaling */

/* ===========================
   Performance & Features Wrapper
   =========================== */

.performance-features-wrapper {
    /* Wrapper for technical organization only */
    background: var(--white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===========================
   Performance Section
   =========================== */

.performance-section {
    padding: clamp(60px, 8vh, 100px) 0;
    background: var(--white);
    position: relative;
}

.performance-title {
    font-size: 36px;
    font-weight: var(--font-weight-normal);
    color: var(--text-gray);
    text-align: left;
    margin: 0 0 30px 0;
    line-height: 1.22;
    max-width: 600px;
}

.performance-text {
    font-size: 18px;
    color: var(--text-gray);
    text-align: left;
    line-height: 1.7;
    margin: 0;
    padding: 0 0 40px 0;
}

/* ===========================
   Expertise Section
   =========================== */

.expertise-section {
    padding: clamp(60px, 10vh, 100px) 0;
    background-color: #2B1B4D; /* Fallback color */
    background-image: url('assets/backgrounds/ctabg1@2x.png');
    background-image: -webkit-image-set(
        url('assets/optimized/backgrounds/ctabg1.webp') 1x,
        url('assets/optimized/backgrounds/ctabg1@2x.webp') 2x
    );
    background-image: image-set(
        url('assets/optimized/backgrounds/ctabg1.webp') 1x,
        url('assets/optimized/backgrounds/ctabg1@2x.webp') 2x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
}

.expertise-title {
    font-size: 36px;
    font-weight: var(--font-weight-normal);
    color: var(--white);
    margin: 0 0 30px 0;
    text-align: center;
    line-height: 1.22;
}

.expertise-subtitle {
    font-size: 16px;
    color: var(--white);
    line-height: 1.7;
    margin: 0 auto 40px;
    max-width: 900px;
    text-align: center;
    opacity: 0.95;
}

.expertise-button {
    display: inline-block;
    background: var(--white);
    color: var(--primary-purple);
    padding: 12px 35px;
    text-decoration: none;
    border-radius: 25px;
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    transition: all 0.3s ease;
    margin-top: 20px;
}

.expertise-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ===========================
   Features Section
   =========================== */

.features-section {
    padding: 40px 0 100px 0;
    background: var(--white);
}

.features-section .container {
    padding: 0 20px;
}

.features-cards {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Features grid responsive breakpoints */
@media (min-width: 768px) {
    .features-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
    }
}

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

/* Features cards intermediate scaling */
@media (min-width: 1440px) {
    .features-cards {
        max-width: 1320px;
        gap: 55px;
    }

    .features-section {
        padding: 42px 0 102px 0;
    }

    .performance-title {
        max-width: 900px;
    }
}

@media (min-width: 1600px) {
    .features-cards {
        max-width: 1360px;
        gap: 78px;
    }

    .features-section {
        padding: 52px 0 112px 0;
    }
}

@media (min-width: 1680px) {
    .features-cards {
        max-width: 1385px;
        gap: 79px;
    }

    .features-section {
        padding: 56px 0 116px 0;
    }
}

/* 1440p displays (1920px viewport) */
@media (min-width: 1920px) {
    .features-cards {
        max-width: 1400px;  /* Increase from 1200px */
        gap: 80px;          /* Increase gap for better spacing */
    }

    .features-section {
        padding: 60px 0 120px 0;
    }
}

/* Ultra-wide displays (2560px viewport) */
@media (min-width: 2560px) {
    .features-cards {
        max-width: 1600px;  /* Match container width for consistency */
        gap: 100px;         /* Even more spacing for ultra-wide */
    }
    
    .features-section {
        padding: 100px 0 120px 0;  /* Increase padding for better proportions */
    }
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.feature-icon {
    flex-shrink: 0;
}

.feature-icon-technology {
    width: 92px;
    height: 103px;
}

.feature-icon-expertise {
    width: 107px;
    height: 103px;
}

.feature-icon-solutions {
    width: 100px;
    height: 103px;
}

.feature-text {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 22px;
    letter-spacing: 0.03px;
    margin: 0;
    text-align: left;
}

/* Scale feature icons for larger displays */
@media (min-width: 1440px) {
    .feature-icon-technology {
        width: 107px;
        height: 120px;
    }

    .feature-icon-expertise {
        width: 124px;
        height: 120px;
    }

    .feature-icon-solutions {
        width: 115px;
        height: 120px;
    }

    .feature-text {
        font-size: 16.9px;
        line-height: 23.2px;
    }
}

@media (min-width: 1600px) {
    .feature-icon-technology {
        width: 109px;
        height: 122px;
    }

    .feature-icon-expertise {
        width: 126px;
        height: 122px;
    }

    .feature-icon-solutions {
        width: 117px;
        height: 122px;
    }

    .feature-text {
        font-size: 16.95px;
        line-height: 23.4px;
    }
}

@media (min-width: 1680px) {
    .feature-icon-technology {
        width: 110px;
        height: 123px;
    }

    .feature-icon-expertise {
        width: 127px;
        height: 123px;
    }

    .feature-icon-solutions {
        width: 119px;
        height: 123px;
    }

    .feature-text {
        font-size: 16.98px;
        line-height: 23.6px;
    }
}

@media (min-width: 1920px) {
    .feature-icon-technology {
        width: 110px;
        height: 123px;
    }

    .feature-icon-expertise {
        width: 128px;
        height: 123px;
    }

    .feature-icon-solutions {
        width: 120px;
        height: 123px;
    }

    .feature-text {
        font-size: 17px;
        line-height: 24px;
    }
}

@media (min-width: 2560px) {
    .feature-icon-technology {
        width: 120px;
        height: 134px;
    }
    
    .feature-icon-expertise {
        width: 140px;
        height: 134px;
    }
    
    .feature-icon-solutions {
        width: 130px;
        height: 134px;
    }
    
    .feature-text {
        font-size: 18px;
        line-height: 26px;
    }
}

/* ===========================
   Services Hero
   =========================== */

.services-hero {
    background-image: url('assets/backgrounds/serviceshero@2x.png');
    background-image: -webkit-image-set(
        url('assets/optimized/backgrounds/serviceshero.webp') 1x,
        url('assets/optimized/backgrounds/serviceshero@2x.webp') 2x
    );
    background-image: image-set(
        url('assets/optimized/backgrounds/serviceshero.webp') 1x,
        url('assets/optimized/backgrounds/serviceshero@2x.webp') 2x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 130px 0;
    margin-top: 0;  /* Header now pushes down, no margin needed */
    position: relative;
}


.services-hero-title {
    font-size: 36px;
    font-weight: var(--font-weight-normal);
    color: var(--white);
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.services-hero-subtitle {
    font-size: 16px;
    color: var(--white);
    line-height: 1.6;
    max-width: 736px;
    margin: 0;
    text-align: left;
}

/* ===========================
   Services Content
   =========================== */

.services-main {
    position: relative;
    overflow-x: clip; /* Clip horizontal overflow while showing arrow */
}

.services-content {
    padding: 40px 0;
    background: var(--white);
    position: relative;
    overflow-x: clip; /* Clip horizontal overflow while showing arrow */
}

.services-heading {
    font-size: 36px;
    font-weight: var(--font-weight-normal);
    color: var(--text-gray);
    margin: 0 0 20px 0;
}

.services-intro {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.8;
    margin: 0 0 60px 0;
    max-width: 900px;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: 30px;
    max-width: 1000px;
}


.service-item {
    position: relative;
    padding-top: 50px;
}

.service-icon {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
}

.service-check {
    width: 32px;
    height: 32px;
    background: var(--primary-purple);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-check::after {
    content: '✓';
    color: var(--white);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.service-content h3 {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--primary-purple);
    margin: 0 0 8px 0;
}

.service-content p {
    font-size: 16px;  /* Changed from 14px to match design spec */
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0;
    max-width: clamp(700px, 54.7vw, 1400px);  /* 700px at 1280px viewport, scales up */
}

.services-arrow {
    position: absolute;
    right: 0;  /* Align to viewport edge */
    top: 45%;  /* Adjusted to align with Charge Capture line */
    transform: translateX(25%) translateY(-50%);  /* Show 75% of arrow */
    z-index: 1;
    overflow: visible;
}

.services-arrow img {
    width: 450px;  /* Reduced by 10% for subtler appearance */
    height: auto;  /* Maintain aspect ratio */
}

/* Responsive scaling for service content paragraphs */
@media (min-width: 1440px) {
    .service-content p {
        font-size: 16.5px;
    }
}

@media (min-width: 1600px) {
    .service-content p {
        font-size: 17px;
    }
}

@media (min-width: 1680px) {
    .service-content p {
        font-size: 17.5px;
    }
}

@media (min-width: 1920px) {
    .service-content p {
        font-size: 18px;
    }
}

@media (min-width: 2560px) {
    .service-content p {
        font-size: 20px;
    }
}

/* ===========================
   About Hero
   =========================== */

.about-hero {
    background-image: url('assets/backgrounds/aboutbg@2x.png');
    background-image: -webkit-image-set(
        url('assets/optimized/backgrounds/aboutbg.webp') 1x,
        url('assets/optimized/backgrounds/aboutbg@2x.webp') 2x
    );
    background-image: image-set(
        url('assets/optimized/backgrounds/aboutbg.webp') 1x,
        url('assets/optimized/backgrounds/aboutbg@2x.webp') 2x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;  /* Fixed height at base resolution */
    margin-top: 0;  /* Header now pushes down, no margin needed */
    position: relative;
    display: flex;
    align-items: center;
}

/* Overlay removed to show true colors */

.about-hero .container {
    position: relative;
    z-index: 1;
    padding-top: 40px;  /* Vertical padding for content */
    padding-bottom: 40px;  /* Keep horizontal padding from base .container */
}

.about-hero-title {
    font-size: 36px;
    font-weight: var(--font-weight-normal);
    color: var(--white);
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.about-hero-subtitle {
    font-size: 16px;
    color: var(--white);
    line-height: 1.6;
    max-width: 600px;
    margin: 0;
}

/* ===========================
   About Content
   =========================== */

.about-content {
    padding: 80px 0;
    background: var(--white);
}

.vision-section,
.mission-section,
.story-section {
    margin-bottom: 80px;
    max-width: 876px;  /* Base max-width from design */
}

.vision-title,
.mission-title,
.story-title {
    font-size: 36px;
    line-height: 1.22;  /* 44px/36px = 1.22 ratio */
    font-weight: var(--font-weight-normal);
    color: #606060;  /* Match exact design color */
    margin: 0 0 20px 0;
}

.vision-text,
.mission-text,
.story-text {
    font-size: 16px;
    line-height: 1.375;  /* 22px/16px = 1.375 ratio */
    color: #606060;  /* Match exact design color */
    margin: 0;
}

.story-text + .story-text {
    margin-top: 16px;  /* Add spacing between story paragraphs */
}

/* Section divider bar */
.section-divider {
    width: 100%;  /* Full container width */
    height: 4px;
    background-color: #D8D2E3;
    margin: 60px 0;  /* Top/bottom margin only */
    opacity: 1;
}

/* ===========================
   Careers Hero
   =========================== */

.careers-hero {
    background-image: url('assets/backgrounds/careersbg@2x.png');
    background-image: -webkit-image-set(
        url('assets/optimized/backgrounds/careersbg.webp') 1x,
        url('assets/optimized/backgrounds/careersbg@2x.webp') 2x
    );
    background-image: image-set(
        url('assets/optimized/backgrounds/careersbg.webp') 1x,
        url('assets/optimized/backgrounds/careersbg@2x.webp') 2x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 130px 0;
    margin-top: 0;  /* Header now pushes down, no margin needed */
    position: relative;
}

.careers-hero-title {
    font-size: 36px;
    font-weight: var(--font-weight-normal);
    color: var(--white);
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.careers-hero-subtitle {
    font-size: 16px;
    color: var(--white);
    line-height: 1.6;
    max-width: 950px;
    margin: 0;
}

.careers-hero-button {
    display: inline-block;
    background: var(--white);
    color: #614D84;
    padding: 10px 30px;
    text-decoration: none;
    border-radius: 20px;
    font-size: 18px;
    line-height: 20px;
    font-weight: var(--font-weight-normal);
    margin-top: 30px;
    transition: all 0.3s ease;
}

.careers-hero-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* ===========================
   Careers Content
   =========================== */

.careers-content {
    padding: 80px 0;
    background: var(--white);
}

.workspace-section {
    background: var(--lighter-gray);
    padding: clamp(80px, 10vh, 150px) 0;
    margin-bottom: 0;
    min-height: auto; /* Default for mobile */
    display: flex;
    align-items: center;
}

/* Mobile adjustments for workspace section */
@media (max-width: 768px) {
    .workspace-section {
        padding: 60px 0;
    }
    
    .workspace-title {
        font-size: 28px;
        line-height: 36px;
    }
    
    .workspace-description {
        font-size: 14px;
        line-height: 20px;
    }
}

/* Desktop adjustments for workspace section */
@media (min-width: 1200px) {
    .workspace-section {
        min-height: 80vh;
        padding: clamp(100px, 12vh, 180px) 0;
    }
}

@media (min-width: 1400px) {
    .workspace-section {
        min-height: 85vh;
        padding: clamp(120px, 15vh, 200px) 0;
    }
}

.people-section {
    margin-bottom: 0;
    padding: 80px 0;
}

.careers-people {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

/* Mobile adjustments for careers-people */
@media (max-width: 768px) {
    .careers-people {
        padding-top: 40px;
        padding-bottom: 40px;
        min-height: auto;
    }
    
    /* Reorder elements on mobile using display: contents trick */
    .people-content {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    
    /* Make people-text wrapper "invisible" so its children can be reordered with people-image */
    .people-text {
        display: contents;
    }
    
    .people-title {
        font-size: 28px;
        line-height: 36px;
        order: 1;
        margin: 0 !important;
    }
    
    .people-description {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 20px !important;
        order: 2;
    }
    
    .people-image {
        order: 3;
        margin: 0 0 20px 0;
    }
    
    .benefits-list {
        order: 4;
    }
    
    .benefit-item {
        margin-bottom: 20px;
    }
}

.opportunities-section {
    margin-bottom: 0;
    padding: 100px 0;  /* Increased from 80px for better breathing room */
}

.opportunities-title {
    font-size: 36px;
    line-height: 44px;
    font-weight: var(--font-weight-normal);
    color: var(--text-gray);
    margin: 0 0 30px 0;  /* Increased from 20px for better separation */
    text-align: center;
}

.opportunities-description {
    font-size: 16px;
    line-height: 22px;
    color: var(--text-gray);
    margin: 0 auto 60px auto;  /* Increased from 40px for more space before jobs */
    text-align: center;
    max-width: 800px;
}

.section-title {
    font-size: 36px;
    font-weight: var(--font-weight-normal);
    color: var(--text-gray);
    margin: 0 0 20px 0;
}

.section-description {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.8;
    margin: 0 0 40px 0;
}

.workspace-title {
    font-size: 36px;
    line-height: 1.3;
    font-weight: var(--font-weight-normal);
    color: var(--text-gray);
    margin: 0 0 20px 0;
    text-align: left;
}

.workspace-description {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-gray);
    margin: 0 0 40px 0;
    text-align: left;
    max-width: 1119px;
}

.people-content {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: 40px;
    align-items: center;
}

/* People content responsive breakpoints */
@media (min-width: 992px) {
    .people-content {
        grid-template-columns: 1.5fr 1fr;
        gap: 60px;
    }
}

.people-title {
    font-size: 36px;
    line-height: 1.3;
    font-weight: var(--font-weight-normal);
    color: var(--text-gray);
    margin: 0 0 20px 0;
    text-align: left;
}

.people-description {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-gray);
    margin: 0 0 40px 0;
    text-align: left;
    max-width: 1119px;
}

.benefits-list {
    list-style: none;
    padding: 0;
}

.benefit-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 25px;
}

.benefit-check {
    width: 10px;
    height: 10px;
    background: #614D84;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    margin-top: 10px;  /* Base alignment for MacBook Air 13" */
    display: block;
}

/* Removed ::after - using solid circle only */

/* ===========================
   Fade-in Animation for Sections
   =========================== */

.fade-in-section {
    opacity: 0.85;
    transition: opacity 0.4s ease-out;
}

/* Fade-in animations removed - will be reimplemented later */

.benefit-content {
    flex: 1;
}

.benefit-content h3 {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--primary-purple);
    margin: 0 0 5px 0;
}

.benefit-content p {
    font-size: 16px;  /* Changed from 14px to match design spec */
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0;
}

.people-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Responsive scaling for benefit content paragraphs */
@media (min-width: 1440px) {
    .benefit-content p {
        font-size: 16.5px;
    }

    .benefit-check {
        margin-top: 11px;
    }
}

@media (min-width: 1600px) {
    .benefit-content p {
        font-size: 17px;
    }

    .benefit-check {
        margin-top: 11.5px;
    }
}

@media (min-width: 1680px) {
    .benefit-content p {
        font-size: 17.5px;
    }

    .benefit-check {
        margin-top: 11.75px;
    }
}

@media (min-width: 1920px) {
    .benefit-content p {
        font-size: 18px;
    }

    .benefit-check {
        margin-top: 12px;  /* Adjust for 1920px displays */
    }
}

@media (min-width: 2560px) {
    .benefit-content p {
        font-size: 20px;
    }
}

.office-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Default 2x2 grid for mobile */
    gap: 10px;
    margin-top: 40px;
}

/* 2x2 Grid Layout for Careers Page */
.office-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


/* Footer layout sections */
.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.footer-address {
    color: var(--text-gray);
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    margin: 0;
}

/* Footer Social Media Icons */
.footer-center {
    /* Empty center section after social links moved to right */
    display: none;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;  /* Remove gap, use margins instead */
    padding-top: 10px;  /* Push nav down slightly */
}

.footer-social {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 10px;  /* Space between nav and social */
}

.social-link {
    color: var(--primary-purple);
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.social-link:hover {
    opacity: 0.7;
}

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

.office-image {
    cursor: pointer;
    overflow: hidden;
    /* Sharp corners as per design reference */
}

.office-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.office-image:hover img {
    transform: scale(1.05);
}

/* Adjust image height for larger mobile screens */
@media (min-width: 400px) {
    .office-image img {
        height: 180px;
    }
}

/* Office Gallery Responsive Breakpoints - Mobile First */
@media (min-width: 576px) {
    .office-gallery {
        gap: 15px;
    }
    .office-image img {
        height: 200px;
    }
}

@media (min-width: 768px) {
    .office-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    /* Keep 2x2 grid for office-gallery-grid */
    .office-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    .office-image img {
        height: 220px;
    }
    /* Increase footer spacing on desktop */
    .footer-right {
        gap: 40px; /* Increased from 15px for better separation between nav and social */
    }
}

@media (min-width: 992px) {
    .office-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
    /* Keep 2x2 grid for office-gallery-grid */
    .office-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    .office-image img {
        height: 280px;
    }
}

/* Large desktop enhancements for workspace section */
@media (min-width: 1200px) {
    .office-gallery {
        gap: 30px;
        margin-top: 60px;
    }

    .office-gallery-grid {
        max-width: 1300px;
    }

    .office-image img {
        height: 400px; /* Larger height for bigger display */
        object-fit: cover;
    }
    
    .workspace-title {
        font-size: clamp(36px, 4vw, 48px);
        margin-bottom: 30px;
    }
    
    .workspace-description {
        font-size: clamp(18px, 1.5vw, 20px);
        margin-bottom: 50px;
        max-width: 900px;
    }
}

@media (min-width: 1400px) {
    .office-gallery-grid {
        max-width: 1500px;
    }

    .office-image img {
        height: 450px; /* Much larger for 1400px+ displays */
    }

    .workspace-title {
        font-size: clamp(40px, 4.5vw, 52px);
    }

    .workspace-description {
        font-size: clamp(18px, 1.6vw, 22px);
        max-width: 1000px;
    }
}

@media (min-width: 1440px) {
    .office-gallery {
        max-width: 1550px;
        margin-left: auto;
        margin-right: auto;
    }

    .office-gallery-grid {
        max-width: 1550px;
    }

    .office-image img {
        height: 480px;
    }
}

@media (min-width: 1600px) {
    .office-gallery {
        max-width: 1600px;
    }

    .office-gallery-grid {
        max-width: 1625px;
    }

    .office-image img {
        height: 505px;
    }
}

@media (min-width: 1680px) {
    .office-gallery {
        max-width: 1650px;
    }

    .office-gallery-grid {
        max-width: 1665px;
    }

    .office-image img {
        height: 527px;
    }
}

@media (min-width: 1920px) {
    .office-gallery {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }

    .office-gallery-grid {
        max-width: 1700px;
    }

    .office-image img {
        height: 550px; /* Much larger for 1920px displays */
    }
}

@media (min-width: 2560px) {
    .office-gallery {
        max-width: 2200px;
    }

    .office-gallery-grid {
        max-width: 2000px;
    }

    .office-image img {
        height: 650px; /* Extra large for ultra-wide displays */
    }
}

/* Job Boxes Container */
.jobs-container {
    width: 762px;
    max-width: calc(100% - 40px);
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;  /* Add spacing between job boxes */
}

/* Job Box Link */
.job-box-link {
    text-decoration: none;
    display: block;
    width: 100%;
    max-width: 762px;
    margin: 0 auto;
}

/* Individual Job Box */
.job-box {
    background: #FFFFFF;
    box-shadow: 0px 3px 6px #A5A5A529;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    width: 100%;
    height: 110px;
    padding: 25px 30px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.job-box:hover {
    box-shadow: 0px 6px 12px #A5A5A540;
    transform: translateY(-2px);
    border-color: var(--primary-purple);
}

/* Job Title */
.job-box-title {
    font-weight: bold;
    font-size: 21px;
    line-height: 26px;  /* Increased line-height for better text spacing */
    color: #614D84;
    margin-bottom: 12px;
    white-space: normal;  /* Allow wrapping for long titles */
    word-wrap: break-word;  /* Break long words if needed */
}

/* Job Details Row */
.job-box-details {
    display: flex;
    gap: 50px;
    font-size: 14px;
    line-height: 17px;
}

.job-box-location,
.job-box-created {
    color: #606060;
}

/* Desktop Job Boxes */
@media (min-width: 992px) {
    .job-box-link {
        width: 762px;
    }
    
    .job-box {
        width: 762px;
    }
}

/* Responsive Job Boxes */
@media (max-width: 768px) {
    .jobs-container {
        width: 100%;
        padding: 0 20px;
        margin: 40px auto;
    }
    
    .job-box-link {
        width: 100%;
        max-width: 100%;
    }
    
    .job-box {
        width: 100%;
        height: auto;
        min-height: 110px;
        padding: 20px;
    }
    
    .job-box-title {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .job-box-details {
        flex-direction: column;
        gap: 8px;
    }
}

/* Scale up for larger viewports */
@media (min-width: 1440px) {
    .jobs-container {
        width: 900px;  /* Increased from 800px for better scaling */
    }

    .job-box {
        width: 900px;  /* Wider for 1440px displays */
        height: 115px;
    }

    .job-box-title {
        font-size: 22px;
        line-height: 28px;
    }

    .job-box-details {
        font-size: 15px;
    }
}

@media (min-width: 1600px) {
    .jobs-container {
        width: 950px;  /* Increased for better progression */
    }

    .job-box {
        width: 950px;  /* Wider for 1600px displays */
        height: 120px;
    }

    .job-box-title {
        font-size: 22.5px;
        line-height: 28px;
    }

    .job-box-details {
        font-size: 15px;
    }
}

@media (min-width: 1680px) {
    .jobs-container {
        width: 975px;  /* Increased for smooth progression */
    }

    .job-box {
        width: 975px;  /* Wider for 1680px displays */
        height: 125px;
    }

    .job-box-title {
        font-size: 23px;
        line-height: 29px;
    }

    .job-box-details {
        font-size: 15.5px;
    }
}

@media (min-width: 1920px) {
    .jobs-container {
        width: 1000px;  /* Increased from 900px for better use of space */
    }

    .job-box {
        width: 1000px;  /* Wider for 1920px displays */
        height: 130px;
    }

    .job-box-title {
        font-size: 24px;
        line-height: 30px;
    }

    .job-box-details {
        font-size: 16px;
    }
}

@media (min-width: 2560px) {
    .jobs-container {
        width: 1200px;  /* Increased from 1000px for ultra-wide displays */
    }

    .job-box {
        width: 1200px;  /* Wider for 2560px displays */
        height: 140px;
    }
    
    .job-box-title {
        font-size: 26px;
        line-height: 32px;
    }
    
    .job-box-details {
        font-size: 17px;
    }
}

/* ===========================
   Contact Hero
   =========================== */

.contact-hero {
    background-image: url('assets/backgrounds/contactbg@2x.png');
    background-image: -webkit-image-set(
        url('assets/optimized/backgrounds/contactbg.webp') 1x,
        url('assets/optimized/backgrounds/contactbg@2x.webp') 2x
    );
    background-image: image-set(
        url('assets/optimized/backgrounds/contactbg.webp') 1x,
        url('assets/optimized/backgrounds/contactbg@2x.webp') 2x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 130px 0;  /* Equal top/bottom for vertical centering */
    margin-top: 0px;  /* Account for 90px header */
    position: relative;
}

/* Overlay removed to show true colors */

.contact-hero .container {
    position: relative;
}

.contact-hero-title {
    font-size: 36px;
    font-weight: var(--font-weight-normal);
    color: var(--white);
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.contact-hero-subtitle {
    font-size: 16px;
    line-height: 1.375;  /* 22px/16px = 1.375 ratio */
    letter-spacing: 0.03px;
    color: #FFFFFF;
    opacity: 1;
    max-width: clamp(500px, 47vw, 599px);  /* Responsive width */
    margin: 0;
    text-align: left;
}

/* ===========================
   Hero Desktop Overrides
   =========================== */

/* Mobile override - consistent padding approach for all heroes */
@media (max-width: 768px) {
    .about-hero {
        height: auto;  /* Remove fixed height on mobile */
        padding: 130px 0;  /* Match other heroes' mobile padding */
        display: block;  /* Remove flexbox on mobile */
    }
}

/* Desktop override - fixed height approach for all heroes */
@media (min-width: 769px) {  /* After mobile breakpoint */
    body {
        overflow-x: hidden; /* Prevent horizontal scroll on desktop only */
    }
    
    .services-hero,
    .careers-hero,
    .contact-hero {
        height: 400px;
        padding: 0;  /* Remove padding on desktop */
        display: flex;
        align-items: center;
    }
    
    /* About hero already uses fixed height, ensure consistency */
    .about-hero {
        height: 400px;
        padding: 0;
        display: flex;
        align-items: center;
    }
}

/* Scale heroes for larger viewports */
@media (min-width: 1440px) {
    .services-hero,
    .careers-hero,
    .contact-hero,
    .about-hero {
        height: 420px;
    }
}

@media (min-width: 1600px) {
    .services-hero,
    .careers-hero,
    .contact-hero,
    .about-hero {
        height: 435px;
    }
}

@media (min-width: 1680px) {
    .services-hero,
    .careers-hero,
    .contact-hero,
    .about-hero {
        height: 442px;
    }
}

@media (min-width: 1920px) {
    .services-hero,
    .careers-hero,
    .contact-hero,
    .about-hero {
        height: 450px;
    }
}

@media (min-width: 2560px) {
    .services-hero,
    .careers-hero,
    .contact-hero,
    .about-hero {
        height: 500px;
    }
}

/* ===========================
   Contact Content
   =========================== */

.contact-content {
    padding: clamp(15px, 1.5vw, 30px) 0;
    background: var(--white);
    position: relative;
    overflow-x: hidden; /* Prevent horizontal scroll from decoration */
}

/* Company Info at Top */
.contact-info-top {
    margin-top: clamp(50px, 5vw, 80px);
    margin-bottom: clamp(30px, 3vw, 50px);
}

.company-details-row {
    display: flex;
    gap: clamp(40px, 4.6875vw, 100px);
    align-items: start;
    margin-top: clamp(15px, 1.5vw, 25px);
}

@media (max-width: 767px) {
    .company-details-row {
        flex-direction: column;
        gap: 20px;
    }
}

/* Contact Divider */
.contact-divider {
    width: 90%;  /* Simple 90% width */
    height: 1px;
    background-color: #e0e0e0;
    margin: clamp(30px, 3vw, 60px) 0;  /* Remove auto centering */
}

/* Form Section */
.contact-form-section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Form Introduction Styles */
.form-intro {
    margin-bottom: 40px;
    max-width: 600px;
}

.form-intro-title {
    font-size: 36px;
    font-weight: var(--font-weight-semibold);
    color: var(--primary-purple);
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.form-intro-text {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 767px) {
    .contact-form-section {
        flex-direction: column;
    }
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: 40px;
    align-items: start;
    margin-top: 20px;
    position: relative; /* For decoration positioning */
}

/* Contact grid responsive breakpoints */
@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }
}

@media (min-width: 992px) {
    .contact-grid {
        gap: 100px; /* Increased gap for better spacing */
    }
}

.contact-info {
    position: relative;
    padding-left: 40px; /* Add padding for better alignment */
}

@media (max-width: 767px) {
    .contact-info {
        padding-left: 0;
        order: 2; /* Move info below form on mobile */
    }
}

.company-info {
    margin-bottom: 40px;
}

.company-name {
    font-size: clamp(18px, 1.5vw, 20px);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-purple);
    margin: 0;
    text-align: left;
}

.company-identity {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.company-legal {
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--text-gray);
    margin: 0;
    font-style: italic;
}

.company-address {
    font-size: clamp(14px, 1.25vw, 16px);
    color: var(--text-gray);
    line-height: 1.8;
    margin: 0;
}

.company-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-email,
.contact-phone {
    font-size: clamp(14px, 1.25vw, 16px);
    color: var(--text-gray);
    margin: 0;
}

.contact-form-wrapper {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: clamp(500px, 50vw, 700px);
    width: 100%;
}

.contact-form {
    width: 100%;
}

.contact-form::after {
    content: "";
    display: table;
    clear: both;
}

.form-group {
    margin-bottom: clamp(20px, 2vw, 30px);
}

.recaptcha-group {
    margin: 20px 0;
    display: block;
}

/* Honeypot field - hidden from users for spam protection */
.field-extra {
    position: absolute;
    left: -9999px;
    height: 0;
    width: 0;
    opacity: 0;
    pointer-events: none;
}

.form-label {
    display: block;
    font-size: clamp(13px, 1.1vw, 15px);
    font-weight: 400;
    color: #606060;
    margin-bottom: clamp(6px, 0.6vw, 10px);
    letter-spacing: 0.3px;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: clamp(10px, 1vw, 14px) clamp(14px, 1.4vw, 18px);
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-family: var(--font-family);
    font-size: clamp(14px, 1.25vw, 16px);
    color: var(--text-gray);
    background: var(--white);
    transition: all 0.3s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: clamp(42px, 4vw, 48px);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 3px rgba(97, 77, 132, 0.1);
    transform: translateY(-1px);
}

.form-textarea {
    resize: vertical;
    min-height: clamp(120px, 12vw, 160px);
    line-height: 1.6;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

.recaptcha {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-gray);
}

.submit-btn,
.form-submit {
    background: var(--primary-purple);
    color: var(--white);
    padding: clamp(10px, 1vw, 14px) clamp(40px, 4vw, 60px);
    border: none;
    border-radius: 50px;
    font-size: clamp(15px, 1.3vw, 17px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    width: auto;
    letter-spacing: 0.5px;
    float: left;
    margin-top: clamp(8px, 0.8vw, 15px);
}

.submit-btn:hover,
.form-submit:hover {
    background: var(--light-purple);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(97, 77, 132, 0.3);
}

.submit-btn:active,
.form-submit:active {
    transform: translateY(0);
}

/* Button loading state */
.form-submit {
    position: relative;
    min-width: 150px;
}

.form-submit .btn-loading {
    display: none;
}

.form-submit .btn-loading.active {
    display: inline-block;
}

.form-submit .btn-text.hidden {
    display: none;
}

.form-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.form-submit:disabled:hover {
    background: var(--primary-purple);
    transform: none;
    box-shadow: none;
}

/* ===========================
   Notification Toast Styles
   =========================== */

.notification {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 300px;
    max-width: 90%;
    padding: 16px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    transition: top 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.notification.show {
    top: 100px;
}

/* Success notification */
.notification.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.notification.success::before {
    content: '✓';
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
}

/* Error notification */
.notification.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.notification.error::before {
    content: '✕';
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
}

/* Notification animation pulse */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
    }
}

.notification.show {
    animation: pulse 2s ease-in-out;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .notification {
        min-width: 280px;
        padding: 14px 20px;
        font-size: 14px;
    }

    .notification.show {
        top: 80px;
    }
}

.map-section {
    margin-top: 80px;
    padding: 0;
}

.map-container {
    height: 400px;
    overflow: hidden;
    border: none;
    box-shadow: none;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(20%) contrast(1.1);
    transition: filter 0.3s ease;
}

.map-container:hover iframe {
    filter: grayscale(0%) contrast(1.2);
}

/* Contact Decoration Circle - Section Edge Positioning */
.contact-decoration {
    position: absolute;
    right: -50px; /* Simple offset like services arrow */
    top: 150px; /* Fixed position aligned with form area */
    z-index: 1;
    pointer-events: none;
    opacity: 1; /* Full opacity per design specs */
    overflow: visible;
}

/* Removed redundant .contact-circle rule - using .contact-decoration img instead */

/* Hide on mobile screens only */
@media (max-width: 767px) {
    .contact-decoration {
        display: none;
    }
}

/* Tablet positioning (iPad and similar) */
@media (min-width: 768px) and (max-width: 1199px) {
    .contact-decoration {
        right: -30px; /* Less extension on tablets */
        top: 250px; /* Move down to avoid divider overlap */
    }

    .contact-decoration img {
        width: 200px; /* Smaller size on tablets */
        height: auto;
        max-height: 50vh; /* Smaller max height for tablets */
    }
}

/* Scale decoration responsively like services arrow */
.contact-decoration img {
    width: clamp(240px, 20vw, 450px);  /* Smaller minimum for better scaling */
    height: auto;  /* Maintain natural aspect ratio */
    max-height: 70vh;  /* Prevent it from being too tall */
}

/* Responsive adjustments for decoration position */
@media (min-width: 1920px) {
    .contact-decoration {
        right: -80px; /* Allow more extension on larger displays */
        top: 180px; /* Adjust vertical position for larger viewport */
    }
}

@media (min-width: 2560px) {
    .contact-decoration {
        right: -100px; /* Full extension for ultra-wide */
        top: 200px; /* Further adjust for ultra-wide */
    }
}

/* Contact Page Responsive Enhancements */
@media (min-width: 1200px) {
    .contact-content {
        padding: 30px 0;
    }
    
    .contact-form-section {
        min-height: 500px; /* Ensure space for decoration */
    }
}

@media (min-width: 1400px) {
    .contact-content {
        padding: 35px 0;
    }
    
    .company-details-row {
        gap: 120px;
    }
}

@media (min-width: 1920px) {
    .contact-content {
        padding: 40px 0;
    }
    
    .contact-form-wrapper {
        max-width: 700px;
    }
    
    .company-details-row {
        gap: 150px;
    }
    
    .contact-divider {
        width: 90%;  /* Keep consistent 90% */
        margin: 60px 0;  /* Remove auto centering */
    }
}

@media (min-width: 2560px) {
    .contact-content {
        padding: 35px 0;
    }
}

/* ===========================
   CTA Section
   =========================== */

.cta-section {
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.home-cta {
    background-image: url('assets/backgrounds/ctabg2.png');
    background-image: -webkit-image-set(
        url('assets/optimized/backgrounds/ctabg2.webp') 1x,
        url('assets/optimized/backgrounds/ctabg2@2x.webp') 2x
    );
    background-image: image-set(
        url('assets/optimized/backgrounds/ctabg2.webp') 1x,
        url('assets/optimized/backgrounds/ctabg2@2x.webp') 2x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;
    padding: 120px 0;
    display: flex;
    align-items: center;
}

.services-cta,
.about-cta,
.careers-cta {
    background-image: url('assets/backgrounds/ctabg2@2x.png');
    background-image: -webkit-image-set(
        url('assets/optimized/backgrounds/ctabg2.webp') 1x,
        url('assets/optimized/backgrounds/ctabg2@2x.webp') 2x
    );
    background-image: image-set(
        url('assets/optimized/backgrounds/ctabg2.webp') 1x,
        url('assets/optimized/backgrounds/ctabg2@2x.webp') 2x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;  /* Match heroes at base resolution */
    display: flex;
    align-items: center;
}

.cta-section .container {
    position: relative;
}

.cta-title {
    font-size: 36px;
    line-height: 1.3;
    font-weight: var(--font-weight-normal);
    color: var(--white);
    margin: 0 auto 40px auto;  /* Center horizontally when max-width is set */
    letter-spacing: 0;
    max-width: 100%;  /* Use full width */
}


.cta-button {
    display: inline-block;
    background: var(--white);
    color: #614D84;
    padding: 10px 30px;
    text-decoration: none;
    border-radius: 20px;
    font-size: 18px;
    line-height: 20px;
    font-weight: var(--font-weight-normal);
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Scale CTA sections for larger viewports - match hero scaling */
@media (min-width: 1440px) {
    .cta-section {
        padding: 83px 0;
    }

    .home-cta {
        min-height: 420px;
        padding: 126px 0;
    }

    .services-cta,
    .about-cta,
    .careers-cta {
        min-height: 420px;
    }
}

@media (min-width: 1600px) {
    .cta-section {
        padding: 86px 0;
    }

    .home-cta {
        min-height: 435px;
        padding: 130px 0;
    }

    .services-cta,
    .about-cta,
    .careers-cta {
        min-height: 435px;
    }
}

@media (min-width: 1680px) {
    .cta-section {
        padding: 88px 0;
    }

    .home-cta {
        min-height: 442px;
        padding: 132px 0;
    }

    .services-cta,
    .about-cta,
    .careers-cta {
        min-height: 442px;
    }
}

@media (min-width: 1920px) {
    .cta-section {
        padding: 90px 0;  /* Scale from 80px */
    }

    .home-cta {
        min-height: 450px;  /* Scale from 400px - match heroes */
        padding: 135px 0;   /* Scale from 120px */
    }

    .services-cta,
    .about-cta,
    .careers-cta {
        min-height: 450px;  /* Match hero scaling */
    }
}

@media (min-width: 2560px) {
    .cta-section {
        padding: 100px 0;  /* Further scale */
    }
    
    .home-cta {
        min-height: 500px;  /* Match hero scaling exactly */
        padding: 150px 0;   /* Further scale */
    }
    
    .services-cta,
    .about-cta,
    .careers-cta {
        min-height: 500px;  /* Match hero scaling */
    }
}

/* ===========================
   Footer
   =========================== */

.footer {
    background: var(--white);
    min-height: 360px;
    padding: 60px 0;
    position: relative;
    overflow: visible;
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;  /* Align everything to top */
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 40px;  /* Reduced padding to 40px on both sides */
    box-sizing: border-box;
}

.footer-logo {
    max-height: 80px;  /* Increased from 65px */
    width: auto;
    object-fit: contain;
}

.footer-nav {
    display: flex;
    gap: 40px;
    min-height: 80px;  /* Match footer-left height without restricting growth */
    align-items: center;  /* Center nav items vertically */
}

.footer-link {
    color: #614D84;
    text-decoration: none;
    font-size: clamp(16px, 2.5vw, 18px);
    line-height: 20px;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.footer-link:hover {
    opacity: 0.7;
}

.footer-decoration {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    
    /* Position based on actual SVG height to maintain consistent appearance */
    --svg-height: 149px; /* Rendered height of 800px wide SVG at base */
    bottom: calc(-1 * var(--svg-height) * 0.48); /* Show ~52% of the SVG */
}

.footer-circle {
    width: 800px; /* Revert to original desktop size */
    height: auto;
    max-width: none; /* Override global img max-width */
    min-width: 400px; /* Keep mobile minimum size */
}

/* Footer decoration adjustments for larger viewports */
@media (min-width: 1440px) {
    .footer {
        min-height: 370px;
        padding: 65px 0;
    }

    .footer-logo {
        max-height: 84px;
    }

    .footer-nav {
        gap: 42px;
    }

    .footer-decoration {
        --svg-height: 151px; /* Proportionally scaled for 810px width */
    }

    .footer-circle {
        width: 810px;
    }
}

@media (min-width: 1600px) {
    .footer {
        min-height: 380px;
        padding: 70px 0;
    }

    .footer-logo {
        max-height: 88px;
    }

    .footer-nav {
        gap: 45px;
    }

    .footer-decoration {
        --svg-height: 159px; /* Proportionally scaled for 850px width */
    }

    .footer-circle {
        width: 850px;
    }
}

@media (min-width: 1680px) {
    .footer {
        min-height: 390px;
        padding: 75px 0;
    }

    .footer-logo {
        max-height: 92px;
    }

    .footer-nav {
        gap: 47px;
    }

    .footer-decoration {
        --svg-height: 163px; /* Proportionally scaled for 875px width */
    }

    .footer-circle {
        width: 875px;
    }
}

@media (min-width: 1920px) {
    .footer {
        min-height: 400px; /* Scale up from 360px for better proportions */
        padding: 80px 0; /* Increased from 60px for better proportions */
    }

    .footer-logo {
        max-height: 95px; /* Scale up from 80px */
    }

    .footer-nav {
        gap: 50px; /* Scale up from 40px */
    }

    .footer-nav .nav-link {
        font-size: 19px; /* Scale up from 18px */
    }

    .footer-decoration {
        --svg-height: 167px; /* Proportionally scaled for 900px width */
        /* bottom position auto-calculates from the variable */
    }

    .footer-circle {
        width: 900px; /* Slightly larger for 1440p displays */
    }
}

@media (min-width: 2560px) {
    .footer {
        min-height: 450px; /* Even larger for ultra-wide displays */
        padding: 100px 0; /* Increased from 60px for better proportions */
    }

    .footer-logo {
        max-height: 110px; /* Scale up from 80px */
    }

    .footer-nav {
        gap: 60px; /* Scale up from 40px */
    }

    .footer-nav .nav-link {
        font-size: 20px; /* Scale up from 18px */
    }

    .footer-decoration {
        --svg-height: 204px; /* Proportionally scaled for 1100px width */
        /* bottom position auto-calculates from the variable */
    }

    .footer-circle {
        width: 1100px; /* Slightly larger for 2560px+ displays */
    }
}

/* ===========================
   Responsive Design
   =========================== */

/* Desktop-specific description text adjustments */
@media (min-width: 1200px) {
    .description-text {
        max-width: 900px;
        margin-left: 250px;
    }
}

@media (min-width: 1400px) {
    .content-text {
        max-width: 850px;
    }

    .content-text h1 {
        margin: 0 0 180px 0;
    }

    .description-text {
        max-width: 950px;
        margin-left: 350px;
        margin-top: clamp(180px, 22vh, 400px);
    }

    /* Start scaling early to prevent jump at 1440px */
    .services-hero,
    .careers-hero,
    .contact-hero,
    .about-hero {
        height: 415px;
    }

    .hero-logo {
        max-width: 540px;
        width: clamp(313px, 80vw, 540px);
    }

    .hero-tagline {
        font-size: clamp(18px, 4vw, 33.5px);
        max-width: 920px;
    }

    .scroll-indicator img {
        width: 57px;
        height: 27.5px;
    }

    /* Remove conflicting grouped selector - let base styles apply */

    .features-cards {
        max-width: 1300px;
        gap: 72px;
    }

    .features-section {
        padding: 50px 0 110px 0;
    }

    .footer {
        min-height: 365px;
        padding: 62px 0;
    }

    .footer-logo {
        max-height: 82px;
    }

    .service-content p {
        font-size: 16.25px;
    }

    .benefit-content p {
        font-size: 16.25px;
    }

    .jobs-container {
        width: 780px;
    }

    .job-box {
        width: 780px;
        height: 112px;
    }

    .job-box-title {
        font-size: 21.5px;
        line-height: 27px;
    }

    .cta-section {
        padding: 81px 0;
    }

    .home-cta {
        min-height: 410px;
        padding: 123px 0;
    }

    .services-cta,
    .about-cta,
    .careers-cta {
        min-height: 410px;
    }

    .feature-icon-technology {
        width: 105px;
        height: 117px;
    }

    .feature-icon-expertise {
        width: 120px;
        height: 117px;
    }

    .feature-icon-solutions {
        width: 112px;
        height: 117px;
    }

    .feature-text {
        font-size: 16.8px;
        line-height: 23px;
    }

    .office-gallery {
        max-width: 1525px;
    }

    .office-gallery-grid {
        max-width: 1525px;
    }

    .office-image img {
        height: 465px;
    }
}

@media (min-width: 1440px) {
    .description-text p {
        font-size: 19px;
    }

    /* Clean header implementation for 1440px */
    body {
        padding-top: 110px; /* 1440px header height */
    }

    .header.solid {
        padding: 35px 0; /* 35px + 40px logo + 35px = 110px total */
    }

    .header-homepage {
        padding: 35px 0; /* Match solid header */
    }
}

@media (min-width: 1600px) {
    .description-text p {
        font-size: 21px;
    }

    /* Clean header implementation for 1600px */
    body {
        padding-top: 115px; /* 1600px header height */
    }

    .header.solid {
        padding: 37.5px 0; /* 37.5px + 40px logo + 37.5px = 115px total */
    }

    .header-homepage {
        padding: 37.5px 0; /* Match solid header */
    }
}

@media (min-width: 1680px) {
    .description-text p {
        font-size: 22.5px;
    }

    /* Clean header implementation for 1680px */
    body {
        padding-top: 118px; /* 1680px header height */
    }

    .header.solid {
        padding: 39px 0; /* 39px + 40px logo + 39px = 118px total */
    }

    .header-homepage {
        padding: 39px 0; /* Match solid header */
    }
}

@media (min-width: 1920px) {
    body {
        padding-top: 130px; /* 1920px header height (no gap) */
    }

    .content-text {
        max-width: 900px;
    }

    .content-text h1 {
        font-size: 52px;
        margin: 0 0 220px 0;
    }

    .description-text {
        max-width: 1500px;
        margin-left: 450px;  /* Reduced to bring text more to the right */
        margin-top: clamp(250px, 30vh, 480px);
    }

    .description-text p {
        font-size: 24px;
        line-height: 1.4;
    }

    /* Scale header for 1920px displays */
    .header.solid {
        padding: 40px 0; /* 40px + 50px logo + 40px = 130px total */
    }

    .header-homepage {
        padding: 40px 0; /* Match solid header */
    }

    .logo {
        height: 50px; /* Scale up logo for better visibility on larger displays */
    }

    
    /* Adjust arrow for 1440p displays */
    .services-arrow {
        right: 0;
        transform: translateX(25%) translateY(-50%);
    }

    .services-arrow img {
        width: 540px;  /* 20% larger than base */
    }
}

@media (min-width: 2560px) {
    body {
        padding-top: 150px; /* 2560px header height (no gap) */
    }

    .content-text {
        max-width: 1000px;
    }

    .content-text h1 {
        font-size: 55px;
        margin: 0 0 260px 0;
    }

    .description-text {
        max-width: 1800px;  /* Increased for ultra-wide */
        margin-left: 600px;  /* Reduced to bring text more to the right */
        margin-top: clamp(240px, 30vh, 450px);
    }

    .description-text p {
        font-size: 28px;
        line-height: 1.4;
    }

    /* Scale header for ultra-wide displays */
    .header.solid {
        padding: 45px 0; /* 45px + 60px logo + 45px = 150px total */
    }

    .header-homepage {
        padding: 45px 0; /* Match solid header */
    }

    .logo {
        height: 60px; /* Larger logo for ultra-wide displays */
    }

    
    /* Adjust arrow for ultra-wide displays */
    .services-arrow {
        right: 0;
        transform: translateX(25%) translateY(-50%);
    }

    .services-arrow img {
        width: 585px;  /* 30% larger than base */
    }
}

/* Desktop override for header padding - applies only to actual desktop sizes */
@media (min-width: 992px) {
    .header.solid .header-content {
        padding: 0 100px;
    }
}

@media (max-width: 1200px) {
    .content-decoration {
        display: none;
    }
    
    .services-arrow {
        display: none;
    }
}

@media (max-width: 992px) and (min-width: 769px) {
    .content-text {
        margin-bottom: 150px; /* Medium spacing for tablets */
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 75px; /* Mobile header height (no gap) */
    }

    .container {
        padding: 0 20px;
    }

    /* Double the footer decoration size on mobile */
    .footer-circle {
        width: 100vw; /* Exactly viewport width */
        max-width: 400px; /* Cap at 400px for larger phones */
        min-width: unset; /* Remove the 400px min-width constraint from base styles */
    }

    /* Mobile-only CTA background */
    .home-cta,
    .services-cta,
    .about-cta,
    .careers-cta {
        background-image: url('assets/backgrounds/futuremobile.png');
        background-image: -webkit-image-set(
            url('assets/optimized/backgrounds/futuremobile.webp') 1x,
            url('assets/optimized/backgrounds/futuremobile@2x.webp') 2x
        );
        background-image: image-set(
            url('assets/optimized/backgrounds/futuremobile.webp') 1x,
            url('assets/optimized/backgrounds/futuremobile@2x.webp') 2x
        );
    }

    /* Fix all header variants on mobile */
    .header,
    .header.solid,
    .header-homepage {
        padding: 20px 0; /* 40px total height on mobile */
    }
    
    /* Fix header content alignment on mobile */
    .header-content {
        gap: 20px; /* Reduce gap from 40px */
    }
    
    .header.solid .header-content {
        padding: 0 20px; /* Remove 100px desktop padding */
    }

    .header.solid .container {
        padding: 0 20px; /* Match homepage mobile padding */
    }

    .header-homepage .container {
        padding: 0 20px; /* Add horizontal padding for mobile */
    }
    
    .header-homepage .header-content {
        justify-content: flex-end; /* Align hamburger to the right on mobile */
        padding-right: 0; /* Remove the 100px right padding */
    }
    
    /* Reduce logo size on mobile */
    .logo {
        height: 35px; /* Smaller for mobile */
        width: auto;
    }
    
    /* Adjust mobile menu button size */
    .mobile-menu-btn {
        display: block;
        width: 40px;
        height: 40px;
    }
    
    /* Adjust hamburger spans for smaller button */
    .mobile-menu-btn span:first-child {
        top: 13px;
    }

    .mobile-menu-btn span:last-child {
        bottom: 13px;
    }
    
    .nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: var(--white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px;
        z-index: 9999;
        opacity: 0;
        transform: translateX(100%);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .nav.active {
        display: flex;
        opacity: 1;
        transform: translateX(0);
        gap: 8px;
    }

    .nav-link {
        padding: 20px 0;
        border: none;
        font-size: 24px;
        font-weight: var(--font-weight-semibold);
        text-align: center;
        width: 100%;
        transition: color 0.2s ease;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-link:hover,
    .nav-link:focus {
        color: var(--primary-purple);
    }
    
    .nav-link:last-child {
        border-bottom: none;
    }
    
    /* Ensure hamburger button stays on top and in fixed position when menu is open */
    .mobile-menu-btn {
        z-index: 10001;
    }
    
    .mobile-menu-btn.active {
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 10001;
    }
    
    /* Match expertise section formatting on mobile */
    .main-content {
        padding: 60px 0; /* Match expertise section padding */
        min-height: auto; /* Remove min-height constraint */
    }
    
    .main-content .container {
        padding: 0 20px; /* Standard mobile padding */
    }
    
    .content-text {
        max-width: 100%; /* Full width */
        margin-top: 0; /* Remove desktop margin-top */
        margin-bottom: 0; /* Remove gap - let H1 margin handle spacing */
        position: static; /* Remove positioning */
        z-index: auto; /* Remove z-index */
    }
    
    .content-text h1 {
        font-size: 28px; /* Match expertise-title size */
        line-height: 1.3; /* Comfortable line height */
        margin-bottom: 30px; /* Match expertise-title spacing */
    }
    
    .description-text {
        max-width: 100%; /* Full width */
        margin: 0; /* No special margins */
        position: static; /* Remove positioning */
        z-index: auto; /* Remove z-index */
    }
    
    .description-text p {
        font-size: 16px; /* Standard mobile font size */
        line-height: 1.7; /* Match expertise-subtitle line-height */
    }

    /* Increase all paragraph text to 16px minimum on mobile */
    p:not(.hero-tagline) {
        font-size: 16px !important;
        line-height: 1.6;
    }

    /* Update clamp functions to start at 16px for mobile */
    .expertise-subtitle,
    .performance-text,
    .about-hero .hero-subtitle,
    .contact-hero-subtitle,
    .feature-text,
    .service-description {
        font-size: 16px !important;
    }
    
    .content-decoration {
        display: none; /* Hide decorative elements on mobile */
    }
    
    .performance-section {
        padding: 60px 0;
    }
    
    .features-section {
        padding-top: 10px; /* Reduced top padding on mobile */
    }
    
    .feature-card {
        align-items: center; /* Center feature cards on mobile */
        text-align: center;
    }
    
    .feature-text {
        text-align: center; /* Center feature text on mobile */
    }
    
    
    .performance-title {
        font-size: 28px;
        margin-bottom: 30px;
        text-align: left;
    }
    
    .performance-text {
        font-size: 16px;
        padding: 0;
        text-align: left;
        margin: 0;
    }
    
    .expertise-title {
        font-size: 28px;
        text-align: left;
    }
    
    .expertise-subtitle {
        text-align: left;
        margin: 0 0 40px 0;
    }

    /* Mobile font-size overrides for all major title elements */
    .services-hero-title,
    .services-heading,
    .careers-hero-title,
    .about-hero-title,
    .vision-title,
    .mission-title,
    .story-title,
    .people-title,
    .workspace-title,
    .opportunities-title,
    .contact-hero-title,
    .cta-title,
    .form-intro-title {
        font-size: 28px;
    }

    /* Match form title styling to other mobile headers */
    .form-intro-title {
        font-weight: var(--font-weight-normal);
        color: var(--text-gray);
    }

    /* Left-align Current Opportunities section on mobile */
    .opportunities-title,
    .opportunities-description {
        text-align: left;
    }

    .jobs-table-wrapper {
        border-radius: 6px;
    }
    
    .jobs-table th,
    .jobs-table td {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .jobs-table .job-experience {
        font-size: 13px;
    }
    
    .map-section {
        margin-top: 50px;
    }
    
    .map-container {
        height: 300px;
    }

    .contact-divider {
        margin: 20px 0;  /* Reduce from clamp(30px, 3vw, 60px) for mobile */
    }

    .form-submit {
        width: 100%; /* Full width on mobile */
        float: none; /* Remove float on mobile */
    }
    
    .form-footer {
        flex-direction: column;
        gap: 20px;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
        align-items: center; /* Center all footer content */
        position: relative; /* Enable absolute positioning fallback for address */
        padding-bottom: 120px; /* Reserve space for address at the bottom */
        padding-bottom: calc(120px + constant(safe-area-inset-bottom)); /* Legacy iOS safe-area support */
        padding-bottom: calc(120px + env(safe-area-inset-bottom)); /* Account for iOS home indicator */
    }

    .footer-left {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .footer-left > a {
        order: 1; /* Logo first */
    }

    .footer-logo {
        margin-bottom: 20px; /* Spacing after logo */
    }

    .footer-address {
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        margin: 0;
        padding-top: 24px; /* Space above address to separate from social icons */
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .footer-center {
        /* Keep hidden on mobile too */
        display: none;
    }

    .footer-right {
        order: 2; /* Nav and social icons in middle */
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .footer-nav {
        flex-direction: column;
        gap: 15px;
        align-items: center; /* Center the nav links */
    }

    .footer-social {
        margin-top: 32px;
        justify-content: center;
    }

    .footer {
        min-height: 80px; /* Allow footer to shrink for mobile, ensuring space for social icons */
        padding-bottom: 60px; /* Match top padding for consistent spacing */
    }

    /* Fix CTA banner text - removed br tags in HTML, no longer needed */

    /* Services section improvements */
    .services-content h2,
    .service-title {
        font-size: 24px !important;
    }

    .service-description {
        font-size: 16px !important;
    }

    .services-content {
        margin-bottom: 20px;
    }

    /* Services hero title bigger on mobile */
    .services-hero .hero-title {
        font-size: 32px !important;
    }

    /* Move contact info below map on mobile */
    .contact-content {
        display: flex;
        flex-direction: column;
        padding: 20px 0 40px 0;
    }

    .contact-info-top {
        order: 2; /* Move below map */
    }

    .map-section {
        order: 1; /* Map comes first */
        margin-top: 40px;
        margin-bottom: 25px;
    }

    .contact-form-section {
        order: 3;
    }

    .form-intro {
        margin-top: 20px;
    }

    /* Make job boxes full width to container edge */
    .jobs-container {
        width: 100%;
        padding: 0;
        margin: 40px 0;
        max-width: 100%;
    }

    .job-box-link {
        width: 100%;
        max-width: 100%;
    }

    .job-box {
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

@media (max-width: 480px) {
    .cta-title {
        line-height: 1.2;  /* Consistent tighter spacing for mobile headers */
    }

    .expertise-title {
        line-height: 1.22;  /* Tighter line spacing for mobile */
    }

    .services-hero-title,
    .about-hero-title,
    .careers-hero-title,
    .contact-hero-title {
        line-height: 1.2;  /* Consistent tighter spacing for mobile headers */
    }
    
    /* Mobile-optimized form fields and buttons */
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-input,
    .form-textarea {
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    .cta-button,
    .expertise-button,
    .careers-hero-button {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
    }
    
    /* Ensure touch targets are large enough */
    button, a[class*="button"], a[class*="btn"] {
        min-height: 48px;
        padding: 12px 20px;
        display: inline-block;
    }
}

/* ===========================
   Office Gallery Modal / Lightbox
   =========================== */

.office-gallery-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.95);
    animation: galleryModalFadeIn 0.3s ease;
    overscroll-behavior: contain; /* Prevents scroll chaining to body */
}

.office-gallery-modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes galleryModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.office-modal-content {
    max-width: 90%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    animation: galleryModalZoomIn 0.3s ease;
}

@keyframes galleryModalZoomIn {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.office-modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 10000;
    line-height: 1;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.office-modal-close:hover,
.office-modal-close:focus {
    color: #fff;
    transform: scale(1.1);
}

/* Navigation arrows for office gallery */
.office-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none;
}

.office-modal-prev,
.office-modal-next {
    color: #f1f1f1;
    font-size: 60px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    pointer-events: auto;
    user-select: none;
    padding: 0 20px;
    line-height: 1;
}

.office-modal-prev:hover,
.office-modal-next:hover {
    color: #fff;
    transform: scale(1.2);
}

/* Image counter for office gallery */
.office-modal-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #f1f1f1;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    border-radius: 20px;
}

/* Mobile optimizations for office gallery modal */
@media (max-width: 768px) {
    .office-modal-content {
        max-width: 100%;
        max-height: 80vh;
    }
    
    .office-modal-close {
        right: 15px;
        font-size: 35px;
        width: 45px;
        height: 45px;
    }
    
    .office-modal-prev,
    .office-modal-next {
        font-size: 40px;
        padding: 0 10px;
    }
    
    .office-modal-nav {
        padding: 0 10px;
    }
    
    /* Touch-friendly tap areas for office gallery */
    .office-modal-prev,
    .office-modal-next {
        min-width: 60px;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* ============================= */
/* Career Detail Pages Styles */
/* ============================= */

/* Career Detail Hero */
.career-detail-hero {
    background-image: url('../assets/backgrounds/careersbg@2x.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 130px 0;
    margin-top: 0;  /* Header now pushes down, no margin needed */
    position: relative;
}

.back-to-careers {
    color: white;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.back-to-careers:hover {
    opacity: 1;
}

.career-detail-title {
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    color: white;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.career-detail-meta {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    color: white;
    font-size: 16px;
}

.career-detail-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Career Details Section */
.career-details {
    padding: 80px 0;
    background: #F9F9F9;
}

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

/* Single column layout for pages without descriptions */
.career-content-grid.no-description {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
}

.career-content-grid.no-description .career-sidebar {
    display: none;
}

.career-content-grid.no-description .career-main-content {
    max-width: 100%;
}

.career-main-content {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}

.career-section {
    margin-bottom: 40px;
}

.career-section:last-child {
    margin-bottom: 0;
}

.career-section h2 {
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--primary-purple);
    margin-bottom: 20px;
}

.career-section p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-gray);
    margin-bottom: 15px;
}

.career-section ul {
    list-style: none;
    padding: 0;
}

.career-section ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-gray);
}

.career-section ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-purple);
    font-weight: bold;
}

/* Career Sidebar */
.career-sidebar {
    position: sticky;
    top: 110px;
}

.apply-section {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}

.apply-section h2 {
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    color: var(--primary-purple);
    margin-bottom: 15px;
}

.apply-section p {
    font-size: 14px;
    color: var(--text-gray);
    margin-bottom: 25px;
}

/* Responsive Styles for Career Detail Pages */
@media (max-width: 992px) {
    .career-content-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .career-sidebar {
        position: static;
    }
    
    .career-main-content,
    .apply-section {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .career-detail-hero {
        padding: 80px 0;
    }
    
    .career-detail-title {
        font-size: 28px;
    }
    
    .career-detail-meta {
        font-size: 14px;
        gap: 20px;
    }
    
    .career-details {
        padding: 40px 0;
    }
    
    .career-main-content,
    .apply-section {
        padding: 20px;
    }
    
    .career-section h2 {
        font-size: 20px;
    }
    
    .career-section p,
    .career-section ul li {
        font-size: 14px;
    }
}

/* Terms of Use Page Styles */
.terms-section {
    padding: 120px 0 100px;
    background: var(--white);
    min-height: calc(100vh - 90px);
}

.terms-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.terms-title {
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-purple);
    margin: 0 0 40px 0;
    text-align: left;
}

.terms-content {
    color: var(--text-gray);
    line-height: 1.6;
}

.terms-content h2 {
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--primary-purple);
    margin: 35px 0 20px 0;
    text-align: left;
}

.terms-content h2:first-child {
    margin-top: 0;
}

.terms-content p {
    font-size: 16px;
    margin: 0 0 20px 0;
    text-align: left;
}

.terms-content strong {
    font-weight: var(--font-weight-semibold);
    color: var(--text-gray);
}

.terms-list {
    list-style: disc;
    padding-left: 30px;
    margin: 20px 0;
}

.terms-list li {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-gray);
    margin-bottom: 12px;
}

.terms-date {
    font-style: italic;
    font-size: clamp(13px, 1.15vw, 15px);
    color: var(--text-gray);
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--very-light-purple);
}

/* Responsive adjustments for terms page */
@media (max-width: 768px) {
    .terms-section {
        padding: 80px 0 60px;
    }

    .terms-container {
        padding: 0 20px;
    }

    .terms-title {
        font-size: 28px;
        margin-bottom: 30px;
    }
}


/* ===================================================================
   PROPORTIONAL TYPOGRAPHY SCALING SYSTEM
   ===================================================================
   Base resolution: 1280x780

   Conservative scaling multipliers for viewport consistency:
   - 1440px: 1.05x (36px → 37.8px, 16px → 16.8px, 18px → 18.9px)
   - 1600px: 1.1x  (36px → 39.6px, 16px → 17.6px, 18px → 19.8px)
   - 1920px: 1.2x  (36px → 43.2px, 16px → 19.2px, 18px → 21.6px)
   - 2560px: 1.4x  (36px → 50.4px, 16px → 22.4px, 18px → 25.2px)
   ================================================================= */

/* 1440px Breakpoint - 1.05x scaling */
@media (min-width: 1440px) {
    /* 36px Titles → 37.8px */
    .content-text h1,
    .performance-title,
    .expertise-title,
    .services-hero-title,
    .services-heading,
    .about-hero-title,
    .mission-title,
    .vision-title,
    .story-title,
    .section-title,
    .careers-hero-title,
    .opportunities-title,
    .workspace-title,
    .people-title,
    .contact-hero-title,
    .form-intro-title,
    .cta-title,
    .career-detail-title,
    .terms-title {
        font-size: 37.8px;
    }

    /* 16px Paragraphs → 16.8px */
    .description-text p,
    .expertise-subtitle,
    .services-hero-subtitle,
    .services-intro,
    .service-content p,
    .about-hero-subtitle,
    .mission-text,
    .vision-text,
    .story-text,
    .section-description,
    .careers-hero-subtitle,
    .opportunities-description,
    .workspace-description,
    .people-description,
    .benefit-content p,
    .feature-text,
    .contact-hero-subtitle,
    .form-intro-text,
    .terms-content p,
    .terms-list li {
        font-size: 16.8px;
    }

    .opportunities-description {
        line-height: 28px;  /* Better spacing at 1200px */
    }

    /* 18px Buttons/Text → 18.9px */
    .performance-text,
    .expertise-button,
    .service-check::after,
    .service-content h3,
    .benefit-content h3,
    .cta-button,
    .careers-hero-button,
    .terms-content h2 {
        font-size: 18.9px;
    }

    /* Layout scaling - containers grow with text */
    .cta-title {
        max-width: 1150px;  /* Increased to fit text on single line at 37.8px */
    }

    .hero-subtitle {
        max-width: 600px;
    }

    .hero-logo {
        width: 525px;  /* 500 × 1.05 */
        max-width: 525px;
    }
}

/* 1600px Breakpoint - 1.1x scaling */
@media (min-width: 1600px) {
    /* 36px Titles → 39.6px */
    .content-text h1,
    .performance-title,
    .expertise-title,
    .services-hero-title,
    .services-heading,
    .about-hero-title,
    .mission-title,
    .vision-title,
    .story-title,
    .section-title,
    .careers-hero-title,
    .opportunities-title,
    .workspace-title,
    .people-title,
    .contact-hero-title,
    .form-intro-title,
    .cta-title,
    .career-detail-title,
    .terms-title {
        font-size: 39.6px;
    }

    /* 16px Paragraphs → 17.6px */
    .description-text p,
    .expertise-subtitle,
    .services-hero-subtitle,
    .services-intro,
    .service-content p,
    .about-hero-subtitle,
    .mission-text,
    .vision-text,
    .story-text,
    .section-description,
    .careers-hero-subtitle,
    .opportunities-description,
    .workspace-description,
    .people-description,
    .benefit-content p,
    .feature-text,
    .contact-hero-subtitle,
    .form-intro-text,
    .terms-content p,
    .terms-list li {
        font-size: 17.6px;
    }

    .opportunities-description {
        line-height: 30px;  /* Better spacing at 1440px */
    }

    /* 18px Buttons/Text → 19.8px */
    .performance-text,
    .expertise-button,
    .service-check::after,
    .service-content h3,
    .benefit-content h3,
    .cta-button,
    .careers-hero-button,
    .terms-content h2 {
        font-size: 19.8px;
    }

    /* Layout scaling - containers grow with text */
    .cta-title {
        max-width: 1220px;  /* Increased to fit text on single line at 39.6px */
    }

    .hero-subtitle {
        max-width: 630px;
    }

    .hero-logo {
        width: 550px;  /* 500 × 1.1 */
        max-width: 550px;
    }
}

/* 1920px Breakpoint - 1.2x scaling */
@media (min-width: 1920px) {
    /* 36px Titles → 43.2px */
    .content-text h1,
    .performance-title,
    .expertise-title,
    .services-hero-title,
    .services-heading,
    .about-hero-title,
    .mission-title,
    .vision-title,
    .story-title,
    .section-title,
    .careers-hero-title,
    .opportunities-title,
    .workspace-title,
    .people-title,
    .contact-hero-title,
    .form-intro-title,
    .cta-title,
    .career-detail-title,
    .terms-title {
        font-size: 43.2px;
    }

    /* 16px Paragraphs → 19.2px */
    .description-text p,
    .expertise-subtitle,
    .services-hero-subtitle,
    .services-intro,
    .service-content p,
    .about-hero-subtitle,
    .mission-text,
    .vision-text,
    .story-text,
    .section-description,
    .careers-hero-subtitle,
    .opportunities-description,
    .workspace-description,
    .people-description,
    .benefit-content p,
    .feature-text,
    .contact-hero-subtitle,
    .form-intro-text,
    .terms-content p,
    .terms-list li {
        font-size: 19.2px;
    }

    .opportunities-description {
        line-height: 32px;  /* Better spacing at 1920px */
    }

    /* Fix feature-text line-height */
    .feature-text {
        line-height: 26px;  /* 19.2px × 1.35 ratio for proper spacing */
    }

    /* 18px Buttons/Text → 21.6px */
    .performance-text,
    .expertise-button,
    .service-check::after,
    .service-content h3,
    .benefit-content h3,
    .cta-button,
    .careers-hero-button,
    .terms-content h2 {
        font-size: 21.6px;
    }

    /* Layout scaling - containers grow with text */
    .cta-title {
        max-width: 1350px;  /* Increased to fit text on single line at 43.2px */
    }

    .hero-subtitle {
        max-width: 660px;
    }

    .hero-logo {
        width: 600px;  /* 500 × 1.2 */
        max-width: 600px;
    }

    /* NEW: Scale spacing and layout elements */
    .benefit-item {
        gap: 18px;  /* 15px × 1.2 */
        margin-bottom: 30px;  /* 25px × 1.2 */
    }

    .people-content {
        gap: 72px;  /* 60px × 1.2 */
        max-width: 1600px;
    }

    .people-section,
    .workspace-section {
        padding: 96px 0;  /* 80px × 1.2 */
    }

    .opportunities-section {
        padding: 120px 0;  /* 100px × 1.2 */
    }

    /* Scale content widths */
    .vision-section,
    .mission-section,
    .story-section {
        max-width: 1051px;  /* 876px × 1.2 */
    }

    .services-intro {
        max-width: 1080px;  /* 900px × 1.2 */
    }

    .services-grid {
        max-width: 1200px;  /* 1000px × 1.2 */
    }

    /* Scale form elements */
    .form-input,
    .form-textarea {
        padding: 17px 22px;  /* Scale up from base */
        min-height: 58px;  /* 48px × 1.2 */
        border-radius: 5px;
    }

    .form-textarea {
        min-height: 192px;  /* 160px × 1.2 */
    }

    .form-submit {
        padding: 17px 72px;  /* Scale up button padding */
        border-radius: 60px;  /* 50px × 1.2 */
    }

    /* Scale button padding */
    .careers-hero-button {
        padding: 12px 36px;  /* 10px 30px × 1.2 */
        border-radius: 24px;  /* 20px × 1.2 */
    }

    .expertise-button {
        padding: 14px 42px;  /* 12px 35px × 1.2 */
        border-radius: 30px;  /* 25px × 1.2 */
    }

    /* Scale check icons */
    .service-check {
        width: 38px;  /* 32px × 1.2 */
        height: 38px;
    }

    .service-icon {
        width: 48px;  /* 40px × 1.2 */
        height: 48px;
    }

    /* Scale service-item padding to match icon size */
    .service-item {
        padding-top: 60px;  /* 50px × 1.2 - prevents icon overlap */
    }

    /* Scale people image */
    .people-image img {
        max-width: 600px;  /* Scale up for larger displays */
    }

    /* Scale other restrictive content areas */
    .performance-title {
        max-width: 720px;  /* 600px × 1.2 */
    }

    .about-hero-subtitle {
        max-width: 720px;  /* 600px × 1.2 */
    }

    .opportunities-description {
        max-width: 960px;  /* 800px × 1.2 */
    }

    .careers-hero-subtitle {
        max-width: 1140px;  /* 950px × 1.2 */
    }

    .services-hero-subtitle {
        max-width: 883px;  /* 736px × 1.2 */
    }

    .expertise-subtitle {
        max-width: 1080px;  /* 900px × 1.2 */
    }
}

/* 2560px Breakpoint - 1.4x scaling */
@media (min-width: 2560px) {
    /* 36px Titles → 50.4px */
    .content-text h1,
    .performance-title,
    .expertise-title,
    .services-hero-title,
    .services-heading,
    .about-hero-title,
    .mission-title,
    .vision-title,
    .story-title,
    .section-title,
    .careers-hero-title,
    .opportunities-title,
    .workspace-title,
    .people-title,
    .contact-hero-title,
    .form-intro-title,
    .cta-title,
    .career-detail-title,
    .terms-title {
        font-size: 50.4px;
    }

    /* 16px Paragraphs → 22.4px */
    .description-text p,
    .expertise-subtitle,
    .services-hero-subtitle,
    .services-intro,
    .service-content p,
    .about-hero-subtitle,
    .mission-text,
    .vision-text,
    .story-text,
    .section-description,
    .careers-hero-subtitle,
    .opportunities-description,
    .workspace-description,
    .people-description,
    .benefit-content p,
    .feature-text,
    .contact-hero-subtitle,
    .form-intro-text,
    .terms-content p,
    .terms-list li {
        font-size: 22.4px;
    }

    .opportunities-description {
        line-height: 35px;  /* Better spacing at 2560px */
    }

    /* Fix feature-text line-height */
    .feature-text {
        line-height: 30px;  /* 22.4px × 1.35 ratio for proper spacing */
    }

    /* 18px Buttons/Text → 25.2px */
    .performance-text,
    .expertise-button,
    .service-check::after,
    .service-content h3,
    .benefit-content h3,
    .cta-button,
    .careers-hero-button,
    .terms-content h2 {
        font-size: 25.2px;
    }

    /* Layout scaling - containers grow with text */
    .cta-title {
        max-width: 1580px;  /* Increased to fit text on single line at 50.4px */
    }

    .hero-subtitle {
        max-width: 720px;
    }

    .hero-logo {
        width: 700px;  /* 500 × 1.4 */
        max-width: 700px;
    }

    /* NEW: Scale spacing and layout elements */
    .benefit-item {
        gap: 21px;  /* 15px × 1.4 */
        margin-bottom: 35px;  /* 25px × 1.4 */
    }

    .people-content {
        gap: 84px;  /* 60px × 1.4 */
        max-width: 1800px;
    }

    .people-section,
    .workspace-section {
        padding: 112px 0;  /* 80px × 1.4 */
    }

    .opportunities-section {
        padding: 140px 0;  /* 100px × 1.4 */
    }

    /* Scale content widths */
    .vision-section,
    .mission-section,
    .story-section {
        max-width: 1226px;  /* 876px × 1.4 */
    }

    .services-intro {
        max-width: 1260px;  /* 900px × 1.4 */
    }

    .services-grid {
        max-width: 1400px;  /* 1000px × 1.4 */
    }

    /* Scale form elements */
    .form-input,
    .form-textarea {
        padding: 20px 25px;  /* Scale up from base */
        min-height: 67px;  /* 48px × 1.4 */
        border-radius: 6px;
    }

    .form-textarea {
        min-height: 224px;  /* 160px × 1.4 */
    }

    .form-submit {
        padding: 20px 84px;  /* Scale up button padding */
        border-radius: 70px;  /* 50px × 1.4 */
    }

    /* Scale button padding */
    .careers-hero-button {
        padding: 14px 42px;  /* 10px 30px × 1.4 */
        border-radius: 28px;  /* 20px × 1.4 */
    }

    .expertise-button {
        padding: 17px 49px;  /* 12px 35px × 1.4 */
        border-radius: 35px;  /* 25px × 1.4 */
    }

    /* Scale check icons */
    .service-check {
        width: 45px;  /* 32px × 1.4 */
        height: 45px;
    }

    .service-icon {
        width: 56px;  /* 40px × 1.4 */
        height: 56px;
    }

    /* Scale service-item padding to match icon size */
    .service-item {
        padding-top: 70px;  /* 50px × 1.4 - prevents icon overlap */
    }

    /* Scale people image */
    .people-image img {
        max-width: 700px;  /* Scale up for 2560px */
    }

    /* Scale other restrictive content areas */
    .performance-title {
        max-width: 840px;  /* 600px × 1.4 */
    }

    .about-hero-subtitle {
        max-width: 840px;  /* 600px × 1.4 */
    }

    .opportunities-description {
        max-width: 1120px;  /* 800px × 1.4 */
    }

    .careers-hero-subtitle {
        max-width: 1330px;  /* 950px × 1.4 */
    }

    .services-hero-subtitle {
        max-width: 1030px;  /* 736px × 1.4 */
    }

    .expertise-subtitle {
        max-width: 1260px;  /* 900px × 1.4 */
    }

    /* Prevent short titles from wrapping at 2560px */
    .hero-tagline {
        white-space: nowrap;  /* Keep tagline on single line */
    }
}

/* 3840px (4K) Breakpoint - 2x scaling for optimal readability */
@media (min-width: 3840px) {
    body {
        padding-top: 180px; /* 4K header height (no gap) */
    }

    /* Adjust hero height for 4K header (180px) */
    .hero {
        height: calc(100vh - 180px);
        height: calc(100svh - 180px);
        min-height: calc(600px - 180px);
    }

    /* 36px Titles → 72px */
    .content-text h1,
    .performance-title,
    .expertise-title,
    .services-hero-title,
    .services-heading,
    .about-hero-title,
    .mission-title,
    .vision-title,
    .story-title,
    .section-title,
    .careers-hero-title,
    .opportunities-title,
    .workspace-title,
    .people-title,
    .contact-hero-title,
    .form-intro-title,
    .cta-title,
    .career-detail-title,
    .terms-title {
        font-size: 72px;
    }

    /* 16px Paragraphs → 32px */
    .description-text p,
    .expertise-subtitle,
    .services-hero-subtitle,
    .services-intro,
    .service-content p,
    .about-hero-subtitle,
    .mission-text,
    .vision-text,
    .story-text,
    .section-description,
    .careers-hero-subtitle,
    .opportunities-description,
    .workspace-description,
    .people-description,
    .benefit-content p,
    .feature-text,
    .contact-hero-subtitle,
    .form-intro-text,
    .terms-content p,
    .terms-list li {
        font-size: 32px;
    }

    .opportunities-description {
        line-height: 44px;  /* Better spacing at 3840px - roughly 1.375 ratio */
    }

    .contact-hero-subtitle {
        max-width: 800px;  /* Wider subtitle for 4K displays */
    }

    /* Fix feature-text line-height for 4K */
    .feature-text {
        line-height: 44px;  /* 32px × 1.375 ratio - proper spacing at 4K */
    }

    /* 18px Buttons/Text → 36px */
    .performance-text,
    .expertise-button,
    .service-check::after,
    .service-content h3,
    .benefit-content h3,
    .cta-button,
    .careers-hero-button,
    .terms-content h2 {
        font-size: 36px;
    }

    /* 20px Navigation → 40px */
    .nav,
    .nav-link,
    .footer-nav .footer-link {
        font-size: 40px;
    }

    /* Container scaling */
    .container {
        max-width: 2400px;
    }

    .main-content .container {
        max-width: 3200px;
    }

    /* Hero sections */
    .services-hero,
    .careers-hero,
    .contact-hero,
    .about-hero {
        height: 800px;
        margin-top: 0;  /* Header now pushes down, no margin needed */
    }

    /* Clean header implementation for 4K */
    .header.solid {
        padding: 40px 0; /* 40px + 100px logo + 40px = 180px total */
    }

    .header-homepage {
        padding: 40px 0; /* Match solid header for consistency */
    }

    .header-logo,
    .logo {
        height: 100px;
    }

    /* Footer scaling */
    .footer {
        min-height: 700px;
        padding: 180px 0;
    }

    .footer-logo {
        max-height: 180px;
    }

    .footer-decoration {
        --svg-height: 350px;
    }

    .footer-circle {
        width: 1800px;
    }

    /* Features section */
    .features-cards {
        gap: 160px;
        max-width: 2600px;
    }

    .feature-icon-technology {
        width: 200px;
        height: 220px;
    }

    .feature-icon-expertise {
        width: 230px;
        height: 220px;
    }

    .feature-icon-solutions {
        width: 215px;
        height: 220px;
    }

    /* Job boxes */
    .jobs-container {
        width: 1600px;  /* Increased from 1400px for 4K displays */
    }

    .job-box {
        width: 1600px;  /* Wider for better 4K display utilization */
        height: 220px;
        padding: 60px;
    }

    .job-box-title {
        font-size: 42px;
        line-height: 50px;
    }

    .job-box-details {
        font-size: 28px;
    }

    /* CTA sections */
    .cta-title {
        max-width: 2200px;  /* Increased to fit text on single line at 72px */
        line-height: 1.3;
    }

    .home-cta {
        min-height: 800px;
        padding: 220px 0;
    }

    .services-cta,
    .about-cta,
    .careers-cta {
        min-height: 800px;
    }

    /* Forms */
    .form-control {
        font-size: 32px;
        padding: 30px 40px;
        min-height: 100px;
    }

    textarea.form-control {
        min-height: 350px;
    }

    .submit-btn {
        font-size: 36px;
        padding: 30px 80px;
        min-height: 100px;
    }

    /* Homepage hero */
    .hero-logo {
        width: 1400px;  /* Much bigger for 4K - 2.8x base */
        max-width: 1400px;
    }

    .hero-tagline {
        font-size: 80px;  /* Bigger font for 4K displays */
        max-width: 3000px;  /* Wider to accommodate larger text */
        white-space: nowrap;  /* Force single line for this short tagline */
    }

    /* Career detail pages */
    .career-section h2 {
        font-size: 48px;
    }

    .career-section p,
    .career-section ul li {
        font-size: 32px;
        line-height: 1.6;
    }

    .career-detail-meta {
        font-size: 32px;
    }

    .back-to-careers {
        font-size: 28px;
    }

    .apply-section h2 {
        font-size: 44px;
    }

    .apply-section p {
        font-size: 28px;
    }

    /* Contact page */
    .company-name {
        font-size: 40px;
    }

    .company-address,
    .contact-email,
    .contact-phone,
    .company-legal {
        font-size: 32px;
        line-height: 1.8;
    }

    /* Careers page */
    .people-description {
        font-size: 32px;
    }

    /* NEW: Scale spacing and layout for 4K */
    .benefit-item {
        gap: 30px;  /* 15px × 2 */
        margin-bottom: 50px;  /* 25px × 2 */
    }

    .people-content {
        gap: 120px;  /* 60px × 2 */
        max-width: 2400px;
        grid-template-columns: 1.5fr 1.2fr;  /* Better proportions for 4K */
    }

    .people-section,
    .workspace-section {
        padding: 160px 0;  /* 80px × 2 */
    }

    .opportunities-section {
        padding: 200px 0;  /* 100px × 2 */
    }

    /* Scale content widths for 4K */
    .vision-section,
    .mission-section,
    .story-section {
        max-width: 1752px;  /* 876px × 2 */
    }

    .services-intro {
        max-width: 1800px;  /* 900px × 2 */
    }

    .services-grid {
        max-width: 2000px;  /* 1000px × 2 */
    }

    /* Scale form elements for 4K */
    .form-input,
    .form-textarea {
        padding: 28px 36px;  /* Double the base */
        min-height: 96px;  /* 48px × 2 */
        border-radius: 8px;
        font-size: 28px;
    }

    .form-textarea {
        min-height: 320px;  /* 160px × 2 */
    }

    .form-submit {
        padding: 28px 120px;  /* Scale up button padding */
        border-radius: 100px;  /* 50px × 2 */
        font-size: 32px;
    }

    /* Scale button padding for 4K */
    .careers-hero-button {
        padding: 20px 60px;  /* 10px 30px × 2 */
        border-radius: 40px;  /* 20px × 2 */
    }

    .expertise-button {
        padding: 24px 70px;  /* 12px 35px × 2 */
        border-radius: 50px;  /* 25px × 2 */
    }

    /* Scale check icons for 4K */
    .service-check {
        width: 64px;  /* 32px × 2 */
        height: 64px;
    }

    .service-check::after {
        font-size: 36px;  /* Scale checkmark */
    }

    .service-icon {
        width: 80px;  /* 40px × 2 */
        height: 80px;
    }

    /* Scale service-item padding to match icon size */
    .service-item {
        padding-top: 100px;  /* 50px × 2 - prevents icon overlap at 4K */
    }

    /* Scale people image for 4K */
    .people-image img {
        max-width: 900px;  /* Much larger for 4K displays */
    }

    /* Scale benefit check images if they exist */
    .benefit-icon img,
    .check-circle {
        width: 48px;
        height: 48px;
    }

    /* Fix description-text for 4K displays */
    .description-text {
        max-width: 2400px;  /* Much wider for 4K */
        margin-left: 400px;  /* Reduced margin to use more space */
        margin-top: clamp(300px, 30vh, 600px);
    }

    .description-text p {
        max-width: 100%;  /* Use full width of container */
    }

    /* Scale other restrictive content areas for 4K */
    .performance-title {
        max-width: 1200px;  /* 600px × 2 */
    }

    .about-hero-subtitle {
        max-width: 1200px;  /* 600px × 2 */
    }

    .opportunities-description {
        max-width: 1600px;  /* 800px × 2 */
    }

    .careers-hero-subtitle {
        max-width: 1900px;  /* 950px × 2 */
    }

    .services-hero-subtitle {
        max-width: 1472px;  /* 736px × 2 */
    }

    .expertise-subtitle {
        max-width: 1800px;  /* 900px × 2 */
    }

    /* Prevent short titles from wrapping at 4K */
    .services-hero-title,
    .about-hero-title,
    .careers-hero-title,
    .contact-hero-title,
    .opportunities-title,
    .workspace-title,
    .people-title {
        white-space: nowrap;  /* Keep short titles on single line */
    }

    /* Allow longer titles and subtitles to wrap naturally */
    .section-title,
    .expertise-title {
        line-height: 1.2;  /* Better line spacing if they do wrap */
    }

    /* Scale decorative elements for 4K */
    .content-decoration {
        width: clamp(500px, 50vw, 1400px);  /* 2x base size for 4K */
        height: clamp(500px, 50vw, 1400px);
        top: clamp(-80px, -8vh, -160px);  /* Adjust position for larger size */
    }

    .services-arrow {
        transform: translateX(25%) translateY(-50%);  /* Keep same positioning */
    }

    .services-arrow img {
        width: 900px;  /* 2x base size (450px × 2) */
    }

    .contact-decoration {
        right: -150px;  /* Further extension for 4K */
        top: 250px;  /* Adjust vertical position */
    }

    .contact-decoration img {
        width: 600px;  /* Reduced to prevent overflow */
        max-height: 80vh;  /* Ensure it doesn't get too tall */
    }

    /* Scale office gallery for 4K */
    .office-gallery {
        max-width: 3200px;  /* Much wider for 4K displays */
        gap: 40px;  /* Larger gap between images */
        margin-top: 80px;  /* More spacing above gallery */
    }

    .office-gallery-grid {
        max-width: 2800px;  /* Scale up 2x2 grid for 4K */
        gap: 60px;  /* Larger gap for 2x2 layout */
    }

    .office-image img {
        height: 900px;  /* Much larger images for 4K displays */
    }
}