@font-face { font-family: "Comfortaa"; src: url("assets/Comfortaa-wght.ttf") format("truetype"); font-style: normal; font-weight: 300 700; font-display: swap; }
:root { --logo-size: min(97vw, 97vh); --intro-height: 100vh; --connection-viewport-height: var(--intro-height); }
* { box-sizing: border-box; }
html { scrollbar-gutter: stable both-edges; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow-x: hidden; background: #fff; }
.scene { min-height: 100vh; min-height: 100svh; background: #fff; }
.scene.is-expanded {
  min-height: max(100vh, calc(var(--connection-viewport-height) + var(--logo-size) / 4 + 24px), var(--scroll-min-height, 0px), var(--description-min-height, 0px));
  min-height: max(100svh, calc(var(--connection-viewport-height) + var(--logo-size) / 4 + 24px), var(--scroll-min-height, 0px), var(--description-min-height, 0px));
}
.logo-screen { display: grid; place-items: center; width: 100%; height: 100vh; height: 100svh; background: #fff; }
.logo-node { --connection-top: calc(var(--connection-viewport-height) - var(--intro-height) / 2 + 50%); position: relative; width: var(--logo-size); max-width: 100%; line-height: 0; }
.logo-artwork { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; appearance: none; background: transparent; color: #000; cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; transform: scale(1); transform-origin: center; transition: transform 250ms ease; pointer-events: none; }
.logo-artwork[aria-expanded="true"] { transform: scale(1.03); }
.logo-artwork:focus-visible { outline: 2px solid #000; outline-offset: -6px; }
.logo { display: block; width: 100%; height: auto; object-fit: contain; pointer-events: none; }
/* Original PNG unchanged. Tight artwork bounds with approximately 1% padding. */
.logo-hit-area { position: absolute; inset: 11% 2.9% 16% 2.9%; pointer-events: auto; }
.connector { position: absolute; top: var(--connection-top); left: 50%; width: 2px; height: 25%; background: #000; pointer-events: none; transform: translateX(-50%) scaleY(1); transform-origin: 50% 0; animation: draw-connector 1000ms linear both; }
[hidden] { display: none !important; }
@keyframes draw-connector { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
@supports (height: 100svh) { :root { --logo-size: min(97vw, 97svh); --intro-height: 100svh; } }
@media (hover: hover) and (pointer: fine) { .logo-artwork:hover { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .logo-artwork { transition: none; } .connector { animation: none; } }

.details-block {
  position: absolute;
  top: calc(var(--connection-top) + 25% + 24px);
  left: 50%;
  /* Same type size and measure; normal spaces never expand to justify lines. */
  width: min(37.8em, calc(100vw - 48px));
  margin: 0;
  transform: translateX(-50%);
  color: #000000;
  font-family: "Comfortaa", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(1rem, calc((100vw - 48px) / 37.8), 1.2rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: normal;
  text-align: center;
  word-spacing: normal;
  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

/* Keep each animated word intact; only the ordinary spaces may wrap. */
.description-word { display: inline; white-space: nowrap; opacity: 0; }
.digital-description.is-revealed .description-word {
  animation: reveal-word 600ms ease-in-out both;
  animation-delay: calc(var(--word-index) * (5000ms - 600ms) / (var(--word-count) - 1));
}
.digital-description.is-complete .description-word { animation: none; opacity: 1; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


.digital-description:not(.is-revealed) { visibility: hidden; }
@keyframes reveal-word { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .digital-description.is-revealed .description-word { animation: none; opacity: 1; } }

.digital-description { margin: 0; }
.products-heading { margin: 48px 0 0; color: inherit; font-family: inherit; font-size: inherit; font-weight: 700; line-height: 1.65; text-align: center; text-decoration: underline; text-underline-offset: .15em; opacity: 0; visibility: hidden; }
.products-heading.is-scheduled { visibility: visible; animation: fade-products 1000ms ease-in-out 1000ms both; }
.products-heading.is-complete { visibility: visible; animation: none; opacity: 1; }
@keyframes fade-products { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .products-heading.is-scheduled { animation: none; opacity: 1; visibility: visible; } }

.infantry-experts-group { margin: 24px 0 0; font-family: inherit; font-size: inherit; line-height: 1.65; text-align: center; text-decoration: none; opacity: 0; visibility: hidden; }
.infantry-experts-title { margin: 0; font-family: inherit; font-size: inherit; font-weight: 700; text-decoration: none; line-height: inherit; }
.infantry-experts-description { margin: 16px 0 0; font-family: inherit; font-size: inherit; font-weight: 400; text-decoration: none; line-height: inherit; word-spacing: normal; hyphens: none; -webkit-hyphens: none; word-break: normal; overflow-wrap: normal; }
.infantry-experts-group.is-scheduled { visibility: visible; animation: fade-infantry 1000ms ease-in-out 1000ms both; }
.infantry-experts-group.is-complete { visibility: visible; animation: none; opacity: 1; }
@keyframes fade-infantry { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .infantry-experts-group.is-scheduled { animation: none; opacity: 1; visibility: visible; } }

/* Balanced line breaks retain ordinary, unstretched spaces and whole words. */
.balanced-word { white-space: nowrap; }