/* Streamline Technology Ltd — تبسيط لتقنية المعلومات
   CAVE Ice Cream public site, version 5. Tokens are the café's own (logo master + Instagram/Facebook).
   Fonts are declared inline by the builder (their URLs are only known after upload). */
:root{--navy:#162641;--navy-2:#22365A;--accent:#E3A857;--accent-dk:#8A5214;--pink:#EFA0C4;
  --ice:#EEF2F7;--ice-2:#DCE4EE;--sky:#C9D6E6;--honey:#F4DDB8;--white:#FFFFFF;--cream:#F9FAFC;--mute:rgba(22,38,65,.66);--line:rgba(22,38,65,.13);
  --line-w:rgba(255,255,255,.16);--ease:cubic-bezier(.2,.7,.1,1);--spring:cubic-bezier(.34,1.56,.64,1);--r:22px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body,#wrapwrap{margin:0;background:var(--navy)}
body.menu-open{overflow:hidden}
.cave{color:var(--navy);background:var(--ice);font:400 17px/1.9 'Tajawal',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
.cave h1,.cave h2,.cave h3,.cave h4,.cave button,.cave input,.cave select,.cave textarea{font-family:'Tajawal',system-ui,sans-serif;letter-spacing:0}
.cave h1,.cave h2,.cave h3,.cave h4{font-weight:700;line-height:1.3;margin:0;color:inherit}
.cave p{margin:0}
.cave a{color:inherit;text-decoration:none}
.cave :focus-visible{outline:2px solid var(--accent-dk);outline-offset:4px;border-radius:6px}
.skip{position:absolute;inset:-60px auto auto 16px;z-index:100;background:var(--navy);color:var(--white);padding:10px 18px;border-radius:999px}
.skip:focus{inset:12px auto auto 16px}
.wrap{max-width:1220px;margin:0 auto;padding-inline:clamp(18px,5vw,60px)}
.num{font-family:'Jost','Tajawal',sans-serif;font-variant-numeric:tabular-nums lining-nums;unicode-bidi:isolate}
.latin{font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.34em;text-transform:uppercase;font-size:11.5px;unicode-bidi:isolate;direction:ltr;display:inline-block}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-dk);font-weight:700;font-size:14.5px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:14px 0 0 -2px currentColor}
.dark .eyebrow{color:var(--accent)}
.honey .eyebrow,.social .eyebrow,.pagehead .eyebrow,.pinkband .eyebrow{color:var(--navy)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.glyph{width:20px;height:20px;fill:currentColor;flex:none}

/* ---------------------------------------------------------------- arch (the Facebook cover) */
.arch{clip-path:url(#cave-arch);-webkit-clip-path:url(#cave-arch);position:relative;overflow:hidden}

/* ---------------------------------------------------------------- announcement + header */
.note{background:var(--navy);color:rgba(255,255,255,.86);font-size:14px;position:relative;z-index:60}
.note .wrap{display:flex;align-items:center;justify-content:center;gap:10px;min-height:38px;text-align:center}
.note a{color:var(--accent);font-weight:700;border-bottom:1px solid rgba(227,168,87,.5)}
.note .dot{width:6px;height:6px;border-radius:50%;background:var(--pink);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.top{position:sticky;top:0;z-index:50;transition:background .45s var(--ease),box-shadow .45s,transform .45s var(--ease)}
.top.float{background:transparent}
.top.solid{background:rgba(246,248,251,.9);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(22,38,65,.06)}
.top.hide{transform:translateY(-110%)}
.bar{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);min-height:78px;transition:min-height .45s var(--ease)}
.top.solid .bar{min-height:64px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:40px;width:auto;display:block;transition:height .45s var(--ease)}
.top.solid .brand img{height:33px}
.menubar{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(4px,1vw,10px);margin:0;margin-inline-start:auto;padding:0}
.menubar>a,.menubar .dd>button{position:relative;display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:999px;font-size:15.5px;font-weight:500;
  background:none;border:0;color:inherit;cursor:pointer;transition:background .3s,color .3s}
.menubar>a:hover,.menubar .dd>button:hover,.menubar .dd.open>button{background:rgba(22,38,65,.07)}
.menubar>a[aria-current],.menubar .dd>button[aria-current]{background:var(--navy);color:var(--white)}
.menubar .dd{position:relative}
.menubar .dd>button svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.menubar .dd.open>button svg{transform:rotate(180deg)}
.menu .pin .ico{width:20px;height:20px}
.menu{position:absolute;inset:calc(100% + 10px) auto auto 50%;translate:-50% 0;width:320px;background:var(--white);border-radius:20px;padding:10px;
  box-shadow:0 24px 60px rgba(22,38,65,.18);opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transform-origin:top center;
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .35s}
.dd.open .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;transition:background .25s}
.menu a:hover{background:var(--ice)}
.menu a b{display:block;font-size:15.5px}
.menu a small{display:block;color:var(--mute);font-size:13px;line-height:1.5}
.menu .pin{width:36px;height:36px;border-radius:12px;background:var(--ice);display:grid;place-items:center;flex:none;color:var(--accent-dk)}
.menu .all{justify-content:center;margin-top:4px;background:var(--ice);font-weight:700;font-size:14px}
.acts{display:flex;align-items:center;gap:8px}
.soc-mini{display:flex;gap:2px}
.soc-mini a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;transition:background .3s,color .3s}
.soc-mini a:hover{background:var(--navy);color:var(--white)}
.soc-mini .glyph{width:17px;height:17px}
.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 26px;border-radius:999px;font-size:15.5px;font-weight:700;
  border:1.5px solid var(--navy);color:var(--navy);background:transparent;cursor:pointer;
  transition:background .35s,color .35s,transform .35s var(--ease),box-shadow .35s,border-color .35s}
