/* Navbar: Geist 500
Headings: Sora 700–800
Body: Geist 400 */
  
  :root{
    
    --navy-deep:#020266;
    --navy-mid:#0F2A63;
    --blue:#01B2FE;
    --blue-bright:#3FA9F5;
    --cyan:#7FE0FF;
    --paper:#F5F8FC;
    --ink:#0B1830;
    --slate:#5A6B87;
    --white:#ffffff;
    --orange: #F97316;
    --shadow: 0 20px 60px rgba(8,21,51,0.25);
    --heading: "Sora", sans-serif;
    --body:  "Geist", sans-serif;
    --max-width: 1280px;


        --bg-deep: #060c1a;
    --bg-panel: #0a1428;
    --bg-panel-2: #0d1730;
    --line: rgba(255,255,255,0.08);
    --text-primary: #eef2fb;
    --text-secondary: #9aa7c7;
    --text-muted: #6d7899;
    --accent: #3b82f6;
    --accent-soft: rgba(59,130,246,0.14);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html.preload-lock, html.preload-lock body{overflow:hidden; height:100%;}
  html{scroll-behavior:smooth;}
  body{
     font-family: var(--body);
    color:var(--ink);
    background:var(--paper);
    overflow-x:hidden;
    background-color: #212121;
    position: relative;
  }

body.home{
    overflow-y: hidden;
  }

  a{text-decoration:none;color:inherit;}
  ul{list-style:none;}

  .container{
    max-width: var(--max-width);
    margin: auto;
  }

#body-wrap{
    visibility: hidden;
    opacity: 0;
}

