/* Little Nuri, revision 3: loud editorial cafe site.
   Condensed Bricolage capitals, Nuri stickers over the type, colour blocks,
   a rotating badge and marquees. Palette measured from the Nuri SVGs. */
:root {
  --ink: #1a1a4e;
  --ink-2: #4a4a78;
  --cream: #f6efe6;
  --paper: #fffaf3;
  --white: #ffffff;
  --sun: #f2cc05;
  --sun-soft: #fbe9a0;
  --coral: #e8506e;
  --coral-deep: #c9355a;
  --coral-soft: #f9d3db;
  --sky: #6bb5e0;
  --sky-deep: #2f6fb0;
  --sky-soft: #cfe6f6;
  --olive: #8b9a46;
  --olive-soft: #e3e8c4;
  --focus: #2f6fb0;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --text: "Readex Pro", system-ui, sans-serif;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --r: 28px;
  --pad: 14px;
  --r-in: calc(var(--r) - var(--pad)); /* a framed image always sits concentric in its frame */
  --r-xl: clamp(40px, 8vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 18px/1.55 var(--text); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; top: 16px; z-index: 50; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 12px; }

/* type */
.mega, .h2, .h3 { font-family: var(--display); font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.84; }
.mega { font-size: clamp(64px, 15.5vw, 230px); }
.h2 { font-size: clamp(48px, 9vw, 132px); }
.h3 { font-size: clamp(28px, 3vw, 40px); line-height: 0.92; }
.small-caps { font: 600 13px var(--text); letter-spacing: 0.16em; text-transform: uppercase; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 36ch; }
.center { text-align: center; }

/* header */
.top { position: fixed; inset: 0 0 auto; z-index: 40; padding-top: 10px; pointer-events: none; }
.top .wrap { display: flex; align-items: center; gap: 20px; height: 68px; padding-inline: 8px; border-radius: 999px; pointer-events: auto; transition: background 0.3s, box-shadow 0.3s, padding 0.3s, height 0.3s; }
html.scrolled .top .wrap { background: var(--paper); box-shadow: 0 10px 30px rgba(26, 26, 78, 0.12), 0 0 0 1px rgba(26, 26, 78, 0.06); height: 60px; padding-inline: 10px 8px; }
html.scrolled .top .btn.call, html.scrolled .top .lang-switch { padding-block: 11px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { width: 44px; }
.brand b { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.04em; white-space: nowrap; }
.nav { display: flex; gap: 4px; margin-inline-start: auto; }
.nav a { text-decoration: none; font: 600 14px var(--text); letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 12px; border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--ink); color: var(--white); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: var(--ink); color: var(--white); font: 600 15px var(--text); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; }
.btn:hover { background: #2a2a6a; }
.btn.sun { background: var(--sun); color: var(--ink); }
.btn.sun:hover { background: #ffd92a; }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.menu-toggle { display: none; }

/* the mark */
.mark { aspect-ratio: 1; border-radius: 50%; background: var(--sun); overflow: hidden; position: relative; flex: none; }
.mark i { position: absolute; inset: 0; background: url(img/wave.png) no-repeat; background-size: 290% 290%; background-position: 46% 3%; }

/* stickers: Nuri scenes with a die cut edge, laid over the type */
.sticker { position: absolute; z-index: 3; width: var(--s, 150px); filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(0 10px 14px rgba(26, 26, 78, 0.18)); transform: rotate(var(--r, -8deg)); pointer-events: none; }
.tag { position: absolute; z-index: 4; font: 700 13px var(--text); letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; background: var(--coral); color: var(--white); transform: rotate(var(--r, -6deg)); white-space: nowrap; }
.tag.sun { background: var(--sun); color: var(--ink); }
.tag.sky { background: var(--sky); color: var(--ink); }
.tag.static { position: static; display: inline-block; transform: none; }

/* rotating round badge */
.badge { position: absolute; z-index: 5; width: var(--b, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--paper); display: grid; place-items: center; }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.badge text { font: 700 11px var(--text); letter-spacing: 0.22em; text-transform: uppercase; fill: var(--ink); }
.badge .core { width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--coral); display: grid; place-items: center; color: #fff; font-size: 26px; }

/* hero */
.hero { position: relative; padding-top: 120px; background: var(--coral-soft); overflow: hidden; }
.hero.sun { background: var(--sun-soft); }
.hero.sky { background: var(--sky-soft); }
.hero.olive { background: var(--olive-soft); }
.hero .intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 12px; }
.hero .intro p { max-width: 30ch; font-weight: 500; }
.hero .mega { position: relative; z-index: 2; }
.hero .stage { position: relative; margin-top: clamp(20px, 3vw, 40px); }
.blob { position: relative; z-index: 1; border-radius: var(--r-xl); overflow: hidden; background: var(--ink); }
.blob img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.hero .split-band { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: var(--sky-deep); z-index: 0; }
.hero .stage .wrap { position: relative; z-index: 1; padding-bottom: clamp(32px, 5vw, 64px); }

/* blocks */
section { position: relative; }
.block { padding-block: clamp(64px, 9vw, 130px); }
.bg-blue { background: var(--sky-deep); color: var(--white); }
.bg-ink { background: var(--ink); color: var(--white); }
.bg-sun { background: var(--sun); }
.bg-coral { background: var(--coral); color: var(--white); }
.bg-cream { background: var(--cream); }
.bg-paper { background: var(--paper); }
.bg-blue .lead, .bg-ink .lead { color: #e2e6ff; }

.statement { position: relative; text-align: center; }
.statement .h2 { max-width: 15ch; margin-inline: auto; }
.statement .h2 em { font-style: normal; color: var(--sun); }
.statement .who { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; text-align: start; }
.statement .who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

/* service cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { position: relative; color: var(--ink); border-radius: var(--r); padding: 26px; display: grid; gap: 14px; align-content: start; overflow: hidden; min-height: 330px; }
.card .ico { width: 92px; }
.card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 16px; }
.card li::before { content: "\2713"; margin-inline-end: 8px; font-weight: 700; }
.card .price { font-family: var(--display); font-weight: 800; font-size: 26px; }
.card.sun { background: var(--sun-soft); } .card.coral { background: var(--coral-soft); } .card.sky { background: var(--sky-soft); } .card.olive { background: var(--olive-soft); } .card.white { background: var(--white); }
.card .ring { position: absolute; inset-inline-end: -40px; top: -40px; width: 170px; aspect-ratio: 1; border-radius: 50%; border: 18px solid rgba(26, 26, 78, 0.06); }

/* big section titles with stickers */
.title { position: relative; text-align: center; margin-bottom: clamp(28px, 4vw, 56px); }
.title .h2 { position: relative; z-index: 2; }

/* photo frames */
.frames { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.frame { border-radius: var(--r); padding: var(--pad); display: grid; gap: 12px; }
.frame.wide { grid-column: 1 / -1; }
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-in); }
.frame.wide img { aspect-ratio: 21 / 9; }
.frame .cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px 6px; }
.frame .cap .h3 { font-size: clamp(22px, 2.2vw, 30px); }
.frame .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 600 12px var(--text); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--white); }
.frame.sun { background: var(--sun-soft); } .frame.coral { background: var(--coral-soft); } .frame.sky { background: var(--sky-soft); } .frame.olive { background: var(--olive-soft); } .frame.ink { background: var(--ink); color: var(--white); } .frame.ink .chip { color: var(--ink); }

