: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: hidden;
}

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

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: 0.85rem 2.25rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap;
    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;
}

.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: 90%;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    z-index: 1000;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.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: 2rem;
}

.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: 80px;
        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);
    }
}

@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);
}

/* 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);
    /* Inner Liquid Glow */
}



.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: 80px;
    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;
}


/* Mission Stripe */
.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 h2 {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
}

.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;
    margin-left: max(5%, 1.5rem);
    color: var(--color-text);
}

.slider-track {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    padding: 1rem max(5%, 1.5rem) 2rem;
    /* Side padding aligns with title */
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    scroll-snap-type: x mandatory;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slider-card {
    min-width: min(340px, 85vw);
    height: 240px;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    scroll-snap-align: start;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
    background-size: cover;
    background-position: center;
}

.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;
}

.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 */
/* Responsive Impact Section */
@media (max-width: 1024px) {
    .impact-section {
        display: none;
    }
}

/* 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;
    height: 550px;
    /* Fixed tall 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 {
        height: 400px;
    }
}

.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 similar to reference */
.footer-bg-pattern {
    position: absolute;
    bottom: -400px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    background: rgba(255, 94, 0, 0.03);
    /* Subtle orange tint */
    box-shadow: 0 0 0 100px rgba(255, 94, 0, 0.02),
        0 0 0 200px rgba(255, 94, 0, 0.01),
        0 0 0 350px rgba(255, 94, 0, 0.005);
    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;
}

/* 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;
    }
}