/* ============================================================
   MIRALTO — LAUNCH — white / elegant / spacious
   ============================================================ */
:root{
  --paper:#FFF5E9; --paper-2:#FFDBB5;
  --ink:#2C302E; --dim:rgba(44,48,46,.68); --dim2:rgba(44,48,46,.38);
  --line:rgba(44,48,46,0.11);
  --brand:#3B4DFF; --lit:#3B4DFF; --pop:#E0A458; --linen:#FFF5E9; --seaweed:#419D78; --apricot:#FFDBB5;
  --exp:'Archivo Expanded','Archivo',sans-serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
  --maxw:1600px; --gut:clamp(20px,4vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.45}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--brand);color:#FFF5E9}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* bands: all light. .alt = soft off-white; .accent = the one bold cobalt moment */
.band{ --bg:var(--paper);--fg:var(--ink);--fdim:var(--dim);--fdim2:var(--dim2);--fline:var(--line);--facc:var(--brand);
  background:var(--bg);color:var(--fg);position:relative }
.band.alt{ --bg:var(--paper-2) }
.band.accent{ --bg:var(--brand);--fg:#FFF5E9;--fdim:rgba(255,245,233,0.72);--fdim2:rgba(255,245,233,0.5);--fline:rgba(255,245,233,0.22);--facc:#FFF5E9 }

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:80;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:20px var(--gut);transition:background .5s var(--ease),padding .4s var(--ease)}
header .brand{justify-self:start}
header .navlinks{justify-self:center}
header .hd-end{justify-self:end;display:flex;align-items:center;gap:clamp(14px,1.6vw,22px)}
header.scrolled{background:rgba(255,245,233,0.78);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);padding-block:15px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;font-size:clamp(1.18rem,1.5vw,1.42rem)}
.brand svg{height:.6875em;width:auto}
.brand b{font-family:var(--sans);font-weight:900;letter-spacing:-.015em;font-size:1em;text-transform:uppercase;line-height:1}
.navlinks{display:flex;gap:clamp(24px,2.4vw,40px);align-items:center}
/* nav links — mono, uppercase, with a cobalt underline that grows on hover and stays on the current section */
.navlinks a:not(.navcta){font-family:var(--mono);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.6;
  padding:6px 1px;position:relative;transition:opacity .3s var(--ease),color .3s var(--ease)}
.navlinks a:not(.navcta)::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
@media(hover:hover){.navlinks a:not(.navcta):hover{opacity:1}}
@media(hover:hover){.navlinks a:not(.navcta):hover::after{transform:scaleX(1)}}
.navlinks a.current{opacity:1;color:var(--brand)}
.navlinks a.current::after{transform:scaleX(1)}
/* CONTACT — solid block; lifts with a cobalt offset shadow (black element → blue shadow) */
.navcta{background:var(--ink);border:1px solid var(--ink);padding:11px 22px;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:#FFF5E9;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
@media(hover:hover){.navcta:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 0 var(--brand)}}
.navcta:active{transform:scale(.96);box-shadow:none;transition-duration:.1s}
.burger{display:none;width:40px;height:40px;border:0;background:none;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:1.6px;background:var(--ink);transition:transform .4s var(--ease)}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){bottom:16px}
.burger.x span:nth-child(1){top:19px;transform:rotate(45deg)}.burger.x span:nth-child(2){bottom:19px;transform:rotate(-45deg)}
@media(max-width:860px){header{display:flex;justify-content:space-between}.navlinks,.navcta{display:none}.burger{display:block}}
.mobile-menu{position:fixed;inset:0;z-index:75;background:var(--paper);display:flex;flex-direction:column;justify-content:center;
  padding-inline:var(--gut);clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.mobile-menu.open{clip-path:inset(0 0 0 0)}
.mobile-menu a{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,10vw,3.4rem);padding:10px 0;color:var(--ink);border-bottom:1px solid var(--line)}

/* page transition — soft white wipe */
.curtain{position:fixed;inset:0;z-index:200;background:var(--paper);transform:translateY(0);pointer-events:none;display:grid;place-items:center}
.curtain svg{width:38px;opacity:0;transition:opacity .3s}
body.revealed .curtain{transform:translateY(-101vh);transition:transform .8s var(--ease) .05s}
body.covering .curtain{transform:translateY(0);transition:transform .5s var(--ease)}
body.covering .curtain svg{opacity:1}

/* buttons — flat at rest, lift on hover to reveal a hard offset shadow, snap on press (the Stitch .hover-offset behaviour, same as the cards) */
/* Buttons: colour = importance.
   Saffron (.btn.pop) = the audit, the action we want most: every link to diagnostic.html, the floating button, the audit's final send. Nothing else is saffron.
   Blue (.btn) = other primary actions on light backgrounds. Outline = secondary: .btn.ghost on light, .btn.onblue on blue or black. */

.btn{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:16px 30px;font-weight:500;display:inline-block;
  background:var(--brand);color:#FFF5E9;border:1px solid var(--brand);
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.btn:hover{transform:translate(-4px,-4px);box-shadow:4px 4px 0 0 var(--ink)}}
.btn:active{transform:scale(.96);box-shadow:none;transition-duration:.1s}
.btn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
@media(hover:hover){.btn.ghost:hover{transform:translate(-4px,-4px);box-shadow:4px 4px 0 0 var(--brand)}}
.btn.ghost:active{transform:scale(.96);box-shadow:none;transition-duration:.1s}

/* HERO — text left, with a very subtle ambient data field behind */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-inline:var(--gut);padding-top:86px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-copy{position:relative;z-index:3;max-width:min(960px,76vw);margin:0}
.kick{font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);
  display:inline-flex;align-items:center;gap:12px;margin-bottom:30px;opacity:0;animation:fade 1s var(--ease) .5s forwards}
.kick::before{content:"";width:30px;height:1px;background:var(--brand)}
h1.mega{font-family:var(--exp);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.03em;font-size:clamp(2.6rem,8vw,8.2rem);width:max-content;max-width:calc(100vw - 2*var(--gut))}
h1.mega .l{display:block;overflow:hidden}
h1.mega .l i{display:block;font-style:normal;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
h1.mega .l:nth-child(2) i{animation-delay:.12s}
h1.mega .b{color:var(--brand)}
@keyframes rise{to{transform:none}}@keyframes fade{to{opacity:1}}
.hero-sub{margin-top:36px;max-width:46ch;font-size:clamp(1.08rem,1.55vw,1.4rem);line-height:1.5;color:var(--dim);font-weight:500;opacity:0;animation:fade 1s var(--ease) .9s forwards}
.hero-sub b{color:var(--ink);font-weight:700}
.hero-cta{margin-top:46px;display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:fade 1s var(--ease) 1.05s forwards}
/* right-side line — a light touch to balance the composition without adding much text */
.hero-aside{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);z-index:3;max-width:15ch;text-align:right;
  font-size:clamp(1.1rem,1.4vw,1.5rem);line-height:1.35;font-weight:600;color:var(--ink);opacity:0;animation:fade 1s var(--ease) 1.4s forwards}
@media(max-width:1180px){.hero-aside{display:none}}
.obj-cap{position:absolute;z-index:3;right:var(--gut);bottom:12%;text-align:right;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);line-height:1.7;opacity:0;animation:fade 1s var(--ease) 1.8s forwards}
.hero-foot{position:absolute;left:var(--gut);right:var(--gut);bottom:26px;z-index:3;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)}
@media(max-width:860px){.hero-copy{max-width:100%}.obj-cap{display:none}}

/* reveals */
.reveal{opacity:0;transform:translateY(34px) scale(.985);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.cl{clip-path:inset(0 0 110% 0);transition:clip-path 1.1s var(--ease)}
.cl.in{clip-path:inset(0 0 -10% 0)}
[data-stagger]>*{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(2){transition-delay:.08s}[data-stagger].in>*:nth-child(3){transition-delay:.16s}[data-stagger].in>*:nth-child(4){transition-delay:.24s}

/* quiet / blank breathing section */
.quiet{padding-block:clamp(72px,11vw,150px);display:flex;align-items:center;justify-content:center;text-align:center}
.quiet p{font-family:var(--exp);font-weight:700;text-transform:uppercase;font-size:clamp(1.4rem,3.4vw,3rem);letter-spacing:-.02em;max-width:20ch;line-height:1.02}
.quiet p .b{color:var(--brand)}


/* big index */
.index{padding-block:clamp(70px,10vw,150px)}
.lab{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fdim)}
.index .lab{font-size:.74rem;letter-spacing:.18em;margin-bottom:26px}
.idx a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(14px,2.2vw,26px) 0;border-top:1px solid var(--fline);color:var(--fg);position:relative}
.idx a:last-child{border-bottom:1px solid var(--fline)}
.idx a .t{font-family:var(--exp);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.8rem,6.2vw,5.6rem);line-height:1;transition:transform .5s var(--ease),color .4s}
.idx a .meta{display:flex;align-items:center;gap:26px}
.idx a .d{font-family:var(--sans);font-weight:500;font-size:.9rem;color:var(--fdim);max-width:34ch;text-align:right;display:none}
.idx a .n{font-family:var(--mono);font-size:.8rem;color:var(--fdim2);transition:color .4s}
@media(hover:hover){.idx a:hover .t{transform:translateX(20px);color:var(--facc)}}@media(hover:hover){.idx a:hover .n{color:var(--facc)}}
@media(min-width:960px){.idx a .d{display:block}}

/* capability cells */
.caps{padding-block:clamp(30px,5vw,70px) clamp(70px,10vw,140px)}
.caps h3{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,5vw,3.6rem);letter-spacing:-.02em;line-height:.98;margin-bottom:46px;max-width:18ch;color:var(--fg)}
.caps h3 .b{color:var(--brand)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2vw,26px)}
.cell{background:var(--bg);padding:34px 30px 46px;border:1px solid var(--fg)}
/* Card hover — lifts up-left with a hard cobalt offset shadow (from the Stitch bento cards) */
.cgrid .cell{transition:transform .4s var(--ease),box-shadow .4s var(--ease),opacity .8s var(--ease)}
@media(hover:hover){.cgrid .cell:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 0 var(--brand)}}

