/* Al-Atrakchy QR pages — one house, three kitchens.
   Each page commits to ONE brand world (deliberately single-theme): the hub is
   the group's warm black + gold; Turath is heritage teal + gold; Food Fort is
   charcoal + red; Arido is cream + maroon + terracotta (its Maestro brand kit).
   No framework, no icon font: inline SVG, self-hosted Reem Kufi + Plex Arabic. */

:root{
  --display:'Reem Kufi','IBM Plex Sans Arabic',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --r-xl:24px; --r-lg:18px; --r-md:14px;
  /* group (hub) world */
  --ground:#0C0B09; --glow:rgba(214,176,92,.14);
  --surface:#15130F; --surface-2:#1B1813;
  --line:rgba(214,176,92,.15); --line-strong:rgba(214,176,92,.38);
  --accent:#D6B05C; --accent-hi:#F0D58C; --on-accent:#17120A;
  --ink:#F3ECDD; --muted:#A1978A; --faint:#6F675C;
}
body.t-turath{
  --ground:#072629; --glow:rgba(201,164,92,.16);
  --surface:#0B3236; --surface-2:#0E3A3E;
  --line:rgba(201,164,92,.18); --line-strong:rgba(201,164,92,.45);
  --accent:#C9A45C; --accent-hi:#E7CD8E; --on-accent:#08272A;
  --ink:#F2EAD7; --muted:#9FB6B2; --faint:#6E8B87;
}
body.t-foodfort{
  --ground:#120F0F; --glow:rgba(225,37,43,.16);
  --surface:#1C1717; --surface-2:#231C1C;
  --line:rgba(255,236,228,.09); --line-strong:rgba(225,37,43,.55);
  --accent:#E1252B; --accent-hi:#FF5A5F; --on-accent:#FFFFFF;
  --ink:#FFF4EC; --muted:#BBAEA8; --faint:#857873;
}
body.t-arido{
  --ground:#F4E6CB; --glow:rgba(200,100,29,.16);
  --surface:#FBF3E3; --surface-2:#FFF9EE;
  --line:rgba(108,28,30,.13); --line-strong:rgba(108,28,30,.4);
  --accent:#6C1C1E; --accent-hi:#C8641D; --on-accent:#FBEFD6;
  --ink:#3A1112; --muted:#7E5E53; --faint:#A48B7E;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Guard: decorative layers (the lattice) must never widen the page. In RTL an
   overflow grows the layout leftwards and shoves the whole column right. */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{
  margin:0; min-height:100vh; color:var(--ink); font-family:var(--body);
  background:radial-gradient(120% 55% at 50% -12%, var(--glow) 0%, transparent 62%), var(--ground);
  background-color:var(--ground);
  -webkit-font-smoothing:antialiased; line-height:1.6;
  padding-inline:20px; padding-block:0 calc(28px + env(safe-area-inset-bottom));
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.page{max-width:520px;margin-inline:auto}
[lang="en"]{font-family:var(--body)}
bdi.num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:10px}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon.fill{fill:currentColor;stroke:none}

/* ---------- motion (whisper) ---------- */
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none}}

/* ---------- shared bits ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:var(--muted);font-size:14px;font-weight:600}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.eyebrow .en{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);font-weight:500}
.ornament{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--accent);margin:18px auto 0}
.ornament::before,.ornament::after{content:"";width:54px;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.ornament::after{transform:scaleX(-1)}
.ornament i{width:7px;height:7px;background:currentColor;transform:rotate(45deg)}

.foot{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);text-align:center;color:var(--faint);font-size:12.5px}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:10px}
.foot nav a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:13.5px;padding:6px 2px}
.foot nav a:hover{color:var(--accent-hi)}
.foot .icon{width:16px;height:16px}

/* ================= HUB ================= */
.hub-hero{text-align:center;padding-top:48px}
.hub-hero .crest{width:min(300px,78vw);margin-inline:auto}
.hub-hero .motto{font-family:var(--display);font-size:23px;color:var(--accent-hi);margin:14px 0 0}
.hub-hero .lede{color:var(--muted);font-size:15px;margin:10px auto 0;max-width:30ch;text-wrap:balance}
.doors{display:grid;gap:14px;margin-top:40px}