/* menu list */
.menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.menu .card { min-height: 0; background: var(--white); }
.items { list-style: none; margin: 0; padding: 0; display: grid; }
.items li { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding: 14px 0; border-bottom: 2px dotted rgba(26, 26, 78, 0.18); }
.items li:last-child { border-bottom: 0; }
.items b { font-size: 19px; font-weight: 600; }
.items .price { font-family: var(--display); font-weight: 800; font-size: 22px; justify-self: end; white-space: nowrap; }
.items span:not(.price) { grid-column: 1 / -1; color: var(--ink-2); font-size: 15px; }
.menu .card::before { display: none; }

/* testimonials */
.quotes { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 18px; align-items: center; }
.quote { background: var(--cream); color: var(--ink); border-radius: var(--r); padding: clamp(24px, 4vw, 52px); display: grid; gap: 18px; text-align: center; position: relative; }
.quote.side { opacity: 0.5; transform: scale(0.92); }
.quote .mark-q { font-family: var(--display); font-weight: 800; font-size: 80px; line-height: 0.5; }
.quote p { font-family: var(--display); font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: clamp(22px, 2.1vw, 30px); line-height: 1; }
.quote .by { font: 500 16px var(--text); }
.quote .sticker { inset-inline-end: 18px; top: -30px; }

