:root{
    --bg:#ffffff;
    --paper:#fbfaf6;
    --paper-2:#f4f0e6;
    --ink:#172016;
    --muted:#6d7369;
    --olive:#52613a;
    --olive-2:#76845b;
    --olive-soft:#e9ede0;
    --gold:#b49656;
    --gold-soft:#e8dcc0;
    --line:#e7e4da;
    --shadow:0 24px 80px rgba(34,41,28,.10);
    --shadow-soft:0 15px 45px rgba(34,41,28,.075);
    --radius:26px;
    --radius-sm:16px;
    --container:min(1240px, calc(100% - 48px));
    --header-h:96px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:96px;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body.ar{
    font-family:"Noto Kufi Arabic",sans-serif;
}

body.no-scroll{
    overflow:hidden;
}

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

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

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

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

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

.section{
    padding:110px 0;
}

.section-sm{
    padding:78px 0;
}


/* ============================================================
   ANNOUNCEMENT
   ============================================================ */

.announcement{
    height:34px;
    background:var(--ink);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    letter-spacing:.17em;
    text-transform:uppercase;
    position:relative;
    z-index:80;
}

.announcement-inner{
    display:flex;
    gap:16px;
    align-items:center;
    white-space:nowrap;
    overflow:hidden;
}

.announcement-dot{
    width:4px;
    height:4px;
    background:var(--gold);
    border-radius:50%;
}


/* ============================================================
   HEADER
   ============================================================ */

.header{
    position:fixed;
    top:34px;
    left:0;
    right:0;
    height:var(--header-h);
    z-index:70;
    transition:.35s ease;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(231,228,218,.9);
    box-shadow:0 10px 30px rgba(33,41,27,.04);
    color:var(--ink);
}

.nav{
    width:var(--container);
    height:100%;
    margin:auto;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:28px;
}

.nav-left,
.nav-right{
    display:flex;
    align-items:center;
    gap:28px;
}

.nav-right{
    justify-content:flex-end;
}

.nav-link{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.13em;
    position:relative;
    padding:9px 0;
    font-weight:500;
}

.nav-link::after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:3px;
    height:1px;
    background:var(--gold);
    transition:.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after{
    right:0;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    min-width:max-content;
}

.brand-mark{
    width:auto;
    height:72px;
    object-fit:contain;
}

.brand-copy{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    line-height:1.02;
}

.brand-name{
    font-family:"Cormorant Garamond",serif;
    font-size:28px;
    font-weight:700;
    letter-spacing:.01em;
    white-space:nowrap;
}

.brand-sub{
    font-size:8px;
    letter-spacing:.23em;
    text-transform:uppercase;
    opacity:.8;
    margin-top:4px;
}

body.ar .brand-name{
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:19px;
}

.lang-btn{
    border:0;
    background:transparent;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:10px;
    color:inherit;
}

.nav-book{
    height:44px;
    padding:0 18px;
    border-radius:999px;
    border:1px solid var(--olive);
    background:var(--olive);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    transition:.3s;
}

.nav-book:hover{
    background:var(--ink);
    border-color:var(--ink);
}

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:50%;
    background:#fff;
    place-items:center;
    color:inherit;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
    display:block;
    width:16px;
    height:1px;
    background:currentColor;
    position:relative;
    transition:.25s ease;
}

.menu-toggle span::before,
.menu-toggle span::after{
    content:"";
    position:absolute;
    left:0;
}

.menu-toggle span::before{
    top:-5px;
}

.menu-toggle span::after{
    top:5px;
}


/* ============================================================
   GALLERY HERO
   ============================================================ */

.gallery-hero{
    position:relative;
    height:45vh;
    min-height:380px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#000;
    color:#fff;
    overflow:hidden;
    margin-top:var(--header-h);
}

.gallery-hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.6;
    transform:scale(1.1);
    animation:heroZoomOut 2s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes heroZoomOut{
    to{
        transform:scale(1);
    }
}

.gallery-hero-content{
    position:relative;
    z-index:2;
    padding:0 24px;
}

.gallery-hero-title{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(32px,4vw,48px);
    font-weight:500;
    letter-spacing:.15em;
    margin:0;
    text-transform:uppercase;
    opacity:0;
    transform:translateY(30px);
    animation:fadeUp 1s .3s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

body.ar .gallery-hero-title{
    font-family:"Noto Kufi Arabic",sans-serif;
    letter-spacing:0;
}


/* ============================================================
   GALLERY INTRO
   ============================================================ */

.gallery-intro{
    text-align:center;
    max-width:900px;
    margin:0 auto;
    padding:80px 24px 60px;
}

.gallery-intro h2{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(24px,3vw,32px);
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink);
    margin:0 0 24px;
}

body.ar .gallery-intro h2{
    font-family:"Noto Kufi Arabic",sans-serif;
    letter-spacing:0;
}

.gallery-intro p{
    font-size:15px;
    color:var(--muted);
    line-height:1.8;
    margin:0;
}


