/* S&T Agency 2026 — shared styles, derived from the "version stylée" landing page.
   Ink background, orange panels, Barlow Condensed in capitals. Single dark look by choice. */
@font-face{font-family:"Barlow Condensed";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-style:normal;font-display:swap;src:url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2")}
:root{
  --ink:#111312;--ink-2:#1b1d1c;--paper:#f3f2ed;--orange:#dd5235;--orange-soft:#eda48f;--orange-deep:#a8361f;--panel:#dd5235;
  --f:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --gl:max(24px,env(safe-area-inset-left,0px));--gr:max(24px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--f);font-size:19px;line-height:1.45;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;background:var(--orange);color:var(--ink);padding:10px 16px;font-weight:800;text-transform:uppercase;text-decoration:none}
.skip:focus{left:12px}
.px{padding-left:var(--gl);padding-right:var(--gr)}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--gr) 14px var(--gl);transition:background .3s,backdrop-filter .3s}
.top.solid,.top.always{background:rgba(17,19,18,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top .home{display:block;width:44px;flex:none}
.top .home svg{width:100%;height:auto}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav a{font:600 clamp(16px,1.4vw,20px)/1 var(--f);text-transform:uppercase;letter-spacing:.02em;color:var(--orange-soft);text-decoration:none;padding:8px 0;transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--paper)}
.langs{display:flex;gap:4px;margin-left:6px}
.langs a{font:700 14px/1 var(--f);letter-spacing:.06em;color:var(--orange-soft);text-decoration:none;border:1px solid rgba(237,164,143,.45);border-radius:999px;padding:7px 9px;min-width:36px;text-align:center}
.langs a[aria-current="true"]{background:var(--orange-soft);color:var(--ink);border-color:var(--orange-soft)}
.langs a:hover{color:var(--paper);border-color:var(--paper)}
.burger{display:none;background:none;border:1px solid var(--orange-soft);color:var(--orange-soft);border-radius:999px;font:700 15px/1 var(--f);text-transform:uppercase;letter-spacing:.06em;padding:11px 16px;cursor:pointer}
@media (max-width:900px){
  .burger{display:block}
  .nav{position:fixed;inset:0;z-index:-1;background:var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:90px var(--gr) 40px var(--gl);opacity:0;pointer-events:none;transition:opacity .3s}
  .nav.open{opacity:1;pointer-events:auto}
  .nav a{font-size:clamp(44px,12vw,72px);font-weight:800;line-height:1;color:var(--paper)}
  .nav a:hover{color:var(--orange)}
  .langs{margin:18px 0 0}
  .langs a{font-size:16px;padding:10px 14px}
}

/* ---------- page head (inner pages) ---------- */
.head{padding-top:calc(130px + env(safe-area-inset-top,0px));padding-bottom:clamp(40px,6vw,80px);position:relative;overflow:hidden}
.crumbs{font:500 15px/1.3 var(--f);text-transform:uppercase;letter-spacing:.06em;color:var(--orange-soft);margin:0 0 18px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.6}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--paper)}
.head h1{font:800 clamp(64px,13vw,220px)/.8 var(--f);text-transform:uppercase;letter-spacing:-.025em;margin:0;color:var(--orange);text-wrap:balance;overflow-wrap:anywhere}
.head .lead{font:600 clamp(22px,2.4vw,34px)/1.15 var(--f);text-transform:uppercase;max-width:32ch;margin:clamp(20px,2.5vw,32px) 0 0}
.head .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.head .meta span{font:600 15px/1 var(--f);text-transform:uppercase;letter-spacing:.05em;border:1px solid rgba(237,164,143,.5);color:var(--orange-soft);border-radius:999px;padding:8px 12px}

