/*
 * Hero slider.
 *
 * Extracted from the source file during migration. The rules are the source
 * rules; only their home is new, and the Roman Urdu comments are in English.
 *
 * The media layer is absolute and the copy and control bar are in normal flow,
 * so the hero's height is max(min-height, copy + bar). Nothing can overlap or
 * clip at any width, which is what the v2.1 rebuild was for.
 */

/* ==========================================================
   1. ROOT / TOKENS
   ========================================================== */
.fbb{
  --fbb-navy:#041853;
  --fbb-navy-2:#042B6D;
  --fbb-blue:#0B87D0;
  --fbb-cyan:#2EB0E7;
  --fbb-cyan-lt:#7FD4F5;
  --fbb-ink:#060E20;

  --fbb-max:1240px;
  --fbb-pad:clamp(18px,4vw,32px);
  --fbb-top:clamp(96px,15vh,168px);   /* room for the sticky header */
  --fbb-gap:clamp(26px,5vh,58px);     /* between the copy and the bar */

  position:relative;
  width:100%;
  min-height:clamp(500px,84vh,820px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--fbb-ink);
  isolation:isolate;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@supports (height:100dvh){
  .fbb{min-height:clamp(500px,84dvh,820px)}
}
.fbb *{box-sizing:border-box;margin:0;padding:0}
.fbb h2,.fbb .plex{font-family:'IBM Plex Sans','Inter',sans-serif}

/* theme bleed guards (Astra and friends) */
.fbb button{-webkit-appearance:none;appearance:none;font:inherit;color:inherit;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  text-transform:none;letter-spacing:normal;line-height:normal;cursor:pointer}
.fbb a{text-decoration:none;box-shadow:none}
.fbb img{max-width:none;border-radius:0}
.fbb-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ==========================================================
   2. MEDIA STAGE (absolute — text ki height ko affect nahi karta)
   ========================================================== */
.fbb-stage{position:absolute;inset:0;z-index:0;overflow:hidden;
  container-type:size}                 /* the video cover fix lives here */

.fbb-media{--fbb-zoom:var(--fbb-zoom-d,1);
  position:absolute;inset:0;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity 1.05s cubic-bezier(.4,0,.2,1),visibility 1.05s}
.fbb-media.on{opacity:1;visibility:visible}
.fbb-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04)}
.fbb-media.on img{animation:fbbKen 12s ease-out forwards}
.fbb-media:nth-of-type(even).on img{animation-name:fbbKen2}
@keyframes fbbKen {to{transform:scale(1.13) translate3d(-1.4%,-1%,0)}}
@keyframes fbbKen2{from{transform:scale(1.13) translate3d(1.2%,1%,0)}
                   to  {transform:scale(1.03) translate3d(0,0,0)}}

/* YouTube cover — sized against the stage box, not the viewport */
/* The iframe is sized to cover the stage at 16:9, which is the shape of the
   YouTube player — not necessarily the shape of the video inside it. When the
   source is not 16:9, YouTube letterboxes it and the frame is full while the
   picture is a band in the middle. CSS cannot see that, so the overscan is a
   setting: raise it until the bars sit outside the stage.

   Portrait crops hardest, so a second value applies on a phone. It falls back
   to the desktop one, which falls back to 1 — no zoom unless asked for. */
.fbb-yt{position:absolute;top:50%;left:50%;border:0;
  width:177.7778cqh;min-width:100cqw;
  height:56.25cqw;min-height:100cqh;
  transform:translate(-50%,-50%) scale(var(--fbb-zoom,1));
  transform-origin:center;
  pointer-events:none;opacity:0;transition:opacity 1s ease}
.fbb-yt.ready{opacity:1}
@supports not (width:1cqw){
  .fbb-yt{width:177.7778vh;min-width:100%;height:56.25vw;min-height:100%}
}
/* poster — shown until the video loads, so there is never a black flash */
/* `.fbb-media img` already sets display:block and outweighs a lone class, so
   the hide has to be scoped to match it. */
