/* Elixir Dsgn holding page.
   Rebuilt on 25 Oct 2026 from the SeedProd page captured by the Internet Archive on 25 Jan 2025.
   Sizes, colours and breakpoints follow the original page. */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #111 url("bg.jpg") center top / cover no-repeat;
  background-image: image-set(url("bg.webp") type("image/webp"), url("bg.jpg") type("image/jpeg"));
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: #272727;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { width: 100%; padding: 10px; }

.intro { max-width: 700px; margin: 0 auto; padding: 10px; text-align: center; }

.qr { display: block; }
.qr img { display: block; width: 200px; height: auto; margin: 0 auto 30px; }

.logo { width: 250px; margin: 0 auto 20px; }
.logo svg { display: block; width: 100%; height: auto; fill: #fff; }

.title,
.services,
.cta {
  margin: 0;
  padding: 0 10px;
  font-family: "Lexend Giga", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

.title { font-size: 16px; line-height: 24px; color: #fff; }
.services { margin-top: 12px; font-size: 13px; line-height: 19.5px; color: #9e9e9e; }
.cta { margin-top: 20px; font-size: 13px; line-height: 19.5px; color: #666; }

.rule { width: 90%; margin: 27px auto 0; border: 0; border-top: 1px solid #666; }

.mark { display: flex; align-items: center; width: 90%; height: 24px; margin: 10px auto 0; color: #666; }
.mark::before,
.mark::after { content: ""; flex: 1; border-top: 1px solid #666; }
.mark svg { width: 15px; height: 15px; margin: 0 10px; fill: currentColor; }

/* Buttons: one centred row of equal-width buttons, stacked on narrow screens. */
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1000px;
  margin: 30px auto 0;
}

.button {
  display: inline-block;
  width: 240px;
  padding: 16px 20px;
  border-radius: 4px;
  background: #fff;
  color: #000;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}
.button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* The original icons were font glyphs, so the 2px letter-spacing also followed them. */
.button svg { height: 12px; margin-right: 10px; vertical-align: top; fill: currentColor; }
.button .label { font-family: "Lexend Giga", sans-serif; }
.button .sub { display: block; margin-top: 4px; font: 400 6px/1 "Lexend Giga", sans-serif; opacity: 0.75; }

/* Contact details as icons. */
.contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.contacts a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #555;
  border-radius: 50%;
  color: #bdbdbd;
  transition: color 0.2s, border-color 0.2s;
}
.contacts a:hover { color: #fff; border-color: #fff; }
.contacts a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.contacts svg { height: 18px; fill: currentColor; }

@media (max-width: 819px) {
  .actions { flex-direction: column; align-items: center; gap: 14px; }
  .button { width: 260px; }
}

@media (max-width: 480px) {
  .qr, .logo { display: none; }
  .title { margin-top: 60px; }
}

/* Not-found page */
.notfound .title { margin-bottom: 8px; }
.notfound .button { margin-top: 30px; }