@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700&display=swap');

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

body {
    font-family: 'Jost';
    line-height: 1.4;
    color: #000;
    background-color: #fff;
    font-weight: 300;
}

.container {
    /* Constrain the site's content to a maximum of 1920px and keep it centered.
       Use width:100% so it can shrink below 1920px on smaller viewports,
       and use responsive inline padding so very wide screens keep comfortable gutters. */
    max-width: 1920px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding-inline: clamp(20px, 2vw, 80px);
    padding-top: 0;
    padding-bottom: 0;
}

/* Header
   tuned to match reference dimensions: fixed height, no vertical padding */
.header {
    background: #fff;
    height: 60px; /* further reduced header height */
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

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

.logo-img {
    height: 100%; /* Full header height */
    width: auto;
    max-height: none;
    object-fit: contain;
    display: block; /* Ensure it displays as a block element */
    visibility: visible !important; /* Force visibility */
}

/* Ensure SVG logo has proper styling */
.logo-img svg {
    width: 100%;
    height: 100%;
    fill: #000; /* Force black fill for SVG */
}

/* Fallback for older browsers */
.logo-img {
    min-height: 40px; /* Ensure minimum height */
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(12px, 3vw, 48px); /* flexible spacing between nav items */
    flex-wrap: nowrap; /* prevent wrapping but allow shrinking */
    min-width: 0; /* allow flex items to shrink */
}

.nav-link {
    text-decoration: none;
    color: #666;
    font-size: clamp(11px, 2.5vw, 15px); /* responsive font size that shrinks on mobile */
    font-weight: 500;
    transition: color 0.3s ease;
    white-space: nowrap; /* prevent text wrapping */
    flex-shrink: 1; /* allow links to shrink */
    min-width: 0; /* allow text truncation if needed */
}

.nav-link:hover,
.nav-link.active {
    color: #000;
}

.language-switcher {
    display: flex;
    gap: 10px;
}

.lang {
    font-size: 14px;
    color: #667;
    cursor: pointer;
    transition: color 0.3s ease;
}

.lang.active {
    color: #000;
    font-weight: 500;
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background-color: #000;
    margin: 2px 0;
    transition: all 0.3s ease;
}

/* Mobile navigation styles */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav {
        position: fixed;
        top: 60px;
        right: -100%;
        width: 280px;
        height: auto;
        max-height: calc(100vh - 60px);
        background: #fff;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        padding: 20px;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 999;
        overflow-y: auto;
        display: flex;
    }
    
    .nav.mobile-open {
        right: 0;
    }
    
    .nav-link:last-child {
        border-bottom: none;
    }
    
    /* Language switcher mobile optimization - position at top */
    .nav .language-switcher {
        display: flex;
        justify-content: flex-end;
        gap: 20px;
        padding: 0 0 20px 0;
        border-bottom: 1px solid #eee;
        margin: 0;
        order: -1; /* Move to top */
        flex-shrink: 0;
    }
    
    /* Reset nav link spacing */
    .nav-link {
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        text-align: left;
        width: 100%;
        margin-top: 0;
    }
    
    .lang {
        font-size: 16px;
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        transition: all 0.3s ease;
    }
    
    .lang.active {
        background-color: #000;
        color: #fff;
        border-color: #000;
    }
    
    /* Hamburger animation */
    .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Adjust header container for mobile */
    .header .container {
        padding-inline: 20px;
    }
    
    /* Ensure logo doesn't get too close to nav on mobile */
    .logo {
        flex-shrink: 0;
        margin-right: 10px;
    }
}

@media (max-width: 480px) {
    .nav {
        width: 100%;
        right: -100%;
    }
    
    .nav-link {
        font-size: 14px;
        padding: 12px 0;
    }
    
    .lang {
        font-size: 14px;
        padding: 6px 12px;
    }
}

/* Main */
.main {
    margin-top: 320px; /* reduced padding between header and page content by 20% */
    padding-top: 0;
    min-height: calc(100vh - 120px); /* Full viewport height minus header */
}

/* Page sections - each section should be a full scrollable page */
.page-section {
    min-height: calc(100vh - 120px);
    padding: 20px 0;
    display: none; /* Hidden by default, shown via JS */
    overflow-y: auto;
}

.page-section.active {
    display: block;
}

/* Tours section specific styling */
#tours {
    background: #fff;
}

/* Art Advisory section specific styling */
#art-advisory {
    background: #fff;
    padding-top: 40px; /* added extra white space below hero/header */
}

/* Corporate section specific styling */
#corporate {
    background: #fff;
    padding-top: 40px; /* added extra white space below hero/header */
}

/* Works Section */
.works {
    background: #fff;
    padding: 120px 0 27px; /* reduced bottom padding by 2/3 (80px -> 27px) */
    position: relative;
    z-index: 1;
    min-height: auto; /* Allow natural content height */
}

/* Hero Section
   Adjusted to match header_dimentions.jpeg:
   - larger top padding so the oversized H1 sits lower on the page
   - wider gap and tighter right column to match the visual placement in the mock
   - apply a left gutter at wide viewports matching the 141px guideline from the image */
.hero {
    background: #fff;
    padding: 120px 0 20px; /* reduced bottom padding to decrease space between hero and content */
    position: relative;
}
 
