@charset "utf-8";
/* ==========================================================================
   ATHARR — holding page
   Same tokens, type and gold-on-charcoal treatment as the main site, in a
   single self-contained stylesheet. Logical properties throughout, so the
   layout mirrors for Arabic from the dir attribute alone.
   ========================================================================== */

:root{
  --ink:#0E0F12;
  --ink-2:#16181D;

  --on-dark:#EFEAE1;
  --on-dark-muted:#9DA2AB;

  --gold:#B08D4F;
  --gold-2:#CBA968;
  --gold-3:#E4CE9C;

  --line-dark:rgba(239,234,225,.14);
  --line-dark-soft:rgba(239,234,225,.08);

  --gut:clamp(20px,5vw,48px);
  --r:8px;
  --r-lg:14px;

  --sans:"Manrope","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --arabic:"IBM Plex Sans Arabic","Noto Sans Arabic",var(--sans);

  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-block-size:100svh;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--sans);
  font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html[dir="rtl"] body{font-family:var(--arabic)}

img{max-inline-size:100%;block-size:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:2px}

/* --- Frame ---------------------------------------------------------------- */
.cs{
  position:relative;isolation:isolate;overflow:hidden;
  min-block-size:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(20px,3.5vw,38px) var(--gut);
}

/* A single warm light source behind the lockup. No photograph: every hero
   image on the main site belongs to a page, and a holding page borrowing one
   would read as a duplicate. */
.cs__glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 8%,rgba(197,160,89,.22),transparent 68%),
    radial-gradient(90% 70% at 50% 120%,rgba(176,141,79,.10),transparent 70%),
    linear-gradient(to bottom,var(--ink-2),var(--ink) 55%);
}
/* Faint gold hairline grid, barely there, to stop the ground looking flat. */
.cs::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right,var(--line-dark-soft) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line-dark-soft) 1px,transparent 1px);
  background-size:clamp(60px,7vw,96px) clamp(60px,7vw,96px);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
}

/* --- Language switcher ---------------------------------------------------- */
.cs__lang{
  justify-self:end;
  display:inline-flex;gap:2px;padding:4px;
  border:1px solid var(--line-dark);border-radius:100px;
  background:rgba(255,255,255,.04);backdrop-filter:blur(8px);
}
.cs__lang-opt{
  padding:.42em 1em;border-radius:100px;
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--on-dark-muted);
  transition:color .25s var(--ease-out),background .25s var(--ease-out);
}
.cs__lang-opt:hover{color:var(--on-dark)}
.cs__lang-opt.is-on{background:var(--gold);color:#fff}

/* --- Centre column ------------------------------------------------------- */
.cs__inner{
  align-self:center;justify-self:center;
  inline-size:100%;max-inline-size:760px;
  text-align:center;
  padding-block:clamp(32px,6vw,64px);
}

.cs__logo{
  display:block;margin-inline:auto;
  block-size:clamp(30px,4.4vw,54px);inline-size:auto;
  /* Physical properties: the lockup must never re-orient in RTL. */
  margin-block-end:clamp(26px,3.6vw,42px);
}

.cs__eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  margin:0 0 1.3rem;padding:.6em 1.4em;
  border-radius:100px;border:0;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  font-size:.82rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#14161A;
  /* A warm halo, so the badge lifts off the charcoal instead of sitting on it. */
  box-shadow:0 0 0 1px rgba(228,206,156,.45),0 10px 30px -8px rgba(176,141,79,.55);
}
html[dir="rtl"] .cs__eyebrow{letter-spacing:.05em;font-size:.92rem}

.cs__pulse{
  inline-size:7px;block-size:7px;border-radius:50%;flex:none;
  background:#14161A;box-shadow:0 0 0 0 rgba(20,22,26,.55);
  animation:csPulse 2.4s var(--ease-out) infinite;
}
@keyframes csPulse{
  0%  {box-shadow:0 0 0 0 rgba(20,22,26,.45)}
  70% {box-shadow:0 0 0 8px rgba(20,22,26,0)}
  100%{box-shadow:0 0 0 0 rgba(20,22,26,0)}
}

.cs__h1{
  margin:0 0 1.15rem;
  font-size:clamp(2.05rem,5.6vw,3.7rem);
  font-weight:800;line-height:1.06;letter-spacing:-.032em;
  color:#fff;
  text-wrap:balance;
}
html[dir="rtl"] .cs__h1{letter-spacing:0;line-height:1.2;font-weight:700}

