body.hb-home{
  --ink:#08190F;
  --green-900:#0B2417;
  --green-800:#123A26;
  --green-700:#1B5E3F;
  --sand:#E8C9A0;
  --cream:#F7EAD7;
  --gold:#C9A24B;
  --gold-soft:#E3C583;
  --ember:#C7362B;
  --line:rgba(201,162,75,.28);
  --display:'Amiri','Times New Roman',serif;
  --body:'Inter',system-ui,sans-serif;
  --util:'Cairo','Inter',sans-serif;
}
body.hb-home, body.hb-home *{box-sizing:border-box}
html, body.hb-home{height:100%}
body.hb-home{
  margin:0; height:100svh; overflow:hidden;
  background:var(--ink); color:var(--cream);
  font-family:var(--body); font-weight:300; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.hb-home h1{font-family:var(--display); font-weight:400; margin:0; line-height:1.08}
body.hb-home p{margin:0}
body.hb-home a{color:inherit; text-decoration:none}
body.hb-home button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
body.hb-home .pre{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:radial-gradient(125% 85% at 50% 45%, rgba(27,94,63,.42), transparent 62%), var(--ink);
  transition:opacity .85s ease, transform 1.05s cubic-bezier(.6,0,.3,1);
}
body.hb-home .pre.lift{opacity:0; transform:scale(1.045); pointer-events:none}
body.hb-home .pre.gone{display:none}
body.hb-home .pre-inner{width:100%; text-align:center; padding:2rem 6vw}

/* the name, written right to left, and left fully legible */
body.hb-home .pre-ar-wrap{position:relative; display:block; padding:.14em 0}
body.hb-home .pre-ar{
  display:inline-block; direction:rtl; white-space:nowrap;
  font-family:var(--display); font-weight:400;
  font-size:clamp(3.2rem,11vw,7.5rem); line-height:1.45;
  color:var(--gold);
  clip-path:inset(-25% 0 -25% 100%);
  animation:write 1.7s cubic-bezier(.42,.02,.4,1) .35s forwards;
}
@keyframes write{to{clip-path:inset(-25% 0 -25% 0)}}

/* a pool of light riding the leading edge of the stroke */
body.hb-home .pre-nib{
  position:absolute; top:50%; width:clamp(90px,16vw,170px); height:clamp(90px,16vw,170px);
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; opacity:0; left:88%;
  background:radial-gradient(circle, rgba(243,223,174,.45), rgba(201,162,75,.14) 44%, transparent 70%);
  animation:nib 1.7s cubic-bezier(.42,.02,.4,1) .35s forwards;
}
@keyframes nib{
  0%{left:88%; opacity:0}
  12%{opacity:1}
  84%{opacity:1}
  100%{left:12%; opacity:0}
}

/* a rule that opens outward from the centre, lozenge at each end */
body.hb-home .pre-rule{
  position:relative; width:min(300px,60vw); height:1px; margin:2.4rem auto 0;
  background:rgba(201,162,75,.12); animation:reveal .8s ease 1.55s both;
}
body.hb-home .pre-rule i{
  position:absolute; left:50%; top:0; height:1px; width:0; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-soft) 50%, var(--gold) 78%, transparent);
  animation:ruleOpen 1.35s cubic-bezier(.5,.05,.3,1) 1.55s forwards;
}
body.hb-home .pre-rule i::before,
body.hb-home .pre-rule i::after{
  content:''; position:absolute; top:-2.5px; width:5px; height:5px;
  background:var(--gold-soft); transform:rotate(45deg);
}
body.hb-home .pre-rule i::before{left:-2.5px}
body.hb-home .pre-rule i::after{right:-2.5px}
@keyframes ruleOpen{to{width:100%}}

@media(prefers-reduced-motion:reduce){
  body.hb-home .pre-ar{clip-path:none}
  body.hb-home .pre-nib{display:none}
  body.hb-home .pre-rule i{width:100%}
}

