:root {
    --branch-accent: #1d65cf;
    --branch-accent-light: #73acf8;
    --branch-accent-dark: #071321;
    --branch-night: #03070d;
    --branch-night-two: #071321;
    --branch-paper: #f4f7fb;
    --branch-ink: #111825;
    --branch-muted: #707c8e;
    --branch-white: #fff;
    --branch-container: min(1400px,calc(100% - 64px));
    --branch-ease: cubic-bezier(.18,.74,.18,1);
    --branch-display: "Bodoni MT","Didot","Baskerville","Times New Roman",serif;
    --branch-body: "Segoe UI Light","Helvetica Neue","Avenir Next",Arial,sans-serif;
    --branch-ui: "Segoe UI","Helvetica Neue","Avenir Next",Arial,sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: #fff;
    background: var(--branch-night);
    font-family: var(--branch-body);
    font-weight: 300;
    letter-spacing: .004em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

    body.branch-lightbox-open {
        overflow: hidden;
    }

a {
    color: inherit;
}

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

button {
    font: inherit;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: var(--branch-display);
    font-weight: 400;
}

::selection {
    color: #fff;
    background: var(--branch-accent);
}

.branch-container {
    width: var(--branch-container);
    margin-inline: auto;
}

.branch-intro {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    background: #010409;
    transition: opacity .85s ease, visibility .85s ease;
}

    .branch-intro.is-hidden {
        opacity: 0;
        visibility: hidden;
    }

.branch-intro-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: radial-gradient( circle at 32% 28%, color-mix(in srgb,var(--branch-accent-light) 38%,transparent), transparent 44% ), #06111e;
    box-shadow: 0 0 115px color-mix(in srgb,var(--branch-accent) 23%,transparent);
    font-family: var(--branch-display);
    font-size: 28px;
    letter-spacing: .05em;
}

    .branch-intro-mark small {
        position: absolute;
        top: calc(50% + 38px);
        color: rgba(255,255,255,.46);
        font-family: var(--branch-ui);
        font-size: 8px;
        letter-spacing: .22em;
        text-transform: uppercase;
    }

    .branch-intro-mark::before,
    .branch-intro-mark::after {
        content: "";
        position: absolute;
        border: 1px solid color-mix(in srgb,var(--branch-accent-light) 34%,transparent);
        border-radius: 50%;
        animation: branchPulse 1.9s infinite var(--branch-ease);
    }

    .branch-intro-mark::before {
        inset: -19px;
    }

    .branch-intro-mark::after {
        inset: -40px;
        animation-delay: .3s;
    }

@keyframes branchPulse {
    0% {
        opacity: 0;
        transform: scale(.84);
    }

    38% {
        opacity: .8;
    }

    100% {
        opacity: 0;
        transform: scale(1.12);
    }
}

.branch-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 120;
    transition: .35s ease;
}

    .branch-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, color-mix(in srgb,var(--branch-accent-light) 60%,transparent), transparent );
        opacity: .34;
    }

    .branch-header.is-scrolled {
        background: rgba(3,9,17,.82);
        backdrop-filter: blur(24px);
        box-shadow: 0 14px 54px rgba(0,0,0,.28);
    }

.branch-header-inner {
    width: var(--branch-container);
    height: 96px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
}

.branch-brand {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    width: max-content;
    text-decoration: none;
}

.branch-brand-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, color-mix(in srgb,var(--branch-accent-light) 52%,transparent), transparent 44% ), #0a1d39;
    box-shadow: 0 14px 36px color-mix(in srgb,var(--branch-accent) 24%,transparent);
    font-family: var(--branch-display);
    font-size: 14px;
    letter-spacing: .04em;
}

    .branch-brand-mark::after {
        content: "";
        position: absolute;
        inset: 6px;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 50%;
    }

.branch-brand-copy strong {
    display: block;
    font-family: var(--branch-display);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .025em;
}

.branch-brand-copy small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.46);
    font-family: var(--branch-ui);
    font-size: 8px;
    letter-spacing: .23em;
    text-transform: uppercase;
}

.branch-nav {
    display: flex;
    align-items: center;
    gap: 29px;
}

    .branch-nav a {
        position: relative;
        color: rgba(255,255,255,.66);
        font-family: var(--branch-ui);
        font-size: 9px;
        font-weight: 400;
        letter-spacing: .16em;
        text-decoration: none;
        text-transform: uppercase;
        transition: .25s ease;
    }

        .branch-nav a::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -12px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--branch-accent-light);
            box-shadow: 0 0 14px var(--branch-accent-light);
            transform: translateX(-50%) scale(0);
            transition: .25s ease;
        }

        .branch-nav a:hover {
            color: #fff;
        }

            .branch-nav a:hover::after {
                transform: translateX(-50%) scale(1);
            }