.cbtn:hover{transform:translateY(-2px)}
.cbtn .ico{width:19px;height:19px;transition:transform .35s var(--ease)}
.cbtn:hover .ico{transform:translateX(-4px)}
.cbtn.fill{background:var(--navy);color:var(--white)}
.cbtn.fill:hover{box-shadow:0 14px 30px rgba(22,38,65,.25)}
.cbtn.line:hover{background:rgba(22,38,65,.07)}
.cbtn.accent{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.cbtn.accent:hover{background:var(--white);border-color:var(--white);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.cbtn.white{border-color:rgba(255,255,255,.5);color:var(--white)}
.cbtn.white:hover{background:var(--white);color:var(--navy)}
.cbtn.sm{padding:10px 20px;font-size:14.5px}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--navy);color:var(--white);cursor:pointer;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:currentColor;transition:transform .45s var(--spring),opacity .3s,top .45s var(--ease)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:27px}
.menu-open .burger i:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-open .burger i:nth-child(3){top:22px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:45;background:var(--ice);padding:130px clamp(20px,6vw,50px) 40px;display:flex;flex-direction:column;gap:6px;
  clip-path:circle(0 at 44px 60px);visibility:hidden;transition:clip-path .7s var(--ease),visibility .7s;overflow-y:auto}
