/* Design 08: Mosaic. A video wall of flyovers and stills; a tile expands to fill the hero with its caption. */
.dz-mosaic { background: #03080b; }

/* Hero: a headline band over the wall. */
.ms-hero { padding: 116px 0 0; }
.ms-hero-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: end; margin-bottom: clamp(24px, 3vw, 36px); }
.ms-title { margin: 14px 0 0; font-size: clamp(42px, 6.2vw, 96px); line-height: .92; letter-spacing: -.055em; font-weight: 800; }
.ms-title em, .dz-mosaic .dz-h2 em { font-style: normal; background: linear-gradient(90deg, #60f5b2, #78d6f2 55%, #ffbf87); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-lede { color: #c9d6d8; margin: 0 0 20px; max-width: 46ch; }
.ms-hero-side .hero-actions { margin-top: 0; }
.ms-rise { animation: ms-rise 1s cubic-bezier(.2, .8, .2, 1) both; }
.ms-d1 { animation-delay: .12s; } .ms-d2 { animation-delay: .3s; }
@keyframes ms-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* The wall */
.ms-wall { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 21svh, 230px); gap: 6px; padding: 0 6px; }
.ms-tile { position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 6px; background: #071216; cursor: zoom-in; animation: ms-tile-in .9s cubic-bezier(.2, .8, .2, 1) both; }
.ms-tile:nth-child(4n + 1) { animation-delay: .2s; } .ms-tile:nth-child(4n + 2) { animation-delay: .3s; }
.ms-tile:nth-child(4n + 3) { animation-delay: .4s; } .ms-tile:nth-child(4n + 4) { animation-delay: .5s; }
@keyframes ms-tile-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.ms-tile-1 { grid-column: span 2; grid-row: span 2; }
.ms-tile-6 { grid-row: span 2; }
.ms-tile video, .ms-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .4s; filter: saturate(.85) brightness(.82); }
.ms-tile:hover video, .ms-tile:hover img, .ms-tile:focus-visible video, .ms-tile:focus-visible img { transform: scale(1.06); filter: none; }
.ms-tile::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: inherit; transition: border-color .3s; pointer-events: none; }
.ms-tile:hover::after, .ms-tile:focus-visible::after { border-color: rgba(96, 245, 178, .8); }
.ms-tile:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }
.ms-tile-cap { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(3, 9, 12, .7); backdrop-filter: blur(6px); color: #e8f1f2; font: 12px "SFMono-Regular", Consolas, monospace; letter-spacing: .06em; transform: translateY(6px); opacity: .85; transition: transform .3s, opacity .3s; }
.ms-tile-cap b { color: var(--green-bright); font-weight: 600; margin-right: 4px; }
.ms-tile:hover .ms-tile-cap, .ms-tile:focus-visible .ms-tile-cap { transform: none; opacity: 1; }

/* The stage: grows from the chosen tile (clip-path set from JS) to cover the whole wall. */
.ms-stage { position: absolute; inset: 0 6px; z-index: 5; overflow: hidden; border-radius: 8px; background: #03080b; clip-path: inset(var(--t, 0) var(--r, 0) var(--b, 0) var(--l, 0) round 8px); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }
.ms-stage[hidden] { display: none; }
.ms-stage-video, .ms-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-stage-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 8, 11, .85), rgba(3, 8, 11, .1) 60%), linear-gradient(0deg, rgba(3, 8, 11, .6), transparent 40%); }
.ms-stage-caption { position: absolute; left: clamp(20px, 4vw, 60px); bottom: clamp(24px, 4vw, 54px); max-width: 560px; opacity: 0; transform: translateY(20px); transition: opacity .5s .35s, transform .6s .35s cubic-bezier(.2, .8, .2, 1); }
.ms-stage.is-open .ms-stage-caption { opacity: 1; transform: none; }
.ms-stage-title { margin: 10px 0 8px; font-size: clamp(40px, 6vw, 92px); line-height: .9; letter-spacing: -.05em; font-weight: 800; }
.ms-stage-note { color: #c9d6d8; font-size: clamp(16px, 1.5vw, 20px); margin: 0 0 20px; }
.ms-stage-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ms-close { min-height: 52px; padding: 0 20px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(3, 9, 12, .4); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.ms-close:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.ms-close:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 3px; }

/* Stats and features */
.ms-stats { padding: clamp(60px, 8vw, 110px) 0; border-bottom: 1px solid var(--line); }
.ms-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ms-stats strong { display: block; font-size: clamp(48px, 6vw, 90px); line-height: .9; letter-spacing: -.05em; font-weight: 800; }
.ms-stats-grid > div > span { color: var(--muted); }
.ms-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.ms-card { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: rgba(9, 24, 29, .6); }
.ms-w7 { grid-column: span 7; } .ms-w5 { grid-column: span 5; }
.ms-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.ms-card:hover img { transform: scale(1.04); }
.ms-card > div { padding: 22px; }
.ms-card h3 { margin: 8px 0 6px; font-size: 22px; }
.ms-card p { margin: 0; color: var(--muted); }

/* Final */
.ms-final { position: relative; min-height: 86svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.ms-final video { z-index: -2; }
.ms-final-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3, 8, 11, .9), rgba(3, 8, 11, .35)); }
.ms-final-inner { padding: 120px 0 150px; }

@media (max-width: 900px) {
  .ms-hero-head { grid-template-columns: 1fr; }
  .ms-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .ms-w7, .ms-w5 { grid-column: span 12; }
}
@media (max-width: 560px) {
  .ms-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 128px; gap: 4px; padding: 0 4px; }
  .ms-stage { inset: 0 4px; }
  .ms-tile-6 { grid-row: span 1; }
  /* Phones get eight tiles; the rest never load because they never come into view. */
  .ms-tile:nth-of-type(n + 9) { display: none; }
  .ms-tile-cap { font-size: 11px; left: 6px; bottom: 6px; }
  .ms-hero-side .hero-actions .button { width: 100%; justify-content: center; }
  .ms-stage-caption { right: 20px; bottom: auto; top: 34%; }
  .ms-stage-shade { background: linear-gradient(180deg, transparent 20%, rgba(3, 8, 11, .82) 40%, rgba(3, 8, 11, .82) 80%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-tile, .ms-rise { animation: none !important; }
  .ms-stage, .ms-stage-caption, .ms-tile video, .ms-tile img { transition: none !important; }
}