.branch-header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 13px;
}

.branch-home-button,
.branch-phone {
    color: #fff;
    font-family: var(--branch-ui);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .11em;
    text-decoration: none;
    text-transform: uppercase;
}

.branch-home-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
    transition: .28s ease;
}

    .branch-home-button:hover {
        border-color: var(--branch-accent);
        background: var(--branch-accent);
    }

.branch-reservation-button {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient( 135deg, var(--branch-accent-light), var(--branch-accent) );
    box-shadow: 0 16px 42px color-mix(in srgb,var(--branch-accent) 29%,transparent);
    font-family: var(--branch-ui);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
}

.branch-menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.05);
}

.branch-hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: #03070d;
}

.branch-hero-media {
    position: absolute;
    inset: 0;
    z-index: -5;
    background: var(--hero-image) center 44%/cover no-repeat;
    filter: saturate(.83) contrast(1.08) brightness(.74);
    transform: scale(1.025);
    animation: branchHeroZoom 15s ease-out forwards;
}

@keyframes branchHeroZoom {
    to {
        transform: scale(1.095);
    }
}

.branch-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    background: linear-gradient(90deg, rgb(2 6 12 / 42%) 0%, rgb(4 12 22 / 37%) 37%, rgb(4 13 24 / 45%) 64%, rgba(2, 6, 12, .23) 100%), linear-gradient(0deg, rgb(1 4 9 / 42%), transparent 52%);
}

.branch-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .11;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

.branch-hero-watermark {
    position: absolute;
    z-index: -2;
    right: -4vw;
    bottom: -9vh;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.075);
    font-family: var(--branch-display);
    font-size: clamp(180px,24vw,420px);
    line-height: .75;
    letter-spacing: -.09em;
    white-space: nowrap;
    user-select: none;
}

.branch-hero-inner {
    width: var(--branch-container);
    min-height: 100svh;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0,830px) 1fr;
    align-items: center;
    gap: 50px;
    padding: 150px 0 170px;
}

.branch-hero-copy {
    position: relative;
    z-index: 2;
}

.branch-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
    color: var(--branch-accent-light);
    font-family: var(--branch-ui);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .31em;
    text-transform: uppercase;
}

    .branch-kicker::before {
        content: "";
        width: 64px;
        height: 1px;
        background: currentColor;
    }

.branch-hero h1 {
    max-width: 850px;
    margin-bottom: 29px;
    font-size: clamp(70px,8vw,128px);
    line-height: .90;
    letter-spacing: -.05em;
    font-weight: 400;
}

    .branch-hero h1 span {
        display: block;
    }

    .branch-hero h1 em {
        display: inline-block;
        color: var(--branch-accent-light);
        font-weight: 400;
        text-shadow: 0 0 38px color-mix(in srgb,var(--branch-accent) 20%,transparent);
    }

.branch-hero-copy > p {
    max-width: 700px;
    margin-bottom: 41px;
    color: rgba(255,255,255,.63);
    font-size: clamp(16px,1.35vw,20px);
    line-height: 1.84;
}

.branch-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.branch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 60px;
    padding: 0 31px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--branch-ui);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .17em;
    text-decoration: none;
    text-transform: uppercase;
    transition: .32s var(--branch-ease);
}

.branch-button-primary {
    color: #fff;
    background: linear-gradient( 135deg, var(--branch-accent-light), var(--branch-accent) );
    box-shadow: 0 18px 48px color-mix(in srgb,var(--branch-accent) 31%,transparent);
}

    .branch-button-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 27px 60px color-mix(in srgb,var(--branch-accent) 42%,transparent);
    }

.branch-button-ghost {
    color: #fff;
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
}

    .branch-button-ghost:hover {
        color: var(--branch-accent-dark);
        background: #fff;
        transform: translateY(-4px);
    }

