:root {
    --primary-red: #A81C1C;
    --dark-grey: #2D2D2D;
    --text-color: #333333;
    --light-grey: #F9F9F9;
    --header-line: #A81C1C; /* The fine line color */
    --white: #FFFFFF;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --header-height: 141px;
}

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

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.container.narrow {
    max-width: 1100px; /* Slightly wider than 900px to match screen proportions */
}

/* Header Styles */
.main-header {
    height: var(--header-height);
    background-color: var(--white);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: var(--transition);
}

.main-header::after {
    content: '';
    position: absolute;
    bottom: 9px; /* Scaled white space under the line */
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--header-line);
}

/* Hamburger Menu Styles */
.hamburger {
    display: none;
    cursor: pointer;
    z-index: 1001;
    padding: 10px;
}

.bar {
    display: block;
    width: 28px;
    height: 1px;
    margin: 6px auto;
    transition: all 0.3s ease-in-out;
    background-color: var(--primary-red);
}





.header-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 15px; /* Extremely close to the line (6px gap + 9px under line) */
}

.logo img {
    height: 92px; /* 15% increase */
    width: auto;
    display: block;
    transition: var(--transition);
}



.nav-list {
    display: flex;
    list-style: none;
    gap: 80px; /* More spacing between links */
}

.nav-link {
    text-decoration: none;
    color: #000000;
    font-size: 1.1rem; /* 40% smaller than previous 1.7rem */
    font-weight: 200;
    text-transform: none;
    letter-spacing: 0.8px;
    transition: var(--transition);
    position: relative;
    padding: 2px 0;
}

.nav-link.active {
    color: var(--primary-red);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background-color: var(--primary-red);
    transition: var(--transition);
}

.nav-link.active::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--primary-red);
}

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

.hero-section {
    width: 100%;
    height: 90vh;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

main {
    padding-top: var(--header-height); /* Uses padding instead of margin to prevent collapse and ensure correct offset */
}

.hero-image-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
    transition: transform 10s ease;
}



/* Intro Section */
.intro-section {
    padding: 100px 0;
    text-align: center;
    background-color: var(--white);
}

.intro-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 2.5rem;
    color: var(--primary-red);
    line-height: 1.4;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s forwards 0.5s;
}

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

/* Mobile Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .nav-list {
        display: none; /* Add hamburger menu logic later if needed */
    }

    .intro-title {
        font-size: 1.8rem;
    }

    .hero-image-container {
        min-height: 300px;
    }
}

/* Consulting Section */
.consulting-section {
    padding: 120px 0;
    background-color: var(--white);
}

