:root {
  --bg: #F3F1E4;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: #2b2b2b;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.container{
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.logo {
  
  width: 760px;
  max-width: 50vw;
  height: auto;
}
.housegroup{
  width: 360px;
  max-width: 50vw;
  height: auto;
}

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Three-dot loading indicator */
.dots {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #a5759d; /* purple */
  opacity: 0; /* default hidden */
}

/* Use stepped animations so visibility advances in 4 discrete states: 0,1,2,3 */
.dot:nth-child(1) {
  animation: dot1 2.2s steps(1, end) infinite;
}

.dot:nth-child(2) {
  animation: dot2 2.2s steps(1, end) infinite;
}

.dot:nth-child(3) {
  animation: dot3 2.2s steps(1, end) infinite;
}

@keyframes dot1 {
  0% { opacity: 0; }
  25%, 100% { opacity: 1; }
}

@keyframes dot2 {
  0%, 49.9% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes dot3 {
  0%, 74.9% { opacity: 0; }
  75%, 100% { opacity: 1; }
}

.email{
      display:inline-flex;
      align-items:center;
      gap:10px;
      margin-top:16px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(31,31,31,.18);
      color:var(--text);
      text-decoration:none;
      background: rgba(255,255,255,.35);
      transition: transform .15s ease, background .15s ease;
    }
    .email:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.55);
    }
    .email:focus-visible{
      outline:2px solid rgba(31,31,31,.55);
      outline-offset:3px;
    }

    .tiny{
      margin-top:14px;
      font-size:13px;
      opacity:.75;
    }