/* notes (journal) */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.note { background: var(--white); border-radius: var(--r); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.note .txt { padding: 22px; display: grid; gap: 10px; align-content: start; }
.note img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.note .meta { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.note .h3 { font-size: clamp(24px, 2.2vw, 30px); }

/* info, forms, map */
.info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; font-size: 18px; }
.info dt { font-weight: 700; }
.info dd { margin: 0; }
.hours { width: 100%; border-collapse: collapse; font-size: 18px; }
.hours th, .hours td { text-align: start; padding: 14px 0; border-bottom: 2px dotted rgba(26, 26, 78, 0.2); }
.hours td { text-align: end; font-weight: 600; }
.form { display: grid; gap: 14px; background: var(--white); color: var(--ink); padding: clamp(20px, 3vw, 36px); border-radius: var(--r); }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.form input { min-height: 56px; }
.form input, .form textarea, .form select { font: 400 17px var(--text); color: var(--ink); padding: 14px 16px; border-radius: 14px; border: 2px solid #e2dbd0; background: var(--paper); }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--focus); }
.form .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.form .two > *, .dp, .sel { min-width: 0; }
.form output { display: block; padding: 14px 16px; border-radius: 14px; background: var(--olive-soft); font-weight: 500; }
.form output:empty { display: none; }
.map { border-radius: var(--r); overflow: hidden; }
.map svg { display: block; width: 100%; height: auto; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
.two-col > * { min-width: 0; }
.open-now { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--text); letter-spacing: 0.06em; text-transform: uppercase; }
.open-now::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3cbf6e; }
.open-now.closed::before { background: var(--coral); }

/* marquee */
.marquee { overflow: hidden; white-space: nowrap; background: var(--ink); color: var(--sun); padding-block: 18px; transform: rotate(-2deg); margin-inline: -2vw; position: relative; z-index: 3; }
.marquee.sun { background: var(--sun); color: var(--ink); transform: rotate(1.5deg); }
.marquee span { display: inline-block; font-family: var(--display); font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: clamp(28px, 4vw, 52px); padding-inline-end: 0.6em; }
.marquee .track { display: inline-flex; }

/* closing CTA and footer */
.closing { position: relative; text-align: center; padding-block: clamp(80px, 10vw, 140px) clamp(40px, 6vw, 80px); background: var(--cream); overflow: hidden; }
.closing .mega { font-size: clamp(80px, 20vw, 300px); }
.foot { background: var(--cream); padding-block: 40px 32px; border-top: 2px solid rgba(26, 26, 78, 0.12); }
.foot .wrap { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 28px; }
.foot h3 { font: 700 13px var(--text); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.foot .note-line { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); padding-top: 18px; border-top: 1px solid rgba(26, 26, 78, 0.12); }

/* motion */
@media (prefers-reduced-motion: no-preference) {
  .badge svg { animation: spin 18s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .marquee .track { animation: slide 26s linear infinite; }
  @keyframes slide { to { transform: translateX(-50%); } }
  .rise { animation: rise 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) both 0.1s; }
  @keyframes rise { from { transform: translateY(40%); opacity: 0; } }
  .pop { animation: pop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) both 0.5s; }
  @keyframes pop { from { transform: scale(0) rotate(-30deg); } }
}

