/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:        #f4f2ef;
  --fg:        #1a1a1a;
  --fg-muted:  #888880;
  --accent:    #1a1a1a;
  --divider:   #d8d5d0;

  --font-contact: 'LetterGothicStd', 'Letter Gothic Std', 'Courier New', monospace;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-contact);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  /* page entrance */
  opacity: 0;
  animation: page-in 0.6s var(--ease-out-expo) 0.1s forwards;
}

@keyframes page-in {
  to { opacity: 1; }
}

/* ─── Layout ────────────────────────────────────────────────── */
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  padding: 4rem 2rem;
  min-height: 100dvh;
}

/* ─── Logo ──────────────────────────────────────────────────── */
.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

#ec-logo {
  width: 180px;
  height: auto;
  overflow: visible;
}

/* Polygons — drawn via stroke animation (pure CSS) */
.logo-poly {
  fill: none;
  stroke: var(--fg);
  stroke-width: 1;
  stroke-linejoin: miter;
}

#poly1 {
  stroke-dasharray: 630;
  stroke-dashoffset: 630;
  animation: logo-draw 0.9s 0.1s cubic-bezier(0.5, 0, 0.5, 1) forwards,
             logo-fill 0.4s 1.2s ease forwards;
}
#poly2 {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: logo-draw 0.6s 0.5s cubic-bezier(0.5, 0, 0.5, 1) forwards,
             logo-fill 0.4s 1.2s ease forwards;
}
#poly3 {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: logo-draw 0.6s 0.7s cubic-bezier(0.5, 0, 0.5, 1) forwards,
             logo-fill 0.4s 1.2s ease forwards;
}

/* Text in SVG */
.logo-text {
  fill: var(--fg);
  opacity: 0;
  animation: logo-text-in 0.6s 1.5s ease forwards;
}

/* ─── Keyframes ─────────────────────────────────────────────── */
@keyframes logo-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes logo-fill {
  to { fill: var(--fg); stroke: none; }
}
@keyframes logo-text-in {
  to { opacity: 1; }
}

/* ─── Contact ───────────────────────────────────────────────── */
.contact-wrap {
  width: 100%;
  max-width: 310px;
}

.contact-list {
  list-style: none;
}

.contact-item {
  border-bottom: 1px solid var(--divider);
  border-top: 1px solid var(--divider);
  margin-top: -1px;

  /* entrance animation state */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
}

.contact-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0;
  text-decoration: none;
  color: inherit;
}

.contact-link:hover .contact-value,
.contact-link--group:hover .contact-value {
  color: var(--fg-muted);
  transition: color 0.2s;
}

.contact-link:hover .contact-icon,
.contact-link--group:hover .contact-icon {
  color: var(--fg);
}

.phone-link {
  color: inherit;
  text-decoration: none;
}

.phone-link:hover {
  color: var(--fg-muted);
}

.contact-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--fg-muted);
  transition: color 0.2s;
}

.contact-icon svg {
  width: 15px;
  height: 15px;
}

.contact-value {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--fg);
}

.contact-item:last-child .contact-value {
  font-size: 0.68rem;
}

/* ─── Desktop layout ────────────────────────────────────────── */
@media (min-width: 780px) {
  .page {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8rem;
    padding: 4rem;
  }

  .logo-wrap {
    flex-shrink: 0;
  }

  #ec-logo {
    width: 220px;
  }
}

@media (min-width: 1200px) {
  #ec-logo {
    width: 260px;
  }
}