/* Café Arwa — shared styles for every page.
   Warm and bright: cream walls, olive green, wood brown and amber light,
   taken from the colours of the café interior. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('fonts/dm-sans-variable-latin.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Aref Ruqaa Arwa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/aref-ruqaa-arwa.woff2') format('woff2');
}

:root{
  --bg:#FBF6EC;          /* warm white, the walls */
  --cream:#F4EAD6;
  --sand:#EADBBE;
  --amber:#E2A24A;       /* the wall-light glow */
  --amber-soft:#F6DFB5;
  --olive:#5B5B2D;
  --olive-deep:#3F3F1E;
  --wood:#6B4430;
  --ink:#2A2118;
  --muted:#5B5042;
  --terracotta:#B3502F;
  --amber-deep:#D5922F;  /* amber hover */
  --line:rgba(42,33,24,0.13);
  --serif:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maxw:1180px;
  --pad:clamp(20px, 5vw, 56px);
  --nav-h:72px;
  --radius:22px;
  --shadow:0 12px 32px rgba(74,52,24,0.10);
}
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); -webkit-text-size-adjust:100%;}
html,body{overflow-x:clip;}
html.lenis,html.lenis body{height:auto;}
html.lenis{scroll-behavior:auto;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
body{font-family:var(--sans); font-size:1.0625rem; background:var(--bg); color:var(--ink); line-height:1.6;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:var(--amber); color:var(--ink);}
:focus-visible{outline:3px solid var(--terracotta); outline-offset:3px; border-radius:4px;}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- NAV ---------- */
header.nav{position:sticky; top:0; z-index:100; border-bottom:1px solid var(--line); transition:box-shadow .2s ease;}
/* blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile menu inside the bar */
header.nav::before{content:''; position:absolute; inset:0; z-index:-1; background:rgba(251,246,236,0.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
header.nav.scrolled{box-shadow:0 6px 24px rgba(74,52,24,0.10);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); min-height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{display:inline-block; white-space:nowrap; font-family:var(--serif); font-weight:700; font-size:1.45rem; letter-spacing:-0.01em;}
.brand::before{content:''; display:inline-block; vertical-align:-5px; margin-right:10px; width:20px; height:26px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M3 24V11a7 7 0 0 1 14 0v13' fill='none' stroke='%235B5B2D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='12' r='2.2' fill='%23E2A24A'/%3E%3C/svg%3E") center/contain no-repeat;}
.brand em{font-style:normal; font-weight:700; color:var(--olive);}
nav.links{display:flex; gap:clamp(10px,1.1vw,16px); font-size:0.92rem; font-weight:600; align-items:center;}
nav.links a{position:relative; padding:6px 0; white-space:nowrap;}
nav.links a::after{content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--amber); transition:width .25s ease;}
nav.links a:hover::after, nav.links a:focus-visible::after, nav.links a.current::after{width:100%;}
nav.links a.current{color:var(--olive);}
nav.links a.lang-switch{font-size:0.8rem; letter-spacing:0.08em; padding:8px 12px; border:1.5px solid var(--line); border-radius:999px;}
nav.links a.lang-switch::after{display:none;}
nav.links a.btn-reserve{background:var(--olive); color:var(--bg) !important; padding:11px 22px; border-radius:999px; font-weight:600; font-size:0.92rem;}
nav.links a.btn-reserve:hover{background:var(--olive-deep);}
nav.links a.btn-reserve::after{display:none;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:12px; margin-right:-12px;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform .3s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:1280px){
  nav.links{position:fixed; inset:var(--nav-h) 0 0 0; background:var(--bg); flex-direction:column; align-items:stretch; padding:16px var(--pad) 32px; gap:0; font-size:1.5rem; font-family:var(--serif); font-weight:500; transform:translateX(100%); visibility:hidden; transition:transform .35s ease, visibility 0s linear .35s; overflow-y:auto;}
  nav.links.open{transform:translateX(0); visibility:visible; transition:transform .35s ease, visibility 0s;}
  nav.links a{padding:18px 0; border-bottom:1px solid var(--line);}
  nav.links a::after{display:none;}
  nav.links a.lang-switch{align-self:flex-start; margin-top:20px; border-bottom:1.5px solid var(--line); padding:10px 18px; font-family:var(--sans); font-size:1rem;}
  nav.links a.btn-reserve{margin-top:16px; text-align:center; border-bottom:none; padding:16px 18px; font-family:var(--sans); font-size:1rem;}
  .nav-toggle{display:block;}
}

/* ---------- BUTTONS ---------- */
.btn{font-family:var(--sans); font-weight:600; font-size:1rem; padding:14px 30px; min-height:48px; border-radius:999px; border:2px solid var(--olive); display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; background:none; color:var(--olive); line-height:1.2;}
.btn.primary{background:var(--olive); color:var(--bg);}
.btn.primary:hover{background:var(--olive-deep); border-color:var(--olive-deep); transform:translateY(-2px); box-shadow:0 8px 20px rgba(63,63,30,0.25);}
.btn.ghost:hover{background:var(--olive); color:var(--bg);}
.btn.amber{background:var(--amber); border-color:var(--amber); color:var(--ink);}
.btn.amber:hover{background:var(--amber-deep); border-color:var(--amber-deep); transform:translateY(-2px);}
.btn:focus-visible{outline-offset:4px;}

/* ---------- HERO ---------- */
.hero{background:radial-gradient(900px 420px at 88% -8%, var(--amber-soft) 0%, rgba(246,223,181,0) 70%), var(--bg); padding:clamp(36px,6vw,80px) 0 clamp(56px,8vw,104px); position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center;}
.hero-inner{position:relative; z-index:2;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:700; letter-spacing:0.04em; color:var(--wood); background:var(--amber-soft); padding:8px 16px; border-radius:999px; margin-bottom:22px;}
.eyebrow::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(226,162,74,0.3);}
.hero h1{font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:1.05; letter-spacing:-0.03em; max-width:13ch; margin-bottom:24px; text-wrap:balance; }
.hero h1 .is{color:var(--terracotta); font-style:normal;}
.hero p.lede{font-size:clamp(1.05rem,1.6vw,1.22rem); max-width:46ch; color:var(--muted); margin-bottom:32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-media{position:relative; width:min(100%,460px); margin-inline:auto;}
.arch{border-radius:999px 999px 28px 28px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); background:var(--sand);}
.arch img{width:100%; height:100%; object-fit:cover;}
.hero-media::after{content:''; position:absolute; inset:0; border:2.5px solid var(--amber); border-radius:999px 999px 28px 28px; transform:translate(16px,16px); z-index:-1;}
.hero-badge{position:absolute; left:-14px; bottom:34px; background:var(--bg); border-radius:16px; padding:12px 18px; box-shadow:var(--shadow); font-size:0.9rem; font-weight:600; display:flex; align-items:center; gap:10px; max-width:calc(100% - 20px);}
.hero-badge svg{flex:none; color:var(--terracotta);}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{width:min(100%,360px);}
  .hero-badge{left:8px;}
}

/* ---------- SECTIONS ---------- */
section{padding:clamp(64px,9vw,104px) 0;}
.band-cream{background:var(--cream);}
.band-sand{background:var(--sand);}
.band-dark{background:var(--olive-deep); color:var(--cream);}
.section-head{max-width:660px; margin-bottom:clamp(32px,5vw,52px);}
.section-head.center{margin-inline:auto; text-align:center;}
.section-eyebrow{font-size:0.8rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--olive); margin-bottom:14px;}
h2.section-title{font-family:var(--serif); font-weight:700; font-size:clamp(1.9rem,4vw,3rem); line-height:1.1; letter-spacing:-0.028em; color:var(--ink); }
h2.section-title em{color:var(--terracotta); font-style:normal;}
.section-sub{margin-top:16px; color:var(--muted); font-size:1.08rem; max-width:56ch;}
.band-dark .section-eyebrow{color:var(--amber);}
.band-dark h2.section-title{color:var(--cream);}
.band-dark h2.section-title em{color:var(--amber);}
.band-dark .section-sub{color:var(--sand);}

