/* Full-page background + Times + brown cards + white toggles + DARK contact box */
:root{
  --fg:#f8fafc;
  --text-muted:#e2e8f0;
  --card:#0b1b2a;            /* brown */
  --card-border:#071a2d;      /* darker brown border */
  --card-text:#ffffff;        /* white writing */
  --primary:#0ea5e9;
  --primary-600:#0284c7;
  --border:#e2e8f0;
  --radius:16px;
  --shadow:0 8px 20px rgba(0,0,0,0.25);
}
*{box-sizing:border-box}
html,body{ position:relative; min-height:100dvh; overflow-x:hidden;  margin:0;padding:0;height:100%}
body{ 
  color:var(--fg);
  font-family:"Times New Roman", Times, serif;
  /* background moved to ::before/::after for animation */
}

/* Animated DTLA background: subtle Ken Burns pan/zoom */
body{  position: relative; overflow-x:hidden; }
/* dark overlay for readability */
@keyframes kenburns{
  0%   { transform: scale(1.06) translate3d(-1.5%, -1.5%, 0); background-position: 48% 52%; }
  50%  { transform: scale(1.10) translate3d(0%, 0%, 0);      background-position: 50% 50%; }
  100% { transform: scale(1.06) translate3d(1.5%, 1.5%, 0);  background-position: 52% 48%; }
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  }

body[data-dir="rtl"]{
  font-family:"Times New Roman","Traditional Arabic","Amiri","Noto Naskh Arabic",serif;
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.flex{display:flex}.space-between{justify-content:space-between}.align-center{align-items:center}.gap-8{gap:8px}
.row{display:flex}.grid-2,.grid-3,.grid-4{display:grid;gap:24px}.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:1fr}
@media (min-width:820px){.grid-2{grid-template-columns:1.2fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

.topbar{position:sticky;top:0;z-index:99;border-bottom:1px solid rgba(255,255,255,.15)}
.glass-dark{backdrop-filter:blur(8px);background:rgba(0,0,0,.20)}
.topbar .brand-name{font-weight:700}.logo{width:40px;height:40px}.logo.small{width:28px;height:28px}

/* Language toggles: white text */
.ghost{background:transparent;border:1px solid rgba(255,255,255,.35);padding:8px 12px;border-radius:10px;color:#ffffff}
.ghost span{color:#ffffff}
.ghost:hover{background:rgba(255,255,255,.15)}

.section{padding:64px 0}.center{text-align:center}.sub{color:var(--text-muted)}
.bullets{list-style:none;padding-left:0;margin:16px 0}.bullets li{margin:8px 0}

.btn{background:var(--primary);color:#fff;padding:10px 16px;border-radius:12px;display:inline-block;box-shadow:var(--shadow);border:1px solid var(--primary);transition:background .2s}
.btn:hover{background:var(--primary-600)}.btn.outline{background:rgba(255,255,255,.9);color:#0ea5e9;border-color:#7dd3fc}.btn.small{padding:8px 12px;border-radius:10px}.btn.block{width:100%;text-align:center}

/* Brown cards with white writing */
.card{
  background:var(--card);
  color:var(--card-text);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}
.card h3, .card h4, .card .label, .card .num, .card p, .card ul, .card li, .card strong { color: var(--card-text); }
.card a { color: var(--card-text); text-decoration: underline; text-underline-offset: 2px; }

/* CONTACT box: dark brown with white inputs */
.glass{
  background: var(--card);
  color: var(--card-text);
  border:1px solid var(--card-border);
  box-shadow: var(--shadow);
}
.glass h3{ color: var(--card-text); }
.glass label{ display:block; margin-bottom:10px; }
.glass label span{ display:block; margin-bottom:6px; color: var(--card-text); font-weight:600; }
.glass input,
.glass textarea{
  width:100%;
  color:#ffffff;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.glass input::placeholder,
.glass textarea::placeholder{ color: rgba(255,255,255,.75); }
.glass input:focus,
.glass textarea:focus{
  border-color:#facc15;
  box-shadow: 0 0 0 3px rgba(250,204,21,.3);
}

.stats .num{font-size:40px;font-weight:800}
.hours ul{margin:0;padding-left:18px}

.contact-band{background:rgba(255,255,255,.92);color:#0f172a;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.footer{border-top:1px solid rgba(255,255,255,.2);padding:24px 0}

body[data-dir="rtl"] .bullets,body[data-dir="rtl"] .hours ul{padding-left:0;padding-right:18px}

/* --- Animated DTLA background (Ken Burns) --- */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  background-image:url('assets/scale.jpg');
  background-size:115%;
  background-position:50% 50%;
  background-repeat:no-repeat;
  transform:scale(1.04);
  animation:kenburns 15s ease-in-out infinite alternate;
  will-change:transform, background-position;
}
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
  pointer-events:none;
}
@keyframes kenburns{
  0%   { transform:scale(1.03) translate3d(-1.5%, -1.5%, 0); background-position:48% 52%; }
  50%  { transform:scale(1.10) translate3d( 0%,   0%,   0); background-position:50% 50%; }
  100% { transform:scale(1.03) translate3d( 1.5%, 1.5%, 0); background-position:52% 48%; }
}
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; transform:none; background-size:cover; }
}


/* was 40px */
.topbar .brand-name{ font-size:2.25rem; line-height:1.1; }  /* ~36px */
.topbar .ghost{ padding:24px 36px; font-size:1.25rem; border-radius:16px; }
.topbar .btn{ padding:24px 36px; font-size:1.25rem; border-radius:16px; }


/* === Vintage painting-style frame for header logo === */
.logo-frame{
  display:flex; align-items:center; justify-content:center;
  width: 160px; height: 160px;           /* container around the 120px logo */
  padding: 20px;                          /* space between frame and logo */
  background: #0b1b2a;                    /* deep navy "canvas" */
  border: 24px solid transparent;
  border-image: url('assets/vintage-frame.svg') 80 fill stretch;
  border-radius: 18px;                     /* soften edges */
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.topbar .logo{ width: 120px; height: 120px; } /* keep 3x header scale */
@media (max-width: 640px){
  .logo-frame{ width: 120px; height: 120px; padding: 14px; border-width:18px; }
  .topbar .logo{ width: 90px; height: 90px; }
}


/* === Double-sized header & contents (2×) === */
.topbar .container{ padding-top:32px; padding-bottom:32px; }
.topbar .brand{ gap:16px; }
.topbar .actions{ gap:16px; }
.topbar .brand-name{ font-size:1.8rem; line-height:1.1; } /* ~29px */
.topbar .ghost{ padding:16px 24px; font-size:1.1rem; border-radius:14px; }
.topbar .btn{ padding:16px 24px; font-size:1.1rem; border-radius:14px; }


/* === Vintage frame (ensure applied) === */
.logo-frame{
  display:flex; align-items:center; justify-content:center;
  width: 110px; height: 110px;     /* container around 80px logo */
  padding: 14px;                    /* space between frame and logo */
  background: #0b1b2a;              /* deep navy "canvas" */
  border: 18px solid transparent;
  border-image: url('assets/vintage-frame.svg') 80 fill stretch;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.topbar .logo{ width: 80px; height: 80px; }   /* 2× header scale */
@media (max-width: 640px){
  .logo-frame{ width: 90px; height: 90px; padding: 12px; border-width:16px; }
  .topbar .logo{ width: 64px; height: 64px; }
}


/* Make the header logo clickable without changing layout */
.logo-link{ display:inline-flex; align-items:center; justify-content:center; }
.logo-link:hover{ filter: brightness(1.06); }