/* Reset */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}
:root {
  /* Optical centering to compensate for crescent-heavy logo (+5px nudge) */
  --optical-center-offset: clamp(17px, calc(3.5vw + 5px), 37px);
}

/* Center content */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial, sans-serif;
  background: #fff;
}

.container {
  text-align: center;
  display: inline-flex; /* shrink-wrap to the logo width */
  flex-direction: column;
  align-items: stretch; /* children take container width */
  gap: 24px; /* spacing below the logo */
}

.logo-wrapper {
  display: flex;
  justify-content: center;
}

.logo {
  /* Responsively larger logo; container will size to this width */
  width: clamp(340px, 50vw, 720px);
  max-width: 90vw;
  height: auto;
  display: block;
  margin: 0 auto;
}

h1 {
  font-size: 2rem;
  color: #333;
  margin: 0; /* rely on container gap for spacing */
  width: 100%; /* match the logo/container width */
  text-align: center;
  transform: translateX(var(--optical-center-offset));
}
@media (max-width: 600px) {
  :root { --optical-center-offset: clamp(15px, calc(3vw + 5px), 29px); }
}