.menu-open .drawer{clip-path:circle(150% at 44px 60px);visibility:visible}
.drawer>a,.drawer details>summary{font-size:clamp(26px,7vw,34px);font-weight:700;padding:6px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);list-style:none;cursor:pointer}
.drawer details>summary::-webkit-details-marker{display:none}
.drawer details a{display:block;font-size:19px;padding:8px 14px;color:var(--mute)}
.menu-open .drawer>a,.menu-open .drawer details>summary{opacity:1;transform:none}
.drawer .foot-row{margin-top:auto;padding-top:24px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* ---------------------------------------------------------------- hero */
.hero{background:var(--sky);position:relative;overflow:hidden;padding:clamp(30px,6vh,70px) 0 clamp(90px,14vh,150px);margin-top:-78px;padding-top:calc(78px + clamp(30px,6vh,70px))}
.hero::before{content:"";position:absolute;inset:auto -20% -30% -20%;height:70%;background:radial-gradient(closest-side,rgba(255,255,255,.6),transparent);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,6vw,90px);align-items:center;position:relative;min-height:min(78vh,760px)}
.hero h1{font-size:clamp(42px,5.8vw,78px);line-height:1.18}
.hero h1 span{display:block;color:var(--accent-dk)}
.hero .brandline{margin-bottom:20px}
.hero .intro{font-weight:400;font-size:clamp(17px,1.5vw,20px);color:var(--mute);margin-top:22px;max-width:32em}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.55);backdrop-filter:blur(6px);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500}
.tag .ico{width:17px;height:17px;color:var(--accent-dk)}
.stage{position:relative;justify-self:center;width:min(100%,480px)}
.door{aspect-ratio:4/5;width:100%}
.door .arch{height:100%;background:linear-gradient(180deg,#F7F9FC 0%,var(--ice) 58%,#D5DEEA 100%);box-shadow:inset 0 -40px 60px rgba(22,38,65,.10)}
.door .floor{position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(180deg,rgba(201,214,230,0),rgba(201,214,230,.6))}
.door .emblem{position:absolute;inset:25% 22% auto;width:56%;height:auto;filter:drop-shadow(0 6px 10px rgba(138,82,20,.22))}
.stage .cup{position:absolute;height:auto;filter:drop-shadow(0 18px 20px rgba(22,38,65,.22));will-change:transform}
.stage .cup img{width:100%;height:auto;display:block;animation:float 6s ease-in-out infinite}
.stage .cup.a{inset:auto auto 3% -13%;width:33%}
.stage .cup.b{inset:7% -11% auto auto;width:27%}
.stage .cup.b img{animation-delay:-3s}
.stage .cup.c{inset:auto -8% 12% auto;width:24%}
.stage .cup.c img{animation-delay:-1.5s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.sprinkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero .wrap,.pagehead .wrap{z-index:1}
.sprinkles i{position:absolute;width:12px;height:4px;border-radius:4px;opacity:.75;animation:drift var(--t,9s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(var(--r0,0deg))}50%{transform:translate(var(--dx,10px),var(--dy,-18px)) rotate(var(--r1,90deg))}}
.drip{display:block;width:100%;height:clamp(36px,5vw,70px);position:absolute;inset:-1px 0 auto;pointer-events:none;z-index:1}

/* opening sequence — only with JavaScript and motion allowed */
.js .hero .brandline,.js .hero h1,.js .hero .intro,.js .hero .cta,.js .hero .tags{opacity:0;transform:translateY(22px)}
.js .door{clip-path:inset(62% 30% 0 30% round 999px 999px 0 0)}
.js .door .emblem{opacity:0;transform:translateY(30px) scale(.94)}
.js .stage .cup{opacity:0}
.ready .hero .brandline{opacity:1;transform:none;transition:opacity 1s var(--ease) .1s,transform 1s var(--ease) .1s}
.ready .hero h1{opacity:1;transform:none;transition:opacity 1.1s var(--ease) .25s,transform 1.1s var(--ease) .25s}
.ready .hero .intro{font-weight:400;opacity:1;transform:none;transition:opacity 1s var(--ease) .45s,transform 1s var(--ease) .45s}
.ready .hero .cta{opacity:1;transform:none;transition:opacity 1s var(--ease) .6s,transform 1s var(--ease) .6s}
.ready .hero .tags{opacity:1;transform:none;transition:opacity 1s var(--ease) .75s,transform 1s var(--ease) .75s}
.ready .door{clip-path:inset(0 0 0 0 round 0);transition:clip-path 1.5s var(--ease) .15s}
.ready .door .emblem{opacity:1;transform:none;transition:opacity 1.2s var(--ease) .9s,transform 1.4s var(--ease) .9s}
.ready .stage .cup{opacity:1;transition:opacity 1s var(--ease) 1.35s}

/* ---------------------------------------------------------------- marquee */
.marquee{background:var(--accent);overflow:hidden;padding:16px 0;position:relative;z-index:2;transform:rotate(-1.2deg);margin:-22px -10px 0;box-shadow:0 10px 30px rgba(22,38,65,.08)}
.marquee .track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:22px;padding-inline:11px;font-size:clamp(18px,2vw,24px);font-weight:700;white-space:nowrap}
.marquee span img{width:22px;height:auto}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ---------------------------------------------------------------- sections */
.band{padding:clamp(80px,12vh,140px) 0;position:relative}
.band.dark{background:var(--navy);color:var(--white)}
.band.honey{background:var(--honey)}
.band.white{background:var(--white)}
.band.cream{background:var(--cream)}
.band.sky{background:var(--sky)}
.head{max-width:700px;margin-bottom:clamp(36px,6vh,60px)}
.head.center{margin-inline:auto}
.head h2{font-size:clamp(34px,4.6vw,56px);margin-top:12px}
.head p{color:var(--mute);font-size:18px;margin-top:12px}
.dark .head p{color:rgba(255,255,255,.7)}
.headrow{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.headrow .head{margin-bottom:0}

/* about + counters */
.about{text-align:center;max-width:920px;margin:0 auto}
.about p.big{font-size:clamp(24px,3vw,38px);font-weight:500;line-height:1.6;margin-top:16px}
.about p.big b{font-weight:700;background:linear-gradient(transparent 62%,rgba(239,160,196,.55) 62%);padding-inline:4px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(40px,6vh,60px)}
.stat{background:var(--ice);border-radius:var(--r);padding:26px 18px;text-align:center}
.stat b{display:block;font:500 clamp(38px,4vw,54px)/1 'Jost',sans-serif;color:var(--navy)}
.stat span{display:block;margin-top:10px;color:var(--mute);font-size:15px}

/* breakfast */
.bf{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:center}
.bf .pic{justify-self:center;width:min(100%,430px);aspect-ratio:4/5;position:relative}
.bf .pic .arch{height:100%;background:linear-gradient(180deg,#FFF6EC,#F6DCC8);display:grid;place-items:center}
.bf .pic svg.plate{width:78%;height:auto}
.bf .pic .steam path{animation:steam 3.2s ease-in-out infinite;stroke-dasharray:40;stroke-dashoffset:40}
.bf .pic .steam path:nth-child(2){animation-delay:.6s}.bf .pic .steam path:nth-child(3){animation-delay:1.2s}
@keyframes steam{0%{stroke-dashoffset:40;opacity:0}40%{opacity:.8}100%{stroke-dashoffset:-40;opacity:0}}
.bf .bfbadge{position:absolute;inset:auto auto 6% -6%;background:var(--navy);color:var(--white);border-radius:18px;padding:12px 18px;box-shadow:0 18px 40px rgba(22,38,65,.25);font-size:14px;line-height:1.5}
.bf .bfbadge b{display:block;font-size:17px}
.bf h2{font-size:clamp(36px,4.8vw,58px);margin-top:12px}
.bf .where{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:500;color:var(--mute)}
.bf .where .ico{color:var(--accent-dk)}
.bfcards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.bfcard{background:var(--white);border-radius:18px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  transition:transform .4s var(--ease),box-shadow .4s}
.bfcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(22,38,65,.09)}
.bfcard b{font-size:17px}
.bfcard .p{font:500 18px 'Jost',sans-serif;white-space:nowrap}
.bfcard .p small{font:400 13px 'Tajawal',sans-serif;color:var(--mute);margin-inline-start:3px}
.extras{margin-top:22px}
.extras h4{font-size:16px;margin-bottom:10px;color:var(--mute);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14.5px}
.chip .num{color:var(--accent-dk);font-weight:500}
.also{margin-top:18px;font-size:15px;color:var(--mute)}

/* category rail */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,23%);gap:clamp(16px,2.2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;
  -webkit-mask-image:linear-gradient(to left,#000 90%,transparent);mask-image:linear-gradient(to left,#000 90%,transparent);scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.tile{scroll-snap-align:start;display:block;perspective:800px}
.tile .arch{aspect-ratio:4/5;background:linear-gradient(180deg,var(--ice),var(--ice-2));display:grid;place-items:center;transition:transform .6s var(--ease)}
.tile:nth-child(3n+2) .arch{background:linear-gradient(180deg,#F9E9D0,var(--honey))}
.tile:nth-child(3n) .arch{background:linear-gradient(180deg,#EEF2F7,var(--sky))}
.tile img,.tile svg.art{width:66%;height:auto;filter:drop-shadow(0 14px 16px rgba(22,38,65,.25));transition:transform .9s var(--ease)}
.tile:hover img,.tile:hover svg.art{transform:translateY(-10px) rotate(-3deg) scale(1.05)}
.tile h3{font-size:21px;margin-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tile h3 small{font:400 14px 'Tajawal',sans-serif;opacity:.62;white-space:nowrap}
.railnav{display:flex;gap:10px}
.railnav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-w);background:transparent;color:var(--white);cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s,color .3s}
.railnav button:hover{background:var(--accent);border-color:var(--accent);color:var(--navy)}

/* ice cream */
.ice{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:center}
.ice .pic{justify-self:center;width:min(100%,400px);aspect-ratio:4/5}
.ice .pic .arch{height:100%;background:linear-gradient(180deg,#FBF1E2,#F4DDB8);display:grid;place-items:center}
.ice .pic img{width:66%;height:auto;filter:drop-shadow(0 18px 20px rgba(22,38,65,.25));animation:float 7s ease-in-out infinite}
.list{list-style:none;margin:24px 0 0;padding:0}
.mi{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.mi .n{font-weight:500;font-size:17px}
.mi .fill{flex:1;border-bottom:1px dotted rgba(22,38,65,.28);transform:translateY(-5px)}
.mi .p{font-family:'Jost',sans-serif;font-size:17px;white-space:nowrap}
.mi .p small{font-family:'Tajawal',sans-serif;color:var(--mute);font-size:13px;margin-inline-start:4px}

/* occasions */
.occ{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
.ocard{background:var(--white);border-radius:28px;padding:30px 26px;position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s}
.ocard:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(22,38,65,.12)}
.ocard .art{width:84px;height:84px;border-radius:26px;display:grid;place-items:center;background:var(--ice);margin-bottom:18px}
.ocard:nth-child(2) .art{background:#F9EBD6}
.ocard:nth-child(3) .art{background:#E6ECF3}
.ocard:nth-child(4) .art{background:#FDF3E6}
.ocard .art svg{width:52px;height:52px}
.ocard h3{font-size:22px}
.ocard p{color:var(--mute);font-size:15.5px;margin-top:8px;line-height:1.8}
.ocard .from{margin-top:16px;font-weight:700;font-size:15px}
.ocard .from .num{font-size:22px;color:var(--accent-dk)}

/* branches */
.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.bcard{background:var(--white);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:260px;transition:transform .5s var(--ease),box-shadow .5s}
.bcard:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(22,38,65,.12)}
.bcard .info{padding:26px;display:flex;flex-direction:column;gap:8px}
.bcard .info .cone{width:26px;height:auto;opacity:.9}
.bcard h3{font-size:24px}
.bcard .area{color:var(--mute);font-size:15px;display:flex;align-items:center;gap:6px}
.bcard .area .ico{width:17px;height:17px;color:var(--accent-dk)}
.bcard .flag{align-self:flex-start;background:var(--accent);color:var(--navy);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:700}
.bcard .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.bcard .go .ico{width:18px;height:18px;transition:transform .35s var(--ease)}
.bcard:hover .go .ico{transform:translateX(-5px)}
.bcard .map{position:relative;background:var(--ice-2);min-height:220px}
.bcard .map iframe{pointer-events:none}
.bcard .map iframe,.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85) hue-rotate(-8deg)}
.bcard.soon{grid-template-columns:1fr}
.bcard.soon .info{background:repeating-linear-gradient(135deg,var(--white) 0 18px,#F7F9FC 18px 36px)}

/* ---------------------------------------------------------------- inner pages */
.pagehead{background:var(--sky);padding:calc(78px + clamp(60px,9vh,100px)) 0 clamp(80px,11vh,120px);margin-top:-78px;text-align:center;position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;left:50%;bottom:0;width:min(560px,86vw);aspect-ratio:1/1;transform:translate(-50%,74%);border-radius:50% 50% 0 0;background:var(--ice);opacity:.8}
.pagehead h1{font-size:clamp(40px,6vw,72px);margin-top:10px;position:relative}
.pagehead p{color:var(--mute);margin:12px auto 0;position:relative;max-width:40em;font-size:18px}
.pagehead .eyebrow,.pagehead .cta{position:relative}
.pagehead .cta{justify-content:center}
.crumbs{position:relative;font-size:14px;color:var(--mute);margin-bottom:6px}
.crumbs a{border-bottom:1px solid var(--line)}
.stick{position:sticky;top:64px;z-index:30;background:rgba(238,242,247,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.stick .wrap{display:flex;gap:8px;overflow-x:auto;padding-block:12px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to left,#000 90%,transparent);mask-image:linear-gradient(to left,#000 90%,transparent)}
.stick a{white-space:nowrap;border-radius:999px;padding:7px 16px;font-size:15px;transition:background .3s,color .3s}
.stick a:hover,.stick a.on{background:var(--navy);color:var(--white)}
.cat{padding:clamp(56px,9vh,90px) 0 10px;scroll-margin-top:130px}
.cat h2{font-size:clamp(28px,3.6vw,42px);display:flex;align-items:center;gap:16px}
.cat h2 img,.cat h2 svg{width:56px;height:56px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 8px rgba(22,38,65,.18))}
.cat h2 svg{filter:none}
.cat h2::after{content:"";flex:1;height:1px;background:var(--line)}
.cat .avail{margin-top:8px;color:var(--mute);font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cat .avail .ico{width:17px;height:17px;color:var(--accent-dk)}
.cat.featured{background:linear-gradient(180deg,#FFF6EC,rgba(255,246,236,0));border-radius:36px;margin-top:40px;padding-inline:0}
.rows{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,80px);margin-top:18px}
.menu-note{color:var(--mute);text-align:center;font-size:15px;padding:50px 0 90px}

/* branch page */
.bpage{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,36px);align-items:start}
.mapbox{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/3;background:var(--ice-2);box-shadow:0 26px 60px rgba(22,38,65,.12)}
.mapbox .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;color:var(--mute)}
.infocard{background:var(--white);border-radius:30px;padding:28px;display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}
.infocard .row2{display:flex;gap:12px;align-items:flex-start}
.infocard .row2 .ico{color:var(--accent-dk);margin-top:5px}
.infocard .row2 b{display:block;font-size:15px}
.infocard .row2 span{color:var(--mute);font-size:15px}
.infocard .cbtn{width:100%}
.served{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.srv{background:var(--white);border-radius:22px;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;transition:transform .4s var(--ease),box-shadow .4s}
.band.white .srv{background:var(--ice)}
.srv:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(22,38,65,.1)}
.srv img,.srv svg{width:72px;height:72px;object-fit:contain}
.srv b{font-size:16px}
.srv small{color:var(--mute);font-size:13.5px}

/* forms */
.formwrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,60px);align-items:start}
.aside h2{font-size:clamp(30px,3.6vw,44px);margin-top:10px}
.aside p{color:var(--mute);margin-top:12px}
.steps{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px;counter-reset:s}
.steps li{display:flex;gap:14px;align-items:flex-start;background:var(--white);border-radius:20px;padding:16px 18px}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font:500 16px 'Jost',sans-serif}
.steps b{display:block}
.steps span{color:var(--mute);font-size:15px}
.cform{background:var(--white);border-radius:32px;padding:clamp(22px,3vw,40px);box-shadow:0 26px 60px rgba(22,38,65,.08);position:relative;overflow:hidden}
.cform h3{font-size:24px;margin-bottom:6px}
.cform .sub{color:var(--mute);font-size:15px;margin-bottom:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label,.field legend{font-size:14.5px;font-weight:700}
.field label small{font-weight:400;color:var(--mute)}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);background:var(--cream);border-radius:14px;padding:12px 14px;font-size:16px;color:var(--navy);
  transition:border-color .25s,background .25s,box-shadow .25s;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23162641' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position:14px 50%;background-size:16px 16px;background-repeat:no-repeat;padding-left:40px}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-dk);background:var(--white);box-shadow:0 0 0 4px rgba(227,168,87,.25)}
.field input[type=file]{padding:10px;background:var(--ice)}
.field input[dir=ltr]{text-align:right}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
.field legend{float:none;width:auto;margin:0 0 6px;padding:0;line-height:1.6}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:500;font-size:14.5px;transition:background .25s,border-color .25s,color .25s}
.checks input{position:absolute;opacity:0;pointer-events:none}
.checks label:has(input:checked){background:var(--navy);border-color:var(--navy);color:var(--white)}
.checks label:has(input:focus-visible){outline:2px solid var(--accent-dk);outline-offset:2px}
.formfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:22px}
.formfoot small{color:var(--mute);font-size:13.5px;max-width:28em}
.cform .msg{margin-top:14px;font-size:15px;color:#A03A58;min-height:1.5em}
.cform button[disabled]{opacity:.6;cursor:progress}
.done{position:absolute;inset:0;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:30px;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.sent .done{opacity:1;visibility:visible}
.done svg{width:92px;height:92px}
.done circle{fill:var(--ice)}
.done path{fill:none;stroke:var(--navy);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}
.sent .done path{animation:tick .8s var(--ease) .25s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.done h3{font-size:26px}
.done p{color:var(--mute)}

/* jobs */
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.job{background:var(--white);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform .4s var(--ease),box-shadow .4s;cursor:pointer;border:1.5px solid transparent}
.job:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(22,38,65,.1)}
.job.picked{border-color:var(--navy)}
.job .art{width:52px;height:52px;border-radius:16px;background:var(--ice);display:grid;place-items:center;color:var(--navy)}
.job .art .ico{width:28px;height:28px}
.job h3{font-size:19px}
.job p{color:var(--mute);font-size:14.5px;line-height:1.75}
.job .apply{margin-top:auto;font-weight:700;font-size:14px;color:var(--accent-dk)}
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.perk{background:rgba(255,255,255,.08);border:1px solid var(--line-w);border-radius:22px;padding:20px}
.perk .ico{color:var(--accent);width:28px;height:28px}
.perk b{display:block;margin-top:10px;font-size:17px}
.perk span{color:rgba(255,255,255,.7);font-size:14.5px}

/* careers teaser */
.team{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,70px);align-items:center}
.team h2{font-size:clamp(34px,4.4vw,54px);margin-top:12px}
.team p{color:rgba(255,255,255,.72);margin-top:14px;max-width:34em}
.team .roles{display:flex;flex-wrap:wrap;gap:10px}
.team .roles span{border:1px solid var(--line-w);border-radius:999px;padding:9px 18px;font-size:15.5px;transition:background .3s,color .3s}
.team .roles span:hover{background:var(--accent);color:var(--navy);border-color:var(--accent)}

/* social band */
.social{background:var(--accent);text-align:center;padding:clamp(80px,11vh,120px) 0;position:relative;overflow:hidden}
.social h2{font-size:clamp(30px,4vw,50px);margin-top:12px}
.social .links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:32px}
.social .links a{display:inline-flex;align-items:center;gap:10px;background:var(--white);border-radius:999px;padding:12px 22px;font-weight:700;transition:transform .35s var(--ease),box-shadow .35s}
.social .links a:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(22,38,65,.18)}
.social .links .num{font-weight:400;color:var(--mute)}
.social .cone{position:absolute;width:190px;opacity:.15;pointer-events:none;will-change:transform}
.social .cone.a{inset:auto auto -30px 4%;rotate:-14deg}
.social .cone.b{inset:-20px 5% auto auto;rotate:12deg}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--navy);color:rgba(255,255,255,.72);padding:clamp(90px,12vh,120px) 0 30px;position:relative}

.fgrid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:clamp(24px,4vw,50px);align-items:start}
.fbrand .lock{width:150px;height:auto;display:block}
.fbrand p{margin-top:20px;font-size:17px;color:var(--white)}
.fbrand small{display:block;margin-top:6px;font-size:14.5px}
.foot h4{color:var(--white);font-size:16px;margin:0 0 16px;font-weight:700;display:flex;align-items:center;gap:8px}
.foot h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot li{font-size:15.5px}
.foot li small{display:block;font-size:13px;opacity:.6;line-height:1.4}
.foot a{transition:color .3s}
.foot a:hover{color:var(--accent)}
.foot .soc{display:flex;gap:10px;margin-top:22px}
.foot .soc a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-w);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s,transform .35s var(--spring)}
.foot .soc a:hover{background:var(--accent);border-color:var(--accent);color:var(--navy);transform:translateY(-3px) rotate(-6deg)}
.foot .cardcta{background:rgba(255,255,255,.06);border:1px solid var(--line-w);border-radius:24px;padding:20px}
.foot .cardcta p{font-size:15px;margin-bottom:14px}
.foot .cardcta .cbtn{width:100%}
.foot .cardcta .cbtn+.cbtn{margin-top:10px}
.fend{margin-top:60px;padding-top:22px;border-top:1px solid var(--line-w);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13.5px;color:rgba(255,255,255,.5)}
.totop{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-w);background:transparent;color:var(--white);cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s}
.totop:hover{background:var(--accent);color:var(--navy)}

/* ---------------------------------------------------------------- reveals */
.js .rv{opacity:0;transform:translateY(30px);filter:blur(4px)}
.js .rv.in{opacity:1;transform:none;filter:none;transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:var(--d,0s)}
.js .pop{opacity:0;transform:scale(.9)}
.js .pop.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .9s var(--spring);transition-delay:var(--d,0s)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .menubar,.acts .soc-mini{display:none}
  .burger{display:block}
  .acts{margin-inline-start:auto}
  .fgrid{grid-template-columns:1fr 1fr}
  .jobs,.occ{grid-template-columns:1fr 1fr}
  .perks{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;text-align:center;min-height:0}
  .stage{order:-1;width:min(76%,340px)}
  .hero .intro{font-weight:400;margin-inline:auto}.cta,.tags{justify-content:center}
  .rail{grid-auto-columns:minmax(220px,40%)}
  .ice,.bf,.team,.formwrap,.bpage{grid-template-columns:1fr}
  .ice .pic,.bf .pic{width:min(80%,330px)}
  .bgrid{grid-template-columns:1fr}
  .rows{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .infocard{position:static}
}
@media (max-width:620px){
  .cave{font-size:16px}
  .note{font-size:12.5px}
  .brand img{height:32px}.top.solid .brand img{height:28px}
  .acts .cbtn{display:none}
  .bar{min-height:66px}
  .hero{margin-top:-66px;padding-top:calc(66px + 24px)}
  .pagehead{margin-top:-66px;padding-top:calc(66px + 60px)}
  .rail{grid-auto-columns:74%}
  .bcard{grid-template-columns:1fr}
  .bcard .map{min-height:200px;order:-1}
  .grid2,.bfcards{grid-template-columns:1fr}
  .jobs,.perks,.occ{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .stick{top:56px}
  .cat h2 img,.cat h2 svg{width:42px;height:42px}
  .bf .bfbadge{inset:auto auto 4% 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .pop,.js .hero .brandline,.js .hero h1,.js .hero .intro,.js .hero .cta,.js .hero .tags,.js .door .emblem,.js .stage .cup{opacity:1;transform:none;filter:none}
  .js .door{clip-path:none}
}

/* best sellers, from the tills */
.best{display:inline-flex;align-items:center;gap:4px;margin-inline-start:8px;background:var(--accent);color:var(--navy);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700;vertical-align:middle;white-space:nowrap}

/* the café's dessert photographs */
.gallery{columns:4 220px;column-gap:16px}
.ph{break-inside:avoid;margin:0 0 16px;background:var(--white);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(22,38,65,.08)}
.ph .zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden}
.ph img{display:block;width:100%;height:auto;transition:transform .8s var(--ease)}
.ph:hover img{transform:scale(1.05)}
.ph figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 16px}
.ph figcaption b{font-size:16px;line-height:1.5}
.ph .p{font:500 17px 'Jost',sans-serif;white-space:nowrap}
.ph .p small{font:400 12px 'Tajawal',sans-serif;color:var(--mute);margin-inline-start:3px}
.mi .th{width:46px;height:46px;border-radius:12px;overflow:hidden;flex:none;align-self:center;padding:0;border:0;cursor:zoom-in;background:var(--ice-2)}
.mi .th img{width:100%;height:100%;object-fit:cover;display:block}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,560px);max-height:94vh;overflow:visible}
dialog.lightbox::backdrop{background:rgba(22,38,65,.84);backdrop-filter:blur(4px)}
dialog.lightbox img{display:block;max-width:100%;max-height:84vh;border-radius:22px;margin:0 auto}
dialog.lightbox p{color:#fff;text-align:center;margin-top:10px;font-weight:700;font-size:18px}
dialog.lightbox .x{position:absolute;top:10px;inset-inline-start:10px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:24px;line-height:1;cursor:pointer;z-index:2}
@media (max-width:620px){.gallery{columns:2 150px;column-gap:10px}.ph{margin-bottom:10px;border-radius:16px}.ph figcaption{padding:8px 10px;flex-direction:column;gap:2px}.ph figcaption b{font-size:14px}}

/* map panels: static on cards, tap-to-load on the branches page */
.bcard .map.static{background:
  repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.55) 38px 41px),
  repeating-linear-gradient(90deg,transparent 0 52px,rgba(255,255,255,.55) 52px 55px),
  linear-gradient(135deg,#E1E8F1,#D3DCE8);display:grid;place-items:center}
.pinball{width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--navy);display:grid;place-items:center;box-shadow:0 10px 24px rgba(138,82,20,.35)}
.pinball .ico{width:26px;height:26px}
.maplive{position:absolute;inset:0;width:100%;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.55) 38px 41px),repeating-linear-gradient(90deg,transparent 0 52px,rgba(255,255,255,.55) 52px 55px),linear-gradient(135deg,#E1E8F1,#D3DCE8);color:var(--navy)}
.maplive b{font-size:16px}
.maplive small{color:var(--mute);font-size:13px}
.maplive:hover .pinball{transform:translateY(-3px)}
.pinball{transition:transform .35s var(--ease)}
.bcard .info .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px}

