:root {
    /* Colors */
    --color-primary: #FF5E00;
    /* Valyze Orange */
    --color-primary-dark: #CC4B00;
    --color-primary-light: #FFF0EB;
    --color-accent: #FFF5F2;
    /* Very light orange tint */
    --color-text: #1A274B;
    /* Space Cadet */
    --color-text-light: #4A5568;
    --color-white: #FFFFFF;
    --color-bg: #FAFAFA;

    /* Typography */
    --font-main: 'Plus Jakarta Sans', sans-serif;
    --font-heading: 'Albert Sans', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: clamp(2rem, 5vw, 4rem);
    --spacing-xl: clamp(3rem, 8vw, 6rem);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-card: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

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

html {
    overflow-x: clip;
}

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
    overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* Utilities */
/* --- Consolidated Button System --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2vw, 0.85rem) clamp(1.5rem, 4vw, 2.25rem);
    min-height: 48px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    white-space: normal;
    /* Allow wrapping for long translations */
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    z-index: 2;
    border: none;
    line-height: 1.2;
}

.btn:hover {
    transform: translateY(-3px) scale(1.02);
}

.btn:active {
    transform: translateY(-1px) scale(1);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 14px 0 rgba(255, 94, 0, 0.39);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    box-shadow: 0 8px 25px rgba(255, 94, 0, 0.4);
}

.btn-dark {
    background-color: #111827;
    color: var(--color-white);
}

.btn-dark:hover {
    background-color: #000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn-white {
    background: #ffffff;
    color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.btn-white:hover {
    background: #f8f9fa;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.btn-outline-light {
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
}

.btn-outline-light:hover {
    background: #ffffff;
    color: var(--color-primary);
}

.btn-outline-dark {
    background: transparent;
    border: 2px solid var(--color-text);
    color: var(--color-text);
}

.btn-outline-dark:hover {
    background: var(--color-text);
    color: #ffffff;
}

.btn-primary-solid {
    background: linear-gradient(135deg, var(--color-primary) 0%, #ff8a3d 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(255, 94, 0, 0.3);
}

.btn-primary-solid:hover {
    background: linear-gradient(135deg, #ff8a3d 0%, var(--color-primary) 100%);
    box-shadow: 0 8px 25px rgba(255, 94, 0, 0.4);
}

.icon-btn {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    /* Prevents it from being squeezed into an egg shape */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    color: #000;
    transition: all 0.2s ease;
}

.hero-card .icon-btn {
    border-color: #ffffff;
    color: #ffffff;
}

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

.hero-card .icon-btn:hover {
    background-color: #ffffff;
    color: var(--color-primary);
}

.text-highlight {
    color: var(--color-primary);
}

/* Navigation */
/* Floating Animation for Blurred Cards */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.card-blurred img {
    animation: float 6s ease-in-out infinite;
}

/* Stagger animation for organic feel */
.card-blurred:nth-child(odd) img {
    animation-duration: 7s;
}

.card-blurred:nth-child(2n) img {
    animation-delay: 1s;
}

.card-blurred:nth-child(3n) img {
    animation-delay: 2s;
    animation-duration: 8s;
}

.navbar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-full);
    z-index: 1000;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

@media (max-width: 480px) {
    .navbar {
        width: 96%;
        padding: 0.6rem 1rem;
        top: 10px;
    }
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    height: 65px;
    /* Adjustable based on preference */
    width: auto;
    object-fit: contain;
}

.brand-logo-mobile {
    display: none;
    height: 40px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 1rem;
    /* Reduced gap for wider text */
}

.nav-links a {
    font-weight: 500;
    color: var(--color-text);
    font-size: 0.95rem;
}

.nav-links a:hover {
    color: var(--color-primary);
}

.lang-selector {
    display: flex;
    background: rgba(0, 0, 0, 0.05);
    padding: 3px;
    border-radius: var(--radius-full);
    margin-left: 1rem;
}

.lang-btn {
    padding: 0.3rem 0.8rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
    color: var(--color-text);
    opacity: 0.6;
}

.lang-btn.active {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 1;
    color: var(--color-primary);
}

.lang-btn:hover:not(.active) {
    opacity: 0.9;
}

@media (max-width: 1100px) {
    .lang-selector {
        margin-left: 0.5rem;
    }
}

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

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text);
}

