:root {
    /* Colors - Sophisticated Real Estate Palette */
    --bg-primary: #F4F4F4;
    /* Soft warm gray background */
    --bg-secondary: #E5E7EB;
    /* Light cool gray */
    --text-primary: #1A2833;
    /* Deep navy/charcoal for strong contrast */
    --text-secondary: #6B7280;
    /* Medium gray for secondary text */
    --accent: #B8860B;
    /* Dark Goldenrod, classic luxury feel */
    --border: #D1D5DB;
    /* Light gray borders */
    --border-strong: #374151;
    /* Stronger gray border */
    --surface: transparent;
    /* No stark white */

    /* Dynamic section backgrounds expected by new templates */
    --primary-color: #2D3748;
    /* Dark gray for cards */
    --secondary-color: #1A2833;
    /* Deep navy for distinct sections */
    --text-muted: #9CA3AF;
    /* Muted text for dark backgrounds */
    --accent-color: var(--accent);
    /* Alias for consistency */

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing */
    --container-width: 1440px;
    --container-padding: clamp(1.5rem, 5vw, 4rem);
    --section-spacing: clamp(80px, 10vh, 160px);

    /* Animation */
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --cursor-size: 20px;
}

/* Custom Cursor */
body {
    cursor: none;
    /* Hide default cursor */
}

/* Fallback for touch devices */
@media (hover: none) {
    body {
        cursor: auto;
    }

    .cursor-dot,
    .cursor-outline {
        display: none;
    }
}

.cursor-dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent);
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}

.cursor-outline {
    width: var(--cursor-size);
    height: var(--cursor-size);
    border: 1px solid var(--accent);
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9998;
    pointer-events: none;
    transition: width 0.3s, height 0.3s, background-color 0.3s;
}

/* Cursor Hover State */
body.hovering .cursor-outline {
    width: 50px;
    height: 50px;
    background-color: rgba(184, 134, 11, 0.15);
    /* Accent color with opacity */
    border-color: transparent;
}

/* Noise Overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9000;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    height: 100%;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Enhancements */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    line-height: 1.1;
    font-weight: 500;
    /* Lighter touch */
    letter-spacing: -0.03em;
}

h1 {
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 600;
}

h2 {
    font-size: clamp(2rem, 5vw, 4rem);
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

p {
    max-width: 60ch;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s var(--ease-out-expo);
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Premium Button with slide-up fill */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    border: 1px solid var(--text-primary);
    position: relative;
    overflow: hidden;
    transition: all 0.5s var(--ease-out-expo);
    z-index: 1;
    cursor: pointer;
    background: transparent;
}

.btn::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--text-primary);
    transition: transform 0.4s var(--ease-out-expo);
    z-index: -1;
}

.btn:hover::before {
    transform: translateY(-100%);
}

.btn:hover {
    color: var(--bg-primary);
    /* Invert color */
    border-color: var(--text-primary);
}

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

.btn-secondary {
    border-color: var(--border);
    color: var(--text-secondary);
}

.btn-secondary:hover {
    border-color: var(--text-primary);
    color: #fff;
}

.btn-accent {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-accent::before {
    background-color: var(--accent);
}

.btn-accent:hover {
    color: var(--bg-primary);
    border-color: var(--accent);
}


/* Subtle Grid Overlay Removed */

/* Header */
.site-header {
    padding: 2rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: padding 0.5s var(--ease-out-expo), background-color 0.5s ease;
}

.site-header.scrolled {
    padding: 1rem 0;
    background-color: rgba(249, 249, 247, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.logo {
    display: flex;
    align-items: center;
    height: 60px;
    /* Increased size */
}

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

.main-nav ul {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.main-nav a {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: var(--accent);
    transition: width 0.3s var(--ease-out-expo);
}

.main-nav a:hover::after {
    width: 100%;
}

.btn-primary-nav {
    border: 1px solid var(--text-primary);
    padding: 0.6em 1.5em;
    font-size: 0.8rem;
}

.btn-primary-nav:hover::after {
    width: 0;
    /* disable underline for button */
}

/* --- Mobile Navigation & Burger Menu --- */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2000;
}

.burger-line {
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    transition: all 0.3s var(--ease-out-expo);
    transform-origin: center;
}

.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-primary);
    z-index: 1500;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: circle(0% at top right);
    transition: clip-path 0.6s var(--ease-out-expo);
}

.mobile-nav.active {
    clip-path: circle(150% at top right);
}

.mobile-nav-inner ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.mobile-nav-inner a {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.mobile-nav.active .mobile-nav-inner a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--delay);
}

