/* ================= БАЗОВЫЕ НАСТРОЙКИ И ШРИФТЫ ================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

:root {
    /* Цвета стали темнее и контрастнее */
    --color-text: #1a1a1a;       /* Почти черный для основного текста */
    --color-text-light: #444444; /* Темно-серый вместо бледного #666 */
    --color-border: #eaeaea;
    --bg-light: #faf9f7;
    --color-blue-grey: #5c6b77;  /* Сделали фирменный цвет заголовков темнее и глубже */
}

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

body {
    font-family: 'Cormorant Garamond', 'Didot', serif;
    background-color: var(--bg-light);
    color: var(--color-text);
    font-size: 18px; /* Увеличили базовый шрифт */
    overscroll-behavior-y: none; 
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased; /* Делает шрифты более четкими */
}

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

ul {
    list-style: none;
}

/* ================= 1. ГЛАВНЫЙ ЭКРАН (SPLIT HERO) ================= */
.hero-header { position: relative; width: 100%; height: 100vh; display: flex; overflow: hidden; background-color: #000; }
.hero-half { flex: 1; height: 100%; position: relative; overflow: hidden; }
.hero-left { border-right: 1px solid rgba(255, 255, 255, 0.2); }
.bg-image { width: 100%; height: 120%; top: -10%; position: absolute; background-size: cover; background-position: center; filter: brightness(0.85); transition: transform 0.1s ease-out; }
.hero-ui { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }

.menu-burger { position: absolute; top: 40px; left: 40px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; pointer-events: auto; }
.menu-burger span { display: block; width: 30px; height: 1px; background-color: #fff; transition: width 0.3s ease; }
.menu-burger:hover span:last-child { width: 20px; }

.top-monogram { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); pointer-events: auto; }

.center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 90%; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }
.main-title { font-size: 7vw; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; margin-bottom: 10px; line-height: 1; }
.sub-title { font-size: 26px; font-weight: 400; font-style: italic; letter-spacing: 1px; color: rgba(255, 255, 255, 1); } /* Сделали 100% белым, без прозрачности */

.bottom-destinations { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); font-family: Arial, sans-serif; font-size: 11px; color: #fff; letter-spacing: 4px; text-transform: uppercase; opacity: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } /* Крупнее и ярче */

.content-below { position: relative; z-index: 20; background-color: var(--bg-light); box-shadow: 0 -10px 30px rgba(0,0,0,0.1); }