/* ---- header logo ---- */
body.hb-home .nav-mark{display:inline-flex; align-items:center; line-height:0}
body.hb-home .nav-mark img{
  height:clamp(38px,4.4vw,52px); width:auto; display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
  transition:transform .45s cubic-bezier(.2,.8,.3,1), filter .45s;
}
body.hb-home .nav-mark:hover img{
  transform:translateY(-1px) scale(1.02);
  filter:drop-shadow(0 4px 16px rgba(201,162,75,.32));
}
body.hb-home .cur-dot, body.hb-home .cur-ring{
  position:fixed; top:0; left:0; z-index:300; pointer-events:none;
  will-change:transform; opacity:0; transition:opacity .3s;
}
body.hb-home .cur-dot{width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--gold)}
body.hb-home .cur-ring{
  width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%;
  border:1px solid rgba(201,162,75,.5); display:grid; place-items:center;
  transition:opacity .3s, width .35s cubic-bezier(.2,.8,.3,1), height .35s cubic-bezier(.2,.8,.3,1),
             border-color .35s, background .35s, margin .35s cubic-bezier(.2,.8,.3,1);
}
body.hb-home .cur-ring svg{width:15px; height:15px; opacity:0; transform:scale(.5); transition:opacity .3s, transform .4s cubic-bezier(.2,.8,.3,1)}
body.hb-home .cur-ring svg path{fill:var(--ember)}
body.hb-home.cur-on .cur-dot, body.hb-home.cur-on .cur-ring{opacity:1}
body.hb-home.cur-hot .cur-dot{opacity:0}
body.hb-home.cur-hot .cur-ring{width:54px; height:54px; margin:-27px 0 0 -27px; border-color:rgba(201,162,75,.9); background:rgba(201,162,75,.12)}
body.hb-home.cur-hot .cur-ring svg{opacity:1; transform:scale(1)}
@media(hover:hover) and (pointer:fine){
body.hb-home.cur-on, body.hb-home.cur-on a, body.hb-home.cur-on button{cursor:none}
}
body.hb-home .nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; padding:1.1rem 4vw;
  background:linear-gradient(180deg, rgba(11,36,23,.52), rgba(11,36,23,.26));
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid rgba(201,162,75,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px rgba(0,0,0,.2);
}
body.hb-home .lang{display:flex; align-items:center; gap:.15rem; border:1px solid var(--line); border-radius:999px; padding:.2rem; position:relative}
body.hb-home .lang-pill{position:absolute; top:.2rem; bottom:.2rem; border-radius:999px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  transition:transform .45s cubic-bezier(.2,.8,.3,1), width .45s cubic-bezier(.2,.8,.3,1)}
body.hb-home .lang button{position:relative; z-index:2; border:0; background:none; padding:.42em .95em; border-radius:999px;
  font-family:var(--util); font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(247,234,215, 0.78); cursor:pointer; transition:color .35s}