/* Burger Animation State */
body.menu-open .burger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

body.menu-open .burger-line:nth-child(2) {
    opacity: 0;
}

body.menu-open .burger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* --- Responsive Media Queries --- */
@media (max-width: 900px) {
    .main-nav {
        display: none;
    }

    .burger-menu {
        display: flex;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        padding-top: 100px;
        text-align: center;
    }

    .hero-content {
        padding-right: 0;
        margin-bottom: 3rem;
        z-index: 3;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

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

    .hero-visual {
        right: 0;
        height: 50vh;
    }

    .image-wrapper {
        height: 100%;
    }

    .section-header {
        padding-left: 0;
        text-align: center;
        margin-bottom: 3rem;
    }

    .about-stats {
        flex-direction: column;
        /* Stack stats on mobile */
        gap: 2rem;
        align-items: center;
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    .process-steps::before {
        width: 2px;
        height: 100%;
        left: 6px;
        top: 0;
    }

    .step-item {
        padding-left: 2rem;
    }

    .contact-link {
        font-size: 1.5rem;
    }
}

/* Hero Section - Overlap Layout */
.hero {
    padding-top: 200px;
    padding-bottom: var(--section-spacing);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    /* Adjust for readability */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(249, 249, 247, 0.7);
    /* Uniform overlay */
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Single column */
    gap: 0;
    align-items: center;
    position: relative;
    text-align: center;
    /* Center text */
    max-width: 900px;
    /* Limit width for better readability */
    margin: 0 auto;
}

.hero-content {
    z-index: 2;
    padding-right: 0;
    margin: 0 auto;
}

.hero-title {
    margin-bottom: 2rem;
    /* Splitting words/lines for JS animation handled in styles below */
}

/* Animated Text Masks */
.reveal-block {
    display: block;
    opacity: 0;
    transform: translateY(50px) rotateX(10deg);
    transform-origin: top center;
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal-block.visible {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

.animated-text {
    perspective: 1000px;
    /* For 3D rotation effect */
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    max-width: 600px;
    /* Increased max-width */
    margin-left: auto;
    /* Center horizontally */
    margin-right: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.4s var(--ease-out-expo);
}

.hero-subtitle.visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    /* Center buttons */
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s 0.6s var(--ease-out-expo);
}

.hero-actions.visible {
    opacity: 1;
    transform: translateY(0);
}


.hero-visual {
    position: relative;
    z-index: 1;
    right: -2rem;
    /* Pull image slightly out */
}

.image-wrapper {
    position: relative;
    overflow: hidden;
    height: 70vh;
    max-height: 800px;
}

.architectural-clip {
    width: 100%;
    height: 100%;
    will-change: transform;
}

.architectural-clip img {
    width: 100%;
    height: 120%;
    /* Taller for parallax */
    object-fit: cover;
    display: block;
    transform: translateY(-10%);
    /* Start offset */
    will-change: transform;
}

/* Services - Card Grid */
.services {
    padding: var(--section-spacing) 0;
    background-color: var(--surface);
    position: relative;
}

.section-header {
    margin-bottom: 5rem;
    /* border-left: 1px solid var(--border); */
    padding-left: 2rem;
}

.eyebrow {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--accent);
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 1rem;
}

/* Technical Divider */
.technical-divider {
    position: relative;
    height: 1px;
    background: transparent;
    border-top: 1px solid var(--border);
    /* Solid line for clarity */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.technical-divider::before,
.technical-divider::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 1px;
    height: 7px;
    background-color: var(--text-primary);
}

.technical-divider::before {
    left: 0;
}

.technical-divider::after {
    right: 0;
}

.divider-label {
    background-color: var(--bg-primary);
    /* Keeps label readable */
    padding: 0 1.5rem;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    position: relative;
    z-index: 2;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    /* Gap introduced to show background grid between cards */
    padding: 0 1rem;
    border: none;
    /* Removed outer border */
}

.service-card {
    padding: 3.5rem 2.5rem;
    border: 1px solid var(--border);
    /* Solid border for card definition */
    background-color: rgba(255, 255, 255, 0.8);
    /* Semi-transparent white */
    backdrop-filter: blur(5px);
    /* Blurs the grid behind for readability */
    transition: all 0.4s ease;
    cursor: default;
    position: relative;
}

.service-card:hover {
    background-color: #fff;
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Lift effect */
}

/* Hover effect moved to main card */



.service-num {
    display: block;
    font-family: var(--font-heading);
    color: var(--accent);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.service-card h3 {
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
}

.service-card p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
}

/* Work / Portfolio */
.work {
    padding: var(--section-spacing) 0;
}

/* Swiper Customization */
/* Swiper Customization */
.work-slider {
    width: 100%;
    padding-bottom: 4rem;
    position: relative;
    overflow: hidden;
}

.swiper-slide {
    width: 100%;
    height: auto;
}

.work-item {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}

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

    .work-item.reverse {
        direction: ltr;
        grid-template-columns: 1fr;
    }

    .work-image-wrapper {
        height: 400px;
    }
}

/* Custom Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
    color: var(--text-primary);
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    z-index: 10;
}

.swiper-button-prev {
    left: 20px;
}

.swiper-button-next {
    right: 20px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.2rem;
    font-weight: bold;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--text-primary);
    color: #fff;
}

/* Animated Real Estate Abstracts */
.page-abstract {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}

.abstract-building {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.5;
    opacity: 0.3;
    transition: all 0.5s ease;
}

.abstract-building.primary {
    stroke: var(--accent);
    opacity: 0.8;
    stroke-width: 2;
}

@keyframes rise {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 0.3;
    }
}

