:root {
  color-scheme: dark;
  --blue: #173a69;
  --text: #fff;
  --secondary: #dfe5f2;
  --accent: #7a88b3;
  font-family: "Signika", "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--blue);
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p, figure { margin: 0; }
body { min-width: 20rem; }
a { color: inherit; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
::selection { color: var(--blue); background: #fff; }

.skip-link {
  position: fixed;
  z-index: 5;
  inset: 1rem auto auto 1rem;
  padding: .8rem 1rem;
  color: var(--blue);
  background: #fff;
  transform: translateY(calc(-100% - 2rem));
}
.skip-link:focus { transform: translateY(0); }
.business-card { display: grid; min-height: 100svh; }
.information {
  display: flex;
  flex-direction: column;
  padding: 3rem 1.5rem 2rem;
}
h1 {
  font-size: clamp(2rem, 6.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.13;
  text-wrap: pretty;
  letter-spacing: 0.02em;
}
.subtitle {
  margin-top: 1.25rem;
  color: var(--secondary);
  font-size: 1.15rem;
  line-height: 1.4;
}
.introduction::after {
  content: "";
  display: block;
  width: 3rem;
  margin-top: 1.7rem;
  border-top: 4px solid var(--accent);
}
.services { margin-block: 1.8rem 2.75rem; }
.services-list {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--secondary);
  font-size: 1.125rem;
  line-height: 1.4;
}
.services-list + .services-list { margin-top: 1.25rem; }
.services-list--cs { color: var(--text); font-weight: 600; }
.services-list li { padding-left: .2rem; }
.services-list li::marker { color: var(--accent); }
.footer { margin-top: auto; }
.contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  border-top: 1px solid var(--accent);
  padding-top: 1.4rem;
  font-style: normal;
}
.contact { min-width: 0; }
.contact-link {
  display: inline-block;
  min-height: 2.75rem;
  padding-block: .3rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.contact-link:hover { text-decoration: underline; }
.contact-link--phone { white-space: nowrap; }
.contact-label {
  display: block;
  color: var(--secondary);
  font-size: .875rem;
  letter-spacing: .025em;
  line-height: 1.5;
}
.brand {
  margin-top: 2.25rem;
  color: #a5b4d4;
  font-size: .875rem;
  font-weight: 600;
}
.properties { display: grid; gap: 2px; }
.property {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-width: 0;
  aspect-ratio: 8 / 5;
  background: var(--blue);
}
.property picture { position: absolute; z-index: -2; inset: 0; }
.property img { display: block; width: 100%; height: 100%; object-fit: cover; }
.property--offices img { object-position: 50% 52%; }
.property--retail img { object-position: 50% 55%; }
.property--shopping img { object-position: 50% 58%; }
.property::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgb(23 58 105 / 94%), rgb(23 58 105 / 12%) 80%);
}
.property-caption {
  padding: 1.4rem 1.5rem;
  text-align: right;
}
.property-caption h2 { font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.property-caption p { margin-top: .2rem; color: var(--secondary); font-size: 1rem; line-height: 1.4; }

@media (min-width: 40rem) {
  .information { padding: 3.5rem 6vw 2.5rem; }
  .subtitle { font-size: 1.4rem; }
  .services-list { font-size: 1.25rem; }
  .property { aspect-ratio: 8 / 3; }
  .property-caption { padding-inline: 6vw; }
}

@media (min-width: 64rem) {
  .business-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(100%, 120rem);
    min-height: 100svh;
    margin-inline: auto;
  }
  .information {
    padding: min(4.8vw, 8.5vh, 5.75rem) clamp(2.5rem, 5vw, 6rem) min(3vw, 5.35vh, 3.6rem);
  }
  h1 { font-size: clamp(2rem, min(2.9vw, 5.16vh), 3.5rem); line-height: 1.125; }
  .subtitle {
    margin-top: min(1.45vw, 2.58vh, 1.75rem);
    font-size: clamp(1rem, min(1.5vw, 2.67vh), 1.8rem);
    line-height: 1.4;
  }
  .introduction::after { width: min(4.45vw, 5.35rem); margin-top: min(2.1vw, 3.73vh, 2.5rem); }
  .services { margin-top: min(2.85vw, 5.06vh, 3.42rem); margin-bottom: min(5vw, 8.89vh, 6rem); }
  .services-list {
    gap: min(1.75vw, 3.11vh, 2.1rem);
    padding-left: min(1.4vw, 1.7rem);
    font-size: clamp(1rem, min(1.35vw, 2.4vh), 1.62rem);
    line-height: 1.335;
  }
  .services-list + .services-list { margin-top: min(1.75vw, 3.11vh, 2.1rem); }
  .services-list li { padding-left: min(.13vw, .16rem); }
  .contacts { gap: 1.25rem min(3vw, 3.6rem); padding-top: min(1.75vw, 3.11vh, 2.1rem); }
  .contact-link { font-size: clamp(1rem, min(1.5vw, 2.67vh), 1.8rem); }
  .contact-label { font-size: clamp(.75rem, .83333vw, 1rem); }
  .brand { margin-top: min(2.75vw, 4.89vh, 3.3rem); font-size: clamp(.75rem, .903vw, 1.1rem); }
  .properties { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .property { aspect-ratio: auto; min-height: 0; }
  .property::after {
    background:
      linear-gradient(to right, var(--blue), rgb(23 58 105 / 0%) 25%),
      linear-gradient(to top, rgb(23 58 105 / 90%), rgb(23 58 105 / 8%) 85%);
  }
  .property-caption { padding: min(1.35vw, 2.4vh, 1.62rem) min(2.4vw, 2.9rem); }
  .property-caption h2 { font-size: clamp(1.125rem, min(1.25vw, 2.22vh), 1.5rem); }
  .property-caption p { margin-top: min(.2vw, .25rem); font-size: clamp(.875rem, .975vw, 1.17rem); }
}