/* responsive */
@media (max-width: 1000px) {
  .nav { display: none; }
  .lang-switch { margin-inline-start: auto; }
  .cards, .notes { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .quote.side { display: none; }
  .foot .wrap { grid-template-columns: 1fr 1fr; }
  .two-col, .menu { grid-template-columns: 1fr; }
  .hero .badge { top: -30px !important; --b: 116px !important; }
  .hero .mega .tag { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero .intro { flex-direction: column; align-items: flex-start; }
  .blob img { aspect-ratio: 4 / 3; }
  .cards, .notes, .frames { grid-template-columns: 1fr; }
  .form .two { grid-template-columns: 1fr; }
  .info dl { grid-template-columns: 1fr; gap: 0; }
  .info dd { margin-bottom: 10px; }
  .foot .wrap { grid-template-columns: 1fr; }
  .sticker { --s: 90px !important; }
  .badge { --b: 104px !important; }
  .tag { font-size: 11px; padding: 6px 10px; }
  /* on phones the headline is the whole width, so anything floated over it hides words */
  .mega .sticker, .mega .tag, .statement .sticker, .title .sticker, .title .tag { display: none; }
  .hero .badge { left: auto !important; right: auto !important; inset-inline-end: 4% !important; transform: none !important; top: -24px !important; }
}

/* loyalty card, drawn rather than photographed */
.loyalty { aspect-ratio: 85 / 55; background: var(--paper); color: var(--ink); border-radius: var(--r); padding: 7%; display: grid; align-content: space-between; transform: rotate(-4deg); max-width: 520px; width: 100%; justify-self: center; }
.loyalty .wm { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.04em; line-height: 0.9; }
.loyalty .wm small { display: block; margin-top: 10px; font: 600 13px var(--text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral-deep); }
.loyalty .dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.loyalty .dots > i { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 3px #c9c3b8; }
.loyalty .dots > i.on { background: var(--coral); box-shadow: none; }
.loyalty .dots .mark { width: 100%; }
.items li::before { content: none; }
.card .items li { grid-template-columns: 1fr auto; align-items: baseline; }

/* ---------- revision 4 ---------- */

/* header: language switch */
.lang-switch { display: inline-flex; align-items: center; gap: 7px; padding-block: 14px; padding-inline: 14px 17px; border-radius: 999px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); text-decoration: none; transition: background 0.2s, color 0.2s; }
.lang-switch:hover { background: var(--ink); color: var(--white); }
.lang-ico { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
.lang-switch:hover .lang-ico { transform: rotate(180deg); }
.lang-code { font: 700 15px var(--text); letter-spacing: 0.08em; }

/* page changes: a soft cross fade, and a circular reveal from the switch when the language changes */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }
  html.vt-lang::view-transition-old(root) { animation: none; }
  html.vt-lang::view-transition-new(root) { animation: vt-circle 0.75s cubic-bezier(0.65, 0, 0.25, 1) both; }
  @keyframes vt-circle { from { clip-path: circle(0 at var(--vx, 90%) var(--vy, 40px)); } to { clip-path: circle(160vmax at var(--vx, 90%) var(--vy, 40px)); } }

  /* reveal on scroll; only when scripts run, so nothing is hidden without them */
  html.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1); transition-delay: calc(var(--i, 0) * 80ms); }
  html.js .rv.in { opacity: 1; transform: none; }
}

/* titles: the h2 shrinks to its text, so stickers placed past its edges never cover letters */
.title .h2 { position: relative; }
.title .h2 .tag { font-size: 13px; }
.closing .badge { position: relative; margin: clamp(16px, 3vw, 32px) auto 0; }
.closing .mega { position: relative; }

/* form controls */
.form .btn { justify-self: start; }
.form select { appearance: none; padding-inline-end: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%231a1a4e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 20px; background-position: right 14px center; cursor: pointer; }
.form select:dir(rtl) { background-position: left 14px center; }

/* date picker */
.dp { position: relative; }
.dp-field, .sel-field { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; font: 400 17px var(--text); color: var(--ink); padding: 12px 12px 12px 16px; padding-inline: 16px 14px; border-radius: 14px; border: 2px solid #e2dbd0; background: var(--paper); cursor: pointer; text-align: start; }
.dp-field:focus-visible, .dp.open .dp-field, .sel-field:focus-visible, .sel.open .sel-field { outline: none; border-color: var(--focus); }
.dp-field .v { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-field .v.ph { color: #8d88a6; }
.dp-field svg { width: 22px; height: 22px; flex: none; }
.dp-pop { position: absolute; z-index: 30; top: calc(100% + 8px); inset-inline-start: 0; width: min(330px, 86vw); background: var(--white); color: var(--ink); border-radius: var(--r); padding: var(--pad); box-shadow: 0 18px 50px rgba(26, 26, 78, 0.22), 0 0 0 2px rgba(26, 26, 78, 0.06); transform-origin: top; }
.dp-pop[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .dp-pop { animation: dp-in 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); } @keyframes dp-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } } }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 10px; }
.dp-head b { font-family: var(--display); font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 26px; line-height: 1; }
.dp-head button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--cream); color: var(--ink); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.dp-head button:hover { background: var(--sun-soft); }
.dp-head button svg { width: 18px; height: 18px; }
.dp-head button:dir(rtl) svg { transform: scaleX(-1); }
.dp-grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.dp-grid th { font: 600 12px var(--text); letter-spacing: 0.06em; color: var(--ink-2); padding-bottom: 4px; text-transform: uppercase; }
.dp-grid td { padding: 0; }
.dp-grid button { width: 100%; aspect-ratio: 1; border: 0; border-radius: var(--r-in); background: transparent; font: 500 15px var(--text); color: var(--ink); cursor: pointer; }
.dp-grid button:hover:not(:disabled) { background: var(--sun-soft); }
.dp-grid button.today { box-shadow: inset 0 0 0 2px var(--sky); }
.dp-grid button[aria-selected="true"] { background: var(--coral); color: var(--white); font-weight: 700; }
.dp-grid button:disabled { color: #c3bfd2; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(26, 26, 78, 0.15); }
.dp-grid button.out { visibility: hidden; }
.dp-grid button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.dp-note { font-size: 13px; color: var(--ink-2); padding: 8px 4px 0; display: flex; align-items: center; gap: 8px; }
.dp-note::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); flex: none; }