/* ================= 2. НАВИГАЦИЯ (УМНОЕ ВЕРХНЕЕ МЕНЮ) ================= */
.top-nav {
    position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 40px;
    background-color: rgba(250, 249, 247, 0.98); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); transform: translateY(-100%); 
}
.top-nav.nav-visible { transform: translateY(0); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.top-nav.nav-hidden { transform: translateY(-100%); }

body.internal-page { padding-top: 70px; }
body.internal-page .top-nav { transform: translateY(0); }

.nav-empty-left { flex: 1; }
.nav-links { flex: 6; display: flex; justify-content: center; gap: 2.5vw; }
.nav-links a { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: var(--color-text-light); font-family: Arial, sans-serif; white-space: nowrap; transition: color 0.3s ease; }
.nav-links a:hover { color: #000; }
.nav-socials { flex: 1; display: flex; justify-content: flex-end; gap: 15px; font-size: 12px; font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: 2px; color: var(--color-text-light); }
.nav-socials a:hover { color: #000; }


/* ================= 3. ВНУТРЕННИЕ ЗАГОЛОВКИ ================= */
.page-header { text-align: center; padding: 100px 20px 60px; }
.page-title { font-size: 52px; font-weight: 400; font-style: italic; color: var(--color-blue-grey); margin-bottom: 15px; } /* Крупнее и ярче */
.page-subtitle { font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 4px; color: #555; text-transform: uppercase; } /* Сделали #555 вместо #888 */


/* ================= 4. ВСТУПЛЕНИЕ / КОЛЛАЖ (ГЛАВНАЯ) ================= */
.editorial-intro { position: relative; padding-bottom: 120px; }
.cloud-background { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-size: cover; background-position: center; background-color: #e6e3dd; z-index: 0; }
.collage-container { position: relative; max-width: 1100px; margin: 0 auto; height: 900px; z-index: 2; }
.col-img { position: absolute; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.img-center { width: 38%; height: 750px; left: 50%; transform: translateX(-50%); top: 60px; z-index: 1; }
.img-left { width: 26%; height: 380px; left: 10%; top: 250px; z-index: 2; }
.img-right { width: 29%; height: 520px; right: 12%; top: 170px; z-index: 2; }

.intro-text-block { position: relative; z-index: 2; max-width: 750px; margin: 40px auto 0; text-align: center; padding: 0 20px; }
.intro-heading { font-size: 44px; font-weight: 400; font-style: italic; color: var(--color-blue-grey); line-height: 1.2; margin-bottom: 25px; letter-spacing: 0.5px; }
.intro-subheading { font-family: Arial, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 4px; color: #555; margin-bottom: 30px; }
.intro-paragraph { font-size: 19px; color: #444; line-height: 1.8; } /* Значительно увеличили текст и сделали контрастным */


/* ================= 5. О СЕБЕ / ОБ УСЛУГЕ ================= */
.about-section { padding: 100px 0; background-color: #fff; }
.about-container { display: flex; align-items: center; justify-content: space-between; gap: 80px; max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.about-images { flex: 1.2; position: relative; height: 550px; display: flex; align-items: center; }
.about-img-small { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 45%; object-fit: cover; box-shadow: 0 5px 20px rgba(0,0,0,0.05); z-index: 1; }
.about-img-large { position: absolute; right: 0; top: 0; width: 65%; height: 100%; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,0.08); z-index: 2; }
.about-text { flex: 1; }

.about-title { font-size: 46px; font-weight: 400; font-style: italic; color: var(--color-blue-grey); margin-bottom: 15px; letter-spacing: 0.5px; }
.about-subtitle { font-family: Arial, sans-serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #555; margin-bottom: 30px; }
.about-paragraph { font-size: 18px; color: #444; line-height: 2.2; margin-bottom: 35px; } /* Шрифт стал 18px вместо 14px */
.about-link { font-family: Arial, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: #222; border-bottom: 1px solid #222; padding-bottom: 5px; }
.about-link:hover { opacity: 0.6; }


/* ================= 6. ЦИТАТА / ОТЗЫВ ================= */
.quote-section { padding: 20px 0 120px; background-color: #fff; text-align: center; }
.quote-container { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.quote-icon { font-family: 'Cormorant Garamond', serif; font-size: 80px; color: #b8c4cb; line-height: 1; margin-bottom: -10px; } /* Сделали кавычки темнее */
.quote-text { font-size: 36px; font-weight: 400; font-style: italic; color: var(--color-blue-grey); line-height: 1.3; margin-bottom: 25px; }
.quote-paragraph { font-size: 17px; color: #555; line-height: 2; margin-bottom: 35px; max-width: 700px; margin-left: auto; margin-right: auto; }
.quote-author { font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; color: #444; }


/* ================= 7. ДВЕ КАРТОЧКИ ССЫЛОК ================= */
.dual-links-section { padding: 150px 0; background-size: cover; background-position: center; background-color: #f4f2ec; }
.dual-links-container { display: flex; justify-content: center; gap: 30px; max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.dual-link-card { position: relative; display: block; width: 40%; overflow: hidden; }
.dual-link-img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1); filter: brightness(0.9); }
.dual-link-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Cormorant Garamond', serif; font-size: 42px; font-style: italic; color: #fff; white-space: nowrap; text-shadow: 0 4px 20px rgba(0,0,0,0.5); pointer-events: none; }
.dual-link-card:hover .dual-link-img { transform: scale(1.05); filter: brightness(0.8); }


/* ================= 8. ПРИЗЫВ К ДЕЙСТВИЮ (CTA) ================= */
.cta-section { 
    position: relative; 
    width: 100%; 
    height: 600px; 
    background-size: cover; 
    background-position: center; 
    background-color: #d8d3cd; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden; 
    /* Добавляем эффект параллакса для фоновой картинки */
    background-attachment: fixed; 
}

.cta-overlay-bg { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0, 0, 0, 0.2); /* Чуть затемняем фон */
}

.cta-content { 
    position: relative; z-index: 2; width: 100%; display: flex; justify-content: center;
}

/* Эффект матового стекла (Glassmorphism) */
.cta-glass-box {
    padding: 80px 100px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Тонкая полупрозрачная белая рамка */
    background: rgba(255, 255, 255, 0.1); /* Полупрозрачный белый фон */
    backdrop-filter: blur(10px); /* Главная магия: размытие фона ПОД блоком */
    -webkit-backdrop-filter: blur(10px); /* Поддержка для Safari */
    transition: transform 0.5s ease, background 0.5s ease;
}

/* Эффект при наведении на весь стеклянный блок */
.cta-glass-box:hover {
    transform: scale(1.02);
    background: rgba(255, 255, 255, 0.15);
}

.cta-heading { 
    font-size: 80px; 
    font-weight: 400; 
    font-style: italic; 
    color: #fff; 
    text-shadow: 0 4px 20px rgba(0,0,0,0.3); 
    margin-bottom: 35px; 
    white-space: nowrap; 
}

.cta-btn { 
    font-family: Arial, sans-serif; 
    font-size: 13px; 
    font-weight: bold; 
    letter-spacing: 5px; 
    text-transform: uppercase; 
    color: #fff; 
    border-bottom: 2px solid #fff; 
    padding-bottom: 6px; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); 
    transition: all 0.3s; 
    display: inline-block;
}

/* Кнопка красиво реагирует на мышку */
.cta-btn:hover { 
    opacity: 0.8; 
    padding-bottom: 10px; /* Линия подчеркивания плавно опускается ниже */
}


/* ================= 9. ПОДВАЛ (FOOTER) ================= */
.site-footer { background-size: cover; background-position: center; background-color: #f4f2ec; padding: 80px 0 60px; border-top: 1px solid rgba(0,0,0,0.05); }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-header { text-align: center; margin-bottom: 50px; }
.footer-monogram { margin: 0 auto 20px; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-blue-grey); border-radius: 50%; color: var(--color-blue-grey); font-size: 36px; font-family: 'Cormorant Garamond', serif; }
.footer-brand { font-size: 20px; font-family: Arial, sans-serif; letter-spacing: 5px; color: var(--color-text); margin-bottom: 15px; font-weight: 600; }
.footer-destinations { font-family: Arial, sans-serif; font-size: 11px; letter-spacing: 4px; color: #555; }

.footer-middle { display: grid; grid-template-columns: 1fr auto 1fr; gap: 60px; align-items: center; margin-bottom: 80px; max-width: 1000px; margin-left: auto; margin-right: auto; }
.footer-col-text { font-size: 14px; color: #444; line-height: 2; letter-spacing: 0.5px; } /* Шрифт футера увеличен с 11px до 14px */
.left-text { text-align: right; }
.right-text { text-align: left; }
.mb-text { margin-bottom: 15px; letter-spacing: 2px; font-weight: bold; font-size: 12px;}

.footer-insta { display: flex; gap: 15px; }
.footer-insta img { width: 120px; height: 120px; object-fit: cover; opacity: 1; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.3s; }
.footer-insta img:hover { transform: scale(1.05); }

.footer-nav-bottom ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; }
.footer-nav-bottom a { font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 3px; color: #555; text-transform: uppercase; transition: color 0.3s; }
.footer-nav-bottom a:hover { color: #000; }


/* ================= 10. ПОРТФОЛИО И БЛОГ (СЕТКИ) ================= */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto 120px; padding: 0 20px; }
.portfolio-item img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.5s ease; }
.portfolio-item:hover img { transform: translateY(-10px); }

.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 40px; max-width: 1000px; margin: 0 auto 120px; padding: 0 20px; }
.blog-post { display: block; }
.blog-post img { width: 100%; height: 450px; object-fit: cover; margin-bottom: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.blog-date { font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 3px; color: #555; text-transform: uppercase; margin-bottom: 10px; display: block; }
.blog-title { font-size: 36px; font-weight: 400; font-style: italic; color: var(--color-blue-grey); margin-bottom: 15px; }
.blog-excerpt { font-size: 18px; color: #444; line-height: 1.8; margin-bottom: 20px; }
.read-more { font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; letter-spacing: 3px; color: #222; text-transform: uppercase; border-bottom: 1px solid #222; padding-bottom: 3px; }


/* ================= 11. ФОРМА СВЯЗИ ================= */
.contact-wrapper { max-width: 600px; margin: 0 auto 120px; padding: 0 20px; }
.contact-form { display: flex; flex-direction: column; gap: 40px; }
.form-group { display: flex; flex-direction: column; }
.form-group label { font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; color: #444; margin-bottom: 10px; }
.contact-form input, .contact-form textarea { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--color-text); padding: 10px 0; border: none; border-bottom: 1px solid #aaa; background: transparent; outline: none; transition: border-color 0.3s ease; }
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: #111; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.submit-btn { align-self: flex-start; background: transparent; border: none; font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; color: #111; border-bottom: 2px solid #111; padding-bottom: 5px; cursor: pointer; margin-top: 10px; transition: opacity 0.3s; }
.submit-btn:hover { opacity: 0.6; }


/* ================= 12. СВАДЕБНОЕ ВИДЕО ================= */
.video-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto 120px; padding: 0 20px; }
.featured-video { grid-column: 1 / -1; }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); background-color: #000; }
.video-wrapper iframe, .video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; outline: none; border: none;}


/* ================= АДАПТИВНОСТЬ (МОБИЛЬНЫЕ) ================= */
@media (max-width: 900px) {
    .top-nav { flex-direction: column; gap: 20px; padding: 20px; }
    .nav-links { flex-wrap: wrap; justify-content: center; gap: 15px; }
    .nav-socials { justify-content: center; }
    
    .hero-header { flex-direction: column; }
    .hero-half { width: 100%; height: 50%; }
    .hero-left { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
    .main-title { font-size: 12vw; white-space: normal; }
    .sub-title { font-size: 20px; }
    .menu-burger { top: 20px; left: 20px; }
    .top-monogram { top: 20px; }
    .bottom-destinations { bottom: 20px; font-size: 10px; width: 100%; text-align: center; }
    
    .page-title { font-size: 40px; }
    
    .collage-container { height: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 40px; }
    .col-img { position: relative; left: auto !important; right: auto !important; top: auto !important; transform: none !important; width: 90% !important; height: auto !important; aspect-ratio: 4/5; }
    .cloud-background { height: 100%; }
    .intro-heading { font-size: 32px; }
    
    .about-container { flex-direction: column; text-align: center; gap: 40px; }
    .about-images { width: 100%; height: auto; min-height: 400px; display: flex; justify-content: center; align-items: center; gap: 20px; position: relative; }
    .about-img-small, .about-img-large { position: relative; left: auto; right: auto; top: auto; transform: none; width: 45%; height: auto; aspect-ratio: 4/5; }
    
    .quote-text { font-size: 28px; }
    
    .dual-links-section { padding: 80px 0; }
    .dual-links-container { flex-direction: column; align-items: center; gap: 40px; }
    .dual-link-card { width: 85%; }
    
    .cta-section { height: 400px; }
    .cta-center-img { width: 200px; height: 280px; }
    .cta-heading { font-size: 55px; }
    
    .portfolio-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .video-gallery { grid-template-columns: 1fr; gap: 20px; }
    
    .footer-middle { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .left-text, .right-text { text-align: center; padding: 0 20px; }
    .footer-insta { justify-content: center; flex-wrap: wrap; }
    .footer-insta img { width: 100px; height: 100px; }
    .footer-nav-bottom ul { gap: 15px; }
}