@keyframes pulse-fill {

    0%,
    100% {
        fill: transparent;
    }

    50% {
        fill: rgba(184, 134, 11, 0.1);
    }
}

.abstract-svg rect,
.abstract-svg path,
.abstract-svg polygon,
.abstract-svg circle {
    animation: rise 2s var(--ease-out-expo) forwards;
}

.abstract-svg .primary {
    animation: rise 2s var(--ease-out-expo) forwards, pulse-fill 6s ease-in-out infinite;
    animation-delay: 0.3s, 2s;
}

/* Specific positionings */
.hero-abstract {
    right: 5%;
    bottom: 15%;
    width: 400px;
    height: 200px;
}

.about-abstract {
    left: -5%;
    top: 20%;
    width: 300px;
    height: 300px;
}

.services-abstract {
    right: 0;
    top: 10%;
    width: 350px;
    height: 250px;
}

@keyframes pulse-fill {

    0%,
    100% {
        fill: transparent;
    }

    50% {
        fill: rgba(184, 134, 11, 0.1);
    }
}

.abstract-svg rect,
.abstract-svg path,
.abstract-svg polygon,
.abstract-svg circle {
    animation: rise 2s var(--ease-out-expo) forwards;
}

.abstract-svg .primary {
    animation: rise 2s var(--ease-out-expo) forwards, pulse-fill 6s ease-in-out infinite;
    animation-delay: 0.3s, 2s;
}

/* Specific positionings */
.hero-abstract {
    right: 5%;
    bottom: 15%;
    width: 400px;
    height: 200px;
}

.about-abstract {
    left: -5%;
    top: 20%;
    width: 300px;
    height: 300px;
}

.services-abstract {
    right: 0;
    top: 10%;
    width: 350px;
    height: 250px;
}

.work-abstract {
    left: 5%;
    bottom: 10%;
    width: 250px;
    height: 150px;
}

/* Image Reveal Animation */
.image-reveal {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.image-reveal.visible,
.visible .image-reveal {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Work Card Scale on Hover */
.work-card:hover img {
    transform: scale(1.05) !important;
}

.swiper-pagination-bullet {
    background: var(--text-secondary);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: var(--accent);
    opacity: 1;
}

.work-item.reverse .work-info {
    direction: ltr;
}

.work-image-wrapper {
    width: 100%;
    height: 60vh;
    min-height: 500px;
    overflow: hidden;
    position: relative;
}

.work-image-wrapper img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    transform: translateY(-10%);
}

.work-info h3 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.work-info p {
    color: var(--accent);
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
}

/* Contact */
.contact {
    padding: var(--section-spacing) 0;
    background-color: var(--text-primary);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contact-content {
    position: relative;
    z-index: 2;
}

.contact-content h2 {
    color: #fff;
    font-size: clamp(3rem, 6vw, 5rem);
    margin-bottom: 2rem;
}

.contact-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
    margin-bottom: 4rem;
    margin: auto;
}

.contact-link {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    padding-bottom: 0.5rem;
    position: relative;
    display: inline-block;
}

.contact-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    transition: height 0.3s var(--ease-out-expo), background-color 0.3s ease;
}

