/* V65 — a short scroll-led passage from portrait to the first case study. */
.hero-intro-stage{
  --h65-progress:0;
  --h65-rise:84%;
  --h65-portrait-y:0px;
  --h65-copy-y:0px;
  --h65-copy-exit:1;
  --h65-portrait-exit:1;
  position:relative;
  height:156svh;
  min-height:920px;
  isolation:isolate;
  background:#fbfaf7;
}

.hero-intro-stage::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:#142f41;
  pointer-events:none;
}

.home-page .hero--editorial{
  position:sticky;
  z-index:1;
  top:var(--header);
  width:100%;
  max-width:none;
  min-height:calc(100svh - var(--header));
  height:calc(100svh - var(--header));
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);
  grid-template-rows:1fr auto;
  align-items:center;
  column-gap:clamp(36px,5vw,86px);
  overflow:hidden;
  padding:clamp(54px,7vh,92px) max(56px,calc((100vw - 1280px)/2)) 28px;
  background:#fbfaf7;
}

.home-page .hero--editorial::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  top:var(--h65-rise);
  bottom:-2px;
  background:
    linear-gradient(to bottom,rgba(20,47,65,0) 0,rgba(20,47,65,.86) 30px,#142f41 72px);
  pointer-events:none;
}

.home-page .hero--editorial .hero-copy{
  grid-column:1;
  grid-row:1;
  min-width:0;
  align-self:start;
  margin-top:clamp(54px,11vh,118px);
  transform:translate3d(0,var(--h65-copy-y),0);
  opacity:var(--h65-copy-exit);
  will-change:transform,opacity;
}

.home-page .hero--editorial .eyebrow{
  max-width:none;
  margin:0 0 24px;
  color:#3158f4;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.home-page .hero--editorial h1{
  max-width:760px;
  margin:0;
  color:#12223a;
  font-size:clamp(58px,5.4vw,82px);
  line-height:.99;
  letter-spacing:-.057em;
}

.home-page .hero--editorial .hero-title-line{
  display:block;
  transform-origin:left center;
}

.home-page .hero--editorial h1 em{
  max-width:690px;
  margin-top:.08em;
  color:#3158f4;
  font-weight:400;
}

.home-page .hero--editorial .hero-intro,
.home-page .hero--editorial .hero-actions,
.home-page .hero--editorial .hero-portrait figcaption,
.home-page .hero--editorial .hero-clients>p{
  display:none;
}

.home-page .hero--editorial .hero-portrait{
  grid-column:2;
  grid-row:1/3;
  position:relative;
  z-index:2;
  align-self:end;
  justify-self:end;
  width:min(100%,540px);
  height:min(78svh,760px);
  margin:0 -3vw -4vh 0;
  overflow:visible;
  background:none;
  border:0;
  border-radius:0;
  transform:translate3d(0,var(--h65-portrait-y),0) scale(calc(.96 + var(--h65-progress)*.05));
  transform-origin:70% 78%;
  opacity:var(--h65-portrait-exit);
  will-change:transform,opacity;
}

.home-page .hero--editorial .hero-portrait::before{display:none}

.home-page .hero--editorial .portrait-window{
  position:absolute;
  inset:0;
  display:block;
  overflow:visible;
  background:none;
  border:0;
  border-radius:0;
}

.home-page .hero--editorial .portrait-window::before{display:none}

.home-page .hero--editorial .portrait-window img{
  position:absolute;
  right:0;
  bottom:0;
  width:auto;
  max-width:none;
  height:100%;
  object-fit:contain;
  object-position:right bottom;
  filter:grayscale(1);
  transform:none!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 82%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 0 82%,transparent 99%);
  animation:none!important;
}

.home-page .hero--editorial .hero-clients{
  position:absolute;
  z-index:3;
  left:max(56px,calc((100vw - 1280px)/2));
  bottom:76px;
  width:min(720px,52vw);
  max-width:720px;
  margin:0;
  padding:0 0 2px;
  border:0;
  color:#f5f7f8;
  opacity:var(--h65-portrait-exit);
  transform:translate3d(0,calc((1 - var(--h65-progress))*18px),0);
  will-change:transform,opacity;
}

.home-page .hero--editorial .hero-clients ul{
  display:flex;
  align-items:center;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}

.home-page .hero--editorial .hero-clients li{
  display:flex;
  align-items:center;
  min-width:0;
  color:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.01em;
  white-space:nowrap;
}

.home-page .hero--editorial .hero-clients li+li::before{
  content:"·";
  margin:0 12px;
  color:#91a5b3;
}

.home-page .hero--editorial .hero-clients li span{display:none}

.hero-next{
  position:absolute;
  z-index:4;
  left:max(56px,calc((100vw - 1280px)/2));
  bottom:4px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:32px;
  padding:8px 0;
  color:#f5f7f8;
  font-size:11px;
  line-height:1;
  text-decoration:none;
  opacity:calc(.72*var(--h65-portrait-exit));
}