#body-wrap.loaded{
    visibility: visible;
    opacity: 1;
}


  /* ---------- INTRO PRELOADER ---------- */
  #preloader{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 18% 18%, rgba(63,169,245,.28), transparent 58%),
      radial-gradient(circle at 82% 86%, rgba(27,95,224,.30), transparent 55%),
      linear-gradient(160deg, #04060d 0%, #010103 50%, #040b1a 100%);

      /* background:radial-gradient(circle at 50% 38%, #1B5FE0 0%, #0F2A63 48%, #081533 88%); */
    opacity:1;
    transition:opacity .6s ease, transform .9s cubic-bezier(.65,0,.35,1);
    will-change:transform, opacity;
  }
  #preloader.show{opacity:1;}
  #preloader.liftoff{transform:translateY(-100%);}

  .preloader-inner{
    position:relative;
    display:flex; flex-direction:column; align-items:center;
  }

  .logo-stage{
    position:absolute;
    top:-64px; left:50%;
    transform:translateX(-50%);
    width:64px; height:74px;
    pointer-events:none;
  }
  .preload-logo{
    width:100%; height:100%;
    opacity:0;
    transform:scale(.2) translateY(10px) rotate(0deg);
    /* filter:blur(10px); */
  }
  .preload-logo.emerge{
    animation:logoEmerge 900ms cubic-bezier(.2,.7,.2,1) forwards;
  }
  @keyframes logoEmerge{
    0%{opacity:0; transform:scale(.2) translateY(14px) rotate(0deg); }
    55%{opacity:1; transform:scale(1.2) translateY(-6px) rotate(-10deg); }
    100%{opacity:1; transform:scale(1) translateY(0) rotate(-6deg); }
  }

  .preload-title{
    display:flex; justify-content:center;
    font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff;
    font-size:clamp(26px,5.4vw,48px); letter-spacing:.02em;
  }
  .preload-title .letter{
    display:inline-block;
    opacity:0;
    transform:translateY(26px) scale(.85);
    animation:letterIn 550ms cubic-bezier(.2,.7,.2,1) forwards;
  }
  @keyframes letterIn{
    0%{opacity:0; transform:translateY(26px) scale(.85);}
    100%{opacity:1; transform:translateY(0) scale(1);}
  }

  .preload-sub{
    display:flex; gap:9px; justify-content:center; margin-top:7px;
  }
  .preload-sub .word{
    display:inline-block;
    opacity:0;
    transform:translateX(80px);
    font-family:'IBM Plex Mono',monospace; font-weight:500; color:var(--cyan);
    font-size:clamp(11px,1.8vw,15px); letter-spacing:.24em; text-transform:uppercase;
    animation:wordIn 600ms cubic-bezier(.2,.7,.2,1) forwards;
  }
  @keyframes wordIn{
    0%{opacity:0; transform:translateX(80px);}
    100%{opacity:1; transform:translateX(0);}
  }

  .preload-loading{
    position:fixed; bottom:0; left:0; right:0; width:100%;
  }
  .loading-track{
    width:100%; height:3px;
    background:rgba(255,255,255,.18); overflow:hidden;
  }
  .loading-fill{
    height:100%; width:0%;
    background:#fff;
    transition:width .28s cubic-bezier(.3,.8,.3,1);
  }

  .preload-counter{
    position:fixed; bottom:26px; left:32px;
    font-family:'IBM Plex Mono',monospace; color:#fff;
    font-size:26px; font-weight:500; letter-spacing:.03em;
  }

  @media (prefers-reduced-motion: reduce){
    #preloader{transition:none !important;}
    .preload-logo, .preload-title .letter, .preload-sub .word{animation:none !important; opacity:1 !important; transform:none !important; filter:none !important;}
  }




  @media only screen and (max-width: 767px){

    /* pre-loader */
    
    #preloader img{
        width: 40px;
        /* aspect-ratio: 1; */
        height: 40px;
    }

    .logo-stage{
        top:-44px;
  }
  }



  /* page-wrap */

  .page-wrap{
    position: relative;
    z-index: 2;
    background: var(--paper);
    
  }



  /* header */

  #siteHeader{
    position: absolute;
    color: rgba(0,0,0,0.8);
    /* background-color: var(--paper); */
    background-color: rgba(255, 255, 255, 1);
    box-shadow: var(--shadow);
    border-radius: 20px;
    padding: 12px 24px;
    max-width: 1280px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    z-index: 9;
  }

   #siteHeader-sticky{
    color: rgba(0,0,0,0.8);
    /* background-color: var(--paper); */
    background-color: rgba(255, 255, 255, 1);
    box-shadow: var(--shadow);
    border-radius: 20px;
    position: fixed;
    padding: 12px 24px;
    max-width: 1280px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    z-index: 9;
}
  

  #siteHeader-sticky.header-stuck{
    width: 100%;
  }

  #siteHeader-sticky .hamburger{
    color: #ffffff;
  }

  #siteHeader nav, #siteHeader-sticky nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
  }

  #siteHeader nav ul, #siteHeader-sticky nav ul{
    display: flex;
    align-items: center;
    gap: 32px;
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin-left: auto;
  }


    #siteHeader nav ul li:last-child,  #siteHeader-sticky nav ul li:last-child{
      display: none;
    }

  .nav-list a{
    position: relative;
  }

    .nav-list a::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
    background:var(--cyan); transition:width .3s ease;
  }
  .nav-list a:hover{color:#000000;}
  .nav-list a:hover::after{width:100%;}


  .site-logo{
        display: flex;
    align-items: center;
}



  #siteHeader .contact, #siteHeader-sticky .contact{
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 28px;

    border: none;
    border-radius: 14px;

    color: #fff;
    font-weight: 600;

    background: linear-gradient(
        135deg,
        #0ea5ff,
        #2563eb,
        #1d4ed8
    );

    box-shadow:
        0 10px 30px rgba(37,99,235,.35),
        inset 0 1px 0 rgba(255,255,255,.25);

    cursor: pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


  #siteHeader .contact::before, #siteHeader-sticky .contact::before{
    content:"";
    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

    transition:left .7s ease;
}


  #siteHeader .contact:hover,  #siteHeader-sticky .contact:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 45px rgba(37,99,235,.45),
        inset 0 1px 0 rgba(255,255,255,.35);
}

  #siteHeader .contact:hover::before, #siteHeader-sticky .contact:hover::before{
    left:150%;
}

  #siteHeader .contact:active,  #siteHeader-sticky .contact:active{
    transform:translateY(0);
}