/* ---------- orange panels ---------- */
.panels{position:relative;z-index:1;background:var(--panel);color:var(--ink)}
.panel{padding-left:var(--gl);padding-right:var(--gr);padding-block:clamp(60px,9vw,130px) clamp(40px,6vw,80px);display:grid;gap:clamp(18px,2.5vw,32px);border-top:2px solid var(--ink);overflow-x:clip}
.panel:first-child{border-top:0}
.panel h2{font:800 clamp(72px,17vw,300px)/.78 var(--f);text-transform:uppercase;letter-spacing:-.025em;margin:0;text-wrap:balance}
.panel h2.mid{font-size:clamp(46px,7vw,110px);line-height:.86}
.lead{font:600 clamp(22px,2.6vw,38px)/1.12 var(--f);text-transform:uppercase;max-width:30ch;margin:0}
.body{font:500 clamp(18px,1.5vw,22px)/1.45 var(--f);max-width:60ch;margin:0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(18px,3vw,40px);max-width:1200px}
.cols > div{display:grid;gap:8px;align-content:start;min-width:0;border-top:2px solid var(--ink);padding-top:14px}
.cols h3{font:800 clamp(28px,3.2vw,46px)/.92 var(--f);text-transform:uppercase;margin:0}
.cols p{font:500 clamp(17px,1.4vw,20px)/1.45 var(--f);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;max-width:1100px}
.chips li{font:600 clamp(16px,1.4vw,19px)/1 var(--f);text-transform:uppercase;border:2px solid var(--ink);border-radius:999px;padding:10px 16px}
.round{width:72px;height:72px;border-radius:50%;background:var(--ink);color:var(--panel);display:grid;place-items:center;text-decoration:none;transition:transform .35s var(--ease)}
.round:hover{transform:rotate(-45deg) scale(1.06)}

/* project / service list rows */
.refs{display:grid;max-width:1200px}
.ref{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2vw,28px);padding-block:18px;border-top:2px solid var(--ink);text-decoration:none;color:var(--ink)}
.ref:last-child{border-bottom:2px solid var(--ink)}
.ref .n{font:600 18px/1 var(--f);font-variant-numeric:tabular-nums}
.ref .nm{font:800 clamp(36px,5.6vw,88px)/.86 var(--f);text-transform:uppercase;min-width:0;overflow-wrap:anywhere;transition:color .25s,transform .45s var(--ease)}
.ref:hover .nm,.ref:focus-visible .nm{color:var(--paper);transform:translateX(10px)}
.ref .k{font:600 clamp(14px,1.3vw,18px)/1.15 var(--f);text-transform:uppercase;text-align:right;display:grid;gap:3px;justify-items:end}
.ref .k .ty{opacity:.72}
.ref.you .nm{color:var(--paper)}

/* buttons */
.ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:12px;font:800 clamp(22px,2.4vw,34px)/1 var(--f);text-transform:uppercase;text-decoration:none;border-radius:999px;padding:18px 30px;border:2px solid var(--ink);transition:background .2s,color .2s,border-color .2s;color:var(--ink);cursor:pointer;background:none}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.line:hover{background:var(--ink);color:var(--paper)}
.btn.small{font-size:clamp(17px,1.6vw,22px);padding:13px 22px}
.coords{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px;max-width:1100px;font:500 19px/1.45 var(--f)}
.coords b{display:block;font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.06em}
.coords a{text-decoration:none;border-bottom:2px solid rgba(17,19,18,.35)}
.coords a:hover{border-color:var(--ink)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:1100px;counter-reset:s}
.steps li{display:grid;grid-template-columns:70px 1fr;align-items:baseline;padding:16px 0;border-top:2px solid var(--ink);font:600 clamp(20px,2vw,28px)/1.2 var(--f);text-transform:uppercase;counter-increment:s}
.steps li::before{content:"0" counter(s);font-size:18px}
.steps li:last-child{border-bottom:2px solid var(--ink)}

