:root { background:#000; color:#fff; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#000; }
body { overflow-x:hidden; }

.designFrame {
  position:relative;
  width:min(100%,1440px);
  margin:0 auto;
  background:#000;
}

.pageDesign {
  width:100%;
  height:auto;
  display:block;
}

.designNav {
  position:absolute;
  z-index:2;
  inset:0 0 auto;
  height:clamp(48px,6.5vw,106px);
}

.designNav a {
  position:absolute;
  top:0;
  height:100%;
  display:block;
  border-radius:2px;
  outline:none;
}

.designNav a:focus-visible {
  box-shadow:inset 0 -3px #fff;
  background:rgba(255,255,255,.08);
}

.designNav span {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.aboutLink { left:4%; width:22%; }
.servicesLink { left:25%; width:27%; }
.contactLink { left:52%; width:20%; }
.bookLink { left:75%; width:20%; }

@media (max-width:560px) {
  .designFrame { width:100%; }
  .designNav { height:48px; }
}