/* ===========================================
   BOSPHORUS PEARL - 111w57.com Birebir Klon
   Renk: #7c7262 (Orijinal 111w57 Kahverengisi)
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Suisse+Int%27l:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=DM+Sans:wght@300;400;500&display=swap');

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

html { font-size: 10px; scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', sans-serif;
    background-color: #f5f4f0; /* Exact 111w57 off-white */
    color: #7c7262;             /* Exact 111w57 brown */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: none; /* Custom cursor like 111w57 */
}

/* --- CUSTOM CURSOR --- */
#cursor {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #7c7262;
    position: fixed;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 99999;
    transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease;
}
#cursor-follower {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(124, 114, 98, 0.5);
    position: fixed;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 99998;
    transition: transform 0.4s ease, width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
}
a:hover ~ #cursor, button:hover ~ #cursor { transform: translate(-50%,-50%) scale(2.5); }

/* ==========================================
   PRELOADER (Exact 111w57 kahverengi ekran)
   ========================================== */
#preloader {
    position: fixed;
    inset: 0;
    background-color: #7c7262; /* The EXACT 111w57 preloader color */
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#preloader-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
#preloader-logo span {
    font-family: 'EB Garamond', serif;
    color: #f5f4f0;
    font-size: clamp(8rem, 18vw, 22rem);
    font-weight: 400;
    display: block;
}
#preloader-sides {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 4rem;
    pointer-events: none;
}
#preloader-sides span {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(245, 244, 240, 0.7);
}
.preloader-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: rgba(245,244,240,0.3);
    width: 0%;
    transition: width 1.5s ease;
}

/* ==========================================
   GLOBAL HEADER
   ========================================== */
#site-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    height: 6rem;
    pointer-events: none;
}
#site-header.on-white {
    /* When scrolled past hero - colors switch */
}

/* LEFT: Menu Button */
#menu-btn {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    pointer-events: auto;
    cursor: none;
    background: none;
    border: none;
    color: #f5f4f0;
    mix-blend-mode: difference;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.menu-lines {
    width: 2.8rem;
    height: 1.2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.menu-line {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.77,0,0.175,1), opacity 0.3s;
}
.menu-line-text {
    overflow: hidden;
    height: 1.5rem;
    position: relative;
}
.menu-line-text span {
    display: block;
    transition: transform 0.5s cubic-bezier(0.77,0,0.175,1);
}
.menu-line-text .close-txt {
    position: absolute;
    top: 100%;
    left: 0;
}

/* Active (X) state */
#menu-btn.active .menu-line:nth-child(1) { transform: rotate(45deg) translate(0.35rem, 0.35rem); }
#menu-btn.active .menu-line:nth-child(2) { transform: rotate(-45deg) translate(0.35rem, -0.35rem); }
#menu-btn.active .menu-line-text .menu-txt { transform: translateY(-100%); }
#menu-btn.active .menu-line-text .close-txt { transform: translateY(-100%); }

/* CENTER: Logo */
#header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #f5f4f0;
    mix-blend-mode: difference;
    opacity: 0;
    pointer-events: auto;
    text-decoration: none;
    transition: opacity 0.5s;
    white-space: nowrap;
}
#header-logo.visible { opacity: 1; }

/* RIGHT: Inquire */
#inquire-btn {
    pointer-events: auto;
    cursor: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #f5f4f0;
    padding: 1rem 2rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f5f4f0;
    mix-blend-mode: difference;
    text-decoration: none;
    background: none;
    transition: all 0.4s ease;
}
#inquire-btn svg { width: 1.2rem; transition: transform 0.3s ease; }
#inquire-btn:hover svg { transform: translateX(4px); }

/* ==========================================
   HERO SECTION — Full screen like 111w57
   ========================================== */
#hero {
    position: relative;
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    background-color: #7c7262;
}
#hero-img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
    transform: scale(1.05);
    transform-origin: center center;
    will-change: transform;
}

/* CENTER HERO LOGO (Big, shrinks on scroll) */
#hero-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    will-change: transform, opacity;
}
#hero-logo-text {
    font-family: 'EB Garamond', serif;
    font-size: clamp(8rem, 16vw, 20rem);
    font-weight: 400;
    color: #f5f4f0;
    text-align: center;
    mix-blend-mode: overlay;
    display: flex;
    flex-direction: column;
}
.logo-row-1 { transform: translateX(-5vw); }
.logo-row-2 { transform: translateX(5vw); }