.fbb-media .fbb-mobimg{display:none}
.fbb-poster{position:absolute;inset:0}
.fbb-poster::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 100% at 78% 22%,rgba(46,176,231,.26),transparent 58%),
    linear-gradient(145deg,var(--fbb-navy-2) 0%,var(--fbb-navy) 46%,var(--fbb-ink) 100%)}

/* scrims — painted once on the stage, so a slide change cannot flicker them */
.fbb-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  transition:opacity .9s ease;
  background:
    linear-gradient(180deg,rgba(5,12,30,.56) 0%,rgba(5,12,30,.13) 15%,transparent 30%),
    linear-gradient(100deg,rgba(5,12,30,.9) 0%,rgba(5,12,30,.66) 30%,rgba(5,12,30,.2) 60%,rgba(5,12,30,.04) 100%),
    linear-gradient(0deg,rgba(5,12,30,.88) 0%,rgba(5,12,30,.34) 26%,rgba(5,12,30,0) 52%),
    radial-gradient(130% 85% at 72% 28%,transparent 42%,rgba(5,12,30,.34) 100%)}
.fbb.vid-on .fbb-scrim{opacity:.82}   /* a little lighter over a video slide */

/* ==========================================================
   3. CONTENT (normal flow — the height is built here)
   ========================================================== */
.fbb-wrap{position:relative;z-index:3;
  flex:1 1 auto;display:flex;align-items:flex-end;
  width:100%;max-width:var(--fbb-max);margin:0 auto;
  padding:var(--fbb-top) var(--fbb-pad) var(--fbb-gap)}

/* grid stacking: every copy shares one cell, so the layer is as tall as the
   longest copy and changing slide cannot make the hero jump */