.cs__lead{
  margin:0 auto;max-inline-size:56ch;
  font-size:clamp(1rem,1.5vw,1.14rem);
  color:rgba(239,234,225,.78);
  text-wrap:pretty;
}

/* A gold rule between the promise and the practicalities. */
.cs__note{
  margin:clamp(28px,3.4vw,40px) auto 0;max-inline-size:58ch;
  padding-block-start:clamp(26px,3.2vw,36px);
  border-block-start:1px solid var(--line-dark);
  font-size:.925rem;color:var(--on-dark-muted);
}

/* --- Countdown ----------------------------------------------------------- */
.cs__count{margin-block-start:clamp(30px,3.8vw,44px)}
.cs__count-lbl{
  margin:0 0 .85rem;
  font-size:.71rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-muted);
}
html[dir="rtl"] .cs__count-lbl{letter-spacing:.04em;font-size:.8rem}

.cs__clock{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.2vw,14px);
}
.cs__clock li{
  min-inline-size:clamp(66px,8vw,88px);
  padding:.75rem .5rem .65rem;
  border:1px solid var(--line-dark);border-radius:var(--r-lg);
  background:rgba(255,255,255,.035);
}
.cs__clock b{
  display:block;
  font-size:clamp(1.5rem,3.2vw,2.05rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.1;color:#fff;
  /* Digits must not reflow as they tick. */
  font-variant-numeric:tabular-nums;
}
.cs__clock span{
  display:block;margin-block-start:.2rem;
  font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-muted);
}
html[dir="rtl"] .cs__clock span{letter-spacing:0;font-size:.74rem}
/* The clock reads left to right in every locale: it is a duration, not prose. */
html[dir="rtl"] .cs__clock{direction:ltr}

/* --- Reach --------------------------------------------------------------- */
.cs__reach{margin-block-start:clamp(30px,3.8vw,44px)}
.cs__reach-h{
  margin:0 0 1rem;
  font-size:.71rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-3);
}
html[dir="rtl"] .cs__reach-h{letter-spacing:.04em;font-size:.8rem}

.cs__links{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.7rem;
}
@media (min-width:680px){.cs__links{grid-template-columns:repeat(3,1fr)}}

.cs__links a{
  display:grid;gap:.15rem;block-size:100%;
  padding:1rem .9rem;
  border:1px solid var(--line-dark);border-radius:var(--r-lg);
  background:rgba(255,255,255,.035);
  transition:border-color .3s var(--ease-out),background .3s var(--ease-out),transform .3s var(--ease-out);
}
.cs__links a:hover{
  border-color:rgba(197,160,89,.5);background:rgba(176,141,79,.12);
  transform:translateY(-2px);
}
.cs__links svg{
  inline-size:19px;block-size:19px;justify-self:center;
  color:var(--gold-2);margin-block-end:.3rem;
}
.cs__links-lbl{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark-muted);
}
html[dir="rtl"] .cs__links-lbl{letter-spacing:0;font-size:.74rem}
.cs__links b{
  font-size:.9rem;font-weight:600;color:var(--on-dark);
  overflow-wrap:anywhere;
}

.cs__hours{
  margin:1.05rem 0 0;
  font-size:.8rem;color:var(--on-dark-muted);
}

/* --- Footer -------------------------------------------------------------- */
.cs__foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  padding-block-start:clamp(18px,2.4vw,26px);
  border-block-start:1px solid var(--line-dark-soft);
  font-size:.78rem;color:var(--on-dark-muted);
}
.cs__foot p{margin:0}

/* --- Entrance ------------------------------------------------------------ */
/* Only with JS: without it the content must simply be there. */
.js .cs__inner > *{
  animation:csIn .9s var(--ease-out) both;
}
.js .cs__logo{animation-delay:.05s}
.js .cs__eyebrow{animation-delay:.13s}
.js .cs__h1{animation-delay:.20s}
.js .cs__lead{animation-delay:.27s}
.js .cs__count{animation-delay:.34s}
.js .cs__note{animation-delay:.40s}
.js .cs__reach{animation-delay:.46s}

@keyframes csIn{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .js .cs__inner > *{animation:none}
  .cs__pulse{animation:none}
  .cs__links a:hover{transform:none}
  html{scroll-behavior:auto}
}

/* --- Print --------------------------------------------------------------- */
@media print{
  body{background:#fff;color:#000}
  .cs__glow,.cs::after,.cs__lang{display:none}
  .cs__h1{color:#000}
  .cs__links a{border-color:#bbb}
}