/* ---------- CARDS ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; margin-top:10px;}
.card{background:var(--bg); border:1px solid var(--line); padding:30px 28px; border-radius:var(--radius); box-shadow:0 2px 0 rgba(74,52,24,0.04); transition:transform .25s ease, box-shadow .25s ease;}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.card .kind{display:inline-block; font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--olive); background:var(--amber-soft); padding:5px 12px; border-radius:999px; margin-bottom:16px;}
.card h2, .card h3{font-family:var(--serif); font-size:1.4rem; font-weight:700; margin-bottom:10px; line-height:1.2; }
.card p{font-size:1rem; color:var(--muted);}
.card .icon{width:54px; height:54px; border-radius:50%; background:var(--amber-soft); color:var(--olive); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.visit-block{margin-bottom:26px;}
.visit-block .label{font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--olive); margin-bottom:6px;}
.visit-block .value{font-family:var(--serif); font-size:1.3rem; font-weight:600; line-height:1.3;}
.photo{width:100%; height:auto; max-height:440px; object-fit:cover; border-radius:var(--radius); margin-top:36px; box-shadow:var(--shadow);}

/* ---------- HOME: story journey ---------- */
.journey{display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(32px,6vw,80px); align-items:start;}
.journey-intro{position:sticky; top:calc(var(--nav-h) + 32px);}
.steps{list-style:none; position:relative; padding-left:64px;}
.steps::before{content:''; position:absolute; left:23px; top:12px; bottom:12px; width:0; border-left:3px dotted var(--amber);}
.step{position:relative; padding-bottom:clamp(28px,4vw,44px);}
.step:last-child{padding-bottom:0;}
.step-dot{position:absolute; left:-64px; top:0; width:48px; height:48px; border-radius:50%; background:var(--amber); color:var(--ink); font-family:var(--serif); font-weight:700; font-size:1.2rem; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px var(--cream);}
.step .place{font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--olive); margin-bottom:6px;}
.step h3{font-family:var(--serif); font-weight:700; font-size:clamp(1.35rem,2.4vw,1.8rem); line-height:1.2; margin-bottom:8px; }
.step p{color:var(--muted);}
.step.arrive .step-dot{background:var(--olive); color:var(--bg);}
@media (max-width:860px){
  .journey{grid-template-columns:1fr;}
  .journey-intro{position:static;}
  .steps{padding-left:58px;}
  .steps::before{left:20px;}
  .step-dot{left:-58px; width:42px; height:42px; font-size:1.05rem;}
}

