/* ===== MILANO WEB — HOME CANVAS (broadside system) ===== */
:root{
  --mwh-yl:#ffc700; --mwh-or:#ff4e27; --mwh-cb:#0029ff; --mwh-bk:#000000; --mwh-wt:#ffffff;
  --mwh-display:'Bebas Neue',Impact,sans-serif;           /* Morganite sub */
  --mwh-thunder:'Josefin Sans',Futura,sans-serif;          /* Thunder sub */
  --mwh-serif:'Spectral',Georgia,serif;                    /* Sentient sub */
}
body.mwh-canvas{margin:0;background:var(--mwh-yl);font-family:var(--mwh-serif);
  color:var(--mwh-bk);-webkit-font-smoothing:antialiased;overflow-x:hidden}
#mwh *{box-sizing:border-box;margin:0}
#mwh a{color:inherit}

/* ---- bande full-bleed, hard cut, zero gap ---- */
.mwh-band{width:100vw;position:relative;padding:clamp(48px,8vw,120px) clamp(20px,6vw,96px)}
.mwh-band.yellow{background:var(--mwh-yl);color:var(--mwh-bk)}
.mwh-band.orange{background:var(--mwh-or);color:var(--mwh-wt)}
.mwh-band.cobalt{background:var(--mwh-cb);color:var(--mwh-wt);
  padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}

/* ---- tipografia ---- */
.mwh-display{font-family:var(--mwh-display);font-weight:900;
  font-size:clamp(72px,17vw,229px);line-height:.78;letter-spacing:.01em;text-transform:uppercase}
.mwh-display.sm{font-size:clamp(60px,13vw,170px)}
.mwh-thunder{font-family:var(--mwh-thunder);font-weight:300;
  font-size:clamp(40px,8.5vw,122px);line-height:1;text-transform:uppercase;letter-spacing:.005em;
  margin-bottom:clamp(28px,4vw,56px)}
.mwh-sub{font-family:var(--mwh-serif);font-weight:600;font-size:clamp(20px,2.2vw,24px);
  line-height:1.1;letter-spacing:-.36px;margin:10px 0 8px}
.mwh-body{font-family:var(--mwh-serif);font-size:17px;line-height:1.5;letter-spacing:-.2px;max-width:480px}
.mwh-micro{font-family:'Times New Roman',serif;font-size:11px;line-height:1.15;display:block;margin-top:10px}
.white{color:var(--mwh-wt)}
.yl{color:var(--mwh-yl)}

/* ---- hero ---- */
.mwh-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(56px,9vw,140px)}
.mwh-vstack{position:absolute;left:clamp(8px,1.5vw,22px);top:0;bottom:0;writing-mode:vertical-rl;
  transform:rotate(180deg);font-family:var(--mwh-thunder);font-weight:300;font-size:clamp(13px,1.4vw,18px);
  letter-spacing:.14em;color:var(--mwh-bk);opacity:.9;display:flex;align-items:center;white-space:nowrap;
  overflow:hidden;pointer-events:none}
.mwh-herofoot{margin-top:clamp(26px,4vw,48px);display:flex;flex-direction:column;gap:16px;align-items:flex-start}

/* ---- sticker badge (bottone blu #2: chat) ---- */
.mwh-sticker{position:absolute;top:clamp(18px,3vw,44px);right:clamp(18px,4vw,64px);
  width:clamp(96px,11vw,140px);height:clamp(96px,11vw,140px);border-radius:999px;border:0;cursor:pointer;
  background:var(--mwh-cb);color:var(--mwh-wt);font-family:var(--mwh-serif);font-size:clamp(12px,1.3vw,16px);
  font-weight:600;line-height:1.25;letter-spacing:.02em;
  transform:rotate(8deg);transition:transform .25s;z-index:5}
.mwh-sticker:hover{transform:rotate(0deg) scale(1.05)}

/* ---- pill primaria (bottone blu #1: analyzer) ---- */
.mwh-pill{background:var(--mwh-cb);color:var(--mwh-wt);border:0;border-radius:999px;cursor:pointer;
  font-family:var(--mwh-serif);font-size:17px;font-weight:600;padding:16px 34px;letter-spacing:-.1px;
  transition:transform .2s}
.mwh-pill:hover{transform:translateY(-2px)}
/* ---- ghost ---- */
.mwh-ghost{background:transparent;border:2px solid currentColor;border-radius:999px;cursor:pointer;
  font-family:var(--mwh-serif);font-size:17px;font-weight:600;padding:14px 32px;margin-top:24px;
  transition:border-width .15s}
.mwh-ghost:hover{border-width:3px}

/* ---- colonne problema ---- */
.mwh-cols{display:grid;grid-template-columns:1fr 2px 1fr 2px 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.mwh-hr{background:var(--mwh-bk);width:2px;height:100%}
.mwh-num{font-family:var(--mwh-display);font-size:clamp(40px,5vw,64px);line-height:1;color:var(--mwh-bk)}
.mwh-num.cb{color:var(--mwh-cb)}

/* ---- servizi ---- */
.mwh-svcs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px) clamp(28px,5vw,80px)}
.mwh-svc{border-top:2px solid var(--mwh-bk);padding-top:16px}