.branch-hero-side-card {
    justify-self: end;
    align-self: end;
    width: 330px;
    margin-bottom: 78px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 27px;
    background: rgba(4,13,25,.47);
    backdrop-filter: blur(24px);
    box-shadow: 0 30px 95px rgba(0,0,0,.31);
}

    .branch-hero-side-card small {
        display: block;
        margin-bottom: 12px;
        color: var(--branch-accent-light);
        font-family: var(--branch-ui);
        font-size: 8px;
        font-weight: 400;
        letter-spacing: .19em;
        text-transform: uppercase;
    }

    .branch-hero-side-card strong {
        display: block;
        margin-bottom: 12px;
        font-family: var(--branch-display);
        font-size: 24px;
        font-weight: 400;
        line-height: 1.2;
    }

    .branch-hero-side-card p {
        margin-bottom: 0;
        color: rgba(255,255,255,.51);
        font-size: 12px;
        line-height: 1.68;
    }

.branch-hero-bottom {
    position: absolute;
    left: 60%;
    bottom: 30px;
    width: var(--branch-container);
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr)) auto;
    align-items: end;
    border-top: 1px solid rgba(255,255,255,.12);
    transform: translateX(-50%);
}

.branch-hero-meta {
    padding: 22px 28px 0 0;
}

    .branch-hero-meta +
    .branch-hero-meta {
        padding-left: 28px;
        border-left: 1px solid rgba(255,255,255,.10);
    }

    .branch-hero-meta span {
        display: block;
        margin-bottom: 7px;
        color: var(--branch-accent-light);
        font-family: var(--branch-ui);
        font-size: 8px;
        font-weight: 400;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .branch-hero-meta strong,
    .branch-hero-meta a {
        color: #fff;
        font-size: 13px;
        font-weight: 300;
        text-decoration: none;
    }

.branch-scroll-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 22px;
    color: rgba(255,255,255,.43);
    font-family: var(--branch-ui);
    font-size: 8px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

    .branch-scroll-indicator i {
        position: relative;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 50%;
    }

        .branch-scroll-indicator i::before {
            content: "";
            position: absolute;
            top: 9px;
            left: 50%;
            width: 1px;
            height: 12px;
            background: var(--branch-accent-light);
            transform: translateX(-50%);
            animation: branchScrollDot 1.8s infinite;
        }

@keyframes branchScrollDot {
    0% {
        opacity: 0;
        transform: translate(-50%,0);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%,9px);
    }
}

.branch-signature {
    padding: 66px 0;
    border-block: 1px solid rgba(255,255,255,.08);
    background: linear-gradient( 90deg, color-mix(in srgb,var(--branch-accent) 14%,transparent), transparent 25%, transparent 75%, color-mix(in srgb,var(--branch-accent) 14%,transparent) ), #07111f;
}

.branch-signature-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 34px;
}

.branch-signature-line {
    height: 1px;
    background: linear-gradient( 90deg, transparent, var(--branch-accent), transparent );
}

.branch-signature p {
    max-width: 850px;
    margin: 0;
    color: rgba(255,255,255,.87);
    font-family: var(--branch-display);
    font-size: clamp(25px,2.6vw,42px);
    font-weight: 400;
    line-height: 1.28;
    letter-spacing: -.018em;
    text-align: center;
}

.branch-signature em {
    color: var(--branch-accent-light);
}

.branch-section {
    padding: 120px 0;
}

.branch-light-section {
    color: var(--branch-ink);
    background: linear-gradient( 180deg, #fafcff, #edf3fa );
}

.branch-dark-section {
    background: #06101c;
}

.branch-section-head {
    display: grid;
    grid-template-columns: minmax(0,1.18fr) minmax(320px,.82fr);
    align-items: end;
    gap: 82px;
    margin-bottom: 54px;
}

.branch-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--branch-accent);
    font-family: var(--branch-ui);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
}

    .branch-eyebrow::before {
        content: "";
        width: 43px;
        height: 1px;
        background: currentColor;
    }

.branch-eyebrow-light {
    color: var(--branch-accent-light);
}

.branch-section h2,
.branch-location h2,
.branch-reservation-shell h2,
.branch-blog-content h2 {
    margin-bottom: 0;
    font-size: clamp(46px,5.1vw,79px);
    line-height: .99;
    letter-spacing: -.045em;
    font-weight: 400;
}

.branch-section-head p {
    margin-bottom: 0;
    color: #697688;
    font-size: 17px;
    line-height: 1.83;
}

.branch-dark-section
.branch-section-head p {
    color: rgba(255,255,255,.52);
}

.branch-gallery {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-auto-rows: 230px;
    gap: 18px;
}