/* team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(18px,3vw,40px);max-width:1200px}
.member{border-top:2px solid var(--ink);padding-top:16px;display:grid;gap:8px;align-content:start}
.member .l{font:800 clamp(90px,10vw,160px)/.8 var(--f);color:var(--paper)}
.member .l span{color:var(--ink)}
.member h3{font:800 clamp(28px,3vw,42px)/.95 var(--f);text-transform:uppercase;margin:6px 0 0}
.member .role{font:600 16px/1.2 var(--f);text-transform:uppercase;letter-spacing:.05em}
.member p{margin:0;font:500 18px/1.45 var(--f)}

/* ---------- dark media bands ---------- */
.band{padding-left:var(--gl);padding-right:var(--gr);padding-block:clamp(40px,6vw,90px)}
.gallery{display:grid;gap:16px;max-width:1300px;margin:0 auto}
.gallery figure{margin:0;border-radius:18px;overflow:hidden;background:var(--ink-2)}
.gallery figure.tall{max-width:720px;justify-self:center;width:100%}
.gallery img{width:100%}
.cover{max-width:1300px;margin:0 auto;border-radius:22px;overflow:hidden;background:var(--ink-2);aspect-ratio:16/8}
.cover img{width:100%;height:100%;object-fit:cover}
.cover.fit img{object-fit:contain;padding:5%}
.phone{position:relative;width:min(380px,84vw);aspect-ratio:9/16;margin:0 auto;border-radius:36px;padding:10px;background:#000;box-shadow:0 0 0 2px rgba(237,164,143,.35),0 40px 90px -30px rgba(221,82,53,.55)}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:28px;background:var(--ink-2)}
.ctl{position:absolute;left:22px;right:22px;bottom:22px;display:flex;justify-content:space-between}
.ctl button{min-width:48px;height:48px;border-radius:999px;border:0;background:rgba(17,19,18,.8);color:var(--paper);font:700 15px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;padding:0 14px;cursor:pointer}
.ctl button:hover,.ctl button:focus-visible{background:var(--orange);color:var(--ink)}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;max-width:1300px;margin:40px auto 0;padding-top:24px;border-top:2px solid rgba(243,242,237,.16)}
.pager a{font:800 clamp(18px,1.8vw,26px)/1 var(--f);text-transform:uppercase;text-decoration:none;border:2px solid var(--paper);border-radius:999px;padding:16px 24px;transition:background .2s,color .2s}
.pager a:hover,.pager a:focus-visible{background:var(--paper);color:var(--ink)}
.pager a.nx{margin-left:auto;background:var(--orange);border-color:var(--orange);color:var(--ink)}
.pager a.nx:hover{background:var(--paper);border-color:var(--paper)}

/* service cards grid (services index) */
.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:2px;background:var(--ink);border:2px solid var(--ink);max-width:1300px}
.svc{background:var(--panel);color:var(--ink);text-decoration:none;padding:clamp(20px,2.4vw,32px);display:grid;gap:10px;align-content:start;min-height:260px;transition:background .25s,color .25s}
.svc:hover,.svc:focus-visible{background:var(--ink);color:var(--paper)}
.svc .n{font:600 16px/1 var(--f)}
.svc h3{font:800 clamp(30px,3vw,50px)/.92 var(--f);text-transform:uppercase;margin:0;overflow-wrap:break-word}
.svc p{margin:0;font:500 18px/1.4 var(--f)}
.svc .go{margin-top:auto;font:700 16px/1 var(--f);text-transform:uppercase;letter-spacing:.06em}

/* legal */
.legal-dl{display:grid;grid-template-columns:minmax(180px,280px) 1fr;gap:10px 24px;max-width:1000px;margin:0;font:500 19px/1.4 var(--f)}
.legal-dl dt{font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.05em;padding-top:3px}
.legal-dl dd{margin:0}

/* ---------- signature + footer ---------- */
.sign{background:var(--ink);padding-left:var(--gl);padding-right:var(--gr);padding-block:clamp(60px,9vw,120px) clamp(30px,4vw,50px);display:grid;gap:22px;justify-items:start}
.sign img{width:min(100%,640px)}
.sign p{margin:0;font:600 clamp(18px,1.8vw,24px)/1.2 var(--f);text-transform:uppercase;color:var(--orange-soft)}
.foot{background:var(--ink);color:var(--orange-soft);padding-left:var(--gl);padding-right:var(--gr);padding-block:30px calc(26px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(243,242,237,.14)}
.foot .grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
.foot h2{font:800 16px/1 var(--f);text-transform:uppercase;letter-spacing:.08em;color:var(--paper);margin:0 0 14px}
.foot p,.foot address{margin:0;font:500 17px/1.45 var(--f);font-style:normal}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font:500 17px/1.3 var(--f)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--paper)}
.foot .base{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:30px;padding-top:18px;border-top:1px solid rgba(243,242,237,.14);font:500 14px/1.4 var(--f);text-transform:uppercase;letter-spacing:.04em}
@media (max-width:900px){.foot .grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  body{font-size:18px}
  .foot .grid{grid-template-columns:1fr}
  .ref{grid-template-columns:auto 1fr}.ref .k{grid-column:2;text-align:left;justify-items:start}
  .legal-dl{grid-template-columns:1fr;gap:2px}.legal-dl dd{margin-bottom:12px}
  .steps li{grid-template-columns:44px 1fr}
}