.fbb-copies{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
.fbb-copy{grid-area:1/1;max-width:730px;min-width:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .85s ease,visibility .85s}
.fbb-copy.on{opacity:1;visibility:visible;pointer-events:auto;z-index:2}

.fbb-eyebrow{display:flex;align-items:center;gap:11px;
  margin-bottom:clamp(12px,2vh,20px);opacity:0;transform:translateY(14px)}
.fbb-eyebrow b{width:6px;height:6px;border-radius:50%;background:var(--fbb-cyan);
  box-shadow:0 0 0 4px rgba(46,176,231,.16);flex:0 0 auto}
.fbb-eyebrow span{font-size:clamp(10.5px,1vw,11.5px);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.fbb-eyebrow i{flex:1 1 auto;max-width:36px;height:1.5px;border-radius:2px;font-style:normal;
  background:linear-gradient(90deg,var(--fbb-cyan),rgba(46,176,231,0))}

.fbb h2{font-size:clamp(28px,6.4vw,60px);font-weight:600;line-height:1.06;
  letter-spacing:-.026em;color:#fff;overflow-wrap:break-word;
  margin-bottom:clamp(13px,2vh,20px)}
.fbb h2 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.fbb h2 .ln>span{display:block;transform:translateY(114%)}
.fbb h2 em{font-style:normal;
  background:linear-gradient(100deg,var(--fbb-cyan-lt) 0%,var(--fbb-cyan) 52%,#A6E6FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.fbb-sub{position:relative;padding-left:16px;max-width:545px;
  font-size:clamp(14px,1.3vw,17px);line-height:1.7;
  color:rgba(255,255,255,.84);margin-bottom:clamp(20px,3vh,32px);
  opacity:0;transform:translateY(16px)}
.fbb-sub::before{content:"";position:absolute;left:0;top:.4em;bottom:.4em;width:2px;
  border-radius:2px;background:linear-gradient(180deg,var(--fbb-cyan),rgba(46,176,231,.04))}

.fbb-btns{display:flex;gap:10px;flex-wrap:wrap;opacity:0;transform:translateY(18px)}
.fbb .fbb-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'IBM Plex Sans',sans-serif;font-weight:600;
  font-size:clamp(13.5px,1.15vw,14.5px);
  padding:clamp(12px,1.5vh,15px) clamp(20px,2.4vw,30px);
  border-radius:100px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,background .3s,color .3s,border-color .3s}
.fbb .fbb-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s;flex:0 0 auto}
.fbb .fbb-btn.w{background:#fff;color:#08203f;box-shadow:0 12px 30px -14px rgba(0,0,0,.7)}
.fbb .fbb-btn.g{color:#fff;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fbb .fbb-btn:focus-visible{outline:2px solid var(--fbb-cyan);outline-offset:4px}
@media(hover:hover){
  .fbb .fbb-btn.w:hover{background:linear-gradient(100deg,var(--fbb-cyan),var(--fbb-blue));
    color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(46,176,231,.7)}
  .fbb .fbb-btn.w:hover svg{transform:translateX(4px)}
  .fbb .fbb-btn.g:hover{background:rgba(255,255,255,.96);color:#08203f;
    border-color:transparent;transform:translateY(-2px)}
}

/* entrance choreography */
.fbb-copy.on .fbb-eyebrow            {animation:fbbUp .8s .24s cubic-bezier(.2,.7,.3,1) forwards}
.fbb-copy.on h2 .ln:nth-child(1)>span{animation:fbbLn .9s .34s cubic-bezier(.16,.84,.3,1) forwards}
.fbb-copy.on h2 .ln:nth-child(2)>span{animation:fbbLn .9s .44s cubic-bezier(.16,.84,.3,1) forwards}
.fbb-copy.on h2 .ln:nth-child(3)>span{animation:fbbLn .9s .54s cubic-bezier(.16,.84,.3,1) forwards}
.fbb-copy.on .fbb-sub                {animation:fbbUp .8s .60s cubic-bezier(.2,.7,.3,1) forwards}
.fbb-copy.on .fbb-btns               {animation:fbbUp .8s .72s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fbbUp{to{opacity:1;transform:translateY(0)}}
@keyframes fbbLn{to{transform:translateY(0)}}

/* ==========================================================
   4. CONTROL BAR (normal flow — it never rides over the copy)
   ========================================================== */
.fbb-bar{position:relative;z-index:4;flex:0 0 auto;width:100%}
.fbb-bar .in{max-width:var(--fbb-max);margin:0 auto;
  padding:16px var(--fbb-pad) clamp(18px,3vh,28px);
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;align-items:flex-end;gap:clamp(12px,3vw,40px)}

.fbb-tabs{display:flex;gap:clamp(10px,2.4vw,34px);flex:1 1 auto;min-width:0}
.fbb .fbb-tab{position:relative;flex:1 1 0;max-width:235px;min-width:0;
  text-align:left;padding:6px 0 0;-webkit-tap-highlight-color:transparent}
.fbb-tab .tl{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.fbb-tab .no{font-family:'IBM Plex Sans',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;color:rgba(255,255,255,.45);transition:color .35s}
.fbb-tab .nm{font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:500;
  color:rgba(255,255,255,.52);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;transition:color .35s}
.fbb-tab .trk{display:block;height:2px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.2)}
.fbb-tab .trk i{display:block;height:100%;width:0;font-style:normal;border-radius:2px;
  background:linear-gradient(90deg,var(--fbb-cyan),var(--fbb-cyan-lt))}
@media(hover:hover){.fbb .fbb-tab:hover .no,.fbb .fbb-tab:hover .nm{color:#fff}}
.fbb .fbb-tab[aria-selected="true"] .no{color:var(--fbb-cyan)}
.fbb .fbb-tab[aria-selected="true"] .nm{color:#fff;font-weight:600}
.fbb .fbb-tab[aria-selected="true"] .trk i{animation:fbbProg var(--dur,8s) linear forwards}
.fbb.paused .fbb-tab[aria-selected="true"] .trk i{animation-play-state:paused}
.fbb .fbb-tab:focus-visible{outline:2px solid var(--fbb-cyan);outline-offset:6px;border-radius:3px}
@keyframes fbbProg{to{width:100%}}

.fbb-ctrl{display:flex;align-items:center;gap:7px;flex:0 0 auto;padding-bottom:2px}
.fbb .fbb-ar,.fbb .fbb-pp{border-radius:50%;
  border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s,border-color .25s,transform .25s}
.fbb .fbb-ar{width:clamp(38px,4.4vw,46px);height:clamp(38px,4.4vw,46px)}
.fbb .fbb-pp{width:clamp(32px,3.6vw,38px);height:clamp(32px,3.6vw,38px);margin-right:3px}
.fbb .fbb-ar svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.fbb .fbb-pp svg{width:12px;height:12px;fill:#fff;stroke:none;transition:fill .25s}
@media(hover:hover){
  .fbb .fbb-ar:hover,.fbb .fbb-pp:hover{background:#fff;border-color:#fff;transform:translateY(-2px)}
  .fbb .fbb-ar:hover svg{stroke:#08203f}
  .fbb .fbb-pp:hover svg{fill:#08203f}
}
.fbb .fbb-ar:focus-visible,.fbb .fbb-pp:focus-visible{outline:2px solid var(--fbb-cyan);outline-offset:3px}
.fbb .fbb-pp .ic-play{display:none}
.fbb.stopped .fbb-pp .ic-pause{display:none}
.fbb.stopped .fbb-pp .ic-play{display:block}

/* ==========================================================
   5. RESPONSIVE
   ========================================================== */
@media(max-width:900px){
  .fbb-tab .nm{display:none}
  .fbb .fbb-tab{max-width:none}
}
@media(max-width:600px){
  .fbb{--fbb-top:clamp(84px,13vh,120px)}
  .fbb-media{--fbb-zoom:var(--fbb-zoom-m,var(--fbb-zoom-d,1))}
  /* A landscape video cropped to a portrait band shows very little, and a
     letterboxed one shows less again. Where a still has been supplied it
     replaces the embed outright below this width. */
  .fbb-media[data-mobimg] .fbb-yt,
  .fbb-media[data-mobimg] .fbb-poster{display:none}
  .fbb-media[data-mobimg] .fbb-mobimg{display:block;position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover}
  /* The tabs were 33px tall. They double as the slider's only touch control,
     so they need a thumb-sized hit area even though the label is small. */
  .fbb .fbb-tab{min-height:44px}
  .fbb-sub{max-width:100%}
  .fbb-btns{width:100%;gap:9px}
  .fbb .fbb-btn{flex:1 1 100%}
  .fbb-bar .in{gap:12px;padding-top:14px}
}
@media(max-width:380px){
  .fbb .fbb-pp{display:none}
  .fbb-tabs{gap:8px}
}
/* landscape phone and short screens — the hero is only as tall as its content */
@media(orientation:landscape) and (max-height:560px){
  .fbb{min-height:0;--fbb-top:clamp(64px,12vh,92px);--fbb-gap:20px}
  .fbb h2{font-size:clamp(24px,4.4vw,38px)}
  .fbb-sub{margin-bottom:16px}
}
@media(prefers-reduced-motion:reduce){
  .fbb-media.on img{animation:none;transform:scale(1.02)}
  .fbb h2 .ln>span{transform:none}
  .fbb-copy.on h2 .ln>span{animation:none}
  .fbb-eyebrow,.fbb-sub,.fbb-btns{opacity:1;transform:none}
  .fbb-copy.on .fbb-eyebrow,.fbb-copy.on .fbb-sub,.fbb-copy.on .fbb-btns{animation:none}
  .fbb-media,.fbb-copy{transition-duration:.2s}
}