body.hb-home .lang button.on{color:var(--green-900)}
@media(max-width:520px){
body.hb-home .lang button{padding:.4em .7em; font-size:.56rem}
}
body.hb-home .nav-phone{
  font-family:var(--util); font-size:.72rem; font-weight:600; letter-spacing:.12em;
  color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:.6em 1.3em;
  transition:background .3s, color .3s;
}
body.hb-home .nav-phone:hover{background:var(--gold); color:var(--green-900)}
@media(max-width:640px){
body.hb-home .nav{padding:1rem 5vw}
body.hb-home .nav-phone{font-size:.64rem; padding:.55em 1.1em}
}
body.hb-home .hero{
  position:relative; height:100svh; display:grid; grid-template-rows:1fr auto;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(27,94,63,.55), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(201,162,75,.10), transparent 70%),
    var(--ink);
  text-align:center; padding:5.5rem 0 0; overflow:hidden;
}
body.hb-home .calligraphy{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  font-family:var(--display); color:var(--gold); opacity:.055; user-select:none;
}
body.hb-home .calligraphy span{
  position:absolute; font-size:clamp(9rem,26vw,24rem); line-height:1; white-space:nowrap;
  animation:drift 46s ease-in-out infinite alternate;
}
body.hb-home .calligraphy span:nth-child(1){top:-8%; left:-12%}
body.hb-home .calligraphy span:nth-child(2){bottom:-18%; right:-16%; animation-delay:-18s; animation-duration:60s}
body.hb-home .calligraphy span:nth-child(3){top:36%; left:32%; font-size:clamp(4rem,11vw,9rem); animation-delay:-32s; animation-duration:72s}
body.hb-home .calligraphy .lat{font-style:italic; opacity:.7}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(-2deg)}to{transform:translate3d(4%,3%,0) rotate(2deg)}}
body.hb-home .hero-inner{position:relative; z-index:3; max-width:760px; align-self:center; justify-self:center; padding:0 5vw; min-height:0}
body.hb-home .wordmark{
  font-size:clamp(4rem,14vw,10rem); color:var(--sand); letter-spacing:-.02em; margin-bottom:.1em;
  animation:reveal 1.3s cubic-bezier(.2,.8,.3,1) 2.5s both;
}
body.hb-home .wordmark em{font-style:normal; color:var(--gold)}
body.hb-home .signature{
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  margin:.35rem auto 1.3rem; max-width:320px;
  font-family:var(--display); font-style:italic; font-size:clamp(.92rem,1.9vw,1.12rem);
  color:var(--gold); letter-spacing:.06em;
  animation:reveal 1.1s cubic-bezier(.2,.8,.3,1) 2.62s both;
}
body.hb-home .signature i{flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(201,162,75,.55)); font-style:normal}
body.hb-home .signature i:last-child{background:linear-gradient(90deg,rgba(201,162,75,.55),transparent)}
body.hb-home .hero-tag{
  font-family:var(--display); font-style:italic; font-size:clamp(1.05rem,2.4vw,1.5rem);
  color:var(--gold-soft); letter-spacing:.06em;
  animation:reveal 1.1s cubic-bezier(.2,.8,.3,1) 2.7s both;
}
body.hb-home .hero-tag-ro{
  margin-top:.9rem; font-size:clamp(.9rem,1.7vw,1.05rem); color:rgba(247,234,215, 0.86);
  min-height:3.3em; display:flex; align-items:center; justify-content:center;
  animation:reveal 1.1s cubic-bezier(.2,.8,.3,1) 2.85s both;
}
@media(max-width:600px){
body.hb-home .hero-tag-ro{min-height:5em}
}
body.hb-home .rot{display:inline-block; will-change:transform,opacity}
body.hb-home .rot.in{animation:rotIn .75s cubic-bezier(.2,.8,.3,1) both}
body.hb-home .rot.out{animation:rotOut .45s cubic-bezier(.5,0,.75,0) both}
@keyframes rotIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes rotOut{from{opacity:1; transform:none}to{opacity:0; transform:translateY(-14px)}}
body.hb-home .hero-cta{
  display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem;
  animation:reveal 1.1s cubic-bezier(.2,.8,.3,1) 3s both;
}
@keyframes reveal{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
body.hb-home .btn{
  display:inline-flex; align-items:center; padding:1em 1.7em; border-radius:999px;
  font-family:var(--util); font-weight:600; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), background .35s, color .35s, box-shadow .35s, border-color .35s;
}
body.hb-home .btn-solid{background:var(--gold); color:var(--green-900)}
body.hb-home .btn-solid:hover{background:var(--cream); transform:translateY(-2px); box-shadow:0 14px 34px rgba(201,162,75,.22)}
body.hb-home .btn-ghost{border:1px solid var(--line); color:var(--sand)}
body.hb-home .btn-ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}
body.hb-home .hero-rail{
  position:relative; z-index:4;
  display:flex; justify-content:center; gap:clamp(1.2rem,5vw,4rem); flex-wrap:wrap;
  padding:1.1rem 5vw; border-top:1px solid rgba(201,162,75,.2);
  background:linear-gradient(0deg, rgba(11,36,23,.52), rgba(11,36,23,.26));
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 -10px 30px rgba(0,0,0,.2);
  animation:reveal 1s ease 3.2s both;
}
body.hb-home .hero-rail b{color:var(--gold); font-weight:600}
body.hb-home .toast{
  position:fixed; left:50%; bottom:5.5rem; transform:translate(-50%,14px); z-index:150;
  background:rgba(11,36,23,.96); border:1px solid var(--line); color:var(--sand);
  padding:.85em 1.6em; border-radius:999px;
  font-family:var(--util); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; pointer-events:none; transition:opacity .35s, transform .35s cubic-bezier(.2,.8,.3,1);
}
body.hb-home .toast.show{opacity:1; transform:translate(-50%,0)}
body.hb-home :focus-visible{outline:2px solid var(--gold); outline-offset:3px}
@media(prefers-reduced-motion:reduce){
body.hb-home, body.hb-home *{animation-duration:.001s !important; animation-delay:0s !important; transition-duration:.001s !important}
}
body.admin-bar.hb-home .nav{top:32px}
@media(max-width:782px){body.admin-bar.hb-home .nav{top:46px}}