#siteHeader .hamburger, #siteHeader-sticky .hamburger{
      border: none;
    background: transparent;
    display: none;

}

#siteHeader .hamburger i, #siteHeader-sticky .hamburger i{
  font-size: 16px;
}

 #siteHeader-sticky {
    color: rgba(0, 0, 0, 0.8);
    /* background-color: var(--paper); */
    background-color: rgba(7, 22, 51, 0.78);
    border-radius: 12px;
    padding: 10px 24px;
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.38);
    box-shadow: 0 10px 35px rgba(255, 255, 255, 0.08);
}

#siteHeader-sticky .nav-list a{color:rgba(255,255,255,0.75);}

#siteHeader-sticky .nav-list a:hover{color:#ffffff;}

@media (max-width:768px){

    #siteHeader, #siteHeader-sticky{

        width:calc(100% - 24px);

        top:12px;

        padding:14px 18px;

        border-radius:16px;
    }

    #siteHeader nav, #siteHeader-sticky nav{

        gap:0;
    }

    .site-logo img:first-child{

        width:40px;
    }

    .site-logo img:last-child{

        width:130px;
    }

    .nav-list{

        position:absolute;

        top:calc(100% + 12px);

        left:0;

        width:100%;

        padding:24px;

        border-radius:20px;

        background:#fff;

        box-shadow:var(--shadow);

        display:flex !important;
        flex-direction:column;

        gap:22px !important;

        opacity:0;
        visibility:hidden;

        transform:translateY(-15px);

        transition:.35s ease;
    }


    #siteHeader-sticky .nav-list{
      background-color: rgba(7, 22, 51, 1);
    }

    .nav-list.active{

        opacity:1;
        visibility:visible;

        transform:translateY(0);
    }
/* 
    .contact{

        position:absolute;

        top:calc(100% + 240px);

        left:24px;
        right:24px;

        justify-content:center;

        opacity:0;
        visibility:hidden;

        transition:.35s ease;
    }

    .contact.active{

        opacity:1;
        visibility:visible;
    } */

        #siteHeader nav>.contact, #siteHeader-sticky nav>.contact{
          display: none;
        }

    .hamburger{

        display:flex !important;

        margin-left:auto;
    }


      #siteHeader nav ul, #siteHeader-sticky nav ul{
        align-items: start;
      }

          #siteHeader nav ul li:last-child, #siteHeader-sticky nav ul li:last-child{
      display: block;
    }
}