@media (max-width: 768px) {

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        margin-top: 10px;
        left: 0;
        width: 100%;
        background: white;
        padding: 2rem;
        box-shadow: var(--shadow-lg);
        border-radius: var(--radius-lg);
        gap: 1.5rem;
        text-align: center;
        border: 1px solid #eee;
        animation: slideDown 0.3s ease;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links,
    .sm-hidden {
        display: none;
    }

    .brand-logo-mobile {
        display: block;
    }

    .mobile-menu-btn {
        display: flex;
    }

    /* Hamburger Animation */
    .mobile-menu-btn span {
        transition: 0.3s;
    }

    .mobile-menu-btn.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-btn.open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }

    .container {
        padding: 0 1.25rem;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 100px;
    /* Space for navbar */
    overflow: hidden;
    background-color: var(--color-accent);
}

@media (max-width: 768px) {
    .hero {
        padding-top: 120px;
        min-height: auto;
        padding-bottom: 3rem;
    }
}

/* Simulated background image until we have one */
/* Hero background with image */
.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Neutral dark overlay to let image colors show while maintaining text contrast */
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url('assets/images/hero-bg.jpg');
    background-size: cover;
    background-position: center 20%;
    z-index: 0;
}

/* Add a subtle curve at the bottom similar to reference if needed, 
   but for now we focus on the floating card layout */

.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
}

.hero-text h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 2rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-text p {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 500px;
    margin-bottom: 2.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-card {
    /* Liquid Glass Base */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);

    /* Layout */
    width: 100%;
    max-width: 352px;
    min-height: 316px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;

    /* Shape */
    border-radius: 40px;

    /* Gloss & Borders */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 8px 32px 0 rgba(31, 38, 135, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

@media (max-width: 480px) {
    .hero-card {
        padding: 1.5rem;
        border-radius: 24px;
        min-height: auto;
    }

    .hero-card h2 {
        font-size: 1.75rem;
    }
}



.text-highlight {
    color: var(--color-primary);
}

/* Decorative Background Pattern (Arches) */
.hero-card::before {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: transparent;
    border: 40px solid var(--color-accent);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.hero-card::after {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: transparent;
    border: 40px solid var(--color-primary-light);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.hero-card h2,
.hero-card p,
.card-actions {
    position: relative;
    z-index: 1;
}

.hero-card h2 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-card p {
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.card-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Button Styles for Hero Card handled by global .btn classes */
.btn-dark:hover {
    transform: translateY(-2px);
    background-color: #f0f0f0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* icon-btn handled by global consolidated styles */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        padding-bottom: 4rem;
        gap: 2rem;
    }

    .hero-text h1 {
        font-size: 3rem;
    }

    .hero-card {
        transform: none;
        max-width: 500px;
    }
}

/* Mobile Menu Styles */
.nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    margin-top: 10px;
    left: 0;
    width: 100%;
    background: white;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    gap: 1.5rem;
    text-align: center;
    border: 1px solid #eee;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.nav-links.active a {
    font-size: 1.2rem;
    display: block;
    padding: 0.5rem;
}


/* Custom Slider Progress Bar */
.slider-progress-container {
    width: 100%;
    max-width: 200px;
    /* Short line centered */
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin: 1rem auto;
    position: relative;
    overflow: hidden;
    display: none;
    /* Hidden on desktop */
}

.slider-progress-bar {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 4px;
    width: 0%;
    /* Set by JS */
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width: 1024px) {
    .slider-progress-container {
        display: block;
    }
}

.mission-stripe {
    padding: var(--spacing-xl) 1.5rem;
}

.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 900px) {
    .mission-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .mission-headline {
        text-align: center;
    }

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

    .mission-actions {
        justify-content: center;
    }
}

.mission-headline {
    /* Ensure text never touches the edge */
    padding: 0 1rem;
}

.mission-headline h2 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    /* Respond to screen size */
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.mission-quote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--color-text-light);
    border-left: 3px solid var(--color-primary);
    padding-left: 1rem;
}

.mission-text p {
    font-size: 1.15rem;
    margin-bottom: 2rem;
    color: var(--color-text-light);
}

.mission-actions {
    display: flex;
    gap: 1rem;
}

/* Consolidated mission actions handled by .btn system */