body.admin-bar.hb-home .hero{height:calc(100svh - 32px)}
@media(max-width:782px){body.admin-bar.hb-home .hero{height:calc(100svh - 46px)}}
@media(max-height:620px){
body.hb-home{height:auto; min-height:100svh; overflow:auto}
body.hb-home .hero{height:auto; min-height:100svh}
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
body.hb-home .nav{background:rgba(8,25,15,.92)}
body.hb-home .hero-rail{background:rgba(8,25,15,.92)}
}

/* ============================================================
   Habibi home - refined header and footer bars.
   Gilt hairline edges, labelled columns, serif values.
   ============================================================ */

/* ---------- header ---------- */
body.hb-home .nav{
  padding:1.35rem 4vw;
  background:linear-gradient(180deg, rgba(11,36,23,.58), rgba(11,36,23,.28));
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  backdrop-filter:blur(22px) saturate(155%);
  border-bottom:1px solid rgba(201,162,75,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 34px rgba(0,0,0,.24);
}
/* a gilt hairline that fades at both ends, like the edge of gold leaf */
body.hb-home .nav::after{
  content:''; position:absolute; bottom:-1px; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,162,75,.75), transparent);
}

body.hb-home .lang{border-color:rgba(201,162,75,.24); padding:.22rem}
body.hb-home .lang button{font-size:.58rem; letter-spacing:.2em; padding:.5em 1.05em}
body.hb-home .nav-phone{
  font-size:.66rem; letter-spacing:.2em; padding:.75em 1.5em;
  border-color:rgba(201,162,75,.34);
  transition:background .4s, color .4s, box-shadow .4s;
}
body.hb-home .nav-phone:hover{box-shadow:0 8px 24px rgba(201,162,75,.2)}

/* ---------- footer rail ---------- */
body.hb-home .hero-rail{
  padding:1.6rem 5vw 1.75rem;
  border-top:1px solid rgba(201,162,75,.22);
  background:linear-gradient(0deg, rgba(11,36,23,.6), rgba(11,36,23,.3));
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  backdrop-filter:blur(22px) saturate(155%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 -12px 34px rgba(0,0,0,.24);
}
body.hb-home .hero-rail::before{
  content:''; position:absolute; top:-1px; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,162,75,.75), transparent);
}
body.hb-home .rail-in{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1.5rem,5vw,4.5rem); flex-wrap:wrap;
}
body.hb-home .rail-col{
  display:flex; flex-direction:column; align-items:center; gap:.42rem; text-align:center;
}
body.hb-home .rail-lb{
  font-family:var(--util); font-size:.54rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
}
body.hb-home .rail-v{
  font-family:var(--display); font-size:1.05rem; letter-spacing:.03em;
  text-transform:none; color:#fff; white-space:nowrap;
}
body.hb-home .rail-tel{transition:color .35s}
body.hb-home .rail-tel:hover{color:var(--gold-soft)}
body.hb-home .rail-sep{
  flex:0 0 auto; width:1px; height:38px;
  background:linear-gradient(180deg, transparent, rgba(201,162,75,.45), transparent);
}
@media(max-width:760px){
  body.hb-home .rail-sep{display:none}
  body.hb-home .rail-in{gap:1.15rem 2rem}
  body.hb-home .rail-v{font-size:.95rem}
  body.hb-home .rail-lb{font-size:.5rem; letter-spacing:.26em}
  body.hb-home .hero-rail{padding:1.25rem 5vw 1.35rem}
}
@media(max-width:520px){
  body.hb-home .nav{padding:1.05rem 5vw}
}

