/* The stand-in website. Sits inside a .viewport, which is a size container. */
.viewport { position: relative; overflow: hidden; container-type: inline-size; background: #fff; }
.ms { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color: #1c2733; font-size: 13px; line-height: 1.45; user-select: none; }
.ms.is-scrolling { animation: ms-scroll 13s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes ms-scroll { 0%, 8% { transform: none; } 92%, 100% { transform: translateY(calc(-100% + var(--view-h, 520px))); } }
.ms-nav { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-bottom: 1px solid #edf0f2; }
.ms-name { font-size: 15px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-links { display: none; gap: 18px; margin-left: auto; color: #5b6875; }
.ms-links i { font-style: normal; white-space: nowrap; }
.ms-nav .ms-name { min-width: 0; flex: 0 1 auto; max-width: 55%; }
.ms-btn { margin-left: auto; padding: 8px 12px; border-radius: 8px; background: #17324d; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ms-links + .ms-btn { margin-left: auto; }
.ms-hero { padding: 40px 18px 44px; color: #fff; background:
  linear-gradient(100deg, #10243add 0%, #14304dcc 45%, #1b3f6266 100%),
  url(img/site-hero.jpg) center / cover, #12283d; }
.ms-kicker { margin: 0 0 10px; font-size: 12px; opacity: .75; }
.ms-hero h2 { margin: 0 0 12px; font-size: 32px; line-height: 1.05; letter-spacing: -.03em; font-weight: 700; }
.ms-sub { margin: 0 0 20px; max-width: 34ch; font-size: 14px; opacity: .85; }
.ms-btn-light { display: inline-block; margin: 0; padding: 11px 16px; background: #fff; color: #17324d; font-size: 13px; }
.ms-band { padding: 30px 18px; }
.ms-band-tint { background: #f4f7f9; }
.ms-band h3 { margin: 0 0 16px; font-size: 19px; letter-spacing: -.02em; }
.ms-tiles { display: grid; gap: 12px; }
.ms-tiles > div { padding: 16px; border: 1px solid #e6eaee; border-radius: 12px; }
.ms-tiles b { display: block; margin: 10px 0 4px; font-size: 14px; }
.ms-tiles p { margin: 0; color: #5b6875; font-size: 12.5px; }
.ms-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #e8f0f6; }
.ms-ico svg { width: 19px; height: 19px; fill: none; stroke: #1f4a70; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ms-work { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ms-work div { aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(140deg, #b9c9d6, #8199ad); }
.ms-work div:nth-child(2) { background: linear-gradient(200deg, #c9bfae, #94897a); }
.ms-work div:nth-child(3) { background: linear-gradient(160deg, #9fb3a5, #6d8776); }
.ms-work div:nth-child(4) { background: linear-gradient(120deg, #c4cbd3, #8a97a5); }
.ms-lines i { display: block; height: 11px; margin: 11px 0; border-radius: 6px; background: #edf0f3; }
.ms-lines i:nth-child(2) { width: 84%; } .ms-lines i:nth-child(3) { width: 62%; }
.ms-foot { display: flex; justify-content: space-between; gap: 12px; padding: 22px 18px 120px; background: #12283d; color: #c7d3de; font-size: 12px; }
.ms-foot strong { color: #fff; }

@container (min-width: 600px) {
  .ms-nav { padding: 16px 40px; }
  .ms-links { display: flex; }
  .ms-links + .ms-btn { margin-left: 0; }
  .ms-hero { padding: 0 40px; }
  .ms-hero-in { max-width: 520px; padding: 72px 0 80px; }
  .ms-hero h2 { font-size: 50px; }
  .ms-sub { font-size: 15px; }
  .ms-band { padding: 44px 40px; }
  .ms-tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ms-work { grid-template-columns: repeat(4, 1fr); }
  .ms-foot { padding: 28px 40px 60px; }
}
@media (prefers-reduced-motion: reduce) { .ms.is-scrolling { animation: none; } }