
/* FEDERATION — MOBILE RESPONSIVE LAYER */
html{overflow-x:hidden}
body{overflow-x:hidden;-webkit-text-size-adjust:100%}
img,video,iframe,canvas,svg{max-width:100%}
img,video{height:auto}
*{box-sizing:border-box}

/* Tablet + phone */
@media (max-width: 900px){
  body{width:100%;min-width:0}
  main,section,header,footer{max-width:100%}
  .container,.wrap,.inner,.content,.section-inner,.site-container{
    width:min(100% - 32px,1200px)!important;
    max-width:100%!important;
    margin-left:auto!important;margin-right:auto!important;
  }

  /* Header/nav: horizontally scrollable instead of breaking layout */
  header,.site-header{max-width:100vw}
  nav,.nav,.site-nav,.main-nav{
    max-width:100%!important;
  }
  nav ul,.nav ul,.site-nav ul,.main-nav ul{
    max-width:100%!important;
  }

  /* Common grids */
  .portfolio-grid,.projects-grid,.project-grid,.services-grid,.cards-grid,.grid,
  .team-grid,.news-grid,.audience-grid,.business-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
  }

  /* Large headings */
  h1{font-size:clamp(34px,8vw,64px)!important;line-height:1.02!important;overflow-wrap:anywhere}
  h2{font-size:clamp(27px,6.5vw,48px)!important;line-height:1.08!important}
  h3{overflow-wrap:anywhere}

  /* Hero */
  .hero,.subpage-hero,.page-hero{min-height:auto!important}
  .hero-content,.hero-inner,.subpage-hero-inner{max-width:100%!important}

  /* Buttons */
  .btn,.button,button,a[class*="btn"]{max-width:100%}

  /* Cinematic intro */
  #fed-cinematic-intro{height:100dvh!important;min-height:100dvh}
  .fed-intro-bg{inset:0!important;background-size:cover!important}
  .fed-intro-copy{width:calc(100% - 28px)!important;bottom:8vh!important}
  .fed-intro-title{font-size:clamp(31px,10vw,52px)!important;letter-spacing:.07em!important}
  .fed-intro-kicker{font-size:9px!important;letter-spacing:.22em!important}
  .fed-intro-sub{font-size:9px!important;letter-spacing:.18em!important}
  .fed-intro-enter{padding:13px 18px!important;font-size:10px!important;letter-spacing:.18em!important}
  .fed-intro-skip{font-size:12px!important;right:8px!important;bottom:8px!important}
  .fed-intro-ring{width:82vw!important}
  .fed-intro-ring.r2{width:62vw!important}

  /* Disable mouse-only 3D transforms on touch */
  .wow-poster,.wow-poster:hover{transform:none!important}
  .wow-poster:hover img{transform:none!important}
  .wow-spotlight{display:none!important}

  /* Media */
  iframe{width:100%!important}
  video{width:100%!important;object-fit:contain}
}