/* ============================================================
   MASONRY / BENTO GRID
   ============================================================ */

.masonry-wrap{
    padding:0 24px 80px;
    max-width:1300px;
    margin:0 auto;
}

.masonry-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:280px;
    gap:12px;
}

.masonry-item{
    position:relative;
    overflow:hidden;
    cursor:pointer;
    border-radius:4px;
    background:var(--paper);
}

.masonry-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.16,1,.3,1);
}

.masonry-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.5) 0%,
        transparent 50%
    );
    opacity:0;
    transition:opacity .4s cubic-bezier(.16,1,.3,1);
    pointer-events:none;
}

.masonry-item::before{
    content:attr(data-view-label);
    position:absolute;
    z-index:2;
    bottom:24px;
    left:50%;
    transform:translate(-50%,20px);
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(4px);
    color:var(--ink);
    padding:10px 20px;
    border-radius:30px;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.15em;
    opacity:0;
    transition:all .4s cubic-bezier(.16,1,.3,1);
    pointer-events:none;
}

body.ar .masonry-item::before{
    font-family:"Noto Kufi Arabic",sans-serif;
    letter-spacing:0;
}

.masonry-item:hover img{
    transform:scale(1.06);
}

.masonry-item:hover::after{
    opacity:1;
}

.masonry-item:hover::before{
    opacity:1;
    transform:translate(-50%,0);
}


/* ============================================================
   ORIGINAL GRID UTILITIES
   ============================================================ */

.item-tall{
    grid-row:span 2;
}

.item-wide{
    grid-column:span 2;
}

.item-large{
    grid-row:span 2;
    grid-column:span 2;
}

.item-half{
    grid-auto-rows:134px;
}


/* ============================================================
   STACK BLOCK
   ============================================================ */

.masonry-stack{
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:12px;
}


/* ============================================================
   INSTAGRAM
   ============================================================ */

.insta-section{
    padding:40px 0 110px;
    background:var(--bg);
    text-align:center;
}

.insta-title{
    font-family:"DM Sans",sans-serif;
    font-size:14px;
    font-weight:500;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--ink);
    margin-bottom:30px;
}

.insta-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    width:100%;
    padding:0 12px;
}

.insta-item{
    position:relative;
    overflow:hidden;
    aspect-ratio:4/5;
    background:var(--paper);
    display:block;
    border-radius:8px;
}

.insta-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.16,1,.3,1);
}

.insta-item:hover img{
    transform:scale(1.06);
}

.insta-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.3);
    opacity:0;
    transition:opacity .4s ease;
    z-index:1;
}

.insta-item:hover::before{
    opacity:1;
}

.insta-item::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-40%);
    width:24px;
    height:24px;
    background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" stroke="white" stroke-width="2" stroke-linejoin="round"/><rect x="7" y="7" width="10" height="10" stroke="white" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat center;
    opacity:0;
    z-index:2;
    transition:all .4s cubic-bezier(.16,1,.3,1);
    pointer-events:none;
}

.insta-item:hover::after{
    opacity:1;
    transform:translate(-50%,-50%);
}


/* ============================================================
   LIGHTBOX
   ============================================================ */

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(8,11,7,.85);
    backdrop-filter:blur(8px);
    z-index:999;
    display:grid;
    place-items:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .4s ease,visibility .4s ease;
}

.lightbox.open{
    opacity:1;
    visibility:visible;
}

.lightbox img{
    max-width:min(1200px,90vw);
    max-height:85vh;
    object-fit:contain;
    box-shadow:0 30px 100px rgba(0,0,0,.5);
    transform:scale(.95);
    transition:transform .5s cubic-bezier(.16,1,.3,1);
}

.lightbox.open img{
    transform:scale(1);
}

.lightbox-close{
    position:absolute;
    right:28px;
    top:28px;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.28);
    background:transparent;
    color:#fff;
    border-radius:50%;
    font-size:22px;
    cursor:pointer;
    transition:all .3s ease;
}