.branch-gallery-card {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: #081321;
    cursor: zoom-in;
    box-shadow: 0 24px 68px rgba(4,22,52,.16);
    transition: transform .45s var(--branch-ease), box-shadow .45s var(--branch-ease);
}

    .branch-gallery-card:hover {
        transform: translateY(-9px);
        box-shadow: 0 36px 96px rgba(4,22,52,.24);
    }

    .branch-gallery-card:nth-child(1) {
        grid-column: span 5;
        grid-row: span 2;
    }

    .branch-gallery-card:nth-child(2) {
        grid-column: span 3;
    }

    .branch-gallery-card:nth-child(3) {
        grid-column: span 4;
    }

    .branch-gallery-card:nth-child(4) {
        grid-column: span 4;
    }

    .branch-gallery-card:nth-child(5) {
        grid-column: span 3;
    }

    .branch-gallery-card:nth-child(6) {
        grid-column: span 5;
    }

    .branch-gallery-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.78) contrast(1.08);
        transition: transform .9s var(--branch-ease), filter .45s ease;
    }

    .branch-gallery-card:hover img {
        filter: saturate(.96) contrast(1.03);
        transform: scale(1.088);
    }

    .branch-gallery-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 0deg, rgba(2,10,21,.94), transparent 59% ), linear-gradient( 135deg, color-mix(in srgb,var(--branch-accent) 18%,transparent), transparent 50% );
    }

.branch-gallery-copy {
    position: absolute;
    z-index: 2;
    right: 27px;
    bottom: 25px;
    left: 27px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    color: #fff;
    text-align: left;
}

    .branch-gallery-copy small {
        display: block;
        margin-bottom: 7px;
        color: var(--branch-accent-light);
        font-family: var(--branch-ui);
        font-size: 8px;
        letter-spacing: .2em;
        text-transform: uppercase;
    }

    .branch-gallery-copy strong {
        font-family: var(--branch-display);
        font-size: 23px;
        font-weight: 400;
    }

.branch-gallery-zoom {
    flex: none;
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(4,16,34,.46);
    backdrop-filter: blur(12px);
    transition: .3s var(--branch-ease);
}

.branch-gallery-card:hover
.branch-gallery-zoom {
    border-color: var(--branch-accent);
    background: var(--branch-accent);
    transform: rotate(45deg);
    box-shadow: 0 0 26px color-mix(in srgb,var(--branch-accent) 35%,transparent);
}

.branch-empty-state {
    padding: 45px;
    border: 1px dashed rgba(12,51,110,.18);
    border-radius: 24px;
    color: #697688;
    text-align: center;
}

.branch-empty-state-dark {
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.50);
}

.branch-location {
    display: grid;
    grid-template-columns: minmax(370px,.72fr) minmax(0,1.28fr);
    min-height: 700px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 34px;
    background: #0a1524;
    box-shadow: 0 42px 125px rgba(0,0,0,.34);
}

.branch-location-copy {
    padding: 69px 58px;
    background: radial-gradient( circle at 8% 0, color-mix(in srgb,var(--branch-accent) 28%,transparent), transparent 35% ), linear-gradient( 145deg, #0c1b31, #07111d 76% );
}

    .branch-location-copy h2 {
        margin-bottom: 26px;
    }

    .branch-location-copy > p {
        margin-bottom: 38px;
        color: rgba(255,255,255,.53);
        line-height: 1.82;
    }

.branch-contact-list {
    display: grid;
    gap: 14px;
    margin-bottom: 39px;
}

.branch-contact-card {
    display: grid;
    grid-template-columns: 55px 1fr;
    align-items: center;
    gap: 16px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 19px;
    background: rgba(255,255,255,.035);
    transition: .28s ease;
}

    .branch-contact-card:hover {
        background: rgba(255,255,255,.06);
        transform: translateX(8px);
    }

.branch-contact-icon {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    border-radius: 17px;
    background: linear-gradient( 145deg, var(--branch-accent-light), var(--branch-accent) );
    box-shadow: 0 14px 34px color-mix(in srgb,var(--branch-accent) 25%,transparent);
}

.branch-contact-card div > span {
    display: block;
    margin-bottom: 5px;
    color: var(--branch-accent-light);
    font-family: var(--branch-ui);
    font-size: 8px;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.branch-contact-card strong,
.branch-contact-card a {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.46;
    text-decoration: none;
}

.branch-map {
    position: relative;
    min-height: 700px;
    background: #ccd5e1;
}

    .branch-map iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        filter: grayscale(.28) saturate(.73) contrast(.98);
    }

.branch-map-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 40px;
    color: #4f5e70;
    background: linear-gradient( 135deg, #dfe6ef, #bcc8d7 );
    text-align: center;
}

.branch-map-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( 90deg, rgba(4,13,25,.27), transparent 28% );
}

