@import url("https://fonts.cdnfonts.com/css/pp-neue-montreal");

.grnd-page,
.grnd-page * { box-sizing: border-box; }

body { overflow-x: hidden; }

.grnd-page { font-family: "PP Neue Montreal", sans-serif; overflow-x: hidden; }

.grnd-page h1 { font-size: 4rem; font-weight: 500; line-height: 1; }

.grnd-page h2 { font-size: 3rem; font-weight: 500; line-height: 1.125; letter-spacing: -0.03rem; }

.grnd-page p { font-size: 1.1rem; font-weight: 500; line-height: 1.5; }

.grnd-page section { position: relative; width: 100vw; height: 100svh; background-color: #e0dfdf; color: #0d0d0d; overflow: hidden; }

.grnd-page .intro,
.grnd-page .outro { display: flex; justify-content: center; align-items: center; background-color: #0d0d0d; color: #e0dfdf; padding: 2rem; }

.grnd-page .model-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 100; pointer-events: none; }

.grnd-page .header-1 { position: relative; width: 200vw; height: 100svh; color: #0d0d0d; transform: translateX(0%); }

.grnd-page .header-2 { position: fixed; top: 0; left: 0; width: 150vw; height: 100svh; color: #e0dfdf; transform: translateX(100%); z-index: 2; }

.grnd-page .header-1,
.grnd-page .header-2 { display: flex; align-items: center; padding: 0 2rem; }

.grnd-page .header-1 h1,
.grnd-page .header-2 h1 { width: 100%; font-size: 15vw; line-height: 1.25; letter-spacing: -0.02em; }

.grnd-page .circular-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0d0d0d; clip-path: circle(0% at 50% 50%); }

.grnd-page .tooltips { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75%; height: 75%; display: flex; gap: 15rem; z-index: 50; }

.grnd-page .tooltip { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; color: #e0dfdf; }

.grnd-page .tooltip:nth-child(2) { justify-content: flex-end; align-items: flex-end; }

.grnd-page .tooltip .divider { position: relative; width: 100%; height: 1px; background-color: #5f5f5f; margin: 0.5rem 0; transform: scaleX(0); }

.grnd-page .tooltip:nth-child(1) .divider { transform-origin: right center; }

.grnd-page .tooltip:nth-child(2) .divider { transform-origin: left center; }

.grnd-page .tooltip .icon { font-size: 2.5rem; overflow: hidden; }

.grnd-page .tooltip .description { color: #5f5f5f; }

.grnd-page .tooltip:nth-child(2) .icon,
.grnd-page .tooltip:nth-child(2) .title,
.grnd-page .tooltip .description { width: 70%; }

@media (max-width: 1000px) {
  .grnd-page h1 { text-align: center; font-size: 2rem; }

  .grnd-page h2,
  .grnd-page .tooltip .icon { font-size: 1.5rem; }

  .grnd-page .tooltips { width: 100%; align-items: center; flex-direction: column; gap: 2rem; }

  .grnd-page .tooltip { width: 85%; }

  .grnd-page .tooltip:nth-child(2) { justify-content: flex-start; align-items: flex-start; }

  .grnd-page .tooltip .divider { width: 70%; }

  .grnd-page .tooltip:nth-child(2) .divider { transform-origin: right center; }

  .grnd-page .tooltip:nth-child(2) .icon,
  .grnd-page .tooltip:nth-child(2) .title { width: 100%; }
}