.hero .container {
    display: grid;
    /* left column is flexible but keeps a useful minimum for the large H1,
       right column is a fixed visual column for description/menu */
    grid-template-columns: minmax(480px, 1fr) 360px;
    gap: 60px;
    align-items: start; /* keep heading aligned to top of left column */
    /* smaller responsive left padding to bring content closer to edges */
    padding-inline-start: clamp(8px, 1.5vw, 24px);
    /* smaller responsive right padding to bring content closer to edges */
    padding-inline-end: clamp(8px, 1.5vw, 24px);
}

.hero-title {
    /* Larger headline sizing to match the 240px H1 in the dimensions image.
       Uses a viewport-based clamp so it's responsive but won't exceed 240px. */
    font-size: clamp(60px, 12vw, 160px);
    font-weight: 300;
    line-height: 0.9;
    margin-bottom: 6px;
    color: #000;
    letter-spacing: -2px;
    max-width: none;
    word-break: break-word;
    /* subtle transform to better match vertical alignment in the mock */
    transform-origin: left top;
}

.hero-text {
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    max-width: 400px;
    font-weight: 300;
}

/* Right column layout for description + arrow list */
.hero-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    margin-top: 0; /* description sits on same line as heading thanks to container alignment */
    justify-content: flex-start; /* keep description + menu aligned to the top of the right column */
}

/* Short descriptive paragraph above the arrowed items */
.hero-desc {
    font-size: 21px; /* increased to match H6 = 21px from the dimensions image */
    line-height: 1.5;
    color: #666;
    max-width: 360px;
    align-self: end; /* bottom-align the description to the heading row */
    margin-top: 0;
    margin-bottom: 8px; /* reduced space between description and arrow menu */
    font-weight: 300;
}

/* Layout wrapper for the arrow menu */
.arrow-area {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    width: 100%;
}

/* Horizontal notes row (graphic design, motion, 8mm) - positioned below heading on left */
.notes-row {
    display: flex;
    gap: 36px; /* larger spacing to match the visual spacing in the mock */
    align-items: center;
    justify-content: flex-start;
    padding-left: 4px;
    margin-bottom: 28px;
    font-size: 14px;
    color: #666;
}

/* Show notes row in hero-content (left side below heading) */
.hero-content .notes-row {
    display: flex;
}

/* When notes appear inside the horizontal row, let them size naturally */
.notes-row .note {
    width: auto;
    min-width: 0;
    font-size: 12px;
    color: #666;
    font-weight: 300;
    letter-spacing: 0.2px;
}

/* The vertical arrow menu */
.arrow-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid #999; /* darker separators to match template */
    width: 100%;
    margin-top: 2px; /* reduced space between description and arrow menu */
    align-items: flex-start;
}

.menu-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 0; /* reduced vertical padding in menu rows */
    min-height: 40px; /* reduced min height */
    position: relative;
    width: 100%;
}

/* draw a full-width separator that spans the entire arrow-list (matches the top border length) */
.menu-row::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #999; /* darker color for separators */
    bottom: 0;
}

.menu-row:last-child::before {
    display: none;
}

/* Hide the vertical notes column since notes are now horizontal below heading */
.notes-column {
    display: none;
}

/* Menu item (arrow + label) */
.menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-left: 0;
    padding: 6px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    width: 100%; /* expand so the decorative line can stretch to the right edge */
}

.menu-item-header {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    transition: all 0.3s ease;
}

/* Draw a consistent line from after the label to the right edge of the row so all separators look equal length */
.menu-item::after {
    display: none;
}

/* subtle hover effect */
.menu-item:hover .menu-item-header {
    transform: translateX(6px);
}

/* arrow svg sizing; keep crisp by using height */
.arrow-icon {
    width: auto;
    height: 18px;
    display: block;
    fill: #000;
    transition: transform 0.3s ease;
}

/* Rotate arrow when expanded */
.menu-item.expanded .arrow-icon {
    transform: rotate(90deg);
}

