/* Why Mappin V4: approved lighter landscape presentation */
.wm4-section{
  padding:42px 0 64px;
  background:
    radial-gradient(circle at 82% 8%,rgba(77,204,255,.22),transparent 30%),
    linear-gradient(180deg,rgba(250,254,255,.88),rgba(230,247,255,.72));
}
.wm4-shell{width:min(1540px,calc(100% - 34px));margin:0 auto}
.wm4-intro{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,.72fr);
  gap:44px;align-items:end;margin-bottom:24px;padding:0 6px
}
.wm4-intro h1{
  margin:0!important;color:#061b42!important;font-size:clamp(3rem,5vw,5.8rem);
  line-height:.93;letter-spacing:-.055em
}
.wm4-intro h1 span{
  background:linear-gradient(90deg,#087be8,#14bbf2);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.wm4-intro p{margin:0!important;color:#476984!important;font-size:1.05rem;line-height:1.6}

.wm4-reader{
  background:rgba(255,255,255,.73);border:1px solid rgba(74,169,229,.24);
  border-radius:24px;padding:14px 14px 12px;box-shadow:0 28px 76px rgba(31,101,156,.13)
}
.wm4-stage{
  position:relative;width:100%;aspect-ratio:1672/941;display:grid;place-items:center;
  overflow:hidden;border-radius:16px;background:#f7fcff
}
.wm4-page{
  display:block;width:100%;height:100%;object-fit:contain;border-radius:14px;
  opacity:1;transform:translateX(0) scale(1);
  transition:opacity .08s ease,transform .12s ease
}
.wm4-page.wm4-out-next{opacity:.10;transform:translateX(-10px) scale(.997)}
.wm4-page.wm4-out-prev{opacity:.10;transform:translateX(10px) scale(.997)}
.wm4-arrow{
  position:absolute;z-index:5;top:50%;translate:0 -50%;
  width:48px;height:72px;border-radius:15px;border:1px solid rgba(75,166,225,.28);
  background:rgba(255,255,255,.93);color:#0a78d1;font-size:2rem;font-weight:700;
  box-shadow:0 10px 32px rgba(28,96,149,.14);cursor:pointer
}
.wm4-prev{left:12px}.wm4-next{right:12px}

.wm4-controls{
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding:13px 6px 7px
}
.wm4-status{display:flex;gap:13px;align-items:center;min-width:0}
.wm4-title{color:#0a2c57;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm4-count{
  flex:none;padding:5px 9px;border-radius:999px;background:#e7f5ff;color:#0a72c8;
  font-size:.77rem;font-weight:900
}
.wm4-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.wm4-tool{
  min-height:38px;padding:8px 12px;border-radius:10px;border:1px solid #a6d3ef;
  background:#f9fdff;color:#0a68b6;font-weight:850;text-decoration:none;cursor:pointer;font-size:.82rem
}
.wm4-tool.primary{background:linear-gradient(135deg,#0e8cf5,#0867d4);border-color:#0d7fdf;color:white}

.wm4-thumbs{
  display:flex;justify-content:center;gap:6px;overflow-x:auto;
  padding:5px 4px 1px;scrollbar-width:thin
}
.wm4-thumb{
  flex:0 0 68px;border:2px solid transparent;border-radius:8px;padding:3px;
  background:rgba(255,255,255,.86);cursor:pointer;opacity:.72
}
.wm4-thumb.active{border-color:#158be8;opacity:1;box-shadow:0 6px 16px rgba(17,129,215,.16)}
.wm4-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px}
.wm4-thumb span{display:block;text-align:center;font-size:.62rem;color:#57738c;font-weight:850;margin-top:2px}

@media(max-width:900px){
  .wm4-intro{grid-template-columns:1fr;gap:12px}
  .wm4-controls{align-items:flex-start;flex-direction:column}
  .wm4-actions{justify-content:flex-start}
}
@media(max-width:650px){
  .wm4-shell{width:min(100% - 18px,1540px)}
  .wm4-section{padding-top:26px}
  .wm4-reader{padding:7px;border-radius:15px}
  .wm4-stage{border-radius:10px}
  .wm4-arrow{width:38px;height:54px;font-size:1.55rem}
  .wm4-prev{left:5px}.wm4-next{right:5px}
  .wm4-thumb{flex-basis:54px}
  .wm4-title{white-space:normal}
}