/* hero */



  .hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    overflow:hidden;
    padding-top:80px;
    padding-left: 12px;
    padding-right: 12px;
    background:var(--navy-deep); /* fallback while images load */
    z-index: 4;
  }

  /* Two stacked, crossfading background layers */
  .hero-bg{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0;
    transition:opacity 1.1s ease;
    z-index:0;
    will-change:opacity, transform;
  }
  #heroBgA{ opacity:1; }

  /* dark wash so text stays legible over any photo */
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    /* background:linear-gradient(150deg, rgba(8,21,51,.80) 0%, rgba(15,42,99,.66) 55%, rgba(22,64,127,.55) 100%); */
     background: rgba(0, 0, 0, 0.45)
  }

  .hero-inner{position:relative; z-index:2; width:100%;}

  .hero-center{
    display:flex; flex-direction:column; align-items:start;
    text-align:start; max-width:840px; margin:0 auto;
    transform: translateX(100px);
  }

  .eyebrow{
    color:var(--cyan); font-size:12px; margin-bottom:26px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before, .eyebrow::after{content:''; width:26px; height:1px; background:var(--cyan); display:inline-block;}

.hero-center .horizontal-box{
  align-items: center;
}


  .hero-brand{
    color:#fff;
    /* font-size:clamp(28px, 4.4vw, 50px); */
    line-height:1.08;
    font-weight:500;
    font-size: 30px;
    font-family: var(--heading);
    /* letter-spacing:-0.01em; */
    flex-shrink: 0;
  }

  .hero-divider{
    width:35px; height:2px; margin:26px 0;
    background:linear-gradient(90deg, var(--blue-bright), var(--cyan));
    border-radius:2px;
        transform: rotate(90deg);
  }

  .hero-rotator{
    position:relative;
    /* min-height:clamp(52px,8vw,96px); */
    display:flex; align-items:center; justify-content:start;
    overflow:hidden;
    width:380px;
    /* max-width: 400px; */
  }
  .hero-rotate-word{
    display:inline-block;
    font-family:var(--body); font-weight:700;
    /* font-size:clamp(34px,6.4vw,78px); */
    font-size: 30px;
    line-height:1;
    background:linear-gradient(100deg, var(--blue-bright), var(--cyan));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    transition:opacity .45s ease, transform .45s ease;
    opacity:1; transform:translateY(0);
  }
  .hero-rotate-word.fade-out{ opacity:0; transform:translateY(18px); }

  .hero p.lede{
    color:rgba(255,255,255,1);
    /* font-size:clamp(15px,1.6vw,18px); */
    max-width:560px;
    margin-top:30px;
    line-height:1.65;
    font-family: var(--body);
  }

  @media (prefers-reduced-motion: reduce){
    .hero-bg, .hero-rotate-word{ transition:none !important; }
  }



  @media only screen and (max-width:767px){
    .hero-center {
    transform: none;
}



.hero-center {}.hero-center {
    transform: none;
}

.horizontal-box {
    flex-direction: column;
    align-items: start;
}

.hero-rotator {
    width: auto !important;
}

.hero-center .horizontal-box {
    align-items: start;
}

.hero-divider{
  width: 25px;
}

  }

  @media only screen and (min-width: 768px) and (max-width: 1024px){
    .hero-center {
    transform: none;
}
}
 


  /* footer */


  /* ---------- CTA / FOOTER ---------- */
  footer{background:#081533; color:#fff; padding:90px 12px 40px 12px;}
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:44px;}
  footer h3{font-family: var(--heading); font-size:24px; margin-bottom:16px;}
  footer p{color:rgba(255,255,255,.6); font-size:14.5px; line-height:1.7; max-width:360px;}
  .foot-col h4{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:18px;}
  .foot-col a, .foot-col div{display:block; color:rgba(255,255,255,.78); font-size:14px; margin-bottom:12px; transition:color .2s;}
  .foot-col a:hover{color:var(--cyan);}
  .foot-bottom{
    margin-top:70px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-size:12.5px; color:rgba(255,255,255,.45);
  }

  @media only screen and (max-width: 767px){
    .footer-grid{grid-template-columns:1fr !important; gap:36px;}
  }

  @media (max-width:900px){
    .mission-grid{grid-template-columns:1fr;}
    .presence-layout{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr; gap:36px;}
    .nav-links{display:none;}
    .circle-row{flex-direction:column;}
    .vcircle{margin-left:0; margin-top:-46px;}
    .vcircle:first-child{margin-top:0;}
    footer{
      padding-top: 50px;
    }
  .foot-bottom{
    margin-top: 40px;
  }    
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }








      /* for bringing second header to viewport */

  #siteHeader{
  transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
#siteHeader.header-hidden{
  transform: translate(-50%, -140%);
  opacity: 0;
  pointer-events: none;
}

#siteHeader-sticky{
  /* starts hidden above the viewport, on top of your existing translateX(-50%) */
  transform: translate(-50%, -140%);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
#siteHeader-sticky.header-visible{
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}









/* for making second header sticky to top */

#siteHeader-sticky{
  transition: transform .45s cubic-bezier(.4,0,.2,1),
              opacity .35s ease,
              top .35s ease,
              max-width .35s ease,
              border-radius .35s ease,
              padding .35s ease,
              background-color .35s ease;
}