/* label style for arrow items */
.menu-item span {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* submenu (expanded description) appears below the menu-item text */
.submenu {
    display: none;
    margin-top: 4px; /* reduced space between menu item and submenu */
    padding-left: 36px; /* indent so it visually aligns under the arrow+label */
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.menu-item.expanded .submenu {
    display: block;
    opacity: 1;
    max-height: 200px;
    padding-bottom: 4px; /* reduced space at bottom of submenu */
}

/* show submenu for active item */
.menu-item.active .submenu {
    display: block;
}

/* rotate arrow for active item if desired (keep transform subtle) */
.menu-item.active .arrow-icon {
    transform: rotate(90deg);
}

/* Responsive tweaks for small screens */
@media (max-width: 768px) {
    .hero .container {
        grid-template-columns: 1fr;
    }
    .hero-desc {
        align-self: stretch;
        max-width: none;
    }
    .note {
        display: inline-block; /* show notes as inline elements on small screens */
        margin: 4px 0;
    }
    .notes-row {
        flex-wrap: wrap;
        gap: 16px;
    }
    .menu-item {
        margin-left: 0;
    }
}

/* Works Section */
.works {
    background: #fff;
    padding: 120px 0 27px; /* reduced bottom padding by 2/3 (80px -> 27px) */
    position: relative;
    z-index: 1;
}

/* Ensure body has proper scrolling behavior */
body {
    overflow-x: hidden;
    position: relative;
}

/* Header stays fixed without interfering with scrolling */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    height: 60px; /* keep consistent with further reduced header */
    padding: 0;
}

/* Main content scrolls normally under header */
.main {
    margin-top: 224px; /* reduced padding between header and page content by 20% */
    padding-top: 0;
    min-height: auto; /* Allow natural content height */
    background-color: #fff; /* Ensure white background */
}

.works .container {
    display: grid;
    /* allow the sidebar to shrink/grow between a useful minimum and the original 300px,
       ensuring the layout scales proportionally on very wide or narrow screens */
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 80px;
    align-items: start;
}

.section-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 40px;
    color: #000;
    letter-spacing: -0.3px;
    line-height: 1.4;
    /* Auto-shrinking for long text */
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Responsive font scaling for section titles */
@media (max-width: 768px) {
    .section-title {
        font-size: clamp(24px, 5vw, 32px);
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: clamp(20px, 4.5vw, 28px);
    }
}

/* Special handling for Russian text that might be too long */
.section-title[data-translate-key="tours.title"] {
    /* Use fluid typography that scales based on container width */
    font-size: clamp(20px, 3.5vw, 28px);
    line-height: 1.35;
    letter-spacing: -0.2px;
}

/* Ensure text fits within two lines maximum */
.section-title {
    max-height: 2.8em; /* 2 lines × line-height */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Dynamic text scaling classes for long text */
.section-title.text-long {
    font-size: clamp(18px, 3.2vw, 26px);
    letter-spacing: -0.2px;
    line-height: 1.4;
}

.section-title.text-very-long {
    font-size: clamp(16px, 2.8vw, 22px);
    letter-spacing: -0.1px;
    line-height: 1.45;
}

/* Container queries for better responsive behavior */
@container (max-width: 600px) {
    .section-title {
        font-size: clamp(22px, 4.5vw, 30px);
    }
    
    .section-title.text-long {
        font-size: clamp(18px, 3.8vw, 26px);
    }
    
    .section-title.text-very-long {
        font-size: clamp(16px, 3.2vw, 22px);
    }
}

.works-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.work-item {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    border: 1px solid #eee;
}

.work-item:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

.work-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.work-title {
    font-size: 18px;
    font-weight: 700;
    margin: 15px 15px 8px;
    color: #000;
}

.work-description {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0 15px 15px;
}

/* Services Section */
.services {
    background: #f9f9f9;
    padding: 80px 0 27px; /* reduced bottom padding by 2/3 */
    min-height: auto; /* Allow natural content height */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
}

.service-category h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000;
}

.service-category ul {
    list-style: none;
}

.service-category li {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Footer */
.footer {
    background: #fff;
    padding: 80px 0 27px; /* reduced bottom padding by 2/3 */
    text-align: center;
    min-height: auto; /* Allow natural content height */
}

.contact-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #000;
}

.contact-phone,
.contact-email {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Hero stacks vertically */
    .hero .container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .hero-title {
        font-size: 48px;
    }

    /* Ensure section containers become single-column so headings sit above content */
    .works .container,
    .services .container,
    #art-advisory .container,
    #corporate .container,
    #tours .container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    /* Section heading spacing and full-width behavior */
    .section-title {
        margin-bottom: 20px;
        width: 100%;
    }
    
    /* Make all grids single column on small screens so cards stack vertically */
    .works-grid,
    .services-grid,
    .advisory-cards,
    .corporate-cards,
    #tours .tour-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Keep desktop-like services layout on slightly larger small screens, but still stack */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* Corporate cards fallback (if not defined elsewhere) - will be overridden by the rule above on small screens */
    .corporate-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Make individual cards take full width */
    .service-category,
    .advisory-card,
    .corporate-card,
    .work-item {
        width: 100%;
    }

    /* Advisory layout should mirror the design section: portrait above cards and centered */
    #corporate .container {
        grid-template-columns: 1fr;
        display: block;
    }
    
    #art-advisory .container {
        grid-template-columns: 1fr;
        display: block;
    }
    
    #tours .container {
        grid-template-columns: 1fr;
        display: block;
    }
    
    /* Ensure proper stacking for all sections */
    @media (max-width: 768px) {
        #art-advisory .container {
            display: block !important;
        }
        #art-advisory .section-title {
            margin-bottom: 20px;
        }
        #tours .container {
            display: block !important;
        }
        #tours .section-title {
            margin-bottom: 20px;
        }
        #corporate .container {
            display: block !important;
        }
        #corporate .section-title {
            margin-bottom: 20px;
        }
    }
    
    /* Ensure proper stacking for tours section */
    #tours .section-title {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }
    
    #tours .tours-content {
        display: block;
        width: 100%;
    }
    
    #art-advisory .advisory-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    #corporate .corporate-content {
        align-items: flex-start;
        text-align: left;
    }
    
    #tours .tours-content {
        display: block;
        width: 100%;
    }
    
    .advisory-portrait {
        margin-bottom: 24px;
        width: 180px;
        height: 270px;
    }

    /* Nav tweaks for mobile - already handled by clamp() above */
    .nav {
        /* gap is already handled by clamp() above */
        justify-content: flex-end; /* align nav to the right on mobile */
    }

    /* Add comfortable container padding on small screens */
    .container {
        padding-inline: clamp(12px, 3vw, 20px);
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 36px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .container {
        padding: 0 15px;
    }
    
    /* Additional navigation tweaks for very small screens */
    .nav {
        gap: clamp(8px, 2vw, 16px); /* even smaller gap on very small screens */
    }
    
    .nav-link {
        font-size: clamp(10px, 2.2vw, 12px); /* smaller font size on very small screens */
    }
    
    .language-switcher {
        gap: clamp(4px, 1.5vw, 8px); /* smaller gap for language switcher */
    }
    
    .lang {
        font-size: clamp(10px, 2vw, 12px); /* smaller font for language switcher */
    }
}

