/* © 2026 Alexandre Authier. Tous droits réservés. */
.hero-roles { position:relative; }
.hero-roles h1 { margin:0; font-size:clamp(48px,5vw,80px); line-height:1.08; }
.hero-roles .hero-roles-prefix { display:block; }
.hero-roles .hero-roles-track { display:grid; isolation:isolate; margin-top:.08em; padding-bottom:.09em; }
.hero-roles .hero-role { grid-area:1/1; display:block; visibility:hidden; opacity:0; transform:translateY(.4em); filter:blur(7px); font-size:1em; line-height:1.12; letter-spacing:-.045em; overflow-wrap:break-word; min-width:0; transition:opacity .3s,transform .55s cubic-bezier(.2,.75,.2,1),filter .55s,visibility .55s; }
.hero-roles .hero-role.is-current { visibility:visible; opacity:1; transform:none; filter:none; animation:role-light .85s ease both; }
.hero-role::after { content:''; display:block; width:38px; height:3px; background:#b9e2ff; margin-top:.25em; transform:scaleX(0); transform-origin:left; transition:transform .6s .15s; }
.hero-role.is-current::after { transform:scaleX(1); }
.hero-roles-toggle { position:absolute; right:0; bottom:0; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:#fff; font-size:15px; cursor:pointer; opacity:.7; }
.hero-roles-toggle[hidden] { display:none; }
.hero-roles-toggle:hover { background:#ffffff18; opacity:1; }
.hero-roles-toggle:focus-visible { outline:2px solid #fff; outline-offset:2px; }
@keyframes role-light { 0%,100% { color:#fff; text-shadow:none; } 45% { color:#dcf2ff; text-shadow:0 0 22px #9dd7ff50; } }
@media(max-width:991px) { .hero-roles h1 { font-size:clamp(29px,5.4vw,44px); } }
@media(max-width:575px) { .hero-roles h1 { font-size:clamp(27px,7.5vw,36px); } .hero-roles .hero-roles-prefix { font-size:.8em; margin-bottom:.18em; } .hero-role::after { height:2px; width:28px; } }
/* Keep the expertise label beside the numeral on the stacked services layout. */
@media(max-width:991px) {
  .services > .col-lg-2 > .vlt-animated-block { display:flex; align-items:center; gap:24px; margin-bottom:28px; }
  .services > .col-lg-2 .vlt-gap-40 { display:none; }
  .services > .col-lg-2 .vlt-counter-up { flex:0 0 auto; }
  .services > .col-lg-2 h6 { margin:0; line-height:1.4; }
}
@media(prefers-reduced-motion:reduce) { .hero-roles .hero-role,.hero-role::after { transition:none; animation:none; filter:none; transform:none; } .hero-roles-toggle { display:none; } }