/* ---------- HOME: gallery, menu teaser, explore ---------- */
.gallery{display:grid; grid-template-columns:1.5fr 1fr; grid-template-rows:repeat(2,minmax(180px,20vw)); gap:16px;}
.gallery figure{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--sand); box-shadow:var(--shadow);}
.gallery figure:first-child{grid-row:span 2;}
.gallery img{width:100%; height:100%; object-fit:cover;}
.gallery figcaption{position:absolute; left:14px; bottom:14px; background:rgba(251,246,236,0.92); color:var(--ink); font-size:0.78rem; font-weight:600; padding:6px 12px; border-radius:999px;}
@media (max-width:700px){
  .gallery{grid-template-columns:1fr; grid-template-rows:none;}
  .gallery figure, .gallery figure:first-child{grid-row:auto; aspect-ratio:16/10;}
}
.menu-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media (max-width:700px){.menu-grid{grid-template-columns:1fr;}}
.menu-card{background:var(--bg); border:1px solid var(--line); padding:22px 26px; border-radius:18px; display:flex; justify-content:space-between; align-items:baseline; gap:16px;}
.menu-card .name{font-family:var(--serif); font-size:1.15rem; font-weight:600;}
.menu-card .price{font-weight:700; color:var(--olive); white-space:nowrap;}
.more-link{display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-weight:700; color:var(--olive); border-bottom:2px solid var(--amber); padding:10px 0 2px;} /* tall enough to tap */
.more-link:hover{color:var(--olive-deep);}
.explore-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:1100px){.explore-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:860px){.explore-grid{grid-template-columns:1fr;}}
.explore-card{display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;}
.explore-card:hover{transform:translateY(-5px); box-shadow:var(--shadow);}
.explore-card img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;}
.explore-card .body{padding:24px 26px 28px; display:flex; flex-direction:column; gap:8px; flex:1;}
.explore-card h3{font-family:var(--serif); font-size:1.5rem; font-weight:700; }
.explore-card p{color:var(--muted); font-size:1rem;}
.explore-card .go{margin-top:auto; padding-top:10px; font-weight:700; color:var(--olive);}

/* ---------- HOME: signup band + visit ---------- */
.notify-band{background:var(--amber-soft); padding:clamp(48px,7vw,80px) 0;}
.notify{text-align:center; max-width:640px; margin:0 auto;}
.notify h3{font-family:var(--serif); font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; }
.notify p{margin:12px auto 0; max-width:48ch; color:var(--muted);}
.notify-form{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px;}
.notify-form input[type=email]{flex:1 1 260px; max-width:380px; min-height:50px; padding:12px 22px; border-radius:999px; border:2px solid transparent; background:#fff; color:var(--ink); font:inherit; font-size:1rem; box-shadow:0 2px 8px rgba(74,52,24,0.08);}
.notify-form input[type=email]:focus-visible{border-color:var(--olive);}
.notify-form .btn{min-height:50px; cursor:pointer;}
.notify-form .btn:disabled{opacity:.6; cursor:wait;}
.notify .form-consent{font-size:0.85rem; margin-top:14px;}
.notify .form-consent a{text-decoration:underline;}
.notify .form-msg{min-height:1.4em; margin-top:14px; font-weight:700; color:var(--olive-deep);}
.notify .form-msg:not(.ok):not(:empty){color:var(--terracotta);}
.visit-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media (max-width:700px){.visit-grid{grid-template-columns:1fr;}}
.visit-card{background:var(--bg); border:1px solid var(--line); padding:26px 28px; border-radius:var(--radius);}
.visit-card .label{font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--olive); margin-bottom:8px;}
.visit-card .value{font-family:var(--serif); font-size:1.22rem; font-weight:600; line-height:1.35;}
.visit-card .value a{border-bottom:2px solid var(--amber);}

