@font-face {
  font-family: Archivo;
  src: url("assets/Archivo.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --ink: #161c25;
  --sub: #515b63;
  --paper: #fcfcfa;
  --line: #d6d9d8;
  --red: #bf1835;
  --red-hover: #9f1130;
  --night: #191e27;
  --gutter: clamp(20px,4.6vw,84px);
  --sans: Archivo,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-synthesis: weight;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body, h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
a, button, input, select, textarea { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none!important; }
:focus-visible { outline: 3px solid #bf2541; outline-offset: 4px; }
::selection { background: #b31b35; color: #fff; }
.icon { display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: middle; }
.wrap { width: min(1344px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.skip { position: absolute; transform: translateY(-180%); z-index: 30; top: 10px; left: var(--gutter); padding: 10px 18px; color: var(--ink); background: #fff; }
.skip:focus { transform: translateY(0); }
#main-start:focus { outline: none; }
.top { z-index: 10; position: relative; color: var(--ink); background: #fff; border-bottom: 1px solid var(--line); }
.head-in { height: 76px; display: flex; align-items: center; gap: clamp(20px,4.5vw,64px); }
.brand { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.brand .mark { width: 42px; height: 39px; object-fit: contain; }
.wordmark { display: grid; gap: 5px; }
.wordmark b { font: 740 26px/.92 Archivo,sans-serif; letter-spacing: -.06em; }
.wordmark small { font-size: 9px; line-height: 1; font-weight: 500; letter-spacing: .04em; }
.nav { display: flex; align-self: stretch; margin-left: auto; gap: clamp(19px,2.4vw,38px); }
.nav a { position: relative; display: inline-flex; align-items: center; color: var(--sub); font-size: 14px; font-weight: 520; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a[aria-current]::after { content:""; position: absolute; height: 3px; width: 20px; background: var(--red); left: 0; bottom: 0; }
.head-actions { display: flex; align-items: center; gap: 7px; }
.head-contact { background: var(--ink); color: #fff; display: inline-flex; align-items: center; gap: 14px; padding: 0 16px; min-height: 39px; font-size: 14px; font-weight: 530; white-space: nowrap; }
.head-contact .icon { width: 14px; height: 14px; }
.head-contact:hover { background: var(--red); }
.nav-switch { display: none; border: 0; color: var(--ink); background: transparent; width: 42px; height: 44px; padding: 10px; }
.nav-switch .icon { width: 22px; height: 22px; }
.nav-switch .icon:nth-child(2), .nav-switch[aria-expanded="true"] .icon:first-child { display: none; }
.nav-switch[aria-expanded="true"] .icon:nth-child(2) { display: inline-block; }
.foot { background: var(--night); color: #fff; padding-top: clamp(34px,4.4vw,70px); }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.foot-top { display: grid; align-items: start; grid-template-columns: 1.1fr 2fr; gap: 30px; padding-bottom: clamp(35px,4vw,64px); }
.foot-top .brand { justify-self: start; }
.foot-top .brand small { color: #d2d6db; }
.foot-map { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(18px,3vw,45px); }
.foot-map > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.foot-map h2 { margin-bottom: 5px; font-size: 14px; line-height: 1.4; font-weight: 650; }
.foot-map a { color: #c3c9cf; font-size: 14px; line-height: 1.6; }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid #485059; padding-block: 17px; color: #bac1c8; font-size: 12px; }
.foot-base span:last-child { display: flex; align-items: center; gap: 6px; }
.foot-base .icon { width: 13px; height: 13px; }
@media (max-width: 900px) {
  .head-in { gap: 18px; }
  .nav { gap: 18px; }
  .head-contact { padding-inline: 12px; }
}
@media (max-width: 800px) {
  .head-in { height: 64px; justify-content: space-between; }
  .brand .mark { width: 35px; height: 34px; }
  .wordmark b { font-size: 23px; }
  .wordmark small { font-size: 8.5px; }
  .nav-switch { display: inline-flex; align-items: center; justify-content: center; }
  .nav { display: none; position: absolute; z-index: 11; left: 0; right: 0; top: 100%; padding: 8px var(--gutter) 16px; margin: 0; flex-flow: column; gap: 0; border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px #161c2514; background: #fff; }
  .nav.open { display: flex; }
  .nav a { min-height: 46px; border-top: 1px solid var(--line); padding: 0 6px; }
  .nav a[aria-current] { color: var(--red); }
  .nav a[aria-current]::after { display: none; }
  .head-contact { min-height: 35px; font-size: 13px; }
}
@media (max-width: 620px) {
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .foot-map { gap: 10px; grid-template-columns: 1.2fr 1.15fr .75fr; }
  .foot-map a { font-size: 13px; }
  .foot-base { font-size: 11px; }
}
@media (prefers-reduced-motion:no-preference) {
  html { scroll-behavior: smooth; }
  a, button { transition: color .16s ease, border-color .16s ease, background-color .16s ease; }
}
@media (max-width: 370px) {
  .head-in { gap: 8px; }
  .brand { gap: 5px; }
  .brand .mark { width: 29px; }
  .wordmark b { font-size: 21px; }
  .head-contact { padding-inline: 10px; }
  .head-contact .icon { display: none; }
  .head-actions { gap: 3px; }
}