:root {
  --nexudio-mark-size:clamp(120px,19vw,232px);
  color-scheme: dark;
  --base:#100c11;
  --plum:#1e161e;
  --text:#fff4ec;
  --muted:#c4b4bf;
  --peach:#f4af8a;
  --line:#f2d9e322;
  --section-space:90px;
  --body-reduction:1pt;
  --subtitle-reduction:2pt;
  --body:Satoshi,"Helvetica Neue",Arial,sans-serif;
  --title:Montserrat,"Avenir Next","Helvetica Neue",sans-serif;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--base); color:var(--text); font:calc(15px - var(--body-reduction))/1.65 var(--body) }
a { color:inherit; text-decoration:none }
a:focus-visible { outline:2px solid var(--peach); outline-offset:5px }
img { display:block; max-width:100% }
.wrap { width:min(1200px,calc(100% - 72px)); margin-inline:auto }
header { border-bottom:1px solid var(--line) }
.nav { min-height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px }
.nav > .button { justify-self:end; width:fit-content }
.logo { width:169px }
nav { display:flex; gap:36px; color:var(--muted); font-size:14px }
nav a:hover,.text-link:hover { color:var(--peach) }
.nav nav a { display:inline-block; padding:4px 8px; border-radius:6px; font-weight:500 }
.nav nav a:is(:hover,:focus-visible,[aria-current]) { background:var(--peach); color:#22151d }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 17px; border:1px solid var(--line); border-radius:9px; font-size:14px }
:is(button,.button):not(:disabled):is(:hover,:focus-visible) { background:var(--peach); border-color:var(--peach); color:#22151d }
.button.primary { color:#22151d; background:var(--peach); border-color:var(--peach) }
.button.primary:is(:hover,:focus-visible) { background:#ffc5a6 }
.hero { position:relative; overflow:hidden; isolation:isolate; text-align:center }
.eyebrow { color:var(--peach); font-size:12px; font-weight:500; letter-spacing:.065em; margin:0 0 13px }
h1,h2,h3 { font-family:var(--title); font-weight:500; letter-spacing:-.045em; line-height:1.1; margin:0 }
h1 { font-size:clamp(44px,5.8vw,81px) }
h1 span { color:#d9b8bd }
h2 { font-size:calc(clamp(31px,4.1vw,54px) - var(--subtitle-reduction)) }
h3 { font-size:calc(22px - var(--subtitle-reduction)); letter-spacing:-.03em }
.lead { max-width:47ch; font-size:calc(16px - var(--body-reduction)); color:var(--muted); margin:20px 0 25px }
.actions { display:flex; justify-content:center; flex-wrap:wrap; gap:9px }
section.content,.client-section { padding-block:var(--section-space) }
.work { border-top:1px solid var(--line); background:radial-gradient(ellipse at 50% -26%,#271a27,transparent 66%) }
.section-head { text-align:center; margin-bottom:37px }
.text-link { color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:5px }
.expertise { border-block:1px solid var(--line); background:#151016 }
.home-immersive { --showcase-columns:minmax(0,.86fr) minmax(0,1.14fr); --showcase-end:30px }
.product,.expertise-layout,.faq-grid,.contact-layout {
  display:grid;
  grid-template-columns:var(--showcase-columns);
  padding-inline-end:var(--showcase-end);
  align-items:start;
}
.product { --product-inset:clamp(24px,4vw,53px); align-items:center; overflow:hidden }
.product,.catalogue-project,.case-media figure { border:1px solid #f4af8a38; border-radius:17px; background:radial-gradient(ellipse at 100% 0%,#352333,#1b141c 74%); color:var(--text) }
.product-copy { align-self:start; padding:var(--product-inset); padding-inline-end:30px }
.product .eyebrow { color:var(--peach) }
.product .lead { color:var(--muted); margin-bottom:0 }
.product .lead + .lead { margin-top:12px }
.product h2 { font-size:calc(clamp(30px,3.45vw,46px) - var(--subtitle-reduction)) }
.nexudio-logo { width:150px; margin:0 0 12px -5px }
.product-benefits { display:grid; gap:10px; margin:18px 0 0; padding:0; list-style:none }
.product-benefits li { display:flex; align-items:flex-start; gap:9px; color:var(--muted) }
.product-benefits .tabler-icon { width:18px; height:18px; margin-top:2px; color:var(--peach) }
.contact { text-align:center; border-top:1px solid var(--line); background:radial-gradient(ellipse at 50% 122%,#33212f,transparent 68%) }
.contact .lead { margin-inline:auto }
footer { border-top:1px solid var(--line) }
.footer { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:79px; color:var(--muted); font-size:13px }
.footer .logo { width:134px }
@media(max-width:800px) {
  .wrap { width:calc(100% - 42px) }
  .nav { gap:15px }
  nav { gap:19px }
  .logo { width:140px }
  :root { --section-space:68px }
}
@media(max-width:620px) {
  .wrap { width:calc(100% - 34px) }
  .nav { grid-template-columns:1fr auto; padding:9px 0 12px; gap:7px }
  .nav nav { grid-row:2; grid-column:1/-1; gap:23px; font-size:13px }
  .footer { flex-wrap:wrap; padding:15px 0 }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }

.portfolio-intro { text-align:center; padding:clamp(65px,9vw,123px) 0 clamp(44px,7vw,88px); background:radial-gradient(ellipse at 50% 120%,#281b27,transparent 65%) }
.portfolio-intro .lead { margin:20px auto 0 }
/* Homepage sections */
.studio { border-top:1px solid var(--line); background:radial-gradient(ellipse at 48% 76%,#2c1e2a,transparent 70%) }
.studio-intro h2 span { color:#d9b8bd }
.studio-intro .lead,.product-intro .lead { max-width:640px; margin:19px auto 0; text-wrap:balance }
.method-steps {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line);
}
.method-steps li {
  display:grid; grid-template-rows:48px auto 1fr auto;
  position:relative; min-width:0; padding:0 clamp(12px,2vw,28px) 22px;
}
.method-steps li::before {
  content:""; position:absolute; inset:19px 0 auto;
  border-top:1px solid #f4af8a65;
}
.method-steps li:first-child::before { left:clamp(12px,2vw,28px) }
.method-steps li:last-child::before { background:linear-gradient(90deg,#f4af8a65,transparent); height:1px; border:0 }
.method-icon {
  position:relative; display:grid; place-items:center; width:39px; height:39px;
  border:1px solid #f4af8a65; border-radius:50%; color:var(--peach); background:#261b24;
}
.method-icon svg { width:21px; height:21px }
.method-steps h3 { margin-top:8px; font-size:calc(clamp(19px,2vw,25px) - var(--subtitle-reduction)) }
.method-steps p { color:var(--muted); margin:10px 0 0 }
.method-steps .method-result { display:flex; align-items:center; gap:7px; color:var(--peach); font-size:14px; margin-top:22px }
@media(max-width:900px) {
  .method-steps { grid-template-columns:minmax(0,1fr); border-bottom:0 }
  .method-steps li { grid-template:repeat(3,auto) / 39px minmax(0,1fr); gap:0 16px; padding:0 0 24px }
  .method-steps li::before,.method-steps li:first-child::before { inset:19px auto 0 19px; border:0; border-left:1px solid #f4af8a65 }
  .method-steps li:last-child::before { display:none }
  .method-icon { grid-row:1/4 }
  .method-steps p { grid-column:2 }
  .method-steps .method-result { margin-top:10px }
}
.faq { border-top:1px solid var(--line) }
.expertise-layout,.faq-grid { padding-inline:1px calc(var(--showcase-end) + 1px) }
.faq-items details { border-bottom:1px solid var(--line) }
.faq-items details:first-child { border-top:1px solid var(--line) }
.faq-items summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-height:56px; padding:12px 0; cursor:pointer; list-style:none }
.faq-items summary .tabler-icon { width:22px; height:22px; color:var(--peach) }
.faq-items summary::-webkit-details-marker { display:none }
.faq-items summary::after { content:"+"; color:var(--peach); font-size:19px }
.faq-items details[open] summary::after { content:"−" }
.faq-items summary:focus-visible { outline:2px solid var(--peach); outline-offset:4px }
.faq-items p { margin:0 24px 17px 0; color:var(--muted); max-width:58ch }
.contact:has(.contact-panel) { background:none }
.contact-panel { padding:29px 0; border:1px solid var(--line); border-radius:19px; background:radial-gradient(ellipse at 50% 130%,#442d3c,#171118 72%); box-shadow:0 10px 26px -12px #f4af8a48,0 5px 15px -8px #f4af8a55 }
#realisations .portfolio-panel { padding-block:29px; box-shadow:0 10px 30px -14px #f4af8a42,0 0 34px -8px #f4af8a17 }
.footer-home { padding:29px 0 }
.footer-controls { display:flex; align-items:center; justify-content:flex-end; gap:10px }
.footer-language {
  flex:none; min-height:40px; padding:0 8px;
  border:1px solid var(--line); border-radius:7px;
  background:var(--base); color:var(--muted); font:inherit; cursor:pointer;
}
.footer-language:focus-visible { outline:2px solid var(--peach); outline-offset:3px }
.footer-home nav { flex-wrap:wrap; align-items:center; gap:8px 0; font-size:13px }
.footer-home nav a + a { border-inline-start:1px solid var(--muted); margin-inline-start:10px; padding-inline-start:10px; line-height:1 }
@media(max-width:720px) {
  .product,.expertise-layout,.faq-grid,.contact-layout { grid-template-columns:minmax(0,1fr) }
  .product,.contact-layout { padding-inline:clamp(20px,4vw,30px) }
  .product .product-copy,.contact-layout .contact-intro,.expertise-layout,.faq-grid { padding-inline:0 }
  .expertise-layout,.faq-grid,.contact-layout { gap:25px }
  .footer-home { align-items:start; flex-direction:column }
  .footer-controls { width:100% }
}

.client-section { border-top:1px solid var(--line); text-align:center }
.client-section h2 { color:var(--muted); font:400 calc(16px - var(--body-reduction))/1.65 var(--body); letter-spacing:.15em; text-transform:uppercase; margin-bottom:18px }
.client-window { width:100%; overflow-x:auto }
.client-track { width:max-content; min-width:100% }
.client-logos { display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; padding:0; margin:0; list-style:none }
.client-logos li { display:grid; place-items:center; min-height:62px; flex:0 0 clamp(120px,11vw,150px); padding:8px 12px }
.client-logos a { display:grid; place-items:center; min-height:42px }
.client-logos img { display:block; width:var(--client-logo-width, 100px); height:auto; max-height:42px; object-fit:contain }
.client-logos .client-symbol { --client-logo-width:40px }
.client-logos img[src$="/bp.svg"] { --client-logo-width:48px; max-height:52px }
.client-logos a[href$="/johnson-johnson.html"] { --client-logo-width:142px }
.client-logos a[href$="/canvas-collectie-collection-rtbf.html"] { --client-logo-width:88px }
.client-logos a[href$="/pcm-group.html"] { --client-logo-width:76px }
.client-logos a[href$="/roche.html"] .client-symbol { --client-logo-width:66px }
.client-logos a[href$="/walibi.html"] { --client-logo-width:90px }
.client-logos[aria-hidden] { display:none }
.is-animated .client-window { overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 clamp(14px,4vw,48px),#000 calc(100% - clamp(14px,4vw,48px)),transparent) }
.is-animated .client-track { display:flex; width:max-content; animation:client-slide 120s linear infinite }
.is-animated .client-logos { display:flex; flex:0 0 auto; width:max-content }
.is-animated .client-logos li { flex-basis:auto; width:clamp(120px,11vw,150px) }
@keyframes client-slide { from { transform:translateX(-50%) } to { transform:translateX(0) } }

.product h3 { font-size:calc(clamp(26px,2.9vw,38px) - var(--subtitle-reduction)) }
.product .product-cta { margin-top:22px; border-color:#f4af8a70; background:var(--peach); color:#22151d }
.product .product-cta:is(:hover,:focus-visible) { background:#ffc5a6 }

.contact-intro { padding-inline:clamp(24px,4vw,53px) 24px; text-align:left }
.contact-intro h2 { font-size:calc(clamp(28px,3.2vw,42px) - var(--subtitle-reduction) - 3pt) }
.contact-intro .eyebrow { margin-bottom:6.5px }
.contact-form { width:100%; margin:0; text-align:left }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:15px }
.contact-form label { display:block; margin:0; color:var(--muted); font-size:14px }
.contact-form > label { margin-bottom:15px }
.contact-form input,.contact-form textarea { display:block; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#100c11; color:var(--text); font:inherit }
.contact-form ::placeholder { color:var(--muted); opacity:1 }
.contact-form textarea { resize:vertical }
.contact-form input:focus,.contact-form textarea:focus { outline:1px solid var(--peach) }
.contact-form button { margin-top:10px; cursor:pointer }
.contact-status { color:var(--muted) }
@media(max-width:560px) { .contact-fields { grid-template-columns:1fr } }

.home-immersive > header { position:absolute; z-index:3; inset:17px 0 auto; border:0 }
:is(.home-immersive,.portfolio-page) .nav {
  min-height:58px; padding:6px 8px 6px 15px;
  border:1px solid #f2d9e32a; border-radius:9px; background:rgb(30 23 31 / 25%);
}
:is(.home-immersive,.portfolio-page) .nav .logo { width:152px }
:is(.home-immersive,.portfolio-page) .nav nav { gap:5px }
:is(.home-immersive,.portfolio-page) .nav > .button { min-height:34px; padding:5px 12px; font-size:13px; white-space:nowrap }
.immersive-hero {
  display:grid; align-items:end; min-height:100svh; isolation:isolate;
  background:radial-gradient(ellipse at 50% 32%,#211420,#100b12 67%);
}
.immersive-hero::after {
  content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,#100b1233,transparent 31%,#100b1240 54%,#100b12 100%);
}
.hero-field { position:absolute; inset:0; width:100%; height:100%; display:block }
.hero-geometry { position:absolute; pointer-events:none }
.immersive-hero .immersive-copy {
  position:relative; z-index:1;
  padding:clamp(300px,50svh,620px) 0 clamp(46px,8svh,94px);
}
.immersive-hero h1 { font-size:clamp(38px,5.8vw,84px); line-height:.99; letter-spacing:-.068em }
.immersive-hero .lead { max-width:52ch; margin:3px auto 25px; color:#e0cfd9; letter-spacing:.15em }
.hero-secondary { background:#fff4ec; color:#231822; border-color:#fff4ec }
@media(max-width:620px) {
  :is(.home-immersive,.portfolio-page) .nav { padding:7px 9px; gap:5px }
  :is(.home-immersive,.portfolio-page) .nav .logo { width:136px }
  :is(.home-immersive,.portfolio-page) .nav nav { padding:4px 5px; gap:4px 2px; flex-wrap:wrap }
  :is(.home-immersive,.portfolio-page) .nav > .button { min-height:32px; padding-inline:9px; font-size:12px }
  .immersive-hero .immersive-copy { padding-top:clamp(270px,47svh,480px); padding-bottom:45px }
  .immersive-hero h1 { max-width:11ch; margin-inline:auto }
}

@media(prefers-reduced-motion:no-preference) {
  .immersive-copy h1 { animation:cover-reveal .75s .8s both }
  .immersive-copy .lead { animation:cover-reveal .7s 1.05s both }
  .immersive-copy .actions { animation:cover-reveal .65s 1.22s both }
  .immersive-copy:focus-within .actions { animation:none }
  @keyframes cover-reveal {
    from { opacity:0; transform:translateY(16px) }
    to { opacity:1; transform:translateY(0) }
  }
}

.cover-orbits { opacity:.86; color:var(--peach); transform-origin:600px 258px }
.mx-fallback { color:var(--peach); pointer-events:none }
.mx-cover { position:absolute; width:min(77vw,49svh,440px); top:34%; left:50%; transform:translate(-50%,calc(-50% + var(--cover-mark-follow,0px))); opacity:var(--cover-mark-opacity,1); overflow:visible }
.mx-section { width:82px; height:82px; display:block; margin:0 auto 14px; opacity:.7 }

.cover-mark-entry,.cover-mark-pointer,.cover-mark-pulse,.nexudio-mark-pulse { transform-box:view-box; transform-origin:center }
@keyframes mx-heartbeat {
  0%, 46%, 100% { transform:scale(1) }
  10% { transform:scale(1.065) }
  20% { transform:scale(1.006) }
  29% { transform:scale(1.038) }
}

#nexudio { position:relative; isolation:isolate; overflow:hidden }
#nexudio > .wrap { position:relative }
.nexudio-field {
  position:absolute; inset:0; pointer-events:none;
  color:var(--peach); opacity:.76; mask-image:linear-gradient(transparent,#000 16%,#000 81%,transparent);
}
.nexudio-field svg { width:100%; height:100%; display:block }
.has-scroll-mx .cover-orbits,.has-scroll-mx .nexudio-orbit-shift {
  transform:scale(calc(var(--orbit-scale,1) + var(--orbit-pointer-zoom,0)))
    rotate(calc(var(--orbit-turn,0deg) + var(--orbit-pointer-turn,0deg)));
  transition:transform .72s cubic-bezier(.2,.65,.3,1);
}
.nexudio-orbit-shift { transform-origin:600px 295px }
.immersive-hero[data-scroll="down"],#nexudio[data-scroll="down"] { --orbit-scale:1.10; --orbit-detail:.46 }
.immersive-hero[data-scroll="up"],#nexudio[data-scroll="up"] { --orbit-scale:.91; --orbit-detail:.58 }
#nexudio .product { box-shadow:0 0 34px -8px #f4af8a17 }
#nexudio .product-intro { --section-mark-gap:13px }
#repere-nexudio { margin-bottom:var(--section-mark-gap) }
#nexudio .mx-section,.contact-panel .contact-mark { width:var(--nexudio-mark-size); height:var(--nexudio-mark-size); opacity:1; overflow:visible; filter:drop-shadow(0 0 5px #f4af8a4d) }
#nexudio.content { padding-block-start:calc(93px - var(--nexudio-mark-size) * .177) }
#nexudio .mx-section { margin-bottom:calc(var(--section-mark-gap) - var(--nexudio-mark-size) * .199) }
.contact-panel .contact-mark {
  --contact-mark-size:clamp(108px,17vw,208px);
  width:var(--contact-mark-size); max-width:100%; height:auto;
  margin:calc(var(--contact-mark-size) * -.0885) auto 0 0;
  transform:translateX(-7.653%);
}

.orbit-rotation,.orbit-wave { transform-origin:600px 600px }
.orbit-wave { opacity:.74; transform:scale(var(--wave-rest)) }
.orbit-wave-1 { --wave-delay:0.00s;--wave-rest:0.23;--entry-order:0 }
.orbit-wave-2 { --wave-delay:-3.90s;--wave-rest:0.34;--entry-order:2 }
.orbit-wave-3 { --wave-delay:-7.80s;--wave-rest:0.48;--entry-order:4 }
.orbit-wave-4 { --wave-delay:-11.70s;--wave-rest:0.66;--entry-order:6 }
.orbit-wave-5 { --wave-delay:-15.60s;--wave-rest:0.87;--entry-order:8 }
.orbit-wave-6 { --wave-delay:-1.91s;--wave-rest:0.28;--entry-order:1 }
.orbit-wave-7 { --wave-delay:-5.95s;--wave-rest:0.41;--entry-order:3 }
.orbit-wave-8 { --wave-delay:-9.94s;--wave-rest:0.56;--entry-order:5 }
.orbit-wave-9 { --wave-delay:-13.62s;--wave-rest:0.75;--entry-order:7 }
.orbit-wave-10 { --wave-delay:-17.85s;--wave-rest:0.96;--entry-order:9 }
.orbit-wave-11 { --wave-delay:0.00s;--wave-rest:0.23 }
.orbit-wave-12 { --wave-delay:-2.70s;--wave-rest:0.34 }
.orbit-wave-13 { --wave-delay:-5.40s;--wave-rest:0.48 }
.orbit-wave-14 { --wave-delay:-8.10s;--wave-rest:0.66 }
.orbit-wave-15 { --wave-delay:-10.80s;--wave-rest:0.87 }
.orbit-wave-16 { --wave-delay:-1.32s;--wave-rest:0.28 }
.orbit-wave-17 { --wave-delay:-4.12s;--wave-rest:0.41 }
.orbit-wave-18 { --wave-delay:-6.88s;--wave-rest:0.56 }
.orbit-wave-19 { --wave-delay:-9.43s;--wave-rest:0.75 }
.orbit-wave-20 { --wave-delay:-12.36s;--wave-rest:0.96 }
.orbit-line,.orbit-accent,.orbit-ticks { vector-effect:non-scaling-stroke }
.orbit-line { stroke-width:1; opacity:.36 }
.orbit-accent { stroke-width:2; opacity:.88 }
.orbit-ticks { stroke-width:1.25; opacity:.65 }
.orbit-node { fill:currentColor; stroke:none; filter:drop-shadow(0 0 4px currentColor) }
@keyframes orbit-rotation {
  to { transform:rotate(360deg) }
}
@keyframes orbit-expansion {
  0% { opacity:0; transform:scale(.12) }
  14% { opacity:.65; transform:scale(.26) }
  38% { opacity:1; transform:scale(.46) }
  70% { opacity:.90; transform:scale(.80) }
  100% { opacity:0; transform:scale(1.23) }
}
.has-scroll-mx .orbit-rotation { animation:orbit-rotation 24s linear infinite }
.has-scroll-mx .orbit-wave { animation:orbit-expansion 13.5s linear var(--wave-delay) infinite }

.orbit-detail-line,.orbit-detail-glint {
  vector-effect:non-scaling-stroke;
  opacity:clamp(.22,calc(var(--orbit-detail, .25) + var(--orbit-pointer-density, 0)), .88);
  transition:opacity .42s ease-out;
}
.orbit-detail-line { stroke-width:.85 }
.orbit-detail-glint { stroke-width:1.6 }

.has-scroll-mx .cover-orbits .orbit-wave > * {
  animation:cover-ring-entry .52s ease-out calc(var(--entry-order) * .075s) backwards;
}
.has-scroll-mx .cover-orbits .orbit-rotation {
  animation:none;
  transform:rotate(var(--cover-orbit-angle,0deg)) scale(var(--cover-orbit-zoom,1));
}
.has-scroll-mx .cover-orbits .orbit-wave { animation-duration:19.5s }
.has-scroll-mx .cover-mark-entry { animation:cover-logo-entry 2.6s cubic-bezier(.22,.61,.36,1) 1.22s backwards }
.has-scroll-mx .cover-mark-pointer { transform:scale(var(--cover-pointer-scale,1)); transition:transform .72s ease-out }
.has-scroll-mx .cover-mark-pulse { animation:mx-heartbeat 4.6s ease-in-out 3.82s infinite }
.has-scroll-mx .nexudio-mark-pulse { animation:mx-heartbeat 4.6s ease-in-out infinite }
@keyframes cover-ring-entry { from { opacity:0 } }
@keyframes cover-logo-entry {
  from { opacity:0; transform:scale(.56) }
  to { opacity:1; transform:scale(1) }
}


.tabler-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none }
.tabler-icon { display:inline-block; width:1em; height:1em; flex:none; vertical-align:middle }
.eyebrow-icon { display:inline-flex; align-items:center; gap:7px }
.eyebrow-icon .tabler-icon { width:16px; height:16px }
.expertise-head h2 span { display:block; color:#dcbcc5 }
.expertise-head .lead { max-width:36ch; margin:20px 0 0 }
.expertise-head .lead + .lead { margin-top:14px }
.expertise-list { list-style:none; padding:0; margin:0; border-block:1px solid var(--line) }
.expertise-list li {
  display:grid; grid-template-columns:42px minmax(0,1fr);
  gap:clamp(12px,2.5vw,28px); align-items:start; padding:20px 0;
}
.expertise-list li + li { border-top:1px solid var(--line) }
.expertise-icon {
  display:grid; place-items:center; width:42px; height:42px; border:1px solid #f4af8a40;
  border-radius:50%; color:var(--peach); background:#f4af8a0d;
}
.expertise-icon .tabler-icon { width:21px; height:21px }
.expertise-list h3 { font-size:calc(clamp(20px,2.1vw,27px) - var(--subtitle-reduction)) }
.expertise-list p { margin:5px 0 0; color:var(--muted); max-width:54ch }
@media(max-width:720px) {
  .expertise-list li { padding-block:17px }
}

@media(min-width:721px) {
  #realisations .product.portfolio-panel { aspect-ratio:16 / 9; grid-template-rows:minmax(0,1fr) }
  .portfolio-panel .project-wall {
    align-self:stretch;
    min-height:0;
  }
}

.portfolio-panel .project-wall {
  --wall-gap:clamp(8px,1.5vw,16px);
  width:100%;
  margin-block:clamp(24px,4vw,44px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--wall-gap);
  mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.wall-column { min-width:0; min-height:0; overflow:hidden }
.wall-track { animation:wall-scroll 60.869s linear infinite reverse paused }
.wall-column:nth-child(2) .wall-track { animation-direction:normal; animation-duration:66.667s; animation-delay:-10s }
body:not(.wall-document-hidden) .wall-in-view .wall-track { animation-play-state:running }
.wall-group { display:grid; gap:var(--wall-gap); padding-bottom:var(--wall-gap) }
@keyframes wall-scroll {
  to { transform:translateY(-50%) }
}
.wall-tile { position:relative; display:block; overflow:hidden }
.wall-tile img { display:block; width:100%; height:auto }
#realisations .wall-tile { box-shadow:var(--showcase-shadow) }
.wall-tile span {
  position:absolute; inset:auto 0 0; padding:26px 10px 8px;
  color:#fff; background:linear-gradient(transparent,#100c11e8);
  font-size:clamp(12px,1.3vw,15px); line-height:1.2;
  opacity:0;
}
.wall-tile:focus-visible span { opacity:1 }
@media(hover:hover) {
  .wall-tile:hover span { opacity:1 }
}
.wall-tile:focus-visible { outline-offset:-3px; z-index:1 }
@media(max-width:720px) {
  .portfolio-panel .project-wall { height:clamp(240px,65vw,400px); margin-block-start:0 }
  .wall-tile span { padding:16px 5px 5px; font-size:11px; overflow-wrap:anywhere }
}

.nexudio-slideshow { position:relative; align-self:center; min-width:0; margin-block:var(--product-inset) }
.portfolio-panel { --showcase-shadow:0 8px 17px #0006,0 2px 5px #0004 }
.nexudio-slides { position:relative; isolation:isolate; aspect-ratio:1440 / 1144; overflow:hidden; border-radius:9px; background:var(--base); box-shadow:var(--showcase-shadow) }
.nexudio-slides .wall-tile { position:absolute; inset:0; z-index:1 }
.nexudio-slides .slide-outgoing { z-index:0; pointer-events:none }
.nexudio-slideshow [hidden] { display:none }
.nexudio-slide-controls { --arrow-size:44px; position:absolute; inset:auto 0 calc(var(--arrow-size) / -2); z-index:2; display:flex; justify-content:center; gap:8px; pointer-events:none }
.nexudio-slide-controls button { width:var(--arrow-size); height:var(--arrow-size); min-height:0; padding:0; border-radius:50%; background:#100c11d9; color:var(--text); box-shadow:0 3px 8px #0009; cursor:pointer; pointer-events:auto }
@media(max-width:720px) {
  .nexudio-slideshow { margin-block-start:0 }
  .nexudio-slide-controls { --arrow-size:40px }
}

.legal-page { display:grid; gap:16px; max-width:900px; padding-block:clamp(30px,6vw,72px) }
.legal-panel { padding:clamp(20px,4vw,38px); border:1px solid #f4af8a38; border-radius:17px; background:radial-gradient(ellipse at 100% 0%,#352333,#1b141c 74%) }
.legal-page h1 { font-size:clamp(36px,5vw,58px); margin-bottom:16px }
.legal-page h2 { font-size:clamp(22px,2.6vw,28px); display:flex; align-items:center; gap:12px; scroll-margin-top:20px }
.legal-page p { color:var(--muted); margin:12px 0 0 }
.legal-page p a { text-decoration:underline; text-underline-offset:3px }
.legal-toc { margin-top:24px; padding-top:16px; border-top:1px solid var(--line) }
.legal-toc ol { margin:0; padding-inline-start:24px }
.legal-toc li + li { margin-top:4px }