.branch-map-card {
    position: absolute;
    z-index: 2;
    right: 29px;
    bottom: 29px;
    width: min(335px,calc(100% - 58px));
    padding: 24px 25px;
    border: 1px solid rgba(255,255,255,.74);
    border-radius: 21px;
    color: #0b1421;
    background: rgba(255,255,255,.91);
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 75px rgba(4,22,52,.22);
}

    .branch-map-card strong {
        display: block;
        margin-bottom: 7px;
        font-family: var(--branch-display);
        font-size: 22px;
        font-weight: 400;
    }

    .branch-map-card span {
        color: #687587;
        font-size: 12px;
        line-height: 1.55;
    }

.branch-social-section {
    padding: 88px 0;
    color: var(--branch-ink);
    background: #fff;
}

.branch-social-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 54px;
    padding: 50px 54px;
    border: 1px solid rgba(18,51,99,.12);
    border-radius: 30px;
    background: radial-gradient( circle at 0 0, color-mix(in srgb,var(--branch-accent) 11%,transparent), transparent 35% ), #fff;
    box-shadow: 0 28px 84px rgba(5,31,72,.09);
}

    .branch-social-shell::after {
        content: "ADANA";
        position: absolute;
        right: 18px;
        bottom: -48px;
        color: color-mix(in srgb,var(--branch-accent) 5%,transparent);
        font-family: var(--branch-display);
        font-size: 152px;
        letter-spacing: -.07em;
        pointer-events: none;
    }

    .branch-social-shell h3 {
        margin-bottom: 9px;
        font-size: 37px;
        font-weight: 400;
        letter-spacing: -.018em;
    }

    .branch-social-shell p {
        margin-bottom: 0;
        color: #6b7788;
        line-height: 1.7;
    }

.branch-social-icons {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.branch-social-icon {
    display: grid;
    place-items: center;
    width: 65px;
    height: 65px;
    border: 1px solid rgba(26,76,148,.14);
    border-radius: 21px;
    color: #143b76;
    background: #fff;
    font-family: var(--branch-display);
    font-size: 22px;
    text-decoration: none;
    transition: .3s var(--branch-ease);
}

    .branch-social-icon:hover {
        color: #fff;
        border-color: var(--branch-accent);
        background: linear-gradient( 145deg, var(--branch-accent-light), var(--branch-accent) );
        transform: translateY(-8px) rotate(-3deg);
        box-shadow: 0 19px 44px color-mix(in srgb,var(--branch-accent) 25%,transparent);
    }

    .branch-social-icon svg {
        width: 25px;
        height: 25px;
    }

.branch-reels {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 20px;
}

.branch-reel-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 9/16;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 30px;
    color: #fff;
    background: #07111f;
    box-shadow: 0 26px 74px rgba(0,0,0,.30);
    text-decoration: none;
    transition: .45s var(--branch-ease);
    isolation: isolate;
}

    .branch-reel-card:hover {
        transform: translateY(-13px);
    }

    .branch-reel-card video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.84) contrast(1.04);
    }

    .branch-reel-card::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 0deg, rgba(2,8,17,.95), transparent 59% ), linear-gradient( 180deg, color-mix(in srgb,var(--branch-accent-dark) 33%,transparent), transparent 31% );
    }

    .branch-reel-card::before {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        border: 1px solid transparent;
        border-radius: inherit;
        pointer-events: none;
        transition: .35s ease;
    }

    .branch-reel-card:hover::before {
        border-color: color-mix(in srgb,var(--branch-accent-light) 50%,transparent);
        box-shadow: inset 0 0 34px color-mix(in srgb,var(--branch-accent) 12%,transparent);
    }