/* Phones */
@media (max-width: 640px){
  .container,.wrap,.inner,.content,.section-inner,.site-container{
    width:calc(100% - 24px)!important;
  }

  /* Stack grids */
  .portfolio-grid,.projects-grid,.project-grid,.services-grid,.cards-grid,.grid,
  .team-grid,.news-grid,.audience-grid,.business-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  section{padding-left:0!important;padding-right:0!important}
  .portfolio-card,.project-card,.card{width:100%!important;max-width:100%!important}

  /* Navigation: keep every link reachable without widening page */
  nav ul,.nav ul,.site-nav ul,.main-nav ul{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:8px!important;
    padding-bottom:7px!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  nav ul::-webkit-scrollbar,.nav ul::-webkit-scrollbar,.site-nav ul::-webkit-scrollbar,.main-nav ul::-webkit-scrollbar{display:none}
  nav li,.nav li,.site-nav li,.main-nav li{flex:0 0 auto!important}
  nav a,.nav a,.site-nav a,.main-nav a{white-space:nowrap!important}

  p,li{overflow-wrap:break-word}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Forms */
  form,input,textarea,select{max-width:100%!important}
  input,textarea,select{width:100%;font-size:16px!important}
  textarea{min-height:120px}

  /* Prevent fixed decorative layers blocking taps */
  .rf-orb,.premium-neon-orb,[class*="cursor-light"]{pointer-events:none!important}

  /* Contacts finale */
  #wow-final{padding:20px}
  .wow-final-title{font-size:clamp(22px,7vw,34px)!important;letter-spacing:.07em!important}
  .wow-final-sub{font-size:9px!important;letter-spacing:.18em!important}
}

/* Very small phones */
@media (max-width: 390px){
  .container,.wrap,.inner,.content,.section-inner,.site-container{width:calc(100% - 20px)!important}
  h1{font-size:clamp(30px,9.5vw,42px)!important}
  h2{font-size:clamp(25px,8vw,34px)!important}
  .fed-intro-title{font-size:30px!important}
}

/* Touch devices */
@media (hover:none),(pointer:coarse){
  .wow-poster,.wow-poster:hover{transform:none!important}
  .wow-spotlight{display:none!important}
  a,button{touch-action:manipulation}
}

@media (max-width:760px){
.site-header{position:sticky!important;top:0!important;z-index:10000!important;height:64px!important;padding:0 14px!important;background:rgba(5,8,10,.94)!important;backdrop-filter:blur(18px)!important}
.site-header .brand{position:relative;z-index:10002;max-width:180px!important}.site-header .brand img{max-height:42px!important;width:auto!important}
.menu-toggle{display:flex!important;align-items:center;justify-content:center;position:relative;z-index:10002;width:44px;height:44px;margin-left:auto!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:50%!important;font-size:0!important;color:#fff!important;background:rgba(255,255,255,.05)!important}
.menu-toggle:before,.menu-toggle:after,.menu-toggle span{content:"";position:absolute;width:20px;height:2px;background:#fff;border-radius:2px;transition:.3s ease}
.menu-toggle:before{top:14px}.menu-toggle:after{top:27px}.menu-toggle span{top:20px}.menu-toggle.mobile-open:before{top:20px;transform:rotate(45deg)}.menu-toggle.mobile-open:after{top:20px;transform:rotate(-45deg)}.menu-toggle.mobile-open span{opacity:0}
.main-nav{display:flex!important;position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;padding:92px 24px 34px!important;background:radial-gradient(circle at 70% 15%,rgba(55,110,255,.16),transparent 35%),rgba(3,6,9,.985)!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;overflow-y:auto!important;transform:translateX(105%);opacity:0;visibility:hidden;transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility .3s;z-index:10001!important;border:0!important}
.main-nav.open{transform:translateX(0);opacity:1;visibility:visible}.main-nav a{width:100%!important;padding:15px 4px!important;border-bottom:1px solid rgba(255,255,255,.09)!important;font-size:clamp(18px,5.3vw,25px)!important;line-height:1.15!important;letter-spacing:.03em!important;white-space:normal!important;color:#fff!important}
body.mobile-menu-open{overflow:hidden!important}.header-cta{display:none!important}.site-header>a[aria-label="English version"]{position:relative;z-index:10002;margin-left:8px!important;font-size:12px!important}
.hero{min-height:calc(100svh - 64px)!important;padding-top:80px!important}.hero-bg{background-position:center top!important}.hero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}.hero-actions .btn{width:100%!important;justify-content:center!important}.hero-tags{gap:7px!important}.hero-tags span{font-size:10px!important;padding:8px 10px!important}
.section{padding-top:54px!important;padding-bottom:54px!important}.section-head{margin-bottom:28px!important}.section-head p{max-width:none!important}.portfolio-showcase img{border-radius:14px!important;max-height:none!important}
footer{padding-left:14px!important;padding-right:14px!important}.design-switcher{right:10px!important;bottom:10px!important;transform:scale(.88);transform-origin:bottom right}
}
@media(max-width:420px){.site-header .brand{max-width:145px!important}.main-nav{padding-left:18px!important;padding-right:18px!important}.main-nav a{font-size:19px!important;padding:13px 3px!important}}


/* MOBILE V3 — fit cinematic Earth/globe intro completely inside phone screen */
@media (max-width:760px){
  #fed-cinematic-intro{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }

  /* Show the complete intro artwork instead of cropping its sides */
  #fed-cinematic-intro .fed-intro-bg{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    background-size:contain!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    transform:none!important;
    animation:fedCameraMobile 6.6s cubic-bezier(.16,.76,.18,1) forwards!important;
  }

  /* Keep rotating globe/rings inside viewport */
  #fed-cinematic-intro .fed-intro-ring{
    left:50%!important;
    top:43%!important;
    width:min(76vw,76vh)!important;
    max-width:76vw!important;
    max-height:76vw!important;
  }
  #fed-cinematic-intro .fed-intro-ring.r2{
    width:min(58vw,58vh)!important;
    max-width:58vw!important;
    max-height:58vw!important;
  }

  #fed-cinematic-intro .fed-intro-light{
    inset:-5%!important;
  }

  #fed-cinematic-intro .fed-intro-copy{
    left:50%!important;
    bottom:max(42px,env(safe-area-inset-bottom))!important;
    width:calc(100% - 28px)!important;
    transform:translateX(-50%)!important;
  }

  #fed-cinematic-intro .fed-intro-skip{
    right:8px!important;
    bottom:max(6px,env(safe-area-inset-bottom))!important;
    z-index:20!important;
  }
}