/* SPA Transitions */
.page-transition {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.page-transition.active {
    opacity: 1;
    transform: translateY(0);
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Advisory Section Layout */
.advisory-content {
    margin-top: 0;
}

#art-advisory .container {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 80px;
    align-items: start;
}

#art-advisory .advisory-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: -1px;
}

/* Portrait size — 1.2× original (200px × 300px → 240px × 360px) */
.advisory-portrait {
    width: 240px;
    height: 360px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.advisory-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    flex: 1;
}

.advisory-card {
    background: #fff;
    border-radius: 4px;
    padding: 30px;
    transition: transform 0.3s ease;
    border: 1px solid #eee;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.advisory-card:hover {
    transform: translateY(-3px);
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

.advisory-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
    line-height: 1.3;
}

.advisory-description {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* Responsive design for advisory section and related mobile stacking */
@media (max-width: 768px) {
    /* Stack advisory content like the design section: portrait above cards */
    .advisory-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .advisory-portrait {
        width: 180px;
        height: 270px;
        margin-bottom: 24px;
    }
    
    .advisory-cards {
        grid-template-columns: 1fr;
        width: 100%;
    }

    /* Ensure corporate cards stack vertically and span full width on small screens */
    .corporate-cards {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 20px;
    }

    /* Tours grid: stack tour cards vertically on small screens */
    #tours .tour-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Works grid and services already handled elsewhere; ensure any card elements expand */
    .work-item,
    .service-category,
    .advisory-card,
    .corporate-card {
        width: 100%;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Contact Modal Styles */
#contactModal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#contactModal.show {
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
}

#contactModal .modal-content {
    position: relative;
    background: #fff;
    border-radius: 8px;
    max-width: 500px;
    width: 90vw;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

#contactModal.show .modal-content {
    transform: scale(1);
}

#contactModal .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    font-weight: 300;
    color: #000;
    cursor: pointer;
    z-index: 20;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f5f5;
    transition: all 0.3s ease;
    border: 1px solid #ddd;
}

#contactModal .modal-close:hover {
    color: #000;
    background: #e0e0e0;
    transform: scale(1.1);
}

#contactModal .modal-header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    padding: 25px 25px 15px;
    background: #fff;
    z-index: 15;
    border-bottom: 1px solid #eee;
}

#contactModal .modal-title {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
    color: #000;
    text-shadow: none;
}

/* Slideshow Modal Styles (unchanged) */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    background: #fff;
    border-radius: 8px;
    max-width: 95vw;
    max-height: 95vh;
    width: 1200px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal.show .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    font-weight: 300;
    color: #fff;
    cursor: pointer;
    z-index: 20;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-close:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

.modal-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 25px 40px;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 30%, transparent 100%);
    z-index: 15;
}

.modal-title {
    font-size: 28px;
    font-weight: 500;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.slideshow-container {
    position: relative;
    width: 100%;
    height: 80vh;
    max-height: 700px;
    overflow: hidden;
}

.slides-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.modal-slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
}

.modal-slide img,
.modal-slide video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    display: block;
}

.slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    padding: 0;
}

.slide-nav:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-50%) scale(1.1);
}

.slide-nav.prev {
    left: 30px;
}

.slide-nav.next {
    right: 30px;
}

.nav-arrow {
    width: 24px;
    height: 24px;
    fill: #333;
    transition: fill 0.3s ease;
}

.slide-nav:hover .nav-arrow {
    fill: #000;
}

.slide-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.slide-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.slide-indicator.active {
    background: #fff;
    transform: scale(1.2);
}

.slide-indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Work Item Clickable Cursor */
.work-item {
    cursor: pointer;
}

