/* RAUTOL Orientation Gate brand system */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .52rem;
  letter-spacing: -.055em;
}

.brand-mark {
  display: block;
  flex: 0 0 auto;
  width: 2.06rem;
  height: 2.06rem;
}

.footer-layout .wordmark {
  gap: .46rem;
}

.footer-layout .brand-mark {
  width: 1.92rem;
  height: 1.92rem;
}

.wordmark-header {
  gap: .58rem;
  letter-spacing: -.055em;
}

.wordmark-name {
  display: block;
}

.header-tagline {
  display: block;
  color: #4a5360;
  font: 700 .46rem/1 var(--mono);
  letter-spacing: .07em;
  white-space: nowrap;
}

.language-picker button {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}

.lang-flag {
  display: block;
  flex: 0 0 auto;
  width: 1rem;
  height: .72rem;
  border: 1px solid rgba(8, 11, 15, .18);
  border-radius: 1px;
  object-fit: cover;
}

/* Solid strokes keep English display headings legible over the imagery. */
html[data-language="en"] h1,
html[data-language="en"] h2 {
  font-family: "RAUTOL Inter", sans-serif;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.055em;
}

html[data-language="en"] h1 em,
html[data-language="en"] h2 em {
  font-style: normal;
}

@media (max-width: 380px) {
  html[data-language="en"] h1 {
    font-size: 14.5vw;
  }

  html[data-language="en"] .contact-copy h2 {
    font-size: 14vw;
  }
}

html[data-language="ja"] {
  --sans: "RAUTOL Noto Sans JP", "RAUTOL Inter", sans-serif;
  --serif: "RAUTOL Noto Sans JP", sans-serif;
  --mono: "RAUTOL Noto Sans JP", monospace;
}

html[data-language="zh"] {
  --sans: "RAUTOL Noto Sans SC", "RAUTOL Inter", sans-serif;
  --serif: "RAUTOL Noto Sans SC", sans-serif;
  --mono: "RAUTOL Noto Sans SC", monospace;
}

html[data-language="ko"] {
  --sans: "RAUTOL Noto Sans KR", "RAUTOL Inter", sans-serif;
  --serif: "RAUTOL Noto Sans KR", sans-serif;
  --mono: "RAUTOL Noto Sans KR", monospace;
}

.lang-label-short {
  display: none;
}

.contact-copy > .contact-person {
  max-width: none;
  margin: 1.45rem 0 0;
  color: var(--ink);
  font: 700 .75rem/1.35 var(--mono);
  letter-spacing: .1em;
}

.contact-person span {
  color: var(--blue);
}

.contact-copy .contact-person + .contact-direct {
  margin-top: 1.2rem;
}

@media (max-width: 640px) {
  .brand-mark {
    width: 1.88rem;
    height: 1.88rem;
  }

  .header-tagline {
    font-size: .39rem;
  }
}

@media (max-width: 980px) {
  .site-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    height: auto;
    min-height: 75px;
    padding-block: 16px;
  }

  .wordmark-header {
    flex: 0 0 auto;
  }

  .language-picker {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  .language-picker button {
    gap: .22rem;
  }

  .lang-label-long {
    display: none;
  }

  .lang-label-short {
    display: inline;
  }
}

@media (max-width: 600px) {
  .site-header {
    min-height: 68px;
  }
}

/* Footer architecture */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #080b0f;
}

.site-footer::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, #155bff 0 26%, rgba(78, 125, 255, .22) 56%, transparent 82%);
  content: "";
}

.footer-layout {
  display: block;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.1fr .9fr .94fr;
  gap: clamp(2.3rem, 7vw, 7rem);
  padding: 4.7rem 0 3.7rem;
}

.footer-layout .footer-top p {
  margin: 0;
}

.footer-brand,
.footer-contact,
.footer-partner {
  min-width: 0;
}

.footer-brand .wordmark {
  font-size: 1.68rem;
}

.footer-brand .brand-mark {
  width: 2.18rem;
  height: 2.18rem;
}

.footer-layout .footer-top .footer-tagline {
  margin-top: 1.25rem;
  color: #d9dee8;
  font: 700 clamp(1.28rem, 2vw, 1.78rem)/1.02 var(--sans);
  letter-spacing: -.055em;
}

.footer-layout .footer-top .footer-kicker {
  margin-bottom: 1.12rem;
  color: #8caaff;
  font: 700 .62rem/1.25 var(--mono);
  letter-spacing: .15em;
}

.footer-layout .footer-top .footer-contact {
  display: block;
  color: inherit;
  font-size: inherit;
}

.footer-contact-list {
  display: grid;
  gap: .68rem;
  color: #d5d9df;
  font-size: .9rem;
}

.footer-layout .footer-top .footer-contact-list .footer-contact-person {
  margin: 0 0 .08rem;
  color: #fff;
  font: 700 .78rem/1.35 var(--mono);
  letter-spacing: .1em;
}

.footer-contact-person span {
  color: #4e7dff;
}

.footer-layout .footer-top .footer-contact-list a {
  width: max-content;
  max-width: 100%;
  border-bottom: 1px solid #707985;
  padding-bottom: .18rem;
  transition: color .2s, border-color .2s;
}

.footer-contact-list a:hover {
  border-color: #4e7dff;
  color: #fff;
}

.footer-contact-list span {
  color: #9ba3ae;
  font-size: .78rem;
}

.footer-stone-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.7rem;
  min-width: min(100%, 15.4rem);
  border: 1px solid #3d4652;
  background: #11151c;
  padding: .86rem 1rem .86rem 1.06rem;
  color: #f7f7f4;
  font: 800 .9rem/1 var(--sans);
  letter-spacing: -.025em;
  transition: border-color .2s, background .2s, transform .2s;
}

.footer-stone-link span:last-child {
  color: #76a0ff;
  font-size: 1.06rem;
}

.footer-stone-link:hover {
  border-color: #4e7dff;
  background: #182644;
  transform: translateY(-2px);
}

.footer-layout .footer-top .footer-partner-copy {
  margin-top: .95rem;
  max-width: 17rem;
  color: #9ba3ae;
  font: 400 .78rem/1.55 var(--sans);
}

.footer-layout > .footer-bottom.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  border-top: 1px solid #2b323c;
  padding: 1.16rem 0 1.28rem;
  color: #8f98a4;
}

.footer-layout > .footer-bottom.footer-bottom p {
  margin: 0;
  font: 700 .59rem/1.4 var(--mono);
  letter-spacing: .08em;
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2.4rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2.35rem;
    padding: 3.3rem 0 2.8rem;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-layout > .footer-bottom.footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 0 1.15rem;
  }

  .footer-stone-link {
    width: 100%;
  }
}