/* ---------- MENU PAGE ---------- */
.menu-hero{background:radial-gradient(800px 380px at 85% -20%, var(--amber-soft) 0%, rgba(246,223,181,0) 70%), var(--bg); text-align:center; padding:clamp(48px,8vw,96px) var(--pad) clamp(36px,5vw,56px);}
.menu-hero h1{font-family:var(--serif); font-weight:700; font-size:clamp(2.6rem,7vw,4.6rem); letter-spacing:-0.03em; line-height:1.05; }
.menu-hero p{margin:16px auto 0; color:var(--muted); max-width:46ch; font-size:1.12rem;}
.menu-body{max-width:820px; margin:0 auto; padding:0 var(--pad) clamp(64px,9vw,104px);}
.category{margin-bottom:clamp(48px,7vw,72px);}
.category-head{margin-bottom:10px;}
.category-head h2{font-family:var(--serif); font-weight:700; font-size:clamp(1.8rem,4vw,2.4rem); color:var(--olive); letter-spacing:-0.01em; }
.category-head p.sub{color:var(--muted); margin-top:6px;}
.subhead{font-size:0.82rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--wood); margin:34px 0 8px;}
.item-row{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:16px 0; border-bottom:1px solid var(--line);}
.item-row .name-wrap{flex:1;}
.item-name{font-family:var(--serif); font-size:1.15rem; font-weight:600;}
.item-desc{font-size:0.95rem; color:var(--muted); margin-top:3px;}
.item-price{font-weight:700; color:var(--olive); white-space:nowrap; font-variant-numeric:tabular-nums;}
.tag{font-size:0.78rem; font-weight:700; color:var(--olive-deep); background:var(--amber-soft); border-radius:999px; padding:3px 10px; margin-left:8px; vertical-align:middle;}
.menu-note{font-size:0.92rem; color:var(--muted); background:var(--cream); padding:16px 20px; border-radius:14px; margin-top:20px; border-left:4px solid var(--amber);}
.category.massaa-cat{background:var(--olive-deep); color:var(--cream); margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:clamp(40px,6vw,64px) var(--pad);}
.category.massaa-cat > *{max-width:820px; margin-left:auto; margin-right:auto;}
.category.massaa-cat .category-head h2{color:var(--amber);}
.category.massaa-cat .category-head p.sub{color:var(--sand);}
.category.massaa-cat .subhead{color:var(--amber);}
.category.massaa-cat .item-row{border-bottom-color:rgba(244,234,214,0.18);}
.category.massaa-cat .item-name{color:var(--cream);}
.category.massaa-cat .item-desc{color:var(--sand);}
.category.massaa-cat .item-price{color:var(--amber);}

