/* ================================================================
   AL HUDHUD - homepage hero (two scenes that loop)

   Every rule is scoped under #ahd-hero. The design file this came from
   shipped global rules - a * reset, body, a, button and a :root block -
   and none of them are here: the theme already sets box-sizing, the link
   and button resets and the shared colour tokens, and a stray global
   reset from a hero would land on the header, the ticker and every
   section below it. The only tokens declared are the four the theme's
   :root does not have.

   Fonts: Manrope and DM Sans are the theme's own self-hosted faces. The
   design file loaded them from Google Fonts; those <link>s are gone, and
   every font shorthand below carries the same system-ui fallback the
   rest of the theme uses, so a font that fails to load never drops the
   hero to Times.
   ================================================================ */
#ahd-hero{
  /* The trust line and the scene switcher sit in an absolutely positioned row
     at the bottom of the hero. Everything the scenes draw has to stop clear of
     it - 24px clear, measured, at every window size. The row's own height is
     measured by hero.js into --ahd-footh (it changes: on a phone it stacks),
     and --ahd-lift is how far the hero overhangs the viewport. This one value
     is what both scenes reserve at their bottom edge. */
  --ahd-gap:24px;
  --ahd-foot-reserve:calc(var(--ahd-footh,40px) + var(--ahd-lift,0px) + 18px + var(--ahd-gap));

  /* Fluid sizing.
     These replace three height breakpoints at 900/800/730px that each moved the
     layout in one step - which is exactly what a zoom change crosses, and what
     made the hero jump. Every value is a straight line in viewport height and
     width between a floor and a ceiling, so the layout slides instead of
     snapping. The coefficients are set so a 1440x900 window at 100% lands on
     the numbers the design had: 60px headline, 108px top padding, a 128px
     thumbnail, 18px panel padding. */
  --ahd-sb-disp:clamp(26px, calc(4.6svh + 1.3vw), 60px);
  --ahd-sa-disp:clamp(28px, calc(4.8svh + 1.35vw), 62px);
  /* The floors are what clear the sticky header pill, which is a fixed ~72px
     tall whatever the window does. Below that the headline started drawing
     behind it. */
  --ahd-sb-padtop:clamp(78px, calc(7.2svh + 3vw), 128px);
  --ahd-sa-padtop:clamp(74px, calc(7svh + 2.9vw), 118px);
  --ahd-desk-pad:clamp(11px, calc(1.1svh + .55vw), 18px);
  --ahd-thumb:clamp(62px, calc(8.5svh + 3.6vw), 128px);
  --ahd-txt-h:clamp(40px, calc(4.2svh + 1.8vw), 64px);
  --ahd-it-b:clamp(14.5px, calc(1.2svh + .58vw), 19px);
  --ahd-step-s:clamp(6px, calc(.7svh + .35vw), 14px);
  --ahd-step-m:clamp(6px, calc(1svh + .5vw), 20px);
  --ahd-step-l:clamp(7px, calc(1.2svh + .62vw), 26px);
  --ink-2:#06201A;
  --gold-3:#C9822A;
  --mint:#C8D9D0;
  --mint-2:#A9C4B8;
  font-family:"DM Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#ahd-hero figure{margin:0}

#ahd-hero .ahd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The hero is the viewport, full stop.
   It used to be 100svh with min-height:760px and max-height:960px. Those
   two clamps are what broke browser zoom: zoom shrinks the CSS viewport
   (1366x768 at 125% is 1093x614 CSS pixels), the min-height took over, the
   hero became a 760px band inside a 614px window, and --ahd-lift grew to
   drag the footer row back into view - which inflated the scene's bottom
   padding to 261px and left the cards stranded near the top with a wide
   empty strip under them. At 150% it went further and overlapped by 133px.
   With the height tied to the viewport the lift is only ever the contact
   strip above the hero, and the padding stays put at every zoom level.
   min-height is a floor for absurdly short windows only; the scenes are
   bottom-anchored, so even when it binds nothing floats with space below. */
