/* ── QOTTUF JAZEERA — UX / mobile hotfixes ──────────────────────────────
   Applied to the built bundle. Port these into source on the next build.
   Ref: WCAG 2.1 AA + Apple HIG / Material touch-target minimums.        */

/* [1] Hero z-index — the low-bandwidth/reduced-motion fallback renders the
   hero without z-[2], letting the fixed WebGL stage (z-1) cover it.     */
main>section:first-of-type{position:relative;z-index:2}

/* [2] Contrast — navy/45 (3.31:1) and navy/50 (3.91:1) on the gray-100
   contact panel failed WCAG AA 4.5:1. Raised to ~0.72 alpha (~5.6:1).  */
.text-navy\/45{color:rgb(13 43 92 / .72)}
.text-navy\/50{color:rgb(13 43 92 / .72)}

/* [3] Touch targets — min 44x44 (was 38x19 / 27x19 / 56x25 / auto x23).
   Hit area is expanded with a transparent ::after so the *visual* size
   stays exactly as designed — no chunky buttons, no layout shift.
   The toggle gap widens to 12px so the two hit boxes never overlap
   (centres end up 44.3px apart) and to satisfy the 8px spacing rule.  */
[aria-label="English"],[aria-label="\0627\0644\0639\0631\0628\064A\0629"],
button[aria-label^="Copy"],button[aria-label^="\0646\0633\062E"],
a[href^="tel:"],a[href^="mailto:"]{position:relative}
[aria-label="English"]::after,[aria-label="\0627\0644\0639\0631\0628\064A\0629"]::after,
button[aria-label^="Copy"]::after,button[aria-label^="\0646\0633\062E"]::after,
a[href^="tel:"]::after,a[href^="mailto:"]::after{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:100%;height:100%;min-width:44px;min-height:44px}
/* Widen the toggle gap so the expanded hit boxes sit side by side. */
.fixed.right-5.top-5>div{gap:12px}
/* The two contact CTAs are already >=44px — no expansion needed. */
a.btn{position:static}
a.btn::after{content:none}

/* [4] Tap responsiveness — removes the 300ms delay and the flashing
   grey iOS tap highlight (we supply our own press state below).        */
a,button,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* [5] Press feedback — the design only defined :hover, which never fires
   on touch, so taps felt dead. Opacity/colour only: no layout shift.   */
@media (hover:none){
  a.btn:active,button:active{opacity:.72;transition:opacity 120ms ease-out}
  button[aria-label^="Copy"]:active,button[aria-label^="نسخ"]:active{
    border-color:rgb(13 43 92 / .5);color:rgb(13 43 92)}
}

/* [6] Safe areas — the fixed language toggle sat at a flat 20px inset and
   could collide with the notch / Dynamic Island, notably in landscape.  */
.fixed.right-5.top-5{
  top:max(1.25rem,env(safe-area-inset-top));
  right:max(1.25rem,env(safe-area-inset-right))}
@media (min-width:640px){
  .fixed.right-5.top-5{
    top:max(2rem,env(safe-area-inset-top));
    right:max(2rem,env(safe-area-inset-right))}}

/* [7] Legibility — 10px uppercase at 0.26em tracking is under the 12px
   floor. Nudged up on small screens only; desktop keeps the fine look.  */
@media (max-width:639px){
  .text-\[0\.625rem\]{font-size:.6875rem}
}

/* ── [8] Section navigation ─────────────────────────────────────────────
   A centred floating pill rather than a full-width bar: the site already
   fixes a section indicator top-left (z-8) and the language toggle
   top-right (z-70). Centring clears both, so neither has to move.
   z-index 65 keeps us above the hero (z-2) but under the toggle.      */
.qj-nav{
  position:fixed;top:max(.875rem,env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);z-index:65;
  display:flex;align-items:center;
  font-family:var(--font-dm-sans,ui-sans-serif,system-ui,sans-serif)}
.qj-nav-list{
  display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:4px;
  border:1px solid rgb(255 255 255 / .16);border-radius:2px;
  background:rgb(13 43 92 / .62);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background 300ms ease,border-color 300ms ease}
.qj-nav.qj-scrolled .qj-nav-list{background:rgb(13 43 92 / .82);border-color:rgb(255 255 255 / .22)}
.qj-nav-list>li{position:relative}
.qj-nav-link{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 14px;border:0;background:none;cursor:pointer;
  font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgb(255 255 255 / .92);border-radius:2px;
  transition:color 240ms ease,background 240ms ease;white-space:nowrap}