/* ==========================================
   INNER PAGE HERO
   ========================================== */
.section-inner-hero {
    position: relative;
    width: 100vw;
    height: 70svh;
    background: #7c7262;
    display: flex;
    align-items: flex-end;
    padding: 6rem;
    overflow: hidden;
}
.inner-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    transform: scale(1.05);
}
.inner-hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
}
.inner-hero-title {
    font-family: 'EB Garamond', serif;
    font-size: clamp(5rem, 10vw, 12rem);
    font-weight: 400;
    color: #f5f4f0;
    margin-bottom: 2rem;
}
.inner-hero-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(245, 244, 240, 0.8);
}

@media (max-width: 768px) {
    .section-inner-hero { padding: 4rem 2.5rem; height: 60svh; }
}

/* ==========================================
   SECTION 1: Big Text
   ========================================== */
#hero-logo-text .logo-row-1 { font-size: clamp(6rem, 10vw, 14rem); display: block; }
#hero-logo-text .logo-row-2 { font-size: clamp(8rem, 14vw, 20rem); display: block; }
#hero-logo-text .logo-row-3 { font-size: clamp(6rem, 10vw, 14rem); display: block; }

/* ENDLESS / HORIZONS sides on hero */
#hero-sides {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 4rem;
    z-index: 10;
    pointer-events: none;
}
#hero-sides span {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(245,244,240,0.7);
    writing-mode: horizontal-tb;
}

/* ==========================================
   SECTION 1: Big headline text
   ========================================== */
.section-big-text {
    background: #f5f4f0;
    padding: 12rem 6rem;
}
.section-big-text p {
    font-family: 'EB Garamond', serif;
    font-size: clamp(3.5rem, 5.5vw, 7.5rem);
    font-weight: 400;
    color: #7c7262;
    max-width: 85%;
}

/* ==========================================
   SECTION: MÜLK ÖZELLİKLERİ (Property Specs)
   ========================================== */
.section-specs {
    background: #f5f4f0;
    padding: 10rem 6rem 8rem;
    border-top: 1px solid rgba(124, 114, 98, 0.2);
}
.specs-header {
    margin-bottom: 8rem;
}
.specs-eyebrow {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 2rem;
}
.specs-title {
    font-family: 'EB Garamond', serif;
    font-size: clamp(4rem, 6vw, 8rem);
    font-weight: 400;
    color: #7c7262;
}

/* 4 Big Numbers across the top */
.specs-numbers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 8rem;
}
.spec-num {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(124, 114, 98, 0.3);
    padding-top: 2.5rem;
}
.spec-num .spec-value {
    font-family: 'EB Garamond', serif;
    font-size: clamp(5rem, 7vw, 10rem);
    font-weight: 400;
    color: #7c7262;
    display: inline;
}
.spec-num .spec-unit {
    font-family: 'EB Garamond', serif;
    font-size: clamp(2rem, 3vw, 4rem);
    font-weight: 400;
    color: #7c7262;
    opacity: 0.5;
    vertical-align: super;
    margin-left: 0.3rem;
}
.spec-num .spec-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 1.5rem;
}

/* Divider */
.specs-divider {
    height: 1px;
    background: rgba(124, 114, 98, 0.2);
    margin-bottom: 6rem;
}

/* 2-column detail list */
.specs-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 6rem;
}
.specs-col {
    display: flex;
    flex-direction: column;
}
.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2rem 0;
    border-bottom: 1px solid rgba(124, 114, 98, 0.15);
    gap: 2rem;
}
.spec-row-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.55;
    flex-shrink: 0;
}
.spec-row-value {
    font-family: 'EB Garamond', serif;
    font-size: 1.9rem;
    font-weight: 400;
    color: #7c7262;
    text-align: right;
}

@media (max-width: 1024px) {
    .specs-numbers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .section-specs { padding: 7rem 2.5rem 6rem; }
    .specs-numbers { grid-template-columns: repeat(2, 1fr); }
    .specs-list { grid-template-columns: 1fr; gap: 0; }
    .spec-row-value { font-size: 1.6rem; }
}

/* ==========================================
   SECTION 2: Image Grid (Dual column)
   ========================================== */