/* Services Slider Section */
.services-slider-section {
    padding: var(--spacing-lg) 0;
    overflow: hidden;
    background: #fff;
}

.slider-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    text-align: center;
    margin-left: 0;
    color: var(--color-text);
}

.slider-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 1rem 1rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
    /* No scroll on desktop */
    overflow: visible;
}

/* Hide scrollbar by default (Desktop) */
.slider-track::-webkit-scrollbar {
    display: none;
}

@media (max-width: 1024px) {
    .slider-track {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 1rem 1.5rem 2rem;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        /* Reset grid properties */
        grid-template-columns: none;
    }

    /* Hide Scrollbar on Mobile (using custom indicator) */
    .slider-track::-webkit-scrollbar {
        display: none;
    }
}

.slider-card {
    min-width: 0;
    /* Allow shrinking in grid */
    width: 100%;
    height: 240px;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    /* flex-shrink only matters in flex container (mobile) */
    flex-shrink: 0;
    scroll-snap-align: start;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
    background-size: cover;
    background-position: center;
}

@media (max-width: 1024px) {
    .slider-card {
        min-width: min(340px, 85vw);
    }
}

.slider-card:hover {
    transform: translateY(-5px);
}

.slider-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.slider-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.slider-icon {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.slider-icon svg {
    width: 18px;
    height: 18px;
}

.slider-card-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slider-card p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.impact-section {
    padding: var(--spacing-xl) 0;
    background: linear-gradient(to bottom, #fff, var(--color-accent));
    overflow: hidden;
    min-height: 900px;
    /* Ensure enough height for the spread */
    display: flex;
    align-items: center;
}

.impact-container {
    position: relative;
    width: 100%;
    height: 800px;
    /* explicit height area for absolute positioning context */
}

/* Center Content */
.impact-center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 600px;
    z-index: 20;
    width: 100%;
    padding: 2rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
    /* Subtle backdrop to read text */
}

.impact-center-content h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.impact-center-content p {
    font-size: 1.15rem;
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

/* Cards Wrapper - Just a passthrough for absolute positioning relative to container */
.impact-cards-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through empty spaces */
}

.scatter-card {
    position: absolute;
    background: white;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease;
    pointer-events: auto;
    /* Re-enable clicks on cards */
}

.scatter-card:hover {
    z-index: 25;
    transform: scale(1.05);
}

.scatter-card img {
    border-radius: var(--radius-md);
    object-fit: cover;
}

.scatter-caption {
    margin-top: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}

/* Main Cards Positions (Clear ones) */
/* Top Right */
.card-1 {
    top: 5%;
    right: 5%;
    width: 280px;
    transform: rotate(3deg);
}

/* Bottom Right */
.card-2 {
    bottom: 10%;
    right: 5%;
    width: 300px;
    transform: rotate(-2deg);
}

/* Bottom Left */
.card-3 {
    bottom: 5%;
    left: 5%;
    width: 290px;
    transform: rotate(4deg);
}

/* Ensure main cards are on top */
.card-1,
.card-2,
.card-3 {
    z-index: 10;
}

/* Blurred Background Cards */
.card-blurred {
    opacity: 0.6;
    filter: blur(3px);
    /* Slightly less blur for visibility */
    z-index: 1;
    padding: 0.5rem;
}

.card-blurred img {
    height: 140px;
    width: 180px;
}

/* Radial Positions for blurred cards - Wide Spread */

/* Top Center-Left */
.card-bg-1 {
    top: 0%;
    left: 20%;
    transform: rotate(-5deg);
}

/* Middle Right (Deep) */
.card-bg-2 {
    top: 40%;
    right: -2%;
    transform: rotate(10deg);
}

/* Bottom Center */
.card-bg-3 {
    bottom: 2%;
    left: 45%;
    transform: rotate(-3deg);
}

/* Top Left */
.card-bg-4 {
    top: 5%;
    left: 2%;
    transform: rotate(6deg);
}

/* Middle Left */
.card-bg-5 {
    top: 45%;
    left: -2%;
    transform: rotate(-8deg);
}

/* Top Center-Right */
.card-bg-6 {
    top: -2%;
    right: 30%;
    transform: rotate(4deg);
}

/* Responsive Impact Section */
@media (max-width: 1024px) {
    .impact-container {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 4rem;
    }

    .impact-center-content {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin-bottom: 3rem;
        padding: 2.5rem 1.5rem;
        background: white;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .impact-cards-wrapper {
        position: relative;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0;
        width: 100%;
        pointer-events: auto;
    }

    .scatter-card {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        opacity: 1 !important;
        filter: none !important;
        padding: 1rem;
        background: white;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }

    .scatter-card img {
        width: 100%;
        min-height: 250px;
        /* Enforce minimum height */
        height: auto;
        object-fit: cover;
        border-radius: var(--radius-md);
    }

    .card-blurred {
        display: none;
        /* Hide background decorative cards on mobile to save space */
    }

    .impact-center-content h2 {
        font-size: 2rem;
        color: var(--color-text);
    }
}

@media (max-width: 600px) {
    .impact-cards-wrapper {
        grid-template-columns: 1fr;
    }

    .impact-center-content h2 {
        font-size: 1.8rem;
    }
}

/* Services Section */
.services-section {
    padding: var(--spacing-xl) 1.5rem;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.section-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
}

/* Services Section Typography */
.section-title-huge {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.text-italic-accent {
    font-style: italic;
    color: var(--color-primary);
    font-family: var(--font-heading);
}

.section-desc-light {
    font-size: 1.125rem;
    color: var(--color-text-light);
    font-weight: 300;
    max-width: 48rem;
    margin: 0 auto 5rem;
    line-height: 1.7;
}

/* Removed media query as clamp handles scaling */

.services-masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.masonry-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Tall Cards */
.service-card-tall {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 550px;
    /* Allow growth */
    height: auto;
    /* Fixed tall height replaced by flexible min-height */
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    align-items: flex-end;
}

/* Liquid Glass Mixin Styles (Applied to multiple elements) */
.impact-center-content,
.card-gradient-overlay,
.service-card-white {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 8px 32px 0 rgba(31, 38, 135, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    /* Consistent rounding */
    padding: 2rem;
}

.impact-center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 600px;
    width: 90%;
    z-index: 20;
}

/* Tall Cards Overlay - Positioned Glass Box */
.card-gradient-overlay {
    width: 94%;
    /* Slightly wider to maximize horizontal space */
    margin: 0 auto 1.25rem;
    /* Float at bottom */
    text-align: left;
    padding: 1.5rem 1rem;
    /* Reduced horizontal padding inside the overlay */
}

/* Ensure Tall Card content stays white */
/* Ensure Tall Card content stays white */
.card-gradient-overlay h3 {
    margin-bottom: 0.5rem;
}

.card-gradient-overlay h3,
.card-gradient-overlay p {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.card-gradient-overlay p {
    margin-bottom: 3rem;
    /* Increased spacing */
}

/* White Card becomes Glass Card */
.service-card-white {
    /* Existing layout props */
    text-align: center;
    /* Ensure text is readable on glass */
    /* If background ends up light, we might need dark text. 
       Assuming image or dark context based on user request "within their cards". 
       For now, let's keep text dark as per original if it's on white page */
    color: var(--color-text);
}

.service-card-white h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.service-card-white p {
    color: var(--color-text);
    /* Darker for readability on light glass */
    margin-bottom: 3rem;
    /* Increased spacing */
    font-size: 1rem;
}

.card-btns-center {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.card-btns-center .btn {
    padding: 0.75rem 1.25rem;
    /* Compact padding to fit side-by-side */
    font-size: 0.9rem;
}

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

@media (max-width: 768px) {
    .services-masonry-grid {
        grid-template-columns: 1fr;
    }

    .service-card-tall {
        min-height: 450px;
        height: auto;
    }

    .service-card-white {
        margin-bottom: 1.5rem;
    }
}

.card-btns {
    display: flex;
    gap: 0.5rem;
}

.card-btns .btn {
    padding: 0.75rem 1.25rem;
    /* Compact padding to fit side-by-side */
    font-size: 0.9rem;
}

/* Redundant button definitions removed, handled by consolidated system */

/* CTA Bar */
.cta-bar {
    margin: var(--spacing-xl) auto;
}

.cta-content {
    background: linear-gradient(135deg, var(--color-primary), #CC4B00);
    border-radius: var(--radius-lg);
    /* Or more organic shape if desired */
    padding: 4rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    position: relative;
    overflow: hidden;
}

/* Decorative circles */
.cta-content::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.cta-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-text p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 600px;
}

@media (max-width: 900px) {
    .cta-content {
        flex-direction: column;
        text-align: center;
        padding: 3rem 1.5rem;
    }

    .cta-text p {
        margin: 0 auto;
    }
}


/* Footer styles proceed below */



/* Footer */
/* Footer */
.footer {
    position: relative;
    background-color: white;
    background: white;
    color: var(--color-text);
    padding: 6rem 1.5rem 3rem;
    overflow: hidden;
    margin-top: 4rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Background Pattern modified for better rendering performance */
.footer-bg-pattern {
    position: absolute;
    bottom: -400px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 94, 0, 0.08) 0%, rgba(255, 94, 0, 0.03) 40%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.footer-content-wrapper {
    position: relative;
    z-index: 1;
}

.footer-tagline {
    max-width: 800px;
    margin-bottom: 5rem;
}

.footer-tagline h2 {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.3;
    opacity: 1;
    color: var(--color-text);
}

.highlight-white {
    font-weight: 700;
    color: var(--color-primary);
}


.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-col h3.footer-brand {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.footer-desc {
    opacity: 0.8;
    line-height: 1.6;
    max-width: 300px;
}

.footer-col h4 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    opacity: 1;
    color: var(--color-text);
    font-weight: 700;
}

.footer-links li,
.footer-contact-list li {
    margin-bottom: 0.75rem;
}

.footer-links a,
.footer-contact-list li {
    color: var(--color-text-light);
    opacity: 1;
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-links a:hover,
.footer-contact-list li:hover {
    color: var(--color-primary);
}

.footer-cta-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--color-primary);
    font-weight: 600;
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: 2px;
}

/* Mobile Visibility Utilities */
.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }

    .mobile-cta-container {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
        padding-bottom: 2rem;
        width: 100%;
        order: 3;
    }

    /* Enforce Strict Vertical Stacking */
    .impact-container {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* Text Block - Top */
    .impact-center-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 1rem;
        margin-bottom: 3rem !important;
        /* Force space below text */
        text-align: center;
        order: 1;
        /* First */
        z-index: 20;
    }

    /* Cards Wrapper - Middle */
    .impact-cards-wrapper {
        position: relative !important;
        height: auto !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        pointer-events: auto !important;
        margin-top: 0 !important;
        order: 2;
        /* Second */
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}

/* Contact Section */
.contact-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
    z-index: 10;
}

.contact-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.contact-header {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .btn {
        width: 100%;
    }

    .footer-links li {
        margin-bottom: 1.25rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.5);
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1);
}

.btn-primary-solid {
    background: linear-gradient(135deg, var(--color-primary) 0%, #ff8a3d 100%);
    color: white;
    border: none;
    padding: 1.25rem 2rem;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.btn-primary-solid:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.4);
    background: linear-gradient(135deg, #ff8a3d 0%, var(--color-primary) 100%);
}

.btn-primary-solid:active {
    transform: translateY(-1px);
}

.footer-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.footer-bottom-row {
    text-align: center;
    opacity: 0.5;
    font-size: 0.9rem;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .footer-bg-pattern {
        width: 600px;
        height: 600px;
        bottom: -200px;
    }

    .footer-tagline h2 {
        font-size: 1.8rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Article Page Styles (Migrated from inline) */
.page-content {
    padding-top: 150px;
    padding-bottom: 5rem;
    min-height: 80vh;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.article-hero {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 4rem;
    padding: 0 1.5rem;
}

.article-hero h1 {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
}

.article-hero .lead {
    font-size: 1.25rem;
    opacity: 0.8;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
    color: var(--color-text);
}

.article-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 6rem;
}

.article-text p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text);
}

.article-text h2 {
    font-size: 1.8rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.article-image-wrapper {
    position: relative;
}

.article-image {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    aspect-ratio: 4/5;
    object-fit: cover;
    position: sticky;
    top: 120px;
}

.glass-highlight {
    background: rgba(var(--color-primary-rgb), 0.05);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border-left: 4px solid var(--color-primary);
    margin: 2rem 0;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.feature-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

@media (max-width: 900px) {
    .article-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .article-image {
        position: relative;
        top: 0;
        order: -1;
        max-height: 400px;
    }
}