/* ===== Bento — varied service cards (white / black / cobalt, mixed sizes) ===== */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,22px)}
.bento .bcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:clamp(24px,2.3vw,38px);min-height:240px;border:1px solid var(--fg);background:var(--bg);color:var(--fg);--facc:rgba(44,48,46,0.46);text-decoration:none;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
/* rule: a blue element casts a black shadow; white/black elements cast a blue shadow */
@media(hover:hover){.bento .bcard:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 0 var(--brand)}}
@media(hover:hover){.bento .bcard.blue:hover{box-shadow:8px 8px 0 0 var(--ink)}}
.bcard .blab{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--facc);display:block;margin-bottom:14px}
.bcard h4{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2.1vw,2rem);letter-spacing:-.02em;line-height:1.02;color:var(--fg)}
.bcard .bnum{position:absolute;top:16px;right:22px;font-family:var(--mono);font-size:2.1rem;color:var(--facc);opacity:.2;transition:opacity .4s var(--ease)}
@media(hover:hover){.bcard:hover .bnum{opacity:1}}
.bento .b8{grid-column:span 8}.bento .b4{grid-column:span 4}
.bcard.black{background:var(--ink);border-color:var(--ink);--fg:#FFF5E9;--facc:rgba(255,245,233,0.5)}
.bcard.blue{background:var(--brand);border-color:var(--brand);--fg:#FFF5E9;--facc:rgba(255,245,233,0.82)}
.bmedia{height:210px;overflow:hidden;background:var(--paper-2)}
.bmedia img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .7s var(--ease)}
@media(hover:hover){.bcard:hover .bmedia img{filter:grayscale(0)}}
.bcard.side{flex-direction:row;align-items:center;gap:34px}
.bcard.side .bside{flex:1}
.bcard.side .bmedia{width:42%;flex-shrink:0;height:200px}
@media(max-width:860px){.bento{grid-template-columns:1fr}.bento .b8,.bento .b4{grid-column:auto}.bcard.side{flex-direction:column;align-items:stretch}.bcard.side .bmedia{width:100%}}

/* ===== Technology — capabilities that power the work ===== */
.tech{padding-block:clamp(60px,9vw,120px)}
.tech-head{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,70px);align-items:end;margin-bottom:clamp(34px,4.5vw,58px)}
.tech-head h2{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,4.6vw,3.4rem);letter-spacing:-.02em;line-height:1;color:var(--fg);margin-top:16px}
.tech-head h2 .b{color:var(--brand)}
.tech-lead{color:var(--fdim);font-size:1.05rem;line-height:1.62;max-width:46ch}
@media(max-width:860px){.tech-head{grid-template-columns:1fr}}
/* tool stack strip — credibility, not a menu */
.techstack{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3.4vw,46px);padding-block:clamp(20px,2.4vw,30px);border-block:1px solid var(--fline)}
.techstack span{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);border:1px solid var(--fline);padding:8px 14px;transition:border-color .3s var(--ease),color .3s var(--ease)}
@media(hover:hover){.techstack span:hover{border-color:var(--brand);color:var(--brand)}}
/* Technology methodology — how we extend, connect and build (editorial, not service cards) */
.mhead{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,4.6vw,3.4rem);letter-spacing:-.02em;line-height:1;color:var(--fg);max-width:18ch;margin:14px 0 clamp(40px,6vw,80px)}
.mhead .b{color:var(--brand)}
/* ===== Technology micro-demo gallery — small looping product UIs ===== */
@property --hp{syntax:'<integer>';inherits:false;initial-value:72}
@property --tw{syntax:'<integer>';inherits:false;initial-value:0}
@property --pg{syntax:'<integer>';inherits:false;initial-value:0}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(28px,3.4vw,48px)}
@media(max-width:900px){.demo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.demo-grid{grid-template-columns:1fr}}
.demo{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#FFF5E9;
  box-shadow:0 1px 2px rgba(44,48,46,0.05),0 22px 44px -28px rgba(44,48,46,0.28);font-family:var(--sans);color:#2C302E}
.demo.dark{background:#2C302E;border-color:#2C302E;color:rgba(59,77,255,0.09)}
.demo.blue{background:var(--brand);border-color:#3B4DFF;color:#FFF5E9}
/* prominent pillar title band — every card carries its pillar name as part of the design */
.demo .pcap{position:absolute;left:0;right:0;bottom:0;z-index:9;height:46px;display:flex;align-items:center;justify-content:flex-start;gap:9px;padding:0 16px;border-top:1px solid var(--line)}
.demo .pcap .pnum{font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.04em;color:var(--dim2)}
.demo .pcap b{font-family:var(--sans);font-weight:800;font-size:1rem;letter-spacing:-.015em;color:#2C302E}
.demo.dark .pcap{border-top-color:rgba(255,245,233,0.1)}
.demo.dark .pcap b{color:#FFF5E9}
.demo.dark .pcap .pnum{color:rgba(255,245,233,0.4)}
.demo.blue .pcap{border-top-color:rgba(255,245,233,0.22)}
.demo.blue .pcap b{color:#FFF5E9}
.demo.blue .pcap .pnum{color:rgba(255,245,233,0.62)}
/* consistent chrome — app chip (top-left) + status chip (top-right) */
.demo .capp{position:absolute;top:12px;left:12px;z-index:7;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:4px 9px;border-radius:100px;color:rgba(44,48,46,0.73);background:rgba(44,48,46,0.04);border:1px solid var(--line)}
.demo.dark .capp{color:rgba(59,77,255,0.26);background:rgba(59,77,255,0.07);border:1px solid rgba(59,77,255,0.14)}
.demo.blue .capp{color:#FFF5E9;background:rgba(255,245,233,0.14);border:1px solid rgba(255,245,233,0.32)}
.demo .capp .dot{width:5px;height:5px;border-radius:50%;flex:none;background:currentColor}
.demo .cstat{position:absolute;top:12px;right:12px;z-index:7;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:4px 9px;border-radius:100px;white-space:nowrap}
.demo.blue .cstat{color:#FFF5E9;background:rgba(255,245,233,0.14);border:1px solid rgba(255,245,233,0.32)}
.demo .cstat .dot{width:5px;height:5px;border-radius:50%;flex:none;background:currentColor}
@media(prefers-reduced-motion:reduce){.demo *{animation:none!important}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
/* Homepage technology teaser — the whole card links through to the Technology page */
#technology .demo{cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
@media(hover:hover){#technology .demo:hover{transform:translateY(-6px)}}
#technology .cardlink{position:absolute;inset:0;z-index:11;border-radius:inherit}

/* 1 — BIM TECHNOLOGY (white · Foundation) — missing data detected, properties populate, standards validate */
.bim .capp .dot{background:var(--brand)}
.bim .cstat{color:rgba(44,48,46,0.73);background:rgba(44,48,46,0.04);border:1px solid var(--line)}
.bim .bimwrap{position:absolute;top:42px;left:16px;right:16px;bottom:50px;display:flex;flex-direction:column;overflow:hidden}
.bim .bimhead{display:flex;align-items:center;gap:8px;font-size:.62rem;font-weight:700;color:#2C302E;padding-bottom:7px;border-bottom:1px solid var(--line);margin-bottom:8px}
.bim .bimhead::before{content:"";width:15px;height:15px;border-radius:4px;background:linear-gradient(135deg,var(--lit),var(--brand));flex:none}
.bim .bimstat{margin-left:auto;position:relative;min-width:64px;height:11px;font-family:var(--mono);font-size:.5rem;letter-spacing:.03em;text-transform:uppercase;font-weight:500}
.bim .bimstat em{position:absolute;right:0;top:0;font-style:normal;white-space:nowrap}
.bim .bimstat .miss{color:#E0A458;animation:bimmiss 7s infinite}
.bim .bimstat .ok{color:#419D78;opacity:0;animation:bimok 7s infinite}
@keyframes bimmiss{0%,44%{opacity:1}52%,100%{opacity:0}}
@keyframes bimok{0%,46%{opacity:0}54%,94%{opacity:1}99%,100%{opacity:0}}
.bim .bimrows{position:relative;display:flex;flex-direction:column;gap:6px}
.bim .bimscan{position:absolute;left:-4px;right:-4px;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:0;z-index:3;animation:bimscan 7s infinite}
@keyframes bimscan{0%,40%{top:0;opacity:0}45%{opacity:.85}56%{top:100%;opacity:.85}60%,100%{opacity:0}}
.bim .bimrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.6rem;color:rgba(44,48,46,0.52)}
.bim .bimrow .val{position:relative;min-width:96px;height:.8rem;text-align:right}
.bim .bimrow .val em{position:absolute;right:0;top:0;font-style:normal;color:#E0A458;animation:vmiss 7s infinite}
.bim .bimrow .val b{position:absolute;right:0;top:0;font-weight:600;color:#2C302E;white-space:nowrap;opacity:0;animation:vfill 7s infinite}
.bim .bimrow.r1 .val em,.bim .bimrow.r1 .val b{animation-delay:.2s}
.bim .bimrow.r2 .val em,.bim .bimrow.r2 .val b{animation-delay:.55s}
.bim .bimrow.r3 .val em,.bim .bimrow.r3 .val b{animation-delay:.9s}
.bim .bimrow.r4 .val em,.bim .bimrow.r4 .val b{animation-delay:1.25s}
@keyframes vmiss{0%,6%{opacity:1}16%,100%{opacity:0}}
@keyframes vfill{0%,8%{opacity:0}18%{opacity:1}93%{opacity:1}98%,100%{opacity:0}}
.bim .bimvalid{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;color:#419D78;background:rgba(65,157,120,0.09);border:1px solid rgba(65,157,120,0.28);border-radius:100px;padding:5px 11px;opacity:0;transform:scale(.94);animation:bimvf 7s infinite}
.bim .bimvalid i{width:13px;height:13px;flex:none;border-radius:50%;background:#419D78;display:inline-flex;align-items:center;justify-content:center;color:#FFF5E9;font-style:normal;font-size:.5rem}
@keyframes bimvf{0%,56%{opacity:0;transform:scale(.94)}64%{opacity:1;transform:none}92%{opacity:1}97%,100%{opacity:0;transform:scale(.94)}}

/* 2 — COMPUTATIONAL DESIGN (white · Foundation) — a tower's form adapts as parameters change */
.comp .capp .dot{background:var(--brand)}
.comp .tower{position:absolute;left:0;right:0;top:9%;margin:auto;width:56%;height:56%}
.comp .plate{fill:rgba(59,77,255,0.06);stroke:var(--brand);stroke-width:1.5;transform-box:fill-box;transform-origin:50% 50%;animation:twist 7s infinite}
@keyframes twist{0%,20%{transform:rotate(0deg)}50%{transform:rotate(calc(var(--i) * 5deg))}78%{transform:rotate(calc(var(--i) * 5deg))}96%,100%{transform:rotate(0deg)}}
.comp .param{position:absolute;left:16px;right:16px;bottom:60px;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.55rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(44,48,46,0.59)}
.comp .slider{position:relative;flex:1;height:5px;border-radius:100px;background:rgba(44,48,46,0.1)}
.comp .slider i{position:absolute;top:50%;left:8%;width:13px;height:13px;border-radius:50%;background:#FFF5E9;border:2px solid var(--brand);box-shadow:0 1px 3px rgba(44,48,46,0.15);transform:translate(-50%,-50%);animation:slide 7s infinite}
@keyframes slide{0%,20%{left:8%}50%{left:88%}78%{left:88%}96%,100%{left:8%}}
.comp .pv{color:#2C302E;font-weight:600;min-width:26px;text-align:right;counter-reset:tw var(--tw);animation:twn 7s infinite}
.comp .pv::after{content:counter(tw) "°"}
@keyframes twn{0%,20%{--tw:0}50%{--tw:40}78%{--tw:40}96%,100%{--tw:0}}
.comp .syncchip{position:absolute;top:12px;right:12px;z-index:6;font-family:var(--mono);font-size:.54rem;letter-spacing:.05em;text-transform:uppercase;color:#419D78;background:rgba(65,157,120,0.1);border:1px solid rgba(65,157,120,0.28);border-radius:100px;padding:4px 9px;opacity:0;animation:sync 7s infinite}
@keyframes sync{0%,52%{opacity:0}62%{opacity:1}88%{opacity:1}96%,100%{opacity:0}}

/* 3 — CUSTOM TOOLS (black · Engineering) — one click runs an operation that would take hours */
.plug .capp .dot{background:rgba(59,77,255,0.56)}
.plug .cstat{color:rgba(59,77,255,0.71);background:rgba(255,245,233,0.05);border:1px solid rgba(255,245,233,0.1)}
.plug .plugbar{position:absolute;top:44px;left:14px;right:14px;display:flex;justify-content:center}
.plug .plugbtn{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:.62rem;font-weight:600;color:rgba(59,77,255,0.26);background:#2C302E;border:1px solid #3B4DFF;border-radius:8px;padding:7px 12px;animation:plugpress 7s infinite}
.plug .plugbtn i{font-style:normal}
@keyframes plugpress{0%,12%{transform:none;background:#2C302E;border-color:#3B4DFF}16%{transform:scale(.95);background:#3B4DFF;border-color:var(--lit)}24%,100%{transform:none;background:#2C302E;border-color:#3B4DFF}}
.plug .plugbtn::after{content:"";position:absolute;inset:-1px;border-radius:8px;border:1.5px solid var(--lit);opacity:0;animation:plugripple 7s infinite}
@keyframes plugripple{0%,13%{opacity:0;transform:scale(1)}17%{opacity:.85;transform:scale(1)}30%{opacity:0;transform:scale(1.35)}100%{opacity:0}}
.plug .pluggrid{position:absolute;left:16px;right:16px;top:84px;bottom:76px;display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.plug .pluggrid i{border-radius:3px;background:#2C302E;border:1px solid #2C302E;animation:plugcell 7s infinite;animation-delay:calc(var(--i) * .045s + .3s)}
@keyframes plugcell{0%,10%{background:#2C302E;border-color:#2C302E}20%{background:rgba(59,77,255,0.16);border-color:var(--lit)}34%,90%{background:rgba(65,157,120,0.2);border-color:rgba(65,157,120,0.55)}96%,100%{background:#2C302E;border-color:#2C302E}}
.plug .plugfoot{position:absolute;left:16px;right:16px;bottom:58px;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:.55rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(44,48,46,0.49)}
.plug .plugcount{color:rgba(59,77,255,0.26);font-weight:600;counter-reset:pg var(--pg);animation:plugn 7s infinite}
.plug .plugcount::after{content:counter(pg) " rooms tagged"}
@keyframes plugn{0%,14%{--pg:0}45%{--pg:248}90%{--pg:248}100%{--pg:0}}
.plug .plugtime{color:rgba(65,157,120,0.78);background:rgba(65,157,120,0.1);border:1px solid rgba(65,157,120,0.3);border-radius:100px;padding:3px 9px;opacity:0;animation:plugt 7s infinite}
@keyframes plugt{0%,44%{opacity:0}54%{opacity:1}90%{opacity:1}96%,100%{opacity:0}}

/* 4 — AUTOMATION (white · Foundation) — repetitive project tasks orchestrate themselves */
.auto .capp .dot{background:var(--brand)}
.auto .cstat{color:rgba(44,48,46,0.73);background:rgba(44,48,46,0.04);border:1px solid var(--line)}
.auto .autobar{position:absolute;top:44px;left:16px;right:16px;height:5px;border-radius:100px;background:rgba(59,77,255,0.17);overflow:hidden}
.auto .autobar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lit),var(--brand));border-radius:100px;animation:autobar 7s infinite}
@keyframes autobar{0%,10%{width:0}68%{width:100%}90%{width:100%}96%,100%{width:0}}
.auto .autolist{position:absolute;top:64px;left:16px;right:16px;display:flex;flex-direction:column;gap:8px}
.auto .autorow{display:flex;align-items:center;gap:9px;font-size:.62rem;color:rgba(44,48,46,0.74)}
.auto .autorow i{width:15px;height:15px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.5rem;font-style:normal;line-height:1;color:transparent;background:rgba(44,48,46,0.1);border:1px solid rgba(44,48,46,0.18)}
.auto .t1 i{animation:autodo1 7s infinite}
.auto .t2 i{animation:autodo2 7s infinite}
.auto .t3 i{animation:autodo3 7s infinite}
.auto .t4 i{animation:autodo4 7s infinite}
@keyframes autodo1{0%,16%{color:transparent;background:rgba(44,48,46,0.1);border-color:rgba(44,48,46,0.18)}24%,92%{color:#FFF5E9;background:#419D78;border-color:#419D78}97%,100%{color:transparent;background:rgba(44,48,46,0.1);border-color:rgba(44,48,46,0.18)}}
@keyframes autodo2{0%,26%{color:transparent;background:rgba(44,48,46,0.1);border-color:rgba(44,48,46,0.18)}34%,92%{color:#FFF5E9;background:#419D78;border-color:#419D78}97%,100%{color:transparent;background:rgba(44,48,46,0.1);border-color:rgba(44,48,46,0.18)}}
@keyframes autodo3{0%,36%{color:transparent;background:rgba(44,48,46,0.1);border-color:rgba(44,48,46,0.18)}44%,92%{color:#FFF5E9;background:#419D78;border-color:#419D78}97%,100%{color:transparent;background:rgba(44,48,46,0.1);border-color:rgba(44,48,46,0.18)}}
@keyframes autodo4{0%,46%{color:transparent;background:rgba(44,48,46,0.1);border-color:rgba(44,48,46,0.18)}54%,92%{color:#FFF5E9;background:#419D78;border-color:#419D78}97%,100%{color:transparent;background:rgba(44,48,46,0.1);border-color:rgba(44,48,46,0.18)}}
.auto .autofoot{position:absolute;left:16px;right:16px;bottom:58px;display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.55rem;letter-spacing:.05em;text-transform:uppercase;color:#419D78;opacity:0;animation:autofc 7s infinite}
.auto .autofoot i{width:14px;height:14px;flex:none;border-radius:50%;background:#419D78;color:#FFF5E9;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:.5rem}
@keyframes autofc{0%,58%{opacity:0}66%{opacity:1}90%{opacity:1}96%,100%{opacity:0}}

/* 5 — MCP (black · Engineering) — a prompt to Claude; the model populates through Revit MCP */
.mcp .capp .dot{background:var(--brand)}
.mcp .cstat{color:rgba(59,77,255,0.56);background:rgba(59,77,255,0.07);border:1px solid rgba(59,77,255,0.14)}
.mcp .cstat .dot{animation:pulse 1.5s infinite}
.mcp .mcpchat{position:absolute;top:44px;left:16px;right:16px;bottom:52px;display:flex;flex-direction:column;overflow:hidden}
.mcp .mcpask{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.6rem;color:rgba(59,77,255,0.26);background:#2C302E;border:1px solid #3B4DFF;border-radius:8px;padding:8px 11px}
.mcp .mcpask .pr{color:var(--lit);font-weight:700;flex:none}
.mcp .mcpask .txt{overflow:hidden;white-space:nowrap;max-width:0;animation:mcptype 7s infinite}
.mcp .mcpask .caret{width:1px;height:11px;flex:none;background:rgba(59,77,255,0.56);animation:blink 1s steps(1) infinite}
@keyframes mcptype{0%{max-width:0}15%{max-width:100%}92%{max-width:100%}97%,100%{max-width:0}}
@keyframes blink{50%{opacity:0}}
.mcp .mcpwork{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.mcp .mrow{display:flex;align-items:center;gap:9px;font-size:.64rem;color:rgba(59,77,255,0.71);opacity:0;transform:translateY(5px);animation:mrowin 7s infinite}
.mcp .mrow .ico{width:17px;height:17px;flex:none;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:.55rem;color:#2C302E;background:#419D78}
.mcp .mrow b{margin-left:auto;font-family:var(--mono);font-weight:600;color:rgba(59,77,255,0.09)}
.mcp .mrow b span{font-weight:400;color:rgba(44,48,46,0.62);margin-left:5px}
.mcp .w1{animation-delay:1.35s}
.mcp .w2{animation-delay:1.95s}
.mcp .w3{animation-delay:2.55s}
@keyframes mrowin{0%,18%{opacity:0;transform:translateY(5px)}26%{opacity:1;transform:none}92%{opacity:1}97%,100%{opacity:0;transform:translateY(5px)}}

/* 6 — APPLIED AI (blue · Intelligence) — AI reviews a model, the quality score climbs to passed */
.appai .capp .dot{background:#FFF5E9}
.appai .cstat .dot{background:#FFF5E9;animation:pulse 1.5s infinite}
.appai .rvbody{position:absolute;top:44px;left:14px;right:14px;bottom:94px;display:flex;gap:11px}
.appai .rvview{position:relative;flex:1;border:1px solid rgba(255,245,233,0.22);border-radius:9px;background:rgba(44,48,46,0.24);overflow:hidden}
.appai .rvmodel{position:absolute;inset:0;margin:auto;width:82%;height:auto}
.appai .rvmodel path{stroke:rgba(59,77,255,0.31)!important;stroke-dasharray:1;stroke-dashoffset:1;animation:rvdraw 7s infinite}
.appai .rvfloors path:nth-child(1){animation-delay:.55s}
.appai .rvfloors path:nth-child(2){animation-delay:.85s}
.appai .rvfloors path:nth-child(3){animation-delay:1.15s}
.appai .rvfloors path:nth-child(4){animation-delay:1.45s}
.appai .rvfloors path:nth-child(5){animation-delay:1.75s}
.appai .rvcols path{animation-delay:1.95s}
@keyframes rvdraw{0%,7%{stroke-dashoffset:1;opacity:.2}34%{stroke-dashoffset:0;opacity:1}92%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:1;opacity:.2}}
.appai .rvscan{position:absolute;left:0;right:0;top:0;height:16px;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(255,245,233,0.28),transparent);
  border-bottom:1.5px solid rgba(255,245,233,0.95);box-shadow:0 0 12px 1px rgba(255,245,233,0.4);animation:rvscan 7s infinite}
@keyframes rvscan{0%,6%{top:-16px;opacity:0}10%{opacity:1}40%{top:100%;opacity:1}45%,100%{top:100%;opacity:0}}
.appai .rvchecks{flex:0 0 43%;display:flex;flex-direction:column;justify-content:center;gap:6px}
.appai .rvchk{display:flex;align-items:center;gap:7px;font-size:.58rem;color:rgba(255,245,233,0.6);background:rgba(255,245,233,0.08);border:1px solid rgba(255,245,233,0.16);border-radius:7px;padding:5px 8px;animation:rvrow 7s infinite}
.appai .rvchk i{width:14px;height:14px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:.5rem;font-style:normal;line-height:1;border-radius:50%;background:rgba(255,245,233,0.16);color:transparent;animation:rvtick 7s infinite}
.appai .rvchk.c1,.appai .rvchk.c1 i{animation-delay:0s}
.appai .rvchk.c2,.appai .rvchk.c2 i{animation-delay:.5s}
.appai .rvchk.c3,.appai .rvchk.c3 i{animation-delay:1s}
.appai .rvchk.c4,.appai .rvchk.c4 i{animation-delay:1.5s}
@keyframes rvtick{0%,30%{color:transparent;background:rgba(255,245,233,0.16)}40%,93%{color:var(--brand);background:rgba(65,157,120,0.07)}97%,100%{color:transparent;background:rgba(255,245,233,0.16)}}
@keyframes rvrow{0%,30%{color:rgba(255,245,233,0.6);border-color:rgba(255,245,233,0.16)}40%,93%{color:#FFF5E9;border-color:rgba(255,245,233,0.4)}97%,100%{color:rgba(255,245,233,0.6);border-color:rgba(255,245,233,0.16)}}
.appai .rvfoot{position:absolute;bottom:54px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between}
.appai .rvscore{display:flex;align-items:baseline;gap:6px}
.appai .rvpct{font-size:1.35rem;font-weight:800;color:#FFF5E9;counter-reset:hp var(--hp);animation:hp 7s infinite}
.appai .rvpct::after{content:counter(hp) "%"}
.appai .rvscore span{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,245,233,0.62)}
@keyframes hp{0%,18%{--hp:72}30%{--hp:84}44%{--hp:84}58%{--hp:98}90%{--hp:98}100%{--hp:72}}
.appai .rvpass{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:#FFF5E9;background:rgba(255,245,233,0.16);border:1px solid rgba(255,245,233,0.42);border-radius:100px;padding:5px 11px;opacity:0;transform:scale(.9);animation:pass 7s infinite}
@keyframes pass{0%,66%{opacity:0;transform:scale(.9)}74%{opacity:1;transform:none}92%{opacity:1}96%,100%{opacity:0}}

/* ===== Technology scroll story — one pillar at a time, sticky morphing stage ===== */
.tstory-head{margin-bottom:clamp(10px,2vw,26px)}
.tscroll{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5vw,88px);align-items:start}
.tsteps{display:flex;flex-direction:column}
.tstep{min-height:86vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(13px,1.5vw,19px);opacity:.28;transition:opacity .45s var(--ease)}
.tstep.active{opacity:1}
.tstep .tnum{font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;color:var(--brand)}
.tstep h3{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.9rem,3.6vw,3.1rem);letter-spacing:-.02em;line-height:1.02;color:var(--fg)}
.tstep p{color:var(--fdim);font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.62;max-width:40ch}
.tkeys{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:2px 0 0}
.tkeys li{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--fdim);border:1px solid var(--fline);border-radius:100px;padding:5px 11px}
.tstage{position:sticky;top:11vh;height:78vh;display:grid;place-items:center}
.tpanel{grid-area:1/1;width:100%;height:100%;display:grid;place-items:center;opacity:0;transform:translateY(26px) scale(.985);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.tpanel.on{opacity:1;transform:none;pointer-events:auto}
.tpanel .pcap{display:none}
.tpanel .demo{width:400px;flex:none;transform:scale(1.34);transform-origin:center;box-shadow:0 2px 6px rgba(44,48,46,0.06),0 44px 84px -44px rgba(44,48,46,0.42)}
@media(max-width:1180px){.tpanel .demo{transform:scale(1.12)}}
@media(max-width:980px){.tscroll{gap:34px}.tpanel .demo{transform:scale(.98)}}
@media(max-width:820px){
  .tscroll{grid-template-columns:1fr;gap:0}
  .tstage{display:none}
  .tstep{min-height:auto;opacity:1;padding:clamp(28px,7vw,52px) 0;gap:16px}
  .tstep .tpanel{opacity:1;transform:none;pointer-events:auto;width:100%;margin-top:6px}
  .tstep .tpanel .demo{width:100%;max-width:430px;transform:none;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){.tpanel{transition:opacity .2s}}
/* "how it works": three cards; the MIRALTO mark builds up slab by slab from step 1 to 3 */
.approach{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.astep{background:#FFF5E9;border:1px solid var(--line);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column}
.astep .amark{width:clamp(48px,4.4vw,60px);height:auto;margin-bottom:clamp(28px,3.4vw,48px)}
.astep .amark path{fill:rgba(59,77,255,0.23);transition:fill .5s var(--ease)}
.astep.in[data-l="1"] .amark path:nth-last-child(-n+3),
.astep.in[data-l="2"] .amark path:nth-last-child(-n+6),
.astep.in[data-l="3"] .amark path{fill:var(--brand)}
.astep .amark path:nth-last-child(1){transition-delay:.25s}.astep .amark path:nth-last-child(2){transition-delay:.33s}
.astep .amark path:nth-last-child(3){transition-delay:.41s}.astep .amark path:nth-last-child(4){transition-delay:.49s}
.astep .amark path:nth-last-child(5){transition-delay:.57s}.astep .amark path:nth-last-child(6){transition-delay:.65s}
.astep .amark path:nth-last-child(7){transition-delay:.73s}.astep .amark path:nth-last-child(8){transition-delay:.81s}
.astep .anum{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.astep h3{font-family:var(--sans);font-weight:700;text-transform:none;font-size:clamp(1.25rem,1.7vw,1.5rem);letter-spacing:-.015em;line-height:1.2;margin:10px 0 10px;color:var(--ink)}
.astep p{color:var(--dim);font-size:1rem;line-height:1.55;max-width:34ch}
@media(max-width:760px){
  .approach{grid-template-columns:1fr}
  .astep{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:start}
  .astep .amark{grid-row:1/4;width:44px;margin:4px 0 0}
  .astep h3{margin:6px 0 6px}
}
@media(prefers-reduced-motion:reduce){.astep .amark path{transition:none}}

/* Technology teaser — an energetic capability marquee that invites the click */
.techmarquee{margin-top:clamp(30px,4vw,54px);overflow:hidden;border-block:1px solid var(--fline);padding-block:clamp(16px,2vw,26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#2C302E 7%,#2C302E 93%,transparent);mask-image:linear-gradient(90deg,transparent,#2C302E 7%,#2C302E 93%,transparent)}
.tm-track{display:flex;align-items:center;width:max-content;animation:tmscroll 38s linear infinite}
@media(hover:hover){.techmarquee:hover .tm-track{animation-play-state:paused}}
.tm-track .w{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.7rem);letter-spacing:-.01em;line-height:1;white-space:nowrap;color:var(--fg);padding:0 .28em}
.tm-track .w.ai{color:var(--brand)}
.tm-track .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--fdim2)}
@keyframes tmscroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tm-track{animation:none}}
.tech-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,60px);margin-top:clamp(24px,3vw,40px);flex-wrap:wrap}
.tech-foot p{max-width:52ch;color:var(--fdim);font-size:1.02rem;line-height:1.6}
.tech-foot .morelink{margin-top:0;flex:none}

/* Project grid — 3 images per row, minimal info, click through to the Work page */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.pcard{display:block;color:inherit}
.pcard-img{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--fline);background:var(--paper-2)}
.pcard-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .8s var(--ease),filter .6s var(--ease)}
@media(hover:hover){.pcard:hover .pcard-img img{filter:grayscale(0);transform:scale(1.05)}}
.pcard-meta{padding-top:16px}
.pcard .plab{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fdim2);display:block}
.pcard .pname{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,1.4vw,1.28rem);letter-spacing:-.01em;line-height:1.05;margin:8px 0 6px;color:var(--fg);transition:color .3s var(--ease)}
@media(hover:hover){.pcard:hover .pname{color:var(--brand)}}
.pcard .pscope{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fdim)}
@media(max-width:820px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}}

/* teaser "read more" link — home sections invite you to the fuller pages */
.morelink{display:inline-flex;align-items:center;gap:11px;margin-top:clamp(26px,3vw,42px);font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);border-bottom:2px solid var(--brand);padding-bottom:7px;transition:gap .3s var(--ease)}
.morelink span{transition:transform .3s var(--ease)}
@media(hover:hover){.morelink:hover span{transform:translateX(5px)}}

/* three capability cards — same block + hover-lift + shadow rule as the other cards */
/* Service-card colour language: white = Foundation, black = Engineering, blue = Intelligence (AI only).
   Accents stay neutral grey so cobalt reads as "AI" wherever it appears on the site. */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
/* Flip cards — hover reveals a spec-sheet back (tap on touch); front design unchanged. */
.tcard{position:relative;min-height:300px;--facc:rgba(44,48,46,0.46);--cardbg:var(--bg);--cardbd:var(--fg);perspective:1700px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
@media(hover:hover){.tcard:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 0 var(--brand)}}
.tcard-inner{position:relative;display:grid;min-height:inherit;transform-style:preserve-3d;transition:transform .62s var(--ease);cursor:pointer}
.tcard.flipped .tcard-inner{transform:rotateY(180deg)}
@media(hover:hover){.tcard:hover .tcard-inner{transform:rotateY(180deg)}}
.tcard-face{grid-area:1/1;display:flex;flex-direction:column;gap:14px;padding:clamp(26px,2.4vw,38px);min-height:300px;background:var(--cardbg);border:1px solid var(--cardbd);color:var(--fg);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tcard-back{transform:rotateY(180deg)}
.tcard .tphase{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--facc)}
.tcard h4{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.01em;line-height:1.06;color:var(--fg)}
.tcard-front p{color:var(--fdim);font-size:.97rem;line-height:1.56;flex:1}
.tcard-back .tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.tcard-back .tlist li{position:relative;padding-left:23px;font-size:.92rem;line-height:1.34;color:var(--fdim)}
.tcard-back .tlist li::before{content:"✓";position:absolute;left:0;top:0;font-size:.82rem;color:var(--fg)}
.tcard-back .tplat{padding-top:14px;border-top:1px solid var(--fline)}
.tcard-back .tplat p{margin-top:7px;font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--fg)}
.tcard.black{--fg:#FFF5E9;--fdim:rgba(255,245,233,0.74);--facc:rgba(255,245,233,0.5);--fline:rgba(255,245,233,0.18);--cardbg:var(--ink);--cardbd:var(--ink)}
.tcard.blue{--fg:#FFF5E9;--fdim:rgba(255,245,233,0.84);--facc:rgba(255,245,233,0.8);--fline:rgba(255,245,233,0.28);--cardbg:var(--brand);--cardbd:var(--brand)}
@media(hover:hover){.tcard.blue:hover{box-shadow:8px 8px 0 0 var(--ink)}}
@media(prefers-reduced-motion:reduce){.tcard-inner{transition:none}}
.tflip-hint{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fdim);opacity:.7;margin-top:10px}
.tflip-hint .tap{display:none}
/* Intelligence finale — the AI card spans full width, ending the progression */
.tcard.wide{grid-column:1 / -1;min-height:auto;gap:16px}
.tcard.wide h4{font-size:clamp(1.5rem,2.6vw,2.3rem)}
.tcard.wide p{max-width:66ch}
/* progression caption above the cards */
.tprog{display:flex;align-items:center;gap:13px;margin-bottom:clamp(22px,2.6vw,36px);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fdim)}
.tprog i{color:var(--fdim2);font-style:normal}
.tprog .ai{color:var(--brand)}
@media(max-width:860px){.tcards{grid-template-columns:1fr}}

/* ===== Project rows — small carousel image + info ===== */
.prow{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:clamp(24px,4vw,60px);align-items:center;padding-block:clamp(28px,3.2vw,48px);border-top:1px solid var(--fline)}
.prow:first-child{border-top:none}
.pimg{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--fline);background:var(--paper-2)}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(1);transition:opacity 1.2s var(--ease),filter .6s var(--ease)}
.pimg img.on{opacity:1}
@media(hover:hover){.prow:hover .pimg img.on{filter:grayscale(0)}}
.pimg .pdots{position:absolute;left:14px;bottom:12px;display:flex;gap:6px;z-index:2}
.pimg .pdots i{width:16px;height:3px;background:rgba(255,245,233,0.55);transition:background .3s}
.pimg .pdots i.on{background:#FFF5E9}
.pinfo .plab{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fdim);display:block;margin-bottom:12px}
.pinfo .pname{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2.3vw,2.1rem);letter-spacing:-.02em;line-height:1;color:var(--fg)}
.pmeta{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin-top:26px;max-width:520px}
.pmeta .k{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fdim2);display:block;margin-bottom:6px}
.pmeta .v{font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--fg)}
.pinfo .pdesc{margin-top:16px;max-width:48ch;color:var(--fdim);font-size:1rem;line-height:1.6}
@media(max-width:760px){.prow{grid-template-columns:1fr;gap:18px}}
.cell .cn{font-family:var(--mono);font-size:.72rem;color:var(--facc)}
.cell h4{font-family:var(--exp);font-weight:700;text-transform:uppercase;font-size:1.18rem;margin-top:18px;letter-spacing:-.01em;color:var(--fg)}
.cell p{color:var(--fdim);margin-top:12px;font-size:.95rem}

/* WORK — per project, secondary */
.work{padding-block:clamp(60px,8vw,120px);border-top:1px solid var(--fline)}
.work .lab{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fdim)}
/* matches the Technology section head — same scale, same blue tail */
.work h3{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,4.6vw,3.4rem);letter-spacing:-.02em;line-height:1;margin-top:16px;color:var(--fg)}
.work h3 .b{color:var(--brand)}
.work .intro{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,70px);align-items:end;margin-bottom:clamp(34px,4.5vw,58px)}
.work .intro .note{max-width:46ch;color:var(--fdim);font-size:1.05rem;line-height:1.62}
@media(max-width:860px){.work .intro{grid-template-columns:1fr}}
.pmedia{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--paper-2)}
.pmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);will-change:transform;transition:opacity 1.2s var(--ease)}
.pmedia img.on{opacity:1}
.pmedia .pdots{position:absolute;left:16px;bottom:14px;display:flex;gap:6px;z-index:2}
.pmedia .pdots i{width:18px;height:3px;background:rgba(255,245,233,0.5);transition:background .3s}
.pmedia .pdots i.on{background:#FFF5E9}
.pcap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px}
.pcap .pt{font-family:var(--exp);font-weight:700;text-transform:uppercase;font-size:clamp(1rem,1.6vw,1.3rem);letter-spacing:-.01em;color:var(--fg)}
.pcap .pl{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fdim)}
.disc{margin-top:30px;font-family:var(--mono);font-size:.64rem;color:var(--fdim2);letter-spacing:.04em;max-width:64ch;line-height:1.7}

/* interior hero */
.phero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:86px;padding-bottom:clamp(40px,7vh,80px)}
.phero .kick{margin-bottom:22px}
.phero h1{font-family:var(--exp);font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:-.02em;font-size:clamp(2.4rem,8vw,7.5rem)}
.phero h1 .b{color:var(--brand)}
.phero .lead{margin-top:28px;max-width:48ch;font-size:clamp(1.05rem,1.5vw,1.32rem);color:var(--dim);font-weight:500}

.split{display:grid;grid-template-columns:minmax(200px,270px) 1fr;gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}.portrait{max-width:300px}}
.stack>*+*{margin-top:1.2em}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--dim);font-weight:500}
.muted{color:var(--dim);font-weight:500}

.portrait{position:relative}
.portrait img{width:100%;border-radius:4px;filter:grayscale(1) contrast(1.03);transition:filter .6s var(--ease)}
@media(hover:hover){.portrait:hover img{filter:grayscale(0)}}
.portrait .tick{position:absolute;left:0;bottom:-24px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}

/* ===== Studio — office information strip + founder ===== */
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--fline);border-bottom:1px solid var(--fline)}
.facts>div{padding:clamp(20px,2.2vw,30px) clamp(14px,1.8vw,26px);border-left:1px solid var(--fline)}
.facts>div:first-child{border-left:0;padding-left:0}
.facts .k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)}
.facts .v{display:block;margin-top:11px;font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(.86rem,1.25vw,1.06rem);letter-spacing:-.01em;line-height:1.2;color:var(--fg)}
.facts .v a{display:block;color:var(--fg);position:relative;width:fit-content;transition:color .3s var(--ease)}
.facts .v a+a{margin-top:7px}
.facts .v a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
@media(hover:hover){.facts .v a:hover{color:var(--brand)}}
@media(hover:hover){.facts .v a:hover::after{transform:scaleX(1)}}
@media(max-width:860px){.facts{grid-template-columns:repeat(2,1fr)}.facts>div:nth-child(odd){border-left:0;padding-left:0}}
@media(max-width:520px){.facts{grid-template-columns:1fr}.facts>div{border-left:0;padding-left:0;border-top:1px solid var(--fline)}.facts>div:first-child{border-top:0}}

/* founder — supporting information, so the portrait stays small */
.founder{display:grid;grid-template-columns:minmax(0,180px) minmax(0,74ch);gap:clamp(28px,4.5vw,70px);align-items:start}
@media(max-width:720px){.founder{grid-template-columns:1fr;gap:44px}.founder .portrait{max-width:180px}}

/* Studio — voices (testimonials). Placeholder avatars show initials until real photos are dropped in. */
.voices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(24px,3vw,44px)}
@media(max-width:900px){.voices-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.voices-grid{grid-template-columns:1fr}}
.voice{display:flex;flex-direction:column;gap:clamp(15px,1.7vw,22px);padding:clamp(22px,2.1vw,32px);border:1px solid var(--fline);border-radius:5px;background:var(--bg)}
.voice::before{content:"\201C";font-family:var(--exp);font-weight:800;font-size:2.2rem;line-height:.42;color:var(--facc);opacity:.42}
.voice p{margin:0;font-size:1rem;line-height:1.56;color:var(--fg);flex:1}
.voice-by{display:flex;align-items:center;gap:13px;margin:0}
.voice-av{width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--fdim);background:var(--paper-2)}
.voice-av img{width:100%;height:100%;object-fit:cover}
.voice-id b{display:block;font-size:.92rem;font-weight:700;color:var(--fg);line-height:1.25}
.voice-id em{font-family:var(--mono);font-style:normal;font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--fdim2)}

/* CTA */
/* Closing statement — the final line of each chapter, sitting on the cobalt footer. */
.cta{padding:clamp(78px,11vw,160px) 0 clamp(38px,4.5vw,64px);text-align:center;border-top:1px solid var(--fline)}
.cta h2{font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(2.5rem,12.4vw,12.4rem);line-height:.9;letter-spacing:-.03em;color:var(--fg)}
.cta h2 span{display:block}
.cta h2 .b{color:var(--facc)}
.cta h2[data-stagger].in>*:nth-child(2){transition-delay:.16s}
.cta a.mail{position:relative;display:inline-block;margin-top:clamp(32px,4.5vw,58px);font-family:var(--mono);font-size:clamp(.82rem,1.2vw,.98rem);letter-spacing:.14em;text-transform:uppercase;color:var(--fg);padding-bottom:9px}
.cta a.mail::before,.cta a.mail::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px}
.cta a.mail::before{background:var(--fline)}
.cta a.mail::after{background:var(--facc);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
@media(hover:hover){.cta a.mail:hover::after{transform:scaleX(1)}}
footer{border-top:1px solid var(--line);padding:28px var(--gut);display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);flex-wrap:wrap;gap:14px}

/* megafoot — the big cobalt footer (homepage) */
.megafoot{display:block;border-top:none;background:var(--brand);color:#2C302E;text-align:center;padding:clamp(44px,6vw,80px) var(--gut) clamp(38px,5vw,60px)}
.mf-brand{display:inline-flex;align-items:center;gap:14px;justify-content:center;font-size:clamp(1.9rem,4.4vw,3.2rem)}
.mf-brand svg{height:.6875em;width:auto}
.mf-brand b{font-family:var(--sans);font-weight:900;letter-spacing:-.015em;text-transform:uppercase;color:#2C302E;line-height:1}
.mf-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(20px,3vw,46px);margin-top:clamp(34px,4.2vw,56px)}
.mf-nav a{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#2C302E;opacity:.72;padding:4px 0;transition:opacity .3s var(--ease)}
@media(hover:hover){.mf-nav a:hover{opacity:1}}
.mf-copy{margin-top:clamp(30px,4vw,50px);font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(44,48,46,0.55)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  h1.mega .l i,.kick,.hero-sub,.hero-cta,.obj-cap{animation:none!important;opacity:1!important;transform:none!important}
  .reveal,.cl,[data-stagger]>*{opacity:1!important;transform:none!important;clip-path:none!important}
  .curtain{display:none!important}
}

/* Touch devices have no hover — present the richer "hover" state by default.
   All photography in full colour; interactive cards rest with their offset shadow. */
@media (hover: none){
  .bmedia img,.pcard-img img,.pimg img{filter:grayscale(0)}
  .portrait img{filter:grayscale(0) contrast(1.03)}
  .bento .bcard{translate:-4px -4px;box-shadow:8px 8px 0 0 var(--brand)}
  .bento .bcard.blue{box-shadow:8px 8px 0 0 var(--ink)}
  .bento .bcard .bnum{opacity:1}
  .cgrid .cell{translate:-4px -4px;box-shadow:8px 8px 0 0 var(--brand)}
  .tcard:not(.flipped){box-shadow:8px 8px 0 0 var(--brand)}
  .tcard.blue:not(.flipped){box-shadow:8px 8px 0 0 var(--ink)}
  .tflip-hint .hov{display:none}
  .tflip-hint .tap{display:inline}
}

/* ============================================================
   SERVICES INDEX — Train / Implement / Support
   Editorial rows instead of cards. One open at a time; the open row
   reveals its detail and a before/after time meter that grows in.
   ============================================================ */
.svc{border-bottom:1px solid var(--fline)}
.svc-row{position:relative;border-top:1px solid var(--fline)}
.svc-row::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.svc-row.open::before{transform:scaleX(1)}
.svc-head{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:clamp(54px,7vw,120px) 1fr auto 44px;align-items:center;gap:clamp(14px,2vw,32px);padding:clamp(22px,3vw,44px) 0}
.svc-head:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.svc-n{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;color:var(--dim2);transition:color .4s var(--ease)}
.svc-t{display:flex;flex-direction:column;gap:10px;min-width:0}
.svc-t h3{font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(2.2rem,7vw,6.2rem);line-height:.92;letter-spacing:-.035em;color:var(--ink);transition:color .4s var(--ease),transform .6s var(--ease)}
.svc-one{font-size:clamp(.98rem,1.25vw,1.18rem);color:var(--dim);max-width:52ch}
.svc-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);padding:7px 12px;white-space:nowrap}
.lead-row .svc-tag{background:var(--brand);border-color:var(--brand);color:#FFF5E9}
.svc-x{position:relative;width:44px;height:44px;border:1px solid var(--ink);transition:background .4s var(--ease),transform .5s var(--ease)}
.svc-x::before,.svc-x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .5s var(--ease),background .4s var(--ease)}
.svc-x::after{transform:translate(-50%,-50%) rotate(90deg)}
.svc-row.open .svc-x{background:var(--brand);border-color:var(--brand)}
.svc-row.open .svc-x::before,.svc-row.open .svc-x::after{background:#FFF5E9}
.svc-row.open .svc-x::after{transform:translate(-50%,-50%) rotate(0deg)}
@media(hover:hover){.svc-head:hover h3,.svc-row.open h3{color:var(--brand)}}
@media(hover:hover){.svc-head:hover h3{transform:translateX(10px)}}
@media(hover:hover){.svc-head:hover .svc-n,.svc-row.open .svc-n{color:var(--brand)}}

.svc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.svc-row.open .svc-body{grid-template-rows:1fr}
.svc-in{overflow:hidden;display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,90px);padding-left:calc(clamp(54px,7vw,120px) + clamp(14px,2vw,32px))}
.svc-col{padding-bottom:clamp(30px,4vw,56px);opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.svc-row.open .svc-col{opacity:1;transform:none;transition-delay:.15s}
.svc-col>p:first-child{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;max-width:60ch}
.svc-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin-top:22px}
.svc-list li{padding:11px 0 11px 22px;border-top:1px solid var(--line);position:relative;font-size:.95rem}
.svc-list li::before{content:"";position:absolute;left:0;top:18px;width:9px;height:2px;background:var(--brand)}
.svc-plat{margin-top:22px;font-size:.88rem;color:var(--dim)}
.svc-plat span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin-bottom:6px}

.svc-meter{align-self:start;border:1px solid var(--ink);padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(30px,4vw,56px);opacity:0;transition:opacity .5s var(--ease)}
.svc-row.open .svc-meter{opacity:1;transition-delay:.25s}
.svc-mk{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.svc-bar{position:relative;height:38px;background:rgba(44,48,46,0.04);display:flex;align-items:center}
.svc-bar i{position:absolute;inset:0 auto 0 0;width:0;transition:width 1.4s var(--ease)}
.svc-bar.before i{background:var(--dim2)}
.svc-bar.after i{background:var(--brand)}
.svc-row.open .svc-bar i{width:var(--w)}
.svc-row.open .svc-bar.after i{transition-delay:.55s}
.svc-bar b{position:relative;margin-left:auto;padding-right:12px;font-family:var(--exp);font-weight:800;font-size:.95rem;text-transform:uppercase;color:var(--ink)}
.svc-bar.before b{color:#FFF5E9}
.svc-bar{margin-top:18px}
.svc-bar::after{position:absolute;left:0;top:-17px;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.svc-bar.before::after{content:"Before";color:var(--dim)}
.svc-bar.after::after{content:"With Miralto";color:var(--brand)}

.svc-mnote{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2)}

@media(max-width:860px){
  .svc-head{grid-template-columns:1fr 40px;grid-template-areas:"n x" "t t" "g g";row-gap:12px}
  .svc-n{grid-area:n}.svc-t{grid-area:t}.svc-tag{grid-area:g;justify-self:start}.svc-x{grid-area:x;width:40px;height:40px}
  .svc-in{grid-template-columns:1fr;padding-left:0;gap:0}
  .svc-list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.svc-body,.svc-bar i,.svc-col,.svc-meter,.svc-t h3{transition:none!important}}
/* ============================================================
   STUDIO SIZE — hours back per month (small / medium / large)
   ============================================================ */
.gain{padding-block:clamp(56px,8vw,120px)}
.gain-pick{display:flex;gap:0;margin-top:clamp(24px,3vw,40px);border:1px solid var(--ink);width:fit-content;max-width:100%}
.gain-pick button{all:unset;cursor:pointer;padding:16px clamp(18px,2.4vw,34px);font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(.9rem,1.2vw,1.05rem);color:var(--ink);display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--ink);transition:background .35s var(--ease),color .35s var(--ease)}
.gain-pick button:first-child{border-left:0}
.gain-pick button span{font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.14em;color:var(--dim)}
@media(hover:hover){.gain-pick button:hover{background:rgba(59,77,255,0.06)}}
.gain-pick button.on{background:var(--brand);color:#FFF5E9}
.gain-pick button.on span{color:rgba(255,245,233,0.75)}
.gain-pick button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media(max-width:560px){.gain-pick{width:100%}.gain-pick button{flex:1;padding:14px 12px}}
.bento .b3{grid-column:span 3}
@media(max-width:1100px){.bento .b3{grid-column:span 6}}
@media(max-width:860px){.bento .b3{grid-column:auto}}
.gain-plan{margin-top:clamp(28px,3.5vw,48px);border-top:1px solid var(--line)}
.gain-plan ol{display:none;list-style:none;counter-reset:g;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);padding-top:clamp(22px,3vw,38px)}
.gain-plan ol.on{display:grid;animation:gainin .6s var(--ease)}
.gain-plan li{counter-increment:g;font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.15;letter-spacing:-.01em}
.gain-plan li::before{content:"0" counter(g);display:block;margin-bottom:14px;font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.14em;color:var(--brand)}
@keyframes gainin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:860px){.gain-plan ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.gain-plan ol{grid-template-columns:1fr}}

/* ============================================================
   POP — electric blue beside the cobalt: one tonal blue system.
   ============================================================ */
::selection{background:var(--pop);color:#FFF5E9}
.cta a.mail::after{background:#FFF5E9}
@media(hover:hover){.btn:not(.ghost):hover{box-shadow:4px 4px 0 0 var(--pop)}}
.lead-row .svc-tag{background:var(--pop);border-color:var(--pop);color:#FFF5E9}
@media(hover:hover){.bento .bcard.black:hover{box-shadow:8px 8px 0 0 var(--pop)}}
.gain-pick button.on{box-shadow:inset 0 -4px 0 0 var(--pop)}
.svc-row.open .svc-x{background:var(--pop);border-color:var(--pop)}

.hero-sub b{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pop);text-decoration-thickness:3px;text-underline-offset:6px}
.kick::before{background:var(--pop)!important}

/* package name + plain meaning */
.svc-plain{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.svc-row.open .svc-plain{color:var(--pop)}

/* studio-size plan: package label above each step */
.gain-plan li::before{content:none}
.gain-plan li em{display:block;margin-bottom:12px;font-family:var(--mono);font-style:normal;font-weight:400;font-size:.64rem;letter-spacing:.16em;color:var(--pop)}

/* aftercare band */
.aftercare{padding-block:clamp(56px,8vw,110px)}
.ac-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,5vw,90px);align-items:start}
.ac-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,245,233,0.7)}
.ac-h{margin-top:14px;font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(2.4rem,7vw,6rem);line-height:.92;letter-spacing:-.035em;color:#FFF5E9}
.ac-p{font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.55;color:#FFF5E9;max-width:48ch}
.ac-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin-top:24px}
.ac-list li{padding:11px 0;border-top:1px solid rgba(255,245,233,0.25);color:#FFF5E9;font-size:.95rem}
@media(max-width:860px){.ac-grid{grid-template-columns:1fr}.ac-list{grid-template-columns:1fr}}
/* ============================================================
   STUDIO MODE — editorial motion: word rotator, marquee,
   hover-reveal project list, giant footer wordmark
   ============================================================ */
/* hero: rotating first word */
.rot{display:inline-block;transition:transform .5s var(--ease),opacity .4s var(--ease)}
.rot.out{transform:translateY(-60%);opacity:0}
.rot.in{transform:translateY(60%);opacity:0;transition:none}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--ink);background:var(--paper);padding-block:clamp(14px,1.8vw,24px)}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
@media(hover:hover){.marquee:hover .mq-track{animation-play-state:paused}}
.mq-set{display:flex;align-items:center;flex:none}
.mq-set span{font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,5.4vw,4.8rem);line-height:1;letter-spacing:-.03em;padding-inline:clamp(14px,1.6vw,26px);white-space:nowrap;color:var(--ink)}
.mq-set span:nth-child(4n+3){color:transparent;-webkit-text-stroke:1.4px var(--ink)}
.mq-set i{flex:none;width:clamp(10px,1.1vw,16px);height:clamp(10px,1.1vw,16px);border-radius:50%;background:var(--pop)}
@keyframes mq{to{transform:translateX(-50%)}}

/* work: agency list with cursor-following image */
.wlist{border-top:1px solid var(--ink);margin-top:clamp(24px,3vw,44px)}
.wrow{position:relative;display:grid;grid-template-columns:clamp(40px,5vw,80px) 1fr auto auto;gap:clamp(14px,2vw,36px);align-items:baseline;padding:clamp(18px,2.4vw,34px) 0;border-bottom:1px solid var(--ink);color:var(--ink);overflow:hidden}
.wrow::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:0}
.wrow>*{position:relative;z-index:1;transition:color .3s var(--ease),transform .5s var(--ease)}
.wr-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--dim)}
.wr-name{font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,3vw,2.9rem);line-height:.95;letter-spacing:-.03em}
.wr-m,.wr-c{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.wr-thumb{display:none}
@media(hover:hover){
  .wrow:hover::before{transform:scaleY(1)}
  .wrow:hover>*{color:#FFF5E9}
  .wrow:hover .wr-name{transform:translateX(14px)}
  .wrow:hover .wr-m{color:var(--pop)}
}
.wfloat{position:fixed;left:0;top:0;width:clamp(220px,22vw,360px);aspect-ratio:4/3;object-fit:cover;pointer-events:none;z-index:60;opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(-3deg);transition:opacity .3s var(--ease),transform .4s var(--ease);border:1px solid var(--ink)}
.wfloat.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
@media(max-width:760px){
  .wrow{grid-template-columns:1fr;gap:6px}
  .wr-n{display:none}
  .wr-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-top:12px;order:5}
}

/* footer: giant wordmark */
.mf-brand{display:flex;width:100%;justify-content:center;font-size:clamp(2rem,5vw,4.4rem);gap:.14em}
.mf-brand svg{height:.6875em}
.mf-brand b{letter-spacing:-.04em;line-height:.85}

@media(prefers-reduced-motion:reduce){.mq-track{animation:none}.rot{transition:none}}html[lang=fr] .plug .plugcount::after{content:counter(pg) " pièces étiquetées"}

/* language switch: a small FR | EN toggle, always in the header (desktop and mobile) */
.langsw{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);border-radius:100px;padding:2px;
  font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.08em;line-height:1;isolation:isolate}