/* quote carousel */
.carousel { position: relative; }
.c-stage { position: relative; display: grid; touch-action: pan-y; cursor: grab; user-select: none; perspective: 1200px; padding-block: 12px; }
.c-stage.dragging { cursor: grabbing; }
.c-stage > .quote { grid-area: 1 / 1; width: min(420px, 32%); justify-self: center; --x: calc(var(--o) * 104%); transform: translateX(calc((var(--x) + var(--drag, 0px)) * var(--dirx, 1))) scale(calc(1 - min(1, var(--a)) * 0.1)) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); opacity: calc(1 - min(2, var(--a)) * 0.42); z-index: calc(10 - var(--a)); transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.5s, background 0.4s; }
.c-stage > .quote[data-far] { visibility: hidden; }
.c-stage > .quote:not(.on) { background: #8fa9c8; }
.c-stage.dragging > .quote { transition: none; }
.c-stage > .quote.on { box-shadow: 0 26px 60px rgba(10, 20, 60, 0.28); }
.quote .sticker { position: absolute; }
.quote:not(.on) .sticker { opacity: 0; transition: opacity 0.3s; }
html[dir="rtl"] .c-stage { --dirx: -1; }
.c-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.c-ctrl button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--white); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: transform 0.2s, background 0.2s; }
.c-ctrl button:hover { transform: scale(1.08); background: var(--sun); }
.c-ctrl button svg { width: 20px; height: 20px; }
.c-ctrl [data-prev]:dir(rtl) svg, .c-ctrl [data-next]:dir(rtl) svg { transform: scaleX(-1); }
.c-dots { display: flex; gap: 8px; padding-inline: 8px; }
.c-dots button { width: 12px; height: 12px; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.45); transition: width 0.35s, background 0.35s; }
.c-dots button[aria-current="true"] { width: 34px; background: var(--sun); }
.c-dots button:hover { transform: none; background: var(--white); }
.c-ctrl .c-pause .i-play { display: none; }
.c-ctrl .c-pause[aria-pressed="true"] .i-play { display: block; }
.c-ctrl .c-pause[aria-pressed="true"] .i-pause { display: none; }
/* the side quotes sit beside the centre card on desktop; below 1000 px one card shows and the others wait fully off stage, never half covered */
@media (max-width: 1000px) { .c-stage > .quote { width: 70%; --x: calc(var(--o) * 125%); } }
@media (max-width: 760px) { .c-stage > .quote { width: 86%; --x: calc(var(--o) * 112%); } }

/* why cards: a pack scene breaks out of the corner */
.card .scene { position: absolute; inset-inline-end: -6px; bottom: -10px; width: min(58%, 230px); transform: rotate(var(--r, -6deg)); transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); filter: drop-shadow(0 10px 14px rgba(26, 26, 78, 0.16)); pointer-events: none; }
.card:hover .scene { transform: rotate(0deg) translateY(-8px) scale(1.04); }
.card.has-scene { min-height: 360px; padding-bottom: 180px; }
.card.has-scene p { max-width: 30ch; }

