/* Pages intérieures Connekt (services…) — même charte que l'accueil */
:root{
  --paper:#F8F6F2;--ink:#141216;--ink2:#1F1C22;--wine:#6B2A3F;--sky:#8EBBD6;--butter:#F5E3A0;--gold:#E0BE5C;--mute:#6F6A72;--line:#E6E0D7;
  --font:"Plus Jakarta Sans",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --acc:var(--wine);--acc-soft:#F1E4E8;--acc-ink:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:6px}
h1,h2,h3{letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.mono{font-family:var(--mono)}
.eb{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;gap:10px;align-items:center;color:var(--acc)}
.eb i{width:7px;height:7px;border-radius:50%;background:var(--acc)}
body.p-crea{--acc:#B8922A;--acc-soft:#FBF3DA;--acc-ink:#141216;--accbg:#F5E3A0}
body.p-mkt{--acc:#3F7FAE;--acc-soft:#E6F0F8;--acc-ink:#141216;--accbg:#8EBBD6}
body.p-web{--acc:#141216;--acc-soft:#ECEAE6;--acc-ink:#fff;--accbg:#141216}
body.p-tech{--acc:#6B2A3F;--acc-soft:#F1E4E8;--acc-ink:#fff;--accbg:#6B2A3F}

/* header (identique à l'accueil) */
.top{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 32px;background:rgba(248,246,242,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(20,18,22,.06)}
.top img{height:44px;display:block}
.menu{display:flex;gap:30px;font-size:15px;font-weight:600;margin:0 auto}
.menu a{text-decoration:none;position:relative}
.menu a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--wine);transition:width .3s}
.menu a:hover::after,.menu a[aria-current="page"]::after{width:100%}
.lang{display:flex;gap:2px;background:#EEEAE3;border-radius:999px;padding:3px}
.lang a{font-size:12px;font-weight:700;text-decoration:none;color:#6F6A72;padding:6px 11px;border-radius:999px;letter-spacing:.04em}
.lang a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.devis{background:var(--wine);color:var(--paper);border-radius:999px;padding:11px 20px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.devis i{width:7px;height:7px;border-radius:50%;background:var(--butter)}

/* hero de page */
.phero{padding:150px 0 90px;position:relative;overflow:hidden}
.phero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.phero h1{font-size:clamp(46px,6.2vw,92px);font-weight:800;margin:18px 0 0}
.phero h1 em{font-style:normal;color:var(--acc)}
.phero .lead{font-size:20px;color:#4F4A54;max-width:44ch;margin:24px 0 32px}
.crumbs{font-size:13px;color:var(--mute);margin-bottom:18px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{border-radius:999px;padding:15px 26px;font-weight:700;font-size:15px;text-decoration:none;display:inline-flex;gap:10px;align-items:center;transition:transform .25s}
.btn:hover{transform:translateY(-2px)}
.btn.p{background:var(--wine);color:var(--paper)}
.btn.p i{width:7px;height:7px;border-radius:50%;background:var(--butter)}
.btn.s{border:1px solid #CFC8BE;background:#fff}

/* visuel animé du hero */
.viz{position:relative;aspect-ratio:1.08;border-radius:32px;background:var(--ink);overflow:hidden;box-shadow:0 50px 90px -50px rgba(20,18,22,.6)}
.viz .lbl{position:absolute;top:18px;left:20px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#9B96A0;text-transform:uppercase;z-index:3}
.viz .lbl b{color:var(--butter);font-weight:500}

/* création : studio photo IA */
.v-crea .scene{position:absolute;inset:0;transition:opacity 1s}
.v-crea .s1{background:linear-gradient(#F4E7D0 0 62%,#E8D4B4 62%)}
.v-crea .s2{background:linear-gradient(#BFD9E8 0 58%,#E9DDC4 58%)}
.v-crea .s3{background:linear-gradient(135deg,#ECE8E2,#D9D2C9)}
.v-crea .s4{background:linear-gradient(#3B4A2E 0 55%,#55663F 55%)}
.v-crea .prod{position:absolute;left:50%;bottom:16%;width:30%;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 30px 30px rgba(0,0,0,.25))}
.v-crea .strip{position:absolute;left:20px;right:20px;bottom:18px;display:flex;gap:8px;z-index:3}
.v-crea .strip i{flex:1;aspect-ratio:1;border-radius:10px;border:2px solid transparent;background-size:cover;transition:border-color .4s,transform .4s}
.v-crea .strip i.on{border-color:var(--butter);transform:translateY(-4px)}
.v-crea .tag{position:absolute;top:50px;right:20px;z-index:3;background:rgba(20,18,22,.85);color:#fff;font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:999px}

/* marketing : campagne en direct */
.v-mkt{background:#0F1A24}
.v-mkt .ad{position:absolute;left:8%;top:14%;width:44%;aspect-ratio:.56;background:#fff;border-radius:24px;overflow:hidden;padding:10px}
.v-mkt .ad .im{height:62%;border-radius:16px;background:linear-gradient(150deg,#8EBBD6,#3F7FAE)}
.v-mkt .ad b{display:block;font-size:13px;margin-top:10px}
.v-mkt .ad span{display:block;font-size:11px;color:#6F6A72}
.v-mkt .ad .cta{margin-top:8px;background:#141216;color:#fff;border-radius:999px;text-align:center;font-size:11px;font-weight:700;padding:7px}
.v-mkt .funnel{position:absolute;right:7%;top:16%;width:38%;display:grid;gap:10px}
.v-mkt .row{background:#18283A;border-radius:14px;padding:10px 12px;color:#fff}
.v-mkt .row small{display:block;font-family:var(--mono);font-size:10px;color:#8EBBD6;letter-spacing:.08em}
.v-mkt .row b{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.v-mkt .bar{height:5px;border-radius:3px;background:#24384E;margin-top:6px;overflow:hidden}
.v-mkt .bar i{display:block;height:100%;width:0;background:#8EBBD6;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.v-mkt .chs{position:absolute;left:8%;right:7%;bottom:7%;display:flex;gap:8px;flex-wrap:wrap}
.v-mkt .chs span{font-family:var(--mono);font-size:11px;color:#fff;border:1px solid #2C4560;border-radius:999px;padding:5px 10px;transition:background .4s,color .4s}
.v-mkt .chs span.on{background:#8EBBD6;color:#141216;border-color:#8EBBD6}

/* web : site qui se construit */
.v-web{background:#26232A}
.v-web .br{position:absolute;inset:12% 7% 9%;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.v-web .bb{height:26px;background:#EEEAE3;display:flex;gap:5px;align-items:center;padding:0 10px;flex:none}
.v-web .bb i{width:8px;height:8px;border-radius:50%;background:#CFC8BE}
.v-web .bb span{margin-left:8px;font-family:var(--mono);font-size:10px;color:#8A848D}
.v-web .bd{flex:1;padding:12px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr auto;gap:8px}
.v-web .blk{border-radius:8px;transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.v-web .blk.off{opacity:0;transform:translateY(14px) scale(.96)}
.v-web .nav{grid-column:span 3;height:22px;background:#F1EEE8}
.v-web .hero{grid-column:span 3;background:var(--ink);min-height:70px}
.v-web .card{background:#F1EEE8;min-height:60px}
.v-web .foot{grid-column:span 3;height:16px;background:#F1EEE8}
.v-web .code{position:absolute;left:7%;bottom:3%;font-family:var(--mono);font-size:11px;color:#8EBBD6;white-space:nowrap}
.v-web .order{position:absolute;right:5%;top:6%;background:var(--butter);color:var(--ink);border-radius:14px;padding:8px 12px;font-size:12px;font-weight:700;opacity:0;transform:translateY(10px);transition:all .5s}
.v-web .order.on{opacity:1;transform:none}

/* tech : agent IA + CRM */
.v-tech{background:#1B171D}
.v-tech .chat{position:absolute;left:7%;top:13%;width:52%;bottom:9%;background:#26212A;border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.v-tech .chat .h{font-family:var(--mono);font-size:10px;color:#9B96A0;display:flex;justify-content:space-between}
.v-tech .chat .h b{color:var(--butter);font-weight:500}
.v-tech .m{font-size:12.5px;line-height:1.4;padding:8px 11px;border-radius:14px 14px 14px 4px;background:#3A3340;color:#fff;max-width:88%;opacity:0;transform:translateY(8px);transition:all .4s}
.v-tech .m.me{align-self:flex-end;background:var(--sky);color:var(--ink);border-radius:14px 14px 4px 14px}
.v-tech .m.on{opacity:1;transform:none}
.v-tech .crm{position:absolute;right:6%;top:13%;width:34%;display:grid;gap:8px}
.v-tech .crm .c{background:#26212A;border:1px solid #3A3340;border-radius:14px;padding:10px;color:#fff;font-size:12px;transition:border-color .4s,background .4s}
.v-tech .crm .c small{display:block;font-family:var(--mono);font-size:10px;color:#9B96A0}
.v-tech .crm .c.on{border-color:var(--butter);background:#2F2734}

/* sections */
section{position:relative}
.sec{padding:110px 0}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:50px}
.sec-h h2{font-size:clamp(34px,4.4vw,60px);font-weight:800;max-width:18ch}
.sec-h p{max-width:46ch;color:var(--mute)}
.dark{background:var(--ink);color:var(--paper)}
.dark .sec-h p{color:#A39EA8}

/* liste des services */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sc{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:12px;transition:transform .35s,box-shadow .35s,border-color .35s;position:relative;overflow:hidden}
.sc:hover{transform:translateY(-6px);box-shadow:0 30px 60px -36px rgba(20,18,22,.45);border-color:var(--acc)}
.sc .n{font-family:var(--mono);font-size:12px;color:var(--acc)}
.sc h3{font-size:24px;font-weight:800;letter-spacing:-.02em}
.sc p{color:#58535D;font-size:15.5px}
.sc ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.sc li{font-size:12px;font-weight:600;background:var(--acc-soft);border-radius:999px;padding:5px 11px}
.sc.ai::after{content:"IA";position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:11px;font-weight:500;background:var(--ink);color:var(--butter);padding:3px 8px;border-radius:999px}

/* méthode */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;padding-top:34px}
.steps::before{content:"";position:absolute;top:8px;left:0;right:0;height:2px;background:#2C2830}
.steps .fill{position:absolute;top:8px;left:0;height:2px;width:100%;background:var(--butter);transform-origin:left;transform:scaleX(var(--p,1))}
.st{position:relative}
.st::before{content:"";position:absolute;top:-33px;left:0;width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid var(--butter)}
.st small{font-family:var(--mono);font-size:12px;color:var(--butter)}
.st h3{font-size:24px;font-weight:800;margin:6px 0 8px}
.st p{color:#A39EA8;font-size:15.5px}

/* atouts */
.pros{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pro{border-top:2px solid var(--ink);padding-top:18px}
.pro h3{font-size:22px;font-weight:800;margin-bottom:8px}
.pro p{color:#58535D;font-size:15.5px}

/* pôles liés */
.links4{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lk{display:flex;flex-direction:column;gap:8px;border-radius:22px;padding:24px;text-decoration:none;background:#fff;border:1px solid var(--line);transition:transform .3s,border-color .3s}
.lk:hover{transform:translateY(-4px);border-color:var(--ink)}
.lk small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:flex;gap:8px;align-items:center}
.lk small i{width:8px;height:8px;border-radius:50%}
.lk b{font-size:22px;letter-spacing:-.02em}
.lk span{color:var(--mute);font-size:14.5px}
.lk em{font-style:normal;font-weight:700;font-size:14px;margin-top:6px}

/* CTA */
.cta-box{background:var(--accbg,var(--wine));color:var(--acc-ink);border-radius:36px;padding:64px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.cta-box h2{font-size:clamp(34px,4.2vw,58px);font-weight:800}
.cta-box p{opacity:.85;margin-top:12px;max-width:44ch}
.cta-box .btns{justify-content:flex-end}
.cta-box .btn.p{background:var(--ink);color:var(--paper)}
.p-web .cta-box .btn.p,.p-tech .cta-box .btn.p{background:var(--paper);color:var(--ink)}
.cta-box .btn.s{background:transparent;border-color:currentColor;color:inherit}

/* vue d'ensemble des pôles */
.poles{display:grid;gap:16px}
.pl{display:grid;grid-template-columns:90px 1.1fr 1.4fr auto;gap:30px;align-items:center;padding:34px 36px;border-radius:28px;background:#fff;border:1px solid var(--line);text-decoration:none;transition:transform .35s,box-shadow .35s,background .35s}
.pl:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(20,18,22,.5)}
.pl .big{font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:1}
.pl h3{font-size:clamp(28px,3vw,40px);font-weight:800}
.pl p{color:var(--mute);font-size:15.5px;margin-top:6px}
.pl ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.pl li{font-size:12.5px;font-weight:600;border-radius:999px;padding:6px 12px;background:#F3F0EB}
.pl .go{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:var(--ink);color:#fff;transition:transform .35s}
.pl:hover .go{transform:rotate(-45deg)}
.pl.c1 .big{color:#B8922A}.pl.c1 li{background:#FBF3DA}
.pl.c2 .big{color:#3F7FAE}.pl.c2 li{background:#E6F0F8}
.pl.c3 .big{color:#141216}.pl.c3 li{background:#ECEAE6}
.pl.c4 .big{color:#6B2A3F}.pl.c4 li{background:#F1E4E8}

/* chaîne connectée */
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.ch{padding:26px 22px;border-left:1px solid #2C2830;position:relative}
.ch:first-child{border-left:0}
.ch .dot{width:14px;height:14px;border-radius:50%;margin-bottom:16px}
.ch b{display:block;font-size:20px;letter-spacing:-.02em;margin-bottom:6px}
.ch p{color:#A39EA8;font-size:15px}
.ch .arr{position:absolute;right:-14px;top:24px;width:28px;height:28px;border-radius:50%;background:var(--ink);border:1px solid #3A363E;display:grid;place-items:center;font-size:13px;color:var(--butter);z-index:2}
.ch:last-child .arr{display:none}
.pulse{position:absolute;top:31px;left:0;height:2px;width:100%;background:linear-gradient(90deg,transparent,var(--butter),transparent);background-size:30% 100%;background-repeat:no-repeat;animation:run 3.2s linear infinite;opacity:.8}
@keyframes run{from{background-position:-30% 0}to{background-position:130% 0}}

footer{background:var(--ink);color:#9B96A0;padding:50px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer img{height:38px}
footer a{color:var(--paper);text-decoration:none}

/* apparition au scroll (seulement si JS actif) */
.js .rv{opacity:0;transform:translateY(34px)}

@media (max-width:980px){
  .menu{display:none}.top{padding:10px 16px}
  .phero .wrap,.cta-box{grid-template-columns:1fr}
  .svc,.pros,.links4{grid-template-columns:1fr 1fr}
  .steps,.chain{grid-template-columns:1fr 1fr;row-gap:40px}
  .ch{border-left:0}.ch .arr{display:none}
  .pl{grid-template-columns:60px 1fr auto}.pl ul{grid-column:1/-1}
  .cta-box{padding:36px}.cta-box .btns{justify-content:flex-start}
}
@media (max-width:620px){
  .svc,.pros,.links4,.steps,.chain{grid-template-columns:1fr}
  .phero{padding-top:120px}
  .devis{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}

/* corrections visuels */
.v-crea .prod{bottom:30%;width:26%}
.v-crea .strip{left:auto;right:18px;bottom:18px;width:46%;gap:6px}
.v-mkt .ad{left:7%;top:13%;width:40%}
.v-mkt .chs{left:auto;right:7%;width:38%;bottom:8%;justify-content:flex-start}

/* vue d'ensemble : 4 pôles reliés */
.v-all{background:var(--ink);padding:56px 22px 22px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.v-all .t{border-radius:20px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.v-all .t b{font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em;line-height:1.1}
.v-all .t small{font-family:var(--mono);font-size:11px;opacity:.75}
.v-all .t1{background:var(--butter);color:var(--ink)}
.v-all .t2{background:var(--sky);color:var(--ink)}
.v-all .t3{background:#2A262D;color:var(--paper)}
.v-all .t4{background:var(--wine);color:var(--paper)}
.v-all .t ul{list-style:none;display:flex;flex-wrap:wrap;gap:5px}
.v-all .t li{font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.45)}
.v-all .t3 li,.v-all .t4 li{background:rgba(255,255,255,.12)}
.v-all .hub{position:absolute;left:50%;top:calc(50% + 17px);transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:var(--paper);display:grid;place-items:center;z-index:3;box-shadow:0 0 0 8px var(--ink)}
.v-all .hub img{width:44px;height:auto}
.v-all .t.on{outline:2px solid var(--paper);outline-offset:-2px}

/* ================= Réalisations ================= */
.wall{position:relative;height:100vh;min-height:680px;background:var(--ink);overflow:hidden}
.wall .cols{position:absolute;inset:-6% -4%;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;transform:rotate(-6deg) scale(1.08)}
.wall .col{display:flex;flex-direction:column;gap:14px;animation:up var(--d,60s) linear infinite}
.wall .col:nth-child(even){animation-name:down}
.wall:hover .col{animation-play-state:paused}
@keyframes up{to{transform:translateY(-50%)}}
@keyframes down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.wall .w{border-radius:16px;overflow:hidden;background:#2A262D;flex:none;box-shadow:0 20px 40px -20px rgba(0,0,0,.7)}
.wall .w img{display:block;width:100%;height:auto}
.wall .w.ph{border:5px solid #0A090B;border-radius:24px}
.wall::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 52%,rgba(20,18,22,.92),rgba(20,18,22,.55) 60%,rgba(20,18,22,.15));pointer-events:none}
.wall .ov{position:absolute;inset:0;z-index:3;display:grid;place-items:center;text-align:center;color:var(--paper);padding:0 24px;pointer-events:none}
.wall .ov > div{pointer-events:auto}
.wall h1{font-size:clamp(52px,8vw,124px);font-weight:800;letter-spacing:-.05em;line-height:.95}
.wall h1 em{font-style:normal;color:var(--butter)}
.wall .ov p{font-size:20px;color:#CFCAD3;max-width:46ch;margin:22px auto 30px}
.wall .eb{color:var(--butter)}.wall .eb i{background:var(--butter)}
.wall .btn.s{background:transparent;color:var(--paper);border-color:#57525B}

/* projets phares */
.case{padding:120px 0;border-top:1px solid var(--line);overflow:hidden}
.case .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.case.flip .wrap{grid-template-columns:1.15fr .85fr}
.case.flip .txt{order:2}
.case .sector{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.case h2{font-size:clamp(44px,5.4vw,80px);font-weight:800;margin:12px 0 16px}
.case p{color:#4F4A54;font-size:18px;max-width:42ch}
.case .did{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.case .did span{display:inline-flex;gap:8px;align-items:center;font-size:13px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px}
.case .did i{width:8px;height:8px;border-radius:50%}
.case .lnk{display:inline-flex;margin-top:24px;font-weight:700;font-size:15px;text-decoration:none;border-bottom:2px solid var(--wine);padding-bottom:2px}
.case.dark{background:var(--ink);color:var(--paper);border-top:0}
.case.dark p{color:#BDB8C2}.case.dark .sector{color:#9B96A0}
.case.dark .did span{background:#1F1C22;border-color:#3A363E;color:var(--paper)}
.case.dark .lnk{border-color:var(--butter)}
.stagev{position:relative;min-height:540px}
.mk-br{position:absolute;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 50px 90px -40px rgba(20,18,22,.55);border:1px solid rgba(0,0,0,.06)}
.mk-br .bar{height:26px;background:#EEEAE3;display:flex;gap:5px;align-items:center;padding:0 10px}
.mk-br .bar i{width:8px;height:8px;border-radius:50%;background:#CFC8BE}
.mk-br .bar span{margin-left:8px;font-family:var(--mono);font-size:10px;color:#8A848D}
.mk-br img{display:block;width:100%;height:auto}
.mk-ph{position:absolute;border-radius:34px;overflow:hidden;background:#0A090B;padding:8px;box-shadow:0 50px 80px -30px rgba(20,18,22,.6)}
.mk-ph img{display:block;width:100%;border-radius:27px;aspect-ratio:.5;object-fit:cover;object-position:top}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tiles img{width:100%;display:block;border-radius:14px;aspect-ratio:3/4;object-fit:cover;box-shadow:0 20px 40px -24px rgba(20,18,22,.5)}
.tiles.t4{grid-template-columns:repeat(4,1fr)}
.tiles img:nth-child(3n+2){transform:translateY(28px)}

/* galerie */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.filters button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 18px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filters button span{opacity:.55;font-weight:500;margin-left:4px}
.gal{columns:4 240px;column-gap:14px}
.gi{break-inside:avoid;margin-bottom:14px;border-radius:18px;overflow:hidden;position:relative;cursor:zoom-in;background:#fff;border:1px solid var(--line);display:block;width:100%;padding:0;font:inherit;text-align:left;transition:transform .3s,box-shadow .3s}
.gi:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(20,18,22,.5)}
.gi img{display:block;width:100%;height:auto}
.gi .cap{padding:12px 14px}
.gi .cap b{display:block;font-size:14px}
.gi .cap small{color:var(--mute);font-size:12.5px}
.gi.hide{display:none}
.lb{position:fixed;inset:0;z-index:80;background:rgba(20,18,22,.9);display:none;align-items:center;justify-content:center;padding:40px}
.lb.on{display:flex}
.lb figure{max-width:min(900px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:12px;align-items:center}
.lb img{max-width:100%;max-height:78vh;border-radius:16px;display:block}
.lb figcaption{color:var(--paper);text-align:center}
.lb figcaption b{display:block;font-size:18px}
.lb figcaption small{color:#A39EA8}
.lb button{position:absolute;top:20px;right:24px;width:48px;height:48px;border-radius:50%;border:0;background:var(--paper);font-size:22px;cursor:pointer}

@media (max-width:980px){
  .wall .cols{grid-template-columns:repeat(3,1fr)}
  .wall .col:nth-child(n+4){display:none}
  .case .wrap,.case.flip .wrap{grid-template-columns:1fr}
  .case.flip .txt{order:0}
  .stagev{min-height:440px}
}
.case.dark .did i[style*="#141216"]{background:#F8F6F2!important}