/* ---- ambient love-words: a few more tongues, kept sparse ---- */
body.hb-home .calligraphy span:nth-child(4){
  top:11%; right:5%; left:auto; font-size:clamp(2.8rem,7vw,5.4rem);
  opacity:.55; animation-delay:-42s; animation-duration:68s;
}
body.hb-home .calligraphy span:nth-child(5){
  bottom:13%; left:4%; top:auto; font-size:clamp(2.4rem,6vw,4.6rem);
  opacity:.5; animation-delay:-25s; animation-duration:76s;
}
body.hb-home .calligraphy span:nth-child(6){
  top:63%; right:13%; left:auto; font-size:clamp(2rem,5vw,3.7rem);
  opacity:.42; animation-delay:-58s; animation-duration:84s;
}
/* Amiri carries no Cyrillic - keep that one in a serif that does */
body.hb-home .calligraphy .cyr{font-family:Georgia,'Times New Roman',serif}
/* on small screens the extra words would crowd the mark */
@media(max-width:900px){
body.hb-home .calligraphy span:nth-child(5),
body.hb-home .calligraphy span:nth-child(6){display:none}
}

/* ============================================================
   Phone layout. The header keeps only the mark and the language
   switch - the number lives in the footer, where there is room
   to read it. The footer packs into three short columns.
   ============================================================ */
@media(max-width:640px){
  body.hb-home .nav{padding:.8rem 4.5vw}
  body.hb-home .nav-phone{display:none}
  body.hb-home .nav-mark img{height:34px}
  body.hb-home .lang{padding:.18rem}
  body.hb-home .lang button{font-size:.53rem; letter-spacing:.14em; padding:.52em .9em}

  body.hb-home .hero{padding:4.4rem 0 0}
  body.hb-home .hero-rail{padding:.85rem 4vw .95rem}
  body.hb-home .rail-in{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:.5rem .5rem; align-items:start;
  }
  body.hb-home .rail-col{gap:.26rem}
  body.hb-home .rail-lb{font-size:.44rem; letter-spacing:.16em}
  body.hb-home .rail-v{font-size:.74rem; line-height:1.3; white-space:normal}
  body.hb-home .rail-sep{display:none}
}
@media(max-width:380px){
  body.hb-home .rail-v{font-size:.68rem}
  body.hb-home .nav-mark img{height:30px}
}

/* the phone number is hidden on handhelds - it lives in the footer,
   where there is room to read and tap it */
@media(max-width:820px){
  body.hb-home .nav .nav-phone,
  body.hb-home a.nav-phone{display:none !important}
}

/* the logo is a link - give it a real tap target and visible feedback.
   The negative margin cancels the padding so nothing shifts visually. */
body.hb-home .nav-mark{
  padding:.4rem .55rem; margin:-.4rem -.55rem; border-radius:8px;
  cursor:pointer; -webkit-tap-highlight-color:rgba(201,162,75,.2);
  transition:background .3s;
}
body.hb-home .nav-mark:hover{background:rgba(201,162,75,.07)}
body.hb-home .nav-mark:active img{transform:scale(.96)}
body.hb-home .nav-mark:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
@media(max-width:820px){
  body.hb-home .nav-mark{min-height:44px; min-width:44px; justify-content:flex-start}
}