/* FEBUS 2026 — Archer fires only on menu activation; colour reveal under cursor */
.hero{--reveal-x:65%;--reveal-y:50%;--reveal-opacity:0;--reveal-radius:360px}
.hero-color-reveal{position:absolute;inset:0;z-index:2;pointer-events:none;background:url('hero.webp') center/cover no-repeat;transform:scale(1.025);opacity:var(--reveal-opacity);-webkit-mask-image:radial-gradient(circle var(--reveal-radius) at var(--reveal-x) var(--reveal-y),#000 0%,#000 33%,rgba(0,0,0,.92) 53%,transparent 100%);mask-image:radial-gradient(circle var(--reveal-radius) at var(--reveal-x) var(--reveal-y),#000 0%,#000 33%,rgba(0,0,0,.92) 53%,transparent 100%);transition:opacity .55s ease;will-change:mask-image,opacity}
.hero .hero-content,.hero .hero-bottom{z-index:4}
/* Keep text readable: darkening is still present outside the colour reveal. */
.archer-nav-arrow,.hero-light{display:none!important}
header{position:relative;isolation:isolate}
header nav a{position:relative}
header nav a.arrow-active{color:var(--lime)}
header nav a.arrow-active::after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--lime);box-shadow:0 0 10px #91dec088;transform-origin:left;animation:underline-land .35s ease both}
@keyframes underline-land{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.archer-shot-figure{position:fixed;width:116px;height:116px;z-index:1000;pointer-events:none;opacity:0;transform:translate(-32%,-50%) scale(.88);filter:drop-shadow(0 0 7px #91dec044);transition:opacity .25s ease,transform .35s ease}
.archer-shot-figure.is-ready{opacity:1;transform:translate(-32%,-50%) scale(1)}
.archer-shot-figure svg{width:100%;height:100%;overflow:visible;display:block}
.archer-shot-figure #Rght_Arm{transform-box:fill-box}
.archer-shot-flight{position:fixed;left:0;top:0;z-index:1001;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 5px #91dec0)}
.archer-shot-flight path{fill:none;stroke:#dcfff0;stroke-width:2.2;stroke-linecap:round}
.archer-shot-flight polygon{fill:#dcfff0}
@media(max-width:800px){.archer-shot-figure{width:105px;height:105px}}
@media(hover:none),(pointer:coarse){.hero-color-reveal{display:none}}
@media(prefers-reduced-motion:reduce){.hero-color-reveal{display:none}.archer-shot-figure,.archer-shot-flight{display:none!important}header nav a.arrow-active::after{animation:none}}


/* One archer only: the editable vector is part of the FEBUS logo. */
header .brand{overflow:visible!important;isolation:isolate}
header .logo-archer-vector{position:absolute;inset-inline-start:0;top:-8px;width:102px;height:96px;overflow:visible;display:block;fill:#fff;pointer-events:none;filter:drop-shadow(0 0 1px rgba(255,255,255,.2))}
header .logo-archer-vector .st0{fill:#fff;stroke:#fff;stroke-width:1.4px}
header .logo-archer-vector .st1{display:none!important}
header .logo-archer-vector #Rght_Arm{transform-box:view-box;transform-origin:0 0}
header .logo-archer-vector #Arrow{opacity:1}
.archer-shot-figure{display:none!important}
.febus-flying-arrow{position:fixed;left:0;top:0;z-index:5000;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 4px #c3f9df)}
@media(max-width:800px){header .logo-archer-vector{width:92px;height:88px;top:0}}
@media(prefers-reduced-motion:reduce){.febus-flying-arrow{display:none}}

/* Place the ONLY animated archer immediately to the right of the FEBUS wordmark.
   Keep the SVG in the brand so its animated arm/string and arrow CTM remain intact. */
header .brand{padding-inline-start:0!important;padding-inline-end:116px!important;position:relative}
header .brand .logo-archer-vector{inset-inline-start:auto!important;inset-inline-end:0!important;top:50%!important;transform:translateY(-50%);width:102px;height:96px}
@media(max-width:800px){header .brand{padding-inline-end:104px!important}header .brand .logo-archer-vector{width:92px;height:88px}}
@media(max-width:380px){header .brand{padding-inline-end:88px!important}header .brand .logo-archer-vector{width:80px;height:78px}}

/* Extra 40px of breathing room between FEBUS lettering and the archer. */
header .brand{padding-inline-end:156px!important}
header .brand .logo-archer-vector{inset-inline-end:0!important}
@media(max-width:800px){header .brand{padding-inline-end:144px!important}}
@media(max-width:380px){header .brand{padding-inline-end:128px!important}}
/* The underline appears only after the arrow arrives. */
header nav a.arrow-active::after{animation:underline-land .32s ease both}

/* Larger logo archer: keep the right-side placement and existing 40px gap. */
header .brand{padding-inline-end:184px!important}
header .brand .logo-archer-vector{width:130px!important;height:122px!important;inset-inline-end:0!important;top:50%!important}
@media(max-width:800px){header .brand{padding-inline-end:162px!important}header .brand .logo-archer-vector{width:110px!important;height:104px!important}}
@media(max-width:380px){header .brand{padding-inline-end:142px!important}header .brand .logo-archer-vector{width:94px!important;height:90px!important}}

/* Position the logo archer 20px below its original center (20px up from previous version). */
header .brand .logo-archer-vector{top:calc(50% + 20px - 4pt)!important}

/* The fired arrow immediately turns into a straight underline beam. */
.febus-underline-beam{position:fixed;height:2px;z-index:5000;pointer-events:none;background:#91dec0;box-shadow:0 0 8px rgba(145,222,192,.7);transform:translateX(0);will-change:transform}
header nav a.arrow-active::after{animation:none!important;transform:scaleX(1)!important}

/* Wordmark vertically aligned with the archer, preserving its horizontal position. */
header .brand .brand-word, header .brand .brand-caption{position:relative;top:14px}
@media(max-width:800px){header .brand .brand-word,header .brand .brand-caption{top:10px}}
/* Quiet, floating return-to-hero control. */
.febus-home-flight{position:fixed;right:clamp(18px,3vw,44px);bottom:clamp(20px,3vw,40px);z-index:120;width:58px;height:58px;display:grid;place-items:center;border:1px solid rgba(145,222,192,.52);border-radius:50%;background:rgba(7,61,48,.92);color:#eafff5;box-shadow:0 8px 30px rgba(2,32,25,.20);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),background .3s ease,box-shadow .3s ease;cursor:pointer}
.febus-home-flight.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.febus-home-flight:hover{background:#0b5944;box-shadow:0 10px 34px rgba(2,32,25,.28),0 0 0 5px rgba(145,222,192,.09);transform:translateY(-3px) scale(1.04)}
.febus-home-flight svg{width:25px;height:25px;overflow:visible}
.febus-home-flight .home-arrow{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.febus-home-flight:hover .home-arrow{transform:translateY(-3px)}
.febus-home-flight.is-flying .home-arrow{animation:febusArrowLift .68s cubic-bezier(.2,.75,.2,1) both}
@keyframes febusArrowLift{0%{transform:translateY(0);opacity:1}55%{transform:translateY(-16px);opacity:0}56%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.febus-home-flight,.febus-home-flight .home-arrow{transition:none!important;animation:none!important}}

/* Arabic: the same animated logo archer faces left. Mirror only the SVG,
   not the FEBUS wordmark, so its arm, bowstring and arrow stay in sync. */
html[lang="ar"] header .brand .logo-archer-vector,
html[dir="rtl"] header .brand .logo-archer-vector{
  transform:translateY(-50%) scaleX(-1)!important;
}

/* Mobile: FEBUS + language selector on first row; archer left, vertical navigation right. */
@media (max-width:800px){
 header{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;column-gap:12px!important;row-gap:22px!important;padding:18px 6% 28px!important;min-height:332px!important;height:auto!important;align-items:start!important}
 header .brand{grid-column:1!important;grid-row:1!important;position:static!important;min-height:96px!important;padding:0!important;width:max-content!important;max-width:100%!important;align-self:start!important}
 header .brand .brand-word,header .brand .brand-caption{top:0!important}
 header .brand .brand-word{font-size:clamp(34px,9vw,50px)!important}
 header .brand .brand-caption{font-size:clamp(7px,1.9vw,9px)!important}
 header .languages{grid-column:2!important;grid-row:1!important;align-self:start!important;transform:none!important}
 header nav{grid-column:2!important;grid-row:2!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:flex-start!important;justify-content:flex-start!important;gap:13px!important;width:max-content!important;max-width:100%!important;margin:0!important;transform:none!important;font-size:clamp(12px,3.25vw,16px)!important;line-height:1.25!important}
 header nav a{white-space:normal!important;padding:5px 0!important;text-align:start!important}
 header .brand .logo-archer-vector{position:absolute!important;left:5%!important;right:auto!important;inset-inline-start:auto!important;inset-inline-end:auto!important;top:155px!important;width:clamp(115px,32vw,170px)!important;height:clamp(112px,31vw,160px)!important;transform:translateY(0)!important}
 .hero{height:calc(90svh - 332px)!important;min-height:520px!important}
}
@media (max-width:390px){header{column-gap:6px!important}header nav{font-size:12px!important}header .brand .brand-word{font-size:35px!important}header .brand .logo-archer-vector{width:120px!important;height:118px!important;top:155px!important}}
@media (max-width:800px){
 html[lang="ar"] header .brand .logo-archer-vector,html[dir="rtl"] header .brand .logo-archer-vector{left:auto!important;right:5%!important;transform:scaleX(-1)!important}
 html[dir="rtl"] header nav{grid-column:2!important;align-items:flex-end!important}
 html[dir="rtl"] header nav a{text-align:right!important}
}

/* Mobile language switcher: larger labels in one horizontal row immediately
   after the FEBUS wordmark, never stacked vertically. */
@media (max-width:800px){
 header{grid-template-columns:minmax(0,1fr) auto!important;column-gap:8px!important}
 header .languages{grid-column:2!important;grid-row:1!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-end!important;gap:clamp(4px,1.2vw,10px)!important;align-self:center!important;transform:none!important;white-space:nowrap!important;direction:ltr!important}
 header .languages button{font-size:clamp(14px,2.7vw,18px)!important;font-weight:600!important;line-height:1.2!important;min-width:0!important;padding:9px 2px!important;white-space:nowrap!important}
 header .languages>span{display:none!important}
}
@media(max-width:390px){
 header .brand .brand-word{font-size:clamp(31px,9vw,35px)!important}
 header .languages{gap:4px!important}
 header .languages button{font-size:14px!important;padding:8px 1px!important}
}

/* Mobile: larger static archer; no draw, release or beam animation. */
@media (max-width:800px){
 header .brand .logo-archer-vector{
  width:clamp(155px,39vw,210px)!important;
  height:clamp(150px,38vw,200px)!important;
  top:145px!important;
 }
 header .brand .logo-archer-vector #Rght_Arm{transform:none!important;animation:none!important}
 header .brand .logo-archer-vector *,
 header .brand .logo-archer-vector *::before,
 header .brand .logo-archer-vector *::after{animation:none!important;transition:none!important}
 .febus-underline-beam{display:none!important}
}
@media(max-width:390px){header .brand .logo-archer-vector{width:155px!important;height:150px!important;top:148px!important}}

/* Desktop refinement: archer 2px higher; the travelling beam retains a delicate white arrow tip. */
@media (min-width:801px){
 header .brand .logo-archer-vector{top:calc(50% + 18px - 4pt)!important}
 .febus-underline-beam{height:2px;background:#fff;box-shadow:0 0 5px rgba(255,255,255,.32)}
 .febus-underline-beam::after{content:"";position:absolute;right:-7px;top:50%;width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:8px solid #fff;transform:translateY(-50%);filter:drop-shadow(0 0 1px rgba(255,255,255,.25))}
}

/* The white arrow IS the permanent navigation indicator: no secondary underline. */
@media(min-width:801px){
 header nav a.arrow-active::after,header nav a.arrow-active::before{content:none!important;display:none!important}
 .febus-underline-beam{background:#fff!important;box-shadow:0 0 5px rgba(255,255,255,.32)!important}
}

/* Navigation: no hover underline; arrow is visible only until scrolling begins. */
header nav a:hover::before,header nav a:hover::after,
header nav a:focus::before,header nav a:focus::after,
header nav a:focus-visible::before,header nav a:focus-visible::after,
header nav a.arrow-active::before,header nav a.arrow-active::after {
 content:none!important;display:none!important;box-shadow:none!important;
}

/* FEBUS — full-bleed hero behind the desktop header.
   Keep the existing mobile two-row navigation unchanged. */
@media (min-width:801px) {
  body > header {
    position:absolute!important;
    top:0;left:0;right:0;
    width:100%;box-sizing:border-box;
    background:transparent!important;
    z-index:30;
  }
  .hero {
    height:100svh!important;
    min-height:760px;
    max-height:none;
    box-sizing:border-box;
    padding-top:92px;
  }
  .hero-image {
    background-position:center center;
  }
  .hero-shade {
    background:
      linear-gradient(180deg,rgba(3,48,36,.95) 0%,rgba(3,48,36,.75) 12%,rgba(3,48,36,.18) 32%,transparent 52%),
      linear-gradient(90deg,rgba(3,35,26,.89),rgba(3,35,26,.38) 65%,rgba(3,35,26,.08)),
      linear-gradient(0deg,rgba(3,35,26,.8),transparent 40%);
  }
  html[dir=rtl] .hero-shade {
    background:
      linear-gradient(180deg,rgba(3,48,36,.95) 0%,rgba(3,48,36,.75) 12%,rgba(3,48,36,.18) 32%,transparent 52%),
      linear-gradient(270deg,rgba(3,35,26,.89),rgba(3,35,26,.38) 65%,rgba(3,35,26,.08)),
      linear-gradient(0deg,rgba(3,35,26,.8),transparent 40%);
  }
}