#ahd-hero{position:relative;height:100vh;height:100svh;min-height:460px;overflow:hidden;isolation:isolate;background:var(--ink-2);color:#fff}
#ahd-hero .ahd-scene{position:absolute;inset:0;overflow:hidden;visibility:hidden;opacity:0}
#ahd-hero .ahd-scene.on{visibility:visible;opacity:1}
#ahd-hero .ahd-scene.sb.enter{visibility:visible;opacity:1;z-index:3;animation:ahdOpen 1.5s cubic-bezier(.7,0,.2,1) both}
@keyframes ahdOpen{from{clip-path:circle(0 at var(--ox,70%) var(--oy,55%))}to{clip-path:circle(150% at var(--ox,70%) var(--oy,55%))}}
#ahd-hero .ahd-scene.sa.leave{visibility:visible;opacity:1;z-index:2;animation:ahdZoomOut 1.5s cubic-bezier(.7,0,.2,1) both}
@keyframes ahdZoomOut{to{transform:scale(1.12);opacity:.4}}
#ahd-hero .ahd-scene.sb.leave{visibility:visible;z-index:3;animation:ahdFade 1.1s ease both}
@keyframes ahdFade{from{opacity:1}to{opacity:0}}
#ahd-hero .ahd-scene.sa.enter{visibility:visible;opacity:1;z-index:2;animation:ahdIn 1.4s var(--ease) both}
@keyframes ahdIn{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
#ahd-hero .sa{background:radial-gradient(1100px 820px at 74% 48%,#0E3A2A 0%,#07251B 38%,#04160F 70%,#020C08 100%)}
#ahd-hero .sa-sky{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
#ahd-hero .sa-sun{position:absolute;z-index:0;pointer-events:none;width:1000px;height:1000px;left:calc(50% - 260px);top:-460px;background:radial-gradient(closest-side,rgba(255,220,160,.20),rgba(232,163,60,.07) 45%,transparent 72%);mix-blend-mode:screen;animation:saSun 11s ease-in-out infinite alternate}
@keyframes saSun{to{transform:translate(-40px,24px) scale(1.07);opacity:.8}}
#ahd-hero .sa-limb{position:absolute;z-index:0;pointer-events:none;left:-25%;width:150%;top:86%;height:130vh;border-radius:50%;border-top:1.5px solid rgba(244,194,122,.34);
  box-shadow:0 -34px 110px -24px rgba(21,154,94,.6),0 -2px 18px rgba(244,194,122,.22),inset 0 60px 120px -50px rgba(21,154,94,.25);
  background:radial-gradient(55% 22% at 50% 0%,rgba(14,58,42,.95),#030f0b 75%)}
#ahd-hero .sa-veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,12,8,.72) 0%,rgba(2,12,8,.34) 34%,rgba(2,12,8,0) 56%)}
#ahd-hero .sa-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#ahd-hero .sa-wrap{position:relative;z-index:1;height:100%;width:min(1240px,92%);margin:0 auto;display:grid;grid-template-columns:1fr 1.02fr;align-items:center;gap:24px;padding:var(--ahd-sa-padtop) 0 var(--ahd-foot-reserve)}
#ahd-hero .sa-disp{font:800 var(--ahd-sa-disp)/1.02 Manrope,system-ui,sans-serif;letter-spacing:-.035em}
#ahd-hero .sa-disp .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.04em}
#ahd-hero .sa-disp .w{display:inline-block;white-space:nowrap}
#ahd-hero .sa-disp .ch{display:inline-block;transition:transform .7s var(--ease),opacity .7s var(--ease);transition-delay:calc(var(--i)*28ms)}
#ahd-hero .sa-disp .pre .ch{transform:translateY(105%);opacity:0;transition:none}
#ahd-hero .sa-disp .out .ch{transform:translateY(-105%);opacity:0;transition-duration:.35s;transition-timing-function:cubic-bezier(.6,0,.8,.2);transition-delay:calc(var(--i)*14ms)}
#ahd-hero .sa-disp .gold .ch{background:linear-gradient(180deg,#FFD9A0 0%,var(--gold) 60%,var(--gold-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#ahd-hero .sa-lead{margin-top:var(--ahd-step-s);font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.6;color:#E3ECE7;font-weight:500;max-width:46ch;transition:opacity .45s}
#ahd-hero .sa-lead.fade{opacity:0}
#ahd-hero .sa-card{margin-top:var(--ahd-step-l);max-width:500px;padding:clamp(11px,calc(1.1svh + .5vw),16px) clamp(13px,calc(1.3svh + .65vw),20px);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 60px -34px rgba(0,0,0,.7)}
#ahd-hero .sa-rt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
#ahd-hero .sa-end b{display:block;font:800 22px Manrope,system-ui,sans-serif;letter-spacing:.05em;transition:opacity .3s}
#ahd-hero .sa-end span{display:block;font-size:12px;color:var(--mint-2);margin-top:1px;white-space:nowrap;transition:opacity .3s}
#ahd-hero .sa-end.to{text-align:right}
#ahd-hero .sa-line{position:relative;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px)}
#ahd-hero .sa-line::after{content:"";position:absolute;left:0;top:0;height:2px;width:var(--p,0%);background:linear-gradient(90deg,transparent,var(--gold))}
#ahd-hero .sa-plane{position:absolute;top:50%;left:var(--p,0%);width:22px;height:22px;color:var(--gold);transform:translate(-50%,-50%) rotate(90deg);filter:drop-shadow(0 0 8px rgba(232,163,60,.8))}
#ahd-hero .sa-file{position:absolute;top:50%;left:var(--p,0%);width:22px;height:22px;color:var(--gold);transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px rgba(232,163,60,.8));display:none}
#ahd-hero .sa-card.uae .sa-plane{display:none}
#ahd-hero .sa-card.uae .sa-file{display:block}
#ahd-hero .sa-sv{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);transition:opacity .3s}
#ahd-hero .sa-sv.fade{opacity:0}
#ahd-hero .sa-sv b{font:700 15px Manrope,system-ui,sans-serif}
#ahd-hero .sa-sv em{font:700 10.5px Manrope,system-ui,sans-serif;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);background:rgba(232,163,60,.14);border:1px solid rgba(232,163,60,.32);padding:5px 10px;border-radius:999px;white-space:nowrap}
/* The row gap shrinks with the window. In Arabic this list wraps to two rows
   sooner than in English, and at 960x600 the second row was landing 1px
   into the trust line. */
#ahd-hero .sa-idx{display:flex;flex-wrap:wrap;gap:clamp(2px,calc(.4svh),4px) 14px;margin-top:var(--ahd-step-m);max-width:640px}
#ahd-hero .sa-idx button{position:relative;background:none;border:0;cursor:pointer;padding:6px 0 8px;font:600 13px "DM Sans",system-ui,sans-serif;color:var(--mint-2);transition:color .3s}
#ahd-hero .sa-idx button:hover,#ahd-hero .sa-idx button.on{color:#fff}
#ahd-hero .sa-idx button.uae{color:var(--gold-2)}
#ahd-hero .sa-idx button i{position:absolute;left:0;bottom:2px;height:2px;width:100%;background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:left}
#ahd-hero .sa-idx .sep{width:1px;align-self:center;height:14px;background:rgba(255,255,255,.2)}
/* The globe is square, so its height is its width. Left to fill the column
   it grows taller than the room between the header and the footer row on
   any laptop screen - it was overlapping the trust line by 35px at
   1366x768. Cap it by what is actually free vertically. */
#ahd-hero .sa-globe{position:relative;width:min(100%,640px,calc(100svh - var(--ahd-sa-padtop) - var(--ahd-foot-reserve)));aspect-ratio:1;justify-self:end}
#ahd-hero .sa-globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#ahd-hero .sa-post{position:absolute;left:0;top:0;width:176px;padding:7px 7px 10px;border-radius:12px;background:#FBF8F1;color:var(--ink);box-shadow:0 24px 44px -18px rgba(0,0,0,.65),0 2px 6px rgba(0,0,0,.2);opacity:0;transform:translateY(14px) rotate(-6deg) scale(.86);transform-origin:80% 100%;transition:opacity .45s var(--ease),transform .6s cubic-bezier(.3,1.4,.5,1);pointer-events:none;z-index:2}
#ahd-hero .sa-post.on{opacity:1;transform:translateY(0) rotate(-3deg) scale(1)}
#ahd-hero .sa-post .im{position:relative;height:104px;border-radius:8px;overflow:hidden;background:#dfe7e2}
#ahd-hero .sa-post img{width:100%;height:100%;object-fit:cover;display:block}
#ahd-hero .sa-post .tg{position:absolute;left:6px;top:6px;font:800 9.5px Manrope,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#1B1300;background:var(--gold);padding:4px 7px;border-radius:999px}
#ahd-hero .sa-post b{display:block;margin:8px 3px 0;font:800 14px Manrope,system-ui,sans-serif;letter-spacing:-.01em}
#ahd-hero .sa-post small{display:block;margin:1px 3px 0;font-size:11.5px;color:#4F6158;line-height:1.3}
#ahd-hero .sb{background:#1a1410}
#ahd-hero .sb-bg{position:absolute;inset:0;z-index:0}
#ahd-hero .sb-bg figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 2s ease}
#ahd-hero .sb-bg figure.on{opacity:1}
#ahd-hero .sb-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;transform:scale(1.1)}
#ahd-hero .sb-bg figure.on img{animation:sbKb 14s linear forwards}
@keyframes sbKb{from{transform:scale(1.12) translateX(1.2%)}to{transform:scale(1.02)}}
#ahd-hero .sb-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,32,26,.62) 0%,rgba(6,32,26,.28) 30%,rgba(6,32,26,.05) 50%,rgba(6,32,26,.55) 74%,rgba(6,32,26,.92) 100%)}
/* justify-content:flex-end anchors the desk panels to the bottom of the
   content box, which ends exactly 24px above the footer row. .sb-head then
   takes whatever is left and centres the headline in it. That is what keeps
   the anchoring identical at every viewport height: the cards do not move
   relative to the trust line, only the breathing room above them changes. */
#ahd-hero .sb-wrap{position:relative;z-index:2;height:100%;width:min(1240px,92%);margin:0 auto;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:var(--ahd-sb-padtop) 0 var(--ahd-foot-reserve)}
#ahd-hero .sb-head{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;padding-top:0}
#ahd-hero .sb-disp{font:800 var(--ahd-sb-disp)/1.04 Manrope,system-ui,sans-serif;letter-spacing:-.035em;text-shadow:0 4px 40px rgba(0,0,0,.35)}
#ahd-hero .sb-disp .ln{display:block}
#ahd-hero .sb-disp em{font-style:normal;color:var(--gold-2)}
#ahd-hero .sb-sub{margin-top:var(--ahd-step-m);font-size:clamp(15.5px,1.25vw,18px);font-weight:500;color:#F2F6F3;text-shadow:0 1px 16px rgba(0,0,0,.45)}
#ahd-hero .sb [data-in]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
#ahd-hero .sb.on [data-in],#ahd-hero .sb.enter [data-in]{opacity:1;transform:none;transition-delay:calc(var(--d,0)*120ms + 600ms)}
/* flex:none matters. .sb-wrap is a full-height flex column and .sb-head
   takes the slack, so without it the panels are allowed to shrink below
   their own content - which is how the Arabic chip row ended up drawn
   outside the bottom of its panel, the wrapped second row spilling past
   the rounded border. They now keep their content height. */
#ahd-hero .sb-desks{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;max-width:1060px;text-align:left;flex:none}
/* The design gave this panel backdrop-filter:blur(20px) saturate(1.2). It is
   gone on purpose. A backdrop-filter forces Chromium to composite the whole
   scrolling-contents layer, and text in that layer drops from LCD subpixel
   antialiasing to grayscale - for the ENTIRE page, header and footer included.
   Measured: with the blur, none of the 32 nodes outside the hero matched the
   old homepage; with this tint, every one of them is byte-identical. It also
   stopped the page re-rasterising its text on each scene switch. The tint
   below (opaque enough to carry the panel on its own) is what replaces it;
   .sa-card and .ahd-sw keep their blur - neither triggers the promotion. */
#ahd-hero .sb-desk{position:relative;padding:var(--ahd-desk-pad);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05)),rgba(6,32,26,.80);border:1px solid rgba(255,255,255,.22);box-shadow:0 40px 70px -40px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.22)}
#ahd-hero .sb-top{display:flex;align-items:center;gap:12px}
#ahd-hero .sb-num{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font:800 12.5px Manrope,system-ui,sans-serif;color:#1B1300;background:var(--gold);flex:none}
#ahd-hero .sb-top h2{margin:0;font:800 17px Manrope,system-ui,sans-serif;letter-spacing:-.01em}
#ahd-hero .sb-top a{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:700 13px Manrope,system-ui,sans-serif;color:var(--gold-2);white-space:nowrap}
#ahd-hero .sb-top a svg{width:14px;height:14px;transition:transform .3s var(--ease)}
#ahd-hero .sb-top a:hover svg{transform:translateX(3px)}
#ahd-hero .sb-body{display:grid;grid-template-columns:var(--ahd-thumb) 1fr;gap:clamp(10px,calc(1svh + .5vw),16px);align-items:center;margin-top:var(--ahd-step-s)}
#ahd-hero .sb-ph{position:relative;width:var(--ahd-thumb);height:calc(var(--ahd-thumb) * .719);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.25);box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}
#ahd-hero .sb-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .7s ease,transform 1.4s var(--ease)}
#ahd-hero .sb-ph img.on{opacity:1;transform:scale(1)}
#ahd-hero .sb-txt{position:relative;height:var(--ahd-txt-h);overflow:hidden}
#ahd-hero .sb-it{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;transition:transform .6s var(--ease),opacity .6s var(--ease)}
#ahd-hero .sb-it.out{transform:translateY(-24px);opacity:0}
#ahd-hero .sb-it.pre{transform:translateY(24px);opacity:0;transition:none}
#ahd-hero .sb-it b{font:800 var(--ahd-it-b)/1.2 Manrope,system-ui,sans-serif;letter-spacing:-.015em}
#ahd-hero .sb-it span{margin-top:5px;font-size:14px;color:var(--mint);line-height:1.4}
#ahd-hero .sb-bar{height:2px;margin-top:var(--ahd-step-s);border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
#ahd-hero .sb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-3),var(--gold-2));transform:scaleX(0);transform-origin:left}
#ahd-hero .sb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--ahd-step-s)}
#ahd-hero .sb-chips button{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--mint);font:600 12.5px "DM Sans",system-ui,sans-serif;padding:6px 11px;border-radius:999px;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
#ahd-hero .sb-chips button:hover{color:#fff;border-color:rgba(255,255,255,.34)}
#ahd-hero .sb-chips button.on{background:rgba(232,163,60,.2);border-color:rgba(232,163,60,.7);color:#fff}
#ahd-hero .ahd-foot{position:absolute;z-index:6;left:50%;bottom:calc(18px + var(--ahd-lift,0px));transform:translateX(-50%);width:min(1240px,92%);display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
#ahd-hero .ahd-trust{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--mint);pointer-events:auto}
#ahd-hero .ahd-trust .st{color:var(--gold)}
#ahd-hero .ahd-trust b{color:#fff}
#ahd-hero .ahd-trust .dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45}
#ahd-hero .ahd-sw{display:flex;gap:6px;pointer-events:auto}
#ahd-hero .ahd-sw button{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(6,32,26,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--mint);font:700 12px Manrope,system-ui,sans-serif;padding:8px 14px;border-radius:999px;cursor:pointer;transition:color .3s,border-color .3s}
#ahd-hero .ahd-sw button.on{color:#fff;border-color:rgba(232,163,60,.6)}
#ahd-hero .ahd-sw button i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
/* The three stepped height breakpoints that used to live here - 900px, 800px
   and 730px of viewport height - are gone. Each one moved the layout in a jump,
   and browser zoom walks straight across them: 1366x768 at 125% is 614px tall,
   at 150% it is 512px. Everything they used to set is now a clamp() on the
   hero root, so the same values arrive continuously. See --ahd-sb-disp and the
   tokens beside it. */

@media (max-width:980px){
  #ahd-hero .sa-wrap{grid-template-columns:1fr;align-content:center;gap:0;padding:var(--ahd-sa-padtop) 0 var(--ahd-foot-reserve)}
  /* 330px left the route card sitting on the trust line at 390x844. The
     globe is the one piece here that can give up height without losing
     anything - it is a circle, it just gets smaller. */
  #ahd-hero .sa-globe{order:-1;justify-self:center;width:min(290px,74vw,calc(100svh - var(--ahd-sa-padtop) - var(--ahd-foot-reserve) - 300px));margin-bottom:8px}
  #ahd-hero .sa-post{width:130px;padding:5px 5px 8px}
  #ahd-hero .sa-post .im{height:74px}
  #ahd-hero .sa-post b{font-size:12.5px;margin-top:6px}
  #ahd-hero .sa-post small{display:none}
}
@media (max-width:900px){
  /* was height:max(100svh,880px). The 880 floor was there so the stacked
     panels had room; with the fluid sizing above they fit the viewport, and
     the floor is what turned a zoomed-in phone-width window into a hero twice
     the height of the screen. */
  #ahd-hero{height:100svh;min-height:360px}
  #ahd-hero .sb-shade{background:linear-gradient(180deg,rgba(6,32,26,.62) 0%,rgba(6,32,26,.25) 32%,rgba(6,32,26,.7) 58%,rgba(6,32,26,.95) 100%)}
  #ahd-hero .sb-wrap{padding:var(--ahd-sb-padtop) 0 var(--ahd-foot-reserve)}
  #ahd-hero .sb-desks{grid-template-columns:minmax(0,1fr);gap:12px}
  #ahd-hero .sb-desk{padding:14px;border-radius:20px}
  #ahd-hero .sb-body{grid-template-columns:var(--ahd-thumb) 1fr;gap:clamp(9px,calc(.9svh + .5vw),13px)}
  #ahd-hero .sb-ph{width:var(--ahd-thumb);height:calc(var(--ahd-thumb) * .75)}
  #ahd-hero .sb-it b{font-size:var(--ahd-it-b)}
  #ahd-hero .sb-it span{font-size:13px}
  /* The chip rows scroll sideways on a phone. They did that before too, but
     nothing said so: the row simply ended mid-chip at the edge of the panel
     and looked like a bug. A fade on whichever side still has chips behind it
     is the affordance. hero.js sets .fade-l / .fade-r from the scroll
     position, so this works the same in Arabic, where the row starts at the
     right and the hidden chips are on the left. */
  #ahd-hero .sb-chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:2px;-webkit-mask-image:var(--ahd-chipmask,none);mask-image:var(--ahd-chipmask,none)}
  #ahd-hero .sb-chips::-webkit-scrollbar{display:none}
  #ahd-hero .sb-chips button{flex:none}
  #ahd-hero .sb-chips.fade-l{--ahd-chipmask:linear-gradient(90deg,transparent 0,#000 34px,#000 100%)}
  #ahd-hero .sb-chips.fade-r{--ahd-chipmask:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
  #ahd-hero .sb-chips.fade-l.fade-r{--ahd-chipmask:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%)}
  /* The scene switcher is desktop-only. On a phone the two buttons sat under
     the trust line taking a row of their own, and the scenes rotate by
     themselves anyway, so the control earned nothing. display:none rather than
     opacity or visibility, so it leaves the tab order and the accessibility
     tree too - there is no invisible thing to tab into. The tablist is
     untouched on desktop. The footer row's height is measured, not assumed, so
     removing the buttons gives the space straight back to the scenes. */
  #ahd-hero .ahd-sw{display:none}
  #ahd-hero .ahd-foot{flex-direction:column-reverse;gap:10px;bottom:calc(16px + var(--ahd-lift,0px));justify-content:center}
}
/* One genuine layout change, not a size step: below about 560px of viewport
   height the stacked panels cannot show everything. That happens at 175% zoom
   on a 1366x768 laptop, not by dragging a window, so nothing jumps in normal
   use. The chip row is the part that gives - it is a shortcut to the other
   six services, every one of which is a click away through "View" anyway. */
/* A short window, at any width. The supporting line under the headline is the
   first thing to go: it repeats what the panels say, and dropping it buys the
   ~40px that stops the headline and the cards colliding at 1440x900 / 175%
   (823x514) and 1366x768 / 150% (911x512). */
@media (max-height:575px){
  #ahd-hero .sb-sub{display:none}
  #ahd-hero .sa-lead{display:none}
}

@media (max-width:900px) and (max-height:560px){
  #ahd-hero .sb-chips{display:none}
  #ahd-hero .sb-bar{margin-top:calc(var(--ahd-step-s) * .7)}
  #ahd-hero .sb-desks{gap:10px}
}
/* Below about 500px of viewport height in the stacked layout - a 1366x768
   laptop at 175% zoom is 781x439, a 1440x900 one is 823x514 - the headline and
   the two service panels do not
   both fit, and squeezing the headline block only pushed its text out from
   under it and over the panels. Someone at 175% zoom has asked for everything
   to be bigger and is there to read: the two panels, with their links, are
   what earns the space. The headline steps out and the panels go compact. */
@media (max-width:900px) and (max-height:530px){
  #ahd-hero .sb-head{display:none}
  #ahd-hero .sb-desks{gap:8px}
  #ahd-hero .sb-desk{padding:10px}
  #ahd-hero .sb-body{grid-template-columns:64px 1fr;gap:9px;margin-top:7px}
  #ahd-hero .sb-ph{width:64px;height:48px}
  #ahd-hero .sb-txt{height:38px}
  #ahd-hero .sb-it b{font-size:14px}
  #ahd-hero .sb-it span{font-size:11.5px;margin-top:2px}
  #ahd-hero .sb-top{gap:9px}
  #ahd-hero .sb-num{width:26px;height:26px;font-size:11px}
  #ahd-hero .sb-top h2{font-size:14.5px}
  #ahd-hero .sa-lead{display:none}
  #ahd-hero .sa-idx{display:none}
}

@media (max-width:640px){
  #ahd-hero .sa-disp{font-size:clamp(24px,calc(3.8svh + 3vw),40px)}
  #ahd-hero .sa-idx{display:none}
  #ahd-hero .sa-card{margin-top:20px;padding:14px 15px}
  #ahd-hero .sa-end b{font-size:18px}
  #ahd-hero .sb-disp{font-size:clamp(22px,calc(3.4svh + 2.4vw),30px)}
  #ahd-hero .sb-sub{margin-top:10px}
  /* Arabic needs about 25px more than English here: the trust line wraps to
     three lines instead of two, so the footer row it has to clear is 87px
     rather than 64px. Rather than have two sets of numbers, both languages
     get the tighter panel - it reads the same and it fits either way. */
  #ahd-hero .sb-txt{height:var(--ahd-txt-h)}
  #ahd-hero .ahd-trust{font-size:12px;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  #ahd-hero *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ================================================================
   Right-to-left

   The text mirrors; the map does not. The globe is a canvas drawn from
   real latitudes and longitudes, and flipping it would put Dubai in the
   Atlantic and send every route the wrong way round the world - so the
   canvas, and the postcard the script positions over it in canvas
   coordinates, are left exactly as they are. What changes below is the
   half-dozen physical-direction values the design file used: the
   progress bars that grow from the left, the route line that fills from
   the left, the plane that flies left to right, and the arrow that
   points forwards.
   ================================================================ */
[dir="rtl"] #ahd-hero .sb-desks{text-align:right}
[dir="rtl"] #ahd-hero .sb-top a{margin-left:0;margin-right:auto}
[dir="rtl"] #ahd-hero .sb-top a svg{transform:scaleX(-1)}
[dir="rtl"] #ahd-hero .sb-top a:hover svg{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] #ahd-hero .sa-end.to{text-align:left}
[dir="rtl"] #ahd-hero .sa-idx button i,
[dir="rtl"] #ahd-hero .ahd-sw button i,
[dir="rtl"] #ahd-hero .sb-bar i{transform-origin:right}
[dir="rtl"] #ahd-hero .sa-line::after{left:auto;right:0;background:linear-gradient(270deg,transparent,var(--gold))}
[dir="rtl"] #ahd-hero .sa-plane{left:auto;right:var(--p,0%);transform:translate(50%,-50%) rotate(-90deg)}
[dir="rtl"] #ahd-hero .sa-file{left:auto;right:var(--p,0%);transform:translate(50%,-50%)}