.section-img-grid {
    background: #f5f4f0;
    padding: 0 6rem 12rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}
.section-img-grid .img-big {
    height: 70vh;
    overflow: hidden;
}
.section-img-grid .img-small {
    height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.section-img-grid img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}
.section-img-grid .img-big:hover img,
.section-img-grid .img-small:hover img { transform: scale(1.03); }
.img-caption {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    color: #7c7262;
    opacity: 0.7;
    padding: 1.5rem 0 0;
}

/* ==========================================
   SECTION 3: Quote
   ========================================== */
.section-quote {
    background: #f5f4f0;
    padding: 8rem 6rem;
    text-align: center;
}
.section-quote blockquote {
    font-family: 'EB Garamond', serif;
    font-size: clamp(3rem, 5vw, 6.5rem);
    font-weight: 400;
    color: #7c7262;
    max-width: 90%;
    margin: 0 auto 3rem;
}
.section-quote cite {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.3rem;
    color: #7c7262;
    opacity: 0.6;
    font-style: normal;
    letter-spacing: 0.02em;
}

/* ==========================================
   SECTION 4: Full width image
   ========================================== */
.section-fullwidth-img {
    width: 100%;
    height: 90vh;
    overflow: hidden;
    background: #f5f4f0;
}
.section-fullwidth-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    will-change: transform;
}

/* ==========================================
   SECTION 5: Split (text left, image right)
   ========================================== */
.section-split {
    background: #f5f4f0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.section-split .split-text {
    padding: 10rem 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.section-split .split-text .eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 3rem;
    opacity: 0.7;
}
.section-split .split-text h2 {
    font-family: 'EB Garamond', serif;
    font-size: clamp(4rem, 5vw, 7rem);
    font-weight: 400;
    margin-bottom: 3rem;
}
.section-split .split-text p {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.6rem;
    line-height: 1.6;
    max-width: 42rem;
    margin-bottom: 4rem;
    opacity: 0.85;
}
.section-split .split-image {
    overflow: hidden;
    height: 80vh;
}
.section-split .split-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}
.section-split:hover .split-image img { transform: scale(1.02); }

/* ==========================================
   BTN (Exact 111w57 button style)
   ========================================== */
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    border: 1px solid #7c7262;
    padding: 1.2rem 2.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7c7262;
    text-decoration: none;
    background: transparent;
    cursor: none;
    transition: background 0.4s ease, color 0.4s ease;
}
.btn-outline:hover {
    background: #7c7262;
    color: #f5f4f0;
}
.btn-outline svg { width: 1.2rem; transition: transform 0.3s ease; }
.btn-outline:hover svg { transform: translateX(4px); }

/* ==========================================
   SECTION: DRAGGABLE HORIZONTAL CAROUSEL
   ========================================== */
.section-carousel {
    background: #f5f4f0;
    padding: 8rem 0 8rem 6rem; /* Left padding, NO right padding so cards bleed */
    overflow: hidden;
    user-select: none;
}
.carousel-track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    cursor: grab;
    padding-right: 6rem; /* So last card doesn't touch edge */
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.card-item {
    display: block;
    text-decoration: none;
    color: #7c7262;
    flex: 0 0 32rem; /* Fixed width, doesn't shrink */
    min-width: 32rem;
}
.card-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none; /* Prevents drag interference */
}
.card-item:hover .card-img-wrap img { transform: scale(1.04); }
.card-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7c7262;
    transition: gap 0.3s ease;
}
.card-item:hover .card-label { gap: 1.5rem; }
.card-label svg { flex-shrink: 0; transition: transform 0.3s ease; }
.card-item:hover .card-label svg { transform: translateX(4px); }

/* ==========================================
   SECTION: SPLIT CARD (Text + Image side by side)
   ========================================== */
.section-split-card {
    background: #f5f4f0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
    border-top: 1px solid rgba(124, 114, 98, 0.15);
}
.section-split-card--reversed {
    direction: rtl;
}
.section-split-card--dark {
    background: #eae8e2;
}
.split-card-text {
    direction: ltr;
    padding: 8rem 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
}
.split-card-text .eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.7;
}
.split-card-text p {
    font-family: 'EB Garamond', serif;
    font-size: clamp(2.5rem, 3.5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.2;
    color: #7c7262;
}
.split-card-image {
    direction: ltr;
    overflow: hidden;
}
.split-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}
.section-split-card:hover .split-card-image img { transform: scale(1.02); }

