*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F1F0E8;color:#17261F;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;font-size:17px;line-height:1.6}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4,p{margin:0}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #E0A526;outline-offset:2px}
.display{font-family:'Reem Kufi',sans-serif;font-weight:700}
[hidden]{display:none!important}

/* responsive helpers (single breakpoint, 768px) */
.navDesk{display:none}
.navMob{display:flex}
@media (min-width:768px){.navDesk{display:flex}.navMob{display:none}}

.sec1{height:100vh;min-height:640px}
.sec23{min-height:100vh}
@media (min-width:768px){.sec23{height:100vh;min-height:700px}}

.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.grid3{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
@media (min-width:768px){
.grid2{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr 1fr 0.8fr;gap:8px}
.grid3{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.span2r{grid-row:span 2}
.span2c{grid-column:span 2}
}

/* shared "window" backgrounds: every card shows its own part of one scene */
.scene1{background:radial-gradient(circle at 24% 56%,#5A3A22 0 14vmin,#A9794F 14vmin 16.5vmin,#F1F0E8 16.5vmin 31vmin,#DDE3D6 31vmin 44vmin,#2E4B3B 44vmin) fixed}
.scene2{background:radial-gradient(circle at 62% 38%,#E0A526 0 22vmin,transparent 22.2vmin),radial-gradient(circle at 86% 92%,#A9794F 0 15vmin,transparent 15.2vmin),#1F3329 fixed}
.cupText{color:#17261F}
@media (max-width:767px){
.scene1{background:radial-gradient(circle at 50% 66%,#5A3A22 0 9vw,#A9794F 9vw 11vw,#F1F0E8 11vw 21vw,#DDE3D6 21vw 30vw,#2E4B3B 30vw) fixed}
.scene2{background:radial-gradient(circle at 70% 30%,#E0A526 0 22vw,transparent 22.2vw),radial-gradient(circle at 20% 80%,#A9794F 0 16vw,transparent 16.2vw),#1F3329 fixed}
.cupText{color:#F1F0E8}
}

/* staggered reveal */
@keyframes rise{from{opacity:0;top:24px}to{opacity:1;top:0}}
.rise{position:relative;animation:rise .6s cubic-bezier(.16,1,.3,1) backwards}
.riseS{position:relative;animation:rise .6s cubic-bezier(.16,1,.3,1) backwards}
@supports (animation-timeline:view()){
.riseS{animation:rise linear backwards;animation-timeline:view();animation-range:entry 0% entry 45%}
}
@media (prefers-reduced-motion:reduce){.rise,.riseS{animation:none!important}}

.hoverGrow{transition:transform .2s}
.hoverGrow:hover{transform:scale(1.05)}

/* splash */
#splash{position:fixed;inset:0;z-index:100;background:#fff;display:flex;align-items:flex-end;justify-content:flex-start;direction:ltr;transition:opacity .7s}
#splash.exiting{opacity:0;pointer-events:none}
#count{font-family:'Reem Kufi',sans-serif;font-weight:700;font-size:clamp(72px,14vw,144px);line-height:1;padding:clamp(24px,3vw,40px);font-variant-numeric:tabular-nums}

/* navbar */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px clamp(16px,2vw,24px);background:rgba(241,240,232,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#burger{position:relative;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:0}
#burger span{position:absolute;height:2px;width:24px;background:#17261F;border-radius:2px;transition:all .3s cubic-bezier(.76,0,.24,1)}
#burger .b1{transform:translateY(-8px)}
#burger .b3{transform:translateY(8px)}
body.menu-open #burger .b1{transform:rotate(45deg) translateY(0)}
body.menu-open #burger .b2{opacity:0;transform:scaleX(0)}
body.menu-open #burger .b3{transform:rotate(-45deg) translateY(0)}

/* mobile menu */
#mm{position:fixed;inset:0;z-index:40;pointer-events:none}
body.menu-open #mm{pointer-events:auto}
#mm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .5s}
body.menu-open #mm-backdrop{opacity:1}
#mm-panel{position:absolute;top:0;left:0;height:100%;width:85%;max-width:384px;background:#fff;box-shadow:0 25px 50px rgba(0,0,0,.25);transition:transform .5s cubic-bezier(.76,0,.24,1);transform:translateX(-100%)}
body.menu-open #mm-panel{transform:translateX(0)}
#mm-inner{display:flex;flex-direction:column;justify-content:center;height:100%;padding:0 32px;gap:4px}
.mm-link{font-family:'Reem Kufi',sans-serif;font-weight:700;font-size:40px;line-height:1.3;color:#17261F;opacity:0;transform:translateX(-32px);transition:all .5s cubic-bezier(.76,0,.24,1)}
body.menu-open .mm-link{opacity:1;transform:translateX(0)}
#mm-tail{margin-top:32px;padding-top:32px;border-top:1px solid #D8DACF;opacity:0;transition:all .5s cubic-bezier(.76,0,.24,1) 450ms}
body.menu-open #mm-tail{opacity:1}

/* menu tabs */
.tab{flex:1 1 calc(50% - 4px);min-width:0;cursor:pointer;text-align:start;border-radius:16px;border:none;padding:clamp(12px,1.4vw,20px);display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,.2);color:#fff;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.tab[aria-pressed="true"]{background:rgba(255,255,255,.9);color:#17261F}
.tab .tl{font-family:'Reem Kufi',sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,38px);line-height:1.15;white-space:pre-line}
.tab .tn{align-self:flex-end;width:clamp(32px,3.2vw,48px);height:clamp(32px,3.2vw,48px);border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.item{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:clamp(8px,1.1vw,14px) 0;border-bottom:1px solid #C3CBBB}
.item .n{font-size:clamp(16px,1.5vw,19px);font-weight:600;line-height:1.4}
.item .d{font-size:13px;color:#3D4F45;line-height:1.4}
.item .p{font-family:'Reem Kufi',sans-serif;font-weight:700;font-size:clamp(18px,1.8vw,24px);white-space:nowrap;font-variant-numeric:tabular-nums}

/* booking dialog */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:15px}
.field input{font-family:inherit;font-size:17px;padding:12px 16px;border:2px solid #9FAE9F;border-radius:12px;background:#fff;color:#17261F}