/* Michelsens 2.0 proposal — Sim Design System v2 (light) + Michelsens brand layer */

:root{
  /* Brand layer (from Michelsens / Odilon Instagram): plaster, oak, terracotta, oxblood, greige, charcoal */
  --m-paper:#F6F3EE;      /* page background: warm off-white plaster */
  --m-plaster:#EDE8E0;    /* alternate section band */
  --m-plaster-2:#E4DDD2;
  --m-card:#FFFFFF;
  --m-card-warm:#FBF9F6;
  --m-line:#E3DCD1;       /* hairline on warm surfaces */
  --m-line-strong:#D2C8BA;
  --m-greige:#B9AE9F;
  --m-oak:#C99A6B;
  --m-oak-bg:#F3E8DC;
  --m-terra:#C4572F;      /* human approval gate (replaces DS ember on this page) */
  --m-terra-bg:#F8E6DD;
  --m-oxblood:#7A2E22;    /* brand accent: links, active, eyebrow */
  --m-oxblood-bg:#F2E3DF;
  --m-ink:#2A2623;        /* charcoal: primary text + primary buttons */
  --m-ink-2:#5B534C;
  --m-ink-3:#6E655C;      /* tertiary, passes AA on paper */
  --m-muted:#8C8177;      /* second-line emphasis in headings (large text, >3:1) */
  --m-ok:#127A3A; --m-ok-bg:#E3F2E7;
  --m-warn:#A94E07; --m-warn-bg:#FBEEDB;
  --m-info:#2F56C8; --m-info-bg:#E8EEFB;
  --sans:"Figtree",system-ui,sans-serif;
  --shadow-soft:0 1px 2px rgba(42,38,35,.04),0 8px 24px -12px rgba(42,38,35,.12);
  --shadow-lift:0 2px 6px rgba(42,38,35,.05),0 24px 48px -20px rgba(42,38,35,.22);
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--m-paper);color:var(--m-ink);font:var(--type-body);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
button{font-family:inherit}
a{color:var(--m-oxblood)}
.num,.kpi .val{font-variant-numeric:tabular-nums}
.ic{flex:none;display:inline-block;vertical-align:middle}
:focus-visible{outline:2px solid #8E8E8E;outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* Top bar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(246,243,238,.86);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--m-line)}
.topbar .wrap{display:flex;align-items:center;gap:24px;height:60px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--m-ink)}
.brand .logo{height:30px;width:auto;color:var(--m-ink)}
.brand span{font:500 12px/16px var(--sans);color:var(--m-ink-3);letter-spacing:.08em;text-transform:uppercase;padding-left:12px;border-left:1px solid var(--m-line-strong)}
.nav{margin-left:auto;display:flex;gap:2px}
.nav a{font:500 13px/18px var(--sans);color:var(--m-ink-2);text-decoration:none;padding:7px 10px;border-radius:10px;transition:background var(--motion-hover-duration),color var(--motion-hover-duration)}
.nav a:hover{background:var(--m-plaster);color:var(--m-ink)}
.nav a.active{color:var(--m-oxblood);background:var(--m-oxblood-bg)}