@media (max-width: 768px) {
    .section-carousel { padding: 6rem 0 6rem 2.5rem; }
    .card-item { flex: 0 0 26rem; min-width: 26rem; }
    .section-split-card { grid-template-columns: 1fr; direction: ltr; }
    .section-split-card--reversed { direction: ltr; }
    .split-card-text { padding: 6rem 2.5rem; }
    .split-card-image { min-height: 50vw; }
}

.card-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 4; /* Tall portrait cards like 111w57 */
    overflow: hidden;
}
.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card-item:hover .card-img-wrap img {
    transform: scale(1.04);
}
.card-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7c7262;
    transition: gap 0.3s ease;
}
.card-item:hover .card-label {
    gap: 1.5rem;
}
.card-label svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.card-item:hover .card-label svg {
    transform: translateX(4px);
}

/* ==========================================
   SECTION: TEXT + BUTTON (Design / Availability)
   ========================================== */
.section-text-btn {
    background: #f5f4f0;
    padding: 10rem 6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
    border-top: 1px solid rgba(124, 114, 98, 0.15);
}
.section-text-btn p {
    font-family: 'EB Garamond', serif;
    font-size: clamp(2.8rem, 4vw, 5.5rem);
    font-weight: 400;
    line-height: 1.2;
    color: #7c7262;
    max-width: 70rem;
}
.section-text-btn--dark {
    background: #e8e6e0; /* Slightly darker off-white, like 111w57's availability section */
}

@media (max-width: 768px) {
    .section-cards { padding: 0 2.5rem 4rem; }
    .cards-grid { grid-template-columns: 1fr; gap: 3rem; }
    .card-img-wrap { aspect-ratio: 4 / 3; }
    .section-text-btn { padding: 6rem 2.5rem; }
}

/* ==========================================
   CONTACT / INQUIRE OVERLAY (Slide up)
   ========================================== */