.work-item:hover .work-image {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Responsive Modal */
@media (max-width: 768px) {
    .modal-content {
        width: 95vw;
        max-height: 85vh;
    }
    
    .modal-header {
        padding: 20px 20px 15px;
    }
    
    .modal-title {
        font-size: 22px;
    }
    
    .modal-description {
        font-size: 14px;
    }
    
    .slideshow-container {
        height: 400px;
    }
    
    .slide-nav {
        width: 40px;
        height: 40px;
    }
    
    .slide-nav.prev {
        left: 15px;
    }
    
    .slide-nav.next {
        right: 15px;
    }
    
    .nav-arrow {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .slideshow-container {
        height: 300px;
    }
    
    .modal-header {
        padding: 15px 15px 10px;
    }
    
    .modal-title {
        font-size: 20px;
    }
    
    .slide-nav {
        width: 35px;
        height: 35px;
    }
    
    .slide-nav.prev {
        left: 10px;
    }
    
    .slide-nav.next {
        right: 10px;
    }
}

/* Tours Section Styles */
.tours {
    background: #fff;
    padding: 120px 0 27px; /* reduced bottom padding by 2/3 (80px -> 27px) */
    min-height: auto; /* Allow natural content height */
}

.tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.tour-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    border: 1px solid #eee;
}

.tour-card:hover {
    transform: translateY(-8px);
    filter: saturate(1.5);
    opacity: 0.9;
}

.tour-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.tour-info {
    padding: 24px;
}

.tour-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #000;
}

.tour-description {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.tour-highlights {
    list-style: none;
    margin-bottom: 20px;
}

.tour-highlights li {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.tour-highlights li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000;
}

.tour-price {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}

.tour-duration {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.book-button {
    background: #000;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.book-button:hover {
    background: #333;
}

.corporate-booking-option {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 60px;
    text-align: center;
}

.corporate-info h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #000;
}

.corporate-info p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 16px;
}

.price {
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

.private-tours-info {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 60px;
    text-align: center;
}

.private-tours-info h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #000;
}

.private-tours-info p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

/* Art Advisory Section Styles */
.advisory-content {
    display: flex;
    gap: 60px;
    align-items: center;
    margin-bottom: 20px; /* reduced margin by 2/3 (60px -> 20px) */
    min-height: auto; /* Allow natural content height */
}

.advisory-info-box {
    display: flex;
    gap: 40px;
    align-items: center;
}

.advisory-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.advisory-info-box p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    flex: 1;
}

/* Corporate Section Styles */
.corporate-content {
    margin-bottom: 20px; /* reduced margin by 2/3 (60px -> 20px) */
    min-height: auto; /* Allow natural content height */
}

#corporate .container {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 80px;
    align-items: start;
}

#corporate .corporate-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: -1px;
}

.corporate-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.corporate-card {
    background: #fff;
    border-radius: 4px;
    padding: 30px;
    transition: transform 0.3s ease;
    border: 1px solid #eee;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.corporate-card:hover {
    transform: translateY(-3px);
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

.corporate-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
    line-height: 1.3;
}

.corporate-description {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 20px 0;
}

/* Responsive design for corporate section */
@media (max-width: 768px) {
    .corporate-cards {
        grid-template-columns: 1fr;
        width: 100%;
    }
    
    .corporate-card {
        padding: 20px;
    }
}

.corporate-contact {
    text-align: center;
}

.corporate-contact h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #000;
}

.contact-methods {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.contact-btn:hover {
    background: #333;
    border-color: #333;
    color: #fff;
}

.contact-btn svg {
    width: 16px;
    height: 16px;
}

/* Tour Modal Styles */
.tour-modal {
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.tour-modal .modal-content {
    background: #fff;
    border-radius: 12px;
    max-width: 98vw;
    max-height: 98vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

/* Custom scrollbar for tour modal */
.tour-modal .modal-content::-webkit-scrollbar {
    width: 6px;
}

.tour-modal .modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.tour-modal .modal-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.tour-modal .modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.tour-modal .modal-content::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox scrollbar styling */
.tour-modal .modal-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tour-modal .modal-close {
    position: absolute;
    bottom: 10px; /* Position 10px from the bottom edge of the hero image */
    right: 20px;
    background: #fff;
    border: 2px solid #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 10;
    font-size: 22px;
    font-weight: bold;
    color: #000;
    line-height: 1;
}

.tour-modal .modal-close:hover {
    background: #000;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.tour-modal .modal-close:active {
    transform: scale(0.95);
}

.tour-modal-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    position: relative;
}

.tour-hero-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: #f8f8f8;
    position: relative; /* Add positioning context for the close button */
}

.tour-modal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* See .tour-card picture — the wrapper must not change the hero's fixed band. */
.tour-hero-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* A portrait cover is a full designed poster. Cropping it into the 300px band
   on a phone would cut most of it away, which defeats the point of providing
   one, so on narrow screens the hero adopts the poster's own aspect ratio.
   Scoped to tours that HAVE a portrait cover: every other tour keeps the
   original fixed band, so the established look is unchanged. */
@media (max-width: 768px) {
    .tour-hero-image.has-portrait {
        height: auto;
        max-height: 78vh;
    }
    .tour-hero-image.has-portrait picture,
    .tour-hero-image.has-portrait .tour-modal-img {
        height: auto;
        object-fit: contain;
    }
}

.tour-modal:hover .tour-modal-img {
    transform: scale(1.05);
}

.tour-info {
    padding: 30px;
    background: #fff;
}

.tour-modal-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: #000;
    line-height: 1.4;
}

.tour-details {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.tour-price {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.tour-duration {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.tour-description {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
    margin-top: -10px;
}

.tour-highlights {
    margin-bottom: 20px;
}

.tour-highlights h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px 0;
    color: #000;
}

.tour-highlights li {
    font-size: 15px;
    color: #666;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.tour-highlights li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000;
    font-weight: bold;
}

.tour-contact {
    border-top: 1px solid #eee;
    padding-top: 25px;
}

.tour-contact h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: #000;
}

.contact-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    font-size: 14px;
}