@media (max-width:430px){
  #fed-cinematic-intro .fed-intro-ring{
    top:40%!important;
    width:70vw!important;
  }
  #fed-cinematic-intro .fed-intro-ring.r2{
    width:53vw!important;
  }
  #fed-cinematic-intro .fed-intro-copy{
    bottom:max(48px,env(safe-area-inset-bottom))!important;
  }
}

@keyframes fedCameraMobile{
  0%{transform:scale(.88);filter:saturate(.82) brightness(.55)}
  48%{transform:scale(.94);filter:saturate(1.05) brightness(.76)}
  82%{transform:scale(.98);filter:saturate(1.10) brightness(.88)}
  100%{transform:scale(1);filter:saturate(1.08) brightness(.72)}
}


/* MOBILE V4 — entire rotating globe/ball must remain visible */
@media (max-width:760px){
  #fed-cinematic-intro{
    overflow:hidden!important;
  }

  /* Keep the complete cinematic artwork inside the safe viewport */
  #fed-cinematic-intro .fed-intro-bg{
    inset:4% 3% 15%!important;
    width:auto!important;
    height:auto!important;
    background-size:contain!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    animation:fedCameraMobileSafe 6.6s ease forwards!important;
    transform-origin:center center!important;
  }

  /* Rotating sphere/rings: smaller safe zone so nothing gets cut */
  #fed-cinematic-intro .fed-intro-ring{
    left:50%!important;
    top:39%!important;
    width:min(60vw,46vh)!important;
    max-width:60vw!important;
    max-height:60vw!important;
  }
  #fed-cinematic-intro .fed-intro-ring.r2{
    width:min(45vw,35vh)!important;
    max-width:45vw!important;
    max-height:45vw!important;
  }

  #fed-cinematic-intro .fed-intro-flare{
    top:39%!important;
  }

  #fed-cinematic-intro .fed-intro-copy{
    bottom:max(50px,env(safe-area-inset-bottom))!important;
  }
}

@media (max-width:430px){
  #fed-cinematic-intro .fed-intro-bg{
    inset:6% 4% 18%!important;
  }
  #fed-cinematic-intro .fed-intro-ring{
    top:37%!important;
    width:min(56vw,42vh)!important;
    max-width:56vw!important;
  }
  #fed-cinematic-intro .fed-intro-ring.r2{
    width:min(41vw,31vh)!important;
    max-width:41vw!important;
  }
  #fed-cinematic-intro .fed-intro-flare{top:37%!important}
}

@keyframes fedCameraMobileSafe{
  0%{transform:scale(.78);filter:saturate(.82) brightness(.55)}
  50%{transform:scale(.84);filter:saturate(1.04) brightness(.76)}
  82%{transform:scale(.88);filter:saturate(1.08) brightness(.86)}
  100%{transform:scale(.90);filter:saturate(1.06) brightness(.72)}
}