/* stage 2: locked flush to the very top */
#siteHeader-sticky.header-stuck{
  top: 0;
  max-width: 100%;
  border-radius: 0;
  padding: 12px ;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background-color: rgba(7, 22, 51, 0.92);
}


#siteHeader-sticky.header-stuck nav{
  max-width: 1280px;
  margin: auto;
}












  /* ============ FOOTER — sticks to the viewport bottom and gets ============ */
  /* ============ progressively uncovered as .page-wrap scrolls over it ============ */
  .site-footer{
    position: sticky;
    bottom: 0;
    z-index: 0;
    width: 100%;
    overflow: hidden;
    background:
      radial-gradient(1000px 460px at 88% 8%, rgba(96,165,250,0.08), transparent 60%),
      radial-gradient(900px 500px at 78% 105%, rgba(59,130,246,0.10), transparent 60%),
      linear-gradient(175deg, var(--bg-panel-2) 0%, var(--bg-panel) 45%, #071022 100%);
    border-top: 1px solid var(--line);
  }

  .glow-rings{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 460px;
    height: 460px;
    pointer-events: none;
  }

  .footer-inner{
    position: relative;
    z-index: 1;

    padding: 72px 0px 0;
  }

  .footer-grid{
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
  }

  /* ---- Brand column ---- */
  .brand h2{
    font-size: 28px;
    line-height: 1.25;
    margin: 0 0 18px;
    font-weight: 700;
    max-width: 380px;
  }
  .brand p{
    color: var(--text-secondary);
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 400px;
    margin: 0 0 24px;
  }
  .socials{
    display:flex;
    gap: 12px;
  }
  .socials a{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--text-primary);
    text-decoration:none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .socials a:hover{
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px);
  }
  .socials svg{ width:16px; height:16px; }

  /* ---- Link columns ---- */
  .col h3{
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 14px;
    font-weight: 600;
  }
  .col .rule{
    width: 28px;
    height: 2px;
    background: var(--accent);
    margin-bottom: 22px;
  }
  .col ul{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-direction:column;
    gap: 16px;
  }
  .col a{
    color: var(--text-secondary);
    text-decoration:none;
    font-size: 14.5px;
    transition: color .2s ease;
  }
  .col a:hover{ color: var(--accent); }

  .contact-item{
    display:flex;
    align-items:flex-start;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 14.5px;
    text-decoration:none;
  }
  .contact-item svg{
    flex-shrink:0;
    color: var(--accent);
    margin-top: 2px;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), color .2s ease;
  }
  .contact-item:hover{ color: var(--accent); }
  .contact-item:hover svg{
    transform: translateX(4px) scale(1.12) rotate(-6deg);
  }

  /* plain text links (Our Companies / More) get a little arrow that
     slides in on hover, so their icon-less rows still get movement */
  .col ul li a{
    position: relative;
    display: inline-flex;
    align-items:center;
    gap: 8px;
    padding-left: 0;
    transition: padding-left .25s ease, color .2s ease;
  }
  .col ul li a::before{
    content: "";
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width .25s ease;
  }
  .col ul li a:hover{
    padding-left: 4px;
  }
  .col ul li a:hover::before{
    width: 14px;
  }

  /* ---- Bottom bar ---- */
  .footer-bottom{
    border-top: 1px solid var(--line);
    padding: 22px 0 26px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .footer-bottom .copy{
    color: var(--text-muted);
    font-size: 13px;
  }
  .values{
    color: var(--text-secondary);
    font-size: 13px;
    letter-spacing: 0.02em;
    gap: 8px;
  }
  .values .dot{ color: var(--accent); }

  /* ============ RESPONSIVE GRID RULES ============ */
  /* Tablet: up to 1024px -> 2 columns */
  @media (max-width: 1024px){
    .footer-grid{
      grid-template-columns: repeat(2, 1fr);
      row-gap: 40px;
    }
    .footer-inner{ padding-top: 56px; }
  }

  /* Mobile: up to 767px -> 1 column */
  @media (max-width: 767px){

      .site-footer{
        position: relative;
      }

    .footer-grid{
      grid-template-columns: 1fr;
      row-gap: 36px;
    }
    .footer-inner{ padding:0; }
    .brand h2{ font-size: 24px; }
    .footer-bottom{
      flex-direction: column;
      align-items: flex-start;
    }
    .glow-rings{
      width: 260px;
      height: 260px;
    }
  }






  /* stats-section */


  section{
    padding: 48px 12px;
  }

  .stats{
    background-color: var(--paper);

  }

  h2.section-heading{
    color: #000000;
    font-family: var(--heading);
    font-size: 35px;
    font-weight: 600;
    text-align: center;

  }

    h2.section-heading span{
      color: var(--orange);
    }

  .subheader-wrpr{
        margin-bottom: 50px;
            text-align: center;
    font-size: 18px;
    font-family: var(--body);
    color: #414141;
    font-weight: 400;
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    justify-content: space-between;
}

  .stat-icon img{
    width: 75px;
      transition:.35s ease;
  }



  .stat-card {
    display: flex;
    border: 2px solid rgba(0,0,0,0.48);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 12px;
    padding: 12px 24px;
    gap: 20px;
    width: 100%;
       transition: .35s ease;
}

.stat-wrpr {
    display: flex;
    flex-direction: column;
    /* gap: 16px; */
}

span.figure {
    color: var(--orange);
    font-weight: 700;
    font-family: var(--heading);
    font-size: 32px;
    transition:.35s ease;
}

span.label {
    font-size: 18px;
    font-weight: 700;
}

span.label {}

span.label-sub {
    color: rgba(0,0,0,0.58);
    font-weight: 400;
    font-size: 14px;
    margin-top: -2px;
}



.stat-card:hover{
    transform: translateY(-8px);
    border-color: var(--blue);
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
}


.stat-card:hover img{
    transform:scale(1.08);
}


.stat-card:hover .figure{
    color:var(--blue);
}


@media only screen and (max-width:767px){
  .stat-grid{
    grid-template-columns: 1fr;
  }

  .mission-grid{
    grid-template-columns: 1fr !important;
  }
}

@media only screen and (min-width:768px) and (max-width: 1024px){
  .stat-grid{
    grid-template-columns: 1fr 1fr !important;
  }

    .mission-grid{
    grid-template-columns: 1fr 1fr !important;
  }
}



/* mission grid */

    .mission-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:40px;
  }
  .mission-card{
        background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f7fbff 55%,
        #edf6ff 100%
    );; border-radius:30px; padding:30px 26px;
    border:1px solid #E7EDF6; transition:transform .3s ease, box-shadow .3s ease, border 0.3s ease-in-out;
  }
  .mission-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
  .mission-card .ico{
    width:44px;height:44px;border-radius:12px;
    background:linear-gradient(135deg, var(--blue), var(--blue-bright));
    display:flex;align-items:center;justify-content:center; margin-bottom:18px;
    color:#fff; font-size:18px;
  }
  .mission-card h3{font-size:16.5px; font-weight:600; margin-bottom:8px;}
  .mission-card p{font-size:14px; color:var(--slate); line-height:1.6;}