.contact-btn:hover {
    background: #333;
    border-color: #333;
    color: #fff;
    transform: translateY(-2px);
}

.contact-btn svg {
    width: 20px;
    height: 20px;
}

.contact-btn.youtube {
    background: #000;
    border-color: #000;
}

.contact-btn.youtube:hover {
    background: #333;
    border-color: #333;
}

.tour-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tour-description {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

.tour-highlights {
    list-style: none;
}

.tour-highlights li {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.tour-highlights li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000;
}

.tour-contact {
    border-top: 1px solid #eee;
    padding-top: 24px;
}

.tour-contact h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #000;
}

.tour-contact .contact-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.advisory-contact,
.corporate-contact {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.advisory-contact h3,
.corporate-contact h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #000;
}

.advisory-contact .contact-buttons,
.corporate-contact .contact-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Contact Form Styles */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Jost', sans-serif;
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form button {
    background: #000;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-form button:hover {
    background: #333;
}

/* ---------------------------------------------------------------------------
   Inquiry form: labels, rows, honeypot.
   ---------------------------------------------------------------------------
   The form previously relied on classes that had NO rules at all — `.form-row`,
   `.form-field` and `.hp` — so `form-row` never made two columns and, worse, the
   honeypot rendered as an ordinary empty text box. A visitor who typed in it had
   their inquiry SILENTLY DISCARDED (the Worker treats any value there as a bot
   and still answers "ok"), so this had to be hidden for real.
   Specificity note: `.contact-form input` is (0,1,1); `.contact-form .hp` is
   (0,2,0) so it wins without needing !important. */
.contact-form .hp,
.contact-form input.hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Each field is label + control + optional hint, stacked. */
.contact-form .field-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;             /* lets grid children shrink instead of overflowing */
}

.contact-form .field-wrap > label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.01em;
}

/* The * shown on required fields, and the note that explains it. */
.contact-form .field-wrap > label .req { color: #a33; font-weight: 700; }
.contact-form .form-note {
    font-size: 12px;
    color: #666;              /* 5.7:1 on white — see the contrast note below */
    margin: 0;
}
.contact-form .field-hint {
    font-size: 12px;
    color: #666;
    line-height: 1.35;
}

/* Visible to screen readers only (the * is aria-hidden, this carries the text). */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The flex `gap` provides the rhythm, so drop the inputs' own margin-bottom
   (block A sets 16px, block B adds a 16px gap — that was 32px per field). */
.contact-form .field-wrap > input,
.contact-form .field-wrap > textarea {
    margin-bottom: 0;
}

/* Name/surname and email/phone were meant to sit side by side; with `.form-row`
   unstyled they were just stacked. 1 column on narrow screens. */
.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 560px) {
    .contact-form .form-row { grid-template-columns: 1fr; }
}

/* Date inputs render with the platform's own widget, which in some browsers
   ignores our padding/height — normalise so the row heights match. */
.contact-form input[type="date"] {
    min-height: 49px;
    color: #333;
}

/* ---------------------------------------------------------------------------
   Footer container + newsletter box.
   ---------------------------------------------------------------------------
   NOTE: `.modal-contact-footer` genuinely had NO rule anywhere, so the footer
   had no horizontal inset on any viewport. The `.stay-in-touch` block DOES have
   v1 styles further down (18px caps heading with its own top border) — leave
   those alone; this only adds the missing container and the newsletter, which
   docs/04 specifies but which was never built.
   NOT adding another border-top here: `.stay-in-touch` already draws one, and a
   second would double the separation. */