/* ---- footer micro ---- */
.mwh-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;
  padding-top:22px!important;padding-bottom:calc(22px + env(safe-area-inset-bottom))!important;
  border-top:2px solid var(--mwh-bk);font-family:'Times New Roman',serif;font-size:11px}
.mwh-foot a{text-decoration:underline}

/* ---- MODAL ANALYZER ---- */
#mwh-modal{position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,.72);display:none;
  align-items:flex-start;justify-content:center;overflow-y:auto;padding:clamp(14px,4vw,48px)}
#mwh-modal.open{display:flex}
.mwh-modal-box{position:relative;width:100%;max-width:600px;border:3px solid var(--mwh-bk);background:var(--mwh-yl);
  padding:clamp(10px,2vw,18px);margin:auto 0}
.mwh-modal-x{position:absolute;top:-3px;right:-3px;width:46px;height:46px;background:var(--mwh-bk);color:var(--mwh-wt);
  border:0;font-size:19px;cursor:pointer;z-index:2}
.mwh-modal-x:hover{background:var(--mwh-cb)}
body.mwh-noscroll{overflow:hidden}

/* ---- responsive ---- */
@media(max-width:860px){
  .mwh-cols{grid-template-columns:1fr}
  .mwh-hr{width:100%;height:2px}
  .mwh-svcs{grid-template-columns:1fr}
  .mwh-hero{padding-left:clamp(40px,12vw,56px)}
}
@media(max-width:560px){
  .mwh-sticker{top:12px;right:12px}
  .mwh-pill,.mwh-ghost{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .mwh-sticker,.mwh-pill{transition:none}
}

/* ---- NAV minimale ---- */
.mwh-nav{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;gap:clamp(14px,3vw,34px);
  justify-content:center;padding:18px;font-family:var(--mwh-serif);font-weight:600;font-size:13px;letter-spacing:.08em}
.mwh-nav a{text-decoration:none;border-bottom:2px solid transparent}
.mwh-nav a:hover{border-bottom-color:var(--mwh-bk)}
@media(max-width:560px){.mwh-nav{justify-content:flex-start;padding-left:20px}}

/* ---- TICKER ---- */
.mwh-ticker{background:var(--mwh-cb);color:var(--mwh-wt);overflow:hidden;white-space:nowrap;
  border-top:3px solid var(--mwh-bk);border-bottom:3px solid var(--mwh-bk)}
.mwh-tin{display:inline-block;padding:12px 0;font-family:var(--mwh-thunder);font-weight:300;
  font-size:clamp(16px,2.2vw,24px);letter-spacing:.1em;animation:mwhtick 22s linear infinite}
@keyframes mwhtick{to{transform:translateX(-50%)}}

/* ---- NUMERI ---- */
.mwh-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);
  margin-top:clamp(40px,6vw,72px);border-top:3px solid var(--mwh-bk);padding-top:clamp(24px,3vw,40px)}
.mwh-nums b{display:block;font-family:var(--mwh-display);font-weight:900;font-size:clamp(48px,7vw,96px);line-height:1;color:var(--mwh-cb)}
.mwh-nums span{font-family:var(--mwh-serif);font-size:12px;font-weight:600;letter-spacing:.06em}
@media(max-width:700px){.mwh-nums{grid-template-columns:1fr 1fr}}

/* ---- LAVORI ---- */
.mwh-works{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.mwh-work{border:3px solid var(--mwh-bk);padding:clamp(20px,2.5vw,32px);display:flex;flex-direction:column;gap:6px;
  background:var(--mwh-yl);transition:transform .25s}
.mwh-work:hover{transform:translate(-4px,-4px)}
.mwh-worklink{display:inline-block;margin-top:12px;font-family:var(--mwh-serif);font-weight:600;font-size:15px;
  color:var(--mwh-cb);text-decoration:none;border-bottom:2px solid var(--mwh-cb);align-self:flex-start}
.mwh-worklink:hover{color:var(--mwh-bk);border-bottom-color:var(--mwh-bk)}
@media(max-width:860px){.mwh-works{grid-template-columns:1fr}}

/* ---- QUOTE ---- */
.mwh-quote{font-family:var(--mwh-serif);font-size:clamp(17px,1.8vw,21px);line-height:1.45;font-style:italic;color:var(--mwh-wt)}
.mwh-who{display:block;margin-top:14px;font-family:var(--mwh-serif);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--mwh-wt)}

/* ---- FAQ ---- */
.mwh-faq{max-width:820px}
.mwh-qa{border-top:3px solid var(--mwh-bk)}
.mwh-qa:last-child{border-bottom:3px solid var(--mwh-bk)}
.mwh-qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:20px 0;font-family:var(--mwh-serif);font-weight:600;font-size:clamp(17px,2vw,22px);letter-spacing:-.2px}
.mwh-qa summary::-webkit-details-marker{display:none}
.mwh-qa summary span{font-family:var(--mwh-display);font-size:26px;color:var(--mwh-cb);transition:transform .3s;flex-shrink:0}
.mwh-qa[open] summary span{transform:rotate(45deg)}
.mwh-qa .mwh-body{padding:0 0 20px;max-width:640px}

/* ---- REVEAL on scroll ---- */
.mwh-rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.mwh-rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.mwh-rv{opacity:1;transform:none;transition:none}.mwh-tin{animation:none}}