.hero-intro-stage.hero65-complete .hero-copy,
.hero-intro-stage.hero65-complete .hero-portrait,
.hero-intro-stage.hero65-complete .hero-clients,
.hero-intro-stage.hero65-complete .hero-next{
  visibility:hidden;
}

/* Avoid stale compositor pixels once the title has fully completed its exit. */
.hero-intro-stage.hero65-copy-hidden .hero-copy{
  visibility:hidden;
}

.hero-next span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-next .icon{width:14px;height:14px;transition:transform .22s ease}
.hero-next:hover .icon,.hero-next:focus-visible .icon{transform:translateY(4px)}
.hero-next:focus-visible{outline:3px solid #fff;outline-offset:5px;border-radius:2px}

.home-page #interface-en-contexte{scroll-margin-top:0}

@media(max-width:1100px){
  .home-page .hero--editorial{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);column-gap:30px;padding-inline:32px}
  .home-page .hero--editorial h1{font-size:clamp(48px,5.55vw,62px)}
  .home-page .hero--editorial .hero-portrait{height:min(73svh,650px);margin-right:-5vw}
  .home-page .hero--editorial .hero-clients{left:32px}
  .hero-next{left:32px}
}

@media(max-width:800px){
  .hero-intro-stage{
    height:148svh;
    min-height:900px;
  }

  .home-page .hero--editorial{
    top:var(--header);
    width:100%;
    min-height:calc(100svh - var(--header));
    height:calc(100svh - var(--header));
    display:block;
    padding:clamp(40px,6.6vh,58px) 20px 22px;
  }

  .home-page .hero--editorial::before{
    background:linear-gradient(to bottom,rgba(20,47,65,0) 0,rgba(20,47,65,.9) 26px,#142f41 64px);
  }

  .home-page .hero--editorial .hero-copy{
    position:relative;
    z-index:3;
    width:100%;
    margin-top:0;
  }

  .home-page .hero--editorial .eyebrow{
    margin-bottom:17px;
    font-size:10px;
    letter-spacing:.15em;
  }

  .home-page .hero--editorial h1{
    max-width:none;
    font-size:clamp(37px,9.7vw,45px);
    line-height:1.015;
    letter-spacing:-.055em;
  }

  .home-page .hero--editorial h1 em{
    max-width:none;
    margin-top:.09em;
  }

  .home-page .hero--editorial .hero-portrait{
    position:absolute;
    z-index:2;
    right:-8px;
    bottom:-1px;
    width:min(82vw,356px);
    height:min(68svh,620px);
    margin:0;
    transform:translate3d(0,var(--h65-portrait-y),0) scale(calc(.94 + var(--h65-progress)*.055));
    transform-origin:72% 84%;
  }

  .home-page .hero--editorial .hero-clients{
    position:absolute;
    z-index:4;
    left:20px;
    right:20px;
    bottom:66px;
    max-width:none;
  }

  .home-page .hero--editorial .hero-clients ul{
    display:flex;
    gap:0;
  }

  .home-page .hero--editorial .hero-clients li{
    font-size:11px;
  }

  .home-page .hero--editorial .hero-clients li+li::before{
    margin:0 7px;
  }

  .hero-next{left:20px;bottom:4px}
}

@media(max-width:374px){
  .home-page .hero--editorial{padding-inline:16px}
  .home-page .hero--editorial h1{font-size:clamp(35px,10.5vw,39px)}
  .home-page .hero--editorial .hero-portrait{right:-18px;width:min(84vw,306px);height:min(60svh,520px)}
  .home-page .hero--editorial .hero-clients{left:16px;right:12px}
  .home-page .hero--editorial .hero-clients li{font-size:10px}
  .home-page .hero--editorial .hero-clients li+li::before{margin:0 5px}
  .hero-next{left:16px}
}

.motion-reduced .hero-intro-stage,
html[data-motion="reduced"] .hero-intro-stage{
  height:auto;
  min-height:0;
}

.motion-reduced .home-page .hero--editorial,
html[data-motion="reduced"] .home-page .hero--editorial{
  --h65-progress:1;
  --h65-rise:54%;
  --h65-portrait-y:0px;
  --h65-copy-y:0px;
  --h65-copy-exit:1;
  --h65-portrait-exit:1;
  position:relative;
  top:auto;
}

@media(prefers-reduced-motion:reduce){
  .hero-intro-stage{height:auto;min-height:0}
  .home-page .hero--editorial{
    --h65-progress:1;
    --h65-rise:54%;
    --h65-portrait-y:0px;
    --h65-copy-y:0px;
    --h65-copy-exit:1;
    --h65-portrait-exit:1;
    position:relative;
    top:auto;
  }
  .hero-intro-stage *{animation:none!important;transition:none!important}
}

@media print{
  .hero-intro-stage{height:auto;min-height:0}
  .home-page .hero--editorial{position:relative;top:auto;min-height:720px;--h65-progress:1;--h65-rise:58%;--h65-copy-exit:1;--h65-portrait-exit:1}
  .hero-next{display:none}
}