.modal-contact-footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 56px;
}
/* Newsletter box (docs/04): label, input + arrow button, note, inline result. */
.newsletter { width: 100%; max-width: 420px; margin: 28px auto 0; }
.newsletter-form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.newsletter-label { font-size: 13px; font-weight: 500; color: #333; }
.newsletter-row { display: flex; gap: 8px; align-items: stretch; }
.newsletter-row input {
    flex: 1 1 auto;
    min-width: 0;                 /* lets the input shrink instead of overflowing */
    padding: 12px 14px;
    border: 1px solid #8f8f8f;    /* 3.2:1 — a control boundary must be visible */
    border-radius: 4px;
    font-size: 16px;              /* 16px stops iOS zooming on focus */
    font-family: 'Jost', sans-serif;
}
.newsletter-row input:focus { outline: none; border-color: #000; }
.newsletter-btn {
    flex: 0 0 auto;
    width: 50px;
    min-height: 50px;
    border: none;
    border-radius: 4px;
    background: #000;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.newsletter-btn:hover:not(:disabled) { background: #333; }
.newsletter-btn:disabled { opacity: 0.55; cursor: default; }
.newsletter-note { font-size: 12px; color: #666; line-height: 1.4; }

/* Inline result for both forms. `.form-result` carries no colour of its own —
   `.form-success` / `.form-error` do, so one element serves both outcomes. */
.form-result { font-size: 14px; }
.newsletter .form-result { text-align: left; }

@media (max-width: 768px) {
    .modal-contact-footer { padding: 0 16px 40px; }
}



.form-success,
.form-error {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}

.form-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Responsive Design */
@media (max-width: 768px) {
    .advisory-content {
        flex-direction: column;
        text-align: center;
    }
    
    .advisory-info-box {
        flex-direction: column;
    }
    
    .advisory-image {
        width: 150px;
        height: 150px;
    }
    
    .tour-modal .modal-content {
        max-width: 99vw;
        max-height: 99vh;
        border-radius: 8px;
    }
    
    .tour-modal .modal-close {
        bottom: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
        font-size: 20px;
        border-width: 2px;
    }
    
    .tour-hero-image {
        height: 250px;
    }
    
    .tour-info {
        padding: 25px;
    }
    
    .tour-modal-title {
        font-size: 24px;
    }
    
    .tour-details {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 10px;
    }
    
    .contact-buttons {
        flex-direction: column;
    }
    
    .contact-btn {
        width: 100%;
        justify-content: center;
    }
    
    .contact-methods {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .tour-grid {
        grid-template-columns: 1fr;
    }
    
    .corporate-booking-option,
    .private-tours-info {
        padding: 24px;
    }
    
    .advisory-info-box p {
        font-size: 14px;
    }
    
    .tour-modal .modal-content {
        max-width: 95vw;
        border-radius: 8px;
    }
    
    .tour-modal .modal-close {
        bottom: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        font-size: 18px;
        border-width: 1.5px;
    }
    
    .tour-hero-image {
        height: 200px;
    }
    
    .tour-info {
        padding: 20px;
    }
    
    .tour-modal-title {
        font-size: 20px;
    }
    
    .tour-details {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 8px;
    }
    
    .tour-description {
        font-size: 14px;
        margin-bottom: 12px;
        margin-top: -8px;
    }
    
    .tour-highlights {
        margin-bottom: 15px;
    }
    
    .contact-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .contact-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Contact forms and buttons */
.contact {
    margin-top: 60px;
    padding: 40px;
    background: #f9f9f9;
    border-radius: 8px;
}

.contact h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #000;
}

.contact p {
    font-size: 16px;
    color: #666;
    margin-bottom: 24px;
    line-height: 1.6;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 500px;
}

.contact-form input,
.contact-form textarea {
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Jost';
    transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #000;
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.button {
    background: #000;
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Jost', sans-serif;
}

.button:hover {
    background: #333;
}


/* Advisory section */
.advisory-content {
    margin: 40px 0 13px; /* reduced bottom margin by 2/3 (40px -> 13px) */
}

.advisory-info-box {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 40px;
}

.advisory-image {
    width: 200px;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.advisory-info-box p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

/* Corporate section */
.corporate-content {
    margin: 40px 0 13px; /* reduced bottom margin by 2/3 (40px -> 13px) */
}

.corporate-info h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #000;
}

.corporate-info p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.price {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    display: block;
    margin-top: 20px;
}

.corporate-contact {
    margin-top: 40px;
    padding: 40px;
    background: #f9f9f9;
    border-radius: 8px;
}

.corporate-contact h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #000;
}

.contact-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Private tours info */
.private-tours-info {
    margin: 60px 0 40px;
    padding: 40px;
    background: #f9f9f9;
    border-radius: 8px;
}

.private-tours-info h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #000;
}

.private-tours-info p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

/* Tour grid */
#tours .container {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 80px;
    align-items: start;
}

#tours .tours-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tours-content {
    margin-top: 0;
}

.tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 0;
}

/* Footer */
.footer {
    background: #000;
    color: #fff;
    padding: 60px 0 20px; /* reduced bottom padding by 2/3 (60px -> 20px) */
    margin-top: 0;
}

.footer .container {
    text-align: center;
}

.contact-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.contact-phone,
.contact-email {
    font-size: 16px;
    margin: 8px 0;
    color: #ccc;
}

/* Additional responsive styles */
@media (max-width: 768px) {
    .hero .container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-inline-start: 20px;
    }
    
    .hero-title {
        font-size: clamp(40px, 8vw, 80px);
    }
    
    .nav {
        gap: 24px;
    }
    
    .nav-link {
        font-size: 14px;
    }
    
    .advisory-info-box {
        flex-direction: column;
        gap: 20px;
    }
    
    .advisory-image {
        width: 150px;
        height: 180px;
        align-self: center;
    }
    
    .contact-methods {
        flex-direction: column;
    }
    
    .contact-btn {
        margin-right: 0;
        justify-content: center;
    }
    
    .page-section {
        padding: 20px 0;
    }
}
/* Contact Form Container */
#contactModal .contact-form-container {
    padding: 30px 25px;
}

#contactModal .contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#contactModal .contact-form input,
#contactModal .contact-form textarea {
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    font-family: 'Jost', sans-serif;
    transition: all 0.3s ease;
    background: #fff;
}

#contactModal .contact-form input:focus,
#contactModal .contact-form textarea:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

#contactModal .contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

#contactModal .form-success,
#contactModal .form-error {
    padding: 14px;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

#contactModal .form-success {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
}

#contactModal .form-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

#contactModal .button {
    background: #000;
    color: #fff;
    border: none;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.5s ease;
    font-family: 'Jost', sans-serif;
}

#contactModal .button:hover {
    background: #333;
}