.lightbox-close:hover{
    background:rgba(255,255,255,.1);
    transform:scale(1.1);
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer{
    background:#0d120c;
    color:#fff;
    padding:74px 0 28px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr .7fr .8fr .9fr;
    gap:50px;
}

.footer-brand .brand-name{
    color:#fff;
    font-size:32px;
}

.footer-brand .brand-sub{
    color:rgba(255,255,255,.45);
}

.footer-brand p{
    font-size:12px;
    color:rgba(255,255,255,.48);
    max-width:330px;
    line-height:1.8;
    margin:22px 0 0;
}

.footer-title{
    font-size:9px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#d9c591;
    margin-bottom:16px;
}

.footer-links{
    display:grid;
    gap:10px;
}

.footer-links a,
.footer-links span{
    font-size:12px;
    color:rgba(255,255,255,.58);
    transition:.2s;
}

.footer-links a:hover{
    color:#fff;
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-top:28px;
    margin-top:58px;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.11em;
    color:rgba(255,255,255,.38);
}


/* ============================================================
   MOBILE MENU
   ============================================================ */

.mobile-menu{
    position:fixed;
    inset:0;
    background:#fff;
    z-index:65;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.35s ease;
}

.mobile-menu.open{
    opacity:1;
    visibility:visible;
}

.mobile-menu nav{
    display:grid;
    text-align:center;
    gap:16px;
}

.mobile-menu a{
    font-family:"Cormorant Garamond",serif;
    font-size:44px;
    line-height:1.1;
    color:var(--ink);
}

body.ar .mobile-menu a{
    font-family:"Noto Kufi Arabic",sans-serif;
    font-size:30px;
}

.mobile-menu .mobile-meta{
    position:absolute;
    bottom:34px;
    left:24px;
    right:24px;
    display:flex;
    justify-content:space-between;
    font-size:10px;
    color:var(--muted);
}


/* ============================================================
   FLOATING CONTACT
   ============================================================ */

.floating-whatsapp{
    position:fixed;
    right:22px;
    bottom:22px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#1f8f55;
    color:#fff;
    display:grid;
    place-items:center;
    z-index:55;
    box-shadow:0 15px 40px rgba(31,143,85,.28);
    transition:.25s;
}

.floating-whatsapp:hover{
    transform:translateY(-4px) scale(1.02);
}

.floating-whatsapp svg{
    width:25px;
    height:25px;
    fill:currentColor;
}

.mobile-action-bar{
    display:none;
}


/* ============================================================
   REVEALS
   ============================================================ */

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .9s cubic-bezier(.16,1,.3,1),
        transform .9s cubic-bezier(.16,1,.3,1);
}

.reveal.visible{
    opacity:1;
    transform:none;
}


/* ============================================================
   RESPONSIVE 1080
   ============================================================ */

@media (max-width:1080px){

    :root{
        --container:min(100% - 36px,980px);
    }

    .nav-left .nav-link:nth-child(n+3){
        display:none;
    }

    .nav-right .nav-link{
        display:none;
    }

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

    .footer-grid > div:nth-child(4){
        grid-column:2/4;
    }
}


/* ============================================================
   RESPONSIVE 820
   ============================================================ */

@media (max-width:820px){

    :root{
        --header-h:76px;
        --container:calc(100% - 30px);
    }

    .announcement{
        height:30px;
    }

    .header{
        top:30px;
    }

    .nav{
        grid-template-columns:1fr auto;
        gap:12px;
    }

    .nav-left,
    .nav-right .lang-btn,
    .nav-right .nav-book{
        display:none;
    }

    .nav-right{
        display:flex;
    }

    .menu-toggle{
        display:grid;
    }

    .brand-mark{
        height:56px;
    }

    .brand-name{
        font-size:24px;
        white-space:nowrap;
    }

    .brand-sub{
        font-size:7px;
    }

    .masonry-grid{
        grid-template-columns:repeat(2,1fr);
        grid-auto-rows:240px;
    }

    .item-large{
        grid-column:span 2;
        grid-row:span 1;
    }

    .item-tall{
        grid-row:span 1;
    }

    .item-wide{
        grid-column:span 2;
    }

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

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

    .footer-grid > div:nth-child(4){
        grid-column:auto;
    }

    .footer-brand{
        grid-column:1/-1;
    }

    .footer-bottom{
        flex-direction:column;
    }

    .floating-whatsapp{
        bottom:82px;
        right:14px;
        width:54px;
        height:54px;
    }

    .mobile-action-bar{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        height:66px;
        background:rgba(255,255,255,.95);
        backdrop-filter:blur(14px);
        border-top:1px solid var(--line);
        z-index:54;
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .mobile-action-bar a{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:9px;
        font-size:10px;
        text-transform:uppercase;
        letter-spacing:.12em;
        color:var(--ink);
    }

    .mobile-action-bar a:first-child{
        border-right:1px solid var(--line);
    }

    body{
        padding-bottom:66px;
    }
}


/* ============================================================
   RESPONSIVE 560
   ============================================================ */

@media (max-width:560px){

    .announcement-inner{
        font-size:9px;
        gap:8px;
    }

    .announcement-inner .optional{
        display:none;
    }

    .brand-copy{
        max-width:none;
    }

    .brand-name{
        font-size:22px;
        white-space:nowrap;
    }

    .gallery-hero-title{
        font-size:28px;
    }

    .gallery-intro{
        padding:50px 20px 40px;
    }

    .masonry-grid{
        grid-template-columns:1fr;
        grid-auto-rows:auto;
    }

    .masonry-item{
        aspect-ratio:4/3;
        grid-column:1 / -1 !important;
        grid-row:auto !important;
    }

    .masonry-stack{
        display:contents;
    }

    .insta-grid{
        gap:6px;
        padding:0 6px;
    }

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

    .footer-brand{
        grid-column:auto;
    }

    .footer-grid > div:nth-child(4){
        grid-column:auto;
    }

    .mobile-menu a{
        font-size:38px;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.001ms !important;
    }

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