.first-text-italic {
    font-family: 'Bodoni Moda', serif;
    font-size: 55px;
    font-style: italic;
    color: #8B0000;
    margin-bottom: 160px; /* Increased 4x from 40px */
    line-height: 1.1;
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.consulting-grid {
    display: flex;
    gap: 40px; /* Precise gap from screen */
    align-items: flex-start;
}

.consulting-left {
    flex: 1.5; /* Increased to give more space to text */
}

.consulting-title-italic {
    font-family: 'Bodoni Moda', serif;
    font-size: 70px;
    font-style: italic;
    color: #2F2E2E;
    line-height: 1;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: 400;
}

.consulting-description {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #2F2E2E;
    line-height: 1.6;
    max-width: 650px;
    letter-spacing: 0.3px;
}

.consulting-description p {
    margin-bottom: 25px; /* Spacing between paragraphs */
}

.consulting-description p:last-child {
    margin-bottom: 0;
}
.consulting-image {
    flex: 1;
    overflow: hidden;
    margin-top: 0;
    align-self: stretch; /* Adapts height to the text block */
}

.consulting-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Service Sections Spacing */
.development-section, .real-estate-section, .construction-section, .trade-section {
    padding: 80px 0 120px;
}

/* Parallax Section */
.parallax-section {
    height: 60vh;
    min-height: 500px;
    background-image: url('https://bestof.swiss/bilder/background%20over%20footer.avif');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

/* Footer Styles */
.main-footer {
    background-color: #2F2E2E;
    color: #A0A09F; /* Specified grey color */
    padding: 60px 0; /* Slightly smaller */
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.footer-left p {
    margin-bottom: 0;
}

.footer-brand {
    margin-bottom: 0 !important;
}

.footer-email {
    font-size: 16px;
    margin-top: 0;
    color: #A0A09F;
}

.footer-left a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.footer-left a:hover {
    color: var(--white);
}

.footer-center {
    flex: 1;
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
}

.scroll-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transform: scale(4.5, 2); /* Bigger overall, not just wider */
    opacity: 0.8;
}

.chevron-up {
    display: block;
    width: 12px;
    height: 12px;
    border-top: 1.5px solid var(--primary-red);
    border-left: 1.5px solid var(--primary-red);
    transform: rotate(45deg);
    margin-bottom: -6px;
}

.footer-right p {
    text-align: right;
}

.footer-right a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.footer-right a:hover {
    color: var(--white);
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }
}

/* About Page Specific Styles */
.about-content-section {
    padding: 125px 0 100px; /* Reduced by 50% as requested */
}

.owner-info {
    margin-top: 50px;
}

.owner-name {
    font-family: 'Jost', sans-serif;
    font-size: 24px;
    font-weight: 200;
    color: #8B0000;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.owner-title {
    font-family: 'Jost', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #A0A09F;
}

.full-width-image {
    width: 100%;
    height: 65vh;
    object-fit: cover;
    object-position: top center; /* Ensures the top of the image isn't cut off */
    display: block;
    margin-bottom: 0;
}

.about-secondary-image {
    margin-top: 100px; /* Reduced by 50% as requested */
}


.consulting-grid.reverse {
    /* Keeping normal row direction since elements are swapped in HTML */
    flex-direction: row; 
}

.consulting-grid.reverse .consulting-image {
    align-self: flex-start; /* Aligns with the top of the text */
    margin-top: 15px; /* Fine-tuned alignment with title top */
}

/* Mobile responsive for consulting section */
@media (max-width: 992px) {
    .consulting-grid {
        flex-direction: column;
        gap: 30px; /* Reduced gap */
    }

    .consulting-grid.reverse {
        flex-direction: column-reverse; /* Ensures Title -> Text -> Image order */
        gap: 30px;
    }

    .consulting-section,
    .development-section,
    .realestate-section,
    .investment-section,
    .trade-section {
        padding: 50px 0; /* Reduced padding between sections */
    }

    .first-text-italic {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 30px;
    }

    .consulting-title-italic {
        font-size: 42px;
        margin-bottom: 20px;
    }

    .consulting-image {
        margin-top: 0;
        width: 100%;
    }

    .consulting-image img {
        width: 100%;
        height: auto;
    }
}


/* Global Mobile Navigation and Layout Fixes */
@media (max-width: 992px) {
    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .nav-list {
        position: fixed;
        left: -100%;
        top: 0;
        flex-direction: column;
        background-color: var(--white);
        width: 100%;
        height: 100vh;
        text-align: center;
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        justify-content: center;
        padding: 0;
        margin: 0;
        display: flex; /* Force display flex for mobile menu */
    }

    /* Hide the default navigation container on mobile to avoid layout shifts */
    .main-nav {
        display: block;
    }
    
    .nav-list:not(.active) {
        /* Keep it hidden when not active */
    }

    .nav-list.active {
        left: 0;
    }

    .nav-list li {
        margin: 25px 0;
    }

    .nav-link {
        font-size: 28px;
    }

    /* General responsive improvements */
    :root {
        --header-height: 120px;
    }

    #main-logo {
        height: 70px;
    }

    .container.narrow {
        padding: 0 30px;
    }

    .first-text-italic {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 40px;
    }

    .consulting-title-italic {
        font-size: 42px;
        margin-bottom: 20px;
    }

    .about-content-section, 
    .contact-content-section {
        padding: 80px 0 60px;
    }

    .parallax-section {
        background-attachment: scroll; /* Fixed background doesn't work well on mobile */
        height: 450px;
    }

    .full-width-image {
        height: 50vh;
    }

    .about-secondary-image {
        margin-top: 60px;
    }

    /* Hero Image Mobile Optimization */
    .hero-section {
        height: 80vh;
        min-height: 350px;
    }

    .hero-image-container {
        height: 100%;
    }

    .hero-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
    }

    body.no-scroll {
        overflow: hidden;
    }
}

@media (max-width: 480px) {
    .first-text-italic {
        font-size: 24px;
    }

    .consulting-title-italic {
        font-size: 36px;
    }

    #main-logo {
        height: 55px;
    }

    :root {
        --header-height: 100px;
    }
}

/* Contact Page Specific Styles */
.contact-content-section {
    padding: 125px 0 100px; /* Matching About page spacing */
}

.contact-description {
    margin-bottom: 50px;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    line-height: 1.8;
}

.contact-address-block {
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    color: #2F2E2E; /* Updated to dark grey as requested */
}

.contact-address-block p {
    margin-bottom: 2px;
}

.contact-address-block a {
    color: inherit;
    text-decoration: none;
}

.red-text {
    color: #8B0000;
}