.contact-link:hover::after {
    height: 5px;
    background-color: var(--accent);
}

/* Footer */
.site-footer {
    padding: 3rem 0;
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.site-footer p {
    text-align: center;
    margin: auto;
}

/* About Section - Reordered */
.about {
    padding: var(--section-spacing) 0;
    /* Add standard section spacing */
    background-color: var(--bg-primary);
    position: relative;
    text-align: center;
    /* Center text by default */
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Single column */
    gap: 4rem;
    align-items: center;
    position: relative;
    max-width: 800px;
    /* Constrain width */
    margin: 0 auto;
    /* Center block */
}

.sketch-decoration {
    position: absolute;
    top: -50px;
    right: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

.draw-path {
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease-out;
}

.draw-path.drawing {
    stroke-dashoffset: 0;
}

@media (max-width: 900px) {
    .sketch-decoration {
        top: 0;
        right: -50px;
        transform: scale(0.7);
    }
}

/* Services Sketch Position - Removed */
.services .container {
    position: relative;
}

/* Contact Sketch Position */
.contact .container {
    position: relative;
}

.sketch-compass {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.2;
    z-index: 1;
    /* Behind text */
    pointer-events: none;
}

.draw-path-slow {
    animation: dash 5s ease-in-out infinite alternate;
}

.about-image {
    position: relative;
    height: 100%;
    min-height: 500px;
    overflow: hidden;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.5s var(--ease-out-expo);
}

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

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-image {
        min-height: 300px;
        order: -1;
        /* Image first on mobile */
    }
}

.about-text h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.about-text p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    line-height: 1.8;
    margin-left: auto;
    margin-right: auto;
}

.about-stats {
    display: flex;
    gap: 4rem;
    justify-content: center;
    /* Center stats */
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    display: inline-block;
    min-width: 1ch;
    /* prevents hopping */
}

.stat-symbol {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--accent);
    vertical-align: super;
}

.stat-label {
    margin-top: 0.5rem;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}


/* Process Section */
.process {
    padding: var(--section-spacing) 0;
    background-color: var(--bg-primary);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem;
    position: relative;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border);
    z-index: 0;
}

.step-item {
    position: relative;
    padding-top: 2rem;
}

.step-marker {
    width: 12px;
    height: 12px;
    background-color: var(--bg-primary);
    border: 2px solid var(--accent);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.step-item h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.step-item p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Blog Section */
.blog {
    padding: var(--section-spacing) 0;
    background-color: var(--surface);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.blog-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    cursor: pointer;
}

.blog-image-wrapper {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    background-color: var(--bg-primary);
}

.blog-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}

.blog-card:hover .blog-image-wrapper img {
    transform: scale(1.05);
}

.blog-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.btn-text {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    display: inline-block;
    align-self: flex-start;
}

.btn-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-strong);
    transition: width 0.3s var(--ease-out-expo);
}

.blog-card:hover .btn-text::after {
    width: 0;
    /* Optional: reverse logic or change color */
    background-color: var(--accent);
    width: 100%;
}

.section-actions {
    margin-top: 4rem;
    text-align: center;
}

/* Updated Responsive Rules */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .process-steps {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .process-steps::before {
        width: 1px;
        height: 100%;
        left: 5px;
        top: 0;
    }

    .step-item {
        padding-top: 0;
        padding-left: 2rem;
        padding-bottom: 3rem;
        margin-left: 0.25rem;
        /* align with line */
    }

    .step-marker {
        top: 0.5rem;
    }


    .hero-grid {
        grid-template-columns: 1fr;
        padding-top: 5rem;
    }

    .hero-content {
        padding-right: 0;
        order: 2;
        margin-top: -3rem;
    }

    .hero-visual {
        right: 0;
        order: 1;
        margin-bottom: 2rem;
    }

    .image-wrapper {
        height: 50vh;
    }

    .work-item,
    .work-item.reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        /* Reset direction */
        gap: 2rem;
    }

    .main-nav ul {
        gap: 1.5rem;
    }
}

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

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

    .main-nav {
        display: none;
        /* Simplification for mobile view in this concept */
    }
}

