:root {
  --panna: #f7f2e9;
  --cream: #fffdf8;
  --olive: #2e3928;
  --terra: #b96a3a;
  --gold: #d5bb75;
  --line: #d7cbb8;
  --sans: Inter, Avenir, 'Helvetica Neue', Arial, sans-serif;
  --heading: 'TGL Engschrift', 'Arial Narrow', Arial, sans-serif;
}

@font-face {
  font-family: 'TGL Engschrift';
  src: url('../fonts/tgl-0-1451-engschrift/tgl-engschrift.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { background: var(--panna); color: var(--olive); font-family: var(--sans); margin: 0; }
a { color: inherit; }

.soon-page { min-height: 100vh; overflow: hidden; }
.soon-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1280px;
  padding: 1.4rem clamp(1.4rem, 4vw, 4rem);
}
.soon-header::before, .soon-header::after { background: var(--line); content: ''; height: 1px; width: clamp(3rem, 14vw, 11rem); }
.soon-header p { color: var(--terra); font-size: .66rem; font-weight: 700; letter-spacing: .16em; margin: 0; text-align: center; text-transform: uppercase; }

.soon-hero { min-height: min(660px, calc(100vh - 54px)); padding: clamp(1.5rem, 4vw, 3rem) 1.4rem clamp(4rem, 9vw, 7rem); position: relative; }
.soon-content { margin: 0 auto; max-width: 720px; position: relative; text-align: center; z-index: 1; }
.soon-logo {
  display: block;
  height: auto;
  margin: 0 auto clamp(1.9rem, 4vw, 3rem);
  max-width: 300px;
  width: min(74vw, 300px);
}
.pattern-band {
  background-color: #eee2c9;
  background-image: linear-gradient(rgba(247, 242, 233, .2), rgba(247, 242, 233, .2)), url('../images/ci/zio-mauri-muster-banner.svg');
  background-position: center;
  background-size: auto 100%;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  height: clamp(3.4rem, 7vw, 5rem);
  margin: 0 calc(50% - 50vw) clamp(2.3rem, 5vw, 3.5rem);
  max-width: none;
  overflow: hidden;
  position: relative;
  width: 100vw;
}
.pattern-band::after { background: rgba(255,253,248,.2); content: ''; inset: 0; position: absolute; }
.eyebrow { color: var(--terra); font-size: .68rem; font-weight: 700; letter-spacing: .17em; margin: 0 0 1rem; text-transform: uppercase; }
h1 { font-family: var(--heading); font-size: clamp(4.1rem, 10vw, 8.4rem); font-weight: 400; letter-spacing: -.045em; line-height: .82; margin: 0; text-transform: uppercase; }
.soon-lead { font-size: clamp(1.02rem, 1.55vw, 1.22rem); line-height: 1.65; margin: 1.9rem auto 0; max-width: 38rem; }
.soon-contact { border-bottom: 1px solid var(--olive); display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; margin-top: 2rem; padding-bottom: .32rem; text-decoration: none; text-transform: uppercase; transition: color .2s ease, border-color .2s ease; }
.soon-contact:hover { border-color: var(--terra); color: var(--terra); }
.soon-contact:focus-visible { outline: 3px solid var(--terra); outline-offset: 5px; }

.contact-strip { background: var(--olive); color: var(--cream); padding: clamp(2.5rem, 5vw, 4rem) 1.4rem; }
.contact-strip-inner { align-items: center; display: grid; gap: 2rem; grid-template-columns: 1fr auto 1fr; margin: 0 auto; max-width: 1080px; }
.contact-strip h2 { color: var(--gold); font-family: var(--heading); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: -.015em; line-height: 1; margin: 0 0 .8rem; text-transform: uppercase; }
.contact-strip p, .contact-strip address { font-size: .9rem; font-style: normal; line-height: 1.6; margin: 0; }
.contact-strip a { color: var(--cream); text-decoration: none; }
.contact-strip a:hover { color: var(--gold); }
.contact-divider { background: rgba(255,253,248,.28); height: 86px; width: 1px; }
.contact-right { text-align: right; }
.contact-right a { display: inline-block; margin-bottom: .28rem; }

.soon-footer { color: #6d685d; font-size: .69rem; letter-spacing: .04em; padding: 1.15rem 1.4rem; text-align: center; }
.soon-footer-main { display: flex; gap: 1.2rem; justify-content: center; }
.soon-site-by { color: inherit; display: inline-block; font-size: .62rem; letter-spacing: .1em; margin-top: .65rem; text-decoration: none; text-transform: uppercase; }
.soon-site-by:hover { color: var(--terra); }
.soon-site-by:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }

@media (max-width: 600px) {
  .soon-header::before, .soon-header::after { width: 2.5rem; }
  .soon-header p { font-size: .56rem; letter-spacing: .11em; }
  .soon-hero { min-height: 570px; padding-top: 2rem; }
  .soon-logo { margin-bottom: 1.65rem; width: min(82vw, 285px); }
  .pattern-band { margin-bottom: 2.3rem; }
  h1 { font-size: clamp(3.8rem, 20vw, 5.5rem); }
  .contact-strip-inner { display: block; text-align: center; }
  .contact-divider { height: 1px; margin: 1.7rem auto; width: 3.5rem; }
  .contact-right { text-align: center; }
  .soon-footer-main { flex-direction: column; gap: .2rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .soon-content { animation: arrive .75s ease-out both; }
  .contact-strip { animation: arrive .8s .1s ease-out both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
}