/* gift cards: a fanned stack that spreads on hover, focus or tap */
.gifts { background: var(--sky-deep); color: var(--white); overflow: hidden; }
.gifts::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.22) 0 2px, transparent 3px), radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.16) 0 3px, transparent 4px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 44c2 10 6 14 16 16-10 2-14 6-16 16-2-10-6-14-16-16 10-2 14-6 16-16z' fill='%23ffffff' opacity='.16'/%3E%3C/svg%3E"); background-size: 90px 90px, 130px 130px, 240px 240px; pointer-events: none; }
.gifts .wrap { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.gifts .wrap > * { min-width: 0; }
.gifts .lead { color: #e2e6ff; }
.amounts { display: flex; flex-wrap: wrap; gap: 10px; }
.amounts button { font: 800 22px var(--display); font-stretch: 75%; font-variation-settings: "wdth" 75; padding: 12px 22px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.5); background: transparent; color: var(--white); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s; }
.amounts button:hover { transform: translateY(-2px); border-color: var(--white); }
.amounts button[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.fan { position: relative; height: clamp(300px, 34vw, 420px); }
.gcard { position: absolute; inset-inline-start: 50%; top: 50%; width: min(78%, 400px); aspect-ratio: 85 / 54; margin-inline-start: calc(min(78%, 400px) / -2); margin-top: calc(min(78%, 400px) * -0.32); border-radius: var(--r); padding: 6%; color: var(--ink); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; box-shadow: 0 18px 40px rgba(10, 20, 60, 0.3); transform: translateX(calc(var(--k) * 26px * var(--dirx, 1))) rotate(calc(var(--k) * 7deg)); transition: transform 0.55s cubic-bezier(0.25, 1.3, 0.4, 1), box-shadow 0.3s; cursor: pointer; border: 0; text-align: start; font: inherit; }
html[dir="rtl"] .fan { --dirx: -1; }
.gcard.c15 { background: var(--sun); --k: -1; --ak: 1; z-index: 1; }
.gcard.c30 { background: var(--coral-soft); --k: 0; --ak: 0; z-index: 2; }
.gcard.c50 { background: var(--sky-soft); --k: 1; --ak: 1; z-index: 3; }
.fan:hover .gcard, .fan:focus-within .gcard { transform: translateX(calc(var(--k) * 36% * var(--dirx, 1))) translateY(calc(var(--ak) * 18px)) rotate(calc(var(--k) * 12deg)); }
.gcard.sel { z-index: 5; box-shadow: 0 0 0 4px var(--white), 0 26px 50px rgba(10, 20, 60, 0.4); }
.fan:not(:hover):not(:focus-within) .gcard.sel { transform: translateY(-14px) rotate(-2deg); }
.gcard .wm { font-family: var(--display); font-weight: 800; font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.04em; }
.gcard .amt { align-self: end; font-family: var(--display); font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: clamp(48px, 6vw, 86px); line-height: 0.85; }
.gcard .kind { font: 600 12px var(--text); letter-spacing: 0.16em; text-transform: uppercase; }
.gcard img { position: absolute; inset-inline-end: -4%; bottom: -8%; width: 48%; transform: rotate(-6deg); pointer-events: none; }
.stamp-row { margin-top: clamp(48px, 7vw, 96px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.stamp-row > * { min-width: 0; }
.loyalty .dots > i { cursor: pointer; transition: background 0.25s, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.loyalty .dots > i:hover { transform: scale(1.1); }
@media (max-width: 900px) { .gifts .wrap, .stamp-row { grid-template-columns: 1fr; } .stamp-row .loyalty { order: 2; } }

/* Arabic: the display face carries the weight; no letter spacing, room for dots */
:lang(ar) .mega, :lang(ar) .h2, :lang(ar) .h3, :lang(ar) .quote p, :lang(ar) .marquee span, :lang(ar) .dp-head b, :lang(ar) .amounts button, :lang(ar) .gcard .amt, :lang(ar) .closing .mega { font-family: "Lalezar", var(--text); font-weight: 400; font-synthesis: none; font-stretch: normal; font-variation-settings: normal; text-transform: none; letter-spacing: 0; }
:lang(ar) .mega { font-size: clamp(54px, 11vw, 170px); line-height: 1.12; }
:lang(ar) .closing .mega { font-size: clamp(70px, 15vw, 230px); line-height: 1.1; }
:lang(ar) .h2 { font-size: clamp(42px, 7vw, 104px); line-height: 1.15; }
:lang(ar) .h3 { line-height: 1.2; }
:lang(ar) .quote p { line-height: 1.35; }
:lang(ar) .small-caps, :lang(ar) .tag, :lang(ar) .btn, :lang(ar) .nav a, :lang(ar) .chip, :lang(ar) .badge text, :lang(ar) .foot h3, :lang(ar) .open-now, :lang(ar) .menu-toggle, :lang(ar) .dp-grid th, :lang(ar) .gcard .kind, :lang(ar) .loyalty .wm small { letter-spacing: 0; text-transform: none; }
:lang(ar) .badge text { font-size: 13px; }
:lang(ar) .card .price, :lang(ar) .items .price { font-family: var(--text); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  /* in right to left the track grows leftwards, so it travels to the right */
  html[dir="rtl"] .marquee .track { animation-name: slide-rtl; }
  @keyframes slide-rtl { to { transform: translateX(50%); } }
}
html[dir="rtl"] .card li::before { display: inline-block; }

/* header on phones */
@media (max-width: 760px) {
  .top .btn.call { display: none; }
  .lang-switch { padding-inline: 12px 15px; }
  .brand .mark { width: 38px; }
  .brand b { font-size: 22px; }
  .top .wrap { gap: 10px; }
}

/* custom select: a button and a listbox in the brand style; the native select stays for the form value */
.sel { position: relative; }
.sel select { display: none; }
.sel-field .v { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-field svg { width: 20px; height: 20px; flex: none; transition: transform 0.25s; }
.sel.open .sel-field svg { transform: rotate(180deg); }
.sel-list { position: absolute; z-index: 30; top: calc(100% + 8px); inset-inline: 0; margin: 0; padding: 6px; list-style: none; background: var(--white); color: var(--ink); border-radius: var(--r-in); box-shadow: 0 18px 50px rgba(26, 26, 78, 0.22), 0 0 0 2px rgba(26, 26, 78, 0.06); max-height: 280px; overflow: auto; }
.sel-list:focus { outline: none; }
.sel-list[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .sel-list { animation: dp-in 0.2s cubic-bezier(0.3, 1.4, 0.5, 1); } }
.sel-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: calc(var(--r-in) - 6px); cursor: pointer; font: 500 16px var(--text); }
.sel-list li.active { background: var(--sun-soft); }
.sel-list li[aria-selected="true"] { font-weight: 700; }
.sel-list li[aria-selected="true"]::after { content: ""; width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23e8506e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.sel-list:focus-visible li.active { box-shadow: inset 0 0 0 2px var(--focus); }

/* ---------- bottom bar (phones and tablets) ---------- */
.tabbar, .sheet { display: none; }
@media (max-width: 1000px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .top .btn.call { display: none; }
  .tabbar { position: fixed; z-index: 45; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); margin-inline: auto; max-width: 460px; height: 66px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding-inline: 6px; background: var(--ink); color: #c9cbe8; border-radius: 26px; box-shadow: 0 16px 40px rgba(26, 26, 78, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }
  .tab { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 0; color: inherit; text-decoration: none; font: 600 11px var(--text); letter-spacing: 0.02em; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tab .ti { width: 24px; height: 24px; transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), color 0.2s; }
  .tab:active .ti { transform: scale(0.88); }
  .tab[aria-current="page"] { color: var(--sun); }
  .tab[aria-current="page"] .ti { transform: translateY(-1px); }
  .tab span { white-space: nowrap; }
  /* Nuri sits raised in the middle of the bar */
  .tab.nuri { align-self: start; margin-top: -24px; color: #fff; }
  .nuri-face { width: 62px; height: 62px; border-radius: 50%; background: var(--sun); border: 5px solid var(--ink); box-shadow: 0 8px 18px rgba(26, 26, 78, 0.35); position: relative; overflow: hidden; transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .nuri-face i { position: absolute; inset: 0; background: url(img/wave.png) no-repeat; background-size: 280% 280%; background-position: 46% 8%; }
  .tab.nuri:hover .nuri-face { transform: translateY(-3px) rotate(-6deg); }
  .tab.nuri[aria-expanded="true"] .nuri-face { transform: translateY(-4px) rotate(8deg) scale(1.05); }
  :lang(ar) .tab { letter-spacing: 0; font-size: 12px; }

  /* the sheet: every page as a tile with its Nuri scene */
  .sheet { position: fixed; inset: 0; z-index: 60; display: block; }
  .sheet[hidden] { display: none; }
  .sheet-back { position: absolute; inset: 0; background: rgba(26, 26, 78, 0.5); opacity: 0; transition: opacity 0.3s; }
  .sheet.on .sheet-back { opacity: 1; }
  .sheet-panel { position: absolute; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 460px; margin-inline: auto; background: var(--cream); color: var(--ink); border-radius: 30px; padding: 22px 18px 18px; transform: translateY(110%); transition: transform 0.45s cubic-bezier(0.2, 1.1, 0.3, 1); }
  .sheet.on .sheet-panel { transform: none; }
  .sheet-nuri { position: absolute; width: 104px; inset-inline-end: 22px; top: -62px; z-index: 2; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); transform-origin: 50% 90%; }
  .sheet.on .sheet-nuri { animation: wave-hi 1.1s ease-in-out 0.2s 2; }
  @keyframes wave-hi { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-inline-end: 110px; }
  .sheet-x { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; position: absolute; inset-inline-start: 6px; top: -62px; box-shadow: 0 10px 24px rgba(26, 26, 78, 0.28); transition: transform 0.2s; }
  .sheet-x:hover { transform: rotate(90deg); }
  .sheet-x svg { width: 18px; height: 18px; }
  .sheet-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .tile { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: var(--r-in); text-decoration: none; color: var(--ink); font: 600 14px var(--text); text-align: center; transition: transform 0.2s; }
  .tile:active { transform: scale(0.96); }
  .tile img { width: 64px; height: 64px; object-fit: contain; }
  .tile.sun { background: var(--sun-soft); } .tile.coral { background: var(--coral-soft); } .tile.sky { background: var(--sky-soft); } .tile.olive { background: var(--olive-soft); }
  .tile[aria-current="page"] { box-shadow: inset 0 0 0 3px var(--ink); }
  .sheet-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 14px; flex-wrap: wrap; }
  .sheet-row .lang-switch { margin: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .sheet.on .tile { animation: tile-in 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
    .sheet-links li:nth-child(2) .tile { animation-delay: 40ms; } .sheet-links li:nth-child(3) .tile { animation-delay: 80ms; } .sheet-links li:nth-child(4) .tile { animation-delay: 120ms; } .sheet-links li:nth-child(5) .tile { animation-delay: 160ms; } .sheet-links li:nth-child(6) .tile { animation-delay: 200ms; }
    @keyframes tile-in { from { opacity: 0; transform: translateY(16px) scale(0.94); } }
  }
  @media (prefers-reduced-motion: reduce) { .sheet-panel, .sheet-back { transition: none; } }
}
html.sheet-open { overflow: hidden; }

/* ---------- phones: rows that swipe sideways, like an app ---------- */
@media (max-width: 760px) {
  .cards, .notes, .frames { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 6px; scrollbar-width: none; }
  .cards::-webkit-scrollbar, .notes::-webkit-scrollbar, .frames::-webkit-scrollbar { display: none; }
  .cards > *, .notes > *, .frames > * { flex: 0 0 84%; scroll-snap-align: start; }
  .wrap.cards, .wrap.frames { width: auto; margin-inline: 0; }
  .frame.wide img { aspect-ratio: 4 / 3; }
  .card { min-height: 0; }
  .card.has-scene { min-height: 330px; }
  .block { padding-block: 56px; }
  .hero { padding-top: 96px; }
  .closing { padding-block: 64px 40px; }
  .foot .wrap { gap: 18px; }
}

/* SVG text keeps its own geometry in right to left pages: the ring text starts at the path origin, map labels sit where drawn */
html[dir="rtl"] .badge svg, html[dir="rtl"] .map svg { direction: ltr; }

/* ---------- design review fixes (qa/DESIGN-REVIEW.md) ---------- */
.mega, .h2, .h3, .quote p { text-wrap: balance; }
p, li { text-wrap: pretty; }
.carousel { overflow-x: clip; overflow-y: visible; padding-top: 34px; margin-top: -34px; }
.c-stage > .quote:not(.on) { opacity: calc(1 - min(2, var(--a)) * 0.3); }
.block > p { padding-inline: var(--gutter); }
.info.contact { display: grid; gap: 18px; align-content: start; }
.info.contact .h2 { margin-bottom: 6px; }
.info.contact .lead { margin-top: 4px; }
/* cards: price pinned to the bottom, ticks hang outside wrapped lines */
.cards > .card { display: flex; flex-direction: column; }
.card .price { margin-top: auto; padding-top: 6px; }
.card li { display: grid; grid-template-columns: auto 1fr; }
@media (max-width: 1000px) and (min-width: 761px) {
  .cards > :last-child:nth-child(odd), .notes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .notes > :last-child:nth-child(odd) { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .notes > :last-child:nth-child(odd) img { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 760px) {
  .map text { font-size: 17px; }
  /* phones: eyebrow, then the title, then the paragraph */
  .hero > .wrap:first-child { display: flex; flex-direction: column; }
  .hero .intro { display: contents; }
  .hero .intro > :first-child { order: 0; margin-bottom: 10px; }
  .hero .mega { order: 1; }
  .hero .intro > p { order: 2; margin-top: 16px; }
}
:lang(ar) .mega { font-size: clamp(56px, 12.5vw, 196px); }

/* photo focal points: keep faces, signs and the mural inside every crop */
img[src*="s01-interior"] { object-position: 50% 18%; }
img[src*="s04-cookies"] { object-position: 50% 40%; }
img[src*="s03b-drinks"] { object-position: 50% 58%; }
img[src*="s07-storefront"] { object-position: 50% 30%; }
img[src*="s08-reading"] { object-position: 50% 35%; }
img[src*="s09-painting"] { object-position: 50% 30%; }
img[src*="s10-shop"] { object-position: 50% 38%; }

/* images stay in the page: no drag out to the desktop or another tab */
img { -webkit-user-drag: none; user-drag: none; }