/* Active Animation State for Process Steps */
.step-item.active .step-marker {
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(197, 160, 101, 0.2);
    transform: scale(1) !important;
}

.step-item.active h4 {
    color: var(--accent);
    transition: color 0.3s ease;
}

/* --- Premium Interactions --- */

/* 1. 3D Tilt */
.service-card,
.blog-card,
.work-item {
    transition: transform 0.1s;
    /* Fast transition for smooth mouse following */
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Building Reveal Effect */
.service-card.visible,
.blog-card.visible {
    animation: buildingRise 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes buildingRise {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0.95);
    }

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

/* 2. Text Scramble */
/* 2. Premium Text Reveal (Slide Up) */
.premium-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: opacity, transform;
}

.premium-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}




/* --- Animated Background Objects --- */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99;
    /* On top of everything */
    /* Sketch architectural grid using gradients */
    background-image:
        linear-gradient(var(--accent) 1px, transparent 1px),
        linear-gradient(90deg, var(--accent) 1px, transparent 1px);
    background-size: 60px 60px;
    /* Slightly wider for better breathability */
    opacity: 0.08;
    /* Subtle watermark */
    mix-blend-mode: normal;
    /* Normal ensures visibility on all backgrounds */
}

/* Ensure noise is visible */
.noise-overlay {
    opacity: 0.05;
    /* Slightly increased from 0.03 */
    z-index: 9999;
    /* Top overlay */
}

/* Add a subtle "breathing" or "scanning" animation to the grid */
.animated-background::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(197, 160, 101, 0.03) 0%, transparent 60%);
    animation: pulseGrid 15s infinite ease-in-out;
    transform-origin: center;
}

@keyframes pulseGrid {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Floating Shapes */
.floating-shape {
    position: absolute;
    background: rgba(197, 160, 101, 0.1);
    border: 1px solid rgba(197, 160, 101, 0.2);
    box-shadow: 0 0 20px rgba(197, 160, 101, 0.05);
}

.cube-1 {
    width: 60px;
    height: 60px;
    top: 20%;
    left: 10%;
    animation: floatRotate 20s infinite linear;
}

.cube-2 {
    width: 100px;
    height: 100px;
    bottom: 15%;
    right: 5%;
    animation: floatRotate 25s infinite linear reverse;
}

@keyframes floatRotate {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-40px) rotate(180deg);
    }

    100% {
        transform: translateY(0) rotate(360deg);
    }
}

/* Rising Lines */
.rising-line {
    position: absolute;
    bottom: -100px;
    width: 1px;
    background: linear-gradient(to top, transparent, var(--accent), transparent);
    opacity: 0.3;
}

.line-1 {
    height: 300px;
    left: 25%;
    animation: riseUp 10s infinite linear;
}

.line-2 {
    height: 200px;
    left: 50%;
    animation: riseUp 15s infinite linear 2s;
}

.line-3 {
    height: 400px;
    left: 80%;
    animation: riseUp 8s infinite linear 5s;
}

@keyframes riseUp {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 0.5;
    }

    80% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(-120vh);
        opacity: 0;
    }
}

/* Infinite Marquee */
.marquee-container {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    overflow: hidden;
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.1);
    /* Subtle backdrop */
    backdrop-filter: blur(5px);
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}



.marquee-content {
    display: flex;
    gap: 0;
    /* JS will handle spacing via non-breaking spaces or we add padding to spans */
    width: fit-content;
    will-change: transform;
    /* Animation handled by JS or CSS if we start with duplicates.
       Since we use JS to clone, we can rely on CSS animation but need to ensure width is handled.
       Actually, standard "seamless" loop usually involves 2 sets of items.
       We will clone 4 sets to be safe and animate. */
    animation: marqueeScroll 20s linear infinite;
}

.marquee-content span {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--text-primary);
    text-transform: uppercase;
    padding-right: 2rem;
    /* Spacing between items */
    white-space: nowrap;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Assumes we have 2 copies of the full content set */
    }
}