.langsw span{position:relative;z-index:1;padding:6px 9px;text-align:center;color:var(--ink);opacity:.55;transition:color .35s var(--ease),opacity .35s var(--ease)}
.langsw span.on{color:#FFF5E9;opacity:1}
.langsw::before{content:"";position:absolute;z-index:0;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:100px;background:var(--ink);transition:transform .4s var(--ease)}
.langsw:has(span:last-child.on)::before{transform:translateX(100%)}
@media(hover:hover){.langsw:hover span:not(.on){opacity:1}}
@media(hover:hover){.langsw:hover::before{transform:translateX(100%)}}
@media(hover:hover){.langsw:has(span:last-child.on):hover::before{transform:translateX(0)}}
@media(hover:hover){.langsw:hover span.on{color:var(--ink);opacity:.55}}
@media(hover:hover){.langsw:hover span:not(.on){color:#FFF5E9}}
.langsw:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---- elevation demo: AI colours each window type on the elevation ---- */
.fac .capp .dot{background:var(--brand)}
.fac .cstat{color:rgba(44,48,46,0.73);background:rgba(44,48,46,0.04);border:1px solid var(--line)}
.fac .facask{position:absolute;top:44px;left:16px;right:16px;font-family:var(--mono);font-size:.6rem;color:#2C302E;background:rgba(44,48,46,0.04);border:1px solid var(--line);border-radius:8px;padding:8px 11px;white-space:nowrap;overflow:hidden}
.fac .facsvg{position:absolute;left:16px;top:82px;width:calc(100% - 32px);height:calc(100% - 82px - 112px)}
.fac .fground{stroke:#2C302E;stroke-width:1.2}
.fac .fbox{fill:none;stroke:#2C302E;stroke-width:1.2}
.fac .ft rect{fill:#FFF5E9;stroke:rgba(44,48,46,0.45);stroke-width:.8;animation:ftA 10s infinite}
.fac .ft.t2 rect{animation-name:ftB;animation-delay:.5s}
.fac .ft.t3 rect{animation-name:ftC;animation-delay:1s}
.fac .ft.t4 rect{animation-name:ftD;animation-delay:1.5s}
@keyframes ftA{0%,18%{fill:#FFF5E9;stroke:rgba(44,48,46,0.45)}24%,92%{fill:var(--brand);stroke:var(--brand)}98%,100%{fill:#FFF5E9;stroke:rgba(44,48,46,0.45)}}
@keyframes ftB{0%,18%{fill:#FFF5E9;stroke:rgba(44,48,46,0.45)}24%,92%{fill:var(--pop);stroke:var(--pop)}98%,100%{fill:#FFF5E9;stroke:rgba(44,48,46,0.45)}}
@keyframes ftC{0%,18%{fill:#FFF5E9;stroke:rgba(44,48,46,0.45)}24%,92%{fill:#2C302E;stroke:#2C302E}98%,100%{fill:#FFF5E9;stroke:rgba(44,48,46,0.45)}}
@keyframes ftD{0%,18%{fill:#FFF5E9;stroke:rgba(44,48,46,0.45)}24%,92%{fill:rgba(59,77,255,0.76);stroke:rgba(59,77,255,0.76)}98%,100%{fill:#FFF5E9;stroke:rgba(44,48,46,0.45)}}
.fac .faclegend{position:absolute;left:16px;right:16px;bottom:56px;display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}
.fac .faclegend span{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.5rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(44,48,46,0.73);opacity:0;animation:ftleg 10s infinite}
.fac .faclegend span:nth-child(2){animation-delay:.5s}.fac .faclegend span:nth-child(3){animation-delay:1s}.fac .faclegend span:nth-child(4){animation-delay:1.5s}
.fac .faclegend i{width:9px;height:9px;flex:none;border-radius:2px}
.fac .faclegend b{margin-left:auto;font-weight:600;color:#2C302E}
@keyframes ftleg{0%,20%{opacity:0;transform:translateY(3px)}26%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.fac .ft rect,.fac .faclegend span{animation:none;opacity:1}}
/* ============================================================
   VIZ demos — each one its own visual (detail, scan, quantities, CCTP/DPGF)
   ============================================================ */
.viz .capp .dot{background:var(--brand)}
.viz .cstat{color:rgba(44,48,46,0.73);background:rgba(44,48,46,0.04);border:1px solid var(--line)}
.viz .vask{position:absolute;top:40px;left:14px;right:14px;z-index:6;font-family:var(--mono);font-size:.58rem;color:#2C302E;background:rgba(255,245,233,0.9);border:1px solid var(--line);border-radius:8px;padding:6px 10px;white-space:nowrap;overflow:hidden}
.viz .vsvg{position:absolute;left:12px;top:40px;width:calc(100% - 24px);height:calc(100% - 120px)}
.viz .vsvg.low{top:70px;height:calc(100% - 150px)}
.viz text{font-family:var(--mono);font-size:6.4px;fill:#2C302E;letter-spacing:.02em}
.viz .vchip{position:absolute;right:14px;bottom:56px;z-index:6;font-family:var(--mono);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:#419D78;background:rgba(65,157,120,0.09);border:1px solid rgba(65,157,120,0.28);border-radius:100px;padding:3px 9px;opacity:0;animation:vchip 10s infinite}
@keyframes vchip{0%,70%{opacity:0;transform:translateY(3px)}76%,94%{opacity:1;transform:none}99%,100%{opacity:0}}

/* detail: leaders draw, tags appear */
.vdet .m{stroke:#2C302E;stroke-width:.8}
.vdet .conc{fill:rgba(44,48,46,0.09)}.vdet .ins{fill:rgba(59,77,255,0.17)}.vdet .clad{fill:#2C302E}
.vdet .zz{fill:none;stroke:rgba(59,77,255,0.76);stroke-width:.7}
.vdet .ld{fill:none;stroke:var(--brand);stroke-width:.9;stroke-dasharray:160;stroke-dashoffset:160;animation:vdraw 10s infinite}
.vdet .dt{fill:var(--brand);opacity:0;animation:vfade 10s infinite}
.vdet text{opacity:0;animation:vfade 10s infinite}
.vdet .k2{animation-delay:.6s}.vdet .k3{animation-delay:1.2s}.vdet .k4{animation-delay:1.8s}
@keyframes vdraw{0%,10%{stroke-dashoffset:160}24%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:160}}
@keyframes vfade{0%,18%{opacity:0}26%,92%{opacity:1}98%,100%{opacity:0}}

/* scan: point cloud becomes a model */
.vscan circle{fill:rgba(59,77,255,0.76);animation:vpts 10s infinite}
.vscan .wf{fill:none;stroke:var(--brand);stroke-width:1.1;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:vwire 10s infinite}
.vscan .wf.win{stroke-width:.8;stroke-dasharray:60;stroke-dashoffset:60;animation-name:vwin}
.vscan .face{fill:var(--brand);opacity:0;animation:vface 10s infinite}
@keyframes vpts{0%{opacity:0}12%,40%{opacity:1}56%,100%{opacity:.12}}
@keyframes vwire{0%,36%{stroke-dashoffset:420}60%,94%{stroke-dashoffset:0}99%,100%{stroke-dashoffset:420}}
@keyframes vwin{0%,50%{stroke-dashoffset:60}64%,94%{stroke-dashoffset:0}99%,100%{stroke-dashoffset:60}}
@keyframes vface{0%,60%{opacity:0}68%,94%{opacity:.08}99%,100%{opacity:0}}

/* quantities: parts light up, list fills in */
.vqty .edge{fill:#FFF5E9;stroke:#2C302E;stroke-width:.8;stroke-linejoin:round}
.vqty .q{animation:vq 10s infinite}
.vqty .q1{fill:none;stroke:#2C302E;stroke-width:.8}
.vqty .q2,.vqty .q3,.vqty .q4{fill:#FFF5E9;stroke:#2C302E;stroke-width:.6}
.vqty .q2{animation-delay:.7s}.vqty .q3{animation-delay:1.4s}.vqty .q4{animation-delay:2.1s}
.vqty .q1{animation-name:vq1}
@keyframes vq{0%,14%{fill:#FFF5E9}20%,92%{fill:var(--brand)}98%,100%{fill:#FFF5E9}}
@keyframes vq1{0%,14%{stroke:#2C302E;stroke-width:.8}20%,92%{stroke:var(--pop);stroke-width:2}98%,100%{stroke:#2C302E;stroke-width:.8}}
.vqty .row{opacity:0;animation:vfade 10s infinite}
.vqty .row.r2{animation-delay:.7s}.vqty .row.r3{animation-delay:1.4s}.vqty .row.r4{animation-delay:2.1s}
.vqty .row line{stroke:rgba(44,48,46,0.08);stroke-width:.6}
.vqty .row .v{font-weight:600;text-anchor:end}
.vqty .sw{stroke:none}

/* cctp/dpgf: model linked to the documents, a change flows through */
.vdoc .edge{fill:#FFF5E9;stroke:#2C302E;stroke-width:.8;stroke-linejoin:round}
.vdoc .p1{fill:rgba(59,77,255,0.17)}.vdoc .p2{fill:rgba(59,77,255,0.28)}.vdoc .p3{fill:var(--brand);animation:vflash 10s infinite}
.vdoc .sheet{fill:#FFF5E9;stroke:rgba(44,48,46,0.17);stroke-width:.8}
.vdoc .hd{font-weight:600;fill:var(--brand)}
.vdoc .lk{fill:none;stroke:var(--brand);stroke-width:.7;stroke-dasharray:2.5 2.5;animation:vflow 1.4s linear infinite;opacity:0}
.vdoc .lk{animation:vflow 1.4s linear infinite,vfade 10s infinite}
.vdoc .lk.k2{animation-delay:0s,.5s}.vdoc .lk.k3{animation-delay:0s,1s}
.vdoc .rw{opacity:0;animation:vfade 10s infinite}.vdoc .rw.k2{animation-delay:.5s}.vdoc .rw.k3{animation-delay:1s}
.vdoc .rw line{stroke:rgba(44,48,46,0.08);stroke-width:.6}
.vdoc .v{font-weight:600;text-anchor:end}
.vdoc .old{animation:vold 10s infinite}.vdoc .new{opacity:0;animation:vnew 10s infinite;fill:var(--pop)}
@keyframes vflow{to{stroke-dashoffset:-10}}
@keyframes vflash{0%,56%{fill:var(--brand)}60%,66%{fill:var(--pop)}72%,100%{fill:var(--brand)}}
@keyframes vold{0%,60%{opacity:1}63%,100%{opacity:0}}
@keyframes vnew{0%,62%{opacity:0}66%,94%{opacity:1}99%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.viz *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}.vdoc .old{opacity:0!important}}
.fac .frail{fill:none;stroke:#2C302E;stroke-width:.6;stroke-dasharray:1.5 1.5}
.vqty .qb .edge{fill:#FFF5E9}

/* ---- small changes, big gains ---- */
.sgain{padding-block:clamp(56px,8vw,120px)}
.sg-list{margin-top:clamp(28px,3.5vw,52px);border-top:1px solid var(--ink)}
.sg-row{display:grid;grid-template-columns:clamp(30px,4vw,60px) minmax(0,.9fr) clamp(60px,10vw,180px) minmax(0,1.4fr);gap:clamp(12px,2vw,30px);align-items:center;padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--line)}
.sg-n{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--dim2)}
.sg-small{font-size:clamp(.95rem,1.15vw,1.08rem);color:var(--dim);line-height:1.35}
.sg-small em{display:block;margin-bottom:6px;font-family:var(--mono);font-style:normal;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pop)}
.sg-arrow{position:relative;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .2s}
.sg-arrow::after{content:"";position:absolute;right:-1px;top:50%;width:9px;height:9px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
.sg-row.in .sg-arrow{transform:scaleX(1)}
.sg-big{font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(1.15rem,2.3vw,2.1rem);line-height:1;letter-spacing:-.02em;color:var(--ink);opacity:0;transform:translateX(-12px);transition:opacity .6s var(--ease) .7s,transform .8s var(--ease) .7s}
.sg-row.in .sg-big{opacity:1;transform:none}
@media(hover:hover){.sg-row:hover .sg-big{color:var(--brand)}}
@media(max-width:760px){.sg-row{grid-template-columns:1fr;gap:10px}.sg-n{display:none}.sg-arrow{width:60px}}
@media(prefers-reduced-motion:reduce){.sg-arrow{transform:none}.sg-big{opacity:1;transform:none}}
/* ============================================================
   DIAGRAM STYLE — white massing, soft face shading, plinth,
   white "model" trees, pale-blue roofs. Blue for highlights.
   ============================================================ */
.dia .mT{fill:#FFF5E9;stroke:rgba(44,48,46,0.2);stroke-width:.4;stroke-linejoin:round}
.dia .mL{fill:rgba(59,77,255,0.13);stroke:rgba(44,48,46,0.2);stroke-width:.4;stroke-linejoin:round}
.dia .mR{fill:rgba(59,77,255,0.27);stroke:rgba(44,48,46,0.2);stroke-width:.4;stroke-linejoin:round}
.dia .dsh{fill:rgba(44,48,46,0.07)}
.dia .tree{fill:#FFF5E9;stroke:rgba(44,48,46,0.22);stroke-width:.5}
.dia .groof{fill:rgba(59,77,255,0.14)}
/* quantities: faces light up in blue tones */
.vqty .dia .q{animation:none}
.vqty .dia .q2{animation:dq2 10s infinite .7s}
.vqty .dia .q3 polygon{fill:rgba(59,77,255,0.33);animation:dq3 10s infinite 1.4s}
.vqty .dia .q4{fill:rgba(59,77,255,0.14);animation:dq4 10s infinite 2.1s}
@keyframes dq2{0%,14%{fill:rgba(59,77,255,0.27)}20%,92%{fill:var(--brand)}98%,100%{fill:rgba(59,77,255,0.27)}}
@keyframes dq3{0%,14%{fill:rgba(59,77,255,0.33)}20%,92%{fill:var(--pop)}98%,100%{fill:rgba(59,77,255,0.33)}}
@keyframes dq4{0%,14%{fill:rgba(59,77,255,0.14)}20%,92%{fill:rgba(59,77,255,0.51)}98%,100%{fill:rgba(59,77,255,0.14)}}
.vqty .dia .mL:first-of-type{animation:none}
/* cctp: ribbons flash when the model changes */
.vdoc .dia .p3{fill:rgba(59,77,255,0.33);stroke:none;animation:dflash 10s infinite}
@keyframes dflash{0%,56%{fill:var(--brand)}60%,66%{fill:var(--pop)}72%,100%{fill:var(--brand)}}
/* scan: points, then the massing appears */
.vscan .dia .pc circle{fill:var(--brand);animation:vpts 10s infinite}
.vscan .dia .mass{opacity:0;animation:dmass 10s infinite}
@keyframes dmass{0%,38%{opacity:0;transform:translateY(3px)}56%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.vscan .dia .mass{opacity:1}.vscan .dia .pc{display:none}}.fac .fbox{fill:rgba(59,77,255,0.1);stroke:rgba(44,48,46,0.26);stroke-width:.8}
.fac .fground{stroke:rgba(44,48,46,0.26)}
.fac .ft.t4 rect{animation-name:ftD}
@keyframes ftD{0%,18%{fill:#FFF5E9;stroke:rgba(44,48,46,0.45)}24%,92%{fill:rgba(59,77,255,0.28);stroke:rgba(59,77,255,0.28)}98%,100%{fill:#FFF5E9;stroke:rgba(44,48,46,0.45)}}

/* ============================================================
   YELLOW ACCENT (Bauhaus duo): fills, underlines, on-blue text.
   Never yellow text on paper.
   ============================================================ */
::selection{background:var(--pop);color:var(--ink)}
.hero-sub b{text-decoration:none;background:linear-gradient(transparent 58%,var(--pop) 58%,var(--pop) 92%,transparent 92%)}
.lead-row .svc-tag{background:var(--pop);border-color:var(--pop);color:var(--ink)}
.svc-row.open .svc-x{background:var(--pop);border-color:var(--pop)}
.svc-row.open .svc-x::before,.svc-row.open .svc-x::after{background:var(--ink)}
.svc-row.open .svc-plain{color:var(--brand)}
.gain-plan li em{color:var(--brand)}
.sg-small em{color:var(--ink)}
.sg-small em::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;background:var(--pop);vertical-align:1px}
.cta h2 .b{color:var(--pop)}
.cta a.mail::after{background:var(--pop)}
.ac-k{color:var(--pop)}
.vdoc .new{fill:var(--brand)}

/* ============================================================
   DIAGRAMS v2 — lighter: thin lines, pale faces, one accent each
   ============================================================ */
.dia .mT{fill:#FFF5E9;stroke:rgba(59,77,255,0.4);stroke-width:.35}
.dia .mL{fill:rgba(59,77,255,0.1);stroke:rgba(59,77,255,0.4);stroke-width:.35}
.dia .mR{fill:rgba(59,77,255,0.22);stroke:rgba(59,77,255,0.4);stroke-width:.35}
.dia .dsh{fill:rgba(44,48,46,0.05)}
.dia .tree{fill:#FFF5E9;stroke:rgba(59,77,255,0.42);stroke-width:.4}
.dia .court{fill:rgba(59,77,255,0.16)}
.dia .fl{fill:none;stroke:rgba(59,77,255,0.34);stroke-width:.35}
.dia .wn{fill:none;stroke:rgba(59,77,255,0.66);stroke-width:.9;stroke-linecap:round}
/* quantities: each family lights up in turn, gently */
.vqty .dia .q{animation:none}
.vqty .dia .q1{animation:dl1 10s infinite}
.vqty .dia .q2{animation:dl2 10s infinite .7s}
.vqty .dia .q3{animation:dl3 10s infinite 1.4s}
.vqty .dia .q4{animation:dl4 10s infinite 2.1s}
@keyframes dl1{0%,14%{stroke:rgba(59,77,255,0.34);stroke-width:.35}20%,92%{stroke:var(--brand);stroke-width:.6}98%,100%{stroke:rgba(59,77,255,0.34);stroke-width:.35}}
@keyframes dl2{0%,14%{fill:rgba(59,77,255,0.22)}20%,92%{fill:rgba(59,77,255,0.33)}98%,100%{fill:rgba(59,77,255,0.22)}}
@keyframes dl3{0%,14%{stroke:rgba(59,77,255,0.66)}20%,92%{stroke:var(--pop);stroke-width:1.3}98%,100%{stroke:rgba(59,77,255,0.66)}}
@keyframes dl4{0%,14%{fill:#FFF5E9}20%,92%{fill:rgba(59,77,255,0.17)}98%,100%{fill:#FFF5E9}}
/* cctp: windows flash yellow when the model changes */
.vdoc .dia .p3{fill:none;stroke:rgba(59,77,255,0.51);animation:dwf 10s infinite}
@keyframes dwf{0%,56%{stroke:rgba(59,77,255,0.51)}60%,70%{stroke:var(--pop);stroke-width:1.5}76%,100%{stroke:rgba(59,77,255,0.51)}}
/* haussmann: floors rise one by one under a scan line */
.vscan .hf{opacity:0;animation:hrise 10s infinite}
.vscan .h1{animation-delay:.35s}.vscan .h2{animation-delay:.7s}.vscan .h3{animation-delay:1.05s}.vscan .h4{animation-delay:1.4s}.vscan .h5{animation-delay:1.75s}.vscan .h6{animation-delay:2.1s}
@keyframes hrise{0%,10%{opacity:0;transform:translateY(-4px)}18%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
.vscan .hw{fill:rgba(59,77,255,0.26);stroke:none}
.vscan .hbal{fill:none;stroke:rgba(44,48,46,0.48);stroke-width:.5}
.vscan .vline{position:absolute;left:14px;right:14px;top:70px;height:2px;background:linear-gradient(90deg,transparent,var(--pop),transparent);z-index:5;opacity:0;animation:vsweep 10s infinite}
@keyframes vsweep{0%,6%{opacity:0;transform:translateY(130px)}10%{opacity:1}34%{opacity:1;transform:translateY(0)}40%,100%{opacity:0;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.vscan .hf{opacity:1}.vscan .vline{display:none}}.viz .vsvg.scanv{top:66px;height:calc(100% - 140px)}
.vscan .vline{top:66px}

/* ---- detail v2: light technical drawing ---- */
.vdet .dm{stroke:rgba(44,48,46,0.29);stroke-width:.5}
.vdet .ins{fill:#FFF5E9}.vdet .clad{fill:#FFF5E9}.vdet .scr{fill:rgba(59,77,255,0.1)}
.vdet .zz{fill:none;stroke:rgba(59,77,255,0.33);stroke-width:.6}
.vdet .jt{fill:none;stroke:rgba(44,48,46,0.29);stroke-width:.4}
.vdet .ld{stroke:#2C302E;stroke-width:.5}
.vdet .dt{fill:var(--pop);stroke:#2C302E;stroke-width:.4}
.vdet text{fill:#2C302E}
/* ---- plug-in plan v2 ---- */
/* ---- elevation v2: thinner, quieter ---- */
.fac .fbox{fill:#FFF5E9;stroke:rgba(44,48,46,0.2);stroke-width:.5}
.fac .ft rect{stroke-width:.5}
.fac .frail{stroke:rgba(44,48,46,0.43);stroke-width:.4}
.fac .fground{stroke:rgba(44,48,46,0.2);stroke-width:.6}.fac .facsvg{top:80px;height:calc(100% - 172px)}
.fac .faclegend{bottom:52px;gap:3px 12px}

/* ---- elevation v3: terraced, slab edges, glass rails ---- */
.fac .eb{fill:#FFF5E9;stroke:rgba(44,48,46,0.2);stroke-width:.4}
.fac .fslab rect{fill:rgba(59,77,255,0.26)}
.fac .frl rect,.fac .fbal{fill:rgba(59,77,255,0.07);stroke:rgba(59,77,255,0.44);stroke-width:.35}
.fac .fshadow{fill:rgba(44,48,46,0.06)}
.fac .ftc{fill:#FFF5E9;stroke:rgba(44,48,46,0.22);stroke-width:.5}
.fac .ftr{stroke:rgba(44,48,46,0.22);stroke-width:.6}
.fac .faclegend{grid-template-columns:repeat(3,auto);justify-content:center;gap:4px 16px}
.fac .faclegend b{margin-left:8px}.fac .facask{top:40px;padding:6px 10px}
.fac .facsvg{top:70px;height:calc(100% - 144px)}
.fac .faclegend{bottom:54px}

/* ---- offers strip (homepage): one consistent style, Formation tagged ---- */
.offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-top:clamp(16px,2vw,26px)}
.off{position:relative;display:flex;flex-direction:column;gap:14px;min-height:clamp(220px,20vw,280px);padding:clamp(20px,2.2vw,34px) clamp(18px,2vw,30px) clamp(54px,5vw,70px);border-left:1px solid var(--line);color:var(--ink);transition:background .45s var(--ease),color .45s var(--ease)}
.off:first-child{border-left:0}
.off-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--dim2);transition:color .45s var(--ease)}
.off h4{font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,2.1vw,2rem);line-height:1;letter-spacing:-.02em}
.off p{font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.45;color:var(--dim);max-width:30ch;transition:color .45s var(--ease)}
.off-tag{position:absolute;top:clamp(18px,2vw,30px);right:clamp(18px,2vw,30px);font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--pop);padding:5px 9px}
.off-go{position:absolute;left:clamp(18px,2vw,30px);bottom:clamp(20px,2vw,28px);font-size:1.3rem;transition:transform .45s var(--ease)}
@media(hover:hover){.off:hover{background:var(--brand);color:#FFF5E9}}
@media(hover:hover){.off:hover p,.off:hover .off-n{color:rgba(255,245,233,0.78)}}
@media(hover:hover){.off:hover .off-go{transform:translateX(8px)}}
.off-foot{display:inline-flex;gap:8px;margin-top:20px;font-size:.98rem;color:var(--dim)}
.off-foot b{color:var(--ink);font-weight:700}
@media(hover:hover){.off-foot:hover{color:var(--brand)}}
@media(max-width:1000px){.offers{grid-template-columns:repeat(2,minmax(0,1fr))}.off:nth-child(3){border-left:0}.off:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:560px){.offers{grid-template-columns:1fr}.off{border-left:0;min-height:0}.off+.off{border-top:1px solid var(--line)}}.off-foot{display:inline-block}
.off-foot span{margin-left:6px}
.sgain .tech-lead b{color:var(--ink);font-weight:600;background:linear-gradient(transparent 62%,var(--pop) 62%,var(--pop) 92%,transparent 92%)}
.sg-big{font-size:clamp(1.05rem,1.9vw,1.75rem);line-height:1.05}

/* ---- concept diagram (xFigura): overlays draw over the massing ---- */
.vdia .ov{fill:none;stroke-width:1.1;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;animation:ovdraw 10s infinite}
.vdia .sun{stroke:var(--pop);stroke-width:1.4;stroke-dasharray:3 3;stroke-dashoffset:0;opacity:0;animation:ovfade 10s infinite}
.vdia .sunc{fill:var(--pop)}
.vdia .wind{stroke:var(--brand)}
.vdia .acc{stroke:var(--brand);stroke-width:1.6}
.vdia .cone{fill:rgba(59,77,255,0.12);stroke:rgba(59,77,255,0.51);stroke-width:.5}
.vdia .ovf{opacity:0;animation:ovfade 10s infinite}
.vdia .ovt{font-size:6px;fill:#2C302E;opacity:0;animation:ovfade 10s infinite}
.vdia .k2{animation-delay:.8s}.vdia .k3{animation-delay:1.6s}.vdia .k4{animation-delay:2.4s}
@keyframes ovdraw{0%,14%{stroke-dashoffset:300}30%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:300}}
@keyframes ovfade{0%,16%{opacity:0}26%,92%{opacity:1}98%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.vdia .ov,.vdia .ovf,.vdia .ovt{animation:none;opacity:1;stroke-dashoffset:0}}
/* ============================================================
   LAB — dark band, hashtag ticker, live experiment log
   ============================================================ */
.labsec{--bg:var(--ink);--fg:#FFF5E9;--fdim:rgba(44,48,46,0.66);--fline:rgba(44,48,46,0.14);background:var(--ink);color:#2C302E;padding-bottom:clamp(60px,8vw,120px);overflow:hidden}
.labsec .kick{color:var(--pop)}
.labsec .mhead{color:#2C302E}
.labsec .mhead .b{color:var(--pop)}
.lab-mq{border-bottom:1px solid rgba(44,48,46,0.14);padding-block:clamp(12px,1.5vw,20px);margin-bottom:clamp(40px,6vw,80px);overflow:hidden}
.lab-mq-t{display:flex;width:max-content;animation:mq 60s linear infinite}
.lab-mq-t>div{display:flex;flex:none}
.lab-mq span{font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(1.4rem,3.6vw,3.2rem);letter-spacing:-.02em;padding-inline:clamp(12px,1.4vw,22px);color:transparent;-webkit-text-stroke:1px rgba(44,48,46,0.5);white-space:nowrap}
.lab-mq span:nth-child(3n+1){color:#2C302E;-webkit-text-stroke:0}
.lab-mq span:nth-child(5n+2){color:var(--pop);-webkit-text-stroke:0}
.lab-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:end}
.lab-lead{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.55;color:rgba(255,245,233,0.72);max-width:46ch}
.lab-log{margin-top:clamp(30px,4vw,56px);font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,245,233,0.5);padding-bottom:14px;border-bottom:1px solid rgba(255,245,233,0.3)}
.lab-row{display:grid;grid-template-columns:clamp(150px,14vw,200px) 1fr auto;gap:clamp(16px,3vw,48px);align-items:start;padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid rgba(44,48,46,0.12)}
.lab-st{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(44,48,46,0.8);padding-top:6px}
.lab-st i{width:8px;height:8px;border-radius:50%;flex:none}
.st-dev i{background:var(--pop);box-shadow:0 0 0 0 rgba(224,164,88,0.6);animation:lpulse 2s infinite}
.st-test i{background:rgba(59,77,255,0.51)}
.st-exp i{background:transparent;border:1px solid rgba(255,245,233,0.6)}
@keyframes lpulse{0%{box-shadow:0 0 0 0 rgba(224,164,88,0.55)}70%{box-shadow:0 0 0 8px rgba(224,164,88,0)}100%{box-shadow:0 0 0 0 rgba(224,164,88,0)}}
.lab-txt h4{font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(1.05rem,1.8vw,1.6rem);line-height:1.05;letter-spacing:-.015em;color:#2C302E}
.lab-txt p{margin-top:10px;font-size:.98rem;line-height:1.5;color:rgba(44,48,46,0.66);max-width:58ch}
.lab-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:240px;padding-top:4px}
.lab-tags em{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.06em;color:#2C302E;border:1px solid rgba(44,48,46,0.28);border-radius:100px;padding:4px 10px;transition:background .3s var(--ease),color .3s var(--ease)}
@media(hover:hover){.lab-row:hover .lab-tags em{background:var(--pop);border-color:var(--pop);color:var(--ink)}}
@media(max-width:860px){.lab-head{grid-template-columns:1fr}.lab-row{grid-template-columns:1fr;gap:10px}.lab-tags{justify-content:flex-start;max-width:none}}
@media(prefers-reduced-motion:reduce){.lab-mq-t{animation:none}.st-dev i{animation:none}}
/* lab rows as links */
a.lab-row{grid-template-columns:clamp(150px,14vw,200px) 1fr auto 40px;color:#2C302E;transition:background .4s var(--ease),padding .4s var(--ease)}
.lab-go{align-self:center;justify-self:end;font-size:1.3rem;color:rgba(44,48,46,0.5);transition:transform .4s var(--ease),color .4s var(--ease)}
@media(hover:hover){a.lab-row:hover{background:rgba(44,48,46,0.04);padding-inline:14px}}
@media(hover:hover){a.lab-row:hover .lab-go{color:var(--pop);transform:translateX(6px)}}
@media(max-width:860px){a.lab-row{grid-template-columns:1fr}.lab-go{justify-self:start}}
/* ============================================================
   CTAs — more ways to get in touch
   ============================================================ */
.btn.pop{background:var(--pop);border-color:var(--pop);color:var(--ink)}
@media(hover:hover){.btn.pop:hover{box-shadow:4px 4px 0 0 var(--ink)}}
@media(hover:hover){.cta .btn.pop:hover{box-shadow:4px 4px 0 0 #FFF5E9}}
.btn.onblue{background:transparent;border-color:rgba(255,245,233,0.6);color:#FFF5E9}
@media(hover:hover){.btn.onblue:hover{transform:translate(-4px,-4px);box-shadow:4px 4px 0 0 var(--pop)}}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,40px)}
.cta-band-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vw,52px)}
.cta-band-btns+.mail{display:inline-block;margin-top:26px}
.svc-btn{margin-top:24px}
@media(hover:hover){.labsec .btn.pop:hover{box-shadow:4px 4px 0 0 var(--brand)}}
/* floating CTA */
.fab-cta{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:70;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--pop);padding:14px 20px;box-shadow:0 10px 30px -10px rgba(44,48,46,0.35);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.fab-cta.on{opacity:1;transform:none;pointer-events:auto}
@media(hover:hover){.fab-cta:hover{background:var(--ink);color:#FFF5E9}}
.fab-cta span{transition:transform .3s var(--ease)}
@media(hover:hover){.fab-cta:hover span{transform:translateX(4px)}}
/* lab teaser on the homepage */
.lab-teaser{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(30px,4vw,56px);border-top:1px solid rgba(44,48,46,0.3)}
.lt-item{padding:clamp(18px,2vw,26px) clamp(14px,1.6vw,24px) clamp(18px,2vw,26px) 0;border-right:1px solid rgba(255,245,233,0.12)}
.lt-item+.lt-item{padding-left:clamp(14px,1.6vw,24px)}
.lt-item:last-child{border-right:0}
.lt-item h4{margin-top:12px;font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(.92rem,1.3vw,1.15rem);line-height:1.1;color:#FFF5E9}
.lab-cta{margin-top:clamp(28px,3.5vw,48px)}
.labpage{padding-top:0}
@media(max-width:900px){.lab-teaser{grid-template-columns:repeat(2,minmax(0,1fr))}.lt-item:nth-child(2){border-right:0}.lt-item:nth-child(3){padding-left:0}.lt-item:nth-child(n+3){border-top:1px solid rgba(255,245,233,0.12)}}
@media(max-width:520px){.lab-teaser{grid-template-columns:1fr}.lt-item{border-right:0;padding-left:0!important}.lt-item+.lt-item{border-top:1px solid rgba(255,245,233,0.12)}}
/* ---- contact form ---- */
.cform-sec{padding-block:clamp(40px,6vw,90px) clamp(70px,10vw,140px);border-top:1px solid var(--line)}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin-top:clamp(26px,3.5vw,48px);max-width:960px}
.cform label{display:flex;flex-direction:column;gap:8px}
.cform label.full,.cform .full{grid-column:1/-1}
.cform label>span{font-size:.92rem;font-weight:600;color:var(--ink)}
.cform label.chip{flex-direction:row;gap:0}
.cform .cqh{margin:6px 0 14px;font-size:.92rem;font-weight:600;color:var(--ink)}
.cform input:not([type=radio]),.cform select,.cform textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:0;padding:14px 16px;min-height:52px;-webkit-appearance:none;appearance:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.cform textarea{resize:vertical;min-height:130px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;background:#FFF5E9;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,77,255,0.12)}
.cform .btn{cursor:pointer;border:0}
@media(hover:hover){.cform .btn.pop:hover{box-shadow:4px 4px 0 0 var(--ink)}}
.cform .bad{border-color:#E0A458!important;background:#FFF5E9!important}
.cform-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px}
.cform-note{font-size:.9rem;color:var(--dim)}
.cform-ok{padding:16px 18px;background:rgba(224,164,88,0.21);border-left:4px solid var(--pop);color:var(--ink)}
@media(max-width:640px){.cform{grid-template-columns:1fr}}
/* ---- offers: one illustration per offer, beside its content ---- */
.svc-in.has-viz{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
.svc-viz{padding-bottom:clamp(30px,4vw,56px);opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.svc-row.open .svc-viz{opacity:1;transform:none;transition-delay:.25s}
.svc-viz .demo{max-width:440px;margin-left:auto;box-shadow:0 2px 6px rgba(44,48,46,0.05),0 30px 60px -40px rgba(44,48,46,0.35)}
@media(max-width:860px){.svc-in.has-viz{grid-template-columns:1fr}.svc-viz .demo{margin-left:0}}
.howto{padding-block:clamp(56px,8vw,110px)}
.howto .mhead{margin:14px 0 clamp(28px,3.5vw,48px)}

/* ---- projects: the photo unrolls inside its row on hover (no floating, tilted image) ---- */
.wfloat{display:none}
.wr-thumb{display:block;grid-column:1/-1;width:100%;height:0;opacity:0;margin-top:0;object-fit:cover;clip-path:inset(0 0 100% 0);transition:height .7s var(--ease),margin-top .7s var(--ease),opacity .35s var(--ease),clip-path .8s var(--ease)}
@media(hover:hover){
  .wrow:hover .wr-thumb{height:clamp(180px,22vw,320px);margin-top:clamp(14px,1.6vw,22px);opacity:1;clip-path:inset(0 0 0 0)}
}
@media(max-width:760px){.wr-thumb{height:auto;aspect-ratio:16/9;opacity:1;clip-path:none;margin-top:12px}}

/* ---- closing band + footer: calmer sizes ---- */
.cta h2{font-size:clamp(2rem,6.2vw,5.4rem);line-height:.95}
.mf-brand{font-size:clamp(1.18rem,1.5vw,1.42rem);gap:11px}
.mf-brand svg{height:.6875em}
.mf-brand b{letter-spacing:-.015em;line-height:1}
/* project rows: breathing room inside the black hover state */
.wrow{transition:padding .5s var(--ease)}
@media(hover:hover){ .wrow:hover{padding-inline:clamp(18px,2.2vw,36px)} }
/* room for capital accents (Ô, É…) inside the masked hero lines */
h1.mega .l{padding-top:.16em;margin-top:-.16em}

/* Support / Suivi band on black */
.band.accent.aftercare{--bg:var(--ink);background:var(--ink)}

/* Updates: sign-up to hear about new tools */
.ac-form{margin-top:clamp(26px,3vw,40px)}
.ac-lbl{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,245,233,0.6);margin-bottom:10px}
.ac-row{display:flex;flex-wrap:wrap;gap:10px}
.ac-row input{flex:1 1 220px;min-width:0;font:inherit;font-size:1rem;color:#FFF5E9;background:transparent;border:1px solid rgba(255,245,233,0.35);border-radius:0;padding:14px 16px}
.ac-row input::placeholder{color:rgba(255,245,233,0.45)}
.ac-row input:focus{outline:none;border-color:var(--pop)}
.ac-row input.bad{border-color:#E0A458}
.ac-ok{margin-top:12px;color:var(--pop);font-size:.95rem}.ac-row[hidden]{display:none}

/* closing band: buttons centred under the centred headline */
.cta .cta-band-btns{justify-content:center}

/* ============================================================
   DIAGNOSTIC questionnaire
   ============================================================ */
/* ---------- Diagnostic: 4-step questionnaire ---------- */
.dform-sec{padding-block:0 clamp(70px,10vw,140px)}
.dwrap{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:clamp(30px,5vw,80px);align-items:start;max-width:1180px}
.dform{background:#FFF5E9;border:1px solid var(--line);padding:clamp(22px,4vw,52px);min-width:0}
.dprog ol{display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:0 0 12px;padding:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.dprog li{transition:color .3s var(--ease)}
.dprog li.done{color:var(--ink)}
.dprog li.on{color:var(--brand)}
.dbar{height:3px;background:var(--line)}
.dprog{margin-bottom:clamp(30px,3.6vw,46px)}
.dbar i{display:block;height:100%;width:20%;background:var(--brand);transition:width .6s var(--ease)}
.dform:not(.is-steps) .dprog{display:none}
.dform fieldset{border:0;margin:0;padding:0;min-width:0}
.dform.is-steps .dstep:not(.on){display:none}
.dform.is-steps .dstep.on{animation:dIn .5s var(--ease)}
@keyframes dIn{from{opacity:0;transform:translateY(14px)}}
.dform legend{padding:0;margin-bottom:clamp(22px,2.6vw,32px);font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.02em;line-height:1}
.dform legend span{display:block;margin-bottom:12px;font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.16em;color:var(--brand)}
.dform:not(.is-steps) .dnav [data-next],.dform:not(.is-steps) .dnav [data-prev]{display:none}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-bottom:32px}
.dgrid .full{grid-column:1/-1}
.dform .dgrid label.full{margin-bottom:0}
.dform label{display:flex;flex-direction:column;gap:8px}
.dform label.full{margin-bottom:26px}
.dform label>span{font-size:.92rem;font-weight:600;color:var(--ink)}
.dform label>span em,.dqh em{font-style:normal;font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.dform label>span em{margin-left:8px}
.dform input:not([type=checkbox]):not([type=radio]),.dform textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:0;padding:14px 16px;min-height:52px;-webkit-appearance:none;appearance:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.dform textarea{resize:vertical;line-height:1.5}
.dform input:focus,.dform textarea:focus{outline:none;background:#FFF5E9;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,77,255,0.12)}
.dform .bad{border-color:#E0A458!important;background:#FFF5E9!important}
.dq{margin-bottom:32px}
.dqh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 14px;font-size:.98rem;font-weight:600;color:var(--ink)}
.dchips{display:flex;flex-wrap:wrap;gap:8px}
.dform .dother{margin-top:10px;max-width:420px;animation:dIn .35s var(--ease)}
.dform .dother[hidden]{display:none}
.chip{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dform label.chip{flex-direction:row;gap:0}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;line-height:1.2;padding:12px 16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .15s var(--ease)}
.chip span::before{content:"";flex:none;width:11px;height:11px;border:1.5px solid currentColor;opacity:.45;transition:background .25s var(--ease),border-color .25s var(--ease),opacity .25s}
.chip input[type=radio]+span::before{border-radius:50%}
@media(hover:hover){.chip:hover span{border-color:var(--ink)}}
.chip:active span{transform:scale(.97)}
.chip input:checked+span{background:var(--brand);border-color:var(--brand);color:#FFF5E9}
.chip input:checked+span::before{background:var(--pop);border-color:var(--pop);opacity:1}
.chip input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.dnav{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:26px;border-top:1px solid var(--line)}
.dnav>:only-child{margin-left:auto}
.dnav .btn{cursor:pointer;border:0}
.dnav .btn:disabled{opacity:.5;pointer-events:none}
.dback{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:none;border:0;padding:14px 2px;color:var(--dim);cursor:pointer;transition:color .25s}
@media(hover:hover){.dback:hover{color:var(--ink)}}
.dnote{margin:16px 0 0;font-size:.85rem;color:var(--dim)}
.dok{padding:clamp(6px,2vw,24px) 0}
.dok svg{width:58px;height:58px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dok circle{stroke:var(--brand);stroke-width:2}
.dok path{stroke:var(--pop);stroke-width:4;stroke-dasharray:40;stroke-dashoffset:40;animation:dTick .7s .2s var(--ease) forwards}
@keyframes dTick{to{stroke-dashoffset:0}}
.dok h2{margin:22px 0 12px;font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.02em;line-height:1}
.dok p{margin:0 0 28px;max-width:46ch;color:var(--dim);font-size:1.05rem;line-height:1.55}
.dok-btns{display:flex;flex-wrap:wrap;gap:12px}
.dside{position:sticky;top:120px}
.dside ol{list-style:none;counter-reset:ds;margin:26px 0 0;padding:0}
.dside li{counter-increment:ds;position:relative;padding:0 0 24px 44px;color:var(--dim);font-size:.95rem;line-height:1.5}
.dside li::before{content:"0" counter(ds);position:absolute;left:0;top:3px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--brand)}
.dside li b{display:block;color:var(--ink);font-weight:700}
@media(max-width:900px){.dwrap{grid-template-columns:1fr}.dside{position:static}.dside ol{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.dside li{padding:28px 0 0}}
@media(max-width:640px){
  .dform{padding:24px 18px 26px;margin-inline:-4px}
  .dgrid{grid-template-columns:1fr;gap:16px}
  .dprog ol{display:none}
  .chip span{padding:11px 14px;font-size:.92rem}
  .dnav .btn{flex:1;text-align:center;padding-inline:18px}
  .dside ol{grid-template-columns:1fr;gap:0}.dside li{padding:0 0 20px 40px}
  .dok-btns .btn{flex:1 1 100%;text-align:center}
}
/* Mobile: paired buttons stack full-width, same size */
@media(max-width:640px){.hero-cta,.cta-row,.cta-band-btns{display:flex;flex-direction:column;align-items:stretch;gap:12px}.hero-cta .btn,.cta-row .btn,.cta-band-btns .btn{width:100%;text-align:center;margin:0}}
/* ---- custom tool demo: a studio tab appears in the ribbon of any software, then does the work ---- */
.rib .capp .dot{background:var(--brand)}
.rib .cstat{color:rgba(44,48,46,0.73);background:rgba(44,48,46,0.04);border:1px solid var(--line)}
.rib .rw{position:absolute;top:42px;left:14px;right:14px;bottom:52px;border:1px solid rgba(59,77,255,0.25);border-radius:8px;overflow:hidden;background:#FFF5E9;display:flex;flex-direction:column}
.rib .rw-bar{flex:none;height:20px;display:flex;align-items:center;gap:5px;padding:0 9px;border-bottom:1px solid rgba(44,48,46,0.08);font-family:var(--mono);font-size:.5rem;letter-spacing:.06em;color:rgba(44,48,46,0.52);text-transform:uppercase}
.rib .rw-bar i{width:6px;height:6px;border-radius:50%;background:rgba(44,48,46,0.15)}
.rib .rw-app{position:relative;margin-left:6px;width:70px;height:12px}
.rib .rw-app em{position:absolute;left:0;top:0;line-height:12px;font-style:normal;opacity:0;animation:rwapp 40s infinite}
.rib .rw-app em:nth-child(2){animation-delay:10s}.rib .rw-app em:nth-child(3){animation-delay:20s}.rib .rw-app em:nth-child(4){animation-delay:30s}
.rib .rw-tabs{flex:none;height:20px;display:flex;align-items:stretch;gap:2px;padding:0 6px;background:#FFF5E9;border-bottom:1px solid rgba(44,48,46,0.08);font-family:var(--mono);font-size:.46rem;letter-spacing:.05em;color:rgba(44,48,46,0.52);text-transform:uppercase}
.rib .rw-tabs span{position:relative;display:flex;align-items:center;padding:0 6px;white-space:nowrap}
.rib .rw-tabs .on{color:#2C302E;box-shadow:inset 0 -2px 0 #2C302E;animation:rwoff 10s infinite}
.rib .rw-tabs .rw-new{color:#2C302E;font-weight:500;overflow:hidden;max-width:0;padding:0;opacity:0;animation:rwnew 10s infinite}
.rib .rw-new sup{margin-left:4px;font-size:.38rem;line-height:1;padding:2px 4px;border-radius:3px;background:var(--pop);color:#2C302E;letter-spacing:.04em}
.rib .rw-ribbon{flex:none;position:relative;height:38px;border-bottom:1px solid rgba(44,48,46,0.08)}
.rib .rw-std,.rib .rw-cus{position:absolute;inset:0;display:flex;align-items:center;gap:5px;padding:0 8px}
.rib .rw-std u{width:22px;height:22px;border-radius:4px;background:rgba(44,48,46,0.08);animation:rwstd 10s infinite}
.rib .rw-cus b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:40px;height:30px;border-radius:5px;font-family:var(--mono);font-weight:500;font-size:.4rem;letter-spacing:.03em;color:#2C302E;text-transform:uppercase;opacity:0;transform:scale(.6);animation:rwbtn 10s infinite}
.rib .rw-cus b svg{width:11px;height:11px;fill:none;stroke:var(--brand);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rib .rw-cus .c1{animation:rwbtn 10s infinite,rwpress 10s infinite}
.rib .rw-cus .c2{animation-delay:.1s}.rib .rw-cus .c3{animation-delay:.2s}.rib .rw-cus .c4{animation-delay:.3s}
.rib .rw-cus small{margin-left:auto;align-self:flex-end;padding-bottom:3px;font-family:var(--mono);font-size:.38rem;letter-spacing:.06em;color:rgba(44,48,46,0.41);text-transform:uppercase;white-space:nowrap;opacity:0;animation:rwbtn 10s infinite;animation-delay:.4s}
.rib .rw-canvas{position:relative;flex:1;min-height:0}
.rib .rw-plan{position:absolute;left:10px;top:6px;width:calc(100% - 20px);height:calc(100% - 34px)}
.rib .rw-plan .wall{fill:rgba(59,77,255,0.25)}.rib .rw-plan .room{fill:#FFF5E9}.rib .rw-plan .win{fill:#FFF5E9;stroke:rgba(44,48,46,0.29);stroke-width:.4}
.rib .rw-plan text{font-family:var(--mono);font-size:5.5px;fill:rgba(44,48,46,0.41);letter-spacing:.04em}
.rib .rw-plan .wn{fill:rgba(59,77,255,0.17);stroke:var(--brand);stroke-width:.5;opacity:0;animation:rwwin 10s infinite}
.rib .rw-rule{position:absolute;right:10px;bottom:6px;z-index:2;font-family:var(--mono);font-size:.46rem;letter-spacing:.06em;text-transform:uppercase;color:#2C302E;background:rgba(224,164,88,0.26);border:1px solid rgba(224,164,88,0.55);border-radius:100px;padding:3px 8px;opacity:0;animation:rwrule 10s infinite}

.rib .rw-done{position:absolute;right:10px;bottom:6px;font-family:var(--mono);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:#419D78;background:rgba(65,157,120,0.09);border:1px solid rgba(65,157,120,0.28);border-radius:100px;padding:3px 8px;opacity:0;animation:rwdone 10s infinite}
.rib{container-type:inline-size}
.rib .rw-cur{position:absolute;width:11px;height:15px;fill:#2C302E;stroke:#FFF5E9;stroke-width:1;left:72%;top:80%;opacity:0;animation:rwcur 10s infinite;z-index:3;--cy:57px}
@container (max-width:360px){.rib .rw-bar{height:14px;font-size:.42rem}.rib .rw-bar i{width:4px;height:4px}.rib .rw-tabs{height:18px}.rib .rw-tabs span:nth-child(3),.rib .rw-tabs span:nth-child(4){display:none}.rib .rw-ribbon{height:32px}.rib .rw-cus b{height:26px}.rib .rw-std u{width:18px;height:18px}.rib .rw-cur{--cy:44px}.rib .rw-cus small{display:none}.rib .rw-rule{font-size:.4rem}}
@keyframes rwapp{0%,23%{opacity:1}25%,100%{opacity:0}}
@keyframes rwnew{0%,12%{max-width:0;padding:0;opacity:0;box-shadow:inset 0 0 0 transparent}18%,26%{max-width:120px;padding:0 6px;opacity:1;box-shadow:inset 0 0 0 transparent}30%,95%{max-width:120px;padding:0 6px;opacity:1;box-shadow:inset 0 -2px 0 var(--brand)}100%{max-width:0;padding:0;opacity:0;box-shadow:inset 0 0 0 transparent}}
@keyframes rwoff{0%,26%{color:#2C302E;box-shadow:inset 0 -2px 0 #2C302E}30%,95%{color:rgba(44,48,46,0.52);box-shadow:inset 0 0 0 transparent}100%{color:#2C302E;box-shadow:inset 0 -2px 0 #2C302E}}
@keyframes rwstd{0%,26%{opacity:1}30%,95%{opacity:0}100%{opacity:1}}
@keyframes rwbtn{0%,30%{opacity:0;transform:scale(.6)}35%,95%{opacity:1;transform:none}100%{opacity:0;transform:scale(.6)}}
@keyframes rwpress{0%,51%{background:transparent}53%,58%{background:rgba(224,164,88,0.26)}62%,100%{background:transparent}}
@keyframes rwcur{0%,36%{left:72%;top:80%;opacity:0;transform:none}40%{left:72%;top:80%;opacity:1}50%{left:24px;top:var(--cy);transform:none}52%{transform:scale(.8)}54%{left:24px;top:var(--cy);transform:none;opacity:1}68%{opacity:1}72%,100%{left:24px;top:var(--cy);opacity:0}}
@keyframes rwwin{0%,55%{opacity:0;fill:var(--pop)}58%{opacity:1;fill:var(--pop)}68%,94%{opacity:1;fill:rgba(59,77,255,0.17)}99%,100%{opacity:0}}
@keyframes rwrule{0%,55%{opacity:0}58%,74%{opacity:1}77%,100%{opacity:0}}
@keyframes rwdone{0%,76%{opacity:0;transform:translateY(3px)}79%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes rwtag{0%,58%{opacity:0;transform:translateY(3px)}63%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.rib *{animation:none!important}.rib .rw-std{display:none}.rib .rw-tabs .rw-new{max-width:none;padding:0 6px;opacity:1}.rib .rw-tabs .rw-new{box-shadow:inset 0 -2px 0 var(--brand)}.rib .rw-tabs .on{color:rgba(44,48,46,0.52);box-shadow:none}.rib .rw-cus b,.rib .rw-cus small,.rib .rw-plan .wn,.rib .rw-rule,.rib .rw-done{opacity:1;transform:none}.rib .rw-app em:first-child{opacity:1}}
@media(max-width:700px){.ask-grid .demo.rib{aspect-ratio:1/1}}
/* specs demo: the same code on the model element and on the spec article */
.vdoc .tg{opacity:0;animation:vfade 10s infinite}.vdoc .tg.k2{animation-delay:.5s}.vdoc .tg.k3{animation-delay:1s}
.vdoc .tg rect{fill:var(--pop);stroke:#2C302E;stroke-width:.4}.vdoc .tg text{font-size:5px;font-weight:600;text-anchor:middle}
.vdoc .rw text{font-size:5.4px}.vdoc .rw .cd{font-weight:600;fill:var(--brand)}
.vdoc .rw .hl{fill:rgba(224,164,88,0.26);opacity:0;animation:vhl 10s infinite}.vdoc .rw.k2 .hl{animation-delay:.5s}.vdoc .rw.k3 .hl{animation-delay:1s}
@keyframes vhl{0%,24%{opacity:0}30%,40%{opacity:1}50%,100%{opacity:0}}
/* detail demo: a dimension chain appears after the annotations */
.vdet .dim{opacity:0;animation:vfade 10s infinite;animation-delay:2.4s}
.vdet .dim path{fill:none;stroke:#2C302E;stroke-width:.4}
.vdet .dim text{font-size:4.6px;text-anchor:middle;opacity:1;animation:none;fill:var(--brand);font-weight:600}
.cform select{padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2320222a' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;cursor:pointer}
/* Logo mark = exact cap height of MIRALTO (Archivo 900 caps measured at .6875em), sitting on the text baseline */
.brand,.mf-brand{align-items:baseline}
/* Studio: "the name" section, logo with a note showing where the eye is */
.namesec{padding-block:clamp(56px,8vw,110px)}
.name-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,62ch);gap:clamp(30px,6vw,90px);align-items:center;margin-top:clamp(18px,2.4vw,30px)}
.name-fig{margin:0}
.name-fig svg{width:100%;height:auto;display:block}
.name-note path{fill:none;stroke:var(--pop);stroke-width:1.6}
.name-note circle{fill:var(--pop)}
.name-note text{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;fill:var(--dim)}
.name-text .mhead{margin-bottom:clamp(20px,2.6vw,32px)}
.name-text p{margin:0 0 16px}
.name-text em{font-style:normal;color:var(--brand);font-weight:600}
@media(max-width:820px){.name-grid{grid-template-columns:1fr}.name-fig{max-width:340px}}
/* Accented capitals (É, À, Ô, Ù…) need room above them: display headings get just enough line-height so an accent
   never touches the line above, and the reveal mask leaves space for accents on the first line. */
.cl.in{clip-path:inset(-25% 0 -10% 0)}
.phero h1{line-height:1}
.cta h2{line-height:1.02}
.mhead,.tech-head h2,.work h3,.astep h3,.dform legend,.off h4,.idx a .t,.sg-big{line-height:1.08}
.caps h3,.svc-t h3,.ac-h,.wr-name{line-height:1.04}

/* touch: no double-tap-to-zoom delay on controls, no grey flash; hover effects only exist on mouse/trackpad (@media(hover:hover)) */
a,button,label,select,summary,[role=button]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(hover:none){.btn:active,.navcta:active,.fab-cta:active{transform:scale(.97);transition-duration:.1s}}

/* page change: the curtain mark lights up floor by floor, bottom to top, quickly */
.curtain svg path{fill:rgba(59,77,255,0.23);transition:fill .1s linear}
body.covering .curtain svg{transition:opacity .08s}
body.covering .curtain svg path{fill:var(--brand)}
body.covering .curtain svg path:nth-last-child(1){transition-delay:0.120s}
body.covering .curtain svg path:nth-last-child(2){transition-delay:0.155s}
body.covering .curtain svg path:nth-last-child(3){transition-delay:0.190s}
body.covering .curtain svg path:nth-last-child(4){transition-delay:0.225s}
body.covering .curtain svg path:nth-last-child(5){transition-delay:0.260s}
body.covering .curtain svg path:nth-last-child(6){transition-delay:0.295s}
body.covering .curtain svg path:nth-last-child(7){transition-delay:0.330s}
body.covering .curtain svg path:nth-last-child(8){transition-delay:0.365s}

/* legal notice + privacy page */
.legal-hero{min-height:auto;padding-top:clamp(130px,16vw,190px)}
.legal{padding-block:0 clamp(70px,10vw,140px)}
.legal-in{max-width:760px}
.legal h2{font-family:var(--sans);font-weight:700;font-size:clamp(1.2rem,1.6vw,1.45rem);letter-spacing:-.01em;margin:clamp(34px,4vw,52px) 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--dim);font-size:1rem;line-height:1.65;margin:0 0 12px}
.legal p b{color:var(--ink);font-weight:600}
.legal a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.legal-upd{margin-top:36px!important;font-family:var(--mono);font-size:.72rem!important;letter-spacing:.08em;text-transform:uppercase}
.legal mark.todo{background:rgba(224,164,88,0.26);color:#2C302E;padding:0 4px}
.mf-copy a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){.mf-copy a:hover{color:#2C302E}}

/* ================= LAB HUB (2026-10) ================= */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1.mega.mega-s{font-size:clamp(2rem,7.6vw,7.6rem)}

/* light inputs for the small forms that sit on light backgrounds */
.hero-nl .ac-row input,.rs-form .ac-row input,.qz-form .ac-row input,.lv-form input{color:var(--ink);background:#FFF5E9;border:1px solid var(--line)}
.hero-nl .ac-row input::placeholder,.rs-form .ac-row input::placeholder,.qz-form .ac-row input::placeholder,.lv-form input::placeholder{color:var(--dim2)}
.hero-nl .ac-row input:focus,.rs-form .ac-row input:focus,.qz-form .ac-row input:focus,.lv-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,77,255,0.12)}
.hero-nl .ac-ok,.rs-form .ac-ok,.qz-form .ac-ok,.lv-form .ac-ok{color:var(--brand);font-weight:600}
.ac-row .btn{cursor:pointer;border:0}

/* hero: newsletter first, the Lab second */
.hero-nl{flex-direction:column;align-items:flex-start;gap:18px}
.hero-nl .nl-form{width:min(100%,560px)}
.hero-lab{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--brand);padding-bottom:4px}
@media(hover:hover){.hero-lab:hover{color:var(--brand)}}

/* newsletter band (every page) */
.nl-band .nl-p{max-width:52ch;margin:clamp(22px,3vw,34px) auto 0;color:var(--fdim);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.55}
.nl-band .nl-form{max-width:560px;margin:clamp(24px,3vw,36px) auto 0}
.nl-band .ac-row{justify-content:center}

/* home demo: instructions on the left, one card playing on the right */
.dm{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,3vw,48px);align-items:center}
.dm-asks{display:flex;flex-direction:column;gap:10px}
.dm-ask{display:flex;gap:10px;align-items:baseline;text-align:left;font-family:var(--mono);font-size:clamp(.8rem,1vw,.92rem);letter-spacing:.02em;color:var(--ink);background:#FFF5E9;border:1px solid var(--line);border-radius:12px;padding:16px 18px;cursor:pointer;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.dm-ask span{color:var(--brand)}
.dm-ask.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,77,255,0.12)}
.dm-ask:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media(hover:hover){.dm-ask:not(.on):hover{transform:translateX(4px);border-color:rgba(59,77,255,0.4)}}
.dm-stage .demo{max-width:620px;margin-left:auto;box-shadow:0 2px 6px rgba(44,48,46,0.05),0 30px 60px -40px rgba(44,48,46,0.35)}
.dm-stage .demo[hidden]{display:none}
@media(max-width:860px){.dm{grid-template-columns:1fr}.dm-asks{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gut));padding:2px var(--gut) 6px}.dm-ask{flex:none;scroll-snap-align:start;max-width:78vw}.dm-stage .demo{margin:0 auto}}

/* 3-step path: links under each card */
.astep .alinks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto;padding-top:18px}
.astep .alinks a{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);border-bottom:1px solid currentColor;padding-bottom:3px}

/* journal */
.jr{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.jr-row{display:grid;grid-template-columns:clamp(110px,12vw,150px) 1fr auto;gap:clamp(12px,2.4vw,36px);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.jr-row time{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.jr-row p{font-size:1.02rem;line-height:1.55;color:var(--ink)}
.jr-row p a{color:var(--brand);white-space:nowrap}
.jr-row em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:4px 9px;white-space:nowrap}
.jr-all{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);border-bottom:1px solid currentColor;padding-bottom:4px}
.jr-home{padding-block:clamp(56px,8vw,110px)}
@media(max-width:640px){.jr-row{grid-template-columns:1fr;gap:6px}.jr-row em{justify-self:start}}

/* lab page: anchors, sections */
.subnav{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--gut) clamp(30px,4vw,50px);margin-top:-10px}
.subnav a{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:8px 14px;background:#FFF5E9}
@media(hover:hover){.subnav a:hover{border-color:var(--brand);color:var(--brand)}}
#articles,#radar,#banc,#journal{padding-block:clamp(56px,8vw,110px)}
.sec-lead{color:var(--dim);font-size:1.05rem;line-height:1.6;max-width:62ch;margin:-20px 0 clamp(28px,3.5vw,44px)}
.sec-lead b{color:var(--ink)}
.alt-soft{box-shadow:0 0 0 100vmax var(--paper-2);clip-path:inset(0 -100vmax);background:var(--paper-2)}
.ar-grid,.rs-grid,.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:clamp(12px,1.4vw,20px)}
.ar-card,.rs-card,.lv-rep{position:relative;display:flex;flex-direction:column;gap:10px;background:#FFF5E9;border:1px solid var(--line);padding:clamp(22px,2.4vw,32px);color:var(--ink);transition:border-color .3s var(--ease),transform .3s var(--ease)}
@media(hover:hover){a.ar-card:hover,a.rs-card:hover,a.lv-rep:hover{border-color:var(--brand);transform:translateY(-3px)}}
.ar-card time,.lv-rep time,.rs-type{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.ar-card h4,.rs-card h4,.lv-rep h4{font-family:var(--sans);font-weight:700;font-size:clamp(1.15rem,1.5vw,1.35rem);letter-spacing:-.01em;line-height:1.25}
.ar-card p,.rs-card p{color:var(--dim);line-height:1.55}
.ar-go,.rs-go,.lv-go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.rs-acc{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:4px 9px;align-self:flex-start}
.rs-lock .rs-acc{background:rgba(224,164,88,0.18);border-color:rgba(224,164,88,0.48);color:#2C302E}
.rs-form{margin-top:auto;padding-top:8px}
.rs-form .ac-row input{flex-basis:160px;padding:12px 14px}
.rs-form .btn{padding:13px 18px}
.rs-sec{padding-block:0 clamp(70px,9vw,130px)}

/* radar: semicircle rings + notes */
.radar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,60px);align-items:start}
.rd-svg{width:100%;height:auto;overflow:visible}
.rd-ring{fill:none;stroke:rgba(44,48,46,0.14);stroke-width:1.2}
.rd-ring.r0{fill:rgba(59,77,255,0.08)}.rd-ring.r1{fill:rgba(59,77,255,0.04)}
.rd-lbl{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;fill:var(--dim);text-anchor:middle}
.rd-dot{cursor:pointer}
.rd-dot circle{stroke:#FFF5E9;stroke-width:2;transition:r .25s var(--ease)}
.rd-dot text{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--ink);text-anchor:middle}
.rd-dot.r-adopter circle{fill:var(--brand)}.rd-dot.r-tester circle{fill:rgba(59,77,255,0.74)}.rd-dot.r-surveiller circle{fill:var(--pop)}.rd-dot.r-eviter circle{fill:rgba(44,48,46,0.23)}
.rd-dot.on circle,.rd-dot:focus-visible circle{r:10}
.rd-dot:focus{outline:none}
.rd-col{margin-bottom:22px}
.rd-col h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.rd-col h4::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.rd-col.r-adopter h4{color:var(--brand)}.rd-col.r-tester h4{color:#3B4DFF}.rd-col.r-surveiller h4{color:#E0A458}.rd-col.r-eviter h4{color:var(--dim)}
.rd-col ul{list-style:none;margin:0;padding:0}
.rd-col li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid transparent;border-top-color:var(--line);transition:border-color .3s,background .3s}
.rd-col li.on{border-color:var(--brand);background:#FFF5E9}
.rd-col li b{font-weight:700}.rd-col li span{color:var(--dim);line-height:1.5;font-size:.95rem}
@media(max-width:860px){.radar{grid-template-columns:1fr}.rd-svg{max-width:560px}}

/* test bench */
.bn-grid{display:grid;gap:16px}
.bn-card{background:#FFF5E9;border:1px solid var(--line);padding:clamp(20px,2.4vw,30px);overflow-x:auto}
.bn-head{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-bottom:14px}
.bn-head time{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.bn-head h4{font-weight:700;font-size:1.2rem}
.bn-t{width:100%;border-collapse:collapse;min-width:520px}
.bn-t th{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--line)}
.bn-t td{padding:12px 10px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45;color:var(--dim)}
.bn-t td b{color:var(--ink)}
.bn-r{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:100px;white-space:nowrap}
.bn-yes{background:rgba(65,157,120,0.13);color:#419D78}.bn-part{background:rgba(224,164,88,0.21);color:#2C302E}.bn-no{background:rgba(224,164,88,0.15);color:#E0A458}
.bn-c{margin-top:14px;line-height:1.55}

/* quiz */
.qz-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start;padding-block:clamp(56px,8vw,110px)}
.qz-intro .mhead{margin-bottom:28px}
.quiz{background:#FFF5E9;border:1px solid var(--line);padding:clamp(24px,3vw,40px);min-height:320px}
.qz-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.qz-bar{height:3px;background:var(--line);margin:12px 0 20px}.qz-bar i{display:block;height:100%;background:var(--brand);transition:width .4s var(--ease)}
.qz-q{font-weight:700;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.3;letter-spacing:-.01em;margin-bottom:18px}
.qz-a{display:grid;gap:10px}
.qz-opt{text-align:left;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:14px 16px;cursor:pointer;transition:border-color .25s,background .25s}
@media(hover:hover){.qz-opt:hover{border-color:var(--brand);background:#FFF5E9}}
.qz-opt:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.quiz .dback{margin-top:16px}
.qz-score{font-family:var(--exp);font-weight:900;font-size:clamp(2.6rem,5vw,4rem);line-height:1;margin:6px 0 14px;color:var(--dim2)}.qz-score b{color:var(--brand)}
.qz-d{color:var(--dim);line-height:1.6;margin-bottom:16px}
.qz-links{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.qz-links a{color:var(--brand);font-weight:600}
.qz-form{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.qz-ml{font-size:.95rem;color:var(--dim);margin-bottom:10px}
@media(max-width:860px){.qz-wrap{grid-template-columns:1fr}}

/* lives */
.lv-sec{padding-block:0 clamp(60px,8vw,110px)}
.lv-next{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,60px);background:#FFF5E9;border:1px solid var(--line);padding:clamp(24px,3.4vw,48px)}
.lv-when{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.05;margin:14px 0 10px;color:var(--brand)}
.lv-t{font-weight:700;font-size:clamp(1.2rem,1.8vw,1.6rem);line-height:1.25;margin-bottom:10px}
.lv-d{color:var(--dim);line-height:1.6;max-width:52ch}
.lv-meta{margin-top:16px;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.lv-form{display:flex;flex-direction:column;gap:14px;align-self:center}
.lv-form label{display:flex;flex-direction:column;gap:7px}
.lv-form label span{font-size:.9rem;font-weight:600}
.lv-form input{font:inherit;font-size:16px;padding:13px 15px;border-radius:0;width:100%}
.lv-form .btn{width:100%;text-align:center}
.lv-how{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(28px,3.4vw,44px)}
.lv-how h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:8px}
.lv-how p{color:var(--dim);line-height:1.55}
.lv-thumb{position:relative;display:block;aspect-ratio:16/9;margin:-1px -1px 6px;overflow:hidden;background:var(--paper-2)}
.lv-thumb img{width:100%;height:100%;object-fit:cover}
.lv-thumb i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:2rem;color:#FFF5E9;text-shadow:0 2px 12px rgba(44,48,46,0.4)}
@media(max-width:860px){.lv-next{grid-template-columns:1fr}.lv-how{grid-template-columns:1fr}}

/* workshops 2027: three levels */
.lv-offers{grid-template-columns:repeat(3,minmax(0,1fr))}
.off-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
@media(max-width:860px){.lv-offers{grid-template-columns:1fr}.lv-offers .off{border-left:0;border-top:1px solid var(--line)}.lv-offers .off:first-child{border-top:0}}

/* about: how the Lab works */
.approach-lab{padding-block:clamp(56px,8vw,110px)}
.apl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px)}
.apl-grid .anum{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--brand)}
.apl-grid h3{font-weight:700;font-size:clamp(1.15rem,1.5vw,1.35rem);margin:10px 0 8px}
.apl-grid p{color:var(--dim);line-height:1.55}
@media(max-width:760px){.apl-grid{grid-template-columns:1fr}}

/* article and resource pages */
.post{max-width:820px;padding-top:clamp(120px,15vw,180px);padding-bottom:clamp(60px,8vw,110px)}
.post-back{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.post-date{display:block;margin-top:28px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.post-h{font-family:var(--exp);font-weight:900;text-transform:uppercase;font-size:clamp(2rem,5vw,3.8rem);line-height:1.02;letter-spacing:-.02em;margin:12px 0 18px}
.post-lead{max-width:58ch}
.post-body{margin-top:clamp(28px,4vw,48px);font-size:1.06rem;line-height:1.7;color:rgba(44,48,46,0.98)}
.post-body>*+*{margin-top:1em}
.post-body h2{font-family:var(--sans);font-weight:700;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.25;margin-top:2em;color:var(--ink)}
.post-body h3{font-weight:700;font-size:1.15rem;margin-top:1.6em}
.post-body a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.post-body ul,.post-body ol{padding-left:1.3em}.post-body li+li{margin-top:.35em}
.post-body blockquote{border-left:3px solid var(--pop);padding:6px 0 6px 18px;color:var(--dim)}
.post-body pre{background:var(--ink);color:rgba(59,77,255,0.18);padding:18px 20px;overflow-x:auto;font-family:var(--mono);font-size:.84rem;line-height:1.6;border-radius:6px}
.post-body code{font-family:var(--mono);font-size:.9em}
.post-body :not(pre)>code{background:var(--paper-2);padding:1px 5px;border-radius:3px}
.post-body img{max-width:100%;height:auto;border:1px solid var(--line)}
.phero.phero-s{min-height:auto;padding-top:clamp(130px,16vw,200px);padding-bottom:clamp(30px,4vw,56px)}
.post-body pre{position:relative;padding-top:42px}
.cp-btn{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#FFF5E9;background:rgba(255,245,233,0.12);border:1px solid rgba(255,245,233,0.25);padding:6px 10px;cursor:pointer}
@media(hover:hover){.cp-btn:hover{background:var(--pop);border-color:var(--pop);color:var(--ink)}}

/* ---- home demo v2: a dark "agent" window — tabs, typed instruction, step log, result card ---- */
.dmx-win{position:relative;background:#2C302E;color:#FFF5E9;border-radius:20px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,245,233,0.06) inset,0 40px 90px -40px rgba(59,77,255,0.55),0 24px 50px -30px rgba(44,48,46,0.6)}
.dmx-win::before{content:"";position:absolute;inset:-40% -10% auto auto;width:70%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(59,77,255,0.38),transparent 70%);filter:blur(10px);animation:dmxglow 9s ease-in-out infinite alternate}
@keyframes dmxglow{to{transform:translate(-18%,14%) scale(1.15)}}
.dmx-bar{position:relative;display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid rgba(255,245,233,0.08);font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,245,233,0.55)}
.dmx-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,245,233,0.16)}
.dmx-bar i:first-child{background:#E0A458}.dmx-bar i:nth-child(2){background:var(--pop)}.dmx-bar i:nth-child(3){background:rgba(65,157,120,0.78)}
.dmx-bar span{margin-left:8px}
.dmx-auto{margin-left:auto;font-style:normal;display:flex;align-items:center;gap:7px;color:rgba(255,245,233,0.45)}
.dmx-auto::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(65,157,120,0.78);box-shadow:0 0 0 0 rgba(65,157,120,0.47);animation:lpulse 2s infinite}
.manual .dmx-auto{visibility:hidden}
.dmx-tabs{position:relative;display:flex;gap:8px;padding:14px 18px 0;overflow-x:auto;scrollbar-width:none}
.dmx-tabs::-webkit-scrollbar{display:none}
.dmx-win .dm-ask{position:relative;overflow:hidden;flex:none;background:rgba(255,245,233,0.04);border:1px solid rgba(255,245,233,0.1);color:rgba(255,245,233,0.72);border-radius:10px;padding:11px 14px;font-size:.74rem;box-shadow:none}
.dmx-win .dm-ask span{color:var(--pop)}
.dmx-win .dm-ask.on{background:rgba(255,245,233,0.1);border-color:rgba(224,164,88,0.55);color:#FFF5E9;box-shadow:0 0 24px -6px rgba(224,164,88,0.35)}
@media(hover:hover){.dmx-win .dm-ask:not(.on):hover{transform:none;border-color:rgba(255,245,233,0.3);color:#FFF5E9}}
.dm-prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--pop)}
.dm-ask.run .dm-prog{width:100%;transition:width var(--cycle,11s) linear}
.dmx-body{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,2.6vw,36px);padding:clamp(18px,2.4vw,32px)}
.dmx-con{font-family:var(--mono);font-size:clamp(.78rem,.95vw,.9rem);line-height:1.6;align-self:center}
.dmx-run[hidden]{display:none}
.dmx-q{color:#FFF5E9;margin-bottom:18px;min-height:3.2em}
.dmx-q span{color:var(--pop)}
.dmx-caret{display:inline-block;width:.55em;height:1.1em;margin-left:2px;vertical-align:-.18em;background:var(--pop);animation:dmxcaret 1s steps(1) infinite}
.typed .dmx-caret{opacity:0;animation:none}
@keyframes dmxcaret{50%{opacity:0}}
.dmx-log{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.dmx-log li{display:flex;align-items:center;gap:10px;color:rgba(255,245,233,0.6);opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease),color .3s}
.dmx-log li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,245,233,0.25);border-top-color:var(--pop);animation:dmxspin .7s linear infinite}
.dmx-log li.on{opacity:1;transform:none}
.dmx-log li.done{color:rgba(255,245,233,0.85)}
.dmx-log li.done::before{animation:none;border:0;width:12px;height:12px;background:rgba(65,157,120,0.78);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.dmx-log li.ok{color:var(--pop);font-weight:500}
.dmx-log li.ok.done::before{background:var(--pop)}
@keyframes dmxspin{to{transform:rotate(360deg)}}
.dmx-win .dm-stage .demo{max-width:none;margin:0;box-shadow:0 30px 60px -30px rgba(44,48,46,0.6);transition:opacity .5s var(--ease),filter .5s var(--ease),transform .6s var(--ease)}
.dmx-win .dm-stage .demo.wait{opacity:.28;filter:grayscale(1) blur(1px);transform:scale(.97)}
.dmx-win .dm-stage .demo.wait *{animation-play-state:paused!important}
@media(max-width:860px){.dmx-body{grid-template-columns:1fr}.dmx-q{min-height:0}.dmx-tabs{padding-inline:14px}.dmx-win .dm-ask{max-width:none}}
@media(prefers-reduced-motion:reduce){.dmx-win::before,.dmx-caret,.dmx-log li::before{animation:none}.dmx-log li{opacity:1;transform:none}}
.howto .cta-row{margin-top:clamp(28px,3.4vw,44px)}

/* home: Lab now + the architect behind it */
#lab-now{padding-top:clamp(70px,9vw,130px)}
.who{padding-block:clamp(70px,9vw,130px)}
.who-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,6vw,100px);align-items:center}
.who .portrait{max-width:420px}
.who .mhead{max-width:16ch;margin-bottom:28px}
.who .lead{max-width:52ch;margin-bottom:16px}
.who .muted{max-width:56ch;line-height:1.65}
.who .jr-all{margin-top:22px}
@media(max-width:760px){.who-grid{grid-template-columns:1fr;gap:44px}.who .portrait{max-width:220px}}

/* ---- tool directory (Outils) ---- */
#annuaire{padding-block:clamp(56px,8vw,110px)}
.tl-bar{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin-bottom:clamp(20px,2.4vw,30px)}
.tl-chips{display:flex;flex-wrap:wrap;gap:8px}
.tl-chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:#FFF5E9;border:1px solid var(--line);border-radius:100px;padding:9px 14px;cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.tl-chip i{font-style:normal;color:var(--dim2);margin-left:4px}
.tl-chip.on{background:var(--ink);border-color:var(--ink);color:#FFF5E9}.tl-chip.on i{color:rgba(255,245,233,0.55)}
@media(hover:hover){.tl-chip:not(.on):hover{border-color:var(--brand);color:var(--brand)}}
.tl-search{font:inherit;font-size:16px;color:var(--ink);background:#FFF5E9;border:1px solid var(--line);border-radius:100px;padding:11px 18px;min-width:min(100%,260px)}
.tl-search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,77,255,0.12)}
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:clamp(10px,1.2vw,16px)}
.tl-card{position:relative;display:flex;flex-direction:column;gap:8px;background:#FFF5E9;border:1px solid var(--line);padding:22px 22px 20px;transition:border-color .3s var(--ease),transform .3s var(--ease),opacity .3s}
.tl-card[hidden]{display:none}
.tl-card.tested{border-color:rgba(59,77,255,0.35);box-shadow:inset 0 3px 0 var(--brand)}
@media(hover:hover){.tl-card:hover{border-color:var(--brand);transform:translateY(-3px)}}
.tl-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.tl-cat{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tl-ring{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:100px;color:#FFF5E9}
.tl-ring.r-adopter{background:var(--brand)}.tl-ring.r-tester{background:rgba(59,77,255,0.74)}.tl-ring.r-surveiller{background:var(--pop);color:var(--ink)}.tl-ring.r-eviter{background:rgba(44,48,46,0.23);color:var(--ink)}
.tl-card h4{font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.tl-card p{color:var(--dim);line-height:1.5;font-size:.95rem}
.tl-avis{color:var(--ink)!important;background:var(--paper);padding:10px 12px;border-left:3px solid var(--brand)}
.tl-avis b{font-weight:700}
.tl-not{font-family:var(--mono);font-size:.6rem!important;letter-spacing:.08em;text-transform:uppercase;color:var(--dim2)!important}
.tl-go{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.tl-none{color:var(--dim);margin-top:16px}
.tl-note{margin-top:28px;color:var(--dim);font-size:.92rem}.tl-note a{color:var(--brand);text-decoration:underline}

/* ---- maturity gauge: the MIRALTO mark fills from the bottom as a tool moves through the Lab ---- */
.mk{width:15px;height:15px;flex:none;display:inline-block;vertical-align:-2px}
.mk path{fill:rgba(44,48,46,0.14)}
.mk-d path{fill:rgba(44,48,46,0.18)}
.mk[data-l="1"] path:nth-last-child(-n+2),.mk[data-l="2"] path:nth-last-child(-n+4),.mk[data-l="3"] path:nth-last-child(-n+6),.mk[data-l="4"] path{fill:var(--brand);animation:mkfill .5s var(--ease) both}
.mk-d[data-l="1"] path:nth-last-child(-n+2),.mk-d[data-l="2"] path:nth-last-child(-n+4),.mk-d[data-l="3"] path:nth-last-child(-n+6),.mk-d[data-l="4"] path{fill:var(--pop)}
.mk path:nth-last-child(1){animation-delay:.2s}.mk path:nth-last-child(2){animation-delay:.26s}.mk path:nth-last-child(3){animation-delay:.32s}.mk path:nth-last-child(4){animation-delay:.38s}
.mk path:nth-last-child(5){animation-delay:.44s}.mk path:nth-last-child(6){animation-delay:.5s}.mk path:nth-last-child(7){animation-delay:.56s}.mk path:nth-last-child(8){animation-delay:.62s}
@keyframes mkfill{from{opacity:.15}}
@media(prefers-reduced-motion:reduce){.mk path{animation:none}}
.lab-st{gap:10px}
.lab-st .mk{width:24px;height:24px}
.tl-ring{display:inline-flex;align-items:center;gap:7px;background:var(--paper)!important;color:var(--ink)!important;border:1px solid var(--line);padding:4px 10px 4px 8px}
/* members: plain cards, no gauge */
.members .astep h3{margin-top:8px}
.members .astep .anum{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--brand)}
.lv-empty{color:var(--dim);font-size:1.05rem;max-width:52ch}
.tl-ring .mk{width:18px;height:18px}

/* gauge legend (Lab pipeline / tool rings) */
.mk-legend{list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.mk-legend li{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.mk-legend .mk{width:22px;height:22px}
.mk-legend.dark li{color:rgba(255,245,233,0.6)}
.mk-legend li+li::before{content:'→';margin-right:16px;color:var(--dim2)}
.mk-legend.dark li+li::before{color:rgba(255,245,233,0.3)}
#annuaire .mk-legend{margin:-14px 0 clamp(24px,3vw,36px)}
/* spacing: sections that sat too close to the next band */
#guides,#videos{padding-block:clamp(56px,8vw,110px)}
.rs-sec,.lv-sec{padding-bottom:clamp(60px,8vw,110px)}

/* button logic: saffron = join / subscribe (header included); outline = go somewhere */
.navcta{background:var(--pop);border-color:var(--pop);color:var(--ink)}
@media(hover:hover){.navcta:hover{box-shadow:5px 5px 0 0 var(--ink)}}

/* demo v3: all cards stacked and playing, the chosen one fades in (instant, smooth) */
.dmx-win .dm-stage{display:grid}
.dmx-win .dm-stage .demo{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .35s}
.dmx-win .dm-stage .demo.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.dmx-win .dm-stage .demo[hidden]{display:block}
.dmx-body{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.dmx-win .dm-stage .demo{max-height:520px}

/* ================= LAB FEED: one timeline for tests, articles, guides and notes ================= */
.fd-sec{padding-block:0 clamp(70px,9vw,130px)}
.fd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin-bottom:clamp(28px,3.4vw,44px)}
.fd-stats div{padding:clamp(18px,2.4vw,30px) 0;display:flex;flex-direction:column;gap:6px}
.fd-stats div+div{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--line)}
.fd-stats b{font-family:var(--exp);font-weight:900;font-size:clamp(2.4rem,5vw,4.2rem);line-height:.9;letter-spacing:-.03em;color:var(--brand)}
.fd-stats span{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.fd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,3vw,40px)}
.fd-list{position:relative;list-style:none;margin:0;padding:0 0 0 clamp(54px,6vw,86px)}
.fd-line{position:absolute;left:clamp(17px,2.1vw,29px);top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
.fd-line i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);background:linear-gradient(var(--brand),var(--pop));border-radius:2px;transition:height .15s linear}
.fd-month{position:relative;margin:clamp(10px,1.4vw,18px) 0 16px}
.fd-month span{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.01em;color:var(--ink)}
.fd-month::before{content:"";position:absolute;left:calc(-1*clamp(54px,6vw,86px) + clamp(12px,1.6vw,22px));top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 5px var(--paper)}
.fd-item{position:relative;margin-bottom:clamp(12px,1.4vw,18px)}
.fd-item[hidden],.fd-month[hidden]{display:none}
.fd-node{position:absolute;left:calc(-1*clamp(54px,6vw,86px));top:22px;width:clamp(36px,4.4vw,60px);display:grid;place-items:center}
.fd-node .mk{width:26px;height:26px;background:var(--paper);box-shadow:0 0 0 6px var(--paper)}
.fd-ic{display:block;width:12px;height:12px;background:var(--paper);box-shadow:0 0 0 6px var(--paper);border:2px solid var(--brand)}
.fd-ic-article{background:var(--brand)}
.fd-ic-guide{border-radius:2px;transform:rotate(45deg);border-color:var(--pop);background:var(--pop)}
.fd-ic-note{border-radius:50%;width:10px;height:10px;border-color:var(--dim2)}
.fd-card{position:relative;background:#FFF5E9;border:1px solid var(--line);padding:clamp(18px,2.2vw,28px) clamp(18px,2.4vw,32px);display:grid;gap:8px;transition:border-color .3s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
@media(hover:hover){.fd-card:hover{border-color:var(--brand);transform:translateX(6px);box-shadow:0 18px 40px -30px rgba(59,77,255,0.5)}}
.t-test .fd-card{border-left:3px solid var(--brand)}
/* whole card opens the article / guide (stretched link) */
.fd-card .fd-go::after{content:"";position:absolute;inset:0;z-index:1}
.fd-card:has(.fd-go){cursor:pointer}
.fd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.fd-type{color:var(--brand);font-weight:500}
.fd-st{color:var(--ink);background:var(--paper-2);padding:3px 8px;border-radius:100px}
.fd-lock{color:#2C302E;background:rgba(224,164,88,0.21);padding:3px 8px;border-radius:100px}
.fd-card h3{font-weight:700;font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.01em;line-height:1.25}
.fd-card p{color:var(--dim);line-height:1.6;max-width:72ch}
.t-note .fd-card p{color:var(--ink);font-size:1.02rem}
.fd-tags{display:flex;flex-wrap:wrap;gap:6px}
.fd-tags em{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:3px 9px}
.fd-go{justify-self:start;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);border-bottom:1px solid currentColor;padding-bottom:3px;margin-top:4px}
.fd-form{max-width:520px;margin-top:4px}
.fd-compact .fd-list{padding-left:clamp(48px,5vw,70px)}
.fd-compact .fd-node{left:calc(-1*clamp(48px,5vw,70px))}
.fd-compact .fd-line{left:clamp(14px,1.7vw,22px)}
.jr-home .fd{margin-bottom:8px}
@media(max-width:640px){.fd-stats{grid-template-columns:1fr}.fd-stats div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}.fd-stats div{flex-direction:row;align-items:baseline;gap:14px}}
@media(prefers-reduced-motion:reduce){.fd-line i{transition:none}}

/* ---- xFigura card: massing, then light / access / views drawn as an intention diagram (10 s loop like the others) ---- */
.vfig .capp .dot{background:var(--pop)}
.vfig .fg-site polygon{fill:rgba(59,77,255,0.09);stroke:rgba(59,77,255,0.27);stroke-width:.8}
.vfig .fm{fill:#FFF5E9;stroke:rgba(59,77,255,0.83);stroke-width:.7;stroke-linejoin:round}
.vfig .fm.l{fill:rgba(59,77,255,0.13)}.vfig .fm.r{fill:rgba(59,77,255,0.24)}
.vfig .fm.h{animation:fgrise 10s var(--ease) infinite}
@keyframes fgrise{0%,6%{transform:translateY(10px);opacity:0}16%,92%{transform:none;opacity:1}100%{opacity:0}}
.vfig .fg-z polygon{fill:var(--brand);opacity:0;animation:fgz 10s infinite}
@keyframes fgz{0%,22%{opacity:0}32%,88%{opacity:.16}96%,100%{opacity:0}}
.vfig .fg-a path{fill:none;stroke:#3B4DFF;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;animation:fgdraw 10s var(--ease) infinite}
.vfig .fg-a.a1 path{stroke:var(--pop);stroke-width:2}
.vfig .fg-a.a3 path{stroke-dasharray:3 3;stroke-dashoffset:0;opacity:0;animation:fgfade 10s infinite}
.vfig .fg-a circle{fill:var(--pop);opacity:0;animation:fgfade 10s infinite}
.vfig .fg-a text{font-family:var(--mono);font-size:7px;letter-spacing:.06em;text-transform:uppercase;fill:#3B4DFF;opacity:0;animation:fgfade 10s infinite}
.vfig .a1 *{animation-delay:.2s}.vfig .a2 *{animation-delay:1s}.vfig .a3 *{animation-delay:1.8s}
@keyframes fgdraw{0%,24%{stroke-dashoffset:140}40%,90%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes fgfade{0%,30%{opacity:0}40%,90%{opacity:1}98%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.vfig *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}.vfig .fg-z polygon{opacity:.16!important}}

/* demo tabs: the tool first, then the instruction */
.dmx-win .dm-ask{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.dm-tool{font-family:var(--mono);font-weight:500;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,245,233,0.5)}
.dm-ask.on .dm-tool{color:var(--pop)}
.dm-q{white-space:nowrap}
.dmx-tool{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,245,233,0.55)}
.dmx-tool b{color:#FFF5E9;font-weight:500}
.dmx-tool .mk{width:22px;height:22px}
.dmx-tool span{padding:3px 9px;border:1px solid rgba(255,245,233,0.18);border-radius:100px}
/* arrows: the whole group (head included) fades in with its line, so no arrowhead shows before its line is drawn */
.vfig .fg-a{opacity:0;animation:fgfade 10s infinite}
.vfig .fg-a circle,.vfig .fg-a text{opacity:1;animation:none}
.vfig .fg-a.a1{animation-delay:.2s}.vfig .fg-a.a2{animation-delay:1s}.vfig .fg-a.a3{animation-delay:1.8s}
.vfig .fg-a.a3 path{opacity:1;animation:none}
@media(prefers-reduced-motion:reduce){.vfig .fg-a{opacity:1}}

/* ================= LAB WORKFLOWS: a node canvas (input → tool → result), Grasshopper-style ================= */
.wf-sec{padding-block:0 clamp(60px,8vw,110px)}
.wf-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);margin-bottom:clamp(22px,3vw,36px)}
.wf-stats div{padding:clamp(16px,2.2vw,26px) 0;display:flex;align-items:baseline;gap:14px}
.wf-stats div+div{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--line)}
.wf-stats b{font-family:var(--exp);font-weight:900;font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:.9;letter-spacing:-.03em;color:var(--brand)}
.wf-stats span{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.wf-win{position:relative;background:#2C302E;border-radius:22px;overflow:hidden;color:#FFF5E9;
  box-shadow:0 0 0 1px rgba(255,245,233,0.06) inset,0 50px 100px -50px rgba(59,77,255,0.6),0 30px 60px -40px rgba(44,48,46,0.6)}
.wf-tabs{display:flex;gap:8px;padding:16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,245,233,0.07)}
.wf-tabs::-webkit-scrollbar{display:none}
.wf-tab{position:relative;overflow:hidden;flex:none;display:flex;align-items:center;gap:12px;text-align:left;background:rgba(255,245,233,0.04);border:1px solid rgba(255,245,233,0.09);border-radius:12px;padding:12px 16px;color:rgba(255,245,233,0.7);cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.wf-tab .mk{width:22px;height:22px}
.wf-tab span{display:flex;flex-direction:column;gap:3px}
.wf-tab b{font-weight:600;font-size:.86rem;letter-spacing:-.005em}
.wf-tab i{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,245,233,0.42)}
.wf-tab.on{background:rgba(255,245,233,0.1);border-color:rgba(224,164,88,0.55);color:#FFF5E9}
.wf-tab.on i{color:var(--pop)}
@media(hover:hover){.wf-tab:not(.on):hover{border-color:rgba(255,245,233,0.28);color:#FFF5E9}}
.wf-tab:focus-visible{outline:2px solid var(--pop);outline-offset:2px}
.wf-prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--pop)}
.wf-tab.run .wf-prog{width:100%;transition:width var(--cycle,8s) linear}
.wf-stage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.wf-canvas{position:relative;display:grid;min-height:340px;border-right:1px solid rgba(255,245,233,0.07);
  background-image:radial-gradient(rgba(255,245,233,0.09) 1px,transparent 1.2px);background-size:22px 22px;background-position:-11px -11px}
.wf-canvas::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 50% 55%,rgba(59,77,255,0.28),transparent 70%)}
.wf-graph{grid-area:1/1;width:100%;height:auto;align-self:center;position:relative;z-index:1;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.wf-graph.on{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
/* nodes */
.nd-b{fill:#2C302E;stroke:rgba(255,245,233,0.14);stroke-width:1}
.nd-h,.nd-h2{fill:#2C302E}
.n-tool .nd-h,.n-tool .nd-h2{fill:var(--brand)}
.n-tool .nd-b{stroke:rgba(59,77,255,0.45);filter:drop-shadow(0 0 18px rgba(59,77,255,0.55))}
.n-out .nd-h,.n-out .nd-h2{fill:#2C302E}
.n-out .nd-b{stroke:rgba(224,164,88,0.45)}
.nd-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;fill:rgba(255,245,233,0.7)}
.n-out .nd-k{fill:var(--pop)}
.nd-l{font-family:var(--sans);font-size:15px;font-weight:600;fill:#FFF5E9}
.nd-t{font-family:var(--exp);font-size:18px;font-weight:800;fill:#FFF5E9;letter-spacing:-.01em}
.nd-step text{font-family:var(--mono);font-size:10.5px;fill:rgba(255,245,233,0.55)}
.nd-step circle{fill:rgba(255,245,233,0.18)}
.nd-ok circle{fill:var(--pop)}.nd-ok path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.port{fill:#2C302E;stroke:rgba(255,245,233,0.55);stroke-width:2}
/* wires: a base line, a draw-in, a flowing dash, and particles */
.wr{fill:none;stroke-linecap:round}
.w1,.w2{stroke:rgba(255,245,233,0.12);stroke-width:3}
.wf1,.wf2{stroke:var(--pop);stroke-width:2.2;stroke-dasharray:6 10;filter:drop-shadow(0 0 6px rgba(224,164,88,0.7))}
.pt{fill:#FFF5E9;filter:drop-shadow(0 0 6px #FFF5E9)}
/* entrance sequence when a graph becomes active */
.wf-graph .nd,.wf-graph .wf1,.wf-graph .wf2,.wf-graph .pt,.wf-graph .port{opacity:0}
.wf-graph.on .n-in{animation:ndin .55s var(--ease) .05s both}
.wf-graph.on .wf1{animation:wrin .5s var(--ease) .45s both,wrflow 1.2s linear infinite}
.wf-graph.on .n-tool{animation:ndin .6s var(--ease) .7s both}
.wf-graph.on .wf2{animation:wrin .5s var(--ease) 1.5s both,wrflow 1.2s linear infinite}
.wf-graph.on .n-out{animation:ndin .55s var(--ease) 1.75s both}
.wf-graph.on .pt{animation:fadein .4s 1.9s both}
.wf-graph.on .port{animation:fadein .3s .3s both}
.wf-graph.on .nd-step circle{animation:stepon .3s both}
.wf-graph.on .nd-step.s0 circle{animation-delay:1s}.wf-graph.on .nd-step.s1 circle{animation-delay:1.15s}.wf-graph.on .nd-step.s2 circle{animation-delay:1.3s}.wf-graph.on .nd-step.s3 circle{animation-delay:1.45s}.wf-graph.on .nd-step.s4 circle{animation-delay:1.6s}
.wf-graph.on .nd-ok{animation:okpop .45s cubic-bezier(.3,1.6,.5,1) 2.1s both}
@keyframes ndin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wrin{from{opacity:0}to{opacity:1}}
@keyframes wrflow{to{stroke-dashoffset:-32}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes stepon{to{fill:var(--pop)}}
@keyframes okpop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.wf-graph .nd,.wf-graph .nd-ok{transform-box:fill-box;transform-origin:center}
/* side panel */
.wf-side{display:grid}
.wf-panel{grid-area:1/1;padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden;transform:translateX(10px);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .35s}
.wf-panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease) .1s,transform .45s var(--ease) .1s}
.wf-st{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,245,233,0.6)}
.wf-st .mk{width:22px;height:22px}
.wf-st span+span{padding:3px 9px;border:1px solid rgba(255,245,233,0.18);border-radius:100px}
.wf-panel h3{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.05;letter-spacing:-.015em}
.wf-d{color:rgba(255,245,233,0.7);line-height:1.55}
.wf-k{margin-top:6px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pop)}
.wf-steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:8px}
.wf-steps li{counter-increment:s;display:flex;gap:12px;color:rgba(255,245,233,0.85);line-height:1.45;font-size:.95rem}
.wf-steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.68rem;color:rgba(255,245,233,0.4);padding-top:3px}
.wf-panel.on .wf-steps li{animation:ndin .45s var(--ease) both;animation-delay:calc(.25s + var(--i) * .08s)}
.wf-tools{display:flex;flex-wrap:wrap;gap:6px}
.wf-tools em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:#FFF5E9;background:rgba(59,77,255,0.4);border:1px solid rgba(59,77,255,0.37);border-radius:100px;padding:4px 10px}
.wf-tools em.g{background:none;border-color:rgba(255,245,233,0.16);color:rgba(255,245,233,0.55)}
.wf-panel .btn{align-self:flex-start;margin-top:auto}
@media(max-width:900px){.wf-stage{grid-template-columns:1fr}.wf-canvas{border-right:0;border-bottom:1px solid rgba(255,245,233,0.07);min-height:0;padding:10px 0}.wf-stats{grid-template-columns:1fr}.wf-stats div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){.wf-graph *{animation:none!important;opacity:1!important}.wf-graph .pt{display:none}}
.wf-chain{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:rgba(44,48,46,0.6)!important}
.wf-chain b{color:var(--pop);font-weight:500}
/* library: articles, guides, notes as a clean grid */
.lib-sec{padding-block:clamp(56px,8vw,110px)}
.fd-lib .fd-list{padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(12px,1.4vw,18px)}
.fd-lib .fd-line,.fd-lib .fd-node,.fd-lib .fd-month{display:none}
.fd-lib .fd-item{margin:0;display:flex}
.fd-lib .fd-card{flex:1;align-content:start}
@media(hover:hover){.fd-lib .fd-card:hover{transform:translateY(-4px)}}
/* home feed: same clean grid, no timeline */
.jr-home .fd-compact .fd-list{padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(12px,1.4vw,18px)}
.jr-home .fd-compact .fd-line,.jr-home .fd-compact .fd-node{display:none}
.jr-home .fd-compact .fd-item{margin:0;display:flex}.jr-home .fd-compact .fd-card{flex:1;align-content:start}

/* ================= LAB WORKFLOWS v2: a calm horizontal gallery ================= */
.wf-sec{padding-block:0 clamp(60px,8vw,110px)}
.wk-gal{position:relative}
.wk-nav{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:18px}
.wk-count{margin-right:auto;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--dim)}
.wk-count b{color:var(--ink);font-weight:500}
.wk-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#FFF5E9;font-size:1.05rem;cursor:pointer;color:var(--ink);transition:border-color .3s,background .3s,color .3s}
@media(hover:hover){.wk-btn:hover{border-color:var(--ink);background:var(--ink);color:#FFF5E9}}
.wk-btn:disabled{opacity:.35;cursor:default}
.wk-row{display:grid;grid-auto-flow:column;grid-auto-columns:min(86vw,520px);gap:clamp(14px,1.8vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  margin-inline:calc(-1*var(--gut));padding:4px var(--gut) 18px;scrollbar-width:none;cursor:grab}
.wk-row::-webkit-scrollbar{display:none}
.wk-row.drag{cursor:grabbing;scroll-snap-type:none}
.wk{scroll-snap-align:start;display:flex;flex-direction:column;background:#FFF5E9;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
@media(hover:hover){.wk:hover{transform:translateY(-6px);box-shadow:0 30px 60px -40px rgba(44,48,46,0.35)}}
.wk-vis{background:var(--paper-2);padding:18px 18px 0}
.wk-vis .demo{border-radius:12px 12px 0 0;border-bottom:0;box-shadow:none;pointer-events:none}
.wk-body{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.4vw,30px)}
.wk-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.wk-meta span:first-child{color:var(--brand);font-weight:500}
.wk h3{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.05;letter-spacing:-.015em}
.wk-d{color:var(--dim);line-height:1.55}
.wk-chain{font-family:var(--mono);font-size:.76rem;line-height:1.6;color:var(--ink);padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wk-chain b{color:var(--brand);font-weight:500}
.wk-how summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.wk-how summary::-webkit-details-marker{display:none}
.wk-how summary::after{content:"+";font-size:1rem;color:var(--brand);transition:transform .3s var(--ease)}
.wk-how[open] summary::after{transform:rotate(45deg)}
.wk-how summary i{font-style:normal;color:var(--dim2);margin-left:auto;margin-right:12px}
.wk-how ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:8px}
.wk-how li{counter-increment:s;display:flex;gap:12px;color:var(--dim);line-height:1.45}
.wk-how li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.68rem;color:var(--brand);padding-top:3px}
.wk .btn{align-self:flex-start;margin-top:auto}
.wk:target{box-shadow:0 0 0 3px var(--pop)}
/* home list: a number instead of the gauge */
.wk-n{font-family:var(--mono);font-weight:500;color:var(--pop);margin-right:10px}

/* ================= LAB WORKFLOWS v3: search + filters + grid (scales to many) ================= */
.wg-bar{display:grid;gap:14px;margin-bottom:clamp(22px,3vw,34px)}
.wg-search{width:100%;max-width:560px;border-radius:12px}
.wg-filters{display:flex;flex-wrap:wrap;gap:10px 28px}
.wg-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wg-f>span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);margin-right:4px}
.wg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:clamp(14px,1.6vw,22px)}
.wg-grid .wk[hidden]{display:none}
.wg-grid .wk{scroll-snap-align:none}
.wg-grid .wk-vis{padding:14px 14px 0}
.wg-grid .wk-vis .demo .pcap{display:none}
.wg-grid .wk-vis .demo{aspect-ratio:16/10}
/* animations only play on hover (or when in view on touch screens), so many cards stay light */
.wg-grid .wk-body{padding:clamp(18px,2vw,24px);gap:10px}
.wg-grid .wk h3{font-size:clamp(1.1rem,1.4vw,1.3rem)}
.wk-fmt{padding:3px 9px;border-radius:100px;background:var(--paper-2);color:var(--ink)!important}
.wk-fmt.t-video,.wk-fmt.t-live{background:var(--brand);color:#2C302E!important}
.wk-fmt.t-article,.wk-fmt.t-guide{background:rgba(59,77,255,0.12);color:var(--brand)!important}
.wk-fmt.t-soon{background:none;border:1px dashed var(--dim2);color:var(--dim)!important}
.wk-soon{align-self:flex-start;margin-top:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);border-bottom:1px solid currentColor;padding-bottom:3px}
.wg-more{display:block;margin:clamp(24px,3vw,36px) auto 0}
.wg-more[hidden]{display:none}

/* ================= LAB WORKFLOWS v4: the index of equations — INPUT ——— TOOL ——— RESULT ================= */
.wl .wl-list{display:block;border-top:1px solid var(--ink)}
.wl-row{border-bottom:1px solid var(--line);background:none;border-radius:0;overflow:visible}
.wl-row:hover{transform:none;box-shadow:none}
.wl-head{width:100%;display:grid;grid-template-columns:clamp(40px,5vw,70px) 1fr auto;gap:clamp(12px,2vw,28px);align-items:center;text-align:left;background:none;border:0;padding:clamp(22px,2.8vw,36px) 0;cursor:pointer;color:var(--ink)}
.wl-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--dim2);align-self:start;padding-top:4px;transition:color .3s}
.wl-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.wl-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.wl-eq{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);min-width:0;font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.05rem,2.1vw,1.9rem);line-height:1.05;letter-spacing:-.015em}
.wl-t{flex:none;max-width:34%}
.wl-t.tool{color:var(--brand)}
.wl-t.out{color:var(--ink)}
.wl-t.in{color:var(--dim)}
.wl-r{flex:1 1 30px;min-width:24px;height:1.5px;background:var(--ink);opacity:.2;position:relative;transform-origin:left;transition:opacity .4s var(--ease)}
.wl-r::after{content:"";position:absolute;right:-1px;top:50%;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg);color:var(--ink)}
.wl-side{display:flex;align-items:center;gap:16px}
.wl-x{position:relative;width:18px;height:18px}
.wl-x::before,.wl-x::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--ink);transition:transform .4s var(--ease)}
.wl-x::after{transform:rotate(90deg)}
.wl-row.open .wl-x::after{transform:rotate(0)}
@media(hover:hover){
  .wl-head:hover .wl-r{opacity:.9}
  .wl-head:hover .wl-t.in{color:var(--ink)}
  .wl-head:hover .wl-n{color:var(--brand)}
}
.wl-row.open .wl-r{opacity:.9}.wl-row.open .wl-t.in{color:var(--ink)}.wl-row.open .wl-n{color:var(--brand)}
.wl-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.wl-row.open .wl-body{grid-template-rows:1fr}
.wl-in{overflow:hidden;padding-left:calc(clamp(40px,5vw,70px) + clamp(12px,2vw,28px))}
.wl-d{max-width:60ch;color:var(--dim);font-size:1.05rem;line-height:1.6}
.wl-steps{list-style:none;margin:18px 0 0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px 26px}
.wl-steps li{counter-increment:s;display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--line);color:var(--ink);line-height:1.45;font-size:.95rem}
.wl-steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.66rem;color:var(--brand)}
.wl-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin:22px 0 clamp(26px,3vw,38px);font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.wl-foot .wk-soon,.wl-foot .btn{margin-top:0}
@media(max-width:760px){
  .wl-head{grid-template-columns:28px 1fr auto}
  .wl-eq{flex-wrap:wrap;font-size:1.05rem;gap:6px 10px}
  .wl-t{max-width:none}
  .wl-r{flex:0 0 22px}
  .wl-side .wk-fmt{display:none}
  .wl-in{padding-left:0}
}
.wl .wl-row{border:0;border-bottom:1px solid var(--line);display:block}
.wl .wl-row:target{box-shadow:none}.wl .wl-row:target .wl-n{color:var(--pop)}
/* home Lab block: the line sits right under its title */
#lab-now .lab-head{grid-template-columns:1fr;gap:0;align-items:start}
#lab-now .mhead{margin-bottom:18px}
#lab-now .lab-lead{max-width:56ch;margin-bottom:clamp(26px,3vw,40px)}

/* ================= LAB v5: the same dark rows as the home Lab block, unfolding the method ================= */
.labsec.wf-sec{padding-top:clamp(56px,7vw,100px)}
.wl-dark .wl-list{border-top:1px solid rgba(44,48,46,0.14)}
.wl-dark .wl-row{border:0}
.wl-dark .wl-head{display:grid;grid-template-columns:clamp(150px,14vw,200px) 1fr auto 40px;gap:clamp(16px,3vw,48px);align-items:start;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(44,48,46,0.12);padding:clamp(20px,2.4vw,32px) 0;color:#2C302E;cursor:pointer;transition:background .4s var(--ease),padding .4s var(--ease)}
@media(hover:hover){.wl-dark .wl-head:hover{background:rgba(44,48,46,0.04);padding-inline:14px}.wl-dark .wl-head:hover .lab-tags em{background:var(--pop);border-color:var(--pop);color:var(--ink)}}
.wl-dark .wl-row.open .wl-head{background:rgba(44,48,46,0.05);padding-inline:14px;border-bottom-color:transparent}
.wl-dark .lab-txt h4{color:#2C302E}
.wl-dark .wf-chain{display:block;margin-top:8px}
.wl-dark .wk-fmt{background:none;border:1px solid rgba(44,48,46,0.22);color:rgba(44,48,46,0.8)!important}
.wl-dark .wl-x{align-self:center;justify-self:end}
.wl-dark .wl-x::before,.wl-dark .wl-x::after{background:#FFF5E9}
.wl-dark .wl-in{padding:0 14px 0 calc(clamp(150px,14vw,200px) + clamp(16px,3vw,48px) + 14px)}
.wl-dark .wl-row.open .wl-in{background:rgba(44,48,46,0.05);border-bottom:1px solid rgba(44,48,46,0.12)}
.wl-dark .wl-d{color:rgba(44,48,46,0.72);padding-top:4px}
.wl-dark .wl-steps li{color:#2C302E;border-top-color:rgba(44,48,46,0.14)}
.wl-dark .wl-steps li::before{color:var(--pop)}
.wl-dark .wl-foot{color:rgba(44,48,46,0.5)}
.wl-dark .wk-soon{color:var(--pop)}
/* search + filters on the dark band */
.wl-dark .tl-search{background:rgba(44,48,46,0.06);border-color:rgba(44,48,46,0.16);color:#2C302E}
.wl-dark .tl-search::placeholder{color:rgba(44,48,46,0.45)}
.wl-dark .tl-search:focus{border-color:var(--pop);box-shadow:0 0 0 3px rgba(224,164,88,0.18)}
.wl-dark .wg-f>span{color:rgba(44,48,46,0.4)}
.wl-dark .tl-chip{background:none;border-color:rgba(44,48,46,0.2);color:rgba(44,48,46,0.8)}
.wl-dark .tl-chip.on{background:var(--pop);border-color:var(--pop);color:var(--ink)}
@media(hover:hover){.wl-dark .tl-chip:not(.on):hover{border-color:#2C302E;color:#2C302E}}
.wl-dark .tl-none{color:rgba(44,48,46,0.6)}
@media(max-width:860px){.wl-dark .wl-head{grid-template-columns:1fr auto;gap:10px}.wl-dark .lab-st{grid-column:1/-1}.wl-dark .lab-tags{display:none}.wl-dark .wl-in{padding:0 14px}}

/* ================= HOME SHOWCASE: one request, one result — big type, calm layout ================= */
.ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4.5vw,72px);align-items:center}
.ask-txt{display:flex;flex-direction:column;gap:18px;min-height:clamp(200px,22vw,300px);justify-content:center}
.ask-tool{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.ask-q{font-family:var(--exp);font-weight:800;font-size:clamp(1.7rem,3.4vw,3.1rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);min-height:2.2em}
.ask-p{color:var(--pop);margin-right:.35em}
.ask-caret{display:inline-block;width:.08em;height:.9em;margin-left:.06em;vertical-align:-.08em;background:var(--brand);animation:dmxcaret 1s steps(1) infinite}
.typed .ask-caret{opacity:0;animation:none}
.ask-link{align-self:flex-start;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--brand);padding-bottom:4px}
@media(hover:hover){.ask-link:hover{color:var(--brand)}}
.ask-vis{display:grid}
.ask-vis .demo{grid-area:1/1;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s .45s;
  box-shadow:0 2px 6px rgba(44,48,46,0.05),0 40px 80px -50px rgba(59,77,255,0.45)}
.ask-vis .demo.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.ask-vis .vask,.ask-vis .facask{display:none}
.ask-seg{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin-top:clamp(6px,1vw,14px)}
.ask-seg button{display:flex;flex-direction:column;gap:9px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--dim)}
.ask-seg i{display:block;height:2px;background:var(--line);overflow:hidden}
.ask-seg b{display:block;height:100%;width:0;background:var(--brand)}
.ask-seg button.done b{width:100%}
.ask-seg button.on b{width:100%}
.ask-seg button.run b{width:0;animation:segfill var(--cycle,6.5s) linear forwards}
@keyframes segfill{to{width:100%}}
.ask-seg span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;transition:color .3s}
.ask-seg button.on span{color:var(--ink)}
@media(hover:hover){.ask-seg button:hover span{color:var(--brand)}}
.manual .ask-seg button.done b{width:0}
@media(max-width:860px){.ask{grid-template-columns:1fr}.ask-txt{min-height:0}.ask-seg{grid-template-columns:repeat(5,1fr)}.ask-seg span{font-size:.5rem}}
@media(prefers-reduced-motion:reduce){.ask-caret{animation:none}.ask-seg button.run b{animation:none;width:100%}}
/* Lab: the full record — input / tools / result blocks */
.wl-eqb{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch;margin:20px 0 6px}
.wl-eqb>div{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid rgba(255,245,233,0.14);border-radius:10px}
.wl-eqb>div.t{border-color:rgba(224,164,88,0.55);background:rgba(224,164,88,0.07)}
.wl-eqb span{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,245,233,0.45)}
.wl-eqb b{font-weight:600;color:#FFF5E9;line-height:1.3}
.wl-eqb>div.t b{color:var(--pop)}
.wl-eqb i{align-self:center;font-style:normal;color:rgba(255,245,233,0.4)}
.wl-k{margin-top:18px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pop)}
.wl-dark .wl-steps{margin-top:10px}
@media(max-width:760px){.wl-eqb{grid-template-columns:1fr}.wl-eqb i{transform:rotate(90deg);justify-self:center}}
/* home Lab teaser: marquee on top of the band, 4 columns linking to the Lab */
#lab-now{padding-top:0}
a.lt-item{color:#FFF5E9;transition:background .4s var(--ease)}
@media(hover:hover){a.lt-item:hover{background:rgba(255,245,233,0.04)}a.lt-item:hover h4{color:var(--pop)}}
.lt-chain{display:block;margin-top:10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,245,233,0.5)}
.st-ok i{background:rgba(65,157,120,0.78)}.st-veille i{background:rgba(255,245,233,0.4)}

/* Lab rows: a small still of the use case, playing on hover (card drawn at 400 px, scaled down) */
.wl-dark .wl-head{grid-template-columns:clamp(130px,12vw,180px) 168px 1fr auto 40px}
.wl-thumb{position:relative;display:block;width:168px;height:105px;overflow:hidden;border-radius:8px;background:#FFF5E9;align-self:center;opacity:.92;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.wl-thumb-in{position:absolute;left:0;top:0;width:400px;transform:scale(.42);transform-origin:0 0;pointer-events:none}
.wl-thumb-in .demo{border:0;border-radius:0;box-shadow:none;aspect-ratio:16/10}
.wl-thumb-in .demo .pcap,.wl-thumb-in .demo .vask,.wl-thumb-in .demo .facask,.wl-thumb-in .demo .capp,.wl-thumb-in .demo .cstat{display:none}
@media(hover:hover){.wl-dark .wl-head:hover .wl-thumb{opacity:1;transform:scale(1.04)}}
.wl-dark .wl-in{padding-left:calc(clamp(130px,12vw,180px) + 168px + 2*clamp(16px,3vw,48px) + 14px)}
.wl-dark .wl-head:focus-visible{outline:2px solid var(--pop);outline-offset:-2px}
@media(max-width:860px){.wl-dark .wl-head{grid-template-columns:120px 1fr auto}.wl-thumb{width:120px;height:75px;grid-row:2;grid-column:1}.wl-thumb-in{transform:scale(.3)}.wl-dark .lab-st{grid-column:1/-1}.wl-dark .lab-txt{grid-column:2/3}.wl-dark .wl-in{padding:0 14px}}

/* Lab: no thumbnails in the rows; the animation shows large inside the opened record */
.wl-dark .wl-head{grid-template-columns:clamp(150px,14vw,200px) 1fr auto 40px}
.wl-dark .wl-in{padding-left:calc(clamp(150px,14vw,200px) + clamp(16px,3vw,48px) + 14px)}
.wl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,3vw,44px);align-items:start;padding-bottom:6px}
.wl-vis .demo{border:0;box-shadow:0 30px 60px -40px rgba(44,48,46,0.7);margin-top:4px}
.wl-vis .demo .vask,.wl-vis .demo .facask{display:none}
@media(max-width:960px){.wl-grid{grid-template-columns:1fr}}
@media(max-width:860px){.wl-dark .wl-head{grid-template-columns:1fr auto}.wl-dark .wl-in{padding:0 14px}}

/* ================= SESSIONS: agenda + replays ================= */
.ag-sec,#videos{padding-block:clamp(56px,8vw,110px)}
.ag{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ag-row{display:grid;grid-template-columns:clamp(90px,10vw,130px) 1fr auto;gap:clamp(14px,2.4vw,36px);align-items:center;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--line)}
.ag-d{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.ag-d b{font-family:var(--exp);font-weight:900;font-size:clamp(2rem,3.4vw,2.8rem);color:var(--brand)}
.ag-d i{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.ag-d.tbd i{margin:0;padding:6px 10px;border:1px dashed var(--dim2);border-radius:100px}
.ag-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.ag-t b{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.1;letter-spacing:-.01em}
.ag-t span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
@media(max-width:640px){.ag-row{grid-template-columns:80px 1fr}.ag-row .wk-soon{grid-column:2}}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(14px,1.6vw,22px)}
.rp-ph{display:flex;flex-direction:column;gap:8px}
.rp-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:var(--paper-2);border:1px solid var(--line)}
.rp-thumb .demo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;filter:grayscale(1);opacity:.55}
.rp-thumb .demo .pcap,.rp-thumb .demo .vask,.rp-thumb .demo .facask,.rp-thumb .demo .capp,.rp-thumb .demo .cstat{display:none}
/* placeholders show the finished frame, still */
.rp-thumb .demo *{animation-delay:-8.2s!important;animation-play-state:paused!important}
.rp-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;display:grid;place-items:center;background:rgba(44,48,46,0.78);color:#FFF5E9;font-size:1rem;padding-left:3px}
.rp-tag{margin-top:6px;align-self:flex-start;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border:1px dashed var(--dim2);border-radius:100px;padding:4px 10px}
.rp-ph h4{font-weight:700;font-size:1.1rem;line-height:1.3}
.rp-tools{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ================= LAB: hover preview that follows the cursor ================= */
.wl-float{position:fixed;left:0;top:0;z-index:60;width:340px;pointer-events:none;opacity:0;transform:translate(-50%,-112%) scale(.94);transition:opacity .25s var(--ease),transform .35s var(--ease)}
.wl-float.on{opacity:1;transform:translate(-50%,-112%) scale(1)}
.wl-float .demo{box-shadow:0 30px 60px -20px rgba(44,48,46,0.6);border:0}
.wl-float .demo .vask,.wl-float .demo .facask{display:none}
.rp-thumb .demo{opacity:.8}
/* the Lab band sits at the very top of its dark section */
.labsec.wf-sec{padding-top:0}
.rp-empty{background:repeating-linear-gradient(135deg,var(--paper-2) 0 14px,rgba(224,164,88,0.23) 14px 28px)}
/* Lab rows: hover lights the row up (title in saffron, chain brighter); a click unfolds it */
@media(hover:hover){.wl-dark .wl-head:hover .lab-txt h4{color:var(--pop)}.wl-dark .wl-head:hover .wf-chain{color:#2C302E!important}.wl-dark .wl-head:hover .wl-x::before,.wl-dark .wl-head:hover .wl-x::after{background:var(--pop)}}
/* the saffron edge means one thing: members-only content (saffron = join, everywhere) */
.t-test .fd-card,.t-guide .fd-card{border-left:1px solid var(--line)}
.fd-item.members .fd-card{border-left:3px solid var(--pop)}

/* ================= HOME: overview (what MIRALTO is) + sessions invitation ================= */
.ov-sec{padding-block:clamp(40px,6vw,80px)}
.offers.ov{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.ov .off{color:var(--ink)}
.ov .off p{max-width:34ch}
.ov-go{margin-top:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
@media(hover:hover){.ov .off:hover h4{color:var(--brand)}}
@media(max-width:860px){.offers.ov{grid-template-columns:1fr}.ov .off{border-left:0;border-top:1px solid var(--line);min-height:0}.ov .off:first-child{border-top:0}}
.si-sec{padding-block:clamp(56px,8vw,110px)}
.si{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.si .mhead{margin-bottom:0}
.si-card{background:#FFF5E9;border:1px solid var(--line);border-radius:16px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:12px}
.si-when{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.1rem,1.8vw,1.5rem);color:var(--brand)}
.si-card h3{font-weight:700;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.2;letter-spacing:-.01em}
.si-d{color:var(--dim);line-height:1.6;max-width:56ch}
.si-fmt{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.si-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
@media(max-width:860px){.si{grid-template-columns:1fr}}
/* Lab: gauge legend above the rows */
.wf-sec .mk-legend{margin:0 0 clamp(20px,2.4vw,30px)}
.wl-dark .lab-st{display:flex;align-items:center;gap:10px}
.wl-dark .lab-st .mk{width:22px;height:22px}
/* gauge in 3 steps (spotted 3/8, testing 6/8, shared 8/8) */
.mk[data-l="1"] path:nth-last-child(-n+3),.mk[data-l="2"] path:nth-last-child(-n+6),.mk[data-l="3"] path{fill:var(--brand)}
.mk-d[data-l="1"] path:nth-last-child(-n+3),.mk-d[data-l="2"] path:nth-last-child(-n+6),.mk-d[data-l="3"] path{fill:var(--pop)}

/* ================= HOME: overview bento (Lab · next live · follow) ================= */
.ov-sec{padding-block:clamp(28px,4vw,56px) clamp(48px,6vw,90px)}
.bento{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.bt{position:relative;display:flex;flex-direction:column;gap:12px;min-height:clamp(250px,24vw,320px);padding:clamp(22px,2.4vw,32px);border-radius:18px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
@media(hover:hover){a.bt:hover{transform:translateY(-5px);box-shadow:0 30px 60px -36px rgba(44,48,46,0.45)}}
.bt-k{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase}
.bt p{line-height:1.55;max-width:36ch}
.bt-go{margin-top:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.bt-lab{background:var(--ink);color:#2C302E}
.bt-lab .bt-k{color:var(--pop)}.bt-lab p{color:rgba(44,48,46,0.7)}
.bt-big{font-family:var(--exp);font-weight:900;font-size:clamp(3rem,6vw,5rem);line-height:.9;letter-spacing:-.03em;display:flex;align-items:baseline;gap:12px}
.bt-big i{font-style:normal;font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,245,233,0.55)}
.bt-chips{display:flex;flex-wrap:wrap;gap:6px}
.bt-chips em{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:#FFF5E9;border:1px solid rgba(255,245,233,0.22);border-radius:100px;padding:4px 9px}
.bt-lab .bt-go{color:var(--pop)}
.bt-ses{background:var(--brand);color:#FFF5E9}
.bt-ses .bt-k{color:rgba(255,245,233,0.85)}
.bt-dot{width:8px;height:8px;border-radius:50%;background:#E0A458;box-shadow:0 0 0 0 rgba(224,164,88,0.6);animation:btlive 1.8s infinite}
@keyframes btlive{70%{box-shadow:0 0 0 9px rgba(224,164,88,0)}100%{box-shadow:0 0 0 0 rgba(224,164,88,0)}}
.bt-when{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--pop)}
.bt-ses h3{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.05;letter-spacing:-.015em}
.bt-ses .bt-go{color:#FFF5E9}
.bt-fol{background:var(--pop);color:var(--ink)}
.bt-fol .bt-k{color:var(--ink)}.bt-fol p{color:rgba(44,48,46,0.78)}
.bt-fol .nl-form{margin-top:auto}
.bt-fol .ac-row input{color:var(--ink);background:#FFF5E9;border:1px solid rgba(44,48,46,0.15)}
.bt-fol .ac-row input::placeholder{color:var(--dim2)}
.bt-fol .ac-ok{color:var(--ink);font-weight:600}
.btn.ink{background:var(--ink);color:#FFF5E9;border:0}
@media(hover:hover){.btn.ink:hover{box-shadow:4px 4px 0 0 #FFF5E9}}
@media(max-width:960px){.bento{grid-template-columns:1fr 1fr}.bt-lab{grid-column:1/-1}}
@media(max-width:620px){.bento{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bt-dot{animation:none}}
/* sessions preview: next live + a glimpse of the replays */
.si-p{color:var(--dim);line-height:1.6;max-width:44ch;margin:18px 0 22px}
.si .mhead{margin-bottom:0}
a.si-card{color:var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
@media(hover:hover){a.si-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(44,48,46,0.4)}}
.si-k{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.si-k2{margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
.si-ths{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.si-th{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--paper-2);display:grid;place-items:center;border:1px solid var(--line)}
.si-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.si-th i{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.7rem;color:#FFF5E9;background:rgba(44,48,46,0.75);padding-left:2px}
.si-th em{position:absolute;left:8px;bottom:6px;font-style:normal;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
/* gauge: 3 clearly different steps — 2/8, 4/8, 8/8 (resets the upper floors of the earlier rules) */
.mk[data-l="1"] path:nth-child(-n+6),.mk[data-l="2"] path:nth-child(-n+4){fill:rgba(44,48,46,0.14)}
.mk-d[data-l="1"] path:nth-child(-n+6),.mk-d[data-l="2"] path:nth-child(-n+4){fill:rgba(44,48,46,0.18)}
.labsec.wf-sec{padding-top:clamp(56px,7vw,100px)}

/* hero "Plus de temps / pour <mot>." : one line each, sized so the longest word fits a phone */
h1.mega.mega-t{white-space:nowrap;font-size:clamp(1.9rem,8.4vw,8.2rem)}
/* session form: says the sign-up also follows the Lab */
.lv-form label.lv-also{flex-direction:row;align-items:flex-start;gap:10px;margin:2px 0 0;cursor:pointer}
.lv-form label.lv-also input{width:17px;height:17px;margin:1px 0 0;padding:0;flex:none;accent-color:var(--brand)}
.lv-form label.lv-also span{font-size:.85rem;font-weight:500;line-height:1.45;color:var(--dim)}

/* HTML app card: a browser window; floors light up in turn while their bar grows */
.vapp .aw{fill:#FFF5E9;stroke:rgba(44,48,46,0.29);stroke-width:.6}
.vapp .abar{fill:rgba(59,77,255,0.1)}.vapp .adot{fill:rgba(59,77,255,0.45)}.vapp .aurl{fill:#FFF5E9;stroke:rgba(59,77,255,0.26);stroke-width:.5}
.vapp text.at{font-size:4.8px;fill:rgba(44,48,46,0.73)}.vapp text.ah{font-size:5.6px;font-weight:700;fill:#2C302E;letter-spacing:.03em}
.vapp text.as{font-size:4.6px;fill:#419D78}.vapp .async{fill:#419D78;animation:pulse 1.5s infinite}
.vapp .ag{stroke:rgba(44,48,46,0.29);stroke-width:.6}.vapp .asep{stroke:rgba(59,77,255,0.26);stroke-width:.6}
.vapp .al{fill:rgba(59,77,255,0.1)}.vapp .ar{fill:rgba(59,77,255,0.22)}.vapp .at3{fill:#FFF5E9}.vapp .af polygon{stroke:rgba(44,48,46,0.29);stroke-width:.5;stroke-linejoin:round}
.vapp .af .al{animation:vlvL 10s infinite}.vapp .af .ar{animation:vlvR 10s infinite}.vapp .af .at3{animation:vlvT 10s infinite}
.vapp .af.l1 polygon{animation-delay:.5s}.vapp .af.l2 polygon{animation-delay:1s}.vapp .af.l3 polygon{animation-delay:1.5s}
.vapp .ash{fill:rgba(44,48,46,0.05)}
.vapp .aorb{fill:none;stroke:var(--brand);stroke-width:.7;stroke-dasharray:2 2;animation:vorb 2.4s linear infinite}.vapp .aorbh{fill:none;stroke:var(--brand);stroke-width:.7;stroke-linecap:round;stroke-linejoin:round}
.vapp .a3d{fill:#FFF5E9;stroke:rgba(59,77,255,0.26);stroke-width:.5}.vapp text.a3dt{font-size:4.6px;font-weight:700;fill:var(--brand)}
@keyframes vlvL{0%,16%{fill:rgba(59,77,255,0.1)}22%,90%{fill:rgba(59,77,255,0.28)}96%,100%{fill:rgba(59,77,255,0.1)}}
@keyframes vlvR{0%,16%{fill:rgba(59,77,255,0.22)}22%,90%{fill:rgba(59,77,255,0.42)}96%,100%{fill:rgba(59,77,255,0.22)}}
@keyframes vlvT{0%,16%{fill:#FFF5E9}22%,90%{fill:rgba(59,77,255,0.17)}96%,100%{fill:#FFF5E9}}
@keyframes vorb{to{stroke-dashoffset:-8}}
.vapp .ab{fill:var(--brand);transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:vbar 10s infinite}
.vapp .l1{animation-delay:.5s}.vapp .l2{animation-delay:1s}.vapp .l3{animation-delay:1.5s}
@keyframes vlv{0%,16%{fill:rgba(59,77,255,0.1)}22%,90%{fill:rgba(59,77,255,0.17)}96%,100%{fill:rgba(59,77,255,0.1)}}
@keyframes vbar{0%,16%{transform:scaleX(0)}28%,90%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.vapp .ab{animation:none;transform:none}.vapp .af polygon,.vapp .aorb{animation:none}}
.wl-vis .vapp .vsvg{top:36px;height:calc(100% - 86px)}
.wl-vis .vapp .vchip{bottom:52px}

/* mobile menu: same items as the site, and the same saffron "Suivre le Lab" button */
.mobile-menu a.current{color:var(--brand)}
.mobile-menu a.mm-cta{margin-top:28px;align-self:flex-start;font-family:var(--mono);font-weight:500;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:16px 26px;border-bottom:0;color:var(--ink)}
.legal ul{color:var(--dim);font-size:1rem;line-height:1.65;margin:0 0 12px;padding-left:1.2em}
.legal li{margin:0 0 4px}.legal li b{color:var(--ink);font-weight:600}
/* mobile hero: as big as the longest rotating word allows (FR "MODÉLISEZ" ~6.4em, EN "PRODUCE" ~5.4em) */
@media(max-width:700px){h1.mega.mega-t{font-size:calc((100vw - 2*var(--gut)) / 6.6)}html[lang=en] h1.mega.mega-t{font-size:calc((100vw - 2*var(--gut)) / 5.6)}}

/* sped-up result videos under the prompts (content: "::video name.mp4", file in images/videos/) */
.post-body .post-video{margin:6px 0 30px}
.post-body .post-video video{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:var(--paper-2)}

/* PDF/DWG → Revit detail: the source sheet, an arrow, then the detail built layer by layer, then tags */
.vpdf .pp{fill:#FFF5E9;stroke:rgba(44,48,46,0.29);stroke-width:.6}.vpdf .pf{fill:rgba(59,77,255,0.1);stroke:rgba(44,48,46,0.29);stroke-width:.6}
.vpdf .ptag{fill:rgba(59,77,255,0.1)}.vpdf text.ptt{font-size:4.2px;fill:rgba(44,48,46,0.73);letter-spacing:.06em}
.vpdf .pl rect,.vpdf .pl path{fill:none;stroke:rgba(44,48,46,0.43);stroke-width:1.2}
.vpdf .parr{fill:none;stroke:var(--brand);stroke-width:.9;stroke-dasharray:2 2;animation:vorb 1.2s linear infinite}
.vpdf .parh{fill:none;stroke:var(--brand);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.vpdf .dm{stroke:rgba(44,48,46,0.29);stroke-width:.5}.vpdf .ins{fill:#FFF5E9}.vpdf .clad{fill:#FFF5E9}.vpdf .scr{fill:rgba(59,77,255,0.1)}
.vpdf .zz{fill:none;stroke:rgba(59,77,255,0.33);stroke-width:.6}.vpdf .jt{fill:none;stroke:rgba(44,48,46,0.29);stroke-width:.4}
.vpdf .ld{fill:none;stroke:#2C302E;stroke-width:.5}.vpdf .dt{fill:var(--pop);stroke:#2C302E;stroke-width:.4}
.vpdf .r1,.vpdf .r2,.vpdf .r3,.vpdf .r4,.vpdf .lb{opacity:0;animation:vpin 10s infinite}
.vpdf .r2{animation-delay:.5s}.vpdf .r3{animation-delay:1s}.vpdf .r4{animation-delay:1.5s}
.vpdf .lb{animation-name:vplb}.vpdf .k2{animation-delay:.4s}.vpdf .k3{animation-delay:.8s}.vpdf .k4{animation-delay:1.2s}
@keyframes vpin{0%,14%{opacity:0;transform:translateX(-4px)}22%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes vplb{0%,44%{opacity:0}52%,92%{opacity:1}98%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.vpdf .r1,.vpdf .r2,.vpdf .r3,.vpdf .r4,.vpdf .lb{animation:none;opacity:1}.vpdf .parr{animation:none}}
.wl-vis .vpdf .vsvg{top:36px;height:calc(100% - 86px)}

/* ================= LAB PALETTE (2026-10-23): no more black + orange ("too Halloween").
   The Lab stands out with a deep midnight blue and a periwinkle accent, both drawn from the MIRALTO ultramarine.
   Redefining --pop inside the Lab blocks turns every former saffron accent there into periwinkle. ================= */
:root{--lab:#FFDBB5;--lab-2:#FFDBB5;--lab-acc:#3B4DFF}
.labsec,.bt-lab{--pop:var(--lab-acc);--bg:var(--lab);background:var(--lab)}
.labsec .btn.pop{color:var(--lab)}
@media(hover:hover){.labsec .btn.pop:hover{box-shadow:4px 4px 0 0 #2C302E}}
.labsec .st-dev i{box-shadow:0 0 0 0 rgba(59,77,255,0.23)}
.labsec .tl-search:focus{box-shadow:0 0 0 3px rgba(59,77,255,0.08)}
.labsec .wl-row.open .wl-in,.labsec .wl-row.open .wl-head{background:rgba(59,77,255,0.02)}
.bt-lab .bt-chips em{border-color:rgba(59,77,255,0.12)}
/* the library filter hides cards with [hidden]; the flex layout must not override it */
.fd-item[hidden],.fd-month[hidden]{display:none!important}


/* iconic building card (vpomp): the exoskeleton draws, the escalator and ducts appear, then three tools are compared */
.vpomp .psh{fill:rgba(44,48,46,0.05)}
.vpomp .pf1{fill:rgba(59,77,255,0.1)}.vpomp .pf2{fill:rgba(59,77,255,0.22)}.vpomp .pf3{fill:#FFF5E9}
.vpomp .pf1,.vpomp .pf2,.vpomp .pf3{stroke:rgba(44,48,46,0.29);stroke-width:.5;stroke-linejoin:round}
.vpomp .pg{fill:none;stroke:rgba(44,48,46,0.47);stroke-width:.35;stroke-dasharray:900;stroke-dashoffset:900;animation:vpg 10s infinite}
.vpomp .px{fill:none;stroke:rgba(44,48,46,0.29);stroke-width:.3;opacity:0;animation:vpx 10s infinite}
.vpomp .pesc{fill:none;stroke:#E0A458;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;animation:vpe 10s infinite}
.vpomp .pd{fill:none;stroke-width:1.6;stroke-linecap:round;opacity:0;animation:vpx 10s infinite}
.vpomp .d1{animation-delay:.15s}.vpomp .d2{animation-delay:.3s}.vpomp .d3{animation-delay:.45s}
.vpomp text.ph{font-size:5.4px;font-weight:700;fill:#2C302E;letter-spacing:.03em}.vpomp text.pt{font-size:4.8px;fill:rgba(44,48,46,0.73)}
.vpomp .pb{fill:rgba(59,77,255,0.16)}
.vpomp .pv{fill:var(--brand);transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:vpv 10s infinite}
.vpomp .v2{animation-delay:.4s}.vpomp .v3{animation-delay:.8s}
.vpomp .pcmp{opacity:0;animation:vpc 10s infinite}
@keyframes vpg{0%,4%{stroke-dashoffset:900}26%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:900}}
@keyframes vpx{0%,22%{opacity:0}30%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes vpe{0%,28%{stroke-dashoffset:160}42%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:160}}
@keyframes vpc{0%,44%{opacity:0}50%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes vpv{0%,50%{transform:scaleX(0)}64%,92%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.vpomp .pg,.vpomp .pesc{animation:none;stroke-dashoffset:0}.vpomp .px,.vpomp .pd,.vpomp .pcmp{animation:none;opacity:1}.vpomp .pv{animation:none;transform:none}}
.wl-vis .vpomp .vsvg{top:36px;height:calc(100% - 86px)}
/* end iconic building card */

/* ================= PALETTE 2026-10-23 (preview v6): Full Spectrum Blue 3B4DFF · Seaweed 419D78 · Sunlit Clay E0A458 · Soft Apricot FFDBB5 · Graphite 2C302E
   page background = the light tone of the apricot (FFF5E9) · Soft Apricot = soft surfaces (Suivre card, the newsletter band)
   graphite = text and the logo, the Lab's surfaces, the footer
   blue = the brand AND the actions: every "Suivre le Lab" button is blue (no orange buttons any more), links, accent words on light,
          the Sessions card (a small surface only, no large blue backgrounds)
   lab grey 565753 = a lighter tone of the graphite (graphite over the light apricot) for the Lab and the footer, with apricot accents
   seaweed = the Lab's buttons and the "it works" chips
   clay = small warm accents only: the highlight in the hero sentence, the live dot, the session date on the blue card ================= */
/* v7: graphite is for text only, never a background. The Lab is on Soft Apricot (accents in blue, gauges in blue),
   the footer is on the page background. */
/* actions: blue */
.btn.pop,.navcta,.bt-fol .btn.ink,.band.accent .btn,.mm-cta{background:var(--brand)!important;border-color:var(--brand)!important;color:#FFF5E9!important}
@media(hover:hover){.btn.pop:hover,.navcta:hover,.bt-fol .btn.ink:hover{box-shadow:4px 4px 0 0 var(--ink)!important}}
.labsec .btn.pop{background:var(--seaweed)!important;border-color:var(--seaweed)!important;color:#2C302E!important}
@media(hover:hover){.labsec .btn.pop:hover{box-shadow:4px 4px 0 0 #2C302E!important}}
/* warm accents */
.hero-sub b{background:linear-gradient(transparent 58%,rgba(224,164,88,.45) 58%,rgba(224,164,88,.45) 92%,transparent 92%)}
.bt-dot{background:var(--pop)}
.bt-ses .bt-when{color:var(--apricot)}
/* home cards: Lab (graphite + seaweed), Sessions (blue), Suivre (apricot + blue button) */
.bt-fol{background:var(--apricot);border:0}
/* newsletter band: apricot, not a large blue area */
.band.accent{--bg:var(--apricot);--fg:var(--ink);--fdim:rgba(44,48,46,.8);--fdim2:rgba(44,48,46,.55);--fline:rgba(44,48,46,.18);--facc:var(--brand);background:var(--apricot);color:var(--ink)}
.band.accent h2,.band.accent h2 span{color:var(--ink)}
.band.accent .b,.band.accent h2 .b{color:var(--brand)}
.band.accent p,.band.accent .nl-p{color:rgba(44,48,46,.85)}
.band.accent .ac-row input{background:var(--paper);color:var(--ink);border:1px solid rgba(44,48,46,.15)}
.band.accent .ac-row input::placeholder{color:rgba(44,48,46,.5)}
.band.accent .mail{color:var(--ink);border-color:var(--ink)}
.band.accent .ac-ok,.cta .ac-ok{color:var(--brand)}
/* footer: graphite */
.megafoot{background:var(--paper);border-top:1px solid var(--line)}
/* the Lab: graphite with seaweed accents */
.labsec .lab-tags em,.wl-dark .lab-tags em{border-color:rgba(44,48,46,.22)}
.labsec .wl-row.open .wl-in,.labsec .wl-row.open .wl-head{background:rgba(44,48,46,.05)}
.bt-lab .bt-chips em{border-color:rgba(44,48,46,.25)}
.labsec .tl-chip.on{color:#2C302E}
/* "it works" chips in the animations: seaweed */
.viz .vchip{color:var(--seaweed);background:rgba(65,157,120,.1);border-color:rgba(65,157,120,.32)}
.card,.demo,.fd-card,.si-card,.ov .off{background-color:var(--paper)}

/* v7 overrides */
.labsec{color:var(--ink)}
.labsec .btn.pop{background:var(--brand)!important;border-color:var(--brand)!important;color:#FFF5E9!important}
@media(hover:hover){.labsec .btn.pop:hover{box-shadow:4px 4px 0 0 var(--ink)!important}}
.labsec .tl-search{background:var(--paper)}
.labsec .tl-chip.on{background:var(--brand);border-color:var(--brand);color:#FFF5E9}
.bt-fol{background:var(--paper);border:1px solid var(--line)}
.bt-lab{color:var(--ink)}
.bt-lab p{color:rgba(44,48,46,.78)}
.megafoot,.megafoot a,.mf-nav a,.mf-copy,.mf-copy a{color:var(--ink)}
/* v7: remaining light-on-dark texts inside the (now light) Lab blocks */
.bt-big i{color:rgba(44,48,46,.6)}
.bt-chips em{color:var(--ink);border-color:rgba(44,48,46,.22)}
.labsec .lab-lead,.labsec .lt-item h4,.labsec .lt-chain,.labsec li span,.labsec .wl-steps li{color:var(--ink)}
.labsec .lt-chain{color:rgba(44,48,46,.7)}
.labsec .btn.onblue{color:var(--ink);border-color:var(--ink);background:none}
@media(hover:hover){.labsec .btn.onblue:hover{background:var(--ink);color:#FFF5E9}}
/* v7: code blocks in articles on Soft Apricot, not graphite */
.post-body pre{background:var(--apricot);color:var(--ink)}
.cp-btn{color:var(--ink);background:rgba(44,48,46,.06);border-color:rgba(44,48,46,.25)}
@media(hover:hover){.cp-btn:hover{background:var(--brand);border-color:var(--brand);color:#FFF5E9}}
.wl-dark .wl-x::before,.wl-dark .wl-x::after{background:var(--ink)}
/* hovered row: the pill turns blue, so its text must be light */
@media(hover:hover){.lab-row:hover .lab-tags em,.wl-dark .wl-head:hover .lab-tags em,.wl-dark .wl-head:hover .wk-fmt{color:#FFF5E9!important}}
.lab-teaser .lab-st{display:flex;align-items:center;gap:8px}
.lab-teaser .lab-st .mk{width:18px;height:18px}
.vpdf text.ptt{text-anchor:middle;dominant-baseline:middle}
/* project rows: hover on Soft Apricot (graphite is never a background) */
.wrow::before{background:var(--apricot)}
@media(hover:hover){.wrow:hover>*{color:var(--ink)}.wrow:hover .wr-m{color:var(--brand)}}
.wl-vis .vdoc .vsvg{top:36px;height:calc(100% - 86px)}
/* hover frame drawn as an inset ring too, so no side disappears at fractional pixel positions */
@media(hover:hover){.fd-card:hover{box-shadow:inset 0 0 0 1px var(--brand),0 18px 40px -30px rgba(59,77,255,.5)}}

/* Lab: rows grouped by status, each group introduced by its gauge, its name and one line */
.wl-group{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:clamp(26px,3vw,40px) 0 12px;border-bottom:1px solid rgba(44,48,46,.15)}
.wl-group:first-child{padding-top:6px}
.wl-group[hidden]{display:none}
.wl-group .lab-st{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600}
.wl-group .lab-st .mk{width:22px;height:22px}
.wl-group .wl-gd{font-size:.95rem;color:rgba(44,48,46,.72)}
/* home "Suivre le Lab" card: Sunlit Clay so it holds its own next to the Lab and Sessions cards */
.bt-fol{background:var(--pop);border:0}
.bt-fol .bt-k{color:var(--ink)}
.bt-fol p{color:rgba(44,48,46,.85)}
.bt-fol .ac-row input{background:var(--paper);border:1px solid rgba(44,48,46,.18)}
/* home cards, softer: "Suivre le Lab" on Soft Apricot; the Lab card on the light background with an apricot frame */
.bt-lab{background:var(--apricot);border:0}
.bt-fol{background:var(--paper);border:1px solid var(--apricot)}

/* ===== Lab: one presentation per status ===== */
.wl-sec[hidden]{display:none}
.wl-sec+.wl-sec{margin-top:clamp(28px,3.4vw,48px)}
/* À découvrir: featured cards */
.wl-feat{display:grid;gap:clamp(14px,1.6vw,20px)}
.wl-feat-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3vw,44px);align-items:center;background:var(--paper);border:1.5px solid var(--brand);border-radius:16px;padding:clamp(22px,2.6vw,36px)}
.wl-feat-card .lab-st{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:600}
.wl-feat-card .lab-st .mk{width:22px;height:22px}
.wl-feat-card h4{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.08;letter-spacing:-.01em;margin:14px 0 12px;color:var(--ink)}
.wl-feat-card .wl-d{color:rgba(44,48,46,.82);line-height:1.6;margin:0 0 12px}
.wl-feat-card .wf-chain{font-family:var(--mono);font-size:.72rem;color:rgba(44,48,46,.65);margin:0 0 20px}
.wl-feat-card .wf-chain b{color:var(--brand);font-weight:500}
.wl-feat-card .wf-vis{position:relative}
.wl-feat-card .wf-vis .demo{position:relative;inset:auto;width:100%}
.wl-feat-card .wf-vis .vask{display:none}
.wl-feat-card .wf-vis .vsvg{top:36px;height:calc(100% - 86px)}
@media(max-width:820px){.wl-feat-card{grid-template-columns:1fr}}
/* Repéré: compact tiles */
.wl-spot{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.wl-spot-card{background:rgba(255,245,233,.55);border:1px dashed rgba(44,48,46,.28);border-radius:12px;padding:16px 18px}
.wl-spot-card .lab-st{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(44,48,46,.7)}
.wl-spot-card .lab-st .mk{width:16px;height:16px}
.wl-spot-card h4{font-weight:700;font-size:1rem;line-height:1.3;margin:10px 0 6px;color:var(--ink)}
.wl-spot-card .ws-tools{font-family:var(--mono);font-size:.66rem;color:var(--brand);margin:0}
/* home "Suivre le Lab" card: light, but framed in blue so it stands out */
.bt-fol{background:var(--paper);border:2px solid var(--brand)}
.bt-fol .bt-k{color:var(--brand)}

/* home: what MIRALTO is, in one sentence, above the three cards */
.ov-intro{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:baseline;margin:0 0 clamp(28px,3.4vw,48px)}
.ov-say{font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.4;letter-spacing:-.01em;color:var(--ink);max-width:46ch;margin:0}
.ov-say b{font-weight:700;color:var(--brand)}
@media(max-width:760px){.ov-intro{grid-template-columns:1fr}}
.phero .lead b{color:var(--ink);font-weight:600}

/* À propos: what MIRALTO offers, as three light blocks */
.ab-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(28px,3.4vw,46px);border-top:1px solid rgba(44,48,46,.18);max-width:980px}
.ab-item{display:flex;flex-direction:column;gap:8px;padding:22px 26px 24px 0;color:var(--ink);transition:transform .4s var(--ease)}
.ab-item+.ab-item{padding-left:26px;border-left:1px solid rgba(44,48,46,.12)}
.ab-n{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--brand)}
.ab-item b{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.01em}
.ab-t{color:rgba(44,48,46,.75);line-height:1.5}
.ab-go{margin-top:6px;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
@media(hover:hover){.ab-item:hover{transform:translateY(-3px)}.ab-item:hover b{color:var(--brand)}}
@media(max-width:760px){.ab-trio{grid-template-columns:1fr}.ab-item,.ab-item+.ab-item{padding:18px 0;border-left:0;border-top:1px solid rgba(44,48,46,.12)}.ab-item:first-child{border-top:0}}

/* Animated tutorial: labelled player + honesty note */
.post-body .tuto{margin:8px 0 34px;position:relative}
.tuto-k{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.tuto-k::before{content:"";width:22px;height:1px;background:var(--brand)}
.tuto video{display:block;width:100%;height:auto;border-radius:10px;border:1px solid rgba(44,48,46,.14);background:var(--paper)}
.tuto figcaption{margin-top:12px;padding:12px 16px;border-left:2px solid var(--pop);background:rgba(255,219,181,.45);border-radius:0 8px 8px 0;font-size:.9rem;line-height:1.55;color:rgba(44,48,46,.85)}
.tuto figcaption b{color:var(--ink);font-weight:600}
.tuto figcaption a{color:var(--brand)}
/* Lab featured card: status + format side by side */
.wf-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wk-fmt.t-tuto{background:none;border:1px solid var(--pop);color:var(--ink)!important;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
/* Sessions page: the two formats */
.fmt2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(20px,2.6vw,34px)}
.fmt2-i{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.4vw,30px);border-radius:14px;background:var(--paper);border:1px solid rgba(44,48,46,.12)}
.fmt2-live{border:1.5px solid var(--brand)}
.fmt2-tag{align-self:flex-start;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid var(--pop);color:var(--ink)}
.fmt2-live .fmt2-tag{border-color:var(--brand);background:var(--brand);color:#FFF5E9}
.fmt2-i b{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1.1rem,1.7vw,1.45rem);letter-spacing:-.01em;color:var(--ink)}
.fmt2-i p{margin:0;line-height:1.6;color:rgba(44,48,46,.8)}
.fmt2-i p b{font-family:inherit;font-weight:600;text-transform:none;font-size:inherit;letter-spacing:0}
/* Sessions page: the tutorials */
.tu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(20px,2.6vw,34px)}
.tu-card{display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.tu-th{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid rgba(44,48,46,.14)}
.tu-th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.tu-th i{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#FFF5E9;font-style:normal;font-size:.8rem}
.tu-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-top:6px}
.tu-card h4{margin:0;font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:1.05rem;line-height:1.15}
@media(hover:hover){.tu-card:hover .tu-th img{transform:scale(1.03)}.tu-card:hover h4{color:var(--brand)}}
@media(max-width:760px){.fmt2{grid-template-columns:1fr}}
.fmt-sec{padding-bottom:clamp(40px,6vw,90px)}
.wf-top .wk-fmt{font-style:normal}

/* Lab featured card: the animation without the cropped apricot frame */
.wl-feat-card .wf-vis{background:none!important;padding:0!important}
.wl-feat-card .wf-vis .demo{border-radius:12px!important;border:1px solid rgba(44,48,46,.12)}
.wf-acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0}
.wf-live{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
@media(hover:hover){.wf-live:hover{text-decoration:underline;text-underline-offset:4px}}
/* video poster (tuto) */
.wf-poster{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid rgba(44,48,46,.12);background:var(--paper)}
.wf-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.wf-poster i{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#FFF5E9;font-style:normal;font-size:1.1rem;box-shadow:0 8px 24px rgba(59,77,255,.3);transition:transform .4s var(--ease)}
.wf-poster span{position:absolute;left:12px;bottom:12px;padding:5px 11px;border-radius:100px;background:rgba(255,245,233,.95);border:1px solid var(--pop);font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
@media(hover:hover){.wf-poster:hover img{transform:scale(1.03)}.wf-poster:hover i{transform:scale(1.08)}}
/* "À la une" */
.une{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center}
.une .mhead{margin:12px 0 14px}
.une-p{color:rgba(44,48,46,.8);line-height:1.6;margin:0 0 22px;max-width:46ch}
.une-steps{list-style:none;margin:0;padding:0;counter-reset:u;display:grid;gap:0;border-top:1px solid rgba(44,48,46,.16)}
.une-steps li{counter-increment:u;display:grid;grid-template-columns:44px 1fr;column-gap:8px;row-gap:4px;padding:16px 0;border-bottom:1px solid rgba(44,48,46,.16)}
.une-steps li::before{content:"0" counter(u);grid-row:span 3;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--brand);padding-top:3px}
.une-steps b{font-weight:600;color:var(--ink)}
.une-steps span{color:rgba(44,48,46,.72);font-size:.95rem;line-height:1.5}
.une-steps a{margin-top:4px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
@media(max-width:860px){.une{grid-template-columns:1fr}.une-vid{order:-1}}
.une .mhead{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.02}
.wf-top .wk-fmt{background:none!important;border:1px solid var(--pop);color:var(--ink)!important;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px}
.wf-poster i{left:auto;top:auto;right:16px;bottom:14px;margin:0;width:52px;height:52px}
.post-body pre code{white-space:pre-wrap;word-break:break-word}
/* play buttons: drawn icon, light frosted disc (no emoji) */
.play-ic{display:block;width:1em;height:1em}
.wf-poster i{width:56px;height:56px;right:14px;bottom:14px;background:rgba(255,245,233,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(44,48,46,.1);box-shadow:0 6px 20px rgba(44,48,46,.12);color:var(--brand);font-size:22px}
.wf-poster i .play-ic{margin-left:3px}
.tu-th i,.lv-thumb i,.si-th i{font-size:16px}
.tu-th i .play-ic,.lv-thumb i .play-ic,.si-th i .play-ic{margin-left:2px}
@media(max-width:760px){.wf-poster i{width:48px;height:48px;font-size:19px;right:12px;bottom:12px}.wf-poster span{left:10px;bottom:10px}}
/* status legend: always one line (FR and EN), tighter on phones */
.mk-legend{flex-wrap:nowrap}
.mk-legend li{white-space:nowrap}
@media(max-width:600px){
  .mk-legend{gap:0 8px}
  .mk-legend li{gap:5px;font-size:clamp(.5rem,2.55vw,.6rem);letter-spacing:.04em}
  .mk-legend .mk{width:16px;height:16px}
  .mk-legend li+li::before{margin-right:6px}
}

/* next session: discreet link to the short animated version */
.lv-tuto{display:inline-block;margin-top:14px;font-size:.9rem;color:rgba(44,48,46,.7);border-bottom:1px solid rgba(59,77,255,.35);padding-bottom:2px;transition:color .3s,border-color .3s}
@media(hover:hover){.lv-tuto:hover{color:var(--brand);border-color:var(--brand)}}

/* teaser of the next topics (until real replays exist) */
.nx{list-style:none;margin:0;padding:0;display:grid}
.nx li{display:grid;grid-template-columns:1fr auto;column-gap:14px;row-gap:2px;padding:12px 0;border-bottom:1px solid var(--line)}
.nx li:last-child{border-bottom:0}
.nx-t{grid-column:1;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.nx b{grid-column:1;font-weight:600;font-size:1rem;line-height:1.35;color:var(--ink)}
.nx em{grid-column:2;grid-row:1/span 2;align-self:center;font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:4px 9px;border:1px dashed rgba(44,48,46,.25);border-radius:100px;white-space:nowrap}
.nx-lead{color:rgba(44,48,46,.75);margin:clamp(18px,2vw,26px) 0 8px;max-width:52ch}
.nx-big{max-width:760px;border-top:1px solid var(--line)}
.nx-big li{padding:18px 0}
.nx-big b{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,1.6vw,1.25rem);letter-spacing:-.01em}

/* topic page: full version (session replay) under the tuto */
.post-body .tuto-rep{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:18px;align-items:center;margin:-14px 0 34px;padding:14px;border:1px solid rgba(44,48,46,.14);border-radius:12px;color:var(--ink);text-decoration:none}
.tuto-rep .tu-th{aspect-ratio:16/9}
.tuto-rep-t{display:flex;flex-direction:column;gap:4px}
.tuto-rep-t .tuto-k{margin:0}
.tuto-rep-t b{font-weight:600}
.tuto-rep-t span:last-child{color:rgba(44,48,46,.72);font-size:.92rem}
@media(hover:hover){.post-body .tuto-rep:hover{border-color:var(--brand)}}
@media(max-width:600px){.post-body .tuto-rep{grid-template-columns:1fr}}

/* home, sessions card: the picture of the next topic */
.si-img{display:block;margin-top:6px;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--paper)}
.si-img img{width:100%;height:100%;object-fit:cover;display:block}
/* home, À la une: two buttons, one quiet line */
.une-acts{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 0}
.une-when{margin:14px 0 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(44,48,46,.6)}
.une-sec{padding-bottom:clamp(56px,7vw,110px)}
.si-img img{transform:scale(1.35)}
.si-img{aspect-ratio:2.2/1}

/* home Lab block: room above "Le Lab" (no hashtag band any more) */
#lab-now{padding-top:clamp(64px,8vw,120px)}
/* topic page: a session is coming on this topic */
.post-body .tp-ses{margin:40px 0 10px;padding:clamp(20px,3vw,32px);border:1.5px solid var(--brand);border-radius:14px;background:var(--paper)}
.post-body .tp-ses h2{margin:8px 0 8px}
.post-body .tp-ses .lv-form{margin-top:16px;display:grid;gap:12px;max-width:520px}

/* live session strip: Lab cards and topic pages */
.wf-ses{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding:12px 16px;border-radius:10px;background:var(--apricot);border:1px solid rgba(224,164,88,.55);color:var(--ink);text-decoration:none;transition:border-color .3s,transform .3s var(--ease)}
.wf-ses span{font-size:.95rem}
.wf-ses b{font-weight:700}
.wf-ses em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);white-space:nowrap}
.wf-ses .bt-dot{flex:none}
@media(hover:hover){.wf-ses:hover{border-color:var(--brand);transform:translateY(-1px)}}
.post-body .wf-ses-page{margin:0 0 26px}
.lv-info .si-img{max-width:440px;margin:18px 0 4px}
/* Lab rows: the animation in a clean rounded box (no cropped apricot frame) */
.wl-vis{background:none!important;padding:0!important}
.wl-vis .demo{border-radius:12px!important;border:1px solid rgba(44,48,46,.12)!important}
/* animations look the same everywhere (the Lab section redefines --pop for its own accents) */
.labsec .demo,.wl .demo,.bt-lab .demo{--pop:#E0A458}
/* next session: format as clear chips, the duration first and filled */
.lv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lv-chips span{display:inline-flex;align-items:center;padding:7px 14px;border-radius:100px;border:1px solid rgba(44,48,46,.22);font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--paper)}
.lv-chips .lv-dur{background:var(--brand);border-color:var(--brand);color:#FFF5E9;font-weight:600}