/* Sections */
section{padding:112px 0}
section.band{background:var(--m-plaster)}
.eyebrow{font:600 12px/16px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--m-oxblood);display:flex;align-items:center;gap:10px;margin:0 0 16px}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;opacity:.6}
h1,h2{font-family:var(--sans);font-weight:600;letter-spacing:-.02em;color:var(--m-ink);margin:0}
h2{font-size:clamp(28px,2.8vw,38px);line-height:1.18}
h2 em,h1 em{font-style:normal;color:var(--m-muted)}
h1 em{color:var(--m-oxblood)}
h3{font:600 17px/24px var(--sans);margin:0}
.lede{font:400 18px/28px var(--sans);color:var(--m-ink-2);max-width:640px;margin:18px 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px}
.sec-head .side{max-width:360px;color:var(--m-ink-3);font:var(--type-small)}
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;font:500 12px/16px var(--sans);background:var(--m-plaster);color:var(--m-ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tag.rule{background:var(--m-oxblood-bg);color:var(--m-oxblood);letter-spacing:.02em}
.tag.ok{background:var(--m-ok-bg);color:var(--m-ok)}
.tag.warn{background:var(--m-warn-bg);color:var(--m-warn)}
.tag.terra{background:var(--m-terra-bg);color:#9C3F1F}
.tag.info{background:var(--m-info-bg);color:var(--m-info)}
.tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.example{background:transparent;border:1px dashed var(--m-line-strong);color:var(--m-ink-3)}

.card{background:var(--m-card);border:1px solid var(--m-line);border-radius:14px;box-shadow:var(--shadow-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:13px;border:1px solid var(--m-line-strong);background:#fff;color:var(--m-ink);font:500 14px/20px var(--sans);cursor:pointer;transition:background var(--motion-hover-duration),transform var(--motion-press-duration),border-color var(--motion-hover-duration)}
.btn:hover{background:var(--m-card-warm);border-color:var(--m-greige)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--m-ink);border-color:var(--m-ink);color:#fff}
.btn.primary:hover{background:#3d3732}
.btn.sm{height:28px;padding:0 10px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.45;cursor:default}

/* ---------- 1. Intro ---------- */
.hero{padding:72px 0 96px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:64px;align-items:center}
.hero .logo-big{width:150px;color:var(--m-ink);margin-bottom:36px}
.hero h1{font-size:clamp(44px,4.6vw,64px);line-height:1.04;font-weight:600;letter-spacing:-.025em}
.hero h1 em{font-weight:600}
.hero .sub{font:500 19px/28px var(--sans);color:var(--m-ink);margin:20px 0 0}
.hero .story{font:400 16px/26px var(--sans);color:var(--m-ink-2);margin:20px 0 0;max-width:540px}
.hero .meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;border-top:1px solid var(--m-line-strong);max-width:560px}
.stats div{padding:16px 16px 0 0}
.stats b{display:block;font:600 30px/38px var(--sans);letter-spacing:-.02em;color:var(--m-ink);font-variant-numeric:tabular-nums}
.stats span{font:var(--type-caption);color:var(--m-ink-3)}
.hero-visual{position:relative}
.hero-visual .frame{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lift);border:1px solid var(--m-line);background:#fff;aspect-ratio:4/3.4}
.hero-visual .frame img{width:100%;height:100%;object-fit:cover;object-position:52% 60%}
.float{position:absolute;background:#fff;border:1px solid var(--m-line);border-radius:12px;box-shadow:var(--shadow-lift);padding:10px 12px;display:flex;gap:10px;align-items:center;font:var(--type-small);min-width:200px;animation:floaty 6s ease-in-out infinite}
.float .ic-tile{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.float b{display:block;font:600 13px/18px var(--sans)}
.float small{color:var(--m-ink-3);font:var(--type-caption)}
.float.f1{left:-28px;top:12%}
.float.f2{right:-20px;top:46%;animation-delay:-2s}
.float.f3{left:8%;bottom:-22px;animation-delay:-4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- 2. Why ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-card{padding:28px}
.why-card .num-badge{font:600 13px/1 var(--sans);letter-spacing:.04em;color:var(--m-oxblood);margin-bottom:28px;display:flex;align-items:center;justify-content:space-between}
.why-card .ic-tile{width:40px;height:40px;border-radius:12px;background:var(--m-oak-bg);color:#8A5A2E;display:grid;place-items:center}
.why-card h3{font-size:18px;line-height:26px;letter-spacing:-.01em;margin-bottom:10px}
.why-card p{margin:0;color:var(--m-ink-2);font:400 15px/23px var(--sans)}
.why-card .vs{margin-top:22px;padding-top:16px;border-top:1px dashed var(--m-line-strong);font:var(--type-small);color:var(--m-ink-3);display:flex;gap:8px}
.why-card .vs b{color:var(--m-ink-2);font-weight:500}

/* ---------- 3. Map ---------- */
.map-shell{display:grid;grid-template-columns:minmax(0,1fr) 330px;background:var(--m-card);border:1px solid var(--m-line);border-radius:20px;box-shadow:var(--shadow-soft);overflow:hidden;min-height:660px}
.map-canvas{position:relative;background:radial-gradient(circle at 1px 1px,#e6dfd4 1px,transparent 1.2px) 0 0/22px 22px,var(--m-card-warm);border-right:1px solid var(--m-line)}
.map-toolbar{position:absolute;left:16px;top:14px;right:16px;display:flex;gap:8px;flex-wrap:wrap;z-index:2;pointer-events:none}
.map-toolbar .tag{background:#fff;border:1px solid var(--m-line);pointer-events:auto}
.panel{padding:24px;display:flex;flex-direction:column;gap:18px;overflow:auto;max-height:720px}
.panel .p-head{display:flex;gap:12px;align-items:center}
.panel .p-ic{width:44px;height:44px;border-radius:50%;border:1px solid var(--m-line-strong);display:grid;place-items:center;color:var(--m-oxblood);background:#fff;flex:none}
.panel .p-ic.person{background:var(--m-terra);border-color:var(--m-terra);color:#fff;font:600 17px var(--sans)}
.panel .p-ic.gate{background:var(--m-terra);border-color:var(--m-terra);color:#fff}
.panel h3{font:600 18px/24px var(--sans)}
.panel .p-sub{font:var(--type-small);color:var(--m-ink-3)}
.panel p{margin:0;color:var(--m-ink-2);font:400 14px/22px var(--sans)}
.panel .props{display:grid;grid-template-columns:96px 1fr;gap:8px 12px;font:var(--type-small);padding:14px;background:var(--m-card-warm);border:1px solid var(--m-line);border-radius:12px}
.panel .props dt{color:var(--m-ink-3)}
.panel .props dd{margin:0;color:var(--m-ink)}
.panel .label{font:600 11px/16px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--m-ink-3)}
.steps-inner{list-style:none;margin:0;padding:0;position:relative}
.steps-inner li{position:relative;padding:0 0 14px 30px}
.steps-inner li::before{content:"";position:absolute;left:10px;top:22px;bottom:-2px;border-left:1px dashed var(--m-line-strong)}
.steps-inner li:last-child::before{display:none}
.steps-inner .sdot{position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:#fff;border:1px solid var(--m-line-strong);display:grid;place-items:center;font:600 10px/1 var(--sans);color:var(--m-ink-2)}
.steps-inner b{display:block;font:600 13px/20px var(--sans)}
.steps-inner span{font:var(--type-small);color:var(--m-ink-2)}
.steps-inner .st{margin-left:6px}
.panel .hint{font:var(--type-caption);color:var(--m-ink-3)}

/* ---------- 4. Atelier ---------- */
.atelier-frame{position:relative;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--m-line);box-shadow:var(--shadow-lift)}
.atelier-stage{position:relative;width:100%;aspect-ratio:16/9}
.atelier-stage>img{position:absolute;inset:0;width:100%;height:100%}
.atelier-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ov{position:absolute;transform:translate(-50%,-100%);pointer-events:none}
.bubble{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--m-line);box-shadow:0 6px 18px -8px rgba(42,38,35,.35);border-radius:999px;padding:4px 10px 4px 7px;font:600 12px/16px var(--sans);color:var(--m-ink);white-space:nowrap;animation:bob 4s ease-in-out infinite}
.bubble .led{width:8px;height:8px;border-radius:50%;background:var(--m-ok);box-shadow:0 0 0 0 rgba(18,122,58,.5);animation:led 2s ease-out infinite}
.bubble.wait .led{background:var(--m-terra);box-shadow:0 0 0 0 rgba(196,87,47,.5);animation-name:ledT}
.bubble.work .led{background:var(--m-oak);animation-name:ledO}
.bubble::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:#fff;border-right:1px solid var(--m-line);border-bottom:1px solid var(--m-line);transform:translateX(-50%) rotate(45deg)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes led{0%{box-shadow:0 0 0 0 rgba(18,122,58,.45)}100%{box-shadow:0 0 0 7px rgba(18,122,58,0)}}
@keyframes ledT{0%{box-shadow:0 0 0 0 rgba(196,87,47,.5)}100%{box-shadow:0 0 0 7px rgba(196,87,47,0)}}
@keyframes ledO{0%{box-shadow:0 0 0 0 rgba(201,154,107,.6)}100%{box-shadow:0 0 0 7px rgba(201,154,107,0)}}
.typing{display:inline-flex;gap:2px;margin-left:2px}
.typing i{width:3px;height:3px;border-radius:50%;background:var(--m-ink-3);animation:typ 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes typ{0%,60%,100%{opacity:.25}30%{opacity:1}}
.steam{filter:blur(.6px)}
.steam path{fill:none;stroke:rgba(255,255,255,.9);stroke-linecap:round;opacity:0;animation:steam 3.2s ease-out infinite}
.steam path:nth-child(2){animation-delay:1.05s}.steam path:nth-child(3){animation-delay:2.1s}
@keyframes steam{0%{opacity:0;transform:translateY(4px)}30%{opacity:.75}100%{opacity:0;transform:translateY(-18px)}}
.zzz text{font:700 16px var(--sans);fill:#6B4A36;stroke:#fff;stroke-width:3px;paint-order:stroke;opacity:0;animation:zz 4.5s ease-out infinite}
.zzz text:nth-child(2){animation-delay:1.5s;font-size:12px}.zzz text:nth-child(3){animation-delay:3s;font-size:10px}
@keyframes zz{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}100%{opacity:0;transform:translate(10px,-22px)}}
.dog-breath{position:absolute;background-image:url("atelier.jpg");background-size:var(--bgw) var(--bgh);transform-origin:50% 100%;animation:breathe 3.6s ease-in-out infinite;clip-path:ellipse(48% 46% at 50% 54%)}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.035)}}
.dog-tail{position:absolute;background-image:url("atelier.jpg");transform-origin:50% 4%;animation:wag 2.4s ease-in-out infinite;clip-path:polygon(30% 0,75% 0,80% 100%,25% 100%)}
@keyframes wag{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
.hot{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;border:none;background:transparent;cursor:pointer;pointer-events:auto;padding:0}
.hot::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff;border:2px solid var(--m-oxblood);box-shadow:0 2px 8px rgba(42,38,35,.3)}
.hot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);animation:hotp 2.6s ease-out infinite}
@keyframes hotp{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
.hot-card{position:absolute;z-index:5;width:260px;background:#fff;border:1px solid var(--m-line);border-radius:14px;box-shadow:var(--shadow-lift);padding:14px 16px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s}
.hot-card.show{opacity:1;transform:translateY(0)}
.hot-card .k{font:600 11px/16px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--m-oxblood)}
.hot-card b{display:block;font:600 15px/22px var(--sans);margin:2px 0 4px}
.hot-card p{margin:0;font:var(--type-small);color:var(--m-ink-2)}
.hot-card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.atelier-legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:14px 20px;border-top:1px solid var(--m-line);background:var(--m-card-warm);font:var(--type-small);color:var(--m-ink-2)}
.atelier-legend .lg{display:inline-flex;align-items:center;gap:8px}
.atelier-legend .sw{width:9px;height:9px;border-radius:50%}
.atelier-legend .right{margin-left:auto;color:var(--m-ink-3)}
.atelier-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.atelier-notes .card{padding:20px}
.atelier-notes p{margin:6px 0 0;color:var(--m-ink-2);font:400 14px/22px var(--sans)}

/* ---------- 5. Studio OS ---------- */
.os-layout{display:grid;grid-template-columns:170px minmax(0,1fr) 170px;gap:20px;align-items:stretch}
.callouts{display:flex;flex-direction:column;justify-content:space-around;gap:24px}
.callout{position:relative;font:var(--type-small);color:var(--m-ink-2)}
.callout b{display:block;font:600 14px/20px var(--sans);color:var(--m-ink);margin-bottom:4px}
.callout .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--m-oxblood);color:#fff;font:600 11px/1 var(--sans);margin-bottom:8px}
.callouts.left .callout::after,.callouts.right .callout::after{content:"";position:absolute;top:11px;width:26px;border-top:1px solid var(--m-greige)}
.callouts.left .callout::after{right:-22px;width:18px}
.callouts.right .callout::after{left:-22px;width:18px}
.callouts.left .callout{text-align:right}
.callouts.left .callout .n{margin-left:auto}
.os-wrap{display:flex;justify-content:center}
.os-app{zoom:.8;width:1000px;flex:none;background:#F7F7F8;border:1px solid #E0E0E3;border-radius:18px;box-shadow:var(--shadow-lift);overflow:hidden;display:grid;grid-template-columns:208px 1fr;font-family:var(--sans)}
.os-side{background:#FAFAFA;border-right:1px solid #E5E5E5;padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.os-side .ws{display:flex;align-items:center;gap:10px;padding:4px 6px 16px}
.os-side .ws .logo{height:22px;width:auto;color:var(--m-ink)}
.os-side .ws small{display:block;font:var(--type-caption);color:#6B6B6B}
.os-side .grp{font:var(--type-caption);color:#6B6B6B;padding:14px 8px 6px}
.os-nav{display:flex;align-items:center;gap:10px;height:32px;padding:0 8px;border-radius:6px;font:500 13px/18px var(--sans);color:#525252;border:none;background:none;cursor:pointer;width:100%;text-align:left}
.os-nav:hover{background:#F0F0F0}
.os-nav.active{background:#fff;color:#0A0A0A;box-shadow:0 0 0 1px #E5E5E5,0 1px 2px rgba(0,0,0,.04)}
.os-nav.active .ic{color:var(--m-oxblood)}
.os-nav .cnt{margin-left:auto;min-width:20px;height:20px;border-radius:999px;background:#fff;border:1px solid #E5E5E5;font:500 11px/18px var(--sans);text-align:center;color:#525252;padding:0 6px}
.os-side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 6px 2px;border-top:1px solid #E5E5E5}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--sans);background:var(--m-oak-bg);color:#7B4E25;flex:none}
.os-main{padding:20px 24px 24px;display:flex;flex-direction:column;gap:16px;min-width:0}
.os-top{display:flex;align-items:center;gap:12px}
.os-top h4{margin:0;font:600 20px/28px var(--sans)}
.os-top p{margin:0;font:var(--type-small);color:#6B6B6B}
.os-top .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:#fff;border-radius:10px;box-shadow:0 0 0 1px #E5E5E5;padding:14px 16px}
.kpi .lab{display:flex;align-items:center;justify-content:space-between;font:var(--type-small);color:#525252}
.kpi .lab .tile{width:24px;height:24px;border-radius:6px;background:#F5F5F5;display:grid;place-items:center;color:#525252}
.kpi .val{font:600 26px/34px var(--sans);margin-top:6px;letter-spacing:-.01em}
.kpi .delta{font:var(--type-caption);color:#6B6B6B;margin-top:2px}
.kpi .delta b{color:var(--m-ok);font-weight:500}
.kpi .bar{height:4px;border-radius:4px;background:#EFEFEF;margin-top:10px;overflow:hidden}
.kpi .bar i{display:block;height:100%;background:var(--m-oak);border-radius:4px;transition:width .5s var(--motion-ease-standard)}
.os-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:12px}
.pane{background:#fff;border-radius:10px;box-shadow:0 0 0 1px #E5E5E5;padding:14px 16px;min-width:0}
.pane-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pane-h h5{margin:0;font:600 14px/20px var(--sans)}
.pane-h .r{margin-left:auto;font:var(--type-caption);color:#6B6B6B}
.q-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #F0F0F0}
.q-item:first-of-type{border-top:none}
.q-item .qi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#F5F5F5;color:#525252}
.q-item .t{font:500 13px/18px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-item .m{font:var(--type-caption);color:#6B6B6B;display:flex;gap:6px;align-items:center;margin-top:2px;flex-wrap:wrap}
.q-item .acts{display:flex;gap:6px}
.q-item .detail{grid-column:2/4;font:var(--type-small);color:#525252;background:#FAFAFA;border-radius:8px;padding:8px 10px;display:none}
.q-item.open .detail{display:block}
.q-item.done .t{color:#6B6B6B}
.q-item.done .qi{background:var(--m-ok-bg);color:var(--m-ok)}
.q-item .done-lbl{display:none;align-items:center;gap:6px;font:500 12px/16px var(--sans);color:var(--m-ok)}
.q-item.done .done-lbl{display:inline-flex}
.q-item.done .acts .btn:not(.undo){display:none}
.q-item .undo{display:none}
.q-item.done .undo{display:inline-flex}
.ag-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #F0F0F0}
.ag-item:first-of-type{border-top:none}
.ag-item .bot{width:28px;height:28px;border-radius:50%;background:#F5F1EC;display:grid;place-items:center;color:#7B4E25;flex:none}
.ag-item .nm{font:500 13px/18px var(--sans)}
.ag-item .ds{font:var(--type-caption);color:#6B6B6B}
.ag-item .tag{margin-left:auto}
.chat{display:flex;flex-direction:column;gap:10px}
.chat-log{display:flex;flex-direction:column;gap:8px;max-height:180px;overflow:auto;padding-right:4px}
.msg{max-width:84%;padding:8px 12px;border-radius:12px;font:400 13px/19px var(--sans)}
.msg.bot{background:#F5F5F5;color:#0A0A0A;border-top-left-radius:4px}
.msg.bot .who{display:block;font:600 11px/16px var(--sans);color:var(--m-oxblood);margin-bottom:2px}
.msg.me{align-self:flex-end;background:var(--m-ink);color:#fff;border-top-right-radius:4px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:26px;padding:0 10px;border-radius:999px;border:1px solid #E5E5E5;background:#fff;font:500 12px/16px var(--sans);color:#525252;cursor:pointer}
.chip:hover{background:#F5F5F5}
.chat-in{display:flex;gap:8px}
.chat-in input{flex:1;height:36px;border-radius:13px;border:1px solid #E5E5E5;background:#F5F5F5;padding:0 12px;font:400 14px/20px var(--sans);color:#0A0A0A}
.chat-in input::placeholder{color:#6B6B6B}
.chat-in input:focus{outline:2px solid #8E8E8E;outline-offset:2px;background:#fff}

/* ---------- 6. Any project ---------- */
.proj{padding:28px}
.proj-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.seg{display:inline-flex;background:var(--m-plaster);border-radius:12px;padding:3px}
.seg button{height:30px;padding:0 14px;border:none;background:none;border-radius:10px;font:500 13px/18px var(--sans);color:var(--m-ink-2);cursor:pointer}
.seg button.on{background:#fff;color:var(--m-ink);box-shadow:0 0 0 1px var(--m-line),0 1px 2px rgba(0,0,0,.05)}
.proj-top .sp{margin-left:auto;display:flex;gap:8px}
.stepper{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));position:relative;margin:0 0 24px;padding:0;list-style:none}
.stepper::before{content:"";position:absolute;left:5%;right:5%;top:19px;border-top:1px dashed var(--m-line-strong)}
.stepper .prog{position:absolute;left:5%;top:18px;height:3px;background:var(--m-oxblood);border-radius:2px;transition:width .5s var(--motion-ease-standard);width:0}
.stepper li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;cursor:pointer;padding:0 4px}
.stepper .c{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--m-line-strong);display:grid;place-items:center;color:var(--m-ink-3);position:relative;z-index:1;transition:all .3s}
.stepper li.gate .c::after{content:"";position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--m-terra);border:2px solid #fff}
.stepper li.done .c{background:var(--m-oxblood-bg);border-color:#D9B7AF;color:var(--m-oxblood)}
.stepper li.cur .c{background:var(--m-oxblood);border-color:var(--m-oxblood);color:#fff;box-shadow:0 0 0 6px rgba(122,46,34,.12)}
.stepper .s{font:500 12px/16px var(--sans);color:var(--m-ink-2)}
.stepper li.cur .s{color:var(--m-ink);font-weight:600}
.proj-detail{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:0;border:1px solid var(--m-line);border-radius:14px;overflow:hidden;background:var(--m-card-warm)}
.proj-detail>div{padding:18px 20px;border-left:1px solid var(--m-line)}
.proj-detail>div:first-child{border-left:none;background:#fff}
.proj-detail .k{font:600 11px/16px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--m-ink-3);margin-bottom:6px;display:flex;gap:6px;align-items:center}
.proj-detail .v{font:500 14px/21px var(--sans)}
.proj-detail .big{font:600 22px/28px var(--sans);letter-spacing:-.015em}
.proj-detail .gate-v{color:#9C3F1F}
.proj-legend{display:flex;gap:18px;margin-top:16px;font:var(--type-small);color:var(--m-ink-3)}
.proj-legend span{display:inline-flex;gap:8px;align-items:center}
.proj-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}

/* ---------- 7. Architecture / roles / roadmap ---------- */
.arch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.arch-card{padding:24px}
.arch-card .ic-tile{width:40px;height:40px;border-radius:12px;background:var(--m-plaster);display:grid;place-items:center;color:var(--m-ink);margin-bottom:18px}
.arch-card h3{margin-bottom:8px}
.arch-card p{margin:0;color:var(--m-ink-2);font:400 14px/22px var(--sans)}
.rules{margin-top:20px;display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.rules .card{padding:8px 0}
.rule-row{display:flex;align-items:center;gap:14px;padding:12px 22px;border-top:1px solid var(--m-line);font:400 14px/20px var(--sans);color:var(--m-ink-2)}
.rule-row:first-child{border-top:none}
.rule-row .tag{min-width:78px;justify-content:center}
.rules .control{padding:28px;background:var(--m-ink);color:#EDE8E0;border-color:var(--m-ink);display:flex;flex-direction:column;gap:14px}
.control h3{color:#fff;font:600 24px/30px var(--sans);letter-spacing:-.02em}
.control p{margin:0;color:#CFC6B8;font:400 15px/24px var(--sans)}
.control .built{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);display:flex;gap:10px;align-items:center;color:#EDE8E0;font:500 14px/20px var(--sans)}
.control .built .ic{color:#9FD6AE}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.role{padding:28px;display:flex;flex-direction:column;gap:14px}
.role .who{display:flex;gap:14px;align-items:center}
.role .av{width:48px;height:48px;font:600 18px/1 var(--sans)}
.role h3{font:600 19px/26px var(--sans);letter-spacing:-.015em}
.role .rt{font:500 13px/18px var(--sans);color:var(--m-oxblood)}
.role p{margin:0;color:var(--m-ink-2);font:400 15px/23px var(--sans)}
.role ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.role li{display:flex;gap:10px;font:400 14px/20px var(--sans);color:var(--m-ink)}
.role li .ic{color:var(--m-oak);margin-top:1px}
.role .odilon{margin-top:auto;padding:12px 14px;border-radius:12px;background:var(--m-plaster);font:var(--type-small);color:var(--m-ink-2)}
.role .odilon b{font-weight:600;font-size:14px;color:var(--m-ink)}
.road{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.road::before{content:"";position:absolute;left:0;right:0;top:9px;border-top:1px solid var(--m-line-strong)}
.road .ph{padding:0 24px 0 0;position:relative}
.road .ph .d{width:19px;height:19px;border-radius:50%;background:var(--m-paper);border:2px solid var(--m-oxblood);position:relative}
.road .ph:first-child .d{background:var(--m-oxblood)}
.road .ph .w{font:600 12px/16px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--m-oxblood);margin:20px 0 8px}
.road .ph h3{font:600 19px/26px var(--sans);letter-spacing:-.015em;margin-bottom:8px}
.road .ph p{margin:0;color:var(--m-ink-2);font:400 14px/22px var(--sans)}
.closing{text-align:center;padding:120px 0 96px}
.closing .logo{width:110px;color:var(--m-ink);margin:0 auto 32px}
.closing h2{font-size:clamp(30px,3.2vw,44px);line-height:1.15;max-width:820px;margin:0 auto}
.closing p{color:var(--m-ink-2);font:400 17px/27px var(--sans);max-width:620px;margin:20px auto 0}
footer{border-top:1px solid var(--m-line);padding:28px 0;font:var(--type-small);color:var(--m-ink-3)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer b{color:var(--m-ink);font-weight:600}

/* reveal */
.rv{opacity:0;translate:0 14px;transition:var(--rvT)}
.rv.in{opacity:1;translate:none}

/* Responsive */
@media (max-width:1240px){
  .os-layout{grid-template-columns:1fr}
  .callouts{flex-direction:row;justify-content:stretch}
  .callouts .callout{flex:1;text-align:left!important}
  .callouts.left .callout .n{margin-left:0}
  .callouts .callout::after{display:none}
  .os-wrap{overflow:hidden}
  .callouts.right{order:3}
}
@media (max-width:1180px){
  .map-shell{grid-template-columns:1fr}
  .map-canvas{border-right:none;border-bottom:1px solid var(--m-line)}
  .panel{max-height:none}
  .arch-grid{grid-template-columns:repeat(2,1fr)}
  .nav a{padding:7px 7px}
}

@media (max-width:960px){
  .nav{display:none}
  .hero .wrap{grid-template-columns:1fr}
  .why-grid,.roles,.atelier-notes{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
  .proj-detail{grid-template-columns:1fr 1fr}
  .stepper{grid-template-columns:repeat(5,1fr);row-gap:20px}
  .stepper::before,.stepper .prog{display:none}
  .road{grid-template-columns:1fr 1fr;row-gap:32px}
  .callouts{flex-direction:column}
  .sec-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:700px){
  .wrap{padding:0 18px}
  section{padding:72px 0}
  .arch-grid,.road,.proj-detail{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .float{display:none}
  .bubble{font-size:10px;padding:2px 7px 2px 5px}
  .hot{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;translate:none}
  .steam path,.zzz text{opacity:.7}
}
@media (max-width:700px){.map-shell{min-height:0}.map-svg{min-height:0!important;height:auto;aspect-ratio:1000/780}}

/* ---------- AI web (connection map, light) ---------- */
.map-svg{width:100%;height:100%;display:block;min-height:640px}
.map-svg text{font-family:var(--sans)}
.map-svg .orbit{fill:none;stroke:#E2D9CC;stroke-width:1.2}
.map-svg .orbit2{fill:none;stroke:#ECE5DA;stroke-width:1;stroke-dasharray:2 6}
.map-svg .spoke{fill:none;stroke:#D6CBBD;stroke-width:1.1;stroke-dasharray:3 6;transition:opacity .25s}
.map-svg .flow{fill:none;stroke-width:1.8;stroke-dasharray:6 6;stroke-linecap:round;animation:dash 1.4s linear infinite;transition:opacity .25s,stroke-width .25s}
.map-svg .flow.spot{stroke-width:3}
.map-svg .flow.dim,.map-svg .spoke.dim{opacity:.12}
.map-svg .pill rect{fill:#fff;stroke-width:1;transition:fill .25s}
.map-svg .pill text{font-size:12.5px;font-weight:600;text-anchor:middle}
.map-svg .pill{transition:opacity .25s}
.map-svg .pill.dim{opacity:.18}
.map-svg .mover{transition:opacity .25s}
.map-svg .mover.dim{opacity:0}
@keyframes dash{to{stroke-dashoffset:-24}}
.map-svg .node{cursor:pointer;outline:none;transition:opacity .25s}
.map-svg .node.dim{opacity:.32}
.map-svg .node .halo{opacity:.09;transition:opacity .2s}
.map-svg .node:hover .halo,.map-svg .node.sel .halo{opacity:.2}
.map-svg .node .ring{fill:#fff;stroke-width:1.6}
.map-svg .node .sel-ring{fill:none;stroke-width:1.5;stroke-dasharray:4 3;opacity:0}
.map-svg .node.sel .sel-ring{opacity:1}
.map-svg .node:focus-visible .sel-ring{opacity:1;stroke:#8E8E8E}
.map-svg .node .lbl{font-size:14.5px;font-weight:600;fill:var(--m-ink);text-anchor:middle}
.map-svg .node .sub{font-size:12px;font-weight:500;fill:var(--m-ink-3);text-anchor:middle}
.map-svg .node.person .ring{stroke:none}
.map-svg .node.person .initial{font-size:17px;font-weight:600;fill:#fff;text-anchor:middle}
.map-svg .hub .core{fill:#fff;stroke:var(--m-ink);stroke-width:1.6}
.map-svg .hub .r1{fill:none;stroke:#D9CDBD;stroke-width:1;stroke-dasharray:2 5}
.map-svg .hub .r2{fill:none;stroke:#E6DDD0;stroke-width:1}
.map-svg .hub .pulse{fill:none;stroke:var(--m-oak);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:hpulse 3.2s ease-out infinite}
.map-svg .hub .t1{font-size:14px;font-weight:600;fill:var(--m-ink);text-anchor:middle}
.map-svg .hub .t2{font-size:11.5px;font-weight:500;fill:var(--m-ink-3);text-anchor:middle}
@keyframes hpulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.55);opacity:0}}
.map-legend{position:absolute;left:16px;bottom:14px;right:16px;display:flex;gap:8px;flex-wrap:wrap;z-index:2;pointer-events:none}
.map-legend .tag{background:#fff;border:1px solid var(--m-line)}
.map-legend .ln{width:16px;height:0;border-top:2px dashed currentColor}
@media (prefers-reduced-motion:reduce){.map-svg .flow{animation:none}}

/* Logo "s" animation */
svg.logo{overflow:visible}
.s-anim{will-change:transform}

/* ================= Round 4: shorter reads, people map, OS pages ================= */
.sec-head .side{font:400 16px/25px var(--sans);color:var(--m-ink-2);max-width:400px}
.sec-head .side b{color:var(--m-ink);font-weight:600}
.sec-head .side.big{font:500 20px/29px var(--sans);color:var(--m-ink-2);max-width:420px}
.sec-head .side.big b{color:var(--m-oxblood)}
.pull{margin:-12px 0 44px;padding:4px 0 4px 26px;border-left:3px solid var(--m-oxblood);font:600 clamp(23px,2.3vw,31px)/1.32 var(--sans);letter-spacing:-.015em;color:var(--m-ink);max-width:920px}
.pull span{color:var(--m-muted)}
.pull b{color:var(--m-oxblood);font-weight:600}
.why-card p{font:400 16px/25px var(--sans)}
.why-card .vs{font:400 14px/20px var(--sans)}
.arch-card p{font:400 15px/23px var(--sans)}
.role p{font:500 16px/24px var(--sans);color:var(--m-ink)}
.role li{font:400 15px/21px var(--sans)}
.role .odilon{display:flex;flex-direction:column;gap:2px;background:var(--m-oak-bg);color:var(--m-ink-2);font:400 14px/20px var(--sans)}
.road .ph p{font:400 15px/23px var(--sans)}
.closing p{font:400 18px/28px var(--sans)}
.hot-card p{font:400 14px/20px var(--sans)}
footer .spark{color:var(--m-oxblood)}
footer .wrap{align-items:center}

/* studio: video + one-line notes */
.atelier-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s;pointer-events:none}
.atelier-stage.has-video>video{opacity:1}
.atelier-stage.has-video .dog-breath,.atelier-stage.has-video .dog-tail,.atelier-stage.has-video .steam{display:none}
.atelier-notes .card{display:flex;gap:14px;align-items:center;padding:18px 20px}
.atelier-notes .ic-tile{width:40px;height:40px;border-radius:12px;background:var(--m-oak-bg);color:#8A5A2E;display:grid;place-items:center;flex:none}
.atelier-notes h3{font:600 16px/22px var(--sans)}
.atelier-notes p{margin:2px 0 0;font:400 15px/22px var(--sans);color:var(--m-ink-2)}

/* map: legend filters, ownership lines, Odilon, panel */
.map-legend{pointer-events:none}
.lg-btn{pointer-events:auto;cursor:pointer;height:28px;padding:0 10px;border:1px solid var(--m-line);background:#fff;font:500 12.5px/16px var(--sans);transition:opacity .2s,box-shadow .2s,background .2s}
.lg-btn .tx{color:var(--m-ink-2)}
.lg-btn:hover{background:var(--m-card-warm)}
.lg-btn.on{box-shadow:inset 0 0 0 1.5px currentColor;background:#fff}
.lg-btn.on .tx{color:var(--m-ink);font-weight:600}
.lg-btn.off{opacity:.5}
.map-svg .own{fill:none;stroke:#C4572F;stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;opacity:0;animation:dash 1s linear infinite;transition:opacity .3s}
.map-svg .own.on{opacity:.85}
.map-svg .own.own-odilon{stroke:#B98450}
.map-svg .spoke.hi{stroke:#B5A693;stroke-width:1.6}
.map-svg .node.odilon .ring{fill:#FBF3EA;stroke:#C99A6B;stroke-width:1.6}
.map-svg .node.odilon .lbl{font-size:14px}
.map-svg .node .crown{fill:none;stroke:#C4572F;stroke-opacity:.4;stroke-width:1.2;stroke-dasharray:3 4}
.map-svg .node.person .initial.big{font-size:21px}
.map-svg .node.lead .lbl{font-size:16px}
.panel{gap:16px}
.panel .p-big{font:500 16px/24px var(--sans);color:var(--m-ink)}
.panel .p-line{display:flex;gap:10px;align-items:center;font:400 14px/20px var(--sans);color:var(--m-ink-2)}
.panel .p-line .ic{color:var(--m-terra)}
.p-chips{display:flex;flex-wrap:wrap;gap:6px}
.p-chips .tag{height:26px;font-size:13px}
.p-chips .own-chip{background:var(--m-terra-bg);color:#9C3F1F}
.p-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.p-list li{display:flex;gap:8px;align-items:center;font:400 14px/20px var(--sans);color:var(--m-ink)}
.p-list .ic{color:var(--m-oak)}
.p-odilon{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--m-oak-bg);font:400 13px/19px var(--sans);color:var(--m-ink-2)}
.p-odilon b{font:600 14px/20px var(--sans);color:var(--m-ink)}
.panel .p-ic.oak{background:var(--m-oak-bg);border-color:#E3CDB5;color:#8A5A2E}
.p-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--m-line);border-radius:12px;background:var(--m-card-warm)}
.p-stats div{padding:12px 14px;border-left:1px solid var(--m-line)}
.p-stats div:first-child{border-left:none}
.p-stats b{display:block;font:600 22px/28px var(--sans)}
.p-stats span{font:var(--type-caption);color:var(--m-ink-3)}
.who-row{display:flex;flex-direction:column;gap:8px}
.who-btn{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--m-line);border-radius:12px;background:#fff;cursor:pointer;text-align:left;transition:background .15s,border-color .15s}
.who-btn:hover{background:var(--m-card-warm);border-color:var(--m-line-strong)}
.who-btn .p-av{width:34px;height:34px;border-radius:50%;background:var(--m-terra);color:#fff;display:grid;place-items:center;font:600 14px/1 var(--sans);flex:none}
.who-btn b{display:block;font:600 14px/19px var(--sans);color:var(--m-ink)}
.who-btn small{font:var(--type-caption);color:var(--m-ink-3)}
.who-btn .ic{margin-left:auto;color:var(--m-ink-3)}
.who-btn.lead{border-color:#E9CBBE;background:#FDF8F5}

/* any project: good to know */
.proj-detail{grid-template-columns:1fr 1fr 1fr 1.4fr}
.proj-detail .v{font:500 15px/22px var(--sans)}
.proj-detail .out{margin-top:8px;display:flex;gap:6px;align-items:center;font:400 13px/18px var(--sans);color:var(--m-ink-3)}
.proj-detail .know{background:#FBF4EA}
.proj-detail .know .k{color:#8A5A2E}
.proj-detail .know .v{color:var(--m-ink);font:500 15px/23px var(--sans)}

/* Studio OS pages */
.os-page{display:none;flex-direction:column;gap:16px}
.os-page.on{display:flex}
.pane.flush{padding:0;overflow:hidden}
.os-tbl{width:100%;border-collapse:collapse;font:400 13px/18px var(--sans);color:#262626}
.os-tbl th{text-align:left;font:500 12px/16px var(--sans);color:#6B6B6B;padding:10px 14px;background:#FAFAFA;border-bottom:1px solid #EEE}
.os-tbl td{padding:10px 14px;border-top:1px solid #F2F2F2;vertical-align:middle}
.os-tbl tr:first-child td{border-top:none}
.os-tbl td b{display:block;font-weight:500;color:#0A0A0A}
.os-tbl td small{display:block;color:#6B6B6B;font-size:12px;line-height:17px}
.os-tbl td.r{text-align:right;white-space:nowrap}
.os-tbl tr.is-done td{color:#8A8A8A}
.os-tbl tr.is-done td b{color:#6B6B6B;text-decoration:line-through;text-decoration-color:#BDBDBD}
.stg span{font:500 12px/16px var(--sans)}
.stg i{display:block;width:120px;height:4px;border-radius:4px;background:#EFEFEF;margin-top:5px;overflow:hidden}
.stg em{display:block;height:100%;background:var(--m-oak);border-radius:4px}
.kpis.mini{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.kpis.mini .kpi{padding:12px 14px}
.kpis.mini .val{font-size:22px;line-height:28px}
.ag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ag-grid .pane{padding:12px 14px}
.ag-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #F3F3F3;font:400 13px/18px var(--sans)}
.brief{display:flex;flex-direction:column;gap:10px}
.brief-i{display:flex;gap:12px;align-items:flex-start}
.brief-i b{font:500 14px/20px var(--sans)}
.brief-i p{margin:2px 0 0;font:400 13px/19px var(--sans);color:#525252}
.qi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#F5F5F5;color:#525252;flex:none}
.qi.info{background:var(--m-info-bg);color:var(--m-info)}
.qi.ok{background:var(--m-ok-bg);color:var(--m-ok)}
.qi.terra{background:var(--m-terra-bg);color:var(--m-terra)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.opt{display:flex;flex-direction:column;gap:4px;transition:box-shadow .2s}
.opt .sw{display:grid;grid-template-columns:2fr 1fr 1fr;height:110px;border-radius:8px;overflow:hidden;margin-bottom:8px}
.opt b{font:500 14px/20px var(--sans)}
.opt small{font:var(--type-caption);color:#6B6B6B}
.opt .pick{align-self:flex-start;margin-top:8px}
.opt.chosen{box-shadow:0 0 0 2px var(--m-oxblood)}
.os-note{display:inline-flex;gap:8px;align-items:center;font:500 13px/18px var(--sans);color:#9C3F1F;background:var(--m-terra-bg);border-radius:8px;padding:8px 12px;align-self:flex-start}
.checks{list-style:none;margin:0 0 12px;padding:0}
.checks li{display:flex;gap:8px;align-items:center;padding:6px 0;font:400 13px/18px var(--sans);border-top:1px solid #F3F3F3}
.checks li:first-child{border-top:none}
.checks .ic{color:var(--m-ok)}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.col-h{font:600 11px/16px var(--sans);color:#6B6B6B;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.card-s{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-bottom:8px}
.card-s b{font:500 13px/18px var(--sans)}
@media (max-width:960px){.proj-detail{grid-template-columns:1fr 1fr}.pull{margin-top:0}}
@media (max-width:700px){.proj-detail{grid-template-columns:1fr}}
footer{font:400 14px/20px var(--sans)}

/* ================= Round 5: merged Map + Studio, panel, hover life ================= */
:root{--rvT:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1);--ease:cubic-bezier(.2,.7,.2,1);--shadow-hover:0 2px 6px rgba(42,38,35,.05),0 22px 44px -18px rgba(42,38,35,.26)}
/* hero gains (replace stats + chips) */
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px;max-width:600px}
.gains>div{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--m-line);border-radius:14px;background:rgba(255,255,255,.55);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,var(--rvT)}
.gains .ic-tile{width:34px;height:34px;border-radius:10px;background:var(--m-oak-bg);color:#8A5A2E;display:grid;place-items:center;margin-bottom:4px;transition:transform .25s var(--ease)}
.gains b{font:600 16px/22px var(--sans);color:var(--m-ink)}
.gains span:not(.ic-tile){font:400 14px/20px var(--sans);color:var(--m-ink-2)}
.gains>div:hover{transform:translateY(-3px);background:#fff;border-color:var(--m-line-strong);box-shadow:var(--shadow-hover)}
.gains>div:hover .ic-tile{transform:translateY(-2px) rotate(-6deg)}

/* map + studio in one frame */
.map-canvas{min-height:660px}
.view-seg{position:absolute;left:16px;top:14px;z-index:4}
.view-seg button{display:inline-flex;align-items:center;gap:6px}
.view-seg button .ic{opacity:.75}
.map-shell[data-view=studio] .map-svg,.map-shell[data-view=studio] .map-legend{display:none}
.studio-view{display:none}
.map-shell[data-view=studio] .studio-view{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;padding:60px 18px 18px;animation:viewIn .35s var(--ease)}
.map-shell[data-view=map] .map-svg{animation:viewIn .35s var(--ease)}
.studio-view .atelier-frame{width:100%;border-radius:16px;box-shadow:var(--shadow-soft)}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ov,.hot{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.atelier-stage.syncing .ov:not(.hl){opacity:.18}
.atelier-stage.syncing .hot:not(.hl){opacity:.3}
.ov.hl .bubble{box-shadow:0 0 0 2px var(--m-oxblood),0 8px 20px -8px rgba(122,46,34,.5)}
.hot.hl::before{background:var(--m-oxblood);border-color:#fff}
.hot:hover::before{transform:scale(1.2)}
.hot::before{transition:transform .2s var(--ease),background .2s}

/* map: new palette, line styles, labels on demand, Odilon on the ring */
.map-legend .ln.long{border-top-style:dashed;width:20px}
.map-legend .ln.dot{border-top-style:dotted;border-top-width:3px}
.map-svg .pill{transition:opacity .25s var(--ease)}
.map-svg .pill.hide{opacity:0}
.map-svg .partner{fill:none;stroke:#7A2E22;stroke-opacity:.45;stroke-width:1.3;stroke-dasharray:1 5;stroke-linecap:round;transition:opacity .25s}
.map-svg .partner.dim{opacity:.2}
.map-svg .node.odilon .ring{fill:#fff;stroke:#7A2E22;stroke-width:1.6}
.map-svg .node.odilon .lbl{font-size:14.5px}
.map-svg .own.own-odilon{stroke:#7A2E22}
.map-svg .node .nin{transform-box:fill-box;transform-origin:50% 30%;transition:transform .25s var(--ease)}
.map-svg .node:hover .nin{transform:scale(1.06)}
.map-svg .node:hover .ring{stroke-width:2.2}
.map-svg .node .halo{transition:opacity .25s}

/* side panel: fixed hub block, person buttons, swapping detail */
.panel{gap:14px}
.p-od{display:flex;flex-direction:column;gap:12px;padding-bottom:4px}
.who-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex-direction:initial}
.who-btn{flex-direction:column;justify-content:center;gap:6px;padding:10px 6px;text-align:center}
.who-btn b{font:600 13.5px/18px var(--sans)}
.who-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.who-btn{transition:transform .2s var(--ease),box-shadow .2s,background .2s,border-color .2s}
.who-btn.on{border-color:var(--m-terra);background:var(--m-terra-bg)}
.who-btn.on b{color:#9C3F1F}
.p-detail{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--m-line)}
.p-detail.swap{animation:viewIn .3s var(--ease)}
.p-detail h4{margin:0;font:600 16px/22px var(--sans)}
.panel .p-ic.sm{width:38px;height:38px}
.panel .p-detail .p-ic.person{width:38px;height:38px;font-size:15px}
.panel .hint.big{display:flex;gap:10px;align-items:center;font:400 14px/20px var(--sans);color:var(--m-ink-3);padding:14px;border:1px dashed var(--m-line-strong);border-radius:12px}

/* people: funny line under the name */
.role .rt.fun{font:500 14px/20px var(--sans);color:var(--m-oxblood)}
.role p b{font-weight:600}

/* Studio OS callouts follow the page */
.callouts{transition:opacity .2s var(--ease),transform .2s var(--ease)}
.callouts.swap{opacity:0;transform:translateY(6px)}
.callout .n{transition:transform .2s var(--ease)}
.callout:hover .n{transform:scale(1.15)}

/* hover life across the page */
.why-card,.arch-card,.role,.proj,.rules .card{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s,background .25s,var(--rvT)}
.why-card:hover,.arch-card:hover,.role:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--m-line-strong)}
.why-card .ic-tile,.arch-card .ic-tile,.role .av{transition:transform .25s var(--ease),background .25s,color .25s}
.why-card:hover .ic-tile{transform:translateY(-2px) rotate(-6deg);background:var(--m-oak);color:#fff}
.arch-card:hover{background:var(--m-card-warm)}
.arch-card:hover .ic-tile{transform:translateY(-2px);background:var(--m-oak-bg);color:#8A5A2E}
.role:hover .av{transform:scale(1.06);background:var(--m-terra-bg);color:var(--m-terra)}
.role li .ic{transition:transform .2s var(--ease)}
.role:hover li .ic{transform:translateX(2px)}
.rule-row{transition:background .2s,padding .2s var(--ease)}
.rule-row:hover{background:var(--m-card-warm);padding-left:28px}
.rules .control:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.road .ph{transition:transform .25s var(--ease),var(--rvT)}
.road .ph::after{content:"";position:absolute;left:0;right:24px;top:9px;border-top:2px solid var(--m-oak);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.road .ph .d{z-index:1;transition:background .25s,transform .25s var(--ease)}
.road .ph h3{transition:color .2s}
.road .ph:hover::after{transform:scaleX(1)}
.road .ph:hover .d{background:var(--m-oxblood);transform:scale(1.15)}
.road .ph:hover h3{color:var(--m-oxblood)}
.road .ph:hover{transform:translateY(-2px)}
.stepper li .c{transition:all .25s var(--ease)}
.stepper li:hover .c{border-color:var(--m-oxblood);color:var(--m-oxblood);transform:translateY(-2px)}
.float{transition:box-shadow .25s}
.hero-visual .frame{transition:transform .4s var(--ease),box-shadow .4s}
.hero-visual:hover .frame{transform:translateY(-3px);box-shadow:0 30px 60px -24px rgba(42,38,35,.32)}
/* Studio OS rows and tiles */
.q-item,.ag-item{margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px;transition:background .2s}
.q-item:hover,.ag-item:hover{background:#FAF8F5}
.kpi,.os-page .pane:not(.flush),.opt,.card-s{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.kpi:hover,.ag-grid .pane:hover,.opt:hover,.card-s:hover,.brief-i:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #DDD8D0,0 10px 22px -12px rgba(42,38,35,.28)}
.os-tbl tbody tr td{transition:background .15s}
.os-tbl tbody tr:hover td{background:#FAF8F5}
.os-nav{transition:background .15s,color .15s}
.os-nav .ic{transition:transform .2s var(--ease)}
.os-nav:hover .ic{transform:translateX(2px)}
.chip{transition:background .15s,transform .15s}
.chip:hover{transform:translateY(-1px)}
/* gentle staggered reveal */
.road .ph.rv:nth-child(2),.why-grid .rv:nth-child(2),.arch-grid .rv:nth-child(2),.roles .rv:nth-child(2){transition-delay:.08s}
.road .ph.rv:nth-child(3),.why-grid .rv:nth-child(3),.arch-grid .rv:nth-child(3),.roles .rv:nth-child(3){transition-delay:.16s}
.road .ph.rv:nth-child(4),.arch-grid .rv:nth-child(4){transition-delay:.24s}
.rv.in:hover{transition-delay:0s}
@media (max-width:960px){.gains{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .why-card:hover,.arch-card:hover,.role:hover,.gains>div:hover,.kpi:hover,.road .ph:hover,.who-btn:hover,.rules .control:hover,.hero-visual:hover .frame,.ag-grid .pane:hover,.opt:hover,.card-s:hover,.brief-i:hover{transform:none}
  .map-svg .node:hover .nin{transform:none}
}

/* hero: "2.0" connectors to the floating cards */
.hero-links{position:absolute;left:0;top:0;pointer-events:none;z-index:3;overflow:visible}
.hero-links .hl-pill,.hero-links circle{opacity:0;transition:opacity .4s ease .6s}
.hero-links.drawn .hl-pill,.hero-links.drawn circle{opacity:1}
.hero-links .hl-pill text{font:600 12px var(--sans);text-anchor:middle}
.hero-links .hl-line{transition:opacity .25s}
.hero-links .hl-line path{transition:stroke-width .25s}
.hero-links.flow .hl-line path{animation:dash 1.6s linear infinite}
.hero-links .hl-line.hot path{stroke-width:2.8}
.hero-links .hl-line.cool{opacity:.25}
.hero-links.flow .hl-line circle:last-of-type{animation:hlpulse 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes hlpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.float{transition:box-shadow .25s,outline-color .25s;outline:2px solid transparent;outline-offset:2px}
.float.linked{box-shadow:0 2px 6px rgba(42,38,35,.06),0 26px 50px -18px rgba(42,38,35,.32);outline-color:rgba(122,46,34,.18)}
.hero h1 em{transition:color .25s;cursor:default}
.hero h1 em.linked{color:#5E2219}
@media (max-width:960px){.hero-links{display:none}}
@media (prefers-reduced-motion:reduce){.hero-links.flow .hl-line path,.hero-links.flow .hl-line circle:last-of-type{animation:none}}
.map-svg .node .lbl,.map-svg .node .sub{paint-order:stroke;stroke:#FBF9F6;stroke-width:4px;stroke-linejoin:round}
.map-svg .hub .t20{font-size:17px;font-weight:600;fill:var(--m-oxblood);letter-spacing:-.01em}
.map-svg .hub .hub-logo-svg{overflow:visible}

/* ---------- Round 6: the Studio lives in the hero ---------- */
.hero .wrap{grid-template-columns:minmax(0,.88fr) minmax(0,1.2fr);gap:56px}
.hero h1{font-size:clamp(42px,4.3vw,60px)}
.hero-visual .frame.studio-frame{aspect-ratio:auto;outline:none}
.hero-visual .frame.studio-frame:focus-visible{box-shadow:0 0 0 3px rgba(122,46,34,.35),var(--shadow-lift)}
.studio-frame .atelier-stage{aspect-ratio:16/9}
.studio-frame .atelier-stage>img{object-fit:cover}
/* calm by default: just the loop; rooms, bubbles and Mooi appear while exploring */
.studio-frame .ov,.studio-frame .hot{opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.studio-frame .ov{transform:translate(-50%,-90%)}
.hero-visual.exploring .studio-frame .ov{opacity:1;transform:translate(-50%,-100%)}
.hero-visual.exploring .studio-frame .hot{opacity:1;pointer-events:auto}
.hero-visual.exploring .studio-frame .atelier-stage.syncing .ov:not(.hl){opacity:.35}
.hero-visual.exploring .studio-frame .atelier-stage.syncing .hot:not(.hl){opacity:.55}
.hero-visual .float{transition:opacity .3s var(--ease),box-shadow .25s,outline-color .25s}
.hero-visual.exploring .float{opacity:.1;pointer-events:none}
.hero-links{transition:opacity .3s var(--ease)}
.hero.exploring .hero-links{opacity:.12}
.studio-cap{position:absolute;right:12px;top:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border:1px solid var(--m-line);border-radius:999px;padding:5px 12px 5px 10px;font:500 12px/16px var(--sans);color:var(--m-ink-2);box-shadow:0 4px 14px -8px rgba(42,38,35,.35);pointer-events:none}
.studio-cap b{font-weight:600;color:var(--m-ink)}
.studio-cap .dot{width:7px;height:7px;border-radius:50%;background:var(--m-oxblood);animation:led 2.4s ease-out infinite}
.studio-cap .c-on{display:none}
.hero-visual.exploring .studio-cap .c-idle{display:none}
.hero-visual.exploring .studio-cap .c-on{display:inline}
.studio-frame .hot-card{z-index:6}
@media (max-width:1180px){.hero .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px}.studio-frame .bubble{font-size:11px;padding:3px 8px 3px 6px}}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.studio-frame .ov,.hero-visual.exploring .studio-frame .ov{transform:translate(-50%,-100%)}}
.hero .wrap{grid-template-rows:auto auto;row-gap:0}
.hero-text{grid-column:1;grid-row:1;align-self:end}
.hero .gains{grid-column:1;grid-row:2;align-self:start}
.hero-visual{grid-column:2;grid-row:1/3;align-self:center}
.hero-visual .float.f1{left:14%;top:-30px}
.hero-visual .float.f2{right:-24px;top:50%}
.hero-visual .float.f3{left:4%;bottom:-32px}
.hero-visual.exploring .float{opacity:.06}
@media (max-width:1180px){
  .hero-visual{grid-row:1}
  .hero-text{align-self:center}
  .hero .gains{grid-column:1/-1;margin-top:56px}
  .hero-visual .float{min-width:0;padding:8px 11px}
  .hero-visual .float.f1{left:10%}
}
@media (max-width:960px){.hero-text,.hero-visual,.hero .gains{grid-column:1;grid-row:auto}.hero .gains{margin-top:28px}.hero-visual{margin-top:40px}}
@media (max-width:1180px){.hero .wrap{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr)}.hero .gains{max-width:none}}
/* hub logo, native to the map: warm brown, stroke draw-in, slow dotted ring, orbiting dot */
.map-svg .hub .core{stroke:#5B4334;stroke-width:1.4}
.map-svg .hub .hub-logo path{fill:#5B4334;stroke:#7A2E22;stroke-width:.9;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;stroke-opacity:0;transition:fill .25s}
.map-svg .hub:hover .hub-logo path,.map-svg .hub.sel .hub-logo path{fill:#4A3428}
.map-svg .hub.lg-pre .hub-logo path{fill-opacity:0;stroke-opacity:1;stroke-dashoffset:1}
.map-svg .hub.lg-pre .t20{opacity:0}
.map-svg .hub.lg-draw .hub-logo path{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0;transition:stroke-dashoffset 1.8s cubic-bezier(.45,.05,.3,1),fill-opacity .9s ease 1.4s,stroke-opacity .6s ease 2.1s}
.map-svg .hub.lg-draw .t20{opacity:1;transition:opacity .5s ease 1.9s}
.map-svg .hub .r1{stroke:#C9B49A;stroke-width:1.2;stroke-dasharray:1.5 6;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:hubspin 80s linear infinite}
.map-svg .hub .orbit{animation:hubspin 16s linear infinite}
.map-svg .hub .orb-dot{fill:#7A2E22;stroke:#FBF9F6;stroke-width:2}
@keyframes hubspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.map-svg .hub .r1,.map-svg .hub .orbit{animation:none}.map-svg .hub.lg-pre .hub-logo path{fill-opacity:1;stroke-dashoffset:0;stroke-opacity:0}.map-svg .hub.lg-pre .t20{opacity:1}}
.hero-visual.exploring .float{opacity:0}
.hero.exploring .hero-links{opacity:.08}
.studio-cap{top:auto;bottom:12px}
@media (max-width:960px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:0}.hero-text{order:1}.hero-visual{order:2;margin-top:48px}.hero .gains{order:3;margin-top:56px}}

/* ---------- Round 7: bigger hero studio (top ≈ Audit card, bottom = tiles' bottom, right = content edge) ---------- */
.hero .wrap{grid-template-columns:minmax(0,474px) minmax(0,1fr);column-gap:48px;row-gap:0}
.hero-visual .float.f1{top:130px}
.hero-visual{align-self:stretch;display:flex;flex-direction:column;padding-top:160px;margin-right:0}
.hero-visual .frame.studio-frame{flex:1;min-height:340px;display:flex}
.studio-frame .atelier-stage{aspect-ratio:auto;flex:1;height:auto}
.studio-frame .atelier-stage>img,.studio-frame .atelier-stage>video{object-fit:cover;object-position:50% 50%}
.studio-frame .ov.off,.studio-frame .hot.off{display:none}
@media (max-width:1180px){.hero .wrap{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);column-gap:40px}.hero-visual{grid-row:1;margin-right:0}}
@media (max-width:960px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:0}.hero-visual .float.f1{top:-30px}.hero-visual{grid-row:auto;padding-top:0;align-self:auto;display:block}.hero-visual .frame.studio-frame{display:block;min-height:0}.studio-frame .atelier-stage{aspect-ratio:16/9}}
/* hub: plaster-tone fill with the map's dot grid, oxblood logo, "2.0" in the same colour right after "els" */
.map-svg .hub .core{fill:url(#hubCore);stroke:#7A2E22;stroke-width:1.4}
.map-svg .hub .core-dots{pointer-events:none}
.map-svg .hub .hub-logo path{fill:#7A2E22;stroke:#5E2219}
.map-svg .hub:hover .hub-logo path,.map-svg .hub.sel .hub-logo path{fill:#5E2219}
.map-svg .hub .t20{font-size:16px;font-weight:600;fill:#7A2E22;letter-spacing:-.01em;transition:fill .25s}
.map-svg .hub:hover .t20,.map-svg .hub.sel .t20{fill:#5E2219}
.map-svg .hub .sel-ring{stroke:#7A2E22}

/* ================= Round 8 ================= */
/* 1. hero studio stays still on hover: no lift, no shift; overlays only fade */
.hero-visual .frame,.hero-visual:hover .frame{transform:none!important;transition:none}
.hero-visual:hover .frame{box-shadow:var(--shadow-lift)}
.studio-frame .ov,.hero-visual.exploring .studio-frame .ov{transform:translate(-50%,-100%)}
.studio-frame .ov,.studio-frame .hot{transition:opacity .3s var(--ease)}
.studio-frame .hot:hover::before{transform:none}

/* 2. connection map in the site's language: plaster canvas, white card tiles, oak avatars, chip pills */
.map-shell{grid-template-columns:minmax(0,1fr) 330px;gap:20px;background:none;border:none;box-shadow:none;border-radius:0;overflow:visible}
.map-canvas{border:1px solid var(--m-line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-soft);
  background:radial-gradient(circle at 1px 1px,rgba(185,174,159,.22) 1px,transparent 1.3px) 0 0/26px 26px,linear-gradient(180deg,#F3EFE8,#EEE8DF)}
.map-shell .panel{background:var(--m-card);border:1px solid var(--m-line);border-radius:14px;box-shadow:var(--shadow-soft);align-self:start;max-height:none}
@media (max-width:1180px){.map-shell{grid-template-columns:1fr}.map-canvas{border-right:1px solid var(--m-line);border-bottom:1px solid var(--m-line)}}
/* base lines */
.map-svg .orbit{stroke:#DCD2C4;stroke-width:1.1}
.map-svg .orbit2{stroke:#E3DBCF}
.map-svg .spoke{stroke:#CFC3B3;stroke-dasharray:2 6;stroke-linecap:round}
.map-svg .spoke.hi{stroke:#9C8B78}
.map-svg .partner{stroke:#7A2E22;stroke-opacity:.4}
/* department + Odilon tiles */
.map-svg .node .card-tile{fill:#fff;stroke:var(--m-line);stroke-width:1;filter:drop-shadow(0 6px 10px rgba(42,38,35,.08));transition:stroke .2s}
.map-svg .node:hover .card-tile{stroke:var(--m-line-strong);stroke-width:1}
.map-svg .node .sel-ring{fill:none;stroke:var(--m-oxblood);stroke-width:1.5;stroke-dasharray:none;opacity:0;transition:opacity .2s}
.map-svg .node.sel .sel-ring{opacity:1}
.map-svg .node:focus-visible .sel-ring{opacity:1;stroke:var(--m-ink-3)}
.map-svg .node .gdot{stroke:#fff;stroke-width:1.5}
.map-svg .node .lbl{font-size:14px;font-weight:600;fill:var(--m-ink)}
.map-svg .node .sub{font-size:12px;font-weight:400;fill:var(--m-ink-3)}
.map-svg .node .lbl,.map-svg .node .sub{stroke:#F0EBE3}
.map-svg .node.odilon .lbl{font-size:14px}
/* people: same avatar as the people section */
.map-svg .node.person .av-ring{fill:var(--m-oak-bg);stroke:#fff;stroke-width:3;filter:drop-shadow(0 6px 12px rgba(42,38,35,.12))}
.map-svg .node.person:hover .av-ring{stroke-width:3}
.map-svg .node.person .initial{fill:#7B4E25;font-weight:600}
.map-svg .node.lead .lbl{font-size:15px}
/* flows + chip pills */
.map-svg .flow{stroke-width:1.6}
.map-svg .flow.spot{stroke-width:2.4}
.map-svg .own{stroke:#C4572F;stroke-width:1.6}
.map-svg .own.own-odilon{stroke:#7A2E22}
.map-svg .pill .chip-bg{stroke:rgba(42,38,35,.08);stroke-width:1;filter:drop-shadow(0 2px 4px rgba(42,38,35,.06))}
.map-svg .pill text{font-size:12px;font-weight:500}
/* legend chips like the site's small buttons */
.lg-btn{height:28px;border-radius:10px;border:1px solid var(--m-line);background:rgba(255,255,255,.9);font:500 12.5px/16px var(--sans);box-shadow:none}
.lg-btn:hover{background:#fff;border-color:var(--m-line-strong)}
.lg-btn.on{background:var(--m-oxblood-bg);border-color:#E2C7C1;box-shadow:none}
.lg-btn.on .tx{color:var(--m-oxblood)}
/* side panel: card style, icon tiles and oak avatars like the rest of the page */
.panel .p-ic{border-radius:12px;border:none;background:var(--m-oak-bg);color:#8A5A2E}
.panel .p-ic.oak{background:var(--m-oxblood-bg);color:var(--m-oxblood)}
.panel .p-ic.person,.who-btn .p-av{background:var(--m-oak-bg);border:none;color:#7B4E25;border-radius:50%}
.who-btn{border-radius:12px;background:#fff}
.who-btn.lead{border-color:var(--m-line);background:#fff}
.who-btn.on{border-color:#E2C7C1;background:var(--m-oxblood-bg)}
.who-btn.on b{color:var(--m-oxblood)}
.who-btn.on .p-av{background:#fff}
.p-chips .own-chip{background:var(--m-oak-bg);color:#7B4E25}
.panel .p-line .ic{color:#8A5A2E}
.p-stats{background:var(--m-card-warm)}
.map-svg .node.odilon .card-tile{fill:#fff;stroke:var(--m-line);stroke-width:1}
.map-svg .pill.sp .chip-bg{stroke:rgba(42,38,35,.16)}

/* ---------- Round 8b: one card language site-wide (the hero tile look) ----------
   warm plaster fill, soft hairline border, radius 14, no resting shadow, icon tile top-left, title, text;
   hover = lift 3px, white fill, stronger border, soft shadow */
.why-card,.arch-card,.role,.road .ph,.proj-detail>div,.rules .card,.map-shell .panel{
  background:rgba(255,255,255,.55);border:1px solid var(--m-line);border-radius:14px;box-shadow:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,var(--rvT)}
.why-card:hover,.arch-card:hover,.role:hover,.road .ph:hover,.proj-detail>div:hover{transform:translateY(-3px);background:#fff;border-color:var(--m-line-strong);box-shadow:var(--shadow-hover)}
.why-card .ic-tile,.arch-card .ic-tile,.road .ph .d{width:40px;height:40px;border-radius:12px;background:var(--m-oak-bg);color:#8A5A2E;display:grid;place-items:center;margin-bottom:18px;border:none}
.why-card:hover .ic-tile,.arch-card:hover .ic-tile{transform:translateY(-2px) rotate(-6deg);background:var(--m-oak-bg);color:#8A5A2E}
/* why */
.why-card{padding:26px}
.why-card h3{font:600 19px/26px var(--sans);letter-spacing:-.01em;margin-bottom:10px}
.why-card p{font:400 17px/27px var(--sans);color:var(--m-ink-2)}
.why-card .vs{font:400 15px/22px var(--sans);margin-top:20px;padding-top:14px}
/* architecture */
.arch-card{padding:24px}
.arch-card h3{font:600 18px/25px var(--sans)}
.arch-card p{font:400 16px/24px var(--sans)}
/* people */
.role .av{border-radius:50%}
.role h3{font:600 19px/26px var(--sans)}
.role .rt{font:500 14px/20px var(--sans)}
.role p{font:500 16px/25px var(--sans)}
.role li{font:400 16px/23px var(--sans)}
.role .odilon{font:400 15px/22px var(--sans);background:var(--m-oak-bg)}
.role:hover .av{transform:scale(1.06)}
/* roadmap: four tiles, the dot becomes the icon tile */
.road{gap:16px}
.road::before,.road .ph::after{display:none}
.road .ph{padding:24px}
.road .ph .d{position:relative}
.road .ph .d::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--m-oxblood);box-shadow:0 0 0 4px rgba(122,46,34,.12)}
.road .ph:hover .d{background:var(--m-oak-bg);transform:translateY(-2px) rotate(-6deg)}
.road .ph .w{margin:0 0 6px}
.road .ph h3{font:600 18px/25px var(--sans)}
.road .ph p{font:400 16px/24px var(--sans)}
/* project detail: four tiles */
.proj-detail{gap:12px;border:none;background:none;overflow:visible}
.proj-detail>div{padding:18px 20px;border-left:1px solid var(--m-line)}
.proj-detail>div:first-child{border-left:1px solid var(--m-line);background:#fff}
.proj-detail .v{font:500 16px/24px var(--sans)}
/* hero tiles: slightly bigger text to match */
.gains span:not(.ic-tile){font:400 15px/22px var(--sans)}
.gains b{font:600 17px/23px var(--sans)}
/* map: tiles + side panel in the same language */
.map-svg .node .card-tile{fill:#FBF8F4;stroke:var(--m-line);filter:none}
.map-svg .node:hover .card-tile{fill:#fff;stroke:var(--m-line-strong);filter:drop-shadow(0 8px 14px rgba(42,38,35,.12))}
.map-svg .node.odilon .card-tile{fill:#FBF8F4}
.map-svg .node.person .av-ring{filter:none;stroke:#FBF8F4}
.map-shell .panel{background:rgba(255,255,255,.55)}
.who-btn{background:rgba(255,255,255,.7)}
.p-stats{background:rgba(255,255,255,.7)}
.panel .p-big{font:500 16px/24px var(--sans)}
.panel .p-line,.p-list li{font:400 15px/22px var(--sans)}
@media (prefers-reduced-motion:reduce){.proj-detail>div:hover,.road .ph:hover .d{transform:none}}
.road .ph:first-child .d{background:var(--m-oak-bg)}
.road .ph:first-child .d::after{box-shadow:0 0 0 4px rgba(122,46,34,.18),0 0 0 8px rgba(122,46,34,.07)}
.proj.card{background:rgba(255,255,255,.55);box-shadow:none}
.map-canvas{box-shadow:none}

/* ---------- Round 9: phones ---------- */
.map-swipe{display:none}
@media (max-width:700px){
  .map-swipe{display:block;margin:-8px 0 12px;font:500 13px/18px var(--sans);color:var(--m-ink-3)}
  .map-canvas{min-height:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .map-svg{width:820px!important;max-width:none;height:auto;min-height:0!important;aspect-ratio:1000/780}
  .map-legend{position:sticky;left:0;bottom:auto;right:auto;width:calc(100vw - 38px);padding:12px;box-sizing:border-box}
  .map-shell .panel{padding:18px}
}
/* the "Humans approve." statement card stays dark (Round 8b fill had overridden it) */
.rules .card.control{background:var(--m-ink);border-color:var(--m-ink)}
@media (max-width:700px){.why-card .vs{display:block}.why-card .vs b{margin-right:6px}}