/* FML Group additions — kept separate from the theme's own CSS files
   so the original template styling stays fully intact and upgradeable. */

.services-list .item{
  position:relative;
  overflow:hidden;
  width:100%;
}
.cluster-photo{
  position:absolute;
  inset:0;
  z-index:-2;
  background-size:cover;
  background-position:center;
  filter:saturate(.8) brightness(.45);
}
.cluster-photo-logistique{
  filter:saturate(.4) brightness(.32) contrast(1.05);
}
.cluster-illustration{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.22;
  pointer-events:none;
  transition:opacity .5s ease;
}
.services-list .item:hover .cluster-illustration{ opacity:.14; }
.cluster-illustration svg{ width:100%; height:100%; display:block; }
.services-list .item::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg, rgba(20,21,23,0) 0%, rgba(20,21,23,.5) 45%, rgba(20,21,23,.72) 100%);
  pointer-events:none;
}
.service-box{ position:relative; z-index:1; }
.cluster-tagline{ margin-bottom:8px; }
.sub-list{
  list-style:none;
  margin:0;
  padding:0;
  text-align:left;
}
.sub-list li{
  position:relative;
  padding-left:16px;
  margin-bottom:6px;
  font-size:14px;
  line-height:1.5;
}
.sub-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:1px;
  background:currentColor;
  opacity:.6;
}
.services-list .item:hover{
  color:#fff;
}
.services-list .item:hover .service-box,
.services-list .item:hover .service-box h3,
.services-list .item:hover .service-box p{
  color:#fff;
}

.hero-photo{
  position:fixed;
  inset:0;
  z-index:-1;
  background-size:cover;
  background-position:center;
  filter:saturate(.85) brightness(.75);
}

.hero-illustration{
  position:fixed;
  inset:0;
  z-index:0;
  opacity:.55;
  pointer-events:none;
  overflow:hidden;
}
.hero-illustration svg{ width:100%; height:100%; display:block; }
#video .counter-box{
  padding-left:8px;
  padding-right:8px;
}
.fact-label{
  display:block;
  font-size:13px;
  line-height:1.3;
  white-space:normal;
  word-break:break-word;
  margin-top:2px;
}

.legal-box{
  margin-top:16px;
  padding:16px 20px;
  background:rgba(0,0,0,.2);
  border-radius:10px;
  font-size:12.5px;
  line-height:1.7;
  text-align:left;
  color:rgba(255,255,255,.75);
}