/* ---------- FORMS (catering) ---------- */
.inquiry-form{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; max-width:720px;}
.inquiry-form .field{display:flex; flex-direction:column; gap:6px;}
.inquiry-form .field.wide, .inquiry-form .btn{grid-column:1 / -1;}
.inquiry-form label{font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--olive);}
.inquiry-form input, .inquiry-form textarea, .inquiry-form select{font:inherit; font-size:1rem; min-height:50px; padding:12px 16px; border:2px solid transparent; border-radius:14px; background:#fff; color:var(--ink); width:100%; box-shadow:0 2px 8px rgba(74,52,24,0.08);}
.inquiry-form input:focus-visible, .inquiry-form textarea:focus-visible, .inquiry-form select:focus-visible{border-color:var(--olive);}
.inquiry-form textarea{resize:vertical; min-height:130px;}
.inquiry-form .btn{justify-self:start; cursor:pointer;}
.inquiry-form .btn:disabled{opacity:.6; cursor:wait;}
.form-msg{min-height:1.4em; margin-top:16px; font-weight:700; color:var(--terracotta);}
.form-msg.ok{color:var(--olive-deep);}
.form-alt{margin-top:14px; font-size:0.92rem; color:var(--muted);}
.form-alt a{text-decoration:underline; text-underline-offset:3px;}
@media (max-width:600px){ .inquiry-form{grid-template-columns:1fr;} }

/* ---------- LEGAL ---------- */
.legal{padding:clamp(40px,6vw,72px) 0 clamp(64px,9vw,100px);}
.legal .wrap{max-width:760px;}
.legal h1{font-family:var(--serif); font-weight:700; font-size:clamp(2.2rem,5vw,3.2rem); line-height:1.1; letter-spacing:-0.015em; color:var(--olive); }
.legal .updated{margin-top:12px; font-size:0.85rem; font-weight:600; color:var(--wood);}
.legal h2{font-family:var(--serif); font-weight:700; font-size:1.35rem; margin:40px 0 10px; color:var(--olive); }
.legal p, .legal li{color:var(--muted); line-height:1.7; margin-bottom:12px;}
.legal ul{padding-left:22px; margin-bottom:12px;}
.legal a{text-decoration:underline; text-underline-offset:3px;}
.legal address{font-style:normal; line-height:1.7; margin-bottom:12px; color:var(--muted);}

/* ---------- FOOTER ---------- */
footer{background:var(--olive-deep); color:var(--sand); padding:clamp(40px,6vw,64px) 0 30px;}
.footer-inner{display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px; align-items:flex-end;}
footer .brand{color:var(--cream); font-size:1.6rem;}
footer .brand::before{filter:brightness(0) invert(1) sepia(0.3) saturate(2) hue-rotate(-10deg);}
footer .brand em{color:var(--amber);}
.footer-meta{font-size:0.95rem; text-align:right; line-height:1.7;}
.footer-note{margin-top:34px; padding-top:20px; border-top:1px solid rgba(244,234,214,0.2); font-size:0.85rem; color:rgba(234,219,190,0.9);}
.footer-note a{text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:8px 4px;}
.footer-note a:hover, .footer-note a:focus-visible{color:var(--amber);}
@media (max-width:600px){
  footer{padding-bottom:calc(30px + 64px + env(safe-area-inset-bottom));} /* clear the floating buttons */
  .footer-inner{align-items:flex-start;}
  .footer-meta{text-align:left;}
}

/* ---------- FLOATING WHATSAPP + INSTAGRAM ---------- */
.menu-cta{margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;}
.menu-cta .item-desc{flex:1 1 220px;}
.float-social{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:200; display:flex; flex-direction:column; gap:12px;}
.float-btn{width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 6px 18px rgba(42,33,24,0.28); transition:transform .2s ease, box-shadow .2s ease;}
.float-btn:hover, .float-btn:focus-visible{transform:translateY(-3px) scale(1.05); box-shadow:0 8px 22px rgba(42,33,24,0.34);}
.float-btn.whatsapp{background:#25D366;}
.float-btn.instagram{background:radial-gradient(circle at 30% 110%, #ffdb73, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5);}
@media (max-width:600px){
  .float-social{right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); flex-direction:row-reverse; gap:10px;}
  .float-btn{width:46px; height:46px;}
}

/* ---------- MOTION ---------- */
@media (scripting: enabled){
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
}

/* ---------- SMALL SCREENS ---------- */
@media (max-width:600px){
  .card{padding:24px 22px;}
  .hero-ctas .btn{flex:1 1 100%;}
  .inquiry-form .btn{justify-self:stretch;}
}


/* =====================================================================
   ART DIRECTION — Yemeni details: the qamariya fanlight, arches, the
   carved-screen zigzag, Arabic calligraphy, a domed skyline
   ===================================================================== */

/* zigzag lattice, taken from the carved wooden screen in the café */
.pattern-band{height:34px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='34' viewBox='0 0 28 34'%3E%3Cpath d='M0 1L14 17 28 1M0 33L14 17 28 33' fill='none' stroke='%23E2A24A' stroke-width='2.2'/%3E%3C/svg%3E") repeat-x center/28px 34px; opacity:.7;}
.pattern-band.on-dark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='34' viewBox='0 0 28 34'%3E%3Cpath d='M0 1L14 17 28 1M0 33L14 17 28 33' fill='none' stroke='%23E2A24A' stroke-width='2.2'/%3E%3C/svg%3E"); opacity:.55;}

/* Arabic name as a soft watermark */
.hero-arabic, .footer-arabic{position:absolute; font-family:'Aref Ruqaa Arwa','Aref Ruqaa',serif; font-weight:700; line-height:1; pointer-events:none; user-select:none; direction:rtl;}
.hero-arabic{right:clamp(8px,3vw,56px); bottom:-0.06em; font-size:clamp(8rem,17vw,16rem); color:rgba(226,162,74,0.17); z-index:0;}
.footer-arabic{left:clamp(8px,4vw,60px); bottom:-0.22em; font-size:clamp(9rem,20vw,16rem); color:rgba(226,162,74,0.13);}
footer{position:relative; overflow:hidden;}
footer > .wrap{position:relative; z-index:1;}
footer > .pattern-band{margin-top:calc(-1 * clamp(40px,6vw,64px)); margin-bottom:clamp(28px,4vw,44px);}

/* hero: three arches + a stained-glass fanlight rising behind them */
.hero-media.trio{width:min(100%,600px); margin-top:clamp(20px,4vw,56px);}
.hero-media.trio::after{display:none;}
.fanlight{position:absolute; left:50%; top:-26%; width:126%; transform:translateX(-50%); z-index:0; filter:drop-shadow(0 0 40px rgba(226,162,74,0.55)); animation:glow 8s ease-in-out infinite;}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 28px rgba(226,162,74,0.35));}50%{filter:drop-shadow(0 0 56px rgba(226,162,74,0.75));}}
.arches{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.32fr 1fr; gap:12px; align-items:end;}
.arches .arch{aspect-ratio:3/4.6; box-shadow:0 14px 34px rgba(74,52,24,0.20); animation:rise .9s cubic-bezier(.2,.7,.2,1) both;}
.arches .a1,.arches .a3{aspect-ratio:3/4.5;} .arches .a1{ animation-delay:.15s;}
.arches .a2{aspect-ratio:3/6.2; animation-delay:.02s;}
.arches .a3{animation-delay:.3s;}
@keyframes rise{from{opacity:0; transform:translateY(34px);}to{opacity:1; transform:none;}}
.hero-media.trio .hero-badge{left:50%; transform:translateX(-50%); bottom:-20px; white-space:nowrap; z-index:2;}
@media (max-width:860px){
  .hero-media.trio{order:-1; width:min(100%,400px);}
  .hero-arabic{opacity:.8;}
}

/* single-arch heroes on the inner pages get the fanlight too */
.hero-media .fanlight.small{top:-12%; width:70%;}

/* values as three arches */
.values{align-items:stretch;}
.values .card{border-radius:999px 999px var(--radius) var(--radius); text-align:center; padding:60px 28px 34px; background:linear-gradient(180deg,var(--amber-soft) 0%, var(--bg) 46%);}
.values .card .icon{margin:0 auto 18px; background:var(--amber); color:var(--ink);}


/* the story: a deep olive band with a domed skyline and a glowing route */
.journey-band{position:relative; margin-top:44px; background:var(--olive-deep); color:var(--cream);}
.journey-band::before{content:''; position:absolute; left:0; right:0; top:-43px; height:44px; background:
  radial-gradient(circle at 70px 44px, var(--olive-deep) 40px, transparent 40.5px) 0 0/190px 44px repeat-x,
  radial-gradient(circle at 24px 44px, var(--olive-deep) 23px, transparent 23.5px) 0 0/48px 44px repeat-x;}
.journey-band .section-eyebrow{color:var(--amber);}
.journey-band h2.section-title{color:var(--cream);}
.journey-band h2.section-title em{color:var(--amber);}
.journey-band .section-sub{color:var(--sand);}
.journey-band .steps::before{border-left-color:rgba(226,162,74,0.7);}
.journey-band .step-dot{box-shadow:0 0 0 6px var(--olive-deep);}
.journey-band .step .place{color:var(--amber);}
.journey-band .step h3{color:var(--cream);}
.journey-band .step p{color:var(--sand);}
.journey-band .step.arrive .step-dot{background:var(--cream); color:var(--olive-deep);}
.route-map{margin-top:32px; border:1px solid rgba(244,234,214,0.18); border-radius:var(--radius); background:radial-gradient(120% 90% at 20% 10%, rgba(226,162,74,0.14), rgba(63,63,30,0) 60%); padding:6px;}
.route-map svg{display:block; width:100%; height:auto;}
.route-map .contour{fill:none; stroke:rgba(226,162,74,0.22); stroke-width:1.2;}
.route-map .wave{fill:none; stroke:rgba(244,234,214,0.12); stroke-width:1.4; stroke-linecap:round;}
.route-map .dots{fill:none; stroke:rgba(244,234,214,0.45); stroke-width:2.4; stroke-dasharray:1 9; stroke-linecap:round;}
.route-map .glow{fill:none; stroke:var(--amber); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 6px rgba(226,162,74,0.9)); transition:stroke-dashoffset 3.2s ease .2s;}
.route-map.in .glow{stroke-dashoffset:0;}
.route-map .node{fill:var(--amber);}
.route-map .ring{fill:none; stroke:var(--amber); stroke-width:1.5; opacity:.6; transform-box:fill-box; transform-origin:center; animation:ping 3.4s ease-out infinite;}
.route-map .node.end{fill:var(--cream);}
.route-map .ring.end{stroke:var(--cream);}
@keyframes ping{0%{transform:scale(.6); opacity:.9;}100%{transform:scale(2.6); opacity:0;}}
.route-map text{font-family:var(--serif); font-style:normal; font-weight:600; font-size:27px; fill:var(--cream);}
.route-map text.sub{font-family:var(--sans); font-style:normal; font-size:14px; letter-spacing:0.14em; text-transform:uppercase; fill:var(--amber);}
@media (scripting: none){.route-map .glow{stroke-dashoffset:0;}}