/* mail + Bulle badge (fixed) */
.mail{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));right:calc(86px + env(safe-area-inset-right,0px));width:52px;height:52px;border-radius:50%;background:var(--ink);border:2px solid var(--orange);color:var(--orange);display:grid;place-items:center;z-index:30;transition:transform .3s}
.mail:hover{transform:scale(1.08)}
.badge{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));right:max(20px,env(safe-area-inset-right,0px));width:56px;z-index:30;pointer-events:none}
.badge svg{width:100%;height:auto}
.home-page .mail,.home-page .badge{opacity:0;transition:opacity .3s}
.home-page.past .mail,.home-page.past .badge{opacity:1}
.home-page:not(.past) .mail{pointer-events:none}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
}

/* long German / French compounds: hyphenate instead of overflowing */
h1,h2,h3,.ref .nm{hyphens:manual;overflow-wrap:break-word}
:lang(de) :is(h1,h2,h3,.ref .nm){hyphens:auto;-webkit-hyphens:auto}

/* ---------------------------------------------------------------- service pictograms (motion on hover) */
.picto{display:block;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;overflow:visible;--pbg:var(--panel)}
.picto *{transform-box:view-box}
.picto .solid,.picto .dot,.picto .rec{fill:currentColor}
.picto .dot,.picto .rec{stroke:none}
.picto .sw rect{fill:var(--pbg)}
.picto .sw .solid{fill:currentColor}
.picto .hole{fill:var(--pbg);stroke:none}
.picto .blk{fill:currentColor;fill-opacity:.18}
.ref .pi{width:clamp(46px,5.4vw,78px);transition:color .25s,transform .45s var(--ease)}
.ref.has-pi{grid-template-columns:auto auto 1fr auto}
.ref:hover .pi,.ref:focus-visible .pi{color:var(--paper);--pbg:var(--panel)}
.ref:hover .pi .sw .solid,.ref:focus-visible .pi .sw .solid{fill:var(--paper)}
.svc .picto{width:clamp(70px,7vw,96px);margin-bottom:6px}
.svc:hover .picto,.svc:focus-visible .picto{--pbg:var(--ink)}
.pstage{max-width:1300px;margin:0 auto;border-radius:22px;background:var(--ink-2) radial-gradient(circle at 50% 50%,rgba(221,82,53,.16),transparent 62%);border:1px solid #2a2c2b;height:clamp(260px,38vw,480px);display:grid;place-items:center;color:var(--orange);cursor:default}
.pstage .picto{width:clamp(170px,26vw,330px);stroke-width:3;--pbg:var(--ink-2)}
@media (max-width:560px){.ref.has-pi{grid-template-columns:auto auto 1fr}.ref.has-pi .k{grid-column:3}}

/* triggers: hover/focus on a row or card, or always on the service page stage */
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-strategy .arrow{animation:pArrow 2s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-strategy .ring{animation:pRing 2s ease-out infinite;transform-origin:52px 68px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-strategy .r2{animation-delay:.06s}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-strategy .r3{animation-delay:.12s}
@keyframes pArrow{0%{transform:translate(30px,-30px);opacity:0}30%{transform:translate(0,0);opacity:1}36%{transform:translate(-4px,4px)}44%,100%{transform:translate(0,0);opacity:1}}
@keyframes pRing{0%,28%{transform:scale(1)}38%{transform:scale(1.08)}55%,100%{transform:scale(1)}}

.pi-branding .sw{transform-origin:60px 90px}
.pi-branding .s1{--r0:-16deg;--r:-40deg}.pi-branding .s2{--r0:-8deg;--r:-20deg}.pi-branding .s3{--r0:0deg;--r:14deg}
.pi-branding .sw{rotate:var(--r0)}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-branding .sw{animation:pFan 2.6s var(--ease) infinite}
@keyframes pFan{0%,8%{rotate:var(--r0)}38%,78%{rotate:var(--r)}100%{rotate:var(--r0)}}

.pi-web .ln{stroke-dasharray:50}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-web .ln{animation:pDraw 2.4s ease-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-web .l2{animation-delay:.15s}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-web .l3{animation-delay:.3s}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-web .blk{animation:pPop 2.4s var(--ease) infinite;transform-origin:86px 64px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-web .cur{animation:pCur 2.4s var(--ease) infinite;transform-origin:78px 74px}
@keyframes pDraw{0%{stroke-dashoffset:50}35%,100%{stroke-dashoffset:0}}
@keyframes pPop{0%,30%{transform:scale(.4);opacity:0}48%{transform:scale(1.08);opacity:1}58%,100%{transform:scale(1)}}
@keyframes pCur{0%{transform:translate(18px,14px)}40%{transform:translate(0,0)}50%{transform:scale(.82)}60%,100%{transform:scale(1)}}

:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-social .hb{animation:pBeat 1.6s ease-in-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-social .ht{animation:pRise 1.6s ease-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-social .h2{animation-delay:.45s}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-social .h3{animation-delay:.9s}
@keyframes pBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
@keyframes pRise{0%{transform:translateY(14px);opacity:0}25%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
.pi-social .hb{transform-origin:60px 62px}

.pi-production .ap{transform-origin:49px 64px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-production .ap{animation:pSpin 2.4s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-production .rec{animation:pBlink 1s steps(1) infinite}
@keyframes pSpin{0%{rotate:0deg}60%,100%{rotate:120deg}}
@keyframes pBlink{50%{opacity:0}}

.pi-press .mega{transform-origin:30px 64px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-press .mega{animation:pShake 1.5s ease-in-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-press .wv{animation:pWave 1.5s ease-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-press .w2{animation-delay:.18s}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-press .w3{animation-delay:.36s}
@keyframes pShake{0%,100%{rotate:0deg}10%{rotate:-5deg}20%{rotate:3deg}30%{rotate:-2deg}40%{rotate:0deg}}
@keyframes pWave{0%{opacity:.15;transform:translateX(-6px)}30%{opacity:1;transform:translateX(0)}100%{opacity:.15;transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.picto *{animation:none!important}}

/* ---------------------------------------------------------------- process steps */
.process{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:1400px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.step{position:relative;padding:22px clamp(14px,1.6vw,24px) 28px;display:grid;gap:12px;align-content:start;color:var(--ink);outline:none;cursor:default;transition:background .35s var(--ease),color .35s}
.step+.step{border-left:2px solid var(--ink)}
.step:not(:last-child)::after{content:"";position:absolute;z-index:2;right:-13px;top:72px;width:24px;height:24px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12h8M13 8l4 4-4 4' fill='none' stroke='%23dd5235' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.step .no{font:600 16px/1 var(--f);font-variant-numeric:tabular-nums}
.step .picto{width:clamp(76px,7vw,108px);margin:4px 0 6px}
.step h3{margin:0;font:800 clamp(24px,2.1vw,34px)/.95 var(--f);text-transform:uppercase}
.step p{margin:0;font:500 17px/1.4 var(--f)}
.step:hover,.step:focus-visible,.step.play{background:var(--ink);color:var(--paper)}
.step:hover .picto,.step:focus-visible .picto,.step.play .picto{color:var(--orange);--pbg:var(--ink)}
@media (max-width:1000px){
  .process{grid-template-columns:1fr}
  .step{grid-template-columns:auto 1fr;column-gap:18px;align-items:center;padding:18px 16px}
  .step+.step{border-left:0;border-top:2px solid var(--ink)}
  .step .no{grid-column:1/-1}
  .step .picto{grid-row:span 2;width:84px;margin:0}
  .step:not(:last-child)::after{right:auto;left:46px;top:auto;bottom:-13px;rotate:90deg}
}
.picto .bg{fill:var(--pbg)}

/* meet */
.pi-meet .td{fill:currentColor;stroke:none}
.pi-meet .b2{transform-origin:84px 100px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-meet .td{animation:pTyping 1.2s ease-in-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-meet .t2{animation-delay:.15s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-meet .t3{animation-delay:.3s}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-meet .b2{animation:pPopIn 2.4s var(--ease) infinite}
@keyframes pTyping{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
@keyframes pPopIn{0%,20%{transform:scale(0);opacity:0}38%{transform:scale(1.08);opacity:1}48%,88%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
/* analyze */
.pi-analyze .bar{transform-origin:0 104px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-analyze .bar{animation:pGrow 2.4s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-analyze .k2{animation-delay:.12s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-analyze .k3{animation-delay:.24s}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-analyze .mag{animation:pScan 2.4s ease-in-out infinite}
@keyframes pGrow{0%{transform:scaleY(.1)}35%,100%{transform:scaleY(1)}}
@keyframes pScan{0%,100%{transform:translate(0,0)}35%{transform:translate(-44px,24px)}65%{transform:translate(-22px,12px)}}
/* sketch */
.pi-sketch .crv{stroke-dasharray:110}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-sketch .crv{animation:pDrawC 2.4s ease-in-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-sketch .pen{animation:pPen 2.4s ease-in-out infinite}
@keyframes pDrawC{0%{stroke-dashoffset:110}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:110}}
@keyframes pPen{0%{transform:translate(-74px,4px)}15%{transform:translate(-62px,-30px)}28%{transform:translate(-40px,-12px)}40%{transform:translate(-24px,8px)}55%,85%{transform:translate(0,0)}100%{transform:translate(-74px,4px)}}
/* rocket */
.pi-rocket .fl{transform-origin:60px 86px}
.pi-rocket .smk{opacity:0}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-rocket .rk{animation:pLift 2.2s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-rocket .fl{animation:pFlame .18s linear infinite alternate}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-rocket .smk{animation:pSmoke 2.2s ease-out infinite;transform-origin:60px 104px}
@keyframes pLift{0%,10%{transform:translate(0,0)}14%{transform:translate(-2px,0)}18%{transform:translate(2px,0)}22%{transform:translate(-2px,0)}26%{transform:translate(0,0)}60%{transform:translate(0,-34px);opacity:1}70%{transform:translate(0,-44px);opacity:0}71%{transform:translate(0,20px);opacity:0}100%{transform:translate(0,0);opacity:1}}
@keyframes pFlame{from{transform:scaleY(.7)}to{transform:scaleY(1.25)}}
@keyframes pSmoke{0%,20%{opacity:0;transform:scale(.6)}35%{opacity:1}70%,100%{opacity:0;transform:scale(1.3)}}
/* happy */
.pi-happy .eye{fill:currentColor;stroke:none}
.pi-happy .eye{transform-origin:60px 54px}
.pi-happy .mo{transform-origin:60px 80px}
.pi-happy .sp{transform-origin:center;transform-box:fill-box}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-happy .face{animation:pHop 1.6s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-happy .eye{animation:pBlinkEye 1.6s steps(1) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-happy .mo{animation:pSmile 1.6s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-happy .sp{animation:pTwinkle 1.6s ease-in-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-happy .s2{animation-delay:.3s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-happy .s3{animation-delay:.6s}
@keyframes pHop{0%,100%{transform:translateY(0)}20%{transform:translateY(-8px)}40%{transform:translateY(0)}}
@keyframes pBlinkEye{0%,70%,80%,100%{transform:scaleY(1)}72%{transform:scaleY(.1)}}
@keyframes pSmile{0%,100%{transform:scale(1)}20%{transform:scale(1.18,1.3)}}
@keyframes pTwinkle{0%,100%{transform:scale(.4) rotate(0deg);opacity:.3}50%{transform:scale(1.2) rotate(45deg);opacity:1}}
/* moodboard */
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-moodboard .b{animation:pSwapB 2.8s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-moodboard .c{animation:pSwapC 2.8s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-moodboard .a{animation:pTilt 2.8s var(--ease) infinite;transform-origin:34px 34px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-moodboard .d{animation:pTilt 2.8s var(--ease) infinite .2s;transform-origin:86px 86px}
@keyframes pSwapB{0%,15%{transform:translate(0,0)}45%,70%{transform:translate(-52px,52px)}100%{transform:translate(0,0)}}
@keyframes pSwapC{0%,15%{transform:translate(0,0)}45%,70%{transform:translate(52px,-52px)}100%{transform:translate(0,0)}}
@keyframes pTilt{0%,100%{rotate:0deg}40%{rotate:-8deg}60%{rotate:4deg}}
/* print */
.pi-print .led{fill:currentColor;stroke:none}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-print .ppr{animation:pPaper 2.2s ease-in-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-print .led{animation:pBlink .5s steps(1) infinite}
@keyframes pPaper{0%{transform:translateY(-34px)}55%,85%{transform:translateY(4px)}100%{transform:translateY(-34px)}}
/* wireframe */
.pi-wireframe .wf{transform-origin:60px 60px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-wireframe .wf{animation:pBuild 2.6s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-wireframe .w2{animation-delay:.2s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-wireframe .w3{animation-delay:.4s}
@keyframes pBuild{0%{opacity:0;transform:translateY(10px)}25%,85%{opacity:1;transform:translateY(0)}100%{opacity:0}}
/* code */
.pi-code .sl{transform-origin:60px 60px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-code .cl{animation:pLeft 1.8s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-code .cr{animation:pRight 1.8s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-code .sl{animation:pSlash 1.8s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-code .cu{animation:pBlink .7s steps(1) infinite}
@keyframes pLeft{0%,100%{transform:translateX(0)}40%{transform:translateX(-8px)}}
@keyframes pRight{0%,100%{transform:translateX(0)}40%{transform:translateX(8px)}}
@keyframes pSlash{0%,100%{rotate:0deg}40%{rotate:20deg}}
/* calendar */
.pi-calendar .cd{fill:currentColor;stroke:none}
.pi-calendar .ck{stroke-dasharray:36}
.pi-calendar .cd{transform-box:fill-box;transform-origin:center}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-calendar .cd{animation:pDot 2.4s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-calendar .c2{animation-delay:.08s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-calendar .c3{animation-delay:.16s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-calendar .c4{animation-delay:.24s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-calendar .c6{animation-delay:.32s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-calendar .c7{animation-delay:.4s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-calendar .c8{animation-delay:.48s}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-calendar .ck{animation:pCheck 2.4s ease-out infinite}
@keyframes pDot{0%{transform:scale(0)}25%,100%{transform:scale(1)}}
@keyframes pCheck{0%,45%{stroke-dashoffset:36}70%,100%{stroke-dashoffset:0}}
/* image */
.pi-image .sun{fill:currentColor;stroke:none}
.pi-image .mt{stroke-dasharray:140}
.pi-image .sp{transform-box:fill-box;transform-origin:center}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-image .sun{animation:pSun 2.4s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-image .mt{animation:pMount 2.4s ease-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-image .sp{animation:pTwinkle 1.2s ease-in-out infinite}
@keyframes pSun{0%{transform:translateY(30px);opacity:0}40%,100%{transform:translateY(0);opacity:1}}
@keyframes pMount{0%{stroke-dashoffset:140}45%,100%{stroke-dashoffset:0}}
/* plane */
.pi-plane .tr{stroke-dasharray:6 7}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-plane .pl{animation:pFly 2.2s ease-in-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-plane .tr{animation:pTrail .6s linear infinite}
@keyframes pFly{0%{transform:translate(0,0)}40%{transform:translate(4px,-6px)}60%{transform:translate(40px,-40px);opacity:0}61%{transform:translate(-40px,40px);opacity:0}100%{transform:translate(0,0);opacity:1}}
@keyframes pTrail{to{stroke-dashoffset:-26}}
/* clap */
.pi-clap .arm{transform-origin:16px 50px;rotate:-20deg}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-clap .arm{animation:pClap 1.4s var(--ease) infinite}
@keyframes pClap{0%,30%{rotate:-20deg}45%,70%{rotate:0deg}100%{rotate:-20deg}}
/* flash */
.pi-flash .fb{opacity:.25}
.pi-flash .lens{transform-origin:60px 69px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-flash .fb{animation:pBurst 1.4s ease-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-flash .cam{animation:pPress 1.4s ease-out infinite;transform-origin:60px 100px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-flash .lens{animation:pIris 1.4s ease-out infinite}
@keyframes pBurst{0%,30%{opacity:.25}36%{opacity:1}70%,100%{opacity:.25}}
@keyframes pPress{0%,28%,44%,100%{transform:scale(1)}34%{transform:scale(.95)}}
@keyframes pIris{0%,30%,60%,100%{transform:scale(1)}38%{transform:scale(1.6)}}
/* timeline */
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-timeline .ph{animation:pHead 2.6s linear infinite}
@keyframes pHead{0%{transform:translateX(0)}90%{transform:translateX(74px)}100%{transform:translateX(0)}}
/* doc */
.pi-doc .dl{stroke-dasharray:52}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-doc .dl{animation:pType 2.6s ease-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-doc .d1{animation-delay:.18s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-doc .d2{animation-delay:.36s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-doc .d3{animation-delay:.54s} :is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-doc .d4{animation-delay:.72s}
@keyframes pType{0%{stroke-dashoffset:52}30%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:52}}
/* mail */
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-mail .env{animation:pWhoosh 1.8s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-mail .sl{animation:pSpeed 1.8s ease-out infinite}
@keyframes pWhoosh{0%,100%{transform:translateX(0)}30%{transform:translateX(-8px)}55%{transform:translateX(10px)}}
@keyframes pSpeed{0%,25%{opacity:.2;transform:translateX(10px)}55%{opacity:1;transform:translateX(0)}100%{opacity:.2}}
/* confetti */
.pi-confetti .stm{stroke-dasharray:50}
.pi-confetti .cf{transform-origin:56px 66px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-confetti .cf{animation:pPop2 1.8s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-confetti .stm{animation:pStream 1.8s ease-out infinite}
@keyframes pPop2{0%{transform:scale(.2);opacity:0}30%{transform:scale(1.1);opacity:1}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1.3);opacity:0}}
@keyframes pStream{0%{stroke-dashoffset:50}35%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.picto *{animation:none!important}}

/* printing: business card slides out, the T-shirt sways, the logo is stamped */
.pi-printing .lg{fill:currentColor;stroke:none;transform-origin:60px 72px}
.pi-printing .tee{transform-origin:60px 30px}
.pi-printing .crd{transform-origin:85px 27px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-printing .crd{animation:pCard 2.4s var(--ease) infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-printing .tee{animation:pSway 2.4s ease-in-out infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-printing .lg{animation:pStamp 2.4s var(--ease) infinite}
@keyframes pCard{0%,100%{transform:translate(0,0) rotate(0deg)}35%,70%{transform:translate(4px,-10px) rotate(8deg)}}
@keyframes pSway{0%,100%{rotate:0deg}25%{rotate:-4deg}50%{rotate:3deg}75%{rotate:-1deg}}
@keyframes pStamp{0%,30%{transform:scale(0)}42%{transform:scale(1.35)}52%,100%{transform:scale(1)}}
/* truck: rolling, wheels spinning, road passing */
.pi-truck .rd{stroke-dasharray:12 10}
.pi-truck .w1{transform-origin:28px 92px}.pi-truck .w2{transform-origin:94px 92px}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-truck .rd{animation:pRoad .5s linear infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-truck .wh{animation:pWheel .5s linear infinite}
:is(.ref:hover,.ref:focus-visible,.svc:hover,.svc:focus-visible,.pstage,.step:hover,.step:focus-visible,.step.play) .pi-truck .trk{animation:pBump .5s ease-in-out infinite}
@keyframes pRoad{to{stroke-dashoffset:22}}
@keyframes pWheel{to{rotate:-360deg}}
@keyframes pBump{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.picto *{animation:none!important}}
/* 7 services: fixed columns, the last odd card takes the full row */
.svcgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc:last-child:nth-child(3n+1){grid-column:1/-1;min-height:200px}
@media (max-width:1000px){.svcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.svc:last-child:nth-child(3n+1){grid-column:auto}.svc:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:620px){.svcgrid{grid-template-columns:1fr}}
/* four blocks: 2 × 2 instead of 3 + 1 */
.cols:has(> div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px}
@media (max-width:700px){.cols:has(> div:nth-child(4)){grid-template-columns:1fr}}

/* ---------- full-width layout on large screens ---------- */
:root{--gl:max(24px,3vw,env(safe-area-inset-left,0px));--gr:max(24px,3vw,env(safe-area-inset-right,0px))}
.refs,.cols,.chips,.team,.svcgrid,.process,.coords,.steps,.wcards,.whead,.legal-dl,.cols:has(> div:nth-child(4)){max-width:none}
.gallery,.cover,.pstage,.pager{max-width:1700px}
.head .lead,.lead{max-width:40ch}
.body{max-width:75ch}
@media (min-width:1400px){
  .cols:has(> div:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
  .team{grid-template-columns:repeat(3,minmax(0,1fr))}
}