/* ------------------------------------------------------------------
   DEMO (light): ivory wall, near-black door, deep gold lines.
   Loaded after site.css and demo.css. The door itself stays dark.
   ------------------------------------------------------------------ */

:root {
  --paper: #f5f2ec;
  --ink-d: #222222;
  --soft: #6f675a;
  --gold-d: #9a7b2f;               /* gold that still reads on a light background */
  --gold-d-line: rgba(154, 123, 47, .62);
}

html, body { background: var(--paper); color: var(--ink-d); }

/* ---------- background layers: warm, quiet, almost invisible ---------- */
body::before {
  background:
    radial-gradient(40% 35% at 22% 22%, rgba(194, 166, 97, .10), transparent 70%),
    radial-gradient(38% 32% at 82% 68%, rgba(194, 166, 97, .08), transparent 70%),
    radial-gradient(30% 28% at 70% 12%, rgba(255, 232, 170, .10), transparent 70%);
}
html::before { background-image: radial-gradient(rgba(154, 123, 47, .16) 1.2px, transparent 1.7px); }
body::after { background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%); }

/* ---------- the wall: ivory plaster with a soft warm light ---------- */
.facade {
  background:
    url("assets/plaster.webp") 0 0 / 180px 180px,
    radial-gradient(72% 34% at 50% 36%, rgba(255, 255, 255, .85), transparent 74%),
    linear-gradient(180deg, #ece7dd 0%, #f2eee6 50%, #f5f2ec 100%);
}
.course {
  background: linear-gradient(90deg, transparent, var(--gold-d-line) 18%, #b69a55 50%, var(--gold-d-line) 82%, transparent);
  box-shadow: 0 6px 16px rgba(120, 95, 35, .18);
}

/* ---------- header ---------- */
.top::before { background: radial-gradient(closest-side, rgba(194, 166, 97, .16), transparent); }
.tt .logo-svg, .emblem .logo-svg { color: var(--ink-d); filter: none; }
.name, html[lang="ar"] .name { color: var(--ink-d); }
.caption { color: var(--gold-d); }
.caption::before { background: linear-gradient(90deg, transparent, var(--gold-d)); }
.caption::after  { background: linear-gradient(270deg, transparent, var(--gold-d)); }

.lang-toggle {
  background: rgba(255, 255, 255, .85);
  color: var(--ink-d);
  border-color: var(--gold-d-line);
}

/* ---------- arch and threshold ---------- */
.stone {
  background: rgba(255, 255, 255, .35);
  box-shadow:
    inset 0 0 0 1px var(--gold-d-line),
    0 34px 54px rgba(60, 45, 20, .26);
}
.facade .doorway { box-shadow: 0 0 0 1px rgba(154, 123, 47, .45); }
.step {
  background: linear-gradient(90deg, transparent, var(--gold-d-line) 16%, #b69a55 50%, var(--gold-d-line) 84%, transparent);
  box-shadow: 0 10px 22px rgba(120, 95, 35, .28);
}
.entry::before { background: linear-gradient(180deg, rgba(154, 123, 47, .10), transparent); }

/* ---------- links under the door: white cards, hairline gold ---------- */
.links3 .tl {
  background: #ffffff;
  border-color: var(--gold-d-line);
  color: var(--ink-d);
  box-shadow: 0 10px 22px rgba(60, 45, 20, .10);
}
.links3 .tl::before { border-color: rgba(154, 123, 47, .16); }
.links3 .tl .ic { color: var(--gold-d); border-color: var(--gold-d-line); background: #faf7f0; }
@media (hover: hover) {
  .links3 .tl:hover { box-shadow: 0 14px 28px rgba(60, 45, 20, .16), 0 0 22px rgba(194, 166, 97, .22); }
  .links3 .tl:hover .ic { background: rgba(194, 166, 97, .2); }
}

/* ---------- find us ---------- */
.branches { border-top-color: var(--gold-d-line); }
.br { border-bottom-color: var(--gold-d-line); }
.br .city b { color: var(--ink-d); }
.br .city small { color: var(--soft); }
.br .rb { color: var(--gold-d); }
.br .rl { color: var(--soft); }
.br .rb:active { background: rgba(154, 123, 47, .16); color: var(--ink-d); }
@media (hover: hover) {
  .br:hover { background: linear-gradient(90deg, rgba(194, 166, 97, .14), transparent 70%); }
  [dir="rtl"] .br:hover { background: linear-gradient(270deg, rgba(194, 166, 97, .14), transparent 70%); }
  .br .rb:hover { background: rgba(154, 123, 47, .12); color: var(--ink-d); }
  .br .rb:hover .rl { color: var(--ink-d); }
}

/* ---------- footer ---------- */
.foot { color: var(--soft); }
.foot span { color: var(--ink-d); }
.foot::before { background: linear-gradient(90deg, transparent, var(--gold-d), transparent); }


/* ===== refinement v2: walnut door, cleaner arch, softer palette, richer bottom ===== */
:root {
  --paper: #f6f3ee;
  --ink-d: #26211c;
  --soft: #6d655a;
  --gold-d: #a1822f;
  --gold-d-line: rgba(161, 130, 47, .6);
}
html, body { background: var(--paper); color: var(--ink-d); }

/* the wall: a little warmer, and it ends exactly on the page colour (no smear, no edge) */
.facade {
  background:
    url("assets/plaster.webp") 0 0 / 180px 180px,
    radial-gradient(72% 34% at 50% 36%, rgba(255, 255, 255, .9), transparent 74%),
    linear-gradient(180deg, #ebe5da 0%, #f2eee6 52%, #f6f3ee 100%);
  box-shadow: none;
}
.entry::before { display: none; }

/* the arch: two fine gold lines with the wall showing between them */
.stone {
  background: none;
  box-shadow: inset 0 0 0 1px var(--gold-d-line), 0 22px 36px rgba(60, 45, 20, .15);
}
.facade .doorway { box-shadow: 0 0 0 1px rgba(161, 130, 47, .5); }

/* the door: deep walnut lacquer with a faint grain, instead of flat black */
.half {
  background:
    url("assets/walnut.webp") 0 0 / 240px 240px,
    linear-gradient(90deg, rgba(255, 236, 205, .07) 0%, rgba(255, 236, 205, 0) 40%, rgba(0, 0, 0, .2) 100%),
    linear-gradient(180deg, rgba(255, 226, 180, .09) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .3) 100%),
    #2d241d;
  box-shadow: inset 0 12px 20px rgba(0, 0, 0, .35), inset 5px 0 9px rgba(0, 0, 0, .2), inset -5px 0 9px rgba(0, 0, 0, .2);
}
.half-s { border-inline-end: 1px solid #120d09; }
.half-e { border-inline-start: 1px solid #120d09; }
.pn {
  background: linear-gradient(165deg, #3a2e24, #2a2119);
  border-color: rgba(205, 175, 100, .62);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, .08), 0 10px 18px rgba(0, 0, 0, .3);
}
.pn::before { border-color: rgba(205, 175, 100, .24); }
.step {
  background: linear-gradient(90deg, transparent, var(--gold-d-line) 16%, #b8995a 50%, var(--gold-d-line) 84%, transparent);
  box-shadow: 0 8px 16px rgba(120, 95, 35, .2);
}

/* ---------- Explore: heading, then three richer cards ---------- */
.explore { margin: 38px auto 16px; }
.links3 { margin-top: 0; gap: 12px; }
.links3 .tl {
  min-height: 108px;
  border-radius: 16px;
  gap: 12px;
  background: linear-gradient(180deg, #ffffff, #faf7f1);
  border: 1px solid var(--gold-d-line);
  box-shadow: inset 0 1px 0 #ffffff, 0 10px 22px rgba(60, 45, 20, .08);
  color: var(--ink-d);
}
.links3 .tl::before { display: none; }
.links3 .tl .ic {
  width: 24px;
  height: 24px;
  padding: 11px;
  color: #6f5516;
  border: 1px solid var(--gold-d-line);
  background: linear-gradient(160deg, #f7efd8, #e9dbae);
}
@media (hover: hover) {
  .links3 .tl:hover { transform: translateY(-3px); border-color: var(--gold-d); box-shadow: inset 0 1px 0 #fff, 0 16px 30px rgba(60, 45, 20, .14); }
  .links3 .tl:hover .ic { background: linear-gradient(160deg, #f1e2ad, #d9c27c); }
}

/* ---------- Find us: one card per branch, two clear buttons ---------- */
.branches { border-top: 0; margin-top: 4px; }
.br {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 14px;
  padding: 18px 18px 16px;
  border: 1px solid var(--gold-d-line);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #faf7f1);
  box-shadow: inset 0 1px 0 #fff, 0 10px 22px rgba(60, 45, 20, .08);
}
@media (hover: hover) {
  .br:hover, [dir="rtl"] .br:hover { background: linear-gradient(180deg, #ffffff, #faf7f1); }
}
.br .city b { font-size: 1.4rem; }
.br .city small { font-size: .76rem; color: var(--soft); }
.br .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.br .rb {
  flex-direction: row;
  gap: 9px;
  width: auto;
  height: 48px;
  min-width: 0;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--ink-d);
  border: 1px solid var(--gold-d-line);
  background: #ffffff;
}
.br .rb svg { width: 20px; height: 20px; color: var(--gold-d); }
.br .rl { font-size: .84rem; font-weight: 700; letter-spacing: .03em; text-transform: none; color: var(--ink-d); }
html[lang="ar"] .br .rl { font-size: .95rem; letter-spacing: 0; }
.br .rb[data-wa] { background: #2d241d; border-color: #2d241d; }
.br .rb[data-wa] svg { color: #f1e2ad; }
.br .rb[data-wa] .rl { color: #f6ecd2; }
.br .rb:active { transform: scale(.97); background: #f4efe3; }
.br .rb[data-wa]:active { background: #3a2e24; }
@media (hover: hover) {
  .br .rb:hover { background: #f7f1e2; color: var(--ink-d); }
  .br .rb[data-wa]:hover { background: #3a2e24; }
  .br .rb:hover .rl { color: var(--ink-d); }
  .br .rb[data-wa]:hover .rl { color: #fff6dc; }
}


/* ===== branches: refined (same layout, finer details) ===== */
.br {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(194, 166, 97, .12), transparent 58%),
    linear-gradient(180deg, #ffffff, #faf7f1);
  box-shadow: inset 0 1px 0 #fff, 0 14px 28px rgba(60, 45, 20, .09);
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) calc(var(--t0) + 1.3s) backwards;
}
.br + .br { animation-delay: calc(var(--t0) + 1.45s); }
.br::before {      /* a fine gold accent along the leading edge */
  content: "";
  position: absolute;
  inset-block: 20px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, transparent, #c2a661 20%, #a1822f 80%, transparent);
}
[dir="rtl"] .br::before { border-radius: 3px 0 0 3px; }

.br .city { gap: 0; }
.br .city b {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.45rem;
  line-height: 1.2;
}
.br .city b::before {      /* the gold pin badge */
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--gold-d-line);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f5516' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / 15px 15px no-repeat, linear-gradient(160deg, #f7efd8, #e9dbae);
}
.br .city small { margin-top: 6px; padding-inline-start: 41px; line-height: 1.4; }

.tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin: 9px 0 0 41px;
  margin-inline: 41px 0;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(194, 166, 97, .13);
  color: #6f5516;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  transition: background-color .2s ease;
}
.tel::before {
  content: "";
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1822f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tel:active { background: rgba(194, 166, 97, .28); }
@media (hover: hover) { .tel:hover { background: rgba(194, 166, 97, .24); } }
.tel:focus-visible { outline: 3px solid #a1822f; outline-offset: 2px; }

/* the two buttons: same look, finer finish */
.br .rb {
  background: linear-gradient(180deg, #ffffff, #faf6ec);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(60, 45, 20, .07);
  transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease;
}
.br .rb[data-wa] {
  background: linear-gradient(180deg, #3b2f25, #2a2119);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, .14), 0 8px 16px rgba(40, 28, 15, .28);
}
@media (hover: hover) {
  .br .rb:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 10px 20px rgba(60, 45, 20, .14); }
  .br .rb[data-wa]:hover { box-shadow: inset 0 1px 0 rgba(255, 236, 205, .18), 0 12px 22px rgba(40, 28, 15, .34); }
}
.br .rb:focus-visible { outline: 3px solid #a1822f; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .br { animation: none; } }


/* ===== branches: minimal, side by side, no borders ===== */
.branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  margin-top: 10px;
  border: 0;
}
.br, .br + .br {
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 6px 2px;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.br::before { display: none; }

/* name, address, number: centred and quiet */
.br .city { align-items: center; text-align: center; }
.br .city b { justify-content: center; font-size: 1.4rem; font-weight: 700; }
.br .city b::before { display: none; }
.br .city small { margin-top: 6px; padding: 0; font-size: .74rem; line-height: 1.5; text-align: center; }
.tel {
  align-self: center;
  margin: 8px 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: .86rem;
  letter-spacing: .02em;
}
.tel::before { width: 13px; height: 13px; }
.tel:active, .tel:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }

/* the two actions: plain icon and word, no boxes */
.br .btns { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; margin-top: 4px; }
.br .rb, .br .rb[data-wa] {
  width: auto;
  height: 44px;
  min-width: 0;
  padding: 0 10px;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  box-shadow: none;
  color: var(--ink-d);
}
.br .rb svg, .br .rb[data-wa] svg { width: 20px; height: 20px; color: var(--gold-d); }
.br .rl, .br .rb[data-wa] .rl { font-size: .88rem; font-weight: 700; letter-spacing: .03em; color: var(--ink-d); }
html[lang="ar"] .br .rl { font-size: .98rem; letter-spacing: 0; }
.br .rb:active, .br .rb[data-wa]:active { background: rgba(194, 166, 97, .16); transform: none; }
@media (hover: hover) {
  .br .rb:hover, .br .rb[data-wa]:hover { transform: none; box-shadow: none; background: none; }
  .br .rb:hover .rl, .br .rb[data-wa]:hover .rl { color: var(--gold-d); text-decoration: underline; text-underline-offset: 5px; }
  .br:hover, [dir="rtl"] .br:hover { background: none; }
}
@media (max-width: 380px) {
  .branches { gap: 4px 10px; }
  .br .city small { font-size: .68rem; }
  .br .city b { font-size: 1.28rem; }
  .tel { font-size: .8rem; }
}


/* ===== door: brass details, lacquer sheen, no small text ===== */
.half {
  background:
    url("assets/walnut.webp") 0 0 / 240px 240px,
    linear-gradient(115deg, rgba(255, 240, 215, 0) 26%, rgba(255, 240, 215, .085) 44%, rgba(255, 240, 215, 0) 62%),
    linear-gradient(90deg, rgba(255, 236, 205, .07) 0%, rgba(255, 236, 205, 0) 40%, rgba(0, 0, 0, .2) 100%),
    linear-gradient(180deg, rgba(255, 226, 180, .09) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .3) 100%),
    #2d241d;
  box-shadow:
    inset 0 12px 20px rgba(0, 0, 0, .35),
    inset 5px 0 9px rgba(0, 0, 0, .2),
    inset -5px 0 9px rgba(0, 0, 0, .2),
    inset 0 0 0 8px rgba(0, 0, 0, 0),
    inset 0 0 0 9px rgba(205, 175, 100, .26);
}


/* a brass kick plate along the foot of each leaf */
.half::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 6px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #efdfa5, #b8995a 55%, #8a6d2b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .4);
  opacity: .92;
  pointer-events: none;
}
/* a thin brass strip down the edge where the leaves meet */
.half-s::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: 3px;
  background: linear-gradient(90deg, #8a6d2b, #f1e2ad 50%, #8a6d2b);
  pointer-events: none;
}

/* panels: now just the icon and the name, a little larger and more centred */
.pn { gap: 9px; }
.pn .ic { width: 46px; height: 46px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.pn b { font-size: .98rem; }
@media (max-width: 380px) {
  .pn .ic { width: 34px; height: 34px; }
  .pn b { font-size: .78rem; }
}
@media (max-width: 340px) {
  .pn .ic { width: 28px; height: 28px; }
}


/* ===== branches: fine dividing lines (no boxes) ===== */
.branches { position: relative; row-gap: 0; }

/* one fine vertical line between the two branches */
.branches::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(161, 130, 47, .55) 14%, rgba(161, 130, 47, .55) 86%, transparent);
}

/* inside each branch: name and address, then hairlines between the three rows */
.br { gap: 0; padding: 6px 4px 0; }
.br .city { margin-bottom: 14px; }
.tel, .br .rb, .br .rb[data-wa] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 6px;
  gap: 8px;
}
.tel::after, .br .rb::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(161, 130, 47, .5) 18%, rgba(161, 130, 47, .5) 82%, transparent);
}
.br .btns { margin-top: 0; }
.br::after {       /* closing line under the last row */
  content: "";
  align-self: stretch;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(161, 130, 47, .5) 18%, rgba(161, 130, 47, .5) 82%, transparent);
}
.tel { font-size: .92rem; font-weight: 700; color: #6f5516; }
.tel::before { width: 16px; height: 16px; }


/* ===== branches: keep numbers on one line, even spacing ===== */
.br .city { margin-bottom: 0; }
.tel {
  margin-top: 14px;
  gap: 6px;
  font-size: .86rem;
  letter-spacing: 0;
  white-space: nowrap;
}
.tel::before { flex: none; width: 15px; height: 15px; }
@media (max-width: 380px) {
  .tel { font-size: .8rem; gap: 5px; }
  .tel::before { width: 13px; height: 13px; }
}
@media (max-width: 340px) {
  .tel { font-size: .72rem; }
  .tel::before { display: none; }
}


/* ===== branches: identical rules for both columns ===== */
.br, .br + .br {
  gap: 0;
  margin: 0;
  padding: 6px 4px 0;
  align-items: center;
}
.br .city { min-height: 0; }
.br .btns { margin: 0; gap: 0; }


/* ===== branches: the narrowest phones ===== */
@media (max-width: 340px) {
  .branches { gap: 0 8px; }
  .br .city b { font-size: 1.12rem; }
  .br .city small { font-size: .6rem; letter-spacing: 0; min-height: 3em; }
}


/* heading spacing above the rows */
.tel { margin-top: 12px; }