#contact-overlay {
    position: fixed;
    inset: 0;
    background: #7c7262; /* Same brown as preloader */
    z-index: 800;
    transform: translateY(100%);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: transform 0.9s cubic-bezier(0.77,0,0.175,1);
    color: #f5f4f0;
}
.contact-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 14rem 4rem 8rem;
    width: 100%;
    flex: 1;
}
.contact-inner h2 {
    font-family: 'EB Garamond', serif;
    font-size: clamp(4rem, 6vw, 8rem);
    font-weight: 400;
    color: #f5f4f0;
    margin-bottom: 6rem;
    }
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.form-field {
    border-bottom: 1px solid rgba(245,244,240,0.3);
    padding-bottom: 1.5rem;
    transition: border-color 0.3s;
}
.form-field:focus-within { border-color: #f5f4f0; }
.form-field label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(245,244,240,0.6);
    margin-bottom: 1rem;
}
.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.6rem;
    color: #f5f4f0;
    -webkit-appearance: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(245,244,240,0.4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.contact-footer {
    border-top: 1px solid rgba(245,244,240,0.2);
    padding: 3rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contact-footer span {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    color: rgba(245,244,240,0.6);
}

/* ==========================================
   MENU OVERLAY (Slide in from left/top)
   ========================================== */
#menu-overlay {
    position: fixed;
    inset: 0;
    background: #7c7262;
    z-index: 400;
    display: grid;
    grid-template-columns: auto 1fr;
    transform: translateX(-100%);
    transition: transform 0.9s cubic-bezier(0.77,0,0.175,1);
    overflow: hidden;
}
#menu-overlay.open { transform: translateX(0); }
.menu-image-panel {
    width: 40rem;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.menu-image-panel img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.menu-image-panel img.active {
    opacity: 1;
    transform: scale(1);
}
.menu-nav-panel {
    padding: 8rem 6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.menu-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.menu-nav-links a {
    display: block;
    font-family: 'EB Garamond', serif;
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    font-weight: 400;
    color: #f5f4f0;
    text-decoration: none;
    transition: opacity 0.3s;
    cursor: none;
    transform: translateX(-3rem);
    opacity: 0;
}
#menu-overlay.open .menu-nav-links a {
    transform: translateX(0);
    opacity: 1;
}
.menu-nav-links a:nth-child(1) { transition-delay: 0.1s; }
.menu-nav-links a:nth-child(2) { transition-delay: 0.15s; }
.menu-nav-links a:nth-child(3) { transition-delay: 0.2s; }
.menu-nav-links a:nth-child(4) { transition-delay: 0.25s; }
.menu-nav-links a:nth-child(5) { transition-delay: 0.3s; }
.menu-nav-links a:nth-child(6) { transition-delay: 0.35s; }
.menu-nav-links a:hover { opacity: 0.6; }
.menu-bottom-links {
    display: flex;
    align-items: center;
    gap: 3rem;
    color: rgba(245,244,240,0.6);
    font-family: 'DM Sans', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.menu-bottom-links a {
    color: inherit;
    text-decoration: none;
    cursor: none;
}
.menu-phone {
    margin-left: auto;
    font-size: 1.8rem;
    color: #f5f4f0;
}

/* ==========================================
   FOOTER
   ========================================== */
footer {
    background: #f5f4f0;
    padding: 6rem;
    border-top: 1px solid rgba(124,114,98,0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}
.footer-logo {
    font-family: 'EB Garamond', serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}
.footer-links {
    display: flex;
    gap: 3rem;
}
.footer-links a {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #7c7262;
    opacity: 0.7;
    transition: opacity 0.3s;
    cursor: none;
}
.footer-links a:hover { opacity: 1; }
.footer-copy {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    opacity: 0.5;
    width: 100%;
    text-align: center;
    border-top: 1px solid rgba(124,114,98,0.15);
    padding-top: 3rem;
    margin-top: 2rem;
}

/* ==========================================
   TEXT ANIMATION UTILS
   ========================================== */
.reveal-wrap {
    overflow: hidden;
    display: block;
}
.reveal-inner {
    display: block;
    transform: translateY(105%);
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-visible .reveal-inner {
    transform: translateY(0%);
}
/* Stagger delays */
.stagger-1 .reveal-inner { transition-delay: 0.05s; }
.stagger-2 .reveal-inner { transition-delay: 0.1s; }
.stagger-3 .reveal-inner { transition-delay: 0.15s; }
.stagger-4 .reveal-inner { transition-delay: 0.2s; }
.stagger-5 .reveal-inner { transition-delay: 0.25s; }

/* Fade up utility */
.fade-up {
    opacity: 0;
    transform: translateY(4rem);
    transition: opacity 1s ease, transform 1s ease;
}
.fade-up.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
    .section-big-text { padding: 8rem 2.5rem; }
    .section-img-grid { grid-template-columns: 1fr; padding: 0 2.5rem 8rem; }
    .section-img-grid .img-big, .section-img-grid .img-small { height: 50vw; }
    .section-quote { padding: 6rem 2.5rem; }
    .section-split { grid-template-columns: 1fr; }
    .section-split .split-text { padding: 6rem 2.5rem; }
    .section-split .split-image { height: 60vw; }
    .section-explore { padding: 8rem 2.5rem; }
    .explore-header { flex-direction: column; gap: 3rem; }
    .menu-image-panel { display: none; }
    .menu-nav-panel { padding: 8rem 3rem; }
    footer { padding: 4rem 2.5rem; }
    .form-row { grid-template-columns: 1fr; }
    .contact-inner { padding: 12rem 2.5rem 6rem; }
}

#contact-overlay .btn-outline {
    color: #f5f4f0;
    border-color: rgba(245,244,240,0.4);
}
#contact-overlay .btn-outline:hover {
    border-color: #f5f4f0;
}

/* Contact Overlay Agent Split */
.contact-split {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 8rem;
    align-items: center;
}
.contact-agent {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid rgba(245,244,240,0.2);
    padding-right: 6rem;
}
.contact-agent img {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 2rem;
    border: 3px solid rgba(245,244,240,0.5);
}
.contact-agent h3 {
    font-family: 'EB Garamond', serif;
    font-size: 3.5rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}
.contact-agent p {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.4rem;
    color: rgba(245,244,240,0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.contact-form-wrapper h2 {
    margin-bottom: 4rem;
}
@media(max-width: 900px) {
    .contact-split {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    .contact-agent {
        border-right: none;
        border-bottom: 1px solid rgba(245,244,240,0.2);
        padding-right: 0;
        padding-bottom: 4rem;
    }
}