/* Modal enhancements */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

/* Contact sections styling */
.contact-section {
    background: #fff;
    padding: 60px 0 20px; /* reduced bottom padding by 2/3 (60px -> 20px) */
    margin-top: 40px;
    border-top: 1px solid #eee;
}

.contact-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}

.stay-in-touch {
    text-align: center;
    padding: 20px 0 0;
    border-top: 1px solid #eee;
    margin-top: 40px;
}

.stay-in-touch h3 {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 16px;
    color: #000;
}

.stay-in-touch p {
    font-size: 16px;
    color: #666;
    margin: 8px 0;
}

.design-footer {
    background: #fff;
    padding: 60px 0 20px; /* reduced bottom padding by 2/3 (60px -> 20px) */
    margin-top: 60px;
}

.tour-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.tour-price, .tour-duration {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.tours .container,
#art-advisory .container,
#corporate .container {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 80px;
    align-items: start;
}

/* Tours card layout: keep button visually unchanged but pinned to card bottom */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Make each card a column flex container so we can push the button to the bottom */
.tour-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
}

/* Image stays natural but won't force card to grow beyond grid cell */
.tour-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

/* A portrait cover arrives wrapped in <picture>. Without this the wrapper (not
   the <img>) becomes the flex item, so it would take the image's intrinsic
   height and the sizing above would stop applying. */
.tour-card picture {
  display: block;
  flex: 0 0 auto;
  width: 100%;
}

/* Info area is a column flex that fills remaining space */
.tour-info {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0; /* allow children to shrink inside flexbox (prevents overflow) */
}

/* Allow the highlights/description to take available space if needed */
.tour-description,
.tour-highlights,
.tour-meta {
  flex: 0 1 auto;
}

/* Keep button size/shape unchanged but pin it to bottom */
.book-button {
  margin-top: auto; /* pushes the button to the bottom of .tour-info */
  cursor: pointer;
}

/* Make book buttons size intrinsic (don't stretch) while staying pinned to card bottom */
.tour-info .book-button {
  display: inline-flex;
  align-self: flex-start; /* keep button left-aligned and prevent full-width stretching */
  width: auto;            /* intrinsic width based on padding/content */
  max-width: 260px;       /* optional cap so very long labels don't expand too far */
  white-space: nowrap;    /* keep label on one line to preserve shape */
}

/* Override: force vertical stacking for advisory & corporate on small screens
   Placed at the end to override earlier conflicting rules. */
@media (max-width: 768px) {
    .advisory-content,
    .advisory-info-box,
    .advisory-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }

    /* Ensure portrait/image sits above the cards like the Design section */
    .advisory-portrait,
    .advisory-image {
        width: 240px !important;
        height: auto !important;
        margin: 0 0 16px 0 !important;
        align-self: center !important;
    }

    /* Make advisory cards full-width stacked */
    .advisory-cards,
    .corporate-cards,
    .tour-grid,
    .works-grid,
    .services-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 20px !important;
    }

    /* Corporate stacking */
    .corporate-content,
    .corporate-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .corporate-card,
    .advisory-card,
    .work-item,
    .service-category {
        width: 100% !important;
    }
}

/* High-specificity overrides to force Art Advisory & Corporate to stack on mobile
   Appended to the end to override any earlier conflicting rules. */
@media (max-width: 768px) {
  /* Art Advisory: ensure heading/portrait sit above cards and everything centers */
  #art-advisory .container > .advisory-content,
  #art-advisory .container > .advisory-content .advisory-info-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  /* Portrait/image sizing and centering */
  #art-advisory .container > .advisory-content .advisory-portrait,
  #art-advisory .advisory-image {
    width: 150px !important;
    height: auto !important;
    margin: 0 0 16px 0 !important;
    align-self: center !important;
  }

  /* Make advisory cards stack full width */
  #art-advisory .advisory-cards {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 20px !important;
  }

  /* Corporate: stack content and make cards full-width */
  #corporate .container > .corporate-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  #corporate .corporate-cards {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 20px !important;
  }

  #corporate .corporate-card {
    width: 100% !important;
  }
}

/* Ultra-specific mobile override — force exact DOM paths to stack */
@media (max-width: 768px) {
  /* Art Advisory: force container and inner blocks to behave like a vertical flow */
  html body #art-advisory .container {
    display: block !important;
    width: 100% !important;
  }
  html body #art-advisory .container > .advisory-content,
  html body #art-advisory .container > .advisory-content > .advisory-info-box,
  html body #art-advisory .container > .advisory-content > .advisory-cards {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    width: 100% !important;
  }
  html body #art-advisory .advisory-cards {
    grid-template-columns: 1fr !important;
  }
  html body #art-advisory .advisory-image,
  html body #art-advisory .advisory-portrait {
    width: 240px !important;
    height: auto !important;
    margin: 0 0 16px !important;
    align-self: center !important;
  }

  /* Corporate: same approach */
  html body #corporate .container {
    display: block !important;
    width: 100% !important;
  }
  html body #corporate .container > .corporate-content,
  html body #corporate .corporate-cards {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    width: 100% !important;
  }
  html body #corporate .corporate-cards {
    grid-template-columns: 1fr !important;
  }
  html body #corporate .corporate-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}