/* amber quote band */
.quote-band{background:var(--amber); color:var(--ink); position:relative; overflow:hidden; padding:clamp(56px,9vw,108px) 0;}
.quote-band .fanlight-bg{position:absolute; right:-6%; bottom:-14%; width:min(70%,640px); opacity:0.28; mix-blend-mode:multiply; pointer-events:none;}
.quote-band .wrap{position:relative; z-index:1;}
.quote-band blockquote{font-family:var(--serif); font-style:normal; font-weight:700; font-size:clamp(2rem,5vw,3.9rem); line-height:1.08; letter-spacing:-0.03em; max-width:20ch; text-wrap:balance; }
.quote-band cite{display:block; margin-top:26px; font-style:normal; font-weight:700; font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--olive-deep);}
.quote-band .pattern-band{position:absolute; left:0; right:0; opacity:.35;}
.quote-band .pattern-band.top{top:0;}
.quote-band .pattern-band.bottom{bottom:0;}
.quote-band .pattern-band{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='34' viewBox='0 0 28 34'%3E%3Cpath d='M0 1L14 17 28 1M0 33L14 17 28 33' fill='none' stroke='%233F3F1E' stroke-width='2.2'/%3E%3C/svg%3E");}

/* warm up the cool interior renderings */
.warm{filter:saturate(1.14) sepia(0.16) brightness(1.06) contrast(1.02);}

/* menu page: two columns on laptops, category icons, fanlight crown */
.menu-hero{position:relative; overflow:hidden;}
.menu-hero .fanlight-sm{display:block; width:min(220px,50vw); height:auto; margin:0 auto 18px; filter:drop-shadow(0 0 30px rgba(226,162,74,0.5));}
.menu-hero .menu-arabic{position:absolute; left:50%; bottom:0.1em; transform:translateX(-50%); font-family:'Aref Ruqaa Arwa','Aref Ruqaa',serif; font-weight:700; font-size:clamp(7rem,17vw,12rem); color:rgba(226,162,74,0.16); line-height:1; pointer-events:none; user-select:none; z-index:0;}
.menu-hero > *:not(.menu-arabic){position:relative; z-index:1;}
.menu-body{max-width:1120px;}
.menu-cols{columns:2; column-gap:clamp(40px,6vw,88px);}
.menu-cols .category{break-inside:avoid; margin-bottom:clamp(40px,6vw,64px);}
.menu-body > .menu-note{max-width:820px;}
@media (max-width:900px){.menu-cols{columns:1;}}
.category-head h2{display:flex; align-items:center; gap:14px;}
.cat-icon{flex:none; width:44px; height:44px; border-radius:50%; background:var(--amber-soft); color:var(--olive); display:inline-flex; align-items:center; justify-content:center;}
.category.massaa-cat .cat-icon{background:rgba(226,162,74,0.18); color:var(--amber);}
.category.massaa-cat > *{max-width:1000px;}

/* the Arabic name lives in CSS: it is pure decoration, not text */
.hero-arabic::before, .menu-arabic::before, .footer-arabic::before{content:'أروى';}

/* decorative bits are hidden from assistive tech in the HTML; keep them out of print too */
@media print{.hero-arabic,.footer-arabic,.fanlight,.fanlight-bg,.pattern-band{display:none;}}

/* menu: short story line under a subhead */
.beans-note{font-size:0.95rem; color:var(--muted); margin:-2px 0 6px;}

/* ARWA wordmark: the brand lettering, drawn as a mask so it takes the text colour */
.brand .wordmark{display:inline-block; height:0.95em; aspect-ratio:891/268; margin-left:0.12em; vertical-align:-0.06em; background:currentColor; -webkit-mask:url("arwa-wordmark.png") center/contain no-repeat; mask:url("arwa-wordmark.png") center/contain no-repeat;}

/* ---------- EVENTS ---------- */
.hero-solo .hero-inner{max-width:720px;}
.hero-solo h1{max-width:16ch;}
.event{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(24px,4vw,48px); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,40px); box-shadow:0 2px 0 rgba(74,52,24,0.04);}
.event + .event{margin-top:26px;}
.event .kind{display:inline-block; font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--olive); background:var(--amber-soft); padding:5px 12px; border-radius:999px; margin-bottom:16px;}
.event h3{font-family:var(--serif); font-size:clamp(1.5rem,3vw,2rem); font-weight:700; line-height:1.15; margin-bottom:8px;}
.event-date{font-weight:700; color:var(--terracotta); margin-bottom:12px;}
.event-info p{color:var(--muted);}
.event-info .event-date{color:var(--terracotta);}
.event-photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; align-content:start;}
.event-photos figure{margin:0; border-radius:14px; overflow:hidden; background:var(--sand);}
.event-photos img{width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover;}
.event-empty{grid-column:1/-1; color:var(--muted); font-style:italic; border:1.5px dashed var(--line); border-radius:14px; padding:28px 20px; text-align:center; align-self:start;}
.event-note{margin-top:28px; font-size:0.92rem; color:var(--muted); max-width:62ch;}
@media (max-width:860px){ .event{grid-template-columns:1fr;} }