.mission-card:hover {
    border-left: 2px solid var();
}

.mission-card:hover {
    border-left: 5px solid var(--blue-bright);
}




/* companies */


.section.companies{
  background-color: var(--bg-panel-2);
  padding-top: 80px;
  padding-bottom: 80px;
}

.companies .section-heading{
  color: #ffffff;
  font-weight: 500;
  margin-top: 5px;
}

.mono{
  color: var(--orange);
}















 /* ---------- COMPANIES / SHARD ACCORDION ---------- */


  .accordion{
    display:flex; gap:6px; height:460px; margin-top:20px;
  }
  .panel{
    position:relative;
    flex:1;
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;
    background:var(--navy-mid);
    transition:flex .55s cubic-bezier(.2,.8,.2,1);
    display:flex; align-items:flex-end;
  }
  .panel.active{flex:3.4; cursor:default;}
  .panel-bg{
    position:absolute; inset:0;
    clip-path:polygon(0 0, 100% 0, 100% 78%, 0 100%);
    transition:opacity .5s ease;
  }
  .p1 .panel-bg{background:linear-gradient(150deg,#0F2A63,#1B5FE0 60%,#3FA9F5);}
  .p2 .panel-bg{background:linear-gradient(150deg,#1A0F63,#5A1BE0 60%,#B23FF5);}
  .p3 .panel-bg{background:linear-gradient(150deg,#063A3D,#0FA3A8 60%,#5CE0D8);}
  .panel::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(4,10,28,.92) 0%, rgba(4,10,28,.15) 85%, rgba(4,10,28,0) 100%);
    z-index:1;
  }

  .panel-bg-img{
        width: 50%;
    position: absolute;
    right: 18%;
    aspect-ratio: 1;
  }


  .panel-content{position:relative; z-index:2; padding:34px 26px 45px 26px; width:100%;}
  .panel-index{
    writing-mode:vertical-rl; 
    position:absolute; top:30px; right:22px; z-index:2;
    color:rgba(255,255,255,1); font-size:11px; letter-spacing:.15em;
  }
  .panel-tag{
    font-size:11px; color:var(--cyan); margin-bottom:12px; display:block;
  }
  .panel h3{
    color:#fff; font-size:22px; font-weight:700; line-height:1.2;
    white-space:nowrap; overflow:hidden; 
  }
  .panel:not(.active) h3{writing-mode:vertical-rl;  white-space:nowrap; font-size:18px;}
  .panel:not(.active) .panel-tag{display:none;}
  .panel .panel-desc, .panel .chip-row, .panel .panel-cta{
    max-height:0; opacity:0; overflow:hidden; transition:opacity .35s ease, max-height .5s ease;
  }
  .panel.active .panel-desc{max-height:120px; opacity:1; margin-top:14px; color:rgba(255,255,255,.78); font-size:14.5px; line-height:1.65; max-width:420px;}

  .panel.active .panel-cta{max-height:60px; opacity:1; margin-top:22px;}

  .panel-link{
    display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:600; font-size:13.5px;
    border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:4px; transition:gap .25s ease, border-color .25s;
  }
  .panel-link:hover{gap:12px; border-color:#fff;}
  .panel-hint{position:absolute; bottom:24px; left:26px; z-index:2; color:rgba(255,255,255,.4); font-size:11px;}
  .panel.active .panel-hint{display:none;}

  @media (max-width:820px){
    .accordion{flex-direction:column; height:auto;}
    .panel{height:165px; flex:none !important;}
    .panel.active{height:420px;}
    .panel:not(.active) h3{writing-mode:horizontal-tb; font-size:16px;}
    .panel-index{display:none;}
  }











/* ============ VENN STAGE ============ */


@media only screen and (min-width: 1151px){
      .venn{
    width: min(620px, 90vw);

  }

    .circle{
    position:absolute;
    width: 56%;
        padding-top: 13%;
        opacity:0;

  }

    /* positions: top, bottom-left, bottom-right — final resting spots
     are set with top/left/right so the three circles only kiss in
     the middle, leaving just enough overlap for the logo mark */
  .circle.top{
    top: 0;
    left: 22%;
    transform: translateY(-170%) scale(.85);
  }
  .circle.left{
    top: 44%;
    left: 0%;
    transform: translateX(-170%) scale(.85);
  }
  .circle.right{
    top: 44%;
    right: 0%;
    transform: translateX(100%) scale(.85);
  }


}

  .venn{
    position: relative;
    /* width: min(620px, 90vw); */
    aspect-ratio: 1 / 1;
    margin: 70px auto 0;
    z-index:2;
  }

  .circle{
    /* position:absolute;
    width: 56%; */
    aspect-ratio: 1/1;
    border-radius:50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(226,240,253,0.35));
    border: 1.5px solid rgba(63,169,245,0.55);
    box-shadow: 0 30px 60px -20px rgba(15,42,99,0.18);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    /* padding-top: 13%; */
    /* opacity: 0; */
    will-change: transform, opacity;
    pointer-events: none;
  }

  .circle .icon{
    width: 52px;
    height: 52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--blue);
    margin-bottom: 14px;
  }
  .circle .icon svg{ width:26px; height:26px; }

  .circle h3{
    font-family: var(--heading);
    font-weight: 800;
    font-size: 18px;
    letter-spacing:.01em;
    color: var(--navy-deep);
    margin: 0 0 10px;
    position:relative;
    padding-bottom: 12px;
  }
  .circle h3::after{
    content:"";
    position:absolute;
    bottom:0; left:50%;
    transform: translateX(-50%);
    width: 26px; height:2px;
    background: var(--blue);
  }

  .circle p{
    font-size: 13.5px;
    line-height:1.55;
    color: var(--slate);
    max-width: 170px;
    margin:0;
  }



  .values-sec.in-view .circle.top{
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: transform 2.2s cubic-bezier(.16,.68,.2,1) .1s, opacity 1.6s ease .1s;
  }
  .values-sec.in-view .circle.left{
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: transform 2.2s cubic-bezier(.16,.68,.2,1) .5s, opacity 1.6s ease .5s;
  }
  .values-sec.in-view .circle.right{
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: transform 2.2s cubic-bezier(.16,.68,.2,1) .5s, opacity 1.6s ease .5s;
  }

  /* small logo mark, appears after circles land */
  .center-mark{
    position:absolute;
    top: 53%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%,-50%) scale(.4);
    opacity: 0;
    z-index: 5;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: opacity 1s ease 2.4s, transform 1.1s cubic-bezier(.34,1.56,.64,1) 2.4s;
  }
  .values-sec.in-view .center-mark{
    opacity:1;
    transform: translate(-50%,-50%) scale(1);
  }

  .logo-badge{
    position:relative;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .logo-badge img{ width: 40px; height:40px; }

  /* @media (max-width: 1024px){
    .venn{ margin-top: 140px; }
    .circle{ width: 68%; padding-top: 15%; opacity:1; position: relative}
    .circle.top{ left: 16%; transform: none;}
    .circle.left{ left: 0%; top: 40%; transform: none }
    .circle.right{ right: 0%; top: 40%; transform: none }
    .circle p{ max-width: 150px; font-size:13px; }
    .values-sec{ padding: 90px 20px 260px; }
  } */

  @media only screen and (max-width: 1024px){
    .circle{
      aspect-ratio: 0;
      padding: 12px;
      border-radius: 12px;
    }

    .venn{
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .center-mark{
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .circle, .center-mark{
      transition: none !important;
      opacity:1 !important;
      transform:none !important;
    }
  }










  /* clients */



  section.clients{
      background-color: var(--bg-panel-2);
  }


  .logo-item img {
    border-radius: 12px;
}

.clients .section-heading{
  color:#ffffff;
}





   /* ============ MARQUEE ============ */
  .marquee{
    position: relative;
    width: 100%;
    overflow: hidden;
    /* soft fade at both edges so logos don't hard-cut */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black 8%,
      black 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black 8%,
      black 92%,
      transparent 100%
    );
  }

  .marquee-track{
    display:flex;
    align-items:center;
    width: max-content;
    animation: scroll-left 28s linear infinite;
    gap: 60px;
  }

  .marquee:hover .marquee-track{
    animation-play-state: paused;
  }

  @keyframes scroll-left{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); } /* track is duplicated x2, so -50% = one full loop */
  }

  @media only screen and (max-width: 1024px){
    .marquee-track{
      gap: 30px;
    }
  }