:root{
  /* colori coerenti con la grafica */
  --bg: #5f6f7a;          /* grigio/blu */
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.75);
  --orange: #f29a1a;

  --tile-size: 92px;
  --tile-gap: 18px;
}

*{ box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.page{
  min-height: 100svh;
  position: relative;
  padding: 48px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* blocco centrale */
.center{
  width: min(920px, 100%);
  text-align: center;
  transform: translateY(-8px);
}

/* logo GGA */
.logo{
  display: inline-flex;
  gap: var(--tile-gap);
  align-items: center;
  justify-content: center;
  margin-bottom: 34px;
}

.logo__tile{
  width: var(--tile-size);
  height: var(--tile-size);
  background: var(--orange);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: calc(var(--tile-size)*1.25); 
  line-height: 1;
  font-weight: 300;
  letter-spacing: -2px; 

  border-radius: 0;
}


/* titolo grande */
.title{
  margin: 0 0 28px;
  font-size: clamp(34px, 5.2vw, 64px);
  font-weight: 200;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--text);
}

/* blocco studio */
.studio{
  display: grid;
  gap: 14px;
  justify-items: center;
}

.studio__line{
  font-size: clamp(18px, 2.1vw, 28px);
  font-weight: 200;
  letter-spacing: 10px;
  text-transform: uppercase;
  color: var(--muted);
}

.studio__small{
  font-size: clamp(14px, 1.6vw, 20px);
  letter-spacing: 12px;
  opacity: .95;
}

/* contatti in basso a sinistra */
.contacts{
  position: absolute;
  left: 28px;
  bottom: 22px;
  text-align: left;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 1px;
  color: rgba(255,255,255,.78);
}

.contacts__label{
  margin-bottom: 4px;
  text-transform: uppercase;
}

.contacts__item{
  display: block;
  text-transform: uppercase;
}

.contacts__link{
  color: rgba(255,255,255,.78);
  text-decoration: none;
}

.contacts__link:hover{
  text-decoration: underline;
}

/* MOBILE */
@media (max-width: 640px){
  :root{
    --tile-size: 70px;
    --tile-gap: 14px;
  }

  .page{
    padding: 36px 18px 90px; /* spazio per contatti */
  }

  .logo{ margin-bottom: 26px; }

  .logo__tile{
    font-size: calc(var(--tile-size) * );
    letter-spacing: -1px;
  }

  .title{
    letter-spacing: 4px;
    margin-bottom: 22px;
  }

  .studio__line{
    letter-spacing: 8px;
  }

  /* su mobile i contatti diventano centrati in basso */
  .contacts{
    left: 18px;
    right: 18px;
    bottom: 18px;
    text-align: left;
  }
}

@media (max-width: 380px){
  .title{ letter-spacing: 3px; }
  .studio__line{ letter-spacing: 6px; }
}