.foot .credit{display:inline-flex;align-items:center;gap:11px;padding:5px 5px 5px 18px;padding-inline:5px 18px;border:1px solid var(--line-w);
  border-radius:999px;color:inherit;background:rgba(255,255,255,.03);transition:border-color .3s,background .3s}
.foot .credit img{width:34px;height:34px;border-radius:50%;flex:none;display:block}
.foot .credit .who{display:flex;flex-direction:column;line-height:1.3;text-align:start}
.foot .credit small{font-size:10.5px;color:rgba(255,255,255,.48)}
.foot .credit b{font-weight:500;font-size:13.5px;color:rgba(255,255,255,.9)}
.foot .credit i{font-style:normal;font-family:'Jost',sans-serif;font-size:11.5px;letter-spacing:.03em;color:rgba(255,255,255,.58);direction:ltr;unicode-bidi:isolate}
.foot .credit:hover{border-color:rgba(24,179,114,.55);background:rgba(24,179,114,.08)}
.foot .credit:hover b{color:#fff}
@media (max-width:640px){.fend{justify-content:center;text-align:center}.fend .credit{order:-1}}

/* ---- staff sign-in (CEO, 21 Sep) ---- */
.staff{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);
  font-size:14px;font-weight:500;color:var(--navy);transition:background .3s,color .3s,border-color .3s;white-space:nowrap}
