:root {
  --charcoal: #393939;
  --home-grey: #616161;
  --ink: #2f2f2f;
  --muted: #666;
  --line: #d8d8d8;
  --icon: #666;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: #fff;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: .75; }

.site-nav {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 clamp(28px, 8vw, 150px);
  gap: 34px;
  font-size: 14px;
  font-weight: 400;
}
.site-nav a { padding-bottom: 5px; }
.site-nav a[aria-current="page"] { border-bottom: 1px solid currentColor; }

.logo {
  display: inline-block;
  padding: 8px 16px 6px;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .16em;
  text-indent: .16em;
  white-space: nowrap;
}
.logo-dark { background: #000; color: #fff; }
.logo-light { background: #fff; color: #373737; }

.rule-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(17px, 1.45vw, 24px);
  white-space: nowrap;
}
.rule-title::before,
.rule-title::after {
  content: "";
  width: 34px;
  height: 2px;
  background: #999;
}

/* HOME */
.home-page { background: var(--home-grey); color: #fff; min-height: 100vh; }
.home-page .site-nav {
  background: var(--charcoal);
  color: #fff;
}
.home-main {
  min-height: calc(100vh - 74px - 225px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px 24px 92px;
}
.home-brand { text-align: center; transform: translateY(-18px); }
.home-tagline {
  margin: 28px 0 0;
  font-size: clamp(22px, 2vw, 31px);
  font-weight: 300;
}
.language-choices {
  margin-top: 145px;
  display: flex;
  justify-content: center;
  gap: clamp(88px, 12vw, 150px);
}
.language-choice { text-align: center; min-width: 160px; }
.language-choice p { margin: 0 0 14px; font-size: 15px; }
.flag {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.home-footer {
  min-height: 225px;
  background: var(--charcoal);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 38px 24px;
}
.home-footer p { margin: 0 0 32px; font-size: 14px; }
.home-footer .email { font-size: clamp(21px, 2vw, 30px); font-weight: 400; }

/* SERVICE PAGES */
.services-page { min-height: 100vh; background: #fff; }
.services-header { text-align: center; padding: 28px 24px 0; }
.services-header .rule-title { margin-top: 22px; }
.services-shell {
  width: min(930px, calc(100% - 48px));
  margin: 0 auto;
  padding: 154px 0 70px;
  text-align: center;
}
.lead {
  margin: 0 auto 34px;
  max-width: 720px;
  font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: .25em;
  line-height: 1.95;
  font-weight: 300;
}
.services-title {
  margin: 0 0 32px;
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 300;
  letter-spacing: .12em;
}
.service-grid {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 45px 8px 34px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.service-card { display: flex; flex-direction: column; align-items: center; }
.service-icon { width: 120px; height: 120px; color: var(--icon); }
.service-card p {
  margin: 18px 0 0;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.55;
  color: #555;
}
.contact-block { padding-top: 36px; }
.contact-block .prompt { margin: 0 0 31px; font-size: 13px; color: #666; }
.contact-block .email { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 400; }

@media (max-width: 760px) {
  .site-nav {
    height: auto;
    min-height: 66px;
    padding: 18px 22px;
    gap: 22px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .home-main { min-height: auto; padding: 100px 20px 90px; }
  .language-choices { margin-top: 100px; gap: 45px; }
  .language-choice { min-width: 115px; }
  .home-footer { min-height: 190px; }
  .services-header { padding-top: 38px; }
  .services-shell { padding-top: 100px; }
  .service-grid { grid-template-columns: 1fr 1fr; gap: 42px 20px; }
  .service-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .site-nav { gap: 16px; font-size: 13px; }
  .logo { font-size: 27px; padding-left: 11px; padding-right: 11px; }
  .home-tagline { font-size: 21px; }
  .language-choices { gap: 22px; }
  .flag { width: 62px; height: 62px; }
  .services-shell { width: min(100% - 30px, 930px); }
  .service-grid { grid-template-columns: 1fr; }
  .service-card:last-child { grid-column: auto; }
  .lead { letter-spacing: .16em; }
}