.branch-reel-top {
    position: absolute;
    z-index: 3;
    top: 20px;
    right: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.branch-reel-tag {
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb,var(--branch-accent-light) 31%,transparent);
    border-radius: 999px;
    color: #e2edfc;
    background: rgba(4,16,34,.52);
    backdrop-filter: blur(12px);
    font-family: var(--branch-ui);
    font-size: 8px;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.branch-reel-play {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    border: 1px solid rgba(255,255,255,.31);
    border-radius: 50%;
    background: rgba(5,16,34,.50);
    backdrop-filter: blur(12px);
    transition: .3s ease;
}

.branch-reel-card.is-playing
.branch-reel-play {
    opacity: 0;
    transform: scale(.74);
}

.branch-reel-copy {
    position: absolute;
    z-index: 3;
    right: 25px;
    bottom: 25px;
    left: 25px;
}

    .branch-reel-copy h3 {
        margin-bottom: 8px;
        font-size: 30px;
        font-weight: 400;
        letter-spacing: -.018em;
    }

    .branch-reel-copy p {
        margin-bottom: 0;
        color: rgba(255,255,255,.54);
        font-size: 12px;
        line-height: 1.62;
    }

.branch-reservation-section {
    position: relative;
    overflow: hidden;
    padding: 122px 0;
    background: #02050a;
}

    .branch-reservation-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(1,5,10,.97), rgba(4,13,24,.76), rgba(4,13,24,.34) ), var(--reservation-image) center 44%/cover no-repeat;
        filter: saturate(.73);
    }

.branch-reservation-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 52px;
    padding: 70px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 36px;
    background: rgba(6,17,32,.61);
    backdrop-filter: blur(19px);
    box-shadow: 0 38px 110px rgba(0,0,0,.34);
}

    .branch-reservation-shell h2 {
        max-width: 820px;
    }

    .branch-reservation-shell p {
        margin: 20px 0 0;
        color: rgba(255,255,255,.57);
    }

.branch-blog-cinematic {
    position: relative;
    min-height: 82svh;
    overflow: hidden;
    background: #02050a;
}

.branch-blog-link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
}

    .branch-blog-link::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        background: var(--blog-banner-image) center/cover no-repeat;
        filter: saturate(.70) contrast(1.08) brightness(.65);
        transform: scale(1.02);
        transition: transform 1.4s var(--branch-ease), filter .6s ease;
    }

    .branch-blog-link:hover::before {
        filter: saturate(.88) contrast(1.06) brightness(.72);
        transform: scale(1.09);
    }

    .branch-blog-link::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background: linear-gradient(90deg, rgb(1 5 10 / 35%), rgb(3 10 20 / 22%) 52%, rgba(3, 10, 20, .28)), linear-gradient(0deg, rgb(1 5 10 / 37%), transparent 55%);
    }

.branch-blog-watermark {
    position: absolute;
    z-index: -1;
    right: -3vw;
    bottom: -3vw;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.08);
    font-family: var(--branch-display);
    font-size: clamp(150px,20vw,360px);
    line-height: .7;
    letter-spacing: -.08em;
    pointer-events: none;
}

.branch-blog-content {
    position: relative;
    padding-block: 120px;
}

    .branch-blog-content h2 {
        max-width: 900px;
        font-size: clamp(58px,7vw,112px);
    }

    .branch-blog-content p {
        max-width: 720px;
        margin: 30px 0 38px;
        color: rgba(255,255,255,.62);
        font-size: 17px;
        line-height: 1.82;
    }

.branch-blog-button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--branch-ui);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

    .branch-blog-button i {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 50%;
        font-style: normal;
        transition: .35s var(--branch-ease);
    }

.branch-blog-link:hover
.branch-blog-button i {
    border-color: var(--branch-accent);
    background: var(--branch-accent);
    transform: rotate(45deg);
    box-shadow: 0 0 30px color-mix(in srgb,var(--branch-accent) 36%,transparent);
}

.branch-footer {
    padding: 35px 0;
    color: rgba(255,255,255,.41);
    background: #010409;
    font-size: 11px;
}

.branch-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.branch-footer strong {
    color: #fff;
    font-family: var(--branch-display);
    font-size: 19px;
    font-weight: 400;
}

.branch-footer a {
    color: var(--branch-accent-light);
    text-decoration: none;
}

.branch-reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .9s var(--branch-ease), transform .9s var(--branch-ease);
}

    .branch-reveal.is-visible {
        opacity: 1;
        transform: none;
    }

.branch-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    transition: .28s ease;
}

    .branch-lightbox.is-open {
        visibility: visible;
        opacity: 1;
    }

.branch-lightbox-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(1,5,10,.96);
    backdrop-filter: blur(24px);
    cursor: zoom-out;
}

.branch-lightbox-dialog {
    position: relative;
    z-index: 1;
    width: min(1200px,calc(100vw - 36px));
    height: min(850px,calc(100svh - 36px));
    display: grid;
    place-items: center;
}