/* ---------- BRUNCH BOOKING PICKER ---------- */
.booking-form{display:grid; gap:26px; max-width:720px;}
.booking-form fieldset{border:0; margin:0; padding:0; min-width:0;}
.booking-form legend{padding:0; margin-bottom:12px; font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--olive);}
.bk-hint{margin:10px 0 0; font-size:0.92rem; color:var(--muted);}
.bk-hint a{text-decoration:underline; text-underline-offset:3px;}
.cal{background:#fff; border-radius:18px; padding:14px; box-shadow:0 2px 8px rgba(74,52,24,0.08); max-width:380px;}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.cal-title{font-weight:700; color:var(--ink); text-transform:capitalize;}
.cal-prev, .cal-next{width:44px; height:44px; border:0; border-radius:50%; background:var(--cream); color:var(--olive-deep); font-size:1.4rem; line-height:1; cursor:pointer;}
.cal-prev:disabled, .cal-next:disabled{opacity:.3; cursor:default;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.cal-wd{text-align:center; font-size:0.72rem; font-weight:700; color:var(--muted); padding:4px 0;}
.cal-day{aspect-ratio:1; min-height:42px; border:0; border-radius:12px; background:transparent; font:inherit; font-size:0.95rem; color:var(--ink); cursor:pointer;}
.cal-day:disabled{color:rgba(42,33,24,0.28); cursor:default; text-decoration:line-through;}
.cal-empty{pointer-events:none;}
.cal-day:not(:disabled):hover{background:var(--amber-soft);}
.cal-day.on{background:var(--olive); color:var(--bg); font-weight:700;}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{position:relative; cursor:pointer;}
.chip input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer;}
.chip span{display:flex; align-items:center; justify-content:center; min-width:56px; min-height:46px; padding:0 14px; border-radius:14px; background:#fff; border:2px solid transparent; font-weight:700; color:var(--ink); box-shadow:0 2px 8px rgba(74,52,24,0.08);}
.chip input:checked + span{background:var(--olive); color:var(--bg);}
.chip input:focus-visible + span, .cal-day:focus-visible, .cal-prev:focus-visible, .cal-next:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.bk-details{display:grid; gap:18px;}
.booking-form .field{display:flex; flex-direction:column; gap:6px;}
.booking-form .field label{font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--olive);}
.booking-form .field input, .booking-form .field textarea{font:inherit; font-size:1rem; min-height:50px; padding:12px 16px; border:2px solid transparent; border-radius:14px; background:#fff; color:var(--ink); width:100%; box-shadow:0 2px 8px rgba(74,52,24,0.08);}
.booking-form .field input:focus-visible, .booking-form .field textarea:focus-visible{border-color:var(--olive);}
.booking-summary{margin:0; padding:14px 16px; border-radius:14px; background:var(--amber-soft); color:var(--olive-deep); font-weight:700;}
.booking-form .btn{justify-self:start; cursor:pointer;}
.booking-form .btn:disabled{opacity:.6; cursor:wait;}
@media (max-width:600px){ .booking-form .btn{justify-self:stretch;} .cal{max-width:none;} }
.visit-card-wide{grid-column:1 / -1;}
.visit-card .visit-note{margin:12px 0 0; font-size:0.95rem;}
.visit-card .visit-note a{border-bottom:2px solid var(--amber);}