:root {
            --red: #c00c0f;
            --wine: #8f0508;
            --ink: #4c4a4d;
            --night: #1e1c20;
            --cream: #f8f5f2;
            --white: #fff;
            --gold: #d9b881;
            --muted: #817b7d;
            --line: #e9e3e0;
            --serif: 'Playfair Display', Georgia, serif;
            --sans: 'DM Sans', Arial, sans-serif;
            --display: 'Manrope', Arial, sans-serif
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth;
            overflow-x: clip
        }

        body {
            margin: 0;
            background: var(--cream);
            color: var(--ink);
            font-family: 'DM Sans', Arial, sans-serif;
            line-height: 1.5;
            overflow-x: hidden
        }

        a {
            text-decoration: none;
            color: inherit
        }

        img {
            display: block;
            max-width: 100%
        }

        .container {
            width: min(1200px, calc(100% - 48px));
            margin: auto
        }

        .eyebrow {
            font: 700 .68rem/1 var(--display);
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--red)
        }

        .section {
            padding: 120px 0
        }

        .section-head {
            max-width: 690px;
            margin-bottom: 52px
        }

        .section-head h2 {
            font: 600 clamp(2.25rem, 4.3vw, 4rem)/1.08 var(--serif);
            letter-spacing: -.04em;
            color: var(--night);
            margin: 13px 0 17px
        }

        .section-head p {
            font-size: 1.03rem;
            line-height: 1.7;
            color: var(--muted);
            margin: 0
        }

        .button {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            border: 1px solid var(--red);
            padding: 14px 21px;
            background: var(--red);
            color: #fff;
            font: 700 .77rem/1 var(--display);
            letter-spacing: .08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: .28s;
            border-radius: 2px
        }

        .button:hover {
            background: var(--wine);
            border-color: var(--wine);
            transform: translateY(-3px);
            box-shadow: 0 12px 28px rgba(192, 12, 15, .22)
        }

        .button.light {
            color: var(--night);
            border-color: #fff;
            background: #fff
        }

        .button.light:hover {
            background: #f7eeee;
            border-color: #f7eeee
        }

        .button.ghost {
            background: transparent;
            border-color: rgba(255, 255, 255, .45);
            color: #fff
        }

        .button.ghost:hover {
            background: #fff;
            color: var(--red);
            border-color: #fff
        }

        .top {
            height: 37px;
            background: var(--night);
            color: #ddd8d8;
            font-size: .72rem
        }

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

        .top-contact {
            display: flex;
            gap: 22px
        }

        .top a:hover {
            color: #f4bfc0
        }

        .dot {
            height: 6px;
            width: 6px;
            background: #ed383b;
            border-radius: 50%;
            display: inline-block;
            margin: 0 7px 1px 0
        }

        .nav {
            height: 84px;
            position: absolute;
            top: 37px;
            left: 0;
            right: 0;
            z-index: 10;
            color: #fff;
            border-bottom: 1px solid rgba(255, 255, 255, .18)
        }

        .nav .container {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font: 600 1.15rem/1 var(--serif);
            letter-spacing: -.03em
        }

        .brand img {
            height: 48px;
            width: 120px;
            object-fit: contain;
            object-position: left center
        }

        .nav-links {
            display: flex;
            gap: 31px;
            font: 700 .72rem var(--display);
            letter-spacing: .08em;
            text-transform: uppercase
        }

        .nav-links a {
            transition: .2s
        }

        .nav-links a:hover {
            color: #f6b0b1
        }

        .nav-cta {
            padding: 11px 15px;
            font-size: .68rem
        }

        .hamburger {
            display: none;
            color: #fff;
            background: 0;
            border: 0;
            font-size: 25px
        }

        .hero {
            min-height: 770px;
            display: flex;
            align-items: end;
            position: relative;
            color: #fff;
            background: #322e30 url('../images/istanbul-bosphorus.webp') center/cover no-repeat
        }

        .hero:after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(22, 19, 22, .89) 0%, rgba(30, 25, 28, .63) 46%, rgba(30, 25, 28, .17) 100%), linear-gradient(0deg, rgba(20, 18, 21, .72), transparent 54%)
        }

        .hero:before {
            content: '';
            position: absolute;
            z-index: 1;
            width: 52vw;
            height: 52vw;
            border: 1px solid rgba(255, 255, 255, .27);
            border-radius: 50%;
            right: -20vw;
            top: -23vw
        }

        .hero-content {
            position: relative;
            z-index: 2;
            padding: 200px 0 130px;
            max-width: 800px
        }

        .hero-content .eyebrow {
            color: #fac4c5
        }

        .hero h1 {
            font: 600 clamp(3.8rem, 7.8vw, 7.4rem)/.95 var(--serif);
            letter-spacing: -.065em;
            margin: 16px 0 27px
        }

        .hero h1 i {
            font-weight: 600;
            color: #ffc9ca
        }

        .hero p {
            max-width: 570px;
            color: #efeaeb;
            font-size: 1.08rem;
            line-height: 1.7;
            margin: 0 0 34px
        }

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

        .scroll-cue {
            position: absolute;
            z-index: 3;
            bottom: 32px;
            right: max(24px, calc((100% - 1200px) / 2));
            display: flex;
            align-items: center;
            gap: 10px;
            font: 700 .64rem var(--display);
            letter-spacing: .16em;
            text-transform: uppercase;
            transform: rotate(90deg);
            transform-origin: right center
        }

        .scroll-cue:after {
            content: '→';
            font-size: 1.2rem
        }

        .search-panel {
            position: relative;
            z-index: 4;
            margin: -50px auto 0;
            width: min(1090px, calc(100% - 48px));
            background: #fff;
            box-shadow: 0 20px 65px rgba(38, 27, 28, .19);
            padding: 24px;
            display: grid;
            grid-template-columns:1.3fr 1fr 1fr auto;
            gap: 15px
        }

        .search-panel label {
            display: block;
            color: #9a9292;
            font: 700 .62rem var(--display);
            letter-spacing: .12em;
            text-transform: uppercase;
            margin: 0 0 8px
        }

        .search-panel select {
            width: 100%;
            border: 0;
            border-bottom: 1px solid #d9d2d0;
            background: #fff;
            color: var(--night);
            font: 600 .88rem var(--sans);
            padding: 0 0 10px;
            outline: none
        }

        .search-panel .button {
            align-self: end;
            padding: 13px 19px
        }

        .floating-word {
            position: absolute;
            z-index: 1;
            right: -.08em;
            bottom: -.23em;
            color: #f0ebe8;
            font: 700 clamp(8rem, 21vw, 22rem)/.8 var(--serif);
            letter-spacing: -.1em;
            user-select: none
        }

        .intro {
            position: relative;
            overflow: hidden
        }

        .story {
            display: grid;
            grid-template-columns:1.03fr .97fr;
            align-items: center;
            gap: 8vw
        }

        .story-visual {
            position: relative;
            height: 590px
        }

        .story-main {
            width: 78%;
            height: 88%;
            object-fit: cover;
            position: absolute;
            right: 0;
            top: 0;
            filter: saturate(.8)
        }

        .story-side {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 49%;
            height: 48%;
            object-fit: cover;
            border: 12px solid var(--cream);
            filter: saturate(.8)
        }

        .story-badge {
            position: absolute;
            z-index: 2;
            right: 5%;
            bottom: 6%;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: var(--red);
            color: #fff;
            display: grid;
            place-content: center;
            text-align: center;
            font: 600 1.1rem/1.1 var(--serif);
            box-shadow: 0 16px 30px rgba(192, 12, 15, .25)
        }

        .story-badge small {
            display: block;
            margin-top: 7px;
            font: 700 .55rem var(--display);
            letter-spacing: .14em;
            text-transform: uppercase
        }

        .story-text h2 {
            font: 600 clamp(2.3rem, 4.2vw, 3.85rem)/1.08 var(--serif);
            letter-spacing: -.045em;
            color: var(--night);
            margin: 13px 0 19px
        }

        .story-text > p {
            font-size: 1rem;
            color: var(--muted);
            line-height: 1.75;
            max-width: 520px
        }

        .signature {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 30px;
            font: 600 1.5rem var(--serif);
            color: var(--night)
        }

        .signature:before {
            content: '';
            height: 1px;
            width: 42px;
            background: var(--red)
        }

        .services {
            background: #fff;
            position: relative
        }

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

        .service {
            min-height: 390px;
            position: relative;
            overflow: hidden;
            padding: 31px;
            color: #fff;
            background: #342f32
        }

        .service img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .58;
            transition: transform .7s
        }

        .service:after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(25, 21, 24, .95), rgba(25, 21, 24, .05) 70%)
        }

        .service:hover img {
            transform: scale(1.08)
        }

        .service-body {
            position: absolute;
            z-index: 2;
            bottom: 0;
            padding: 31px
        }

        .service-num {
            color: #f39b9d;
            font: 700 .72rem var(--display);
            letter-spacing: .14em
        }

        .service h3 {
            margin: 10px 0 9px;
            font: 600 2rem var(--serif);
            letter-spacing: -.04em
        }

        .service p {
            margin: 0;
            color: #e6dedf;
            font-size: .88rem;
            line-height: 1.65
        }

        .arrow-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #fff;
            color: var(--red);
            margin-top: 17px;
            font-size: 1.2rem;
            transition: .25s
        }

        .arrow-link:hover {
            background: var(--red);
            color: #fff
        }

        .neighbourhoods {
            background: var(--night);
            position: relative;
            overflow: hidden
        }

        .neighbourhoods .section-head h2 {
            color: #fff
        }

        .neighbourhoods .section-head p {
            color: #bcb4b6
        }

        .neighbourhoods .eyebrow {
            color: #f29b9d
        }

        .area-grid {
            display: grid;
            grid-template-columns:1.15fr .85fr .85fr;
            grid-template-rows:235px 235px;
            gap: 14px
        }

        .area {
            position: relative;
            overflow: hidden;
            background: #555;
            color: #fff
        }

        .area:first-child {
            grid-row: 1/3
        }

        .area img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .55s;
            filter: saturate(.75)
        }

        .area:hover img {
            transform: scale(1.07)
        }

        .area:after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, rgba(18, 15, 17, .85), transparent 65%)
        }

        .area div {
            position: absolute;
            z-index: 2;
            bottom: 24px;
            left: 24px
        }

        .area small {
            display: block;
            color: #f9b9ba;
            font: 700 .63rem var(--display);
            letter-spacing: .14em;
            text-transform: uppercase
        }

        .area h3 {
            margin: 4px 0 0;
            font: 600 1.7rem var(--serif)
        }

        .journey {
            display: grid;
            grid-template-columns:.85fr 1.15fr;
            gap: 10vw;
            align-items: start
        }

        .journey-card {
            background: var(--red);
            padding: 45px 38px;
            color: #fff;
            position: sticky;
            top: 25px
        }

        .journey-card h2 {
            font: 600 2.65rem/1.07 var(--serif);
            letter-spacing: -.05em;
            margin: 13px 0 18px
        }

        .journey-card p {
            color: #ffe6e6;
            font-size: .93rem;
            line-height: 1.7
        }

        .journey-card .button {
            margin-top: 14px
        }

        .steps {
            border-top: 1px solid var(--line)
        }

        .step {
            display: grid;
            grid-template-columns:90px 1fr auto;
            gap: 20px;
            align-items: center;
            padding: 28px 0;
            border-bottom: 1px solid var(--line)
        }

        .step-no {
            font: 600 2.9rem/1 var(--serif);
            color: #d6cdca
        }

        .step h3 {
            margin: 0 0 5px;
            color: var(--night);
            font: 700 1.1rem var(--display)
        }

        .step p {
            margin: 0;
            color: var(--muted);
            font-size: .9rem
        }

        .step-arrow {
            font-size: 1.4rem;
            color: var(--red)
        }

        .testimonial {
            background: linear-gradient(110deg, #b5090c, #d02024);
            color: #fff;
            position: relative;
            overflow: hidden
        }

        .testimonial:before {
            content: '“';
            position: absolute;
            right: 5%;
            top: -80px;
            color: rgba(255, 255, 255, .13);
            font: 700 30rem var(--serif);
            line-height: 1
        }

        .testimonial .container {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 860px
        }

        .testimonial blockquote {
            font: 600 clamp(2rem, 4.2vw, 3.5rem)/1.25 var(--serif);
            letter-spacing: -.045em;
            margin: 17px 0 27px
        }

        .testimonial p {
            font: 700 .68rem var(--display);
            letter-spacing: .15em;
            text-transform: uppercase;
            color: #ffd0d1
        }

        .contact {
            background: #f1ece9
        }

        .contact-box {
            background: var(--night);
            color: #fff;
            display: grid;
            grid-template-columns:1fr 1fr;
            overflow: hidden
        }

        .contact-copy {
            padding: 70px
        }

        .contact-copy .eyebrow {
            color: #f5a1a2
        }

        .contact-copy h2 {
            font: 600 clamp(2.5rem, 4vw, 4rem)/1.05 var(--serif);
            letter-spacing: -.05em;
            margin: 14px 0 20px
        }

        .contact-copy p {
            color: #cbc4c5;
            max-width: 420px;
            margin-bottom: 30px
        }

        .contact-photo {
            min-height: 450px;
    background: linear-gradient(0deg, rgba(40, 28, 31, .23), rgba(40, 28, 31, .08)), url('../images/istanbul-sunset.webp') center/cover
        }

        .contact-list {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            margin-top: 28px
        }

        .contact-list a {
            font-size: .9rem;
            color: #fff;
            border-bottom: 1px solid #a64547;
            padding-bottom: 5px
        }

        .contact-list a:hover {
            color: #f7b9ba
        }

        footer {
            background: #18161a;
            color: #bcb5b7;
            padding: 70px 0 22px
        }

        .footer-grid {
            display: grid;
            grid-template-columns:1.7fr .85fr .85fr 1.3fr;
            gap: 35px
        }

        .footer-brand {
            font: 600 1.4rem var(--serif);
            color: #fff;
            margin-bottom: 17px
        }

        .footer-brand i {
            color: #ec484b;
            font-style: normal
        }

        .footer-grid p {
            font-size: .87rem;
            line-height: 1.7;
            max-width: 290px
        }

        .footer-grid h3 {
            color: #fff;
            margin: 3px 0 15px;
            font: 700 .67rem var(--display);
            letter-spacing: .14em;
            text-transform: uppercase
        }

        .footer-grid a {
            display: block;
            font-size: .86rem;
            margin: 8px 0;
            transition: .2s
        }

        .footer-grid a:hover {
            color: #f15e61
        }

        .copyright {
            border-top: 1px solid #38343a;
            margin-top: 42px;
            padding-top: 21px;
            font-size: .72rem;
            display: flex;
            justify-content: space-between
        }

        .whatsapp {
            position: fixed;
            right: max(12px, env(safe-area-inset-right));
            bottom: max(12px, env(safe-area-inset-bottom));
            z-index: 20;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            max-width: calc(100vw - 24px);
            overflow: hidden;
            display: grid;
            place-items: center;
            background: var(--red);
            color: #fff;
            box-shadow: 0 12px 26px rgba(192, 12, 15, .35);
            transition: .25s
        }

        .whatsapp svg {
            width: 29px;
            height: 29px;
            fill: currentColor
        }

        .whatsapp:hover {
            transform: scale(1.1)
        }

        @media (max-width: 850px) {
            .nav-links, .nav-cta {
                display: none
            }

            .hamburger {
                display: block
            }

            .hero {
                min-height: 700px
            }

            .hero-content {
                padding-top: 170px
            }

            .search-panel {
                grid-template-columns:1fr 1fr
            }

            .search-panel .button {
                grid-column: 1/-1
            }

            .story, .journey {
                grid-template-columns:1fr;
                gap: 55px
            }

            .story-visual {
                height: 520px
            }

            .service-grid {
                grid-template-columns:1fr
            }

            .service {
                min-height: 330px
            }

            .area-grid {
                grid-template-columns:1fr 1fr;
                grid-template-rows:270px 210px
            }

            .area:first-child {
                grid-row: 1/3
            }

            .contact-box {
                grid-template-columns:1fr
            }

            .contact-photo {
                min-height: 300px
            }

            .footer-grid {
                grid-template-columns:1fr 1fr
            }

            .journey-card {
                position: static
            }
        }

        @media (max-width: 540px) {
            .container {
                width: min(100% - 30px, 1200px)
            }

            .top .container {
                justify-content: center
            }

            .top .container > span {
                display: none
            }

            .top-contact {
                gap: 0
            }

            .top-contact span:last-child {
                display: none
            }

            .nav {
                top: 37px;
                height: 70px
            }

            .brand img {
                height: 39px;
                width: 39px
            }

            .hero {
                min-height: 640px
            }

            .hero {
                background-image: url('../images/istanbul-bosphorus-mobile.webp')
            }

            .hero-content {
                padding: 144px 0 70px
            }

            .hero h1 {
                font-size: 3.8rem
            }

            .hero p {
                font-size: .97rem
            }

            .scroll-cue {
                display: none
            }

            .search-panel {
                width: calc(100% - 30px);
                grid-template-columns:1fr;
                padding: 19px;
                margin-top: -30px
            }

            .search-panel .button {
                grid-column: auto
            }

            .section {
                padding: 80px 0
            }

            .floating-word {
                font-size: 8rem
            }

            .story-visual {
                height: 395px
            }

            .story-side {
                border-width: 7px
            }

            .story-badge {
                width: 125px;
                height: 125px;
                font-size: .95rem
            }

            .area-grid {
                grid-template-columns:1fr;
                grid-template-rows:230px
            }

            .area:first-child {
                grid-row: auto
            }

            .area {
                height: 190px
            }

            .step {
                grid-template-columns:57px 1fr
            }

            .step-no {
                font-size: 2.2rem
            }

            .step-arrow {
                display: none
            }

            .contact-copy {
                padding: 48px 28px
            }

            .footer-grid {
                grid-template-columns:1fr
            }

            .footer-grid {
                text-align: center
            }

            .footer-grid p {
                margin-left: auto;
                margin-right: auto
            }

            .copyright {
                display: block;
                text-align: center
            }

            .whatsapp {
                right: max(12px, env(safe-area-inset-right));
                bottom: max(12px, env(safe-area-inset-bottom));
                width: 48px;
                height: 48px
            }

            .whatsapp:hover {
                transform: none
            }

            .copyright span + span {
                display: block;
                margin-top: 7px
            }
        }


.brand-location {
    color: #ef5255;
    font-style: normal
}

.journey-eyebrow {
    color: #ffd6d7
}

.testimonial-eyebrow {
    color: #ffd1d2
}

.credit {
    color: inherit;
    opacity: .8
}


@media (max-width: 850px) {
    .nav.menu-open {
        background: var(--night)
    }

    .nav.menu-open .nav-links {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 10px 24px 18px;
        background: var(--night);
        border-bottom: 1px solid rgba(255, 255, 255, .15)
    }

    .nav.menu-open .nav-links a {
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1)
    }

    .nav.menu-open .nav-links a:last-child {
        border-bottom: 0
    }
}