.staff .ico{width:17px;height:17px}
.staff:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}
.drawer .foot-row .staff{height:46px}
/* language switch (26 Sep 2026): the same page in the other language */
.langsw{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--navy);text-decoration:none;white-space:nowrap}
.langsw:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}
.langsw:focus-visible{outline:2px solid var(--accent-dk);outline-offset:2px}
.langsw[lang="ar"]{font-family:inherit}
.drawer .foot-row .langsw{height:46px}
@media (max-width:640px){.acts .langsw{display:none}}
@media (max-width:1100px){.acts .staff span{display:none}.acts .staff{width:40px;padding:0;justify-content:center}}
@media (max-width:640px){.acts .staff{display:none}}

/* ---- Odoo's own pages on this website: sign-in, password reset, /jobs, portal ---- */
.cave-chrome{background:transparent}
.cave-chrome-top{background:var(--ice);position:sticky;top:-38px;z-index:50}
.cave-chrome-top .top{position:relative}
main.cave-odoo{background:var(--ice);color:var(--navy);font-family:'Tajawal',system-ui,sans-serif;min-height:52vh;padding-bottom:40px;
  --bs-primary:#162641;--bs-primary-rgb:22,38,65;--bs-link-color:#8A5214;--bs-link-color-rgb:138,82,20;--bs-link-hover-color:#162641;
  --bs-body-font-family:'Tajawal',system-ui,sans-serif;--bs-border-radius:14px}
