@import url('https://fonts.googleapis.com/css2?family=Geist:wght@500&display=swap');

:root {
  color: #fff;
  background: #000;
  font-family: 'Geist', 'Inter', Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100%; }

.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 42px 24px 35px;
}

.site-header { flex: none; }
.wordmark { display: block; width: 124px; height: auto; }

.hero {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

.hero-visual {
  display: block;
  width: 170px;
  height: 170px;
  object-fit: contain;
  background: #000;
}

h1 {
  margin: 31px 0 0;
  max-width: 600px;
  color: #fff;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: -.035em;
}

.headline-line { display: block; }
.service { position: relative; display: inline-block; white-space: nowrap; --tip-x: -50%; }
.service-trigger { padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; letter-spacing: inherit; cursor: pointer; transition: opacity 180ms ease; }
.service-trigger:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.headline:has(.service:hover) .service:not(:hover) .service-trigger,
.headline:has(.service:focus-within) .service:not(:focus-within) .service-trigger,
.headline:has(.service.is-active) .service:not(.is-active) .service-trigger { opacity: .5; }

.tooltip {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(100% + 14px);
  width: max-content;
  max-width: min(250px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 10px;
  color: #fff;
  background: #1b1b1b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(var(--tip-x), 6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.tooltip img { position: absolute; left: calc(50% - 8.5px); top: calc(100% - 1px); width: 17px; height: 8px; }
.service:hover .tooltip, .service:focus-within .tooltip, .service.is-active .tooltip { opacity: 1; visibility: visible; transform: translate(var(--tip-x), 0); }
.headline.dismissed .tooltip { opacity: 0; visibility: hidden; }
.headline-line:last-child .tooltip { top: calc(100% + 14px); bottom: auto; }
.headline-line:last-child .tooltip img { top: auto; bottom: calc(100% - 1px); transform: rotate(180deg); }

.site-footer {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.social-icons { display: flex; align-items: center; gap: 10px; }
.social-icon, .social-icon img { display: block; width: 20px; height: 20px; }
.social-icon { transition: transform 180ms ease; }
.social-icon:hover, .social-icon:focus-visible { transform: scale(1.12); }
.social-icon:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.site-footer small { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.2); }

@media (prefers-reduced-motion: reduce) {
  .social-icon, .service-trigger, .tooltip { transition: none; }
}

@media (max-width: 600px) {
  .page { padding: 30px 20px 26px; }
  .hero { padding: 44px 0; }
  .hero-visual { width: 150px; height: 150px; }
  h1 { margin-top: 28px; max-width: 350px; font-size: clamp(25px, 6.7vw, 32px); line-height: 1.25; }
  h1 br { display: none; }
  .tooltip br { display: initial; }
}

@media (max-height: 560px) and (min-width: 601px) {
  .page { padding-top: 20px; padding-bottom: 20px; }
  .hero { padding: 24px 0; }
  .hero-visual { width: 130px; height: 130px; }
  h1 { margin-top: 20px; font-size: 27px; }
}