.qj-nav-link:hover{color:#fff;background:rgb(255 255 255 / .08)}
.qj-nav-link.qj-active{color:#fff;background:rgb(255 255 255 / .12)}
.qj-nav-link:focus-visible,.qj-panel-link:focus-visible,.qj-menu-btn:focus-visible,
.qj-sub-link:focus-visible{outline:2px solid #7eb5a8;outline-offset:2px}
.qj-caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.7;transition:transform 240ms ease}
[data-menu].qj-open .qj-caret{transform:rotate(180deg)}

/* Elevators dropdown */
.qj-sub{
  position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:210px;
  list-style:none;margin:0;padding:4px;z-index:80;
  border:1px solid rgb(255 255 255 / .18);border-radius:2px;
  background:rgb(9 30 66 / .96);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity 200ms ease,transform 200ms ease,visibility 200ms}
[data-menu].qj-open .qj-sub{opacity:1;visibility:visible;transform:none}
.qj-sub-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:0 12px;text-decoration:none;border-radius:2px;
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgb(255 255 255 / .8);transition:color 200ms ease,background 200ms ease}
.qj-sub-link:hover{color:#fff;background:rgb(255 255 255 / .1)}

/* Unconfigured configurator: visible but inert, never a dead link. */
.qj-soon{cursor:default;color:rgb(255 255 255 / .58)}
.qj-soon:hover{background:none;color:rgb(255 255 255 / .58)}
.qj-soon-tag{
  font-size:.5625rem;letter-spacing:.1em;padding:2px 6px;border-radius:2px;
  background:rgb(126 181 168 / .18);color:#7eb5a8;text-transform:lowercase}

/* Compact trigger + panel (small screens) */
.qj-menu-btn{
  display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border:1px solid rgb(255 255 255 / .16);border-radius:2px;cursor:pointer;
  background:rgb(13 43 92 / .68);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgb(255 255 255 / .85)}
.qj-menu-bars{position:relative;width:14px;height:9px;flex:0 0 14px}
.qj-menu-bars::before,.qj-menu-bars::after{
  content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor}
.qj-menu-bars::before{top:0}.qj-menu-bars::after{bottom:0}
.qj-panel{
  position:fixed;top:calc(max(.875rem,env(safe-area-inset-top)) + 56px);
  left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(300px,calc(100vw - 2rem));z-index:80;
  border:1px solid rgb(255 255 255 / .18);border-radius:2px;
  background:rgb(9 30 66 / .97);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity 220ms ease,transform 220ms ease,visibility 220ms}
.qj-panel-open{opacity:1;visibility:visible;transform:translateX(-50%)}
.qj-panel-list{list-style:none;margin:0;padding:6px}
.qj-panel-link{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:48px;padding:0 14px;border:0;background:none;cursor:pointer;
  text-align:start;text-decoration:none;border-radius:2px;
  font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgb(255 255 255 / .82)}
.qj-panel-link:hover,.qj-panel-link:active{background:rgb(255 255 255 / .09);color:#fff}
.qj-panel-head{
  padding:14px 14px 6px;font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgb(255 255 255 / .62)}
.qj-panel-sub{padding-inline-start:26px}

@media (max-width:900px){
  .qj-nav-list{display:none}
  .qj-menu-btn{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  .qj-nav-list,.qj-sub,.qj-panel,.qj-caret,.qj-nav-link{transition:none}
}

/* ── [9] Hero scroll cue ────────────────────────────────────────────────
   Bottom-centred and fixed, fading out across the first half-screen of
   scroll so it never sits on top of the hero's ring animation. Borrows the
   site's .eyebrow voice verbatim (teal, .32em tracking, uppercase, 500).
   Arabic drops the tracking and the uppercasing — both break Naskh letter
   joining — and steps up a size, matching the language toggle's own
   .font-arabic treatment. z-60 keeps it under the nav pill (65) and the
   language toggle (70).                                                */
.qj-scroll-hint{
  position:fixed;left:50%;bottom:max(1.75rem,env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  pointer-events:none;white-space:nowrap;
  font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);
  font-size:.75rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--color-teal-light,#a8cfc6);
  /* The hero runs bright (dawn sky, pale concrete) behind this, so teal alone
     sits too close to the backdrop. A soft navy shadow lifts it off any frame
     without adding a plate or bumping the weight. */
  text-shadow:0 1px 10px rgb(7 26 58 / .62), 0 0 2px rgb(7 26 58 / .45);
  opacity:0;transition:opacity 600ms ease}
html[lang="ar"] .qj-scroll-hint{
  font-family:var(--font-naskh,ui-sans-serif,system-ui,sans-serif);
  letter-spacing:normal;text-transform:none;font-size:.8125rem}
.qj-scroll-hint-line{
  display:block;width:1px;height:38px;
  background:linear-gradient(to bottom,currentColor,rgb(168 207 198 / 0));
  transform-origin:top center;
  filter:drop-shadow(0 1px 6px rgb(7 26 58 / .55));
  animation:qj-hint-drift 2.4s ease-in-out infinite}
.qj-scroll-hint-chev{
  display:block;width:8px;height:8px;margin-top:-9px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  filter:drop-shadow(0 1px 6px rgb(7 26 58 / .55));
  animation:qj-hint-nudge 2.4s ease-in-out infinite}
@keyframes qj-hint-drift{
  0%,100%{transform:scaleY(.45);opacity:.45}
  50%    {transform:scaleY(1);opacity:1}}
@keyframes qj-hint-nudge{
  0%,100%{transform:rotate(45deg) translate(-2px,-2px);opacity:.45}
  50%    {transform:rotate(45deg) translate(0,0);opacity:1}}
@media (max-width:639px){
  .qj-scroll-hint{font-size:.6875rem;letter-spacing:.24em;gap:.45rem}
  .qj-scroll-hint-line{height:26px}}
@media (prefers-reduced-motion:reduce){
  .qj-scroll-hint{transition:none}
  .qj-scroll-hint-line{animation:none;transform:scaleY(1);opacity:.7}
  .qj-scroll-hint-chev{animation:none;transform:rotate(45deg);opacity:.7}}