main.cave-odoo h1,main.cave-odoo h2,main.cave-odoo h3,main.cave-odoo h4,main.cave-odoo h5{font-family:'Tajawal',system-ui,sans-serif;font-weight:700;color:var(--navy)}
main.cave-odoo a:not(.btn){color:var(--accent-dk)}
main.cave-odoo .btn{border-radius:999px;font-weight:700;font-family:'Tajawal',system-ui,sans-serif}
main.cave-odoo .btn-primary{--bs-btn-bg:#162641;--bs-btn-border-color:#162641;--bs-btn-hover-bg:#22365A;--bs-btn-hover-border-color:#22365A;
  --bs-btn-active-bg:#22365A;--bs-btn-active-border-color:#22365A;--bs-btn-disabled-bg:#162641;--bs-btn-disabled-border-color:#162641;--bs-btn-color:#fff;--bs-btn-hover-color:#fff}
main.cave-odoo .btn-secondary,main.cave-odoo .btn-light{--bs-btn-bg:#fff;--bs-btn-border-color:var(--line);--bs-btn-color:#162641;--bs-btn-hover-bg:#EEF2F7}
main.cave-odoo .form-control,main.cave-odoo .form-select{border-radius:14px;border-color:rgba(22,38,65,.18);padding:.7rem 1rem;background:#fff}
main.cave-odoo .form-control:focus,main.cave-odoo .form-select:focus{border-color:#8A5214;box-shadow:0 0 0 4px rgba(227,168,87,.25)}
main.cave-odoo .input-group>.btn{border-radius:14px}
/* the sign-in and reset card */
main.cave-odoo .oe_website_login_container{width:min(460px,calc(100% - 32px));max-width:none;margin:clamp(34px,7vh,70px) auto 0;padding:clamp(26px,4vw,40px);background:#fff;
  border-radius:28px;box-shadow:0 30px 70px rgba(22,38,65,.12)}
main.cave-odoo .oe_login_form,main.cave-odoo .oe_reset_password_form,main.cave-odoo .oe_signup_form{max-width:none;margin:0}
.cave-login-head{text-align:center;margin-bottom:22px}
.cave-login-head img{width:56px;height:56px;display:block;margin:0 auto 12px}
.cave-login-head h1{font-size:28px;margin:0 0 6px}
.cave-login-head p{color:var(--mute);font-size:15px;margin:0}
main.cave-odoo .oe_login_buttons .btn-primary{padding:.75rem 1rem;font-size:16px}
main.cave-odoo .btn-primary,main.cave-odoo .btn-primary:disabled{background-color:#162641!important;border-color:#162641!important;color:#fff!important}
main.cave-odoo .btn-primary:hover,main.cave-odoo .btn-primary:focus{background-color:#22365A!important;border-color:#22365A!important}
main.cave-odoo .btn-link{color:#8A5214!important;font-weight:500;text-decoration:none}
main.cave-odoo .btn-link:hover{color:#162641!important}
main.cave-odoo .oe_login_form .btn-secondary,main.cave-odoo .oe_login_form .btn-light,main.cave-odoo .oe_login_form .btn-outline-secondary{color:#162641!important;background:#fff!important;border-color:rgba(22,38,65,.18)!important}

/* ---- home announcements from «محتوى الموقع» (phase 2) ---- */
.band.promos{padding-block:clamp(50px,7vh,80px)}
.promogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px}
.promo{display:flex;align-items:center;gap:22px;border-radius:30px;padding:26px;overflow:hidden;box-shadow:0 20px 50px rgba(22,38,65,.08)}
.promo-ice{background:linear-gradient(160deg,#F7F9FC,var(--ice-2))}
.promo-navy{background:var(--navy);color:var(--white)}
.promo-navy .eyebrow{color:var(--accent)}
.promo-honey{background:var(--honey)}
.promopic{flex:none;width:clamp(110px,28%,170px)}
.promopic img{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 18px rgba(22,38,65,.18))}
.promotext h3{font-size:clamp(24px,2.6vw,32px);margin:6px 0 6px}
.promotext p{opacity:.8;margin-bottom:14px}
.promo-navy .cbtn.fill{background:var(--accent);color:var(--navy)}
@media (max-width:560px){.promo{flex-direction:column;text-align:center}.promo .eyebrow{justify-content:center}}
.promogrid:has(> .promo:only-child){max-width:820px;margin-inline:auto}

/* a live number that just changed */
.stat .num{transition:color .4s}
.stat .num.bump{color:var(--accent-dk)}
@media (prefers-reduced-motion:reduce){.stat .num{transition:none}}
/* ---------------------------------------------------------------- phones (22 Sep): denser, thumb-first
   Same content as the desktop page; only density and reach change. The dock puts the four things people
   come for under the thumb, and steps out of the way while reading (hidden on the way down, back on the
   way up) and while typing in a form. */
.dock{display:none}
@media (max-width:620px){
  .band{padding:clamp(56px,8vh,84px) 0}
  .band.promos{padding-block:40px}
  .pagehead{padding-top:calc(66px + 34px);padding-bottom:70px}
  .pagehead h1{font-size:clamp(34px,10vw,44px)}
  .pagehead p{font-size:16px;line-height:1.85}
  .head h2,.headrow h2{font-size:clamp(28px,8.4vw,36px)}
  .ice .pic,.bf .pic{width:min(64%,250px)}
  /* branch cards that open the branch page: one compact row each (the /branches page keeps its maps) */
  a.bcard{grid-template-columns:76px 1fr;min-height:0;border-radius:22px;align-items:stretch}
  a.bcard .map{min-height:0;order:-1;display:grid;place-items:center}
  a.bcard .map .pinball{width:40px;height:40px;box-shadow:0 6px 14px rgba(138,82,20,.3)}
  a.bcard .map .pinball .ico{width:19px;height:19px}
  a.bcard .info{padding:14px 16px;gap:3px;justify-content:center}
  a.bcard .info .cone,a.bcard .info .go{display:none}
  a.bcard h3{font-size:19px}
  a.bcard .area{font-size:13.5px}
  a.bcard .flag{font-size:11.5px;padding:2px 10px}
  a.bcard.soon{grid-template-columns:1fr}
  .bgrid{gap:10px}
  /* what a branch serves: two to a row, smaller drawings */
  .served{grid-template-columns:1fr 1fr;gap:10px}
  .srv{padding:14px 10px;gap:6px}
  .srv img,.srv svg{width:48px;height:48px}
  .srv b{font-size:15px}
  /* occasion offers: two to a row */
  .occ{grid-template-columns:1fr 1fr;gap:10px}
  .ocard{padding:18px 14px 16px;border-radius:22px}
  .ocard .art{width:54px;height:54px;border-radius:17px;margin-bottom:12px}
  .ocard .art svg{width:32px;height:32px}
  .ocard h3{font-size:16.5px;line-height:1.45}
  .ocard p{font-size:13.5px;line-height:1.7;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ocard .from{font-size:13px;margin-top:10px}
  .ocard .from .num{font-size:18px}
  /* footer: brand and card full width, the two link lists side by side */
  .foot{padding-top:64px;padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px 18px}
  .fbrand,.foot .cardcta{grid-column:1/-1}
  .foot li{font-size:14.5px}
  .foot li small{display:none}
  /* the dock */
  .dock{position:fixed;z-index:60;inset-inline:12px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;
        grid-template-columns:repeat(4,1fr);gap:4px;padding:6px;border-radius:24px;background:rgba(255,255,255,.84);
        -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
        box-shadow:0 14px 36px rgba(22,38,65,.2),0 0 0 1px rgba(22,38,65,.07);
        transition:transform .5s var(--ease),opacity .35s}
  .dock a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;border-radius:18px;
          color:var(--navy);font-size:11.5px;font-weight:700;line-height:1.2;-webkit-tap-highlight-color:transparent;
          transition:background .3s,color .3s,transform .2s}
  .dock a .ico{width:22px;height:22px}
  .dock a:active{transform:scale(.94)}
  .dock a[aria-current]{background:var(--navy);color:var(--white)}
  .dock a[aria-current] .ico{color:var(--accent)}
  .dock.away{transform:translateY(calc(100% + 24px));opacity:0}
  .dock.typing{display:none}
  .totop{display:none}
}
@media (max-width:620px) and (prefers-reduced-motion:reduce){.dock{transition:none}}
/* follower figures in the social band (22 Sep): name and handle on one line, the live figure under it */
.social .links a .who{display:flex;flex-direction:column;align-items:flex-start;line-height:1.35;text-align:start}
.social .links a .who .num{font-weight:400;color:var(--mute);font-size:.92em}
.social .links a .fol{font-size:13px;font-weight:500;color:var(--mute)}
.social .links a .fol .num{font-weight:800;color:var(--navy);font-size:15px;letter-spacing:.01em;transition:color .4s}
.social .links a .fol .num.bump{color:var(--accent-dk)}
.social .folsum{margin:14px auto 0;font-size:17px;color:var(--navy)}
.social .folsum .num{font-weight:800}
/* dish pages (22 Sep): the photo in the site's arch, the price and where it is served beside it */
.dish{display:grid;grid-template-columns:1fr .78fr;gap:clamp(26px,5vw,70px);align-items:start}
.dish .pic{justify-self:center;width:min(100%,520px);aspect-ratio:4/5;position:relative}
.dish .arch{height:100%}
.dish .arch .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dish .infocard .price{font-size:clamp(40px,5vw,56px);font-weight:800;color:var(--navy);line-height:1}
.dish .infocard .price small{font-size:17px;font-weight:500;color:var(--mute);margin-inline-start:8px}
.dish .infocard .avail{margin:0}
a.bfcard.has-page{text-decoration:none;color:inherit;position:relative;transition:transform .35s var(--ease),box-shadow .35s}
a.bfcard.has-page b{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:2px}
a.bfcard.has-page:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(22,38,65,.12)}
@media (max-width:1000px){.dish{grid-template-columns:1fr}.dish .pic{width:min(88%,420px)}}
/* a menu item with its own page */
.mi .n a.dishlink{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;text-decoration-thickness:2px}
.mi .n a.dishlink:hover{color:var(--accent-dk)}

/* ---------------------------------------------------------------- English pages (26 Sep 2026)
   The site is drawn right-to-left with logical properties; these are the few rules that name a side. */
[dir=ltr] .dirico{transform:scaleX(-1)}
[dir=ltr] .cbtn:hover .dirico{transform:scaleX(-1) translateX(-4px)}
[dir=ltr] .bcard:hover .go .dirico{transform:scaleX(-1) translateX(-5px)}
[dir=ltr] .marquee .track{animation-name:marq-ltr}
@keyframes marq-ltr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir=ltr] .field select{background-position:right 14px center;padding-left:14px;padding-right:40px}
[dir=ltr] .field input[dir=ltr]{text-align:left}
[dir=ltr] .cave, [dir=ltr].cave{font-feature-settings:normal}
[dir=ltr] .eyebrow::before{box-shadow:-14px 0 0 -2px currentColor;margin-inline-start:14px}
/* English is longer than Arabic: a calmer headline size and no wrapping in the header button */
[dir=ltr] .hero h1{font-size:clamp(34px,3.7vw,54px);line-height:1.1;letter-spacing:-.01em}
[dir=ltr] .pagehead h1{letter-spacing:-.01em}
[dir=ltr] .acts .cbtn{white-space:nowrap}
/* the "more to swipe" fade sits at the end of a row: the left in Arabic, the right in English */
[dir=ltr] .rail,[dir=ltr] .stick .wrap{-webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent)}
/* a comfortable tap target on the announcement link without a taller bar (26 Sep) */
.note a{display:inline-block;padding-block:6px;margin-block:-6px}