/* =========================================================
   Indian Coffee House Intl. — Dubai
   Royal black & gold, taken from the logo, with a tone-on-tone
   floral lattice, classic Garamond type and Mughal arch frames.
   ========================================================= */

:root {
  --dark: #15120e;
  --dark-2: #0d0b08;
  --dark-3: #1f1a14;
  --line: #2b241b;
  --cream: #f3ead2;
  --paper: #f6efdf;
  --paper-2: #ece2c9;
  --ink: #24190f;
  --ink-soft: #605040;
  --muted: #b9aa8c;
  --gold: #c9a45c;
  --gold-light: #e8cf94;
  --gold-deep: #94722f;
  --red: #b8323a;
  --veg: #2f8a3e;

  --serif: "EB Garamond", "Cormorant Garamond", Garamond, Baskerville, Georgia, serif;
  --arabic: "Amiri", "Geeza Pro", "Times New Roman", serif;

  --container: 1200px;
  --header-h: 86px;
  --radius: 4px;

  --pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M0 0L140 140M140 0L0 140' fill='none' stroke='%23221d16' stroke-width='2'/%3E%3Cpath d='M70 70C61 60 61 45 70 36C79 45 79 60 70 70ZM70 70C80 61 95 61 104 70C95 79 80 79 70 70ZM70 70C79 80 79 95 70 104C61 95 61 80 70 70ZM70 70C60 79 45 79 36 70C45 61 60 61 70 70Z' fill='%2315120e' stroke='%23221d16' stroke-width='2'/%3E%3C/svg%3E");
  --pattern-deep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M0 0L140 140M140 0L0 140' fill='none' stroke='%23191510' stroke-width='2'/%3E%3Cpath d='M70 70C61 60 61 45 70 36C79 45 79 60 70 70ZM70 70C80 61 95 61 104 70C95 79 80 79 70 70ZM70 70C79 80 79 95 70 104C61 95 61 80 70 70ZM70 70C60 79 45 79 36 70C45 61 60 61 70 70Z' fill='%230d0b08' stroke='%23191510' stroke-width='2'/%3E%3C/svg%3E");
  --pattern-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M0 0L140 140M140 0L0 140' fill='none' stroke='%23ebe1c8' stroke-width='2'/%3E%3Cpath d='M70 70C61 60 61 45 70 36C79 45 79 60 70 70ZM70 70C80 61 95 61 104 70C95 79 80 79 70 70ZM70 70C79 80 79 95 70 104C61 95 61 80 70 70ZM70 70C60 79 45 79 36 70C45 61 60 61 70 70Z' fill='%23f6efdf' stroke='%23ebe1c8' stroke-width='2'/%3E%3C/svg%3E");
  --pattern-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M0 0L140 140M140 0L0 140' fill='none' stroke='%232a2319' stroke-width='2'/%3E%3Cpath d='M70 70C61 60 61 45 70 36C79 45 79 60 70 70ZM70 70C80 61 95 61 104 70C95 79 80 79 70 70ZM70 70C79 80 79 95 70 104C61 95 61 80 70 70ZM70 70C60 79 45 79 36 70C45 61 60 61 70 70Z' fill='%231f1a14' stroke='%232a2319' stroke-width='2'/%3E%3C/svg%3E");
  --orn-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='12' viewBox='0 0 92 12'%3E%3Cpath d='M0 6h31M61 6h31' stroke='%23f3ead2' stroke-width='1.3'/%3E%3Cpath d='M33 6l4-3.6 4 3.6-4 3.6zM40.5 6l5.5-5.5 5.5 5.5-5.5 5.5zM51 6l4-3.6 4 3.6-4 3.6z' fill='%23f3ead2'/%3E%3C/svg%3E");
  --orn-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='12' viewBox='0 0 92 12'%3E%3Cpath d='M0 6h31M61 6h31' stroke='%2394722f' stroke-width='1.3'/%3E%3Cpath d='M33 6l4-3.6 4 3.6-4 3.6zM40.5 6l5.5-5.5 5.5 5.5-5.5 5.5zM51 6l4-3.6 4 3.6-4 3.6z' fill='%2394722f'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--cream);
  background: var(--dark) var(--pattern-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.15; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.ar { font-family: var(--arabic); }

/* ---------- Section skins ---------- */
.section { position: relative; padding: 110px 0; }
.s-dark { background: var(--dark) var(--pattern-dark); color: var(--cream); }
.s-deep { background: var(--dark-2) var(--pattern-deep); color: var(--cream); }
.s-paper {
  background: var(--dark-3) var(--pattern-mid); color: var(--cream);
  --ink: var(--cream); --ink-soft: var(--muted); --gold-deep: var(--gold); --paper-2: rgba(201,164,92,.25);
  border-top: 1px solid rgba(201,164,92,.3); border-bottom: 1px solid rgba(201,164,92,.3);
}
.s-paper + .s-paper { border-top: 1px solid var(--paper-2); }

/* ---------- Type ---------- */
.label {
  display: block; font-size: 15px; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase; color: var(--cream);
}
.s-paper .label { color: var(--gold-deep); }
.label .ar { letter-spacing: 0; text-transform: none; font-size: 17px; margin-inline-start: 12px; color: var(--gold-light); }
.s-paper .label .ar { color: var(--gold-deep); }
.orn { display: block; width: 92px; height: 12px; margin: 22px 0; background: var(--orn-cream) no-repeat center; }
.s-paper .orn { background-image: var(--orn-gold); }
.center { text-align: center; }
.center .orn { margin-left: auto; margin-right: auto; }
.title { font-size: clamp(36px, 4.2vw, 56px); font-weight: 400; letter-spacing: .01em; }
.title em { font-style: italic; color: var(--gold-light); }
.s-paper .title em { color: var(--gold-deep); }
.statement { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.45; max-width: 980px; margin: 0 auto; }
.lead { font-size: 20px; color: var(--muted); max-width: 640px; }
.s-paper .lead { color: var(--ink-soft); }
.center .lead { margin-left: auto; margin-right: auto; }
.head { margin-bottom: 60px; }
.muted { color: var(--muted); }
.s-paper .muted { color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 15px 30px; border: 1px solid var(--gold); border-radius: var(--radius); cursor: pointer;
  font: 500 14px/1 var(--serif); letter-spacing: .24em; text-transform: uppercase;
  background: transparent; color: var(--cream);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.btn:hover { background: var(--gold); color: var(--dark-2); }
.btn-solid { background: var(--gold); color: var(--dark-2); }
.btn-solid:hover { background: var(--gold-light); border-color: var(--gold-light); }
.s-paper .btn { color: var(--ink); border-color: var(--gold-deep); }
.s-paper .btn:hover, .s-paper .btn-solid { background: var(--gold); border-color: var(--gold); color: var(--dark-2); }
.s-paper .btn-solid:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn-sm { padding: 11px 18px; font-size: 12px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row { justify-content: center; }
.link { font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); border-bottom: 1px solid rgba(201,164,92,.5); padding-bottom: 3px; transition: color .2s, border-color .2s; }
.link:hover { color: #fff; border-color: var(--gold-light); }
.s-paper .link { color: var(--gold-deep); }
.s-paper .link:hover { color: var(--ink); }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* ---------- Mughal arch frame ---------- */
.arch { position: relative; padding: 12px; }
.arch > img { width: 100%; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; clip-path: url(#arch-clip); }
.arch > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arch > svg path { fill: none; vector-effect: non-scaling-stroke; stroke: var(--gold); stroke-width: 1.2; }

/* =========================================================
   HEADER
   ========================================================= */
.topbar { background: var(--dark-2); font-size: 15px; color: var(--muted); border-bottom: 1px solid rgba(201,164,92,.18); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; height: 40px; }
.topbar-list { display: flex; gap: 28px; }
.topbar-list li { display: flex; align-items: center; gap: 8px; }
.topbar .ico { width: 15px; height: 15px; color: var(--gold); }
.topbar a:hover { color: var(--gold-light); }
.topbar .ar { color: var(--gold-light); font-size: 17px; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(13,11,8,.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201,164,92,.45);
}
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); gap: 40px; }
.nav { display: flex; gap: 38px; align-items: center; }
.nav-left { justify-content: flex-end; }
.nav-right { justify-content: flex-start; }
.nav a:not(.btn) { font-size: 15px; letter-spacing: .24em; text-transform: uppercase; color: var(--cream); padding: 6px 0; position: relative; transition: color .2s; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .3s; }
.nav a:not(.btn):hover, .nav a.active { color: var(--gold-light); }
.nav a:not(.btn):hover::after, .nav a.active::after { transform: scaleX(1); }
.brand { position: relative; z-index: 2; display: block; }
.brand img { height: 130px; width: auto; margin: 34px 0 -34px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.45)); transition: height .3s, margin .3s; }
.site-header.scrolled .brand img { height: 68px; margin: 0; }
.nav-toggle, .drawer { display: none; }

/* =========================================================
   HERO (home)
   ========================================================= */
.hero { position: relative; min-height: clamp(640px, calc(100vh - 86px), 860px); display: flex; align-items: center; overflow: hidden; background: var(--dark-2); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13,11,8,.97) 0%, rgba(13,11,8,.88) 30%, rgba(13,11,8,.35) 55%, rgba(13,11,8,0) 78%),
    linear-gradient(0deg, rgba(13,11,8,.9) 0%, rgba(13,11,8,0) 26%);
}
.hero-content { position: relative; z-index: 3; padding-top: 80px; padding-bottom: 100px; }
.hero-content > div { max-width: 560px; }
.hero h1 { font-size: clamp(52px, 6.4vw, 92px); font-weight: 400; line-height: 1.02; margin: 4px 0 6px; }
.hero h1 em { display: block; font-style: italic; color: var(--gold-light); }
.hero-content p { font-size: 21px; color: var(--cream); max-width: 470px; }
.hero .btn-row { margin-top: 34px; }
.hero-character {
  position: absolute; z-index: 2; bottom: 0; left: 47%; height: 84%; width: auto; max-width: none;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent);
}
.speech {
  position: absolute; z-index: 3; left: calc(47% + 360px); top: 12%;
  padding: 12px 22px; background: var(--dark-2); color: var(--gold-light);
  border: 1px solid var(--gold); border-radius: 30px;
  font-style: italic; font-size: 21px; line-height: 1.2; text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  animation: bob 4s ease-in-out infinite;
}
.speech::after { content: ""; position: absolute; left: 36px; bottom: -8px; width: 15px; height: 15px; background: var(--dark-2); border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: rotate(45deg); }
.speech .ar { display: block; font-style: normal; font-size: 17px; color: var(--gold); }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* Gold hairline with diamond on section joins */
.rule { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent); }
.rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; background: var(--dark-2); border: 1px solid var(--gold); transform: translate(-50%, -50%) rotate(45deg); }

/* =========================================================
   STORY
   ========================================================= */
.story-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; margin-top: 90px; }
.story-grid .arch { --ar: 1 / 1.1; max-width: 460px; }
.promise { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; margin-top: 30px; }
.promise li { display: flex; gap: 16px; align-items: flex-start; }
.promise svg { width: 42px; height: 42px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.promise h3 { font-size: 22px; margin-bottom: 2px; }
.promise p { font-size: 16px; color: var(--muted); margin: 0; line-height: 1.5; }

/* =========================================================
   MENU CATEGORIES (home)
   ========================================================= */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 40px; }
.cat-card { text-align: center; display: block; }
.cat-card .arch { --ar: 1 / 1; margin-bottom: 18px; transition: transform .4s ease; }
.cat-card:hover .arch { transform: translateY(-6px); }
.cat-card .arch img { transition: transform .6s ease; }
.cat-card:hover .arch img { transform: scale(1.04); }
.cat-card h3 { font-size: 28px; }
.cat-card .ar { color: var(--gold-deep); font-size: 18px; display: block; margin: 2px 0 6px; }
.cat-card p { font-size: 17px; color: var(--ink-soft); margin: 0 auto 14px; max-width: 300px; line-height: 1.5; }
.cat-card.more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 20px; border: 1px solid var(--gold-deep); outline: 1px solid var(--gold-deep); outline-offset: -10px; }
.cat-card.more img { width: 130px; height: 130px; border-radius: 50%; border: 1px solid var(--gold-deep); background: #fff; }
.cat-card.more h3 { font-size: 30px; }

/* =========================================================
   SIGNATURE
   ========================================================= */
.sig-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: center; }
.sig-grid .arch { --ar: 1 / 1.15; max-width: 500px; }
.price-big { font-size: 26px; color: var(--gold-light); margin: 6px 0 24px; }
.mini-menu { margin: 26px 0 34px; border-top: 1px solid rgba(201,164,92,.3); }
.mini-menu li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(201,164,92,.3); font-size: 20px; }
.mini-menu .leader { flex: 1; border-bottom: 1px dotted rgba(201,164,92,.55); transform: translateY(-6px); }
.mini-menu .p { color: var(--gold-light); font-size: 18px; white-space: nowrap; }

/* =========================================================
   INDIA × UAE
   ========================================================= */
.worlds { display: grid; grid-template-columns: 1fr 160px 1fr; gap: 30px; align-items: center; margin-top: 50px; }
.world h3 { font-size: 32px; }
.world .ar { color: var(--gold-deep); font-size: 20px; margin-bottom: 12px; display: block; }
.world li { padding: 7px 0; border-bottom: 1px solid var(--paper-2); font-size: 18px; }
.world-left { text-align: right; }
.worlds-seal { position: relative; display: grid; place-items: center; }
.worlds-seal img { width: 140px; height: 140px; border-radius: 50%; background: #fff; border: 1px solid var(--gold-deep); box-shadow: 0 0 0 8px var(--dark-3), 0 0 0 9px var(--gold-deep); }

/* =========================================================
   OCCASIONS / FORMS
   ========================================================= */
.occasion { overflow: hidden; }
.occasion-bg { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .16; mix-blend-mode: luminosity; }
.occasion .container { position: relative; }
.occasion-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.occasion-list { margin: 28px 0 0; display: grid; gap: 12px; }
.occasion-list li { display: flex; align-items: center; gap: 14px; font-size: 19px; }
.occasion-list li::before { content: ""; width: 9px; height: 9px; border: 1px solid var(--gold); transform: rotate(45deg); flex: none; }

.form-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px;
  padding: 40px 36px 34px;
  background: var(--dark-2); color: var(--cream);
  border: 1px solid var(--gold); outline: 1px solid rgba(201,164,92,.45); outline-offset: -10px;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.form-host { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.form-host img { width: 70px; height: 70px; border-radius: 50%; border: 1px solid var(--gold-deep); background: #fff; flex: none; }
.form-host h3 { font-size: 28px; }
.form-host p { margin: 0; font-size: 16px; color: var(--gold-light); font-style: italic; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 18px; color: var(--cream);
  background: var(--dark-3); border: 1px solid #3b3123; border-radius: var(--radius); padding: 10px 13px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2394722f' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.field select:invalid { color: #9a917a; }
.field ::placeholder { color: #9a917a; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,164,92,.22); }
.field.error input, .field.error select, .field.error textarea { border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(148,114,47,.35); }
.form-actions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.form-card .btn { width: 100%; background: var(--gold); border-color: var(--gold); color: var(--dark-2); }
.form-card .btn:hover { background: var(--gold-light); border-color: var(--gold-light); }
.form-status { margin: 0; min-height: 1.2em; font-size: 16px; text-align: center; font-style: italic; }
.form-status.ok { color: var(--gold-light); }
.form-status.err { color: var(--gold); }

/* =========================================================
   REVIEWS
   ========================================================= */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.review { margin: 0; text-align: center; padding: 40px 32px 34px; background: var(--dark-2); border: 1px solid var(--paper-2); outline: 1px solid var(--paper-2); outline-offset: -10px; }
.stars { color: var(--gold-deep); letter-spacing: 6px; font-size: 16px; margin-bottom: 14px; }
.review blockquote { margin: 0 0 20px; font-size: 21px; font-style: italic; line-height: 1.5; color: var(--ink); }
.review figcaption { font-size: 14px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); }

/* =========================================================
   VISIT
   ========================================================= */
.visit-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.visit-photo { border: 1px solid var(--gold); padding: 12px; }
.visit-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.info-list { display: grid; gap: 22px; margin: 26px 0 34px; }
.info-list li { display: flex; gap: 18px; }
.info-list .i { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--gold); transform: rotate(45deg); flex: none; margin: 4px 6px 0; }
.info-list .i .ico { transform: rotate(-45deg); color: var(--gold-light); }
.info-list h3 { font-size: 15px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-light); font-weight: 500; }
.info-list p { margin: 2px 0 0; font-size: 19px; }
.info-list a:hover { color: var(--gold-light); }

/* =========================================================
   INNER PAGE BANNER
   ========================================================= */
.page-hero { position: relative; overflow: hidden; padding: 130px 0 120px; text-align: center; }
.page-hero h1 { font-size: clamp(46px, 6vw, 82px); font-weight: 400; line-height: 1.05; }
.page-hero h1 em { font-style: italic; color: var(--gold-light); }
.page-hero .lead { margin: 18px auto 0; color: var(--cream); opacity: .85; }
.page-hero .ar-title { font-family: var(--arabic); font-size: 26px; color: var(--gold-light); margin-top: 10px; }
.crumbs { display: flex; justify-content: center; gap: 12px; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.crumbs a:hover { color: var(--gold-light); }
.crumbs [aria-current] { color: var(--gold-light); }
.page-hero-art { position: absolute; bottom: 0; height: 88%; width: auto; max-width: none; z-index: 0; opacity: .95; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.page-hero-art.right { right: max(0px, calc((100vw - 1320px) / 2)); transform: scaleX(-1); }
.page-hero .container { position: relative; z-index: 2; }

/* =========================================================
   MENU PAGE
   ========================================================= */
.menu-bar { position: sticky; top: var(--header-h); z-index: 40; background: rgba(13,11,8,.97); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(201,164,92,.35); }
.menu-bar .container { display: flex; align-items: center; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.chips { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 8px 16px; white-space: nowrap; cursor: pointer;
  font: 500 14px/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream); background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  transition: color .2s, border-color .2s, background .2s;
}
.chip:hover { color: var(--gold-light); border-color: rgba(201,164,92,.45); }
.chip.active { color: var(--dark-2); background: var(--gold); border-color: var(--gold); }
.chip[hidden] { display: none; }
.s-paper .chip { color: var(--ink); border-color: var(--paper-2); }
.s-paper .chip.active { background: var(--dark); color: var(--cream); border-color: var(--dark); }
.veg-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.veg-toggle input { appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; width: 42px; height: 22px; border-radius: 999px; background: var(--line); border: 1px solid rgba(201,164,92,.5); position: relative; transition: background .2s; }
.veg-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--cream); transition: transform .2s; }
.veg-toggle input:checked { background: var(--veg); }
.veg-toggle input:checked::after { transform: translateX(20px); }

.legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; font-size: 16px; color: var(--muted); margin-top: 40px; }
.legend > span { display: inline-flex; align-items: center; gap: 9px; }

.menu-cat { padding: 100px 0 20px; scroll-margin-top: calc(var(--header-h) + 70px); }
.menu-cat[hidden] { display: none; }
.cat-head { display: grid; grid-template-columns: 330px 1fr; gap: 60px; align-items: center; margin-bottom: 44px; }
.cat-head.no-img { grid-template-columns: 1fr; text-align: center; }
.cat-head.no-img .orn { margin-left: auto; margin-right: auto; }
.cat-head .arch { --ar: 1 / 1.08; }
.cat-head h2 { font-size: clamp(36px, 4vw, 52px); font-weight: 400; }
.cat-head .ar { display: block; color: var(--gold-light); font-size: 22px; margin-top: 4px; }
.cat-head .intro { color: var(--muted); font-size: 20px; margin: 0 0 22px; max-width: 560px; }
.cat-head.no-img .intro { margin-left: auto; margin-right: auto; }
.chef-says { display: flex; align-items: center; gap: 16px; max-width: 560px; }
.cat-head.no-img .chef-says { margin: 0 auto; text-align: left; }
.chef-says img { width: 66px; height: 66px; border-radius: 50%; border: 1px solid var(--gold); background: #fff; flex: none; }
.chef-says p { position: relative; margin: 0; padding: 12px 18px; background: var(--paper); color: var(--ink); font-size: 17px; font-style: italic; line-height: 1.45; border-radius: 6px; }
.chef-says p::before { content: ""; position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; background: var(--paper); transform: translateY(-50%) rotate(45deg); }
.chef-says b { font-style: normal; font-weight: 600; color: var(--gold-deep); }

.menu-card {
  position: relative; padding: 46px 54px; background: var(--paper) var(--pattern-paper); color: var(--ink);
  border: 1px solid var(--gold-deep); outline: 1px solid var(--gold-deep); outline-offset: -12px;
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
}
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 70px; }
.mi { padding: 16px 0; border-bottom: 1px solid var(--paper-2); }
.mi-top { display: flex; align-items: baseline; gap: 12px; }
.mi h3 { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 500; }
.mi .leader { flex: 1; min-width: 20px; border-bottom: 1px dotted rgba(148,114,47,.6); transform: translateY(-6px); }
.mi .price { font-size: 19px; color: var(--gold-deep); white-space: nowrap; font-weight: 500; }
.mi p { margin: 4px 0 0 25px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); font-style: italic; }
.mi .tags { display: flex; gap: 8px; margin: 8px 0 0 25px; flex-wrap: wrap; }
.mi-chef { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--gold-deep); background: #fff; flex: none; }
.veg-only .mi[data-type="nv"] { display: none; }
.vd { flex: none; width: 15px; height: 15px; border: 1.5px solid currentColor; display: inline-grid; place-items: center; }
.vd::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vd.veg { color: #3a9a4c; }
.vd.nv { color: #c43c35; }
.tag { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 3px 9px; border: 1px solid currentColor; color: var(--gold-deep); line-height: 1.3; }
.tag.hot { color: var(--red); }
.legend .tag { color: var(--gold-light); }
.legend .tag.hot { color: #ef8f86; }
.menu-note { text-align: center; color: var(--muted); font-size: 17px; font-style: italic; margin-top: 60px; }

/* CTA band */
.cta-band {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center;
  margin-top: 100px; padding: 0 50px 0 30px; overflow: hidden;
  background: var(--dark-2) var(--pattern-deep);
  border: 1px solid var(--gold); outline: 1px solid rgba(201,164,92,.5); outline-offset: -10px;
}
.cta-band > img { height: 230px; width: auto; align-self: end; -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }
.cta-band h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 400; color: var(--cream); }
.cta-band p { margin: 6px 0 0; color: var(--muted); }
.cta-band .btn { color: var(--cream); border-color: var(--gold); }
.cta-band .btn-solid { background: var(--gold); color: var(--dark-2); }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.value { text-align: center; padding: 10px 6px; }
.value svg { width: 54px; height: 54px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 16px; }
.value h3 { font-size: 25px; margin-bottom: 6px; }
.value p { font-size: 17px; color: var(--muted); margin: 0; line-height: 1.5; }
.host-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.host-art img { max-height: 560px; width: auto; margin: 0 auto; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.poses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 70px; }
.poses .arch { --ar: 1 / 1.15; padding: 8px; }
.poses figcaption { text-align: center; font-size: 15px; font-style: italic; color: var(--ink-soft); margin-top: 6px; }

/* =========================================================
   GALLERY PAGE
   ========================================================= */
.gallery-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 44px; }
.gallery { columns: 3 280px; column-gap: 20px; }
.g-item {
  display: block; width: 100%; margin: 0 0 20px; padding: 8px; border: 1px solid var(--gold-deep); background: #fffaf0;
  break-inside: avoid; position: relative; overflow: hidden; cursor: zoom-in;
}
.g-item[hidden] { display: none; }
.g-item img { width: 100%; transition: transform .5s ease; }
.g-item:hover img { transform: scale(1.03); }
.g-cutout { background: radial-gradient(circle at 50% 45%, #fff, var(--paper-2)); }
.g-cutout img { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.g-cap {
  position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 40px 16px 12px; text-align: left;
  background: linear-gradient(transparent, rgba(13,11,8,.92)); color: var(--cream); font: italic 17px/1.3 var(--serif);
  opacity: 0; transition: opacity .3s;
}
.g-item:hover .g-cap, .g-item:focus-visible .g-cap { opacity: 1; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 92vw); overflow: visible; }
.lightbox::backdrop { background: rgba(13,11,8,.95); }
.lightbox figure { margin: 0; }
.lightbox img { max-height: 80vh; width: auto; max-width: 100%; margin: 0 auto; border: 1px solid var(--gold); padding: 8px; background: var(--paper); }
.lb-cap { text-align: center; color: var(--cream); margin-top: 12px; font-style: italic; }
.lb-btn { position: fixed; width: 50px; height: 50px; border: 1px solid var(--gold); cursor: pointer; background: var(--dark-2); color: var(--gold-light); font-size: 30px; line-height: 1; display: grid; place-items: center; padding-bottom: 4px; }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 70px; }
.c-card { text-align: center; padding: 40px 28px 34px; background: #fffaf0; border: 1px solid var(--paper-2); outline: 1px solid var(--paper-2); outline-offset: -10px; }
.c-card .i { width: 54px; height: 54px; margin: 6px auto 22px; display: grid; place-items: center; border: 1px solid var(--gold-deep); transform: rotate(45deg); }
.c-card .i .ico { transform: rotate(-45deg); color: var(--gold-deep); width: 22px; height: 22px; }
.c-card h3 { font-size: 15px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
.c-card p { font-size: 20px; margin-bottom: 12px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; }
.map { min-height: 480px; border: 1px solid var(--gold-deep); padding: 8px; background: #fffaf0; }
.map iframe { display: block; width: 100%; height: 100%; min-height: 462px; border: 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--dark-2) var(--pattern-deep); color: var(--muted); font-size: 17px; border-top: 1px solid rgba(201,164,92,.45); }
.footer-top { text-align: center; padding: 70px 0 10px; }
.footer-top img { width: 150px; margin: 0 auto 12px; }
.footer-top .ar { color: var(--gold-light); font-size: 22px; }
.footer-top p { font-style: italic; }
.footer-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-top: 40px; padding-bottom: 60px; text-align: center; }
.footer-col h3 { font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--cream); margin-bottom: 18px; }
.footer-col li { margin-bottom: 8px; }
.footer-col a:hover { color: var(--gold-light); }
.socials { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(201,164,92,.55); color: var(--gold-light); transform: rotate(45deg); transition: background .2s, color .2s; }
.socials a svg { width: 17px; height: 17px; fill: currentColor; transform: rotate(-45deg); }
.socials a:hover { background: var(--gold); color: var(--dark-2); }
.footer-bottom { border-top: 1px solid rgba(201,164,92,.2); font-size: 14px; letter-spacing: .08em; }
.footer-bottom .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 20px; padding-bottom: 20px; }
.footer-bottom p { margin: 0; }
.footer-bottom a { margin-left: 24px; }
.footer-bottom a:hover { color: var(--gold-light); }

.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--dark-2); color: var(--gold-light); border: 1px solid var(--gold); box-shadow: 0 0 0 4px rgba(13,11,8,.6), 0 10px 26px rgba(0,0,0,.35); transition: transform .2s, background .2s, color .2s; }
.wa-float:hover { background: var(--gold); color: var(--dark-2); }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }

/* =========================================================
   MOTION
   ========================================================= */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .hero-content > div > * { animation: rise 1s ease both; }
.js .hero-content > div > :nth-child(2) { animation-delay: .12s; }
.js .hero-content > div > :nth-child(3) { animation-delay: .24s; }
.js .hero-content > div > :nth-child(4) { animation-delay: .36s; }
.js .hero-content > div > :nth-child(5) { animation-delay: .48s; }
.js .hero-character { animation: rise 1.2s .2s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .nav { gap: 24px; }
  .nav a:not(.btn) { letter-spacing: .16em; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .poses { grid-template-columns: repeat(3, 1fr); }
  .cat-head { grid-template-columns: 270px 1fr; gap: 40px; }
  .story-grid, .sig-grid, .visit-grid { gap: 50px; }
}

@media (max-width: 960px) {
  :root { --header-h: 70px; }
  body { font-size: 18px; }
  .topbar { display: none; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .nav { display: none; }
  .brand img, .site-header.scrolled .brand img { height: 58px; margin: 0; }
  .nav-toggle {
    grid-column: 3; display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 12px; cursor: pointer; background: transparent; border: 1px solid var(--gold);
  }
  .nav-toggle span { height: 1.5px; background: var(--gold-light); transition: transform .3s, opacity .3s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .drawer {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    padding: 10px 28px 28px; background: var(--dark-2) var(--pattern-deep); border-bottom: 1px solid var(--gold);
    box-shadow: 0 20px 40px rgba(0,0,0,.45);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s;
  }
  .drawer.open { opacity: 1; visibility: visible; transform: none; }
  .drawer a:not(.btn) { padding: 14px 0; border-bottom: 1px solid rgba(201,164,92,.2); font-size: 16px; letter-spacing: .24em; text-transform: uppercase; text-align: center; }
  .drawer a.active { color: var(--gold-light); }
  .drawer .btn { margin-top: 18px; }

  .section { padding: 84px 0; }
  .hero { min-height: 0; align-items: flex-start; }
  .hero-bg img { object-position: 72% 40%; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(13,11,8,.94) 0%, rgba(13,11,8,.75) 45%, rgba(13,11,8,.15) 72%, rgba(13,11,8,.85) 100%); }
  .hero-content { padding-top: 56px; padding-bottom: 380px; }
  .hero-character { left: auto; right: -20px; height: 370px; }
  .speech { left: auto; right: 220px; top: auto; bottom: 260px; font-size: 18px; }
  .speech::after { left: auto; right: 30px; }

  .story-grid, .sig-grid, .visit-grid, .occasion-grid, .host-grid, .contact-grid { grid-template-columns: 1fr; }
  .story-grid .arch, .sig-grid .arch { margin: 0 auto; }
  .cat-grid, .review-grid, .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .worlds { grid-template-columns: 1fr; text-align: center; }
  .world-left { text-align: center; }
  .worlds-seal { order: -1; }
  .cat-head { grid-template-columns: 1fr; }
  .cat-head .arch { max-width: 360px; }
  .items { grid-template-columns: 1fr; }
  .menu-card { padding: 30px 30px; }
  .page-hero-art { opacity: .35; height: 70%; }
  .cta-band { grid-template-columns: 1fr; padding: 40px 30px; text-align: center; }
  .cta-band > img { display: none; }
  .cta-band .btn-row { justify-content: center; }
  .footer-main { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .container { padding: 0 18px; }
  .section { padding: 70px 0; }
  .head { margin-bottom: 40px; }
  .label { font-size: 13px; letter-spacing: .26em; }
  .hero-content { padding-bottom: 330px; }
  .hero-character { height: 330px; right: -40px; }
  .speech { right: 170px; bottom: 230px; font-size: 17px; }
  .promise, .cat-grid, .review-grid, .contact-cards, .values-grid { grid-template-columns: 1fr; }
  .poses { grid-template-columns: repeat(2, 1fr); }
  .form-card { grid-template-columns: 1fr; padding: 32px 24px; }
  .menu-bar .container { flex-wrap: wrap; gap: 10px; }
  .chips { order: 2; flex-basis: 100%; }
  .menu-card { padding: 26px 20px; outline-offset: -8px; }
  .mi-top { flex-wrap: wrap; }
  .mi .leader { display: none; }
  .mi .price { margin-left: auto; }
  .page-hero { padding: 90px 0 90px; }
  .page-hero-art { display: none; }
  .footer-bottom .container { justify-content: center; text-align: center; }
  .footer-bottom a { margin: 0 10px; }
  .lb-prev, .lb-next { top: auto; bottom: 20px; transform: none; }
}

/* Arabic lines follow their English column's alignment, not RTL "start" */
.world .ar { text-align: left; }
.world-left .ar { text-align: right; }
@media (max-width: 960px) { .world .ar, .world-left .ar { text-align: center; } }

/* Turban stripe from the logo (red · saffron · gold) */
.site-header::after, .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, #c8202f 0 38px, #f2b705 38px 62px, #c9a45c 62px 74px, #f2b705 74px 86px);
}
.site-header::after { bottom: -3px; }
.site-footer { position: relative; }
.site-footer::before { top: 0; }

/* =========================================================
   SIGNATURE MOMENTS
   ========================================================= */

/* Gold shimmer sweeping across the hero script */
.hero h1 em {
  background: linear-gradient(100deg, #c9a45c 0%, #c9a45c 35%, #fff1c9 48%, #c9a45c 60%, #c9a45c 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }

/* Gold shine passing over buttons */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,240,200,.45), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
.btn:hover::after { left: 130%; }

/* Ornaments draw in from the centre */
.js .reveal .orn { transform: scaleX(0); transition: transform 1.1s .25s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in .orn { transform: scaleX(1); }

/* Gold dust over the hero */
.dust { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.hero-bg img { transform: translate3d(0, var(--py, 0px), 0) scale(1.06); will-change: transform; }
.hero-character { translate: var(--mx, 0px) var(--my, 0px); transition: translate .4s ease-out; }

/* Marquee */
.marquee { overflow: hidden; background: var(--dark-2); border-top: 1px solid rgba(201,164,92,.35); border-bottom: 1px solid rgba(201,164,92,.35); padding: 20px 0; }
.marquee-track { display: flex; align-items: center; gap: 34px; width: max-content; animation: marquee 60s linear infinite; }
.marquee span { font-size: 26px; font-style: italic; color: var(--gold-light); white-space: nowrap; }
.marquee .ar { font-style: normal; font-size: 26px; color: var(--gold); }
.marquee i { width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); flex: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- A Day at the Coffee House (horizontal journey) ---------- */
.journey { position: relative; background: var(--dark-2) var(--pattern-deep); }
.journey-sticky { padding: 90px 0; }
.journey-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 50px; }
.journey-progress { flex: 0 0 240px; height: 1px; background: rgba(201,164,92,.3); position: relative; margin-bottom: 18px; }
.journey-progress span { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--p, 0)); }
.journey-track { display: flex; gap: 70px; padding: 0 max(28px, calc((100vw - var(--container)) / 2 + 28px)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.journey-track::-webkit-scrollbar { display: none; }
.j-card { flex: 0 0 min(860px, 82vw); display: grid; grid-template-columns: minmax(0, .9fr) 1fr; gap: 54px; align-items: center; scroll-snap-align: center; }
.j-art { --ar: 1 / 1.05; perspective: 900px; }
.j-art img { transition: transform .25s ease-out; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.02); }
.j-num { display: block; font-size: clamp(70px, 8vw, 120px); line-height: .9; font-style: italic; color: transparent; -webkit-text-stroke: 1px var(--gold); margin-bottom: 10px; }
.j-text h3 { font-size: clamp(34px, 3.4vw, 48px); font-weight: 400; margin: 14px 0 14px; }
.j-text p { font-size: 21px; color: var(--muted); max-width: 440px; }
.j-end { grid-template-columns: 1fr; text-align: center; justify-items: center; flex-basis: min(560px, 82vw); }
.j-end img { width: 170px; height: 170px; border-radius: 50%; border: 1px solid var(--gold); background: #fff; box-shadow: 0 0 0 10px var(--dark-2), 0 0 0 11px rgba(201,164,92,.5); }
.j-end h3 { font-size: 44px; font-weight: 400; }
.j-end p { color: var(--muted); max-width: 420px; }

/* Desktop: vertical scroll drives the journey sideways */
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .journey.is-pinned .journey-sticky { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding: 30px 0; overflow: hidden; }
  .journey.is-pinned .journey-track { overflow: visible; scroll-snap-type: none; transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform; }
  .journey.is-pinned .j-art { width: min(100%, calc(60vh - 40px)); justify-self: end; }
}

/* ---------- From our kitchen: rotating sunburst ---------- */
.sig-art { position: relative; max-width: 500px; }
.sig-art::before, .sig-art::after { content: ""; position: absolute; left: 50%; top: 52%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.sig-art::before {
  width: 132%; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(201,164,92,.42) 0deg 1.2deg, transparent 1.2deg 7.5deg);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 51%, #000 69%, transparent 70%);
  mask: radial-gradient(circle, transparent 50%, #000 51%, #000 69%, transparent 70%);
  animation: spin 90s linear infinite;
}
.sig-art::after { width: 112%; translate: -50% -50%; border: 1px dashed rgba(201,164,92,.45); animation: spin 140s linear infinite reverse; }
.sig-art .arch { position: relative; z-index: 1; }
@keyframes spin { to { rotate: 360deg; } }
.ritual-list { display: grid; gap: 20px; margin: 30px 0 36px; }
.ritual-list li { display: flex; gap: 18px; align-items: flex-start; }
.ritual-list li > span { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-style: italic; color: var(--gold-light); font-size: 15px; }
.ritual-list li > span::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--gold); transform: rotate(45deg); }
.ritual-list h3 { font-size: 23px; }
.ritual-list p { margin: 0; color: var(--muted); font-size: 17px; }

/* ---------- Royal gate intro ---------- */
.gate { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; pointer-events: auto; cursor: pointer; }
.gate-door { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--dark-2) var(--pattern-deep); transition: transform 1.3s cubic-bezier(.7,0,.2,1); }
.gate-door.l { left: 0; border-right: 1px solid var(--gold); box-shadow: inset -14px 0 0 -12px var(--gold); }
.gate-door.r { right: 0; border-left: 1px solid var(--gold); box-shadow: inset 14px 0 0 -12px var(--gold); }
.gate-door::before { content: ""; position: absolute; top: 12%; bottom: 12%; width: 62%; border: 1px solid rgba(201,164,92,.55); }
.gate-door.l::before { right: 12%; border-radius: 0 0 0 0; clip-path: none; }
.gate-door.r::before { left: 12%; }
.gate-seal { position: relative; z-index: 1; text-align: center; transition: opacity .6s ease, transform .9s ease; animation: sealIn 1s ease both; }
.gate-seal img { width: min(230px, 50vw); margin: 0 auto 18px; filter: drop-shadow(0 16px 40px rgba(0,0,0,.7)); }
.gate-seal p { margin: 0; color: var(--gold-light); font-size: 15px; letter-spacing: .4em; text-transform: uppercase; }
.gate-seal .ar { display: block; font-size: 26px; letter-spacing: 0; margin-bottom: 4px; }
@keyframes sealIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.gate.open .gate-seal { opacity: 0; transform: scale(1.15); }
.gate.open .gate-door.l { transform: translateX(-101%); }
.gate.open .gate-door.r { transform: translateX(101%); }
.gate.open { pointer-events: none; }

@media (max-width: 960px) {
  .journey-head { flex-direction: column; align-items: flex-start; }
  .journey-progress { display: none; }
  .j-card { grid-template-columns: 1fr; gap: 26px; flex-basis: 84vw; }
  .j-art { max-width: 360px; }
  .j-text p { font-size: 18px; }
  .sig-art { margin: 40px auto; }
  .marquee span, .marquee .ar { font-size: 21px; }
}

/* Keep header links on one line */
.nav a, .nav .btn { white-space: nowrap; }
.nav { gap: 30px; }
.nav a:not(.btn) { letter-spacing: .2em; font-size: 14.5px; }
@media (max-width: 1240px) { .nav { gap: 20px; } .nav a:not(.btn) { letter-spacing: .14em; font-size: 14px; } .nav .btn { padding: 10px 14px; letter-spacing: .16em; } }

/* =========================================================
   MEMORIES OF OLD DUBAI (nostalgia)
   ========================================================= */
.nostalgia {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 70% 50% at 50% 35%, rgba(201,164,92,.13), transparent 70%), var(--dark-2) var(--pattern-deep);
}
.nostalgia::after { /* film grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .11; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.nostalgia .container { position: relative; z-index: 1; }
.skyline-wrap { margin: 60px 0 70px; }
.skyline { width: 100%; height: auto; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.js .skyline-wrap.reveal .skyline path { stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset 3.2s ease; }
.js .skyline-wrap.reveal.in .skyline path { stroke-dashoffset: 0; }
.skyline-labels { display: flex; justify-content: space-between; margin-top: 14px; padding: 0 2%; }
.skyline-labels span { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }

.stamps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.stamp {
  padding: 12px; background: var(--dark-3);
  -webkit-mask: radial-gradient(circle 6px, transparent 95%, #000) -8px -8px / 16px 16px repeat, linear-gradient(#000 0 0) content-box;
  mask: radial-gradient(circle 6px, transparent 95%, #000) -8px -8px / 16px 16px repeat, linear-gradient(#000 0 0) content-box;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.5));
  transition: transform .4s ease;
}
.stamps .stamp:nth-child(1) { transform: rotate(-2deg); }
.stamps .stamp:nth-child(2) { transform: rotate(1.5deg) translateY(14px); }
.stamps .stamp:nth-child(3) { transform: rotate(-1deg); }
.stamps .stamp:nth-child(4) { transform: rotate(2deg) translateY(10px); }
.stamps .stamp:hover { transform: rotate(0) translateY(-6px) scale(1.02); }
.js .stamps .stamp.reveal:not(.in) { opacity: 0; }
.stamp-in {
  height: 100%; padding: 30px 22px 28px; text-align: center;
  border: 1px solid rgba(201,164,92,.55); outline: 1px solid rgba(201,164,92,.25); outline-offset: -6px;
  background: radial-gradient(circle at 50% 0%, rgba(201,164,92,.14), transparent 70%), var(--dark-2);
}
.stamp-in svg { width: 58px; height: 58px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 14px; }
.stamp-in svg text { fill: var(--gold); stroke: none; font: 600 22px var(--serif); }
.era { display: block; font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.stamp-in h3 { font-size: 23px; margin-bottom: 10px; }
.stamp-in p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.postmark { position: absolute; right: 2%; top: 30px; width: 240px; opacity: .55; transform: rotate(-12deg); fill: none; stroke: var(--gold); stroke-width: 1.2; pointer-events: none; }
.postmark text { fill: var(--gold); stroke: none; }
.pm-ring { font: 600 10.5px var(--sans, sans-serif); letter-spacing: .14em; }
.pm-ar { font: 700 22px var(--arabic); }
.pm-sm { font: 600 10px var(--sans, sans-serif); letter-spacing: .2em; }

/* Mughal floral border (pietra dura style) */
.flora {
  height: 38px; background-color: var(--dark-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='26' viewBox='0 0 64 26'%3E%3Cg fill='none' stroke='%23c9a45c' stroke-width='1'%3E%3Cpath d='M0 13c6-7 12-7 18-3M46 10c6-4 12-4 18 3M0 13c6 7 12 7 18 3M46 16c6 4 12 4 18-3'/%3E%3Ccircle cx='32' cy='13' r='2.4'/%3E%3Cpath d='M32 3.5c2.2 2.6 2.2 5.3 0 6.6c-2.2-1.3-2.2-4 0-6.6zM32 22.5c2.2-2.6 2.2-5.3 0-6.6c-2.2 1.3-2.2 4 0 6.6zM22.5 13c2.6-2.2 5.3-2.2 6.6 0c-1.3 2.2-4 2.2-6.6 0zM41.5 13c-2.6-2.2-5.3-2.2-6.6 0c1.3 2.2 4 2.2 6.6 0z'/%3E%3Cpath d='M25 6l2 2M39 6l-2 2M25 20l2-2M39 20l-2-2'/%3E%3C/g%3E%3Cg fill='%23c9a45c'%3E%3Ccircle cx='9' cy='13' r='1'/%3E%3Ccircle cx='55' cy='13' r='1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center; background-size: auto 26px;
  border-top: 1px solid rgba(201,164,92,.45); border-bottom: 1px solid rgba(201,164,92,.45);
  box-shadow: inset 0 3px 0 -2px rgba(201,164,92,.2), inset 0 -3px 0 -2px rgba(201,164,92,.2);
}

@media (max-width: 960px) {
  .stamps { grid-template-columns: repeat(2, 1fr); }
  .postmark { width: 170px; top: 10px; right: -20px; opacity: .35; }
  .skyline-labels span { font-size: 10px; letter-spacing: .18em; }
}
@media (max-width: 640px) {
  .stamps { grid-template-columns: 1fr; gap: 26px; }
  .stamps .stamp:nth-child(n) { transform: rotate(0); }
}

/* =========================================================
   TYPOGRAPHY — bold display serif + spaced sans labels
   ========================================================= */
:root {
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Segoe UI", system-ui, sans-serif;
}
body { font-family: var(--sans); font-size: 16px; line-height: 1.75; }
h1, h2, h3, .title, .statement, .hero h1, .page-title, .j-num, .speech, .marquee span, .review blockquote, .form-host h3 { font-family: var(--serif); }
.title, .hero h1, .j-text h3, .j-end h3, .cat-head h2 { font-weight: 600; letter-spacing: 0; }
.title { font-size: clamp(34px, 4vw, 54px); line-height: 1.12; }
.title em, .hero h1 em { font-weight: 500; }
.hero h1 { font-size: clamp(50px, 6vw, 88px); line-height: 1.04; }
.hero-content p { font-size: 17px; line-height: 1.7; }
.statement { font-size: clamp(22px, 2.3vw, 30px); font-weight: 500; line-height: 1.5; }
.lead, .muted, .j-text p, .promise p, .ritual-list p, .world li { font-family: var(--sans); }
.lead { font-size: 17px; }
.j-text p { font-size: 17px; line-height: 1.7; }
.label, .era, .skyline-labels span, .nav a:not(.btn), .drawer a:not(.btn), .field label, .review figcaption, .info-list h3, .footer-col h3, .crumbs, .veg-toggle, .chip {
  font-family: var(--sans); font-weight: 600;
}
.label { font-size: 12.5px; letter-spacing: .3em; }
.label .ar { font-family: var(--arabic); font-weight: 400; }
.nav a:not(.btn) { font-size: 12.5px; letter-spacing: .16em; }
.promise h3, .ritual-list h3, .stamp-in h3, .world h3, .info-list p { font-family: var(--serif); font-weight: 600; }
.promise h3 { font-size: 19px; } .ritual-list h3 { font-size: 20px; }
.world li { font-size: 16px; }
.review blockquote { font-size: 18px; }
.marquee span { font-weight: 500; font-size: 24px; }

/* Gold pill buttons with arrow */
.btn {
  border-radius: 999px; padding: 15px 30px;
  font: 700 12.5px/1 var(--sans); letter-spacing: .14em;
}
.btn-solid, .s-paper .btn-solid, .form-card .btn, .cta-band .btn-solid {
  background: linear-gradient(135deg, #a8792e 0%, #f3d98f 45%, #c99a45 70%, #e8c674 100%);
  border-color: transparent; color: #1a120a;
  box-shadow: 0 8px 22px rgba(201,164,92,.28), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-solid:hover, .s-paper .btn-solid:hover, .form-card .btn:hover { filter: brightness(1.08); transform: translateY(-2px); background: linear-gradient(135deg, #a8792e 0%, #f3d98f 45%, #c99a45 70%, #e8c674 100%); color: #1a120a; }
.btn .arrow { font-size: 1.25em; line-height: 0; transition: transform .25s; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-sm { padding: 11px 20px; font-size: 11px; }

/* Our host as storyteller in the Old Dubai section */
.guide { position: absolute; left: -10px; top: -40px; width: 290px; pointer-events: none; z-index: 2; }
.guide img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(#000 70%, transparent 96%); mask-image: linear-gradient(#000 70%, transparent 96%); filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)); }
.guide-speech { left: 210px; top: -6px; font-size: 18px; white-space: nowrap; }
.postmark { left: auto; right: 0; }
@media (max-width: 1240px) { .guide { width: 220px; left: -20px; } .guide-speech { left: 160px; font-size: 16px; } }
@media (max-width: 960px) {
  .guide { position: relative; left: auto; top: auto; width: 230px; margin: 0 auto 10px; }
  .guide-speech { left: 150px; top: -10px; font-size: 15px; }
}
@media (max-width: 960px) { .guide-speech { left: 118px; top: -24px; width: 170px; white-space: normal; font-size: 14px; } }

/* =========================================================
   REFINEMENTS
   ========================================================= */
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 10px 18px; background: var(--gold); color: var(--dark-2); font: 700 13px var(--sans); border-radius: 999px; }
.skip:focus { top: 12px; }
.topbar-tag { font-family: var(--serif); font-style: italic; color: var(--gold-light); font-size: 15px; }
.pm-ar { font: 700 15px var(--serif); letter-spacing: .12em; }

/* Two cultures: Mughal arch windows */
.worlds { align-items: stretch; }
.world { position: relative; padding: 90px 40px 44px; text-align: center !important; isolation: isolate; }
.world::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: url(#arch-clip); background: radial-gradient(ellipse at 50% 20%, rgba(201,164,92,.16), transparent 65%), var(--dark-2) var(--pattern-deep); }
.world-arch { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.world-arch path { stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.world h3 { font-size: 30px; margin-bottom: 18px; }
.world ul { max-width: 300px; margin: 0 auto; }
.worlds-seal { align-self: center; }

/* Reviews: one featured quote at a time */
.quotes { display: grid; grid-template-columns: 180px 1fr; gap: 56px; align-items: center; max-width: 940px; margin: 0 auto; }
.quotes-host img { width: 180px; height: 180px; border-radius: 50%; border: 1px solid var(--gold); background: #fff; box-shadow: 0 0 0 10px var(--dark-3), 0 0 0 11px rgba(201,164,92,.5); }
.quote-stage { position: relative; min-height: 230px; }
.quote-stage::before { content: "\201C"; position: absolute; left: -14px; top: -58px; font: 600 150px/1 var(--serif); color: rgba(201,164,92,.22); }
.quote { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; pointer-events: none; }
.quote.is-active { opacity: 1; transform: none; pointer-events: auto; }
.quote .stars { text-align: left; }
.quote blockquote { margin: 0 0 18px; font: italic 500 clamp(24px, 2.6vw, 34px)/1.4 var(--serif); color: var(--cream); }
.quote figcaption { font: 600 12.5px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.quote-dots { grid-column: 2; display: flex; gap: 10px; }
.quote-dots button { width: 10px; height: 10px; padding: 0; border: 1px solid var(--gold); background: transparent; transform: rotate(45deg); cursor: pointer; transition: background .3s; }
.quote-dots button[aria-pressed="true"] { background: var(--gold); }

/* Visit: map styled to the black & gold palette */
.visit-map { position: relative; border: 1px solid var(--gold); outline: 1px solid rgba(201,164,92,.4); outline-offset: -12px; padding: 12px; background: var(--dark-2); }
.visit-map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; filter: grayscale(1) invert(.92) sepia(.55) saturate(1.6) hue-rotate(-8deg) brightness(.9) contrast(1.05); }

/* Footer skyline */
.foot-skyline { display: block; max-width: 760px; margin: 0 auto 30px; opacity: .4; }

@media (max-width: 960px) {
  .world { padding: 80px 26px 36px; }
  .quotes { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .quotes-host img { margin: 0 auto; width: 130px; height: 130px; }
  .quote .stars { text-align: center; }
  .quote-stage { min-height: 280px; }
  .quote-dots { grid-column: 1; justify-content: center; }
}

/* Simple single-row footer */
.site-footer { font-size: 14px; }
.footer-row { display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center; padding-top: 44px; padding-bottom: 40px; }
.footer-logo { width: 120px; }
.footer-info h2 { font: 600 24px/1.2 var(--serif); color: var(--cream); }
.footer-info > p { margin: 4px 0 14px; color: var(--muted); font-family: var(--sans); }
.footer-contact { display: flex; flex-wrap: wrap; gap: 8px 30px; font-family: var(--sans); color: var(--text, var(--cream)); }
.footer-contact li { display: flex; align-items: center; gap: 8px; }
.footer-contact .ico { width: 17px; height: 17px; color: var(--gold); }
.footer-contact a:hover { color: var(--gold-light); }
.footer-side { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; padding-left: 34px; border-left: 1px solid rgba(201,164,92,.45); }
.footer-side .socials { margin: 0; gap: 8px; }
.footer-side .socials a { transform: none; border: 0; width: 34px; height: 34px; border-radius: 50%; color: var(--cream); }
.footer-side .socials a svg { transform: none; width: 19px; height: 19px; }
.footer-side .socials a:hover { background: var(--gold); color: var(--dark-2); }
.footer-nav { display: flex; align-items: center; gap: 24px; font: 500 13px var(--sans); }
.footer-nav a:not(.btn):hover { color: var(--gold-light); }
.footer-bottom .container { font-family: var(--sans); font-size: 12.5px; letter-spacing: .02em; }
.footer-bottom p:last-child { display: flex; gap: 12px; align-items: center; }
.footer-bottom p:last-child a { margin: 0; }
.footer-bottom span[aria-hidden] { color: rgba(201,164,92,.5); }
@media (max-width: 1100px) {
  .footer-row { grid-template-columns: auto 1fr; }
  .footer-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 22px 0 0; border-left: 0; border-top: 1px solid rgba(201,164,92,.35); }
}
@media (max-width: 640px) {
  .footer-row { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .footer-contact, .footer-side, .footer-nav { justify-content: center; }
  .footer-side { flex-direction: column; }
  .footer-nav { flex-wrap: wrap; gap: 12px 20px; }
}

/* =========================================================
   HERO — Dubai feel
   ========================================================= */
.hero-bg::before { /* warm Dubai sunset over the sky */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(255,150,60,.75) 0%, rgba(255,170,90,.35) 28%, rgba(255,170,90,0) 55%);
}
.hero-bg::after { z-index: 1; }
.hero-postmark {
  position: absolute; z-index: 3; left: 35%; top: 36px; width: 210px;
  fill: none; stroke: var(--gold-light); stroke-width: 1.3; opacity: .85; transform: rotate(-9deg);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); pointer-events: none;
}
.hero-postmark text { fill: var(--gold-light); stroke: none; font: 600 10.5px var(--sans); letter-spacing: .16em; }
.hero-postmark .hp-burj { stroke-width: 1.6; }
.hero-skyline {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 1px; width: 100%; height: auto; max-height: 96px;
  fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .75;
  pointer-events: none;
}
.hero-note {
  position: absolute; z-index: 3; right: 3%; bottom: 120px; margin: 0;
  padding: 22px 26px 22px 34px; transform: rotate(-7deg);
  font: 400 21px/1.25 "Kaushan Script", cursive; color: #2a1c0e;
  background: linear-gradient(135deg, #f3e3b8, #e2c98d);
  box-shadow: 0 16px 30px rgba(0,0,0,.45);
  clip-path: polygon(3% 0, 100% 0, 100% 100%, 4% 100%, 0 92%, 3% 84%, 0 76%, 3% 68%, 0 60%, 3% 52%, 0 44%, 3% 36%, 0 28%, 3% 20%, 0 12%);
  animation: noteSway 6s ease-in-out infinite;
}
@keyframes noteSway { 50% { transform: rotate(-5deg) translateY(-3px); } }
.hero .rule { z-index: 4; }
@media (max-width: 1240px) { .hero-note { font-size: 18px; bottom: 110px; right: 2%; } .hero-postmark { left: 33%; width: 170px; } }
@media (max-width: 960px) {
  .hero-postmark { left: auto; right: 12px; top: 14px; width: 150px; opacity: .7; }
  .hero-note { display: none; }
  .hero-skyline { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) { .hero-note { animation: none; } }

/* Let the real Burj Khalifa rise beside the headline */
@media (min-width: 961px) {
  .hero-bg { left: 20%; }
  .hero-bg::after {
    background:
      linear-gradient(90deg, rgba(13,11,8,1) 0%, rgba(13,11,8,.55) 14%, rgba(13,11,8,.15) 34%, rgba(13,11,8,0) 60%),
      linear-gradient(0deg, rgba(13,11,8,.92) 0%, rgba(13,11,8,0) 30%);
  }
  .hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 22%; background: var(--dark-2); z-index: 0; }
  .hero-content h1, .hero-content p, .hero-content .label { text-shadow: 0 2px 18px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6); }
}
@media (max-width: 640px) { .hero-postmark { display: none; } }
.hero-bg { overflow: hidden; }
.hero h1 em { text-shadow: none; filter: drop-shadow(0 2px 14px rgba(0,0,0,.85)); }

/* =========================================================
   AMBIENCE — the dining room seen through a Mughal arcade
   ========================================================= */
.ambience-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.ambience .muted { max-width: 460px; }
.arcade { position: relative; height: clamp(320px, 34vw, 480px); }
.arcade-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 100' preserveAspectRatio='none'%3E%3Cpath d='M0.0 100.0 V40.0 Q-4.3 33.4 2.3 29.1 Q1.4 21.2 9.3 20.3 Q10.9 12.5 18.6 14.2 Q21.6 6.8 29.0 9.7 Q32.4 2.5 39.6 5.8 Q42.6 -1.5 50.0 1.5 Q53.1 8.8 60.4 5.8 Q63.8 13.0 71.0 9.7 Q73.9 17.1 81.4 14.2 Q83.0 21.9 90.7 20.3 Q89.8 28.2 97.7 29.1 Q93.4 35.7 100.0 40.0 V100.0 Z'/%3E%3Cpath d='M110.0 100.0 V40.0 Q105.7 33.4 112.3 29.1 Q111.4 21.2 119.3 20.3 Q120.9 12.5 128.6 14.2 Q131.6 6.8 139.0 9.7 Q142.4 2.5 149.6 5.8 Q152.6 -1.5 160.0 1.5 Q163.1 8.8 170.4 5.8 Q173.8 13.0 181.0 9.7 Q183.9 17.1 191.4 14.2 Q193.0 21.9 200.7 20.3 Q199.8 28.2 207.7 29.1 Q203.4 35.7 210.0 40.0 V100.0 Z'/%3E%3Cpath d='M220.0 100.0 V40.0 Q215.7 33.4 222.3 29.1 Q221.4 21.2 229.3 20.3 Q230.9 12.5 238.6 14.2 Q241.6 6.8 249.0 9.7 Q252.4 2.5 259.6 5.8 Q262.6 -1.5 270.0 1.5 Q273.1 8.8 280.4 5.8 Q283.8 13.0 291.0 9.7 Q293.9 17.1 301.4 14.2 Q303.0 21.9 310.7 20.3 Q309.8 28.2 317.7 29.1 Q313.4 35.7 320.0 40.0 V100.0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 100' preserveAspectRatio='none'%3E%3Cpath d='M0.0 100.0 V40.0 Q-4.3 33.4 2.3 29.1 Q1.4 21.2 9.3 20.3 Q10.9 12.5 18.6 14.2 Q21.6 6.8 29.0 9.7 Q32.4 2.5 39.6 5.8 Q42.6 -1.5 50.0 1.5 Q53.1 8.8 60.4 5.8 Q63.8 13.0 71.0 9.7 Q73.9 17.1 81.4 14.2 Q83.0 21.9 90.7 20.3 Q89.8 28.2 97.7 29.1 Q93.4 35.7 100.0 40.0 V100.0 Z'/%3E%3Cpath d='M110.0 100.0 V40.0 Q105.7 33.4 112.3 29.1 Q111.4 21.2 119.3 20.3 Q120.9 12.5 128.6 14.2 Q131.6 6.8 139.0 9.7 Q142.4 2.5 149.6 5.8 Q152.6 -1.5 160.0 1.5 Q163.1 8.8 170.4 5.8 Q173.8 13.0 181.0 9.7 Q183.9 17.1 191.4 14.2 Q193.0 21.9 200.7 20.3 Q199.8 28.2 207.7 29.1 Q203.4 35.7 210.0 40.0 V100.0 Z'/%3E%3Cpath d='M220.0 100.0 V40.0 Q215.7 33.4 222.3 29.1 Q221.4 21.2 229.3 20.3 Q230.9 12.5 238.6 14.2 Q241.6 6.8 249.0 9.7 Q252.4 2.5 259.6 5.8 Q262.6 -1.5 270.0 1.5 Q273.1 8.8 280.4 5.8 Q283.8 13.0 291.0 9.7 Q293.9 17.1 301.4 14.2 Q303.0 21.9 310.7 20.3 Q309.8 28.2 317.7 29.1 Q313.4 35.7 320.0 40.0 V100.0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: saturate(1.08) contrast(1.04);
}
.arcade::before { content: ""; position: absolute; inset: auto -6% -26px; height: 60px; background: radial-gradient(ellipse at center, rgba(201,164,92,.25), transparent 70%); }
.arcade-line { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 8px); overflow: visible; fill: none; pointer-events: none; }
.arcade-line path { stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.arcade-host {
  position: absolute; z-index: 2; left: -70px; bottom: -40px; height: 62%; width: auto; max-width: none;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.6));
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent);
}
@media (max-width: 960px) {
  .ambience-grid { grid-template-columns: 1fr; gap: 40px; }
  .arcade { height: 300px; }
  .arcade-host { left: -16px; height: 52%; bottom: -26px; }
}

/* =========================================================
   HEADER — transparent over the hero, logo hangs in a crest
   ========================================================= */
.site-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: linear-gradient(180deg, rgba(10,9,8,.9) 0%, rgba(10,9,8,.55) 65%, rgba(10,9,8,0) 100%);
  border-bottom: 1px solid transparent; backdrop-filter: none;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.site-header::after { top: 0; bottom: auto; height: 3px; }
.site-header.scrolled { background: rgba(13,11,8,.97); border-bottom-color: rgba(201,164,92,.45); box-shadow: 0 10px 30px rgba(0,0,0,.45); backdrop-filter: blur(8px); }
section[id], .hero { scroll-margin-top: 90px; }
.crest { align-self: start; position: relative; padding: 16px 24px 30px; margin-top: 3px; }
.crest::before, .crest::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
  transition: opacity .35s ease;
}
.crest::before { background: linear-gradient(180deg, #e6c674, #a8792e); }
.crest::after { inset: 0 1.5px 2px; background: radial-gradient(ellipse at 50% 30%, #2a2116, #0d0b08 70%); clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 99.2%, 0 80%); }
.crest img { height: 112px; margin: 0; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.site-header.scrolled .crest { padding: 0; margin-top: 0; align-self: center; }
.site-header.scrolled .crest::before, .site-header.scrolled .crest::after { opacity: 0; }
.site-header.scrolled .crest img { height: 62px; }
.nav a:not(.btn) { text-shadow: 0 1px 8px rgba(0,0,0,.8); }

/* =========================================================
   HERO — zoomed-out photo, text on clean black
   ========================================================= */
.hero { min-height: clamp(680px, 100vh, 900px); }
@media (min-width: 961px) {
  .hero::before { display: none; }
  .hero-bg { left: 0; }
  .hero-bg img {
    position: absolute; right: 0; bottom: 0; top: auto; left: auto;
    width: auto; height: 90%; max-width: none; object-fit: cover;
    transform: translate3d(0, var(--py, 0px), 0);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, transparent 0%, #000 22%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, transparent 0%, #000 22%);
    mask-composite: intersect;
  }
  .hero-bg::after { background: linear-gradient(0deg, rgba(13,11,8,.9) 0%, rgba(13,11,8,0) 26%); }
  .hero-content { padding-top: 150px; padding-bottom: 130px; }
  .hero-content > div { max-width: 500px; }
  .hero h1 { font-size: clamp(46px, 5vw, 76px); }
  .hero-content p { max-width: 430px; }
  .hero-postmark { left: auto; right: 2.5%; top: 104px; width: 170px; }
  .speech { left: calc(47% + 330px); top: 19%; }
}
.hero h1 { margin: 10px 0 4px; }
.hero .label { color: var(--gold-light); }

/* =========================================================
   STORY — vintage collage + gold heritage engraving
   ========================================================= */
.story-sec { overflow: hidden; }
.story-sun { position: absolute; right: -60px; bottom: 60px; width: 420px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(232,190,110,.28), rgba(201,164,92,.1) 60%, transparent 72%); pointer-events: none; }
.story-engraving { position: absolute; right: -30px; bottom: 0; width: 400px; opacity: .3; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.story-sec .container { position: relative; z-index: 1; }
.collage { position: relative; height: 540px; }
.polaroid { position: absolute; margin: 0; padding: 12px 12px 42px; background: #d9c79f; box-shadow: 0 18px 40px rgba(0,0,0,.6); transition: transform .5s ease, z-index 0s; }
.polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: sepia(.25) contrast(1.05); }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font: 400 19px "Kaushan Script", cursive; color: #3a2a17; }
.tape { position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; translate: -50% 0; rotate: -4deg; background: rgba(232,214,170,.55); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.p1 { width: 64%; left: 0; top: 0; rotate: -5deg; z-index: 1; }
.p2 { width: 58%; right: 0; top: 42%; rotate: 4deg; z-index: 2; }
.p3 { width: 38%; left: 6%; bottom: -4%; rotate: -2deg; z-index: 3; }
.p3 img { aspect-ratio: 1; }
.polaroid:hover { z-index: 5; transform: scale(1.04); rotate: 0deg; }

/* =========================================================
   A DAY AT THE COFFEE HOUSE — sun arc + shifting light
   ========================================================= */
.journey { --p: 0; }
.journey-sticky { background: radial-gradient(ellipse 55% 75% at calc(12% + 76% * var(--p)) -12%, rgba(232,190,110, calc(.26 - .18 * var(--p))), transparent 70%); }
.journey-head { align-items: center; }
.sun-arc { width: 400px; flex: none; }
.sun-arc svg { width: 100%; height: auto; overflow: visible; }
.arc-track { fill: none; stroke: rgba(201,164,92,.28); stroke-width: 1.3; stroke-dasharray: 3 6; }
.arc-glow { fill: none; stroke: var(--gold); stroke-width: 2; }
.arc-ground { stroke: rgba(201,164,92,.4); stroke-width: 1; }
.sun { fill: #f6d27a; transition: fill .6s; }
.sun-halo { fill: rgba(246,210,122,.18); }
.sun.moon { fill: #efe6cf; }
.arc-labels { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 2px; }
.arc-labels span { font: 600 10.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.j-card { flex-basis: min(1000px, 86vw); }
.j-num { font-size: clamp(90px, 10vw, 150px); }
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .journey.is-pinned .j-art { width: min(100%, calc(66vh - 40px)); }
}
@media (max-width: 960px) {
  .sun-arc { display: none; }
  .collage { height: 440px; }
  .story-engraving, .story-sun { display: none; }
  .crest { padding: 0; margin: 0; align-self: center; }
  .crest::before, .crest::after { display: none; }
  .crest img { height: 58px; }
  .site-header { background: rgba(13,11,8,.97); }
}
@media (max-width: 640px) {
  .collage { height: 360px; }
  .polaroid { padding: 8px 8px 30px; }
  .polaroid figcaption { font-size: 15px; bottom: 6px; }
}

/* Readability glow behind hero copy */
.hero-content > div { position: relative; }
.hero-content > div::before {
  content: ""; position: absolute; z-index: -1; left: -140px; top: -90px; right: -170px; bottom: -80px; pointer-events: none;
  background: radial-gradient(ellipse 60% 58% at 40% 50%, rgba(13,11,8,.88) 0%, rgba(13,11,8,.6) 55%, rgba(13,11,8,0) 100%);
}
/* Collage: keep every caption readable */
.p1 { width: 62%; }
.p2 { width: 54%; top: 47%; }
.p3 { width: 36%; left: 2%; bottom: -7%; }
.story-engraving { width: 330px; right: -70px; opacity: .2; }
.story-sun { width: 360px; right: -90px; }
@media (max-width: 960px) { .hero-content { padding-top: 130px; } }
.ambience { overflow: hidden; }

/* =========================================================
   HERO as a full-width banner with 20px side gutters
   ========================================================= */
.hero {
  margin: 0 20px;
  border: 1px solid rgba(201,164,92,.45); border-top: 0;
  border-radius: 0 0 22px 22px;
  overflow: hidden;
}
.hero .rule { display: none; }
@media (min-width: 961px) {
  .hero-bg img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 42%;
    -webkit-mask-image: none; mask-image: none;
    transform: translate3d(0, var(--py, 0px), 0) scale(1.02);
  }
  .hero-bg::after {
    background:
      linear-gradient(90deg, rgba(13,11,8,.88) 0%, rgba(13,11,8,.58) 24%, rgba(13,11,8,.16) 46%, rgba(13,11,8,0) 64%),
      linear-gradient(0deg, rgba(13,11,8,.9) 0%, rgba(13,11,8,0) 26%),
      linear-gradient(180deg, rgba(13,11,8,.75) 0%, rgba(13,11,8,0) 18%);
  }
}
@media (max-width: 640px) { .hero { margin: 0 12px; border-radius: 0 0 16px 16px; } }

/* Hero: edge-to-edge full width */
.hero { margin: 0; border: 0; border-radius: 0; }
@media (max-width: 640px) { .hero { margin: 0; border-radius: 0; } }

/* Header seam fix: no bottom border until scrolled */
.site-header { border-bottom: 0; }
.site-header.scrolled { border-bottom: 1px solid rgba(201,164,92,.45); }

/* Crest: Mughal pendant with a cusped (scalloped) bottom and double gold edge */
.crest::before, .crest::after { display: none; }
.crest {
  padding: 14px 28px 44px; margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e6c674'/%3E%3Cstop offset='1' stop-color='%23a8792e'/%3E%3C/linearGradient%3E%3CradialGradient id='d' cx='.5' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%232a2116'/%3E%3Cstop offset='1' stop-color='%230d0b08'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M2 0V160Q2 182 22 186Q30 208 52 206Q62 228 86 226Q92 238 100 238Q108 238 114 226Q138 228 148 206Q170 208 178 186Q198 182 198 160V0' fill='url(%23d)' stroke='url(%23g)' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M12 0V156Q12 172 28 176Q36 196 56 194Q66 214 88 213Q94 226 100 226Q106 226 112 213Q134 214 144 194Q164 196 172 176Q188 172 188 156V0' fill='none' stroke='%23c9a45c' stroke-opacity='.5' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
  transition: padding .3s ease, background-size .3s ease;
}
.crest img { height: 100px; filter: none; }
.site-header.scrolled .crest { background: none; filter: none; padding: 0; }

/* Banner: a little shorter */
.hero { min-height: clamp(600px, 86vh, 760px); }
@media (min-width: 961px) { .hero-content { padding-top: 130px; padding-bottom: 110px; } }
@media (max-width: 960px) { .crest { background: none; filter: none; padding: 0; } .crest img { height: 58px; } }

/* Banner background zoomed out: whole photo visible, anchored right, fading into the dark text side */
@media (min-width: 961px) {
  .hero-bg img {
    inset: 0 0 0 auto; width: auto; height: 100%; max-width: none;
    object-fit: contain; object-position: right center;
    transform: translate3d(0, var(--py, 0px), 0);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  }
  .hero-bg::after {
    background:
      linear-gradient(90deg, rgba(13,11,8,.7) 0%, rgba(13,11,8,.35) 30%, rgba(13,11,8,0) 55%),
      linear-gradient(0deg, rgba(13,11,8,.9) 0%, rgba(13,11,8,0) 24%),
      linear-gradient(180deg, rgba(13,11,8,.7) 0%, rgba(13,11,8,0) 16%);
  }
}

/* Banner: copy and host shifted left */
@media (min-width: 961px) {
  .hero-content.container { max-width: none; margin: 0; padding-left: clamp(28px, 4.5vw, 72px); }
  .hero-character { left: 40%; }
  .speech { left: calc(40% + 330px); }
}

/* =========================================================
   PHONE REFINEMENTS
   ========================================================= */
.swipe-hint { display: none; }
@media (max-width: 960px) {
  /* mobile menu: button stays inside the panel */
  .drawer { padding: 10px 20px 24px; }
  .drawer .btn { align-self: stretch; width: auto; max-width: 100%; white-space: nowrap; }
  /* journey: tell people it scrolls sideways */
  .swipe-hint { display: block; margin: 10px 0 0; font: 600 11.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
  .swipe-hint span { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
  @keyframes nudge { 50% { transform: translateX(6px); } }
  .journey-sticky { padding: 70px 0; }
  .journey-head { margin-bottom: 30px; }
}
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .title { font-size: clamp(30px, 8.4vw, 38px); }
  .hero h1 { font-size: clamp(42px, 11.5vw, 52px); }
  /* journey cards: image a little smaller so the text shows with it */
  .j-card { flex-basis: 86vw; gap: 16px; }
  .j-art { max-width: 300px; }
  .j-num { font-size: 64px; margin-bottom: 0; }
  .j-text h3 { font-size: 30px; margin: 8px 0; }
  /* Old Dubai: no overlap, compact */
  .nostalgia .postmark { display: none; }
  .skyline-wrap { margin: 40px 0 40px; }
  .skyline-labels { display: none; }
  .guide-speech { left: 120px; top: -18px; }
  /* stamps become a swipeable row */
  .stamps { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -18px; padding: 10px 18px 24px; }
  .stamps::-webkit-scrollbar { display: none; }
  .stamps .stamp { flex: 0 0 78%; scroll-snap-align: center; }
  .stamps .stamp:nth-child(n) { transform: none; }
  /* two cultures: tighter arch panels */
  .world { padding: 64px 22px 30px; }
  .world h3 { font-size: 26px; margin-bottom: 10px; }
  .world li { font-size: 15px; padding: 6px 0; }
  .worlds-seal img { width: 110px; height: 110px; }
  /* form button on one line */
  .form-card .btn { letter-spacing: .1em; padding: 15px 16px; font-size: 11.5px; }
  /* reviews: no big empty gap */
  .quote-stage { min-height: 190px; }
  .quote-stage::before { font-size: 100px; top: -40px; left: -4px; }
  .quote blockquote { font-size: 22px; }
  /* visit details */
  .info-list p { font-size: 17px; }
  /* ambience */
  .arcade { height: 260px; }
}

/* Phone hero: host stands on the left, pointing across to the café */
@media (max-width: 960px) {
  .hero-character { right: auto; left: -24px; }
  .speech { right: auto; left: 190px; bottom: 250px; top: auto; }
  .speech::after { left: 22px; right: auto; }
}
@media (max-width: 640px) {
  .hero-character { left: -34px; }
  .speech { left: 168px; bottom: 228px; }
}

/* Banner host 10% smaller */
.hero-character { height: 75.6%; }
@media (min-width: 961px) { .speech { left: calc(40% + 300px); top: 26%; } }
@media (max-width: 960px) { .hero-character { height: 333px; } .speech { left: 172px; bottom: 225px; } }
@media (max-width: 640px) { .hero-character { height: 297px; } .speech { left: 150px; bottom: 205px; } }

/* Banner without buttons: copy sits lower */
@media (min-width: 961px) { .hero { align-items: flex-end; } .hero-content { padding-top: 160px; padding-bottom: 150px; } }
@media (max-width: 960px) { .hero-content { padding-top: 190px; } }

/* Banner copy lower still */
@media (min-width: 961px) { .hero-content { padding-top: 220px; padding-bottom: 96px; } }
@media (max-width: 960px) { .hero-content { padding-top: 250px; } }

/* Deeper black in the banner's top-left corner */
@media (min-width: 961px) {
  .hero-bg::after {
    background:
      radial-gradient(ellipse 60% 70% at 0% 0%, rgba(13,11,8,.97) 0%, rgba(13,11,8,.78) 40%, rgba(13,11,8,0) 78%),
      linear-gradient(90deg, rgba(13,11,8,.8) 0%, rgba(13,11,8,.4) 30%, rgba(13,11,8,0) 55%),
      linear-gradient(0deg, rgba(13,11,8,.9) 0%, rgba(13,11,8,0) 24%),
      linear-gradient(180deg, rgba(13,11,8,.75) 0%, rgba(13,11,8,0) 18%);
  }
}
@media (max-width: 960px) {
  .hero-bg::after {
    background:
      radial-gradient(ellipse 90% 55% at 0% 0%, rgba(13,11,8,.95) 0%, rgba(13,11,8,.6) 50%, rgba(13,11,8,0) 85%),
      linear-gradient(180deg, rgba(28,24,18,.85) 0%, rgba(13,11,8,.7) 45%, rgba(13,11,8,.15) 72%, rgba(13,11,8,.85) 100%);
  }
}

/* Banner host: a little smaller and further left */
.hero-character { height: 68%; }
@media (min-width: 961px) { .hero-character { left: 36%; } .speech { left: calc(36% + 268px); top: 32%; } }
@media (max-width: 960px) { .hero-character { height: 300px; left: -34px; } .speech { left: 150px; bottom: 205px; } }
@media (max-width: 640px) { .hero-character { height: 268px; left: -44px; } .speech { left: 128px; bottom: 182px; } }

/* Banner postmark back in view, on the dark side */
.hero-postmark { display: block !important; opacity: .9; }
@media (min-width: 961px) {
  .hero-postmark { left: calc(clamp(28px, 4.5vw, 72px) + 290px); right: auto; top: 108px; width: 175px; }
}
@media (max-width: 960px) {
  .hero-postmark { left: auto; right: 14px; top: 92px; width: 132px; opacity: .85; }
}

/* Postmark aligned to the left edge of the banner copy */
@media (min-width: 961px) { .hero-postmark { left: clamp(20px, 4vw, 64px); top: 104px; } }
@media (max-width: 960px) { .hero-postmark { left: 14px; right: auto; top: 96px; } }

/* =========================================================
   INFO RIBBON (replaces the marquee)
   ========================================================= */
.ribbon { background: var(--dark-2); border-top: 1px solid rgba(201,164,92,.4); border-bottom: 1px solid rgba(201,164,92,.4); box-shadow: inset 0 4px 0 -3px rgba(201,164,92,.18), inset 0 -4px 0 -3px rgba(201,164,92,.18); }
.ribbon-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.rb { display: flex; align-items: center; gap: 14px; padding: 24px 22px; position: relative; transition: background .3s; }
.rb + .rb::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: linear-gradient(transparent, rgba(201,164,92,.55), transparent); }
a.rb:hover { background: rgba(201,164,92,.06); }
.rb .ico { width: 40px; height: 40px; padding: 9px; flex: none; color: var(--gold-light); border: 1px solid rgba(201,164,92,.55); border-radius: 50%; }
.rb span { display: block; font: 600 10.5px var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }
.rb strong { display: block; font: 500 17px/1.3 var(--serif); color: var(--cream); }
@media (max-width: 960px) {
  .ribbon-grid { grid-template-columns: 1fr 1fr; padding: 0; }
  .rb { padding: 18px 16px; }
  .rb:nth-child(3)::before { display: none; }
  .rb:nth-child(n+3) { border-top: 1px solid rgba(201,164,92,.2); }
  .rb strong { font-size: 15px; }
}
@media (max-width: 400px) { .rb { gap: 10px; padding: 16px 12px; } .rb .ico { width: 34px; height: 34px; padding: 7px; } .rb strong { font-size: 14px; } }

/* Ribbon: edge to edge */
.ribbon-grid.container { max-width: none; padding: 0; }
.rb { justify-content: center; padding: 26px 18px; }
@media (min-width: 961px) { .rb:first-child { padding-left: clamp(20px, 4vw, 64px); justify-content: flex-start; } .rb:last-child { padding-right: clamp(20px, 4vw, 64px); justify-content: flex-end; } }
@media (max-width: 960px) { .rb { justify-content: flex-start; padding: 18px 16px; } }

/* =========================================================
   A DAY AT THE COFFEE HOUSE — vintage storybook
   ========================================================= */
.storybook { overflow: hidden; }
.book { max-width: 1100px; margin: 0 auto; outline: none; }
.book-case {
  position: relative; padding: 20px; border-radius: 12px;
  background: radial-gradient(ellipse at 30% 20%, #3a2716, #1a110a 70%);
  box-shadow: 0 50px 90px rgba(0,0,0,.65), inset 0 0 0 1px #7a5523, inset 0 0 0 9px #1c130b, inset 0 0 0 10px rgba(201,164,92,.65), inset 0 0 0 13px #1c130b, inset 0 0 0 14px rgba(201,164,92,.3);
}
.book-case::before { /* gold tooled corners */
  content: ""; position: absolute; inset: 26px; pointer-events: none; z-index: 3;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 40px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top left / 1px 40px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 40px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 1px 40px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 40px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 1px 40px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 40px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 1px 40px no-repeat;
  opacity: .5;
}
.pages {
  position: relative; height: 560px; border-radius: 4px; overflow: hidden; perspective: 2400px;
  background:
    radial-gradient(ellipse at 30% 45%, #f1e5c6 0%, #e6d6ad 60%, #d3bc8b 100%) left / 50% 100% no-repeat,
    radial-gradient(ellipse at 70% 45%, #f1e5c6 0%, #e6d6ad 60%, #d3bc8b 100%) right / 50% 100% no-repeat;
}
.pages::before { /* paper grain */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pages::after { /* spine shadow */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 90px; translate: -50% 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(90,60,25,0) 0%, rgba(90,60,25,.28) 42%, rgba(40,25,10,.45) 50%, rgba(90,60,25,.28) 58%, rgba(90,60,25,0) 100%);
}
.spread { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; visibility: hidden; transition: opacity .55s ease .35s, visibility 0s linear .9s; }
.spread.is-active { opacity: 1; visibility: visible; transition: opacity .55s ease .35s, visibility 0s; }
.page { position: relative; padding: 46px 58px 54px; color: #2a1c0e; display: flex; flex-direction: column; justify-content: center; }
.page-left { align-items: center; }
.pg-figure { margin: 0; width: min(80%, 330px); text-align: center; }
.pg-figure .arch { --ar: 1 / 1.08; padding: 10px; }
.pg-figure .arch > svg path { stroke: #94722f; }
.pg-figure .arch img { filter: sepia(.12) contrast(1.02); }
.pg-figure figcaption { margin-top: 10px; font: italic 500 17px var(--serif); color: #6b4f2a; letter-spacing: .04em; }
.pg-num { font: italic 600 74px/1 var(--serif); color: #b08a46; }
.pg-time { margin: 10px 0 6px; font: 600 11.5px var(--sans); letter-spacing: .32em; text-transform: uppercase; color: #94722f; }
.page-right h3 { font: 600 clamp(30px, 3vw, 42px)/1.1 var(--serif); color: #241608; margin-bottom: 16px; }
.page-right p { font-size: 16px; line-height: 1.75; color: #4b3a28; max-width: 380px; margin: 0; }
.page-right .pg-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(148,114,47,.45); font: italic 500 19px/1.4 var(--serif); color: #6b4f2a; }
.page-right .pg-note::before { content: "\201C"; color: #b08a46; margin-right: 2px; }
.page-right .pg-note::after { content: "\201D"; color: #b08a46; }
.folio { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font: italic 14px var(--serif); color: #94722f; }

/* page-turn leaf */
.leaf { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 4; pointer-events: none; opacity: 0; backface-visibility: visible;
  background: linear-gradient(90deg, #d9c494, #efe3c3 30%, #e8d8b0 70%, #cdb582); box-shadow: 0 0 30px rgba(40,25,10,.35); }
.leaf.turn-next { left: 50%; transform-origin: left center; animation: leafNext .9s cubic-bezier(.45,.05,.3,1) forwards; }
.leaf.turn-prev { left: 0; transform-origin: right center; animation: leafPrev .9s cubic-bezier(.45,.05,.3,1) forwards; }
@keyframes leafNext { 0% { opacity: 1; transform: rotateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: rotateY(-178deg); } }
@keyframes leafPrev { 0% { opacity: 1; transform: rotateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: rotateY(178deg); } }

/* controls */
.book-nav { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 30px; }
.book-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--gold); background: transparent; color: var(--gold-light); font-size: 30px; line-height: 1; padding-bottom: 4px; cursor: pointer; transition: background .25s, color .25s, opacity .25s; }
.book-btn:hover:not(:disabled) { background: var(--gold); color: var(--dark-2); }
.book-btn:disabled { opacity: .3; cursor: default; }
.book-progress { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.book-dots { display: flex; gap: 12px; }
.book-dots button { width: 10px; height: 10px; padding: 0; border: 1px solid var(--gold); background: transparent; transform: rotate(45deg); cursor: pointer; transition: background .3s; }
.book-dots button[aria-current="step"] { background: var(--gold); }
.pg-count { font: 600 12px var(--sans); letter-spacing: .24em; color: var(--muted); }

@media (max-width: 960px) {
  .pages { height: 600px; }
  .page { padding: 36px 34px 50px; }
  .pg-figure { width: 90%; }
}
@media (max-width: 760px) {
  .book-case { padding: 12px; }
  .book-case::before { inset: 16px; }
  .pages { height: auto; background: radial-gradient(ellipse at 50% 40%, #f1e5c6 0%, #e6d6ad 65%, #d3bc8b 100%); }
  .pages::after { display: none; }
  .spread { position: relative; display: none; grid-template-columns: 1fr; opacity: 1; visibility: visible; }
  .spread.is-active { display: grid; animation: pageIn .6s ease; }
  @keyframes pageIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
  .page { padding: 28px 24px 14px; }
  .page-right { padding: 10px 26px 54px; }
  .page-left .folio { display: none; }
  .pg-figure { width: 78%; }
  .pg-num { font-size: 56px; }
  .page-right p { font-size: 15px; }
  .leaf { width: 100%; }
  .leaf.turn-next { left: 0; } .leaf.turn-prev { left: 0; transform-origin: left center; }
  .book-nav { gap: 18px; }
}

/* =========================================================
   FROM OUR KITCHEN — masala dabba, steam, craft row
   ========================================================= */
.sig-grid { gap: 70px; }
.dabba-wrap { display: grid; grid-template-columns: 250px 1fr; gap: 30px; align-items: center; margin: 30px 0 26px; }
.dabba { width: 100%; height: auto; filter: drop-shadow(0 16px 28px rgba(0,0,0,.55)); }
.dabba-outer { fill: #1d1710; stroke: var(--gold); stroke-width: 2.5; }
.dabba-inner { fill: radial-gradient; fill: #241c13; stroke: rgba(201,164,92,.45); stroke-width: 1; }
.bowl { cursor: pointer; outline: none; transition: transform .3s; }
.bowl-rim { fill: #2e2418; stroke: #b08a46; stroke-width: 2; transition: stroke .3s, stroke-width .3s; }
.bowl-spice { stroke: rgba(0,0,0,.35); stroke-width: 1; }
.bowl-grain { fill: url(#grain); }
.bowl:hover .bowl-rim, .bowl:focus-visible .bowl-rim, .bowl.is-active .bowl-rim { stroke: var(--gold-light); stroke-width: 3.5; }
.bowl.is-active .bowl-rim { filter: drop-shadow(0 0 6px rgba(246,221,143,.8)); }
.dabba-info .label { font-size: 11.5px; }
.dabba-name { font: 600 28px/1.15 var(--serif); color: var(--gold-light); margin: 8px 0 8px; transition: opacity .25s; }
.dabba-text { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin: 0 0 10px; min-height: 3.3em; transition: opacity .25s; }
.dabba-info small { font: 600 10.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(201,164,92,.7); }
.dabba-info.swap .dabba-name, .dabba-info.swap .dabba-text { opacity: 0; }
.craft { display: flex; gap: 0; margin: 0 0 34px; border-top: 1px solid rgba(201,164,92,.3); border-bottom: 1px solid rgba(201,164,92,.3); }
.craft li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 8px; font: 600 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.craft li + li { border-left: 1px solid rgba(201,164,92,.3); }
.craft svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* steam rising from the handi */
.sig-art .arch { position: relative; }
.steam { position: absolute; z-index: 3; bottom: 46%; width: 34px; height: 120px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); filter: blur(8px); opacity: 0;
  animation: steam 5s ease-in infinite; }
.steam.s1 { left: 52%; }
.steam.s2 { left: 62%; animation-delay: 1.6s; }
.steam.s3 { left: 72%; animation-delay: 3.2s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(20px) scaleX(.6); } 25% { opacity: .75; } 100% { opacity: 0; transform: translateY(-110px) scaleX(1.4) translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .steam { display: none; } }
@media (max-width: 960px) { .dabba-wrap { grid-template-columns: 220px 1fr; } }
@media (max-width: 640px) {
  .dabba-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .dabba { width: 240px; }
  .craft li { font-size: 10.5px; letter-spacing: .12em; gap: 6px; flex-direction: column; }
}
#signature { overflow: hidden; }

/* Kitchen art: cut-out host in front of a dark Mughal window */
.sig-art { position: relative; max-width: 520px; width: 100%; aspect-ratio: 1 / 1.12; margin: 0 auto; }
.sig-art::before { /* finer sunburst */
  width: 122%; top: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(201,164,92,.38) 0deg .5deg, transparent .5deg 4.5deg);
  -webkit-mask: radial-gradient(circle, transparent 47%, #000 49%, #000 60%, transparent 70%);
  mask: radial-gradient(circle, transparent 47%, #000 49%, #000 60%, transparent 70%);
}
.sig-art::after { width: 100%; top: 50%; border: 1px dashed rgba(201,164,92,.35); }
.sig-window { position: absolute; z-index: 1; left: 8%; right: 8%; top: 14%; bottom: 0; }
.sig-window::before {
  content: ""; position: absolute; inset: 0; clip-path: url(#arch-clip);
  background:
    radial-gradient(ellipse 70% 55% at 50% 58%, rgba(232,190,110,.42), rgba(201,164,92,.12) 55%, transparent 75%),
    var(--dark-3) var(--pattern-mid);
}
.sig-window svg { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 8px); overflow: visible; fill: none; }
.sig-window svg path { stroke: var(--gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sig-host { position: absolute; z-index: 2; left: 50%; bottom: 0; width: 96%; height: auto; translate: -50% 0; filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)); }
.sig-art .steam { z-index: 3; bottom: 42%; background: radial-gradient(ellipse at center, rgba(255,248,230,.6), rgba(255,248,230,0) 70%); }
.sig-art .steam.s1 { left: 48%; } .sig-art .steam.s2 { left: 60%; } .sig-art .steam.s3 { left: 72%; }

/* Storybook backdrop: candle-lit study */
.storybook {
  position: relative;
  background:
    radial-gradient(ellipse 50% 46% at 50% 60%, rgba(222,165,80,.24), rgba(222,165,80,.06) 55%, transparent 75%),
    radial-gradient(ellipse 140% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.6) 100%),
    var(--dark-2) var(--pattern-deep);
}
.storybook::before { /* faint palace arch framing the book */
  content: ""; position: absolute; z-index: 0; left: 50%; top: 70px; bottom: 60px; width: min(1320px, 94vw); translate: -50% 0;
  border: 1px solid rgba(201,164,92,.16); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 160px 160px 0 0; pointer-events: none;
  box-shadow: inset 0 0 0 10px transparent, inset 0 0 0 11px rgba(201,164,92,.08);
}
.storybook::after { /* polished table the book rests on */
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 36%; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(201,164,92,.18) 0, rgba(201,164,92,0) 2px),
    linear-gradient(180deg, rgba(58,38,18,.55) 0%, rgba(26,17,9,.9) 60%, #0b0806 100%);
}
.storybook .container { position: relative; z-index: 1; }
.book { position: relative; }
.book-case::after { /* soft contact shadow on the table */
  content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -34px; height: 60px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.75), transparent 70%); filter: blur(6px);
}
@media (max-width: 760px) { .storybook::before { top: 40px; border-radius: 50% 50% 0 0 / 90px 90px 0 0; } .storybook::after { height: 28%; } }

/* =========================================================
   STORYBOOK — interactive touches
   ========================================================= */
.storybook { --lx: 50%; --ly: 60%;
  background:
    radial-gradient(ellipse 34% 40% at var(--lx) var(--ly), rgba(232,175,90,.28), rgba(232,175,90,.06) 60%, transparent 78%),
    radial-gradient(ellipse 50% 46% at 50% 60%, rgba(222,165,80,.14), transparent 75%),
    radial-gradient(ellipse 140% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.6) 100%),
    var(--dark-2) var(--pattern-deep);
}
.book-case { transform: perspective(1800px) rotateX(var(--bx, 0deg)) rotateY(var(--by, 0deg)); transition: transform .35s ease-out; transform-style: preserve-3d; }
/* curling page corners */
.curl { position: absolute; z-index: 6; bottom: 0; width: 0; height: 0; padding: 0; border: 0; cursor: pointer; opacity: 0;
  transition: width .3s ease, height .3s ease, opacity .3s ease; box-shadow: -4px -4px 10px rgba(60,40,15,.35); }
.curl-next { right: 0; background: linear-gradient(315deg, #0b0806 0 50%, #f3e8cc 50%, #ddc796 72%, #c9ad74); }
.curl-prev { left: 0; background: linear-gradient(45deg, #0b0806 0 50%, #f3e8cc 50%, #ddc796 72%, #c9ad74); box-shadow: 4px -4px 10px rgba(60,40,15,.35); }
.book:hover .curl:not(:disabled) { width: 44px; height: 44px; opacity: 1; }
.book .curl:not(:disabled):hover, .curl:focus-visible { width: 72px; height: 72px; opacity: 1; }
.curl:disabled { display: none; }
@media (hover: none) { .curl { width: 34px; height: 34px; opacity: 1; } }

/* =========================================================
   MEMORIES OF OLD DUBAI — interactive refinements
   ========================================================= */
.skyline-wrap { position: relative; }
.sky-dhow { transform-box: fill-box; transform-origin: center bottom; animation: sail 16s ease-in-out infinite alternate; }
@keyframes sail { 0% { transform: translateX(-70px) rotate(-1.5deg); } 25% { transform: translateX(-35px) rotate(1.2deg); } 50% { transform: translateX(0) rotate(-1deg); } 75% { transform: translateX(35px) rotate(1.4deg); } 100% { transform: translateX(70px) rotate(-1deg); } }
.sky-waves { animation: waves 3.2s linear infinite; }
@keyframes waves { to { transform: translateX(-24px); } }
.sky-moon { fill: rgba(232,207,148,.25); filter: drop-shadow(0 0 6px rgba(246,221,143,.8)); animation: moon 4s ease-in-out infinite; }
@keyframes moon { 50% { filter: drop-shadow(0 0 14px rgba(246,221,143,1)); } }

/* skyline hotspots */
.hotspot { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 30px; height: 30px; translate: -50% -50%; padding: 0; border: 0; background: none; cursor: pointer; }
.hs-pin { position: absolute; inset: 7px; background: var(--gold-light); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(13,11,8,.9), 0 0 14px rgba(246,221,143,.9); }
.hs-pin::after { content: ""; position: absolute; inset: -9px; border: 1px solid var(--gold); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
.hs-card {
  position: absolute; left: 50%; bottom: calc(100% + 14px); width: 250px; translate: -50% 8px;
  padding: 14px 16px; text-align: left; border-radius: 6px;
  background: rgba(13,11,8,.96); border: 1px solid var(--gold); box-shadow: 0 16px 34px rgba(0,0,0,.6);
  font: 400 13.5px/1.55 var(--sans); color: var(--muted);
  opacity: 0; visibility: hidden; transition: opacity .25s, translate .25s, visibility .25s; pointer-events: none;
}
.hs-card b { display: block; font: 600 18px var(--serif); color: var(--gold-light); margin-bottom: 4px; }
.hotspot:hover .hs-card, .hotspot:focus-visible .hs-card, .hotspot.open .hs-card { opacity: 1; visibility: visible; translate: -50% 0; }
.hotspot:first-of-type .hs-card { left: 0; translate: 0 8px; }
.hotspot:first-of-type:hover .hs-card, .hotspot:first-of-type.open .hs-card, .hotspot:first-of-type:focus-visible .hs-card { translate: 0 0; }
.hotspot:last-of-type .hs-card { left: auto; right: 0; translate: 0 8px; }
.hotspot:last-of-type:hover .hs-card, .hotspot:last-of-type.open .hs-card, .hotspot:last-of-type:focus-visible .hs-card { translate: 0 0; }

/* timeline above the stamps */
.stamp-line { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; margin: 0 0 22px; height: 16px; }
.stamp-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent); }
.stamp-line i { position: relative; justify-self: center; width: 12px; height: 12px; margin-top: 2px; background: var(--dark-2); border: 1px solid var(--gold-light); transform: rotate(45deg); box-shadow: 0 0 10px rgba(246,221,143,.6); }
/* little postmark on each stamp */
.stamp-in { position: relative; }
.stamp-in::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 50%; opacity: .45; pointer-events: none;
  border: 1px solid var(--gold); box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(201,164,92,.6);
  background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(201,164,92,.45) 6px 7px) right -26px center / 40px 26px no-repeat;
  transform: rotate(-14deg);
}

/* talking storyteller */
.guide { pointer-events: auto; cursor: pointer; outline: none; }
.guide img { transition: transform .3s ease; }
.guide:hover img, .guide:focus-visible img { transform: rotate(-2deg) scale(1.03); }
.guide-speech { transition: opacity .25s ease; }
.guide-speech.swap { opacity: 0; }

@media (max-width: 640px) {
  .stamp-line { display: none; }
  .hs-card { width: 210px; font-size: 12.5px; }
  .hotspot { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .sky-dhow, .sky-waves, .sky-moon, .hs-pin::after { animation: none; } }

/* =========================================================
   A DIFFERENT FEELING FOR EVERY SECTION
   ========================================================= */
/* Nostalgia — warm sepia with photo grain */
#story.story-sec { background: radial-gradient(ellipse 60% 70% at 25% 45%, rgba(160,115,60,.24), transparent 70%), radial-gradient(ellipse 50% 60% at 90% 90%, rgba(201,164,92,.12), transparent 70%), linear-gradient(180deg, #1d150d, #120d08); }
#story.story-sec::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Appetite — copper glow and drifting spice dust */
#signature { background: radial-gradient(ellipse 55% 70% at 28% 55%, rgba(176,90,36,.30), transparent 70%), radial-gradient(ellipse 40% 50% at 85% 15%, rgba(214,140,50,.14), transparent 70%), linear-gradient(180deg, #170c06, #0d0805); }
#signature::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, rgba(242,183,5,.7), transparent),
    radial-gradient(1.4px 1.4px at 120px 80px, rgba(200,32,47,.6), transparent),
    radial-gradient(1.2px 1.2px at 70px 150px, rgba(232,207,148,.7), transparent),
    radial-gradient(1.8px 1.8px at 170px 20px, rgba(176,90,36,.8), transparent),
    radial-gradient(1.2px 1.2px at 150px 170px, rgba(242,183,5,.5), transparent);
  background-size: 200px 200px; animation: dust 40s linear infinite; }
@keyframes dust { to { background-position: 200px -400px; } }
#signature .container { position: relative; z-index: 1; }

/* Wonder — Arabian night with twinkling gold stars */
.nostalgia { background: radial-gradient(ellipse 60% 45% at 75% 10%, rgba(232,207,148,.12), transparent 70%), radial-gradient(ellipse 80% 60% at 50% 120%, rgba(201,164,92,.10), transparent 70%), linear-gradient(180deg, #07070a, #0d0b08); }
.nostalgia::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 30px 40px, rgba(246,221,143,.9), transparent),
    radial-gradient(1px 1px at 140px 90px, rgba(255,255,255,.8), transparent),
    radial-gradient(1.2px 1.2px at 220px 30px, rgba(246,221,143,.8), transparent),
    radial-gradient(1px 1px at 90px 160px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 260px 190px, rgba(246,221,143,.9), transparent),
    radial-gradient(1px 1px at 190px 240px, rgba(255,255,255,.7), transparent);
  background-size: 300px 280px; animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }

/* Pride — black marble with gold veins */
#cultures.sec-cultures { background:
    linear-gradient(115deg, transparent 38%, rgba(201,164,92,.13) 39%, transparent 40.5%),
    linear-gradient(62deg, transparent 63%, rgba(201,164,92,.09) 64%, transparent 65.2%),
    linear-gradient(150deg, transparent 18%, rgba(255,255,255,.04) 19%, transparent 21%),
    linear-gradient(28deg, transparent 80%, rgba(201,164,92,.07) 81%, transparent 82%),
    radial-gradient(ellipse 80% 70% at 50% 30%, #1f1d1a, #0e0d0b 75%); }

/* Comfort — warm lantern light */
#ambience { background:
    radial-gradient(circle at 12% -6%, rgba(240,180,90,.34), transparent 26%),
    radial-gradient(circle at 50% -10%, rgba(240,180,90,.26), transparent 30%),
    radial-gradient(circle at 88% -6%, rgba(240,180,90,.34), transparent 26%),
    linear-gradient(180deg, #1b130b, #0d0a07); }

/* Love — dark velvet with a touch of turban red */
#reviews.sec-reviews { background:
    radial-gradient(ellipse 55% 60% at 50% 48%, rgba(150,28,40,.26), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #170a0b, #0c0707); }

/* Arrival — night map with gold grid */
#visit { background:
    linear-gradient(rgba(201,164,92,.06) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(201,164,92,.06) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(ellipse 60% 70% at 30% 50%, #19140e, #0b0907 75%); }

/* =========================================================
   STACKED SLIDES (desktop) — each section slides over the last
   ========================================================= */
.cover-shade { display: none; }
@media (min-width: 961px) {
  .stacked main > * { position: relative; }
  .stacked main > section { position: sticky; top: var(--stick, 0px); transform: scale(calc(1 - var(--cover, 0) * .035)); transform-origin: 50% 0; }
  .stacked main > section:not(.hero) { border-radius: 28px 28px 0 0; box-shadow: 0 -26px 60px rgba(0,0,0,.6), 0 -1px 0 rgba(201,164,92,.55); }
  .stacked .cover-shade { display: block; position: absolute; inset: 0; z-index: 40; background: #000; opacity: calc(var(--cover, 0) * .55); pointer-events: none; border-radius: inherit; }
}

/* =========================================================
   SECTION NAVIGATOR (gold diamonds, right edge)
   ========================================================= */
.dotnav { position: fixed; right: 22px; top: 50%; translate: 0 -50%; z-index: 65; display: flex; flex-direction: column; gap: 14px; }
.dotnav a { position: relative; width: 12px; height: 12px; border: 1px solid var(--gold); transform: rotate(45deg); background: rgba(13,11,8,.6); transition: background .3s, box-shadow .3s; }
.dotnav a.active { background: var(--gold); box-shadow: 0 0 12px rgba(246,221,143,.8); }
.dotnav span { position: absolute; right: 22px; top: 50%; transform: rotate(-45deg) translate(0, 0); transform-origin: right center;
  white-space: nowrap; padding: 6px 12px; font: 600 10.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light);
  background: rgba(13,11,8,.92); border: 1px solid rgba(201,164,92,.5); border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.dotnav span { right: auto; left: auto; top: auto; }
.dotnav a:hover span, .dotnav a:focus-visible span { opacity: 1; }
@media (max-width: 960px) { .dotnav { display: none; } }

/* =========================================================
   HEADER: logo left, three-line menu right, full-screen menu
   ========================================================= */
.header-inner { grid-template-columns: auto 1fr auto; max-width: none; padding-left: clamp(20px, 4vw, 64px); padding-right: clamp(20px, 4vw, 64px); }
.site-header .nav { display: none !important; }
.brand.crest { grid-column: 1; justify-self: start; }
.nav-toggle {
  grid-column: 3; justify-self: end; display: flex !important; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px;
  width: 56px; height: 56px; padding: 14px; cursor: pointer; background: rgba(13,11,8,.55); border: 1px solid var(--gold); border-radius: 50%;
  transition: background .3s;
}
.nav-toggle:hover { background: rgba(201,164,92,.15); }
.nav-toggle span { display: block; height: 1.5px; background: var(--gold-light); transition: transform .35s, opacity .3s, width .3s; }
.nav-toggle span:nth-child(1) { width: 26px; } .nav-toggle span:nth-child(2) { width: 18px; } .nav-toggle span:nth-child(3) { width: 22px; }
.nav-toggle:hover span { width: 26px; }
.nav-toggle[aria-expanded="true"] span { width: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.drawer {
  display: flex !important; position: fixed; inset: 0; z-index: -1; padding: 120px clamp(24px, 6vw, 110px) 60px;
  align-items: center; justify-content: center; overflow-y: auto;
  background: radial-gradient(ellipse 60% 70% at 75% 50%, rgba(201,164,92,.14), transparent 70%), rgba(10,9,8,.98) var(--pattern-deep);
  opacity: 0; visibility: hidden; transform: none; box-shadow: none; border: 0;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.drawer.open { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.drawer-inner { width: 100%; max-width: 1200px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 60px; align-items: center; }
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a {
  display: flex; align-items: baseline; gap: 22px; padding: 10px 0; border-bottom: 1px solid rgba(201,164,92,.16) !important;
  font: 500 clamp(28px, 3.6vw, 46px)/1.2 var(--serif) !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important;
  color: var(--cream); opacity: 0; transform: translateY(18px); transition: color .25s, padding-left .3s, opacity .5s, transform .5s;
}
.drawer-links a i { font: italic 500 14px var(--serif); color: var(--gold); min-width: 26px; }
.drawer-links a:hover, .drawer-links a.active { color: var(--gold-light); padding-left: 12px; }
.drawer.open .drawer-links a { opacity: 1; transform: none; }
.drawer.open .drawer-links a:nth-child(2) { transition-delay: .05s; } .drawer.open .drawer-links a:nth-child(3) { transition-delay: .1s; }
.drawer.open .drawer-links a:nth-child(4) { transition-delay: .15s; } .drawer.open .drawer-links a:nth-child(5) { transition-delay: .2s; }
.drawer.open .drawer-links a:nth-child(6) { transition-delay: .25s; } .drawer.open .drawer-links a:nth-child(7) { transition-delay: .3s; }
.drawer-side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; opacity: 0; transform: translateX(20px); transition: opacity .6s .2s, transform .6s .2s; }
.drawer.open .drawer-side { opacity: 1; transform: none; }
.drawer-side img { width: min(300px, 100%); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)); }
.drawer-tag { margin: 0; font: italic 500 22px var(--serif); color: var(--gold-light); }
.drawer-side .btn { margin-top: 4px; }
.drawer-phone { font: 600 13px var(--sans); letter-spacing: .2em; color: var(--muted); }
.drawer-phone:hover { color: var(--gold-light); }
body.menu-open { overflow: hidden; }
body.menu-open .dotnav, body.menu-open .wa-float { opacity: 0; pointer-events: none; }

@media (max-width: 960px) {
  .drawer { padding: 100px 26px 40px; align-items: flex-start; }
  .drawer-inner { grid-template-columns: 1fr; gap: 30px; }
  .drawer-side img { width: 170px; }
  .drawer-links a { font-size: 26px !important; padding: 9px 0; }
  .nav-toggle { width: 48px; height: 48px; padding: 12px; }
}
@media (min-width: 961px) { .hero-postmark { top: 176px; left: clamp(28px, 5vw, 80px); width: 150px; } }
@media (max-width: 960px) { .drawer { padding-top: 124px; } }

/* Top of page (desktop): centred crest with split menu.
   Once scrolled: logo left + three-line menu right. */
@media (min-width: 961px) {
  .site-header:not(.scrolled) .header-inner { grid-template-columns: 1fr auto 1fr; max-width: var(--container); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
  .site-header:not(.scrolled) .nav { display: flex !important; }
  .site-header:not(.scrolled) .brand.crest { grid-column: auto; justify-self: center; }
  .site-header:not(.scrolled) .nav-toggle { display: none !important; }
  .site-header.scrolled .header-inner { animation: barIn .45s ease; }
  @keyframes barIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  .hero-postmark { top: 104px; left: clamp(20px, 4vw, 64px); width: 165px; }
}

/* =========================================================
   HEADER v3: logo centred at top -> glides left on scroll;
   call button + three-line menu always on the right
   ========================================================= */
.site-header:not(.scrolled) .nav, .site-header.scrolled .nav { display: none !important; }
.site-header:not(.scrolled) .nav-toggle, .site-header.scrolled .nav-toggle { display: flex !important; }
.site-header:not(.scrolled) .header-inner, .site-header.scrolled .header-inner {
  display: flex !important; align-items: center; justify-content: flex-end; gap: 14px; position: relative;
  max-width: none; margin: 0; height: var(--header-h); padding-left: clamp(16px, 4vw, 64px); padding-right: clamp(16px, 4vw, 64px);
  animation: none;
}
.site-header .brand.crest {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  transition: left .6s cubic-bezier(.65,0,.25,1), transform .6s cubic-bezier(.65,0,.25,1), top .6s ease, padding .4s ease;
}
.site-header.scrolled .brand.crest { left: clamp(16px, 4vw, 64px); transform: translateX(0); top: 12px; }
.site-header .crest img { transition: height .5s ease; }

.call-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 16px; border-radius: 999px;
  border: 1px solid var(--gold); color: var(--gold-light); background: rgba(13,11,8,.55);
  font: 600 12.5px var(--sans); letter-spacing: .12em; white-space: nowrap; transition: background .3s, color .3s;
}
.call-btn .ico { width: 17px; height: 17px; }
.call-btn:hover { background: var(--gold); color: var(--dark-2); }
.site-header.scrolled .call-btn { height: 44px; }
@media (max-width: 960px) {
  .site-header .brand.crest { top: 6px; }
  .site-header.scrolled .brand.crest { top: 6px; }
  .call-btn { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .call-btn span { display: none; }
}

/* Scrolled header: no bar — logo and buttons float over each slide */
.site-header.scrolled { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
.site-header.scrolled .crest img { filter: drop-shadow(0 4px 12px rgba(0,0,0,.85)); }
.site-header.scrolled .call-btn, .site-header.scrolled .nav-toggle { background: rgba(13,11,8,.72); box-shadow: 0 6px 18px rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.site-header.scrolled .call-btn:hover { background: var(--gold); }
@media (max-width: 960px) { .site-header, .site-header.scrolled { background: transparent !important; } }

/* =========================================================
   FULL-SCREEN SECTIONS (desktop): one section = one screen
   ========================================================= */
@media (min-width: 961px) {
  main > section:not(.hero) { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 96px; padding-bottom: 56px; }
  main > section:not(.hero) > .container { width: 100%; }
  .hero { min-height: calc(100vh - 92px); }

  /* Our Story */
  .story-sec .statement { font-size: clamp(20px, 1.8vw, 26px); }
  .story-sec .orn { margin: 14px auto; }
  .story-grid { margin-top: 34px; gap: 64px; }
  .collage { height: min(430px, 46vh); }
  .promise { margin-top: 20px; gap: 18px 30px; }

  /* Storybook */
  .storybook .head { margin-bottom: 22px; }
  .storybook .head .orn { margin: 12px auto; }
  .storybook .lead { font-size: 15px; }
  .pages { height: clamp(420px, calc(100vh - 380px), 560px); }
  .page { padding: 34px 50px 46px; }
  .book-nav { margin-top: 16px; }

  /* Kitchen */
  #signature .orn { margin: 14px 0; }
  .dabba-wrap { margin: 20px 0 18px; }
  .craft { margin-bottom: 0; }
  .sig-art { max-width: min(500px, 62vh); }

  /* Memories of Old Dubai */
  .nostalgia .orn { margin: 12px auto; }
  .nostalgia .lead { font-size: 15.5px; }
  .guide { width: 230px; top: -10px; }
  .skyline-wrap { margin: 22px auto 18px; max-width: 980px; }
  .stamp-line { margin-bottom: 12px; }
  .stamp-in { padding: 20px 18px 18px; }
  .stamp-in svg { width: 44px; height: 44px; margin-bottom: 8px; }
  .stamp-in h3 { font-size: 20px; margin-bottom: 6px; }
  .stamp-in p { font-size: 13.5px; line-height: 1.5; }
  .stamp-in::after { width: 38px; height: 38px; }

  /* Two cultures / Ambience / Reviews */
  #cultures .worlds { margin-top: 30px; }
  .ambience-grid { gap: 60px; }
}
@media (min-width: 961px) {
  .pages { height: clamp(400px, calc(100vh - 455px), 540px); }
  .hero { min-height: calc(100vh - 94px); }
  .pg-num { font-size: 60px; }
  .page-right h3 { margin-bottom: 10px; }
  .page-right .pg-note { margin-top: 14px; padding-top: 12px; }
}

/* =========================================================
   FRAMED PANELS: content sections inset 20px each side
   ========================================================= */
main > section:not(.hero) { margin: 20px; border-radius: 26px; overflow: hidden; border: 1px solid rgba(201,164,92,.38); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
@media (min-width: 961px) { main > section:not(.hero) { min-height: calc(100vh - 40px); } }
@media (max-width: 640px) { main > section:not(.hero) { margin: 12px; border-radius: 18px; } }
main > .flora { margin: 0 20px; border-radius: 6px; }
@media (max-width: 640px) { main > .flora { margin: 0 12px; } }
@media (min-width: 961px) {
  .pages { height: clamp(380px, calc(100vh - 500px), 520px); }
  .storybook .head { margin-bottom: 16px; }
  .sig-art { max-width: min(480px, 56vh); }
  main > section:not(.hero) { padding-top: 88px; padding-bottom: 44px; }
}

/* =========================================================
   OUR AMBIENCE — lanterns, moments, arch stage
   ========================================================= */
.ambience { position: relative; }
.lanterns { position: absolute; inset: 0 0 auto; height: 0; z-index: 2; pointer-events: none; }
.lantern { position: absolute; top: -6px; width: 46px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transform-origin: 50% 0; filter: drop-shadow(0 0 10px rgba(240,180,90,.55)); animation: swing 4.5s ease-in-out infinite alternate; }
.lantern .flame { fill: rgba(255,196,110,.9); stroke: none; filter: drop-shadow(0 0 10px rgba(255,190,90,1)); animation: flicker 1.8s ease-in-out infinite; }
.lantern:nth-child(1) { left: 8%; }
.lantern:nth-child(2) { left: 46%; width: 38px; animation-delay: -1.5s; animation-duration: 5.2s; }
.lantern:nth-child(3) { right: 9%; width: 52px; animation-delay: -3s; }
@keyframes swing { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: .75; } 70% { opacity: .92; } }

.ambience-grid { grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.ambience .muted { max-width: 470px; }
.moments { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 6px; }
.moment { width: 100%; display: flex; align-items: center; gap: 18px; padding: 14px 18px; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 12px; color: var(--cream); transition: background .3s, border-color .3s; position: relative; overflow: hidden; }
.moment i { font: italic 500 26px var(--serif); color: rgba(201,164,92,.55); min-width: 36px; transition: color .3s; }
.moment b { display: block; font: 600 19px var(--serif); }
.moment small { display: block; font: 400 13.5px/1.45 var(--sans); color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .4s, margin .4s; }
.moment:hover { background: rgba(201,164,92,.06); }
.moment.is-active { background: rgba(201,164,92,.1); border-color: rgba(201,164,92,.45); }
.moment.is-active i { color: var(--gold-light); }
.moment.is-active small { max-height: 60px; opacity: 1; margin-top: 3px; }
.moment::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gold); }
.moment.is-active.timing::after { animation: progress 5.5s linear forwards; }
@keyframes progress { to { width: 100%; } }

.amb-stage { position: relative; justify-self: center; width: min(440px, 50vh); }
.amb-arch { position: relative; aspect-ratio: 4 / 5; }
.amb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: url(#arch-clip); opacity: 0; transform: scale(1.08); transition: opacity .9s ease, transform 6s ease; }
.amb-img.is-active { opacity: 1; transform: scale(1); }
.amb-arch > svg { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 10px); overflow: visible; fill: none; z-index: 2; pointer-events: none; }
.amb-arch > svg path { stroke: var(--gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.amb-arch::after { content: ""; position: absolute; inset: 0; clip-path: url(#arch-clip); background: linear-gradient(180deg, transparent 60%, rgba(13,11,8,.75)); z-index: 1; pointer-events: none; }
.amb-caption { position: absolute; z-index: 3; left: 0; right: 0; bottom: 22px; margin: 0; text-align: center; font: italic 500 22px var(--serif); color: var(--gold-light); transition: opacity .3s; }
.amb-caption.swap { opacity: 0; }
.amb-stage .arcade-host { left: -120px; bottom: -44px; height: 56%; z-index: 4; }
@media (max-width: 960px) {
  .ambience-grid { grid-template-columns: 1fr; gap: 40px; }
  .amb-stage { width: min(360px, 82vw); margin-bottom: 30px; }
  .amb-stage .arcade-host { left: -30px; height: 44%; bottom: -30px; }
  .lantern:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lantern, .lantern .flame { animation: none; } }

/* Google rating badge */
.g-rating { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; max-width: 860px; margin: -10px auto 46px; padding: 18px 28px;
  border: 1px solid rgba(201,164,92,.45); border-radius: 18px; background: rgba(13,11,8,.55); }
.g-score { display: flex; align-items: center; gap: 12px; }
.g-num { font: 600 44px/1 var(--serif); color: var(--gold-light); }
.g-stars { position: relative; display: inline-block; font-size: 22px; letter-spacing: 3px; color: rgba(201,164,92,.25); }
.g-stars span { position: absolute; inset: 0; width: calc(var(--r) / 5 * 100%); overflow: hidden; white-space: nowrap; color: var(--gold); }
.g-stars::before { content: "★★★★★"; }
.g-meta b { display: block; font: 600 17px var(--serif); color: var(--cream); }
.g-meta small { font: 500 12px var(--sans); letter-spacing: .08em; color: var(--muted); }
.g-actions { display: flex; gap: 10px; }
@media (min-width: 961px) { #reviews .head { margin-bottom: 26px; } .quote-stage { min-height: 200px; } }
@media (max-width: 640px) { .g-rating { gap: 14px; padding: 16px; } .g-num { font-size: 36px; } .g-actions { width: 100%; justify-content: center; } }

/* =========================================================
   DISTINCT BACKGROUND STYLES PER SECTION
   ========================================================= */
/* Our Story — old ledger paper, sepia */
#story.story-sec { background:
    radial-gradient(ellipse 55% 65% at 28% 45%, rgba(180,128,64,.32), transparent 65%),
    repeating-linear-gradient(0deg, rgba(232,207,148,.045) 0 1px, transparent 1px 36px),
    linear-gradient(90deg, transparent 0 7%, rgba(200,60,50,.10) 7% calc(7% + 1px), transparent calc(7% + 1px)),
    linear-gradient(180deg, #2a1d11, #150e08); }

/* Storybook — Mughal jali wall + wooden table */
.storybook { background:
    radial-gradient(ellipse 34% 40% at var(--lx, 50%) var(--ly, 60%), rgba(232,175,90,.26), transparent 78%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cg fill='none' stroke='%23c9a45c' stroke-opacity='.10' stroke-width='1.2'%3E%3Cpath d='M42 0l42 24v48L42 96 0 72V24z'/%3E%3Cpath d='M42 18l24 14v28L42 74 18 60V32z'/%3E%3Cpath d='M42 18v56M18 32l48 28M66 32L18 60'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #17120c, #0e0b08) !important; }
.storybook::after { background:
    linear-gradient(180deg, rgba(232,190,110,.35) 0, rgba(232,190,110,0) 2px),
    repeating-linear-gradient(92deg, rgba(120,72,30,.32) 0 3px, rgba(70,40,16,.22) 3px 11px, rgba(140,88,40,.26) 11px 13px, rgba(60,34,14,.2) 13px 24px),
    linear-gradient(180deg, #3a2412 0%, #22140a 55%, #0e0805 100%) !important; }

/* Kitchen — hammered copper */
#signature { background:
    radial-gradient(ellipse 55% 70% at 28% 55%, rgba(200,105,45,.34), transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255,190,120,.10) 0 5px, transparent 6px) 0 0 / 24px 24px,
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.25) 0 5px, transparent 6px) 12px 12px / 24px 24px,
    linear-gradient(160deg, #2e170b, #160b05 60%, #0d0704) !important; }

/* Old Dubai — starry night with gold-edged dunes */
.nostalgia { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120Q240 50 520 110T1000 96T1440 70V200H0Z' fill='%23140f09' stroke='%23c9a45c' stroke-opacity='.45' stroke-width='1.5'/%3E%3Cpath d='M0 160Q300 110 640 150T1440 130V200H0Z' fill='%230c0906' stroke='%23c9a45c' stroke-opacity='.3' stroke-width='1.2'/%3E%3C/svg%3E") bottom / 100% 190px no-repeat,
    radial-gradient(circle at 82% 14%, rgba(246,221,143,.22) 0 40px, rgba(246,221,143,.06) 41px 120px, transparent 121px),
    linear-gradient(180deg, #06060a 0%, #0d0b10 60%, #120e0a 100%) !important; }

/* Two Cultures — polished black marble */
#cultures.sec-cultures { background:
    linear-gradient(118deg, transparent 37%, rgba(201,164,92,.22) 38%, rgba(246,221,143,.10) 38.6%, transparent 40%),
    linear-gradient(64deg, transparent 61%, rgba(201,164,92,.16) 62%, transparent 63.5%),
    linear-gradient(152deg, transparent 16%, rgba(255,255,255,.06) 17%, transparent 20%),
    linear-gradient(30deg, transparent 78%, rgba(201,164,92,.12) 79%, transparent 80.2%),
    radial-gradient(ellipse 60% 50% at 70% 70%, rgba(255,255,255,.04), transparent 70%),
    radial-gradient(ellipse 80% 70% at 40% 30%, #26231f, #0c0b0a 75%) !important; }

/* Ambience — wooden slat wall lit by lanterns */
#ambience { background:
    radial-gradient(circle at 10% 2%, rgba(245,180,90,.38), transparent 24%),
    radial-gradient(circle at 48% 0%, rgba(245,180,90,.28), transparent 26%),
    radial-gradient(circle at 90% 2%, rgba(245,180,90,.38), transparent 24%),
    repeating-linear-gradient(90deg, rgba(130,82,38,.20) 0 52px, rgba(0,0,0,.45) 52px 56px),
    linear-gradient(180deg, #24170c, #0f0a06) !important; }

/* Reviews — velvet theatre curtain with spotlight */
#reviews.sec-reviews { background:
    radial-gradient(ellipse 40% 55% at 50% 42%, rgba(255,220,170,.10), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(130,22,34,.30) 45px, rgba(0,0,0,.45) 90px),
    linear-gradient(180deg, #1c0a0c, #0b0506) !important; }

/* Section diamonds a little further in */
.dotnav { right: 46px; }

/* Logo: coin-like rotation */
.site-header .crest img {
  transform-style: preserve-3d; backface-visibility: visible;
  animation: logoIn 1.5s cubic-bezier(.2,.7,.2,1) .2s both, coinIdle 8s ease-in-out 3s infinite;
}
.site-header .brand:hover img { animation: coinHover 1.1s ease-in-out; }
.site-header.scrolled .crest img { animation: coinScroll 1s ease-in-out, coinIdle 8s ease-in-out 3s infinite; }
.site-header.scrolled .brand:hover img { animation: coinHover2 1.1s ease-in-out; }
@keyframes logoIn { from { opacity: 0; transform: perspective(700px) rotateY(-540deg) scale(.6); } to { opacity: 1; transform: perspective(700px) rotateY(0) scale(1); } }
@keyframes coinIdle { 0%, 86% { transform: perspective(700px) rotateY(0); } 100% { transform: perspective(700px) rotateY(360deg); } }
@keyframes coinHover { from { transform: perspective(700px) rotateY(0); } to { transform: perspective(700px) rotateY(360deg); } }
@keyframes coinHover2 { from { transform: perspective(700px) rotateY(0); } to { transform: perspective(700px) rotateY(-360deg); } }
@keyframes coinScroll { from { transform: perspective(700px) rotateY(0); } to { transform: perspective(700px) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .site-header .crest img, .site-header .brand:hover img, .site-header.scrolled .crest img { animation: none; } }

/* =========================================================
   SIMPLE BACKGROUNDS — one soft tone + gentle glow per section
   ========================================================= */
#story.story-sec { background: radial-gradient(ellipse 60% 70% at 25% 40%, rgba(180,128,64,.16), transparent 70%), linear-gradient(180deg, #1d150d, #110c07) !important; }
#story.story-sec::after { display: none; }

.storybook { background: radial-gradient(ellipse 45% 50% at 50% 58%, rgba(222,165,80,.16), transparent 75%), linear-gradient(180deg, #16120d, #0e0b08) !important; }
.storybook::before { display: none; }
.storybook::after { background: linear-gradient(180deg, rgba(201,164,92,.25) 0, rgba(201,164,92,0) 1px), linear-gradient(180deg, #1e140c, #0e0906) !important; height: 26%; }

#signature { background: radial-gradient(ellipse 55% 65% at 28% 55%, rgba(176,90,36,.18), transparent 72%), linear-gradient(180deg, #1e110a, #0f0805) !important; }
#signature::after { display: none; }

.nostalgia { background: radial-gradient(circle at 82% 14%, rgba(246,221,143,.10), transparent 22%), linear-gradient(180deg, #0a0a0d, #110e0a) !important; }
.nostalgia::before, .nostalgia::after { display: none; }

#cultures.sec-cultures { background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255,255,255,.035), transparent 70%), linear-gradient(180deg, #1a1816, #0d0c0b) !important; }

#ambience { background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(245,180,90,.14), transparent 70%), linear-gradient(180deg, #1c130b, #0e0a06) !important; }

#reviews.sec-reviews { background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(150,28,40,.14), transparent 72%), linear-gradient(180deg, #170b0c, #0b0607) !important; }

body { background: #0b0907; }

/* Phones: soft fade behind the floating header so it never sits on top of text */
@media (max-width: 960px) {
  .site-header.scrolled { background: linear-gradient(180deg, rgba(11,9,7,.96) 0%, rgba(11,9,7,.85) 65%, rgba(11,9,7,0) 100%) !important; height: 92px; }
  .g-actions .btn { letter-spacing: .08em; padding: 11px 14px; }
  .ambience .lantern:nth-child(3) { right: 22%; }
}

/* Full characters in Two Cultures and Kind Words */
.worlds { grid-template-columns: 1fr 260px 1fr; }
.worlds-seal { align-self: end; }
.worlds-seal img.worlds-host { width: 100%; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent);
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.6)); }
.quotes { grid-template-columns: 250px 1fr; }
.quotes-host img { width: 100%; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
@media (max-width: 960px) {
  .worlds { grid-template-columns: 1fr; }
  .worlds-seal { order: -1; width: 200px; margin: 0 auto; }
  .quotes { grid-template-columns: 1fr; }
  .quotes-host { width: 200px; margin: 0 auto; }
  .quotes-host img { width: 100%; height: auto; }
}

/* Our Story: large host on the right */
.story-host { position: absolute; z-index: 2; right: clamp(10px, 2.5vw, 44px); bottom: 0; height: min(56%, 470px); width: auto; max-width: none;
  transform: scaleX(-1); filter: drop-shadow(0 18px 32px rgba(0,0,0,.6));
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.story-bubble { left: auto; top: auto; right: clamp(220px, 21vw, 320px); bottom: min(50%, 420px); z-index: 3; font-size: 18px; white-space: nowrap; animation: bob 4s ease-in-out infinite; }
.story-bubble::after { left: auto; right: 30px; }
@media (min-width: 961px) {
  .story-sec > .container { max-width: 1040px; margin-left: clamp(24px, 5vw, 90px); margin-right: auto; }
  .story-engraving { right: -40px; opacity: .16; }
  .story-sun { right: -40px; bottom: 80px; }
}
@media (max-width: 960px) {
  .story-host { position: relative; display: block; right: auto; height: auto; width: 230px; margin: 34px auto -64px; }
  .story-bubble { position: relative; right: auto; bottom: auto; display: table; margin: 20px auto -14px; white-space: normal; text-align: center; }
  .story-bubble::after { left: 50%; right: auto; margin-left: -7px; }
}
@media (min-width: 961px) {
  .story-sec > .container { max-width: min(940px, calc(100% - 420px)); }
  .story-grid { grid-template-columns: .9fr 1fr; gap: 44px; }
  .story-host { height: min(52%, 440px); right: clamp(10px, 2vw, 36px); }
  .story-bubble { right: clamp(30px, 4vw, 70px); bottom: calc(min(52%, 440px) + 12px); }
  .story-bubble::after { right: 60px; }
}
@media (max-width: 960px) {
  .story-sec { display: flex; flex-direction: column; }
  .story-sec > .container { order: 1; }
  .story-sec .story-bubble { order: 2; }
  .story-sec .story-host { order: 3; }
}
@media (min-width: 961px) {
  .story-sec > .container { max-width: min(900px, calc(100% - 480px)); }
  .story-host { height: min(48%, 410px); }
  .story-bubble { bottom: calc(min(48%, 410px) + 12px); }
  .story-sec .statement { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.45; }
  .story-sec .story-grid { margin-top: 22px; }
  .story-sec .collage { height: min(380px, 42vh); }
  .story-sec .story-copy .title { font-size: clamp(30px, 3.2vw, 44px); }
  .story-sec .story-copy > p { font-size: 15px; line-height: 1.65; margin-bottom: 0; }
  .story-sec .promise { margin-top: 16px; gap: 12px 24px; }
  .story-sec .promise h3 { font-size: 17px; }
  .story-sec .promise p { font-size: 13.5px; }
}

/* =========================================================
   GAME: POUR THE PERFECT CUP
   ========================================================= */
#play { background: radial-gradient(ellipse 50% 60% at 70% 50%, rgba(201,164,92,.14), transparent 70%), linear-gradient(180deg, #15110c, #0c0907) !important; }
.play-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.play .muted { max-width: 470px; }
.play-score { display: flex; gap: 14px; margin: 26px 0 22px; }
.play-score > div { flex: 1; max-width: 140px; padding: 14px 16px; border: 1px solid rgba(201,164,92,.4); border-radius: 14px; background: rgba(13,11,8,.5); text-align: center; }
.play-score span { display: block; font: 600 10.5px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.play-score b { font: 600 28px var(--serif); color: var(--cream); }
.play-host { display: flex; align-items: center; gap: 16px; }
.play-host img { width: 74px; height: 74px; border-radius: 50%; border: 1px solid var(--gold); background: #fff; flex: none; transition: transform .3s; }
.play-host.cheer img { animation: cheer .6s ease; }
@keyframes cheer { 30% { transform: translateY(-8px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
.pl-say { position: relative; margin: 0; padding: 12px 18px; border-radius: 14px; background: var(--dark-2); border: 1px solid var(--gold); color: var(--gold-light); font: italic 500 18px var(--serif); }
.pl-say::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; background: var(--dark-2); border-left: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: translateY(-50%) rotate(45deg); }

.play-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pl-scene { width: min(340px, 42vh); height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
.pl-davara { transform-box: fill-box; transform-origin: 20% 50%; transition: transform .35s ease; }
.play.pouring .pl-davara { transform: rotate(-10deg) translateY(-6px); }
.pl-target line { stroke: var(--gold-light); stroke-width: 2; stroke-dasharray: 6 5; filter: drop-shadow(0 0 4px rgba(246,221,143,.9)); }
.pl-pour { min-width: 240px; padding: 18px 30px; font-size: 14px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.play.pouring .pl-pour { transform: scale(.96); filter: brightness(1.1); }
.pl-result { margin: 0; min-height: 1.4em; font: italic 500 20px var(--serif); color: var(--gold-light); text-align: center; }
@media (max-width: 960px) {
  .play-grid { grid-template-columns: 1fr; gap: 30px; }
  .play-score { justify-content: center; }
  .play-host { justify-content: center; }
  .pl-scene { width: min(280px, 70vw); }
}

/* =========================================================
   A DIFFERENT CHARACTER PER SECTION (framed in gold arches)
   ========================================================= */
.char-frame { position: relative; }
.char-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; clip-path: url(#arch-clip); -webkit-mask-image: none; mask-image: none; transform: none; filter: none; }
.char-frame > svg { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 8px); overflow: visible; fill: none; pointer-events: none; }
.char-frame > svg path { stroke: var(--gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.char-frame { filter: drop-shadow(0 20px 34px rgba(0,0,0,.55)); }

/* Our Story */
.story-host.char-frame { position: absolute; right: clamp(20px, 3vw, 52px); bottom: 48px; height: auto; width: min(370px, 26vw); aspect-ratio: 1145 / 1374; transform: none; -webkit-mask-image: none; mask-image: none; }
.story-bubble { bottom: calc(48px + min(370px, 26vw) * 1.2 + 14px) !important; right: clamp(40px, 5vw, 90px) !important; }

/* Old Dubai storyteller */
.guide { width: 290px; }
.guide-art { width: 100%; aspect-ratio: 1 / 1.08; }
.guide-speech { left: 230px; top: 6px; }

/* Two Cultures */
.worlds { grid-template-columns: 1fr 300px 1fr; }
.worlds-art { width: 100%; aspect-ratio: 1 / 1.1; }

/* Ambience medallion */
.amb-host { position: absolute; z-index: 4; left: -96px; bottom: -30px; width: 200px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gold); box-shadow: 0 0 0 7px rgba(13,11,8,.9), 0 0 0 8px rgba(201,164,92,.5), 0 20px 40px rgba(0,0,0,.6); }
.amb-host img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* Game */
.play-face { width: 150px !important; height: 150px !important; border-radius: 50% !important; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--gold) !important;
  box-shadow: 0 0 0 6px rgba(13,11,8,.9), 0 0 0 7px rgba(201,164,92,.45); }

/* Reviews */
.quotes { grid-template-columns: 270px 1fr; }
.quotes-art { width: 100%; aspect-ratio: 1 / 1.1; }

@media (max-width: 960px) {
  .story-host.char-frame { position: relative; right: auto; bottom: auto; width: min(300px, 78vw); margin: 30px auto 0; }
  .story-bubble { bottom: auto !important; right: auto !important; }
  .guide { width: 240px; }
  .guide-speech { left: 140px; top: -16px; }
  .worlds-seal { width: min(260px, 70vw); }
  .amb-host { left: -14px; bottom: -24px; width: 140px; }
  .play-face { width: 110px !important; height: 110px !important; }
  .quotes-host { width: min(240px, 66vw); }
}

/* ===== Kids' Corner ===== */
.play-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; }
.kc-tabs { display: flex; gap: 10px; margin: 26px 0 28px; flex-wrap: wrap; }
.kc-tab { display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; border: 1px solid rgba(201,164,92,.45); background: rgba(13,11,8,.5); color: var(--cream); font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s, transform .25s, border-color .25s; }
.kc-tab b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-light); font-size: 16px; font-weight: 400; transition: inherit; }
.kc-tab:hover { transform: translateY(-2px); border-color: var(--gold); }
.kc-tab.is-active { background: linear-gradient(135deg, #e8c06a, #b98b3a); color: #1a120a; border-color: transparent; box-shadow: 0 8px 22px rgba(201,164,92,.28); }
.kc-tab.is-active b { background: #1a120a; color: var(--gold-light); border-color: #1a120a; }
.kc-tab:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.kc-stage { position: relative; padding: 26px 28px 22px; border: 1px solid rgba(201,164,92,.4); border-radius: 24px; background: radial-gradient(ellipse at 50% 0%, rgba(201,164,92,.12), transparent 65%), rgba(10,8,6,.55); }
.kc-stage::before { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(201,164,92,.22); border-radius: 18px; pointer-events: none; }
.kc-panel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.kc-panel[hidden] { display: none; }
.kc-panel.is-active { animation: kcIn .45s ease both; }
@keyframes kcIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.kc-stats { display: flex; gap: 12px; width: 100%; justify-content: center; }
.kc-stats > div { flex: 1; max-width: 130px; padding: 8px 12px; border: 1px solid rgba(201,164,92,.4); border-radius: 12px; background: rgba(13,11,8,.6); text-align: center; }
.kc-stats span { display: block; font: 600 10px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.kc-stats b { font: 600 22px var(--serif); color: var(--cream); }
.kc-how { margin: 0; font: italic 500 16px var(--serif); color: var(--gold-light); text-align: center; }
.play-stage .pl-scene { width: min(260px, 33vh); }
.play-stage .pl-pour { padding: 15px 30px; }
.play-stage .pl-result { font-size: 18px; }

/* Memory Match */
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(100%, 470px); }
.mm-card { aspect-ratio: 4 / 5; padding: 0; border: 0; background: none; cursor: pointer; perspective: 700px; }
.mm-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.mm-card.flip .mm-inner { transform: rotateY(180deg); }
.mm-back, .mm-face { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--gold); }
.mm-back { display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(201,164,92,.08) 0 6px, transparent 6px 12px), linear-gradient(160deg, #241a10, #0e0a07); box-shadow: inset 0 0 0 4px #0e0a07, inset 0 0 0 5px rgba(201,164,92,.45); }
.mm-back img { width: 56%; height: auto; opacity: .9; }
.mm-face { transform: rotateY(180deg); background: #fff; }
.mm-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.mm-card:hover:not(.flip) .mm-inner { transform: translateY(-4px) rotate(-1.5deg); }
.mm-card.done .mm-face { border-color: var(--gold-light); box-shadow: 0 0 0 2px var(--gold-light), 0 0 18px rgba(246,221,143,.55); }
.mm-card.done .mm-inner { animation: mmWin .6s ease; }
@keyframes mmWin { 50% { transform: rotateY(180deg) scale(1.08); } }
.mm-restart { margin-top: 4px; }

/* Pop the Chef */
.pop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: min(100%, 380px); }
.pop-win { position: relative; aspect-ratio: 1 / 1.05; padding: 0; border: 0; overflow: hidden; cursor: pointer; clip-path: url(#arch-clip); background: radial-gradient(ellipse at 50% 100%, #3a2a17, #120d08 70%); box-shadow: inset 0 -10px 0 rgba(201,164,92,.55); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pop-win::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(180deg, #c9a45c, #7a5a26); }
.pop-win img { position: absolute; left: 8%; width: 84%; height: auto; bottom: 0; transform: translateY(110%); transition: transform .18s ease-out; pointer-events: none; }
.pop-win.up img { transform: translateY(14%); }
.pop-win.hit img { transform: translateY(14%) scale(.85) rotate(-12deg); filter: brightness(1.4); transition: transform .12s; }
.pop-win.hit::before { content: "+1"; position: absolute; z-index: 2; top: 18%; left: 50%; transform: translateX(-50%); font: 700 22px var(--serif); color: var(--gold-light); text-shadow: 0 2px 6px #000; animation: popPlus .6s ease forwards; }
@keyframes popPlus { to { opacity: 0; transform: translate(-50%, -26px); } }
.pop-grid:not(.live) .pop-win { cursor: default; opacity: .75; }

@media (max-width: 900px) {
  .play-grid { grid-template-columns: 1fr; gap: 28px; }
  .kc-tabs { justify-content: center; }
  .kc-side { text-align: center; }
  .kc-stage { padding: 20px 14px 18px; }
  .mm-grid { gap: 8px; }
  .pop-grid { gap: 10px; width: min(100%, 320px); }
}
@media (max-width: 480px) {
  .kc-tab { padding: 8px 12px 8px 8px; font-size: 10.5px; letter-spacing: .1em; }
  .kc-tab b { width: 28px; height: 28px; font-size: 14px; }
  .kc-stats b { font-size: 19px; }
}

/* ===== Cut-out hosts: one pose per section, standing in front of a gold Mughal arch ===== */
.cut-frame { position: relative; isolation: isolate; aspect-ratio: auto !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
.cut-frame > img { position: relative; z-index: 1; display: block; width: 100%; height: auto; clip-path: none !important; border: 0 !important; border-radius: 0 !important; background: none !important; object-fit: contain !important; filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)); transition: transform .5s cubic-bezier(.3,1.4,.5,1); transform-origin: 50% 100%; }
.cut-frame > .cf-arch { position: absolute; z-index: 0; left: 4%; right: 4%; top: 16%; bottom: 0; width: 92%; height: 84%; overflow: visible; fill: rgba(201,164,92,.09); stroke: rgba(232,192,106,.75); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.cut-frame > .cf-arch path { vector-effect: non-scaling-stroke; }
.cut-frame::before { content: ""; position: absolute; z-index: 0; left: 10%; right: 10%; top: 30%; bottom: 0; background: radial-gradient(ellipse at 50% 60%, rgba(232,192,106,.28), transparent 70%); filter: blur(10px); }
.cut-frame:hover > img { transform: translateY(-6px) rotate(-1.5deg); }

/* Story */
.story-host.cut-frame { position: absolute; right: clamp(20px, 3vw, 52px); bottom: 0; width: min(360px, 25vw); }
.story-bubble { bottom: calc(min(360px, 25vw) * 1.23 + 6px) !important; right: clamp(40px, 5vw, 90px) !important; }
/* Experience */
#experience { position: relative; }
.book-host.cut-frame { position: absolute; z-index: 6; left: clamp(10px, 1.6vw, 30px); bottom: 0; width: min(270px, 18vw); }
.book-host.cut-frame > .cf-arch { display: none; }
/* Kitchen */
.sig-host { width: 86%; }
/* Old Dubai */
.guide-art.cut-frame { width: 100%; }
/* Two cultures */
.worlds-art.cut-frame { width: 100%; }
/* Ambience */
.amb-host.cut-frame { left: -150px; bottom: -40px; width: 250px; }
/* Kids' Corner */
.play-face { width: 170px !important; height: auto !important; border-radius: 0 !important; border: 0 !important; background: none !important; object-fit: contain !important; filter: drop-shadow(0 14px 20px rgba(0,0,0,.5)); }
/* Reviews */
.quotes-art.cut-frame { width: 100%; }

@media (max-width: 900px) {
  .story-host.cut-frame { position: relative; right: auto; width: min(280px, 72vw); margin: 20px auto 0; }
  .story-bubble { bottom: auto !important; }
  .book-host.cut-frame { position: relative; left: auto; width: min(220px, 60vw); margin: 0 auto -6px; }
  .amb-host.cut-frame { left: -10px; bottom: -30px; width: 150px; }
  .play-face { width: 120px !important; }
}
.cut-frame > img, .play-face { box-shadow: none !important; outline: 0 !important; }
.amb-host.cut-frame { position: absolute; z-index: 4; left: -92px; bottom: -34px; width: 200px; }
.quotes { grid-template-columns: 220px 1fr; }
.quotes-art.cut-frame { width: 205px; margin: 0 auto; }
#experience .book { max-width: 900px; margin-left: auto; margin-right: auto; }
.book-host.cut-frame { width: min(250px, 17vw); }
@media (max-width: 900px) {
  .amb-host.cut-frame { left: -10px; bottom: -30px; width: 140px; }
  .quotes { grid-template-columns: 1fr; }
}
.amb-host.cut-frame > .cf-arch { display: none; }
@media (max-width: 900px) {
  .book-host.cut-frame { width: min(210px, 56vw); }
  .amb-host.cut-frame { left: auto; right: -8px; bottom: -34px; width: 130px; }
}
@media (max-width: 900px) {
  .amb-host.cut-frame { position: relative; left: auto; right: auto; bottom: auto; width: 170px; margin: -14px auto -20px; }
}
@media (max-width: 900px) {
  .amb-caption { position: static; margin-top: 14px; }
  .amb-host.cut-frame { margin-top: 6px; }
}

/* Catch the Sweets */
.ct-wrap { position: relative; width: min(100%, 470px); border-radius: 18px; overflow: hidden; border: 1px solid rgba(201,164,92,.5); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.ct-canvas { display: block; width: 100%; height: auto; aspect-ratio: 480 / 400; touch-action: none; cursor: none; outline: none; }
.ct-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-light); }
.ct-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; background: rgba(10,8,6,.62); backdrop-filter: blur(2px); pointer-events: none; text-align: center; }
.ct-overlay[hidden] { display: none; }
.ct-msg { margin: 0; font: italic 600 24px var(--serif); color: var(--gold-light); }
.ct-key { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; font: 600 12px var(--sans); letter-spacing: .12em; color: var(--cream); }
.ct-key li { display: flex; align-items: center; gap: 6px; }
.ct-key i { display: inline-block; width: 18px; height: 18px; border-radius: 50%; }
.k-laddoo { background: radial-gradient(circle at 35% 30%, #ffd27a, #d97a12); }
.k-jalebi { background: radial-gradient(circle, transparent 3px, #f39a1e 3.5px, #f39a1e 5.5px, transparent 6px, transparent 7px, #f39a1e 7.5px); }
.k-cup { border-radius: 2px 2px 5px 5px !important; width: 14px !important; background: linear-gradient(90deg, #9a9488, #f1eee7, #8b857a); box-shadow: 0 0 8px rgba(246,221,143,.9); }
.k-chilli { border-radius: 60% 40% 60% 40% !important; height: 10px !important; background: linear-gradient(90deg, #8e0f0f, #e5261d); transform: rotate(-20deg); }
.ct-lives { color: var(--gold-light) !important; letter-spacing: .1em; }
@media (max-width: 480px) { .ct-msg { font-size: 19px; } .ct-key { gap: 10px; font-size: 10.5px; } }

/* ===== Big hosts: a large character standing on the bottom edge of every panel ===== */
main > section { position: relative; }
.big-host { position: absolute; z-index: 3; bottom: 0; height: var(--bh, min(620px, calc(100vh - 260px))); pointer-events: none; }
.big-host > * { pointer-events: auto; }
.bh-left { left: clamp(16px, 2.4vw, 44px); }
.bh-right { right: clamp(56px, 5vw, 84px); }
.bh-center { left: 50%; translate: -50% 0; }
.big-host .cut-frame { position: relative !important; inset: auto !important; width: auto !important; height: 100% !important; margin: 0 !important; }
.big-host .cut-frame > img { width: auto !important; height: 100% !important; max-width: none; }
.big-host .cut-frame > .cf-arch { display: block; top: 22%; height: 78%; }
.big-host .cut-frame:hover > img { transform: translateY(-8px) rotate(-1deg); }
.big-host .speech, .big-host .pl-say { position: absolute; z-index: 5; white-space: nowrap; }
/* story */
.big-host .story-bubble { top: 4% !important; bottom: auto !important; right: 78% !important; left: auto !important; }
/* heritage guide */
.big-host .guide { position: relative !important; inset: auto !important; width: auto !important; height: 100%; }
.big-host .guide-speech { top: 3% !important; left: 72% !important; }
/* kids */
.big-host .play-host { display: block; position: relative; height: 100%; }
.big-host .play-face { width: auto !important; height: 100% !important; max-width: none; }
.big-host .pl-say { top: 3%; right: 82%; }
.big-host .pl-say::before { left: auto; right: -7px; transform: translateY(-50%) rotate(225deg); }

@media (min-width: 901px) {
  #story .container { padding-right: min(500px, 34vw); }
  #story { --bh: min(600px, calc(100vh - 300px)); }
  #experience { --bh: min(520px, calc(100vh - 340px)); }
  #experience .book { max-width: 820px; margin-left: auto; margin-right: 0; }
  #heritage .container { padding-left: min(470px, 32vw); }
  #heritage { --bh: min(600px, calc(100vh - 280px)); }
  .worlds { grid-template-columns: 1fr min(440px, 30vw) 1fr !important; }
  .worlds-seal { visibility: hidden; }
  #cultures { --bh: min(600px, calc(100vh - 280px)); }
  #ambience .container { padding-right: min(430px, 30vw); }
  #ambience { --bh: min(580px, calc(100vh - 300px)); }
  #play .container { padding-right: min(400px, 27vw); }
  #play { --bh: min(560px, calc(100vh - 320px)); }
  .quotes { grid-template-columns: 1fr !important; padding-left: min(400px, 27vw); }
  .quotes-host { display: none; }
  #reviews { --bh: min(560px, calc(100vh - 320px)); }
}
@media (max-width: 900px) {
  .big-host { position: relative; inset: auto; translate: none; height: auto; width: min(300px, 78vw); margin: 26px auto -56px; }
  .big-host .cut-frame, .big-host .guide, .big-host .play-host { height: auto !important; width: 100% !important; }
  .big-host .cut-frame > img, .big-host .play-face { width: 100% !important; height: auto !important; }
  .big-host .speech, .big-host .pl-say { white-space: normal; }
  .big-host .story-bubble, .big-host .pl-say { top: -6px !important; right: 54% !important; max-width: 170px; font-size: 15px; }
  .big-host .guide-speech { top: -6px !important; left: 56% !important; max-width: 170px; font-size: 15px; }
}
@media (min-width: 901px) {
  #story .container, #heritage .container, #ambience .container, #play .container { width: auto !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  #story .container { margin-left: clamp(30px, 4.5vw, 72px); margin-right: calc(var(--bh) * .81 + 110px); }
  #heritage .container { margin-left: calc(var(--bh) * .81 + 70px); margin-right: clamp(60px, 6vw, 96px); }
  #ambience .container { margin-left: clamp(30px, 4.5vw, 72px); margin-right: calc(var(--bh) * .77 + 110px); }
  #ambience .amb-stage { width: min(400px, 46vh); }
  #play .container { margin-left: clamp(30px, 4.5vw, 72px); margin-right: calc(var(--bh) * .69 + 110px); }
}
@media (min-width: 901px) {
  /* Old Dubai: 2x2 compact stamps beside the big host */
  #heritage .stamps { grid-template-columns: repeat(2, 1fr) !important; gap: 14px 18px; }
  #heritage .stamp-in { display: grid !important; grid-template-columns: 50px 1fr; column-gap: 16px; align-items: start; text-align: left !important; padding-top: 16px !important; padding-bottom: 16px !important; }
  #heritage .stamp-in svg { grid-row: 1 / span 3; width: 50px !important; height: 50px !important; margin: 0 !important; }
  #heritage .stamp-in .era, #heritage .stamp-in h3, #heritage .stamp-in p { grid-column: 2; margin-left: 0 !important; margin-right: 0 !important; }
  #heritage .stamp-in h3 { margin-top: 2px !important; margin-bottom: 4px !important; }
  #heritage .stamp-in p { margin: 0 !important; }
  /* Ambience */
  #ambience { --bh: min(540px, calc(100vh - 320px)); }
  #ambience .ambience-grid { gap: 44px !important; grid-template-columns: 1fr auto !important; }
  #ambience .amb-stage { width: min(350px, 40vh); }
  /* Reviews: content beside the host */
  #reviews .container { width: auto !important; max-width: none !important; padding: 0 !important; margin-left: calc(var(--bh) * .7 + 60px); margin-right: clamp(60px, 6vw, 96px); }
  .quotes { padding-left: 0 !important; }
  /* Kids: bubble above the chef's head */
  .big-host .pl-say { top: -64px; right: 14%; white-space: normal; width: max-content; max-width: 250px; }
  .big-host .pl-say::before { left: 70%; right: auto; top: auto; bottom: -7px; transform: rotate(-45deg); border-left: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
}
@media (min-width: 901px) {
  #heritage .stamp-line { display: none; }
  #heritage .head { margin-bottom: 8px !important; }
  #heritage .skyline-wrap { margin-top: 0 !important; margin-bottom: 14px !important; }
  #heritage .stamp-in { padding-top: 12px !important; padding-bottom: 12px !important; }
  #heritage .stamp-in p { font-size: 13.5px !important; line-height: 1.5 !important; }
}
@media (min-width: 901px) {
  #heritage { padding-top: 74px !important; }
  #signature .sig-grid { align-items: end; }
  #signature .sig-art { align-self: end; margin-bottom: -44px; }
  #signature .sig-host { width: 104%; }
}
@media (max-width: 900px) { .big-host { order: 99; } }
/* hi-res mascots: content offsets follow each pose's width */
@media (min-width: 901px) {
  #story .container { margin-right: calc(var(--bh) * .77 + 110px); }
  #heritage .container { margin-left: calc(var(--bh) * .74 + 70px); }
  #ambience .container { margin-right: calc(var(--bh) * .75 + 110px); }
  #play .container { margin-right: calc(var(--bh) * .73 + 110px); }
  #reviews .container { margin-left: calc(var(--bh) * .82 + 60px); }
}
@media (min-width: 901px) { #heritage { padding-top: 72px !important; } }
@media (min-width: 901px) { #reviews .container { margin-left: calc(var(--bh) * .75 + 60px); } }
/* smaller hosts: whole image visible inside its area */
@media (min-width: 901px) {
  #story { --bh: min(510px, calc(100vh - 360px)); }
  #experience { --bh: min(440px, calc(100vh - 400px)); }
  #heritage { --bh: min(510px, calc(100vh - 360px)); }
  #cultures { --bh: min(520px, calc(100vh - 360px)); }
  #ambience { --bh: min(470px, calc(100vh - 380px)); }
  #play { --bh: min(470px, calc(100vh - 390px)); }
  #reviews { --bh: min(480px, calc(100vh - 380px)); }
  .big-host { bottom: 24px; }
  .big-host .cut-frame > .cf-arch { bottom: -24px; height: calc(78% + 24px); }
  #signature .sig-art { margin-bottom: 0; }
  #signature .sig-host { width: 88%; }
}

/* ===== Full mascot pictures in a white Mughal-arch window (no cut-outs) ===== */
.photo-arch { position: relative !important; inset: auto !important; display: block; aspect-ratio: 3 / 5 !important; width: auto; height: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; background: #fefefe !important; clip-path: url(#arch-clip); translate: none; }
.photo-arch > img { position: absolute !important; z-index: 1; left: 0 !important; right: 0; bottom: 0 !important; top: auto !important; width: 100% !important; height: auto !important; max-width: none; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; clip-path: none !important; filter: none !important; object-fit: contain; transition: transform .6s ease; transform-origin: 50% 100%; }
.photo-arch::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 58%, transparent 62%, rgba(201,164,92,.30) 100%); }
.photo-arch > .pa-line { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--gold); stroke-width: 6; vector-effect: non-scaling-stroke; pointer-events: none; }
.photo-arch > .pa-line path { vector-effect: non-scaling-stroke; }
.photo-arch:hover > img { transform: scale(1.03); }
.big-host .photo-arch { height: 100% !important; width: auto !important; }
.big-host { filter: drop-shadow(0 22px 34px rgba(0,0,0,.55)); }
.play-host .photo-arch { flex: none; }

/* signature: the full picture replaces the old cut-out inside the sunburst */
#signature .sig-window, #signature .steam { display: none !important; }
#signature .sig-photo { position: absolute !important; left: 50% !important; bottom: 0 !important; height: 100%; width: auto; translate: -50% 0; z-index: 2; filter: drop-shadow(0 22px 34px rgba(0,0,0,.55)); }

@media (min-width: 901px) {
  #story { --bh: min(600px, calc(100vh - 290px)); }
  #experience { --bh: min(520px, calc(100vh - 340px)); }
  #heritage { --bh: min(600px, calc(100vh - 290px)); }
  #cultures { --bh: min(600px, calc(100vh - 290px)); }
  #ambience { --bh: min(560px, calc(100vh - 320px)); }
  #play { --bh: min(560px, calc(100vh - 320px)); }
  #reviews { --bh: min(560px, calc(100vh - 320px)); }
  #story .container { margin-right: calc(var(--bh) * .6 + 120px); }
  #heritage .container { margin-left: calc(var(--bh) * .6 + 80px); }
  #ambience .container { margin-right: calc(var(--bh) * .6 + 120px); }
  #play .container { margin-right: calc(var(--bh) * .6 + 120px); }
  #reviews .container { margin-left: calc(var(--bh) * .6 + 80px); }
  .worlds { grid-template-columns: 1fr min(400px, 28vw) 1fr !important; }
}
@media (max-width: 900px) {
  .big-host { width: min(260px, 70vw); }
  .big-host .photo-arch, .play-host .photo-arch { width: 100% !important; height: auto !important; }
  #signature .sig-photo { height: 100%; }
}
/* no gap: pictures stand directly on the panel's bottom edge */
@media (min-width: 901px) {
  .big-host { bottom: 0 !important; }
  #signature .sig-art { margin-bottom: -44px !important; }
}
@media (min-width: 901px) { #signature .sig-art { margin-bottom: -65px !important; } }
@media (max-width: 900px) {
  .big-host { margin-bottom: -65px; }
  #heritage .big-host { margin-bottom: -75px; }
  .big-host .guide-speech { top: -34px !important; left: auto !important; right: -10px !important; bottom: auto !important; width: max-content !important; height: auto !important; min-height: 0 !important; max-width: 190px; padding: 8px 14px !important; }
}

/* ===== Free-standing chefs: no border, no background ===== */
.figure-host { position: relative !important; inset: auto !important; display: block; width: auto; height: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; clip-path: none !important; aspect-ratio: auto !important; translate: none; }
.figure-host > img { position: static !important; display: block; width: auto !important; height: 100% !important; max-width: none; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; clip-path: none !important; object-fit: contain; filter: drop-shadow(0 20px 28px rgba(0,0,0,.5)) !important; transition: transform .5s cubic-bezier(.3,1.4,.5,1); transform-origin: 50% 100%; }
.figure-host:hover > img { transform: translateY(-6px) rotate(-1deg); }
.big-host { filter: none; }
.big-host .figure-host { height: 100% !important; width: auto !important; }
#signature .sig-photo { filter: none; }
@media (min-width: 901px) {
  #story .container { margin-right: calc(var(--bh) * .78 + 110px); }
  #heritage .container { margin-left: calc(var(--bh) * .76 + 70px); }
  #ambience .container { margin-right: calc(var(--bh) * .76 + 110px); }
  #play .container { margin-right: calc(var(--bh) * .74 + 110px); }
  #reviews .container { margin-left: calc(var(--bh) * .74 + 60px); }
  .worlds { grid-template-columns: 1fr min(440px, 30vw) 1fr !important; }
  #story { --bh: min(560px, calc(100vh - 330px)); }
  #heritage { --bh: min(560px, calc(100vh - 330px)); }
  #cultures { --bh: min(560px, calc(100vh - 330px)); }
  #ambience { --bh: min(520px, calc(100vh - 360px)); }
  #play { --bh: min(520px, calc(100vh - 360px)); }
  #reviews { --bh: min(520px, calc(100vh - 360px)); }
}
@media (max-width: 900px) {
  .big-host { width: min(290px, 76vw); }
  .big-host .figure-host, .play-host .figure-host { width: 100% !important; height: auto !important; }
  .big-host .figure-host > img, .play-host .figure-host > img { width: 100% !important; height: auto !important; }
}
@media (min-width: 901px) { #heritage { padding-top: 68px !important; } }
@media (min-width: 901px) { #signature .sig-photo { height: 125% !important; } }
@media (min-width: 901px) { #signature .sig-photo { height: 108% !important; } }
@media (min-width: 901px) { #story { --bh: min(530px, calc(100vh - 360px)); } #story .container { margin-right: calc(var(--bh) * .87 + 100px); } }
@media (min-width: 901px) { .big-host .story-bubble { top: -58px !important; right: 36% !important; } }
/* show every chef exactly as supplied: no mirroring, no fades */
.figure-host, .figure-host > img { transform: none; -webkit-mask-image: none !important; mask-image: none !important; }
.story-host.figure-host { transform: none !important; }
.figure-host:hover > img { transform: translateY(-6px) rotate(-1deg); }
@media (min-width: 901px) { #experience { --bh: min(430px, calc(100vh - 430px)); } }
@media (min-width: 901px) {
  #heritage { --bh: min(500px, calc(100vh - 390px)); }
  #heritage .container { margin-left: calc(var(--bh) * .86 + 70px); }
  #ambience .container { margin-right: calc(var(--bh) * .74 + 110px); }
}
@media (min-width: 901px) { #cultures { --bh: min(500px, calc(100vh - 390px)); } .worlds { grid-template-columns: 1fr min(470px, 32vw) 1fr !important; } }
@media (min-width: 901px) { #ambience .container { margin-right: calc(var(--bh) * .78 + 110px); } #reviews .container { margin-left: calc(var(--bh) * .74 + 60px); } }
@media (min-width: 901px) { #play { --bh: min(500px, calc(100vh - 380px)); } #play .container { margin-right: calc(var(--bh) * .83 + 100px); } }
@media (min-width: 901px) { #reviews { --bh: min(470px, calc(100vh - 410px)); } #reviews .container { margin-left: calc(var(--bh) * .96 + 50px); } }
/* alternate sides: hero L · story R · experience L · kitchen R · old dubai L · cultures C · ambience R · kids L · reviews R */
@media (min-width: 901px) {
  #signature .sig-grid { grid-template-columns: 1.05fr 1fr !important; }
  #signature .sig-art { order: 2; }
  #play .container { margin-left: calc(var(--bh) * .83 + 90px) !important; margin-right: clamp(60px, 6vw, 96px) !important; }
  #reviews .container { margin-left: clamp(60px, 6vw, 96px) !important; margin-right: calc(var(--bh) * .96 + 110px) !important; }
}
/* phones: stacked layouts, every chef at the bottom of his section */
@media (max-width: 900px) {
  .worlds { grid-template-columns: 1fr !important; gap: 22px; }
  .worlds-seal { display: none !important; }
  #signature .sig-art { order: 2; margin: 24px auto -65px !important; }
}
/* phone banner: bigger welcoming chef */
@media (max-width: 640px) {
  .hero .hero-content { padding: 168px 18px 392px !important; }
  .hero .hero-character { height: 382px !important; left: -38px !important; bottom: 0 !important; }
  .hero .speech { left: auto !important; right: 14px !important; bottom: 262px !important; top: auto !important; }
}

/* ===== Phone: call + WhatsApp fixed to the bottom of the screen ===== */
.m-actions { display: none; }
@media (max-width: 768px) {
  .m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(13,11,8,.92), #0d0b08); border-top: 1px solid rgba(201,164,92,.45); box-shadow: 0 -10px 30px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .m-act { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 999px; font: 700 13px var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: transform .15s, filter .15s; }
  .m-act:active { transform: scale(.97); }
  .m-act svg { width: 20px; height: 20px; flex: none; }
  .m-call { color: var(--gold-light); border: 1px solid var(--gold); background: rgba(201,164,92,.08); }
  .m-call svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
  .m-wa { color: #1a120a; background: linear-gradient(135deg, #f0cd7c, #c9a45c); border: 1px solid transparent; }
  .m-wa svg { fill: currentColor; }
  /* hide the duplicates on phones */
  .wa-float, .site-header .call-btn { display: none !important; }
  /* keep the page end clear of the bar */
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.menu-open .m-actions { opacity: 0; pointer-events: none; }
}
/* phone banner fits exactly one screen */
@media (max-width: 640px) {
  .hero .hero-content { padding: 150px 18px 372px !important; }
  .hero .hero-character { height: 366px !important; }
  .hero .speech { bottom: 250px !important; }
}
/* phones: no stamp in the banner, bigger logo */
@media (max-width: 640px) {
  .hero-postmark { display: none !important; }
  .site-header .crest img { height: 96px !important; width: auto !important; }
  .site-header.scrolled .crest img { height: 72px !important; }
  .hero .hero-content { padding-top: 158px !important; }
}
/* phones: logo sits on the left from the start */
@media (max-width: 640px) {
  .site-header .brand.crest, .site-header.scrolled .brand.crest { left: 16px !important; transform: none !important; top: 8px !important; }
}
.drawer.open .drawer-links a:nth-child(8) { transition-delay: .35s; } .drawer.open .drawer-links a:nth-child(9) { transition-delay: .4s; }

/* ===== Phone menu ===== */
@media (max-width: 640px) {
  .drawer { padding: 122px 22px calc(26px + env(safe-area-inset-bottom)) !important; align-items: flex-start !important; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .drawer-inner { gap: 22px !important; }
  .drawer-links a { font-size: 22px !important; padding: 10px 0 !important; gap: 14px; }
  .drawer-links a i { font-size: 13px; min-width: 24px; }
  .drawer-links a.active { padding-left: 8px; }
  .drawer-side { display: grid !important; grid-template-columns: 84px 1fr; align-items: center; gap: 6px 16px !important; text-align: left !important; padding: 16px; border: 1px solid rgba(201,164,92,.35); border-radius: 18px; background: rgba(201,164,92,.06); }
  .drawer-side img { grid-row: 1 / span 2; width: 84px !important; height: 84px; object-fit: cover; object-position: 50% 8%; border-radius: 50%; border: 1px solid var(--gold); background: rgba(13,11,8,.6); -webkit-mask-image: none !important; mask-image: none !important; }
  .drawer-tag { font-size: 19px !important; align-self: end; }
  .drawer-phone { align-self: start; font-size: 12px !important; color: var(--gold) !important; }
  .drawer-side .btn { grid-column: 1 / -1; width: 100% !important; margin-top: 10px !important; justify-content: center; }
}
@media (max-width: 640px) {
  .drawer { padding-top: 128px !important; }
  .drawer-side .drawer-tag { grid-column: 2; grid-row: 1; }
  .drawer-side .drawer-phone { grid-column: 2; grid-row: 2; white-space: nowrap; }
  .drawer-side .btn { grid-row: 3; }
}
/* phone menu: dark band behind logo + close button so scrolled links never slide under them */
@media (max-width: 640px) {
  body.menu-open .header-inner::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 118px; pointer-events: none; background: linear-gradient(180deg, #0d0b08 0%, #0d0b08 80%, rgba(13,11,8,0) 100%); }
}
@media (max-width: 640px) { body.menu-open .site-header .nav-toggle { position: relative; z-index: 1; } }

/* ===== Bottom bar: Call · Play · WhatsApp ===== */
@media (max-width: 768px) {
  .m-actions { grid-template-columns: 1fr 64px 1fr !important; gap: 8px !important; align-items: center; }
  .m-play { position: relative; flex-direction: column; gap: 1px; width: 64px; height: 64px; margin-top: -22px; border-radius: 50%; padding: 0; color: #1a120a; background: radial-gradient(circle at 35% 30%, #f6dd8f, #c9a45c 70%); border: 3px solid #0d0b08; box-shadow: 0 0 0 1px var(--gold), 0 8px 20px rgba(0,0,0,.5); font-size: 9px; letter-spacing: .14em; }
  .m-play svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .m-play svg circle { fill: currentColor; stroke: none; }
  .m-play::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(246,221,143,.55); animation: playPulse 2.4s ease-out infinite; }
  @keyframes playPulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
  .m-act { letter-spacing: .12em; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .m-play::after { animation: none; } }

/* ===== Footer ===== */
.footer-dir { display: none; }
@media (max-width: 768px) {
  .site-footer .footer-row { gap: 22px; }
  .footer-logo { width: 120px !important; height: auto; }
  .footer-info h2 { font-size: 26px !important; }
  .footer-contact { display: grid; gap: 10px; margin: 18px 0 0 !important; padding: 0; }
  .footer-contact li { display: flex !important; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(201,164,92,.3); border-radius: 14px; background: rgba(201,164,92,.05); text-align: left; justify-content: flex-start !important; }
  .footer-contact li .ico { width: 34px; height: 34px; padding: 8px; flex: none; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-light); }
  .footer-contact li a { font-size: 14.5px; line-height: 1.35; }
  .footer-dir { display: flex; justify-content: center; width: 100%; margin-top: 12px; height: 48px; align-items: center; }
  .socials { gap: 14px !important; justify-content: center; }
  .socials a { width: 46px !important; height: 46px !important; display: grid !important; place-items: center; border-radius: 50%; border: 1px solid rgba(201,164,92,.55); }
  .socials svg { width: 20px; height: 20px; }
  .footer-nav { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 8px !important; width: 100%; margin-top: 18px; }
  .footer-nav a:not(.btn) { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 4px; border: 1px solid rgba(201,164,92,.22); border-radius: 12px; font-size: 12.5px; text-align: center; line-height: 1.2; }
  .footer-nav .btn { display: none !important; }   /* the bottom bar already has WhatsApp */
  .footer-bottom p a { display: inline-block; padding: 10px 6px; }
}
@media (max-width: 768px) {
  .footer-nav { display: flex !important; flex-wrap: wrap; justify-content: center; }
  .footer-nav a:not(.btn) { flex: 0 0 calc(33.333% - 6px); }
  .site-footer .socials a { border: 1px solid rgba(201,164,92,.6) !important; background: rgba(201,164,92,.06) !important; color: var(--gold-light) !important; }
}
.footer-bottom .container { justify-content: center !important; text-align: center; } .footer-bottom p { display: block !important; margin: 0; text-align: center; }
/* phone games: use the full width */
@media (max-width: 640px) {
  #play .kc-stage { margin-left: -12px; margin-right: -12px; padding: 16px 10px 16px !important; }
  #play .kc-stage::before { inset: 5px; }
  #play .ct-wrap, #play .mm-grid { width: 100% !important; }
  #play .pop-grid { width: min(100%, 330px) !important; }
  #play .kc-stats > div { padding: 6px 8px; }
  #play .kc-how { font-size: 15px; }
  #play .ct-start, #play .pop-start, #play .mm-restart { min-width: 200px; min-height: 48px; }
}

/* ===== Phone storybook: steady height, arrows on the picture, bigger dots ===== */
@media (max-width: 640px) {
  #experience .book { position: relative; }
  #experience .pages { display: grid !important; height: auto !important; }
  #experience .spread { display: grid !important; grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; animation: none; }
  #experience .spread.is-active { opacity: 1; visibility: visible; pointer-events: auto; animation: pageIn .6s ease; }
  #experience .page-left { padding-bottom: 6px !important; }
  #experience .page-left .folio { display: none; }
  #experience .pg-figure img { max-height: 200px; width: auto; max-width: 100%; margin-inline: auto; }
  #experience .page-right { padding-top: 10px !important; }
  #experience .pg-num { font-size: 34px !important; line-height: 1; }
  #experience .page-right h3 { font-size: 25px !important; margin: 4px 0 8px !important; }
  #experience .page-right p { font-size: 15px; line-height: 1.6; }
  #experience .pg-note { font-size: 17px !important; margin-top: 12px !important; padding-top: 12px !important; }
  /* arrows sit on either side of the picture so they are always in view */
  #experience .book-nav .book-btn { position: absolute; z-index: 8; top: 128px; width: 44px; height: 44px; font-size: 26px; background: rgba(13,11,8,.78); border: 1px solid var(--gold); color: var(--gold-light); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
  #experience .book-nav .book-btn.prev { left: -6px; }
  #experience .book-nav .book-btn.next { right: -6px; }
  #experience .book-nav .book-btn:disabled { opacity: .35; }
  #experience .book-nav { justify-content: center; margin-top: 14px !important; }
  #experience .book-dots { gap: 4px !important; }
  #experience .book-dots button { width: 30px !important; height: 30px !important; background-clip: content-box !important; padding: 8px !important; }
  #experience .book-progress::after { content: "Swipe to turn the page"; display: block; margin-top: 4px; font: italic 500 14px var(--serif); color: var(--muted); letter-spacing: .02em; }
}
@media (max-width: 640px) {
  #experience .book-dots { gap: 18px !important; }
  #experience .book-dots button { width: 14px !important; height: 14px !important; padding: 0 !important; background-clip: border-box !important; position: relative; }
  #experience .book-dots button::after { content: ""; position: absolute; inset: -10px; }   /* 34px invisible tap area */
}

/* ===== Phone Old Dubai: all four stories visible, easier skyline taps ===== */
@media (max-width: 640px) {
  #heritage .stamps { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; scroll-snap-type: none !important; }
  #heritage .stamps .stamp { flex: none !important; width: 100% !important; }
  #heritage .stamp-in { display: grid !important; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: start; text-align: left !important; padding: 16px 16px !important; min-height: 0 !important; }
  #heritage .stamp-in svg { grid-row: 1 / span 3; width: 46px !important; height: 46px !important; margin: 2px 0 0 !important; }
  #heritage .stamp-in .era, #heritage .stamp-in h3, #heritage .stamp-in p { grid-column: 2; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
  #heritage .stamp-in .era { font-size: 10.5px; }
  #heritage .stamp-in h3 { font-size: 20px !important; margin: 3px 0 5px !important; }
  #heritage .stamp-in p { font-size: 14px !important; line-height: 1.55 !important; margin: 0 !important; }
  #heritage .stamp::before, #heritage .stamp::after { display: none; }      /* drop the empty postmark circle */
  #heritage .hotspot::after { content: ""; position: absolute; inset: -10px; }
  #heritage .skyline-wrap { margin-bottom: 30px !important; position: relative; }
  #heritage .skyline-wrap::after { content: "Tap the lights to explore"; position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; font: italic 500 14px var(--serif); color: var(--muted); }
}
@media (max-width: 640px) { #heritage .stamp-in::after { display: none !important; } }

/* ===== Phone Ambience: photo first, moments below it, swipeable photo ===== */
@media (max-width: 640px) {
  #ambience .ambience-grid { display: flex !important; flex-direction: column; gap: 0 !important; }
  #ambience .ambience-grid > .reveal:first-child { display: contents; }
  #ambience .ambience-grid .label { order: 1; }
  #ambience .ambience-grid .orn { order: 2; }
  #ambience .ambience-grid .title { order: 3; }
  #ambience .ambience-grid .muted { order: 4; margin-bottom: 22px; }
  #ambience .amb-stage { order: 5; width: min(300px, 82vw) !important; margin: 0 auto 6px !important; touch-action: pan-y; }
  #ambience .amb-caption { margin: 10px 0 4px !important; }
  #ambience .amb-stage::after { content: "Swipe the photo or tap a moment"; display: block; text-align: center; font: italic 500 13px var(--serif); color: var(--muted); }
  #ambience .moments { order: 6; margin-top: 16px !important; }
  #ambience .moment { padding: 12px 14px !important; min-height: 52px; }
}

/* ===== Phone Reviews ===== */
@media (max-width: 640px) {
  #reviews .g-rating { padding: 20px 18px !important; text-align: center; }
  #reviews .g-score { justify-content: center; }
  #reviews .g-meta { text-align: center; }
  #reviews .g-meta small { display: block; line-height: 1.45 !important; margin-top: 4px; }
  #reviews .g-actions { display: grid !important; grid-template-columns: 1fr; gap: 10px; width: 100%; margin-top: 16px; }
  #reviews .g-actions .btn { width: 100%; justify-content: center; white-space: nowrap; min-height: 48px; letter-spacing: .14em; }
  #reviews .quote-stage { touch-action: pan-y; }
  #reviews .quote-stage::before, #reviews .quotes::before { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }
  #reviews .quote-dots { gap: 18px !important; }
  #reviews .quote-dots button { position: relative; }
  #reviews .quote-dots button::after { content: ""; position: absolute; inset: -10px; }
  #reviews .quote-dots::after { content: "Swipe for more"; display: block; width: 100%; margin-top: 8px; text-align: center; font: italic 500 13px var(--serif); color: var(--muted); }
  #reviews .quote-dots { flex-wrap: wrap; justify-content: center; }
}