/* Coming-soon page. Fonts, colours and the logo layers are the main site's
   (public/assets/css/site.css). */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope-latin-variable.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 700 900; font-display: swap; src: url('fonts/barlow-semi-condensed-800-italic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/jetbrains-mono-labels.woff2') format('woff2'); }

:root {
  --navy-900: #172350;
  --navy-800: #24336a;
  --sky: #8fbfdc;
  --steel-text: #66696c;
  --paper: #f8f9fa;
  --ink: #141a2e;
  --body: 'Manrope', 'Segoe UI', sans-serif;
  --display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.teaser {
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  overflow-x: hidden;
  text-align: center;
}

.teaser__intro {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  padding:
    max(1.5rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    clamp(1.5rem, 4svh, 2.5rem)
    max(1rem, env(safe-area-inset-left));
}

/* The logo is two layers: the wordmark, and the rotor positioned over the gap it was cut
   from. Positions are in the master logo's units (box 2864 × 926, without the two squares;
   rotor square 1150, its top-left at 1779, -100 and the hub at its centre). */
.brand {
  /* Inset so the rotor, which sticks out of the wordmark box, stays on the screen while it spins. */
  --logo-w: min(calc(100% - 1rem), 42rem);
  position: relative;
  width: var(--logo-w);
  aspect-ratio: 2864 / 926;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.brand img { display: block; }
.brand__word { width: 100%; height: auto; }

.brand__rotor {
  position: absolute;
  top: calc(var(--logo-w) * -100 / 2864);
  left: calc(var(--logo-w) * 1779 / 2864);
  width: calc(var(--logo-w) * 1150 / 2864);
  height: auto;
}

.teaser__label {
  margin: clamp(1.5rem, 4svh, 2.75rem) 0 0;
  color: var(--steel-text);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.teaser__services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 40rem;
  margin: .9rem 0 0;
  color: var(--navy-800);
  font-size: clamp(1rem, .92rem + .35vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
}

.teaser__services .dot { margin-inline: .45rem; color: var(--steel-text); font-weight: 500; }

.teaser__company {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .35rem;
  max-width: 28rem;
  margin: .7rem 0 0;
  color: var(--steel-text);
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
  font-weight: 600;
}

/* Empty flex item. On a narrow phone it takes a row, so the lines break in pairs
   instead of leaving one word on its own. */
.teaser__nl { display: none; }
@media (max-width: 30rem) {
  .teaser__services .teaser__nl { display: block; flex-basis: 100%; height: 0; }
  .teaser__services .teaser__pair { display: none; }
}
@media (max-width: 23rem) {
  .teaser__company .teaser__nl { display: block; flex-basis: 100%; height: 0; }
}

.teaser__photo {
  width: min(100%, 56rem);
  margin: 0;
  background: var(--navy-900);
}

.teaser__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.teaser__figures {
  display: grid;
  width: min(100%, 56rem);
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--navy-900);
  color: var(--paper);
}

.teaser__figures li { padding: 1.2rem .85rem 1.35rem; border-right: 1px solid #ffffff1f; }
.teaser__figures li:last-child { border-right: 0; }

.teaser__figures strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  text-shadow: -.045em .045em 0 #ffffff1f;
}

.teaser__figures span {
  display: block;
  margin-top: .45rem;
  color: #c5cce0;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* A phone is too narrow for three columns of these lines. Number, then the line. */
@media (max-width: 40rem) {
  .teaser__figures { grid-template-columns: 1fr; }
  .teaser__figures li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .95rem max(1.15rem, env(safe-area-inset-right)) .95rem max(1.15rem, env(safe-area-inset-left));
    border-right: 0;
    border-bottom: 1px solid #ffffff1f;
    text-align: left;
  }
  .teaser__figures li:last-child { border-bottom: 0; }
  .teaser__figures strong { flex: none; width: 4.6rem; font-size: 1.9rem; }
  .teaser__figures span { margin-top: 0; font-size: .72rem; }
}

.teaser__address {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding:
    1.5rem
    max(1rem, env(safe-area-inset-right))
    max(1.75rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
  font-style: normal;
  font-weight: 600;
}

.teaser__address a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .35rem .75rem;
  color: var(--navy-800);
  text-decoration: underline 2px transparent;
  text-underline-offset: .3em;
  touch-action: manipulation;
  transition: text-decoration-color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .teaser__address a:hover { text-decoration-color: var(--sky); }
  .teaser__address .w3w:hover { color: var(--navy-800); }
}
.teaser__address a:active { text-decoration-color: var(--sky); }
.teaser__address a:focus-visible { outline: 2px solid var(--navy-800); outline-offset: .35rem; border-radius: 2px; }

.teaser__place { flex-direction: column; gap: .1rem; line-height: 1.35; }

/* what3words: the official symbol stands in for the three slashes. */
.teaser__address .w3w { display: inline-flex; align-items: center; gap: .35rem; color: var(--steel-text); font-size: .875rem; font-weight: 500; text-decoration: none; transition: color .2s ease; }
.teaser__address .w3w:active { color: var(--navy-800); }
.w3w img { width: 1rem; height: 1rem; }

/* Phone and email sit together, a step below the address. Each stays on one line. */
.teaser__reach { display: flex; flex-direction: column; align-items: center; margin-top: .35rem; }
.teaser__reach a { white-space: nowrap; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The wordmark slides in while the rotor spins up and winds down to a stop (coming-soon.js adds
   .brand--intro once the rotor has loaded, and .brand--spin on hover or tap); the lines follow. */
@media (prefers-reduced-motion: no-preference) {
  .brand__word { animation: word-in 1.1s var(--ease) .1s both; }
  .brand--intro .brand__rotor { animation: rotor-intro 3.2s cubic-bezier(.12, .55, .25, 1) both; }
  .brand--spin .brand__rotor { animation: rotor-spin 2.2s cubic-bezier(.12, .55, .25, 1) both; }
  .teaser__label,
  .teaser__services,
  .teaser__company { animation: fade-up .9s var(--ease) 1.3s both; }
  .teaser__address { animation: fade-up .9s var(--ease) 1.45s both; }
}

@keyframes word-in { from { opacity: 0; transform: translateX(-1.5rem); } }
@keyframes rotor-intro { from { opacity: 0; transform: rotate(-1080deg); } 12% { opacity: 1; } to { transform: rotate(0); } }
@keyframes rotor-spin { from { transform: rotate(-720deg); } to { transform: rotate(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(.6rem); } }