.door{
  --d-bg:#15130F; --d-line:rgba(255,255,255,.1); --d-ink:#F3ECDD; --d-muted:#A1978A; --d-accent:#D6B05C; --d-mark:#1B1813;
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:16px 16px 16px 14px;border-radius:var(--r-xl);
  background:var(--d-bg);border:1px solid var(--d-line);color:var(--d-ink);
  min-height:118px;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s;
}
.door:hover{transform:translateY(-2px);border-color:var(--d-accent)}
.door:active{transform:translateY(0) scale(.99)}
.door__mark{width:84px;height:84px;border-radius:var(--r-lg);background:var(--d-mark);display:grid;place-items:center;border:1px solid var(--d-line)}
.door__mark img{max-width:62px;max-height:62px;object-fit:contain}
.door__body{min-width:0}
.door__name{font-family:var(--display);font-size:25px;line-height:1.15;margin:0;font-weight:700}
.door__en{display:inline-block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--d-accent);margin-top:3px;font-weight:600}
.door__tag{margin:6px 0 0;color:var(--d-muted);font-size:13.5px;line-height:1.5}
.door__go{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--d-muted);font-size:12px;white-space:nowrap}
.door__go .arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--d-line);color:var(--d-accent)}
.door--turath{--d-bg:#0B2F33;--d-line:rgba(201,164,92,.26);--d-ink:#F2EAD7;--d-muted:#A5BAB6;--d-accent:#C9A45C;--d-mark:#0E3A3E}
.door--foodfort{--d-bg:#1B1515;--d-line:rgba(225,37,43,.3);--d-ink:#FFF4EC;--d-muted:#BDAFA9;--d-accent:#F0393F;--d-mark:#241C1B}
.door--arido{--d-bg:#F4E6CB;--d-line:rgba(108,28,30,.2);--d-ink:#3A1112;--d-muted:#7E5E53;--d-accent:#C8641D;--d-mark:#FBF3E3}
.door--arido .door__name{color:#6C1C1E}

/* ================= BRAND PAGE ================= */
.top{display:flex;justify-content:space-between;align-items:center;padding-top:18px}
.back{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 12px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);font-size:13.5px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.back:hover{color:var(--ink);border-color:var(--line-strong)}
.back .icon{width:17px;height:17px}
.top .group{font-family:var(--display);color:var(--faint);font-size:14px}

.hero{text-align:center;padding-top:30px}
.hero .mark{height:128px;width:auto;margin-inline:auto;object-fit:contain}
.t-foodfort .hero .mark{height:150px}
.t-arido .hero .mark{height:auto;width:min(230px,64vw)}
.t-arido .hero h1,.t-arido .hero .en{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t-arido .hero .tag{margin-top:18px}
.hero h1{font-family:var(--display);font-size:clamp(32px,9vw,40px);line-height:1.15;margin:22px 0 0;font-weight:700}
.t-arido .hero h1{color:var(--accent)}
.hero .en{display:inline-block;margin-top:6px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-hi);font-weight:600}
.t-arido .hero .en{color:var(--accent-hi)}
.hero .tag{color:var(--muted);font-size:15.5px;margin:12px auto 0;max-width:32ch;text-wrap:balance}
.hero .quick{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:9px;height:44px;padding-inline:18px;border-radius:999px;font-size:15px;font-weight:600;
  border:1px solid var(--line-strong);color:var(--ink);background:var(--surface)}
.chip .icon{color:var(--accent-hi)}
.chip:hover{border-color:var(--accent)}
.chip.static{border-color:var(--line);color:var(--muted);font-weight:500}

.branches{margin-top:40px}
.branch{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);margin-bottom:12px;overflow:hidden;
  transition:border-color .25s,background .25s}
.branch[open]{border-color:var(--line-strong);background:var(--surface-2)}
.branch summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 18px;min-height:68px}
.branch summary::-webkit-details-marker{display:none}
.branch .pin{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-hi)}
.t-arido .branch .pin{color:var(--accent)}
.branch .pin .icon{width:19px;height:19px}
.branch .city{font-family:var(--display);font-size:21px;line-height:1.2;font-weight:600}
.branch .has{display:block;font-family:var(--body);font-size:12.5px;color:var(--faint);margin-top:2px;font-weight:400}
.branch .chev{color:var(--muted);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.branch[open] .chev{transform:rotate(180deg);color:var(--accent-hi)}
.branch__body{padding:2px 18px 18px}
.btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:var(--r-md);
  background:var(--accent);color:var(--on-accent);font-size:16.5px;font-weight:700;letter-spacing:.01em}
.btn-primary:hover{background:var(--accent-hi)}
.t-arido .btn-primary:hover{background:#86262A}
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-top:10px}
.act{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:12px;border:1px solid var(--line);
  color:var(--ink);font-size:14.5px;font-weight:500;background:color-mix(in srgb,var(--ground) 35%,transparent)}
.act:hover{border-color:var(--line-strong)}
.act .icon{width:18px;height:18px;color:var(--muted)}

@media (min-width:720px){
  body{padding-inline:32px}
  .hub-hero{padding-top:72px}
  .page{max-width:560px}
}

/* heritage lattice — an 8-point star grid, faded, only on the heritage heroes */
.hub-hero,.t-turath .hero{position:relative;isolation:isolate}
.hub-hero::before,.t-turath .hero::before{content:"";position:absolute;z-index:-1;inset:-10px -20px auto;height:440px;
  background-size:56px 56px;opacity:.09;
  -webkit-mask-image:radial-gradient(65% 60% at 50% 38%,#000 20%,transparent 78%);mask-image:radial-gradient(65% 60% at 50% 38%,#000 20%,transparent 78%)}
.hub-hero::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none' stroke='%23D6B05C' stroke-width='1'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Cpath d='M28 12.44L43.56 28 28 43.56 12.44 28Z M28 0V12.44 M28 43.56V56 M0 28H12.44 M43.56 28H56'/%3E%3C/svg%3E")}
.t-turath .hero::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none' stroke='%23C9A45C' stroke-width='1'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Cpath d='M28 12.44L43.56 28 28 43.56 12.44 28Z M28 0V12.44 M28 43.56V56 M0 28H12.44 M43.56 28H56'/%3E%3C/svg%3E");opacity:.08}