.branch-lightbox-image {
    max-width: 100%;
    max-height: calc(100% - 65px);
    object-fit: contain;
    border-radius: 21px;
    box-shadow: 0 38px 120px rgba(0,0,0,.49);
    cursor: zoom-in;
    transition: transform .28s ease;
}

    .branch-lightbox-image.is-zoomed {
        cursor: zoom-out;
        transform: scale(1.55);
    }

.branch-lightbox-caption {
    position: absolute;
    left: 50%;
    bottom: 5px;
    min-width: 290px;
    text-align: center;
    transform: translateX(-50%);
}

    .branch-lightbox-caption strong {
        display: block;
        font-family: var(--branch-display);
        font-size: 20px;
        font-weight: 400;
    }

    .branch-lightbox-caption span {
        color: var(--branch-accent-light);
        font-size: 10px;
    }

.branch-lightbox-button {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    color: #fff;
    background: rgba(6,20,42,.54);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: .25s ease;
}

    .branch-lightbox-button:hover {
        border-color: var(--branch-accent);
        background: var(--branch-accent);
    }

.branch-lightbox-close {
    top: 0;
    right: 0;
}

.branch-lightbox-prev {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.branch-lightbox-next {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

@media(max-width:1180px) {
    .branch-nav,
    .branch-phone {
        display: none;
    }

    .branch-header-inner {
        grid-template-columns: 1fr auto;
    }

    .branch-header-actions {
        grid-column: 2;
    }

    .branch-menu-toggle {
        display: grid;
        place-items: center;
    }

    .branch-reservation-button {
        display: none;
    }

    .branch-hero-inner {
        grid-template-columns: 1fr;
        margin-left: 25px;
    }

    .branch-hero-side-card {
        display: none;
    }

    .branch-hero-bottom {
        grid-template-columns: repeat(3,1fr);
    }

    .branch-scroll-indicator {
        display: none;
    }

    .branch-section-head {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .branch-gallery {
        grid-template-columns: repeat(2,1fr);
        grid-auto-rows: 300px;
    }

    .branch-gallery-card,
    .branch-gallery-card:nth-child(n) {
        grid-column: span 1;
        grid-row: span 1;
    }

        .branch-gallery-card:nth-child(1),
        .branch-gallery-card:nth-child(6) {
            grid-column: span 2;
        }

    .branch-location {
        grid-template-columns: 1fr;
    }

    .branch-map {
        min-height: 520px;
    }

    .branch-social-shell,
    .branch-reservation-shell {
        grid-template-columns: 1fr;
    }

    .branch-social-icons {
        justify-content: flex-start;
    }

    .branch-reels {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:720px) {
    :root {
        --branch-container: calc(100% - 28px);
    }

    .branch-header-inner {
        height: 76px;
    }

    .branch-brand-mark {
        width: 43px;
        height: 43px;
        font-size: 11px;
    }

    .branch-brand-copy {
        display: none;
    }

    .branch-home-button {
        min-height: 42px;
        padding: 0 13px;
        font-size: 8px;
    }

    .branch-hero-inner {
        padding: 126px 0 242px;
    }

    .branch-hero h1 {
        font-size: clamp(58px,18vw,86px);
    }

    .branch-hero-watermark {
        display: none;
    }

    .branch-hero-bottom {
        bottom: 22px;
        grid-template-columns: 1fr;
    }

    .branch-hero-meta {
        padding: 10px 0;
    }

        .branch-hero-meta +
        .branch-hero-meta {
            padding-left: 0;
            border-top: 1px solid rgba(255,255,255,.09);
            border-left: 0;
        }

    .branch-signature-inner {
        grid-template-columns: 1fr;
    }

    .branch-signature-line {
        display: none;
    }

    .branch-section {
        padding: 84px 0;
    }

    .branch-gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: 292px;
    }

    .branch-gallery-card,
    .branch-gallery-card:nth-child(n) {
        grid-column: span 1;
    }

    .branch-location-copy {
        padding: 45px 24px;
    }

    .branch-map {
        min-height: 440px;
    }

    .branch-social-shell {
        padding: 33px 24px;
    }

    .branch-social-icon {
        width: 57px;
        height: 57px;
    }

    .branch-reels {
        grid-template-columns: repeat(4,79vw);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px;
    }

    .branch-reel-card {
        scroll-snap-align: start;
    }

    .branch-reservation-shell {
        padding: 45px 24px;
    }

    .branch-blog-cinematic {
        min-height: 74svh;
    }

    .branch-blog-content {
        padding-block: 90px;
    }

        .branch-blog-content h2 {
            font-size: clamp(52px,15vw,80px);
        }

    .branch-footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .branch-lightbox-prev {
        left: 6px;
    }

    .branch-lightbox-next {
        right: 6px;
    }

    .branch-lightbox-close {
        top: 6px;
        right: 6px;
    }
}

@media(prefers-reduced-motion:reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .branch-reveal {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   SAB?T WHATSAPP REZERVASYON BUTONU
   Her ?ubenin RestaurantBranch.WhatsAppUrl de?erini kullan?r.
   ========================================================= */

.branch-fixed-whatsapp {
    position: fixed;
    z-index: 190;
    right: 26px;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 8px 18px 8px 9px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient( 135deg, #2fe06f, #16a84d );
    box-shadow: 0 18px 46px rgba(20,168,77,.36), inset 0 1px 0 rgba(255,255,255,.25);
    text-decoration: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: transform .3s cubic-bezier(.18,.74,.18,1), box-shadow .3s ease, filter .3s ease;
}

    .branch-fixed-whatsapp::before {
        content: "";
        position: absolute;
        inset: -7px;
        z-index: -1;
        border: 1px solid rgba(37,211,102,.35);
        border-radius: inherit;
        opacity: 0;
        animation: branchWhatsappPulse 2.2s infinite;
    }

    .branch-fixed-whatsapp:hover {
        color: #fff;
        filter: brightness(1.05);
        transform: translateY(-5px);
        box-shadow: 0 24px 58px rgba(20,168,77,.48), inset 0 1px 0 rgba(255,255,255,.30);
    }

.branch-fixed-whatsapp-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    color: #18a84d;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.14);
}

    .branch-fixed-whatsapp-icon svg {
        width: 25px;
        height: 25px;
    }

.branch-fixed-whatsapp-copy {
    display: block;
    min-width: 0;
    line-height: 1.15;
}

    .branch-fixed-whatsapp-copy small {
        display: block;
        margin-bottom: 5px;
        color: rgba(255,255,255,.72);
        font-family: var( --branch-ui, "Segoe UI", Arial, sans-serif );
        font-size: 8px;
        font-weight: 400;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .branch-fixed-whatsapp-copy strong {
        display: block;
        color: #fff;
        font-family: var( --branch-body, "Segoe UI Light", Arial, sans-serif );
        font-size: 13px;
        font-weight: 400;
        letter-spacing: .015em;
        white-space: nowrap;
    }

@keyframes branchWhatsappPulse {
    0% {
        opacity: 0;
        transform: scale(.92);
    }

    35% {
        opacity: .85;
    }

    100% {
        opacity: 0;
        transform: scale(1.12);
    }
}

@media(max-width:720px) {
    .branch-fixed-whatsapp {
        right: 14px;
        bottom: calc( 14px + env(safe-area-inset-bottom) );
        min-height: 56px;
        padding: 7px 14px 7px 7px;
    }

    .branch-fixed-whatsapp-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .branch-fixed-whatsapp-copy small {
        display: none;
    }

    .branch-fixed-whatsapp-copy strong {
        font-size: 12px;
    }
}

@media(max-width:420px) {
    .branch-fixed-whatsapp {
        padding-right: 8px;
    }

    .branch-fixed-whatsapp-copy {
        display: none;
    }
}

@media(prefers-reduced-motion:reduce) {
    .branch-fixed-whatsapp::before {
        animation: none;
    }
}


@media (min-width: 1181px) {
    .branch-gallery-card:nth-child(6),
    .branch-gallery-card:nth-child(7),
    .branch-gallery-card:nth-child(8) {
        grid-column: span 4;
        grid-row: span 1;
        min-width: 0;
    }
}

/* Header d???nda kalan eski logo elemanlar?n? gizle */
.branch-header > img,
.branch-header > .branch-brand-logo,
.branch-header > .branch-brand,
.branch-header > .selector-brand {
    display: none !important;
}

/* Sadece header-inner i?indeki ger?ek logo g?r?ns?n */
.branch-header-inner .branch-brand {
    display: inline-flex !important;
}

.branch-header-inner .branch-brand-logo {
    display: block !important;
	height: 45px;
}

/* Eski CSS'ten gelen olas? logo pseudo eleman?n? iptal et */
.branch-header::before {
    content: none !important;
    display: none !important;
    background: none !important;
}