/* =============================================================================
   Footer: the last scene (footer.php, assets/js/footer.js).

   A near-black stage with a blue undertone. One question, set very large;
   one way forward. Behind it the Bemuar mark built as a network: the two
   halves of the logo are two regions of nodes, the letters cut through the
   mark are the bright line running through both. Below, contact and
   navigation with clear hierarchy; at the very bottom a quiet bar.

   footer.js adds .is-js (build-ups allowed), .is-in (footer reached),
   --fx (how far the lights are down, 0 to 1) and data-hl (the part of the
   mark that is lit: b, i or w).
   ============================================================================= */

@font-face{
  font-family:'Geist Mono';
  src:url(../fonts/geist-mono.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

.bft{
  --ft-ink:#F3F5F8;
  --ft-soft:#B9C2CD;
  --ft-muted:#7E8894;
  --ft-line:rgba(255,255,255,.09);
  --ft-accent:#5070F8;
  --ft-accent-2:#93A6FF;
  --ft-head:var(--font-head,'Bricolage Grotesque',system-ui,sans-serif);
  --ft-body:var(--font-body,'Satoshi',system-ui,sans-serif);
  --ft-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ft-e:cubic-bezier(.2,.7,.1,1);
  --ft-pad:clamp(20px,4vw,56px);
  --ft-max:1400px;
  position:relative; overflow:clip; color:var(--ft-soft);
  background:#07090D;
  background:color-mix(in srgb, #141A23 calc((1 - var(--fx,1)) * 100%), #06080B);
  font-family:var(--ft-body);
}
:lang(ar) .bft{ --ft-mono:var(--font-body,system-ui,sans-serif); }
:lang(ar) .bft *{ letter-spacing:0 !important; }
.bft a{ color:inherit; }
.bft a:focus-visible{ outline:2px solid var(--ft-accent-2); outline-offset:4px; border-radius:2px; }
.bft-in{ position:relative; z-index:1; width:100%; max-width:var(--ft-max); margin-inline:auto; padding-inline:var(--ft-pad); }

/* ---- small technical labels ---- */
.bft-label, .bft-k, .bft-geo, .bft-note, .bft-l-a{
  font-family:var(--ft-mono); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}

/* =============================================================================
   The stage
   ============================================================================= */
.bft-stage{
  position:relative; display:flex; align-items:center;
  min-height:clamp(640px,96vh,1000px); padding-block:clamp(96px,12vw,168px) clamp(80px,9vw,136px);
}
.bft-label{ margin:0; display:flex; flex-wrap:wrap; gap:6px 22px; font-size:12px; line-height:1; color:var(--ft-muted); }
.bft-label span + span::before{ content:"/"; margin-inline-end:22px; color:rgba(255,255,255,.22); }
.bft .bft-h{
  margin:clamp(22px,3vw,34px) 0 0; max-width:11ch; color:var(--ft-ink);
  font-family:var(--ft-head); font-size:clamp(3.2rem,10.4vw,11.5rem); font-weight:600; line-height:.9; letter-spacing:-.052em;
}
:lang(ar) .bft .bft-h{ line-height:1.15; max-width:7.5ch; font-size:clamp(2.8rem,8.4vw,9rem); }
.bft-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.bft-w > span{ display:inline-block; }

.bft-act{ display:flex; flex-wrap:wrap; align-items:center; gap:22px 48px; margin-top:clamp(40px,5vw,64px); }
.bft-cta{
  display:inline-flex; align-items:center; gap:22px; color:var(--ft-ink); text-decoration:none;
  font-family:var(--ft-head); font-size:clamp(1.45rem,2.4vw,2.25rem); font-weight:600; line-height:1; letter-spacing:-.025em;
}
.bft-cta-line{
  position:relative; flex:none; width:clamp(72px,9vw,150px); height:1px; background:rgba(255,255,255,.4);
  transition:width .6s var(--ft-e), background-color .4s var(--ft-e);
}
.bft-cta-line::after{
  content:""; position:absolute; inset-inline-end:0; top:-5px; width:10px; height:10px;
  border-top:1px solid currentColor; border-inline-end:1px solid currentColor; transform:rotate(45deg); color:rgba(255,255,255,.7);
}
[dir="rtl"] .bft-cta-line::after{ transform:rotate(-45deg); }
.bft-cta:hover .bft-cta-line, .bft-cta:focus-visible .bft-cta-line{ width:clamp(120px,15vw,240px); background:var(--ft-accent-2); }
.bft-cta:hover .bft-cta-line::after, .bft-cta:focus-visible .bft-cta-line::after{ color:var(--ft-accent-2); }
.bft-call{ margin:0; color:var(--ft-muted); font-size:16px; }
.bft-call a{ color:var(--ft-ink); text-decoration:underline; text-underline-offset:5px; text-decoration-color:rgba(255,255,255,.3); white-space:nowrap; direction:ltr; unicode-bidi:isolate; }
.bft-call a:hover{ text-decoration-color:var(--ft-accent-2); }

/* ---- the mark ---- */
.bft-markbox{
  position:absolute; z-index:0; top:50%; inset-inline-end:calc(max(var(--ft-pad), (100vw - var(--ft-max)) / 2 + var(--ft-pad)) - 5vw);
  width:min(660px,47vw); aspect-ratio:1 / 1; translate:0 -50%;
  transform:translate(var(--mx,0px), var(--my,0px)); transition:transform .8s var(--ft-e);
}
.bft-mark{ display:block; width:100%; height:100%; }
.bft-note{
  position:absolute; font-size:11px; line-height:1; color:var(--ft-muted); white-space:nowrap;
  transition:color .35s var(--ft-e), opacity .6s var(--ft-e);
}
.bft-note--b{ left:62%; top:3%; }
.bft-note--w{ left:74%; top:96%; }
.bft-note--i{ left:10%; top:84%; }
.bft[data-hl="b"] .bft-note--b, .bft[data-hl="i"] .bft-note--i, .bft[data-hl="w"] .bft-note--w{ color:var(--ft-ink); }

/* =============================================================================
   Contact and navigation
   ============================================================================= */
.bft-mid{
  display:grid; grid-template-columns:minmax(0,1fr); gap:56px;
  padding-block:clamp(64px,8vw,112px) clamp(56px,7vw,96px); border-top:1px solid var(--ft-line);
}
.bft .bft-k{ margin:0 0 20px; color:var(--ft-muted); font-size:12px; line-height:1; }
.bft-contact{ font-style:normal; }
.bft-city{ margin:0; color:var(--ft-ink); font-family:var(--ft-head); font-size:clamp(1.9rem,3.1vw,2.7rem); font-weight:600; line-height:1.02; letter-spacing:-.035em; }
.bft-geo{ margin:12px 0 0; color:var(--ft-muted); font-size:12px; letter-spacing:.1em; }
.bft-lines{ list-style:none; margin:30px 0 0; padding:0; border-top:1px solid var(--ft-line); }
.bft-lines a{
  display:grid; grid-template-columns:6.2rem minmax(0,1fr) auto; align-items:baseline; gap:12px; padding:17px 0;
  border-bottom:1px solid var(--ft-line); color:var(--ft-ink); text-decoration:none;
  font-size:clamp(1.02rem,1.25vw,1.15rem); font-weight:500; line-height:1.3;
}
.bft-l-k{ font-family:var(--ft-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ft-muted); }
.bft-l-v{ direction:ltr; unicode-bidi:isolate; text-align:start; }
.bft-l-a::after{ content:" \2192"; }
[dir="rtl"] .bft-l-a::after{ content:" \2190"; }
.bft-l-a{
  flex:none; color:var(--ft-accent-2); font-size:11px; line-height:1;
  opacity:0; transform:translateX(-8px); transition:opacity .3s var(--ft-e), transform .3s var(--ft-e);
}
[dir="rtl"] .bft-l-a{ transform:translateX(8px); }
.bft-lines a:hover .bft-l-a, .bft-lines a:focus-visible .bft-l-a{ opacity:1; transform:none; }
@media (hover:none){ .bft-l-a{ opacity:1; transform:none; } }
.bft-hours{ margin:18px 0 0; color:var(--ft-muted); font-size:14px; }

.bft-nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 28px; }
.bft .bft-g h3{
  display:flex; align-items:center; gap:12px; margin:0 0 18px; color:var(--ft-ink);
  font-family:var(--ft-head); font-size:clamp(1.15rem,1.5vw,1.4rem); font-weight:600; line-height:1.1; letter-spacing:-.02em;
}
.bft-g ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.bft-g a{ color:var(--ft-soft); font-size:15.5px; line-height:1.35; text-decoration:none; transition:color .25s var(--ft-e); }
.bft-g a:hover{ color:var(--ft-ink); }
@media (min-width:1024px){
  .bft-mid{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(48px,6vw,104px); }
  .bft-nav{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; padding-top:32px; }
}

/* =============================================================================
   The quiet end
   ============================================================================= */
.bft-low{ padding-bottom:28px; }
.bft-products{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px; margin:0; padding-block:22px;
  border-top:1px solid var(--ft-line); color:var(--ft-muted); font-size:14px;
}
.bft-products span{ color:var(--ft-soft); }
.bft-products a{ color:var(--ft-soft); text-decoration:none; }
.bft-products a::after{ content:" \2197"; color:var(--ft-muted); }
.bft-products a:hover{ color:var(--ft-ink); }
.bft-region{ padding-block:18px 6px; border-top:1px solid var(--ft-line); }
.bft-region-row{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 10px; color:var(--ft-muted); font-size:13px; line-height:1.5; }
.bft-region-row span{ flex-basis:100%; color:var(--ft-soft); font-weight:500; }
.bft-region-row a{ color:var(--ft-muted); text-decoration:none; }
.bft-region-row a:hover{ color:var(--ft-ink); }
@media (min-width:760px){ .bft-region-row span{ flex-basis:auto; min-width:17rem; } }
.bft-bar{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; margin-top:18px; padding-top:22px;
  border-top:1px solid var(--ft-line); color:var(--ft-muted); font-size:13px;
}
.bft-legal{ display:flex; gap:20px; }
.bft-legal a{ text-decoration:none; }
.bft-legal a:hover{ color:var(--ft-ink); }

/* =============================================================================
   Phones and small tablets: the question first, the mark under it
   ============================================================================= */
@media (max-width:1023px){
  .bft-stage{ flex-direction:column; align-items:stretch; min-height:0; padding-block:clamp(72px,14vw,112px) clamp(64px,11vw,96px); }
  .bft-top{ order:1; }
  .bft-markbox{ order:2; }
  .bft .bft-h{ font-size:clamp(3rem,13vw,6.5rem); }
  .bft-markbox{
    position:relative; top:auto; inset-inline-end:auto; translate:none;
    width:min(100% - 2 * var(--ft-pad), 520px); margin:clamp(28px,6vw,44px) auto 0; margin-inline-start:var(--ft-pad);
  }
  .bft-note{ font-size:10px; }
  .bft-note--b{ left:auto; right:0; top:-4%; }
  .bft-note--w{ left:auto; right:0; top:92%; }
  .bft-note--i{ left:0; top:96%; }
}
@media (max-width:560px){
  .bft-label{ flex-direction:column; gap:8px; font-size:11px; }
  .bft-label span + span::before{ display:none; }
  .bft-lines a{ grid-template-columns:5.4rem minmax(0,1fr) auto; }
  .bft-l-a{ font-size:0; }
  .bft-l-a::after{ font-size:15px; }
  .bft-act{ flex-direction:column; align-items:flex-start; gap:18px; }
  .bft-cta-line{ width:64px; }
  .bft-nav{ gap:36px 20px; }
  .bft-g a{ font-size:15px; }
}

/* =============================================================================
   Build-up when the footer is reached (script and motion only)
   ============================================================================= */
.bft.is-js .bft-w > span{ transform:translateY(105%); }
.bft.is-js .bft-label, .bft.is-js .bft-act, .bft.is-js .bft-note{ opacity:0; }
.bft.is-js .bft-act{ transform:translateY(12px); }
.bft.is-js.is-in .bft-w > span{ transform:none; transition:transform 1s var(--ft-e) calc(.15s + var(--i,0) * 90ms); }
.bft.is-js.is-in .bft-label{ opacity:1; transition:opacity .8s var(--ft-e); }
.bft.is-js.is-in .bft-act{ opacity:1; transform:none; transition:opacity .8s var(--ft-e) .7s, transform .8s var(--ft-e) .7s; }
.bft.is-js.is-in .bft-note{ opacity:1; transition:opacity .8s var(--ft-e) 1.6s, color .35s var(--ft-e); }

@media (prefers-reduced-motion:reduce){
  .bft *, .bft *::before, .bft *::after{ transition:none !important; animation:none !important; }
  .bft-markbox{ transform:none; }
}