@media (max-width:767px){
  #header{
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #logo{ color:#fff !important; }
  #navigation button i{ color:#fff !important; }
  .navigation-menu > li > a{ color:#fff !important; }
  .navigation-menu > li.active > a,
  .navigation-menu > li > a:hover{ color:#fff !important; text-decoration:underline; text-underline-offset:4px; }
  .nav-box{
    background: linear-gradient(160deg, #2f6fb8 0%, #1f8a90 100%) !important;
    min-height:100vh;
  }
  .navbar-nav{
    background: transparent !important;
  }
}

.scroll-progress-btn{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:500;
  width:56px;
  height:56px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(4px);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .3s ease, transform .3s ease;
}
.scroll-progress-btn:hover{
  background:rgba(0,0,0,.6);
  transform:translateY(-2px);
}
.progress-ring{
  position:absolute;
  inset:0;
  width:56px;
  height:56px;
  transform:rotate(-90deg);
}
.progress-ring-bg{
  fill:none;
  stroke:rgba(255,255,255,.25);
  stroke-width:3;
}
.progress-ring-fill{
  fill:none;
  stroke:#39ced6;
  stroke-width:3;
  stroke-linecap:round;
  transition:stroke-dashoffset .5s cubic-bezier(.16,1,.3,1);
}
.progress-arrow{
  position:relative;
  z-index:1;
  color:#fff;
  width:16px;
  height:16px;
  display:flex;
}
.progress-arrow svg{ width:100%; height:100%; }
.progress-percent{
  position:absolute;
  bottom:-22px;
  left:50%;
  transform:translateX(-50%);
  font-family:'Raleway', sans-serif;
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,.75);
  white-space:nowrap;
}
@media (max-width:768px){
  .scroll-progress-btn{
    right:16px;
    bottom:16px;
    width:46px;
    height:46px;
  }
  .progress-ring{ width:46px; height:46px; }
}

.social-icons li a.lang-link{
  font-family:'Raleway', sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}
.social-icons li a.lang-link.active{
  background:linear-gradient(90deg, #4096ee, #39ced6);
  color:#fff;
}
@media (max-width:768px){
  .social-icons li a.lang-link{
    width:34px;
    font-size:11px;
  }
}

.welcome-box{ position:relative; z-index:2; }

.gallery-list .item{
  width:100%;
}
.portfolio-item{
  position:relative;
  display:flex;
  flex-direction:column;
}
.portfolio-item .thumb-inner{
  position:static;
  height:auto;
  width:100%;
  background-color: rgba(20,21,23,.9);
  padding:20px;
  border-radius:0 0 8px 8px;
}
.portfolio-item .thumb-inner h4{
  color:#fff;
  margin-top:0;
}
.portfolio-item .thumb-inner p{
  opacity:1 !important;
  visibility:visible !important;
  position:relative !important;
  color:rgba(255,255,255,.75) !important;
  margin-top:8px;
}
.portfolio-item:hover .thumb-inner{
  background-color: rgba(20,21,23,.98);
}
.portfolio-item:hover .thumb-inner h4{
  color:#fff !important;
  margin-top:0 !important;
}

.about-contentbox{
  margin-top:0;
}
.illustration-box{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:4px;
}
.illustration-box svg{ width:100%; height:100%; display:block; }

.milestone-tile{
  width:100%;
  aspect-ratio:16/10;
  background:linear-gradient(160deg, #2c2d30 0%, #1c1d1f 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.milestone-tile::before{
  content: attr(data-year);
  font-family:'Raleway', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.08em;
  color:transparent;
  background:linear-gradient(90deg, #4096ee, #39ced6);
  -webkit-background-clip:text;
  background-clip:text;
}

.service-icon i,
.counter-icon{
  background:linear-gradient(90deg, #4096ee, #39ced6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.placeholder-note{
  font-family:'Raleway', sans-serif;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  position:fixed;
  bottom:14px;
  right:14px;
  z-index:999;
  background:rgba(0,0,0,.4);
  padding:6px 10px;
  border-radius:3px;
}

/* ============================================================
   Animation & UX enhancement pass
   ============================================================ */
:root{
  --ease-premium: cubic-bezier(.16,1,.3,1);
}

#video{
  overflow:hidden;
}

/* Breathing brand gradient — same locked colors, slow diagonal drift */
#video:after{
  background: linear-gradient(135deg, #4096ee 0%, #39ced6 100%);
  background-size:220% 220%;
  animation: fmlGradientDrift 7s ease-in-out infinite;
}
@keyframes fmlGradientDrift{
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* Cinematic slow zoom on photographic layers */
.cluster-photo,
.hero-photo,
.illustration-box{
  animation: fmlKenBurns 9s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fmlKenBurns{
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .cluster-photo, .hero-photo, .illustration-box, #video:after, .scroll-progress-btn{
    animation: none !important;
  }
}

/* Portfolio card lift on hover (base — JS tilt takes over on fine-pointer devices) */
.services-list .item{
  transition: transform .45s var(--ease-premium), box-shadow .45s var(--ease-premium);
}
.services-list .item:hover{
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
}
.services-list .item:hover .cluster-photo{
  animation-play-state: paused;
  transform: scale(1.14);
  transition: transform .6s var(--ease-premium);
}

/* Milestone card lift on hover */
.gallery-list .portfolio-item{
  transition: transform .45s var(--ease-premium), box-shadow .45s var(--ease-premium);
}
.gallery-list .item:hover .portfolio-item{
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
}

/* Nav link animated underline, desktop + mobile dropdown alike */
.navigation-menu > li > a{
  position:relative;
  transition: color .3s ease;
}
.navigation-menu > li > a::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-6px;
  width:0;
  height:2px;
  background: linear-gradient(90deg,#4096ee,#39ced6);
  transition: width .35s var(--ease-premium), left .35s var(--ease-premium);
}
.navigation-menu > li > a:hover::after,
.navigation-menu > li.active > a::after{
  width:100%;
  left:0;
}

/* Skill bars: animate fill-in with brand gradient instead of a static white bar */
.filled-bar,
.filled-bar-2{
  background: linear-gradient(90deg, #4096ee, #39ced6) !important;
  width:0 !important;
  transition: width 1.3s var(--ease-premium);
}
.skills-row.view .filled-bar{ width:64% !important; }
.skills-row.view .filled-bar-2{ width:82% !important; }

/* Counter icons: gentle scale-in instead of a flat pop */
.counter-box,
.service-icon{
  transition: transform .3s var(--ease-premium);
}
.item:hover .counter-box,
.services-list .item:hover .service-icon{
  transform: translateY(-2px) scale(1.06);
}

/* Scroll-to-top button: subtle idle glow pulse, calms on hover/focus */
.scroll-progress-btn{
  animation: fmlPulseGlow 2.8s ease-in-out infinite;
}
.scroll-progress-btn:hover,
.scroll-progress-btn:focus-visible{
  animation: none;
  box-shadow: 0 0 0 6px rgba(57,206,214,.18);
}
@keyframes fmlPulseGlow{
  0%, 100% { box-shadow: 0 0 0 0 rgba(57,206,214,.35); }
  50%      { box-shadow: 0 0 0 10px rgba(57,206,214,0); }
}

/* Language switch: smooth cross-fade when content updates */
[data-i18n]{
  transition: opacity .25s ease;
}
.fml-i18n-fade{
  opacity:0 !important;
}

/* CTA / submit button micro-interaction */
.contact-section .btn,
.cta-btn{
  transition: transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
}
.contact-section .btn:hover,
.cta-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(64,150,238,.35);
}

/* ============================================================
   Visible motion pass — flowing line, bobbing waves, light streaks
   (persistent background layer, visible behind every section)
   ============================================================ */
#fmlFinanceLine{
  animation: fmlDashFlow 1.8s linear infinite;
}
@keyframes fmlDashFlow{
  to { stroke-dashoffset: -48; }
}

#fmlWaves{
  animation: fmlWaveBob 5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes fmlWaveBob{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(14px); }
}

.fml-streak{
  position:absolute;
  top:0;
  width:3px;
  height:100%;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,.85) 55%, transparent 100%);
  box-shadow: 0 0 16px 2px rgba(255,255,255,.5);
  opacity:0;
  animation: fmlStreakSweep 6s ease-in infinite;
  pointer-events:none;
}
.fml-streak-1{ left:-5%; animation-delay:0s; }
.fml-streak-2{ left:-5%; animation-delay:2.2s; }
.fml-streak-3{ left:-5%; animation-delay:4.4s; }
@keyframes fmlStreakSweep{
  0%   { transform: translateX(0) skewX(-12deg); opacity:0; }
  8%   { opacity:.9; }
  85%  { opacity:.9; }
  100% { transform: translateX(115vw) skewX(-12deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  #fmlFinanceLine, #fmlWaves, .fml-streak{
    animation: none !important;
  }
}