@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("./public/fonts/poppins-300.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./public/fonts/poppins-400.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./public/fonts/poppins-500.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./public/fonts/poppins-600.ttf") format("truetype");
}

:root {
  --paper: #ffffff;
  --chart: #f4f8fb;
  --b100: #dce9f2;
  --b200: #b9d6e8;
  --b400: #3b8fcc;
  --ice: #4fa9e0;
  --blue: #00468c;
  --b900: #041826;
  --mute: #5d7385;

  --navy: var(--b900);
  --red: var(--blue);
  --gold: var(--b400);
  --gray: var(--b100);
  --cyan: var(--b400);
  --teal: var(--blue);
  --ink: var(--b900);
  --muted: var(--mute);
  --soft: var(--chart);
  --line: var(--b100);
  --mist: var(--chart);

  --font-latin: "Poppins", system-ui, sans-serif;
  --font-cjk: "Noto Sans SC", "PingFang SC", sans-serif;
  --font-chart: ui-monospace, monospace;
  --t-display: 52px;
  --t-h1: 38px;
  --t-h2: 26px;
  --t-h3: 19px;
  --t-body: 15.5px;
  --t-small: 13px;
  --t-label: 11px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --radius: 2px;
  --border: 1px solid var(--b100);
  --border-strong: 1px solid var(--blue);
  --max-w: 1280px;
  --shadow: none;
  color-scheme: light;
  font-family: var(--font-latin);
}

*,
*::before,
*::after {
  box-shadow: none !important;
}

html {
  background: var(--paper);
}

body {
  color: var(--b900);
  background: var(--paper);
  font-family: var(--font-latin);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.68;
}

body :is(button, input, textarea, select) {
  font-family: inherit;
}

:lang(zh-CN) body,
:lang(zh-CN) p,
:lang(zh-CN) a,
:lang(zh-CN) button,
:lang(zh-CN) input,
:lang(zh-CN) textarea {
  font-family: var(--font-cjk);
  font-size: 0.94em;
  font-weight: 400;
}

:lang(zh-CN) h1,
:lang(zh-CN) h2 {
  font-weight: 500;
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
strong,
b {
  color: var(--b900);
  font-weight: 500;
}

h1 {
  font-size: var(--t-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--t-h3);
  line-height: 1.35;
  letter-spacing: 0;
}

p {
  color: var(--mute);
}

img:not(.brand img),
video {
  border-radius: var(--radius) !important;
}

body img:not([src$=".svg"]):not(.brand img) {
  filter: saturate(0.6);
}

.site-header,
.hero,
.section,
.intro-strip,
.footer {
  width: min(var(--max-w), calc(100% - (var(--s-12) * 2)));
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-8);
  width: 100%;
  height: 66px;
  padding-inline: max(var(--s-12), calc((100% - var(--max-w)) / 2));
  color: var(--b900);
  background: var(--paper);
  border-bottom: var(--border);
  backdrop-filter: none;
}

.brand {
  gap: var(--s-3);
  color: var(--b900);
  font-weight: 500;
  letter-spacing: 0;
}

.brand img {
  width: 72px;
  height: 48px;
  filter: none;
}

.brand span {
  color: var(--b900);
  font-size: var(--t-body);
  font-weight: 500;
}

.primary-nav {
  gap: var(--s-1);
  color: var(--mute);
  font-size: var(--t-small);
  font-weight: 400;
}

.primary-nav > a,
.nav-item > a {
  min-height: 66px;
  padding-inline: var(--s-2);
  color: var(--mute);
  border-bottom: 2px solid transparent;
}

.primary-nav > a:hover,
.primary-nav > a:focus-visible,
.nav-item:hover > a,
.nav-item:focus-within > a {
  color: var(--b900);
  border-bottom-color: var(--ice);
}

.nav-submenu-toggle {
  display: none;
}

#legacyNavigationTargets {
  display: none !important;
}

.mega {
  top: 66px;
  width: min(var(--max-w), calc(100vw - (var(--s-12) * 2)));
  max-height: calc(100dvh - 66px);
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  padding: var(--s-6);
  background: var(--paper);
  border: var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.mega a {
  gap: var(--s-2);
  min-height: 0;
  padding: var(--s-4);
  color: var(--b900);
  border: 0;
  border-left: 2px solid transparent;
  border-radius: var(--radius);
}

.mega a:hover,
.mega a:focus-visible {
  color: var(--b900);
  background: var(--chart);
  border-left-color: var(--ice);
  border-top-color: transparent;
}

.mega strong {
  font-size: var(--t-small);
  font-weight: 500;
}

.mega span {
  color: var(--mute);
  font-size: var(--t-small);
  font-weight: 300;
}

.mega-about,
.mega-sectors {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mega-tools {
  grid-template-columns: minmax(260px, 0.5fr);
}

.mega-contact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mega-services {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nav-mega-group {
  min-width: 0;
  padding: var(--s-2);
}

.nav-mega-group h2 {
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-2) var(--s-2);
  color: var(--blue);
  border-bottom: var(--border);
  font-size: var(--t-label);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-mega-group > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nav-mega-group a {
  padding: var(--s-3) var(--s-2);
}

.country-contact-summary {
  margin-bottom: var(--s-12);
  padding: var(--s-8);
  background: var(--chart);
  border: var(--border);
}

.country-contact-summary > h2 {
  margin: var(--s-3) 0 var(--s-1);
}

.country-contact-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.country-contact-blocks a {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4);
  color: var(--b900);
  background: var(--paper);
  border-left: 2px solid var(--ice);
}

.country-contact-blocks small {
  color: var(--mute);
}

.header-actions {
  gap: var(--s-3);
}

.language-switch {
  gap: var(--s-2);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
}

.language-switch button {
  padding: var(--s-2) var(--s-1);
  color: var(--mute);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  font-size: var(--t-small);
  font-weight: 400;
}

.language-switch button.active {
  color: var(--blue);
  background: transparent;
  font-weight: 500;
}

.header-cta {
  display: none;
}

.button,
.header-cta,
.port-detail-link,
.chat-fab,
.chat-form button,
.footer-newsletter button {
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border: 0;
  border-radius: var(--radius);
  font-size: var(--t-body);
  font-weight: 500;
  transition: none;
}

.button:hover,
.header-cta:hover {
  transform: none;
}

.button.primary,
.port-detail-link,
.chat-fab,
.chat-form button {
  color: var(--paper);
  background: var(--blue);
  border-color: var(--blue);
}

.button.secondary,
.button.secondary.light,
.updates-all-link,
.port-detail-link.compact {
  width: max-content;
  min-height: 0;
  padding: 0 0 var(--s-1);
  color: var(--b900);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ice);
  border-radius: 0;
}

.home-v2 main > .intro-strip,
.home-v2 main > .section,
.home-v2 .chat-fab,
.home-v2 .chat-panel {
  display: none !important;
}

.home-v2 main {
  display: grid;
  grid-template-rows: minmax(520px, calc(100dvh - 178px)) 88px;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
}

.home-v2 .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: stretch;
  width: min(var(--max-w), calc(100% - (var(--s-12) * 2)));
  height: 100%;
  min-height: 0;
  margin-inline: auto;
  overflow: visible;
  color: var(--b900);
  background: var(--paper);
  border-left: var(--border);
  border-right: var(--border);
}

.home-v2 .hero-copy {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  max-width: none;
  margin: 0;
  padding: var(--s-20) var(--s-12);
  border-right: var(--border);
}

.home-v2 .kicker,
.home-v2 .hero-chart-head,
.page-pill,
.sub-nav-strip a,
.footer-rich h3 {
  color: var(--blue);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.home-v2 .hero h1 {
  max-width: 640px;
  margin: var(--s-12) 0 var(--s-12);
  color: var(--b900);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.home-v2 .hero-copy > p:not(.kicker) {
  max-width: 560px;
  margin-bottom: var(--s-8);
  color: var(--mute);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.68;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.hero-chart {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  padding: var(--s-8);
  background: var(--chart);
}

.hero-network-image {
  display: flex;
  padding: 0;
}

.hero-network-image .network-chart {
  display: block;
  object-fit: contain;
}

.hero-chart-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-6);
  color: var(--b400);
}

.hero-chart-head > span {
  color: var(--b400);
}

.hero-chart-head strong,
.hero-chart-head strong span,
.hero-chart-head strong b {
  color: var(--b400);
  font: inherit;
}

.network-chart {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.network-chart .coast {
  fill: var(--paper);
  stroke: var(--blue);
  stroke-width: 1.5;
}

.network-chart .depth-lines path {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.network-chart .depth-lines path:nth-child(1) { stroke: var(--b100); }
.network-chart .depth-lines path:nth-child(2) { stroke: var(--b100); }
.network-chart .depth-lines path:nth-child(3) { stroke: var(--b200); }
.network-chart .depth-lines path:nth-child(4) { stroke: var(--b400); }

.network-chart .port line {
  stroke: var(--b200);
  stroke-width: 1;
}

.network-chart .port circle:first-of-type {
  fill: var(--paper);
  stroke: var(--ice);
  stroke-width: 1;
}

.network-chart .port circle:last-of-type {
  fill: var(--ice);
  stroke: none;
}

.network-chart .port text {
  fill: var(--mute);
  font-family: var(--font-chart);
  font-size: 9px;
  letter-spacing: 0;
}

.network-chart .port a:hover text,
.network-chart .port a:focus text {
  fill: var(--blue);
}

.home-film {
  display: block;
  width: min(var(--max-w), calc(100% - (var(--s-12) * 2)));
  margin: 0 auto;
  overflow: hidden;
}

.home-film video {
  width: 100%;
  height: 88px;
  object-fit: cover;
  object-position: center;
  background: var(--chart);
  border: var(--border);
}

.section {
  padding-block: var(--s-20);
}

.sub-main {
  background: var(--paper);
}

.sub-hero {
  min-height: 360px;
  padding: var(--s-20) max(var(--s-12), calc((100% - var(--max-w)) / 2));
  color: var(--b900);
  background: var(--chart);
  border-bottom: var(--border);
}

.sub-hero::before {
  display: none;
}

.sub-hero h1,
.sub-hero p {
  color: var(--b900);
}

.sub-hero h1 {
  max-width: 760px;
  font-size: var(--t-h1);
}

.sub-hero > p:last-child {
  max-width: 760px;
  color: var(--mute);
}

.sub-nav-strip {
  background: var(--paper);
  border-bottom: var(--border);
}

.sub-nav-strip a {
  color: var(--mute);
}

.sub-nav-strip a:hover,
.sub-nav-strip a:focus-visible {
  color: var(--b900);
  border-bottom: 2px solid var(--ice);
}

:is(.about-cards article, .sector-grid a, .tool-grid a, .updates-list a, .responsibility-grid article, .sub-card, .location-card, .location-metrics p, .location-lists article, .related-location-grid a, .tracking-form, .contact-form, .tracking-result, .port-panel, .page-contact-band, .service-detail, .service-family-tab) {
  color: var(--b900);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
}

:is(.sector-grid a, .tool-grid a, .updates-list a, .sub-card, .location-card):hover {
  transform: none;
  border-color: var(--blue);
}

.service-family-tabs {
  gap: var(--s-3);
}

.service-tabs button {
  border-radius: var(--radius);
}

.service-tabs button.active {
  color: var(--paper);
  background: var(--blue);
  border-color: var(--blue);
}

.service-detail,
.tools-section,
.responsibility-section {
  color: var(--b900);
  background: var(--chart);
}

.service-detail :is(h3, p, a),
.tools-section :is(h2, h3, p) {
  color: var(--b900);
}

.home-service-links a {
  color: var(--b900);
  background: var(--paper);
  border: var(--border);
}

input,
textarea,
select {
  color: var(--b900);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--ice);
  border-color: var(--blue);
}

.footer,
.footer-rich {
  width: 100%;
  max-width: none;
  padding: var(--s-16) max(var(--s-12), calc((100% - var(--max-w)) / 2)) var(--s-8);
  color: var(--paper);
  background: var(--blue);
  border-top: 0;
}

.footer :is(strong, h3, p, a),
.footer-rich :is(strong, h3, p, a) {
  color: var(--paper);
}

.footer-rich {
  grid-template-columns: minmax(220px, 1.1fr) repeat(3, minmax(140px, 0.62fr)) minmax(240px, 0.9fr);
  gap: var(--s-8);
}

.footer-rich.footer-sitemap-mode {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 3.28fr);
  gap: var(--s-12);
}

.footer-sitemap {
  display: grid;
  grid-template-columns: 0.86fr 1.4fr 0.72fr 0.86fr 1fr;
  gap: var(--s-8);
  align-items: start;
}

.footer-nav-group summary {
  display: block;
  margin-bottom: var(--s-4);
  color: var(--paper);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  list-style: none;
  pointer-events: none;
  text-transform: uppercase;
}

.footer-nav-group summary::-webkit-details-marker {
  display: none;
}

.footer-nav-group > div,
.footer-service-group {
  display: grid;
  gap: var(--s-2);
}

.footer-nav-group a {
  color: var(--b100);
  font-size: var(--t-small);
  font-weight: 300;
  line-height: 1.45;
}

.footer-nav-group a:hover,
.footer-nav-group a:focus-visible {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-service-group + .footer-service-group {
  margin-top: var(--s-4);
}

.footer-service-group h4 {
  margin: 0 0 var(--s-1);
  color: var(--paper);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-rich.footer-sitemap-mode .footer-brand strong {
  font-size: var(--t-h3);
  font-weight: 500;
}

.footer-rich.footer-sitemap-mode .footer-brand p {
  color: var(--b100);
  font-size: var(--t-small);
  font-weight: 300;
  line-height: 1.6;
}

.footer-rich.footer-sitemap-mode .footer-legal {
  grid-column: 1 / -1;
}

.footer-rich nav,
.footer-newsletter,
.footer-brand {
  gap: var(--s-3);
}

.footer-newsletter input {
  color: var(--b900);
  background: var(--paper);
  border: 0;
}

.footer-newsletter button {
  color: var(--blue);
  background: var(--paper);
}

.footer-legal {
  gap: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--b400);
}

@media (max-width: 1180px) {
  .site-header {
    gap: var(--s-4);
  }

  .primary-nav {
    font-size: var(--t-label);
  }

  .primary-nav > a,
  .nav-item > a {
    padding-inline: var(--s-1);
  }

  .footer-rich {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-rich.footer-sitemap-mode {
    grid-template-columns: 1fr;
  }

  .footer-sitemap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 1180px) {
  .nav-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .nav-submenu-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    align-self: center;
    color: var(--blue);
    background: transparent;
    border: 0;
    font-size: 22px;
  }

  .mega {
    grid-column: 1 / -1;
  }

  .nav-item:hover .mega,
  .nav-item:focus-within .mega {
    display: none;
  }

  .nav-item.is-open .mega,
  .nav-item.is-open:hover .mega,
  .nav-item.is-open:focus-within .mega {
    display: grid;
  }

  .nav-item.is-open .nav-submenu-toggle {
    transform: none;
  }

  .mega-about,
  .mega-sectors,
  .mega-tools,
  .mega-contact,
  .mega-services,
  .nav-mega-group > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .site-header,
  .hero,
  .section,
  .intro-strip,
  .footer,
  .home-v2 .hero,
  .home-film {
    width: calc(100% - (var(--s-6) * 2));
  }

  .site-header {
    width: 100%;
    padding-inline: var(--s-6);
  }

  .home-v2 main {
    display: block;
    padding-bottom: 0;
  }

  .menu-toggle {
    display: grid;
    justify-self: end;
    order: 2;
  }

  .menu-toggle span {
    background: var(--b900);
  }

  .header-actions {
    justify-self: end;
  }

  .primary-nav {
    top: 66px;
    padding: var(--s-6);
    color: var(--b900);
    background: var(--paper);
    border-bottom: var(--border);
  }

  .primary-nav > a,
  .nav-item > a {
    min-height: 48px;
    color: var(--b900);
  }

  .nav-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .nav-submenu-toggle {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    align-self: center;
    color: var(--blue);
    background: transparent;
    border: 0;
    font-size: 22px;
  }

  .mega {
    position: static;
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    transform: none;
  }

  .nav-item:hover .mega,
  .nav-item:focus-within .mega {
    display: none;
  }

  .nav-item.is-open .mega,
  .nav-item.is-open:hover .mega,
  .nav-item.is-open:focus-within .mega {
    display: grid;
  }

  .nav-item.is-open .nav-submenu-toggle {
    transform: none;
  }

  .mega-about,
  .mega-sectors,
  .mega-tools,
  .mega-contact,
  .mega-services,
  .nav-mega-group > div {
    grid-template-columns: 1fr;
  }

  .nav-mega-group {
    padding: var(--s-2) 0;
  }

  .home-v2 .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .home-v2 .hero-copy {
    padding: var(--s-16) var(--s-6);
    border-right: 0;
    border-bottom: var(--border);
  }

  .home-v2 .hero h1 {
    margin-block: var(--s-8);
    font-size: var(--t-h1);
  }

  .network-chart {
    min-height: 420px;
  }

  .home-film {
    margin-block: var(--s-3) var(--s-6);
  }

  .home-film video {
    height: 72px;
  }

  .footer-rich {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .brand span {
    display: none;
  }

  .language-switch button {
    padding-inline: var(--s-1);
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--s-6);
  }

  .hero-chart {
    padding: var(--s-4);
  }

  .hero-chart-head {
    flex-direction: column;
    gap: var(--s-2);
  }

  .network-chart {
    min-height: 340px;
  }

  .home-film {
    margin-block: var(--s-3) var(--s-6);
  }

  .home-film video {
    height: 56px;
  }

  .footer-rich {
    grid-template-columns: 1fr;
    padding-inline: var(--s-6);
  }

  .footer-rich.footer-sitemap-mode {
    gap: var(--s-8);
  }

  .footer-sitemap {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--b400);
  }

  .footer-nav-group {
    border-bottom: 1px solid var(--b400);
  }

  .footer-nav-group summary {
    display: flex;
    margin-bottom: 0;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    color: var(--paper);
    cursor: pointer;
    font-size: var(--t-small);
    font-weight: 500;
    list-style: none;
    pointer-events: auto;
    text-transform: uppercase;
  }

  .footer-nav-group summary::-webkit-details-marker {
    display: none;
  }

  .footer-nav-group summary::after {
    content: "+";
    font-size: 20px;
    font-weight: 300;
  }

  .footer-nav-group[open] summary::after {
    content: "−";
  }

  .footer-nav-group > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3) var(--s-4);
    padding: var(--s-2) 0 var(--s-6);
  }

  .footer-service-group + .footer-service-group {
    margin-top: 0;
  }

  .footer-service-group h4 {
    grid-column: 1 / -1;
  }

  .footer-rich.footer-sitemap-mode .footer-legal {
    gap: var(--s-3) var(--s-5);
  }

  .footer-legal {
    grid-column: 1;
  }

  .country-contact-summary {
    padding: var(--s-6);
  }

  .country-contact-blocks {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Full-site light system -------------------------------------------------- */

:root {
  --porcelain: var(--paper);
  --line-warm: var(--b100);
  --akita-red: var(--blue);
}

main:not(.home-v2 main) {
  background: var(--paper);
}

.chat-fab,
.chat-panel {
  display: none !important;
}

.section,
.sub-tool-module,
.tracking-result-main,
.service-detail-hero,
.case-detail-hero,
.location-detail-hero,
.careers-hero,
.vacancy-hero,
.survey-hero,
.platform-hero {
  width: min(var(--max-w), calc(100% - (var(--s-12) * 2)));
  max-width: var(--max-w);
}

.article-hero,
.sub-hero {
  min-height: 0;
  padding: var(--s-20) max(var(--s-12), calc((100% - var(--max-w)) / 2));
  color: var(--b900);
  background: var(--chart);
  border-bottom: var(--border);
}

.article-hero :is(h1, h2, h3, p, a, span),
.sub-hero :is(h1, h2, h3, p, a, span) {
  color: var(--b900);
}

.article-hero h1,
.sub-hero h1,
.careers-hero h1,
.vacancy-hero h1,
.service-detail-hero h1,
.sector-detail-hero h1,
.survey-hero h1,
.case-detail-hero h1,
.location-detail-hero h1,
.platform-hero h1,
.tracking-result-intro h1 {
  max-width: 820px;
  margin-block: var(--s-4);
  color: var(--b900);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.article-hero p,
.sub-hero p,
.careers-hero p,
.vacancy-hero p,
.service-detail-hero p,
.sector-detail-hero p,
.survey-hero p,
.case-detail-hero p,
.location-detail-hero p,
.platform-hero p,
.tracking-result-intro > div > p {
  max-width: 760px;
  color: var(--mute);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.68;
}

.article-back,
.location-detail-hero > a,
.vacancy-hero .article-back {
  margin-bottom: var(--s-6);
  color: var(--blue);
  font-weight: 500;
}

.article-hero-image {
  margin-top: var(--s-8);
  border: var(--border);
}

.article-hero-image img {
  max-height: 360px;
  filter: saturate(0.6);
}

.advisory-list-hero {
  display: grid;
  align-content: center;
  gap: var(--s-4);
  min-height: 300px;
}

.advisory-list-hero h1,
.events-heading h2 {
  max-width: 820px;
  font-size: var(--t-h1);
  line-height: 1.15;
}

.sub-nav-strip {
  width: min(var(--max-w), calc(100% - (var(--s-12) * 2)));
  margin: 0 auto;
  padding: var(--s-3) 0;
  border: 0;
  border-bottom: var(--border);
}

.sub-nav-strip a {
  padding: var(--s-2) var(--s-3);
  background: transparent;
  font-weight: 500;
}

:is(
  .sub-aside,
  .sub-dark-band,
  .contact-direct-panel,
  .article-meta,
  .locations-map-panel,
  .location-desk-card,
  .careers-working-card,
  .survey-aside,
  .case-feature
) {
  color: var(--b900);
  background: var(--chart);
  border: var(--border);
  border-radius: var(--radius);
}

:is(
  .sub-aside,
  .sub-dark-band,
  .contact-direct-panel,
  .article-meta,
  .locations-map-panel,
  .location-desk-card,
  .careers-working-card,
  .survey-aside,
  .case-feature
) :is(h1, h2, h3, h4, p, li, span, strong, b, a) {
  color: var(--b900);
}

:is(.sub-aside, .article-meta, .survey-aside, .case-metrics, .service-detail-aside) {
  top: 90px;
  padding: var(--s-6);
}

.sub-layout,
.article-layout,
.service-detail-layout,
.survey-layout,
.case-detail-layout,
.location-detail-layout {
  gap: var(--s-12);
}

.page-pill {
  padding: var(--s-2) var(--s-3);
  color: var(--blue);
  background: var(--chart);
  border: var(--border);
  border-radius: var(--radius);
  font-size: var(--t-label);
  font-weight: 500;
}

.page-contact-band {
  padding: var(--s-8);
  color: var(--b900);
  background: var(--chart);
  border-left: 2px solid var(--blue);
}

.page-contact-band :is(h2, p) {
  color: var(--b900);
}

.page-contact-band .button.primary {
  color: var(--paper);
  background: var(--blue);
  border-color: var(--blue);
}

.sub-dark-band {
  width: 100%;
  max-width: none;
  background: var(--chart);
  border-inline: 0;
}

.sub-dark-band .sub-card,
.service-family-card,
.survey-form,
.case-metrics,
.service-detail-aside,
.article-ops,
.legal-body li,
.tracking-grid p,
.tracking-result-card,
.tracking-empty,
.tool-demo-panel,
.tool-demo-panel p {
  color: var(--b900);
  background: var(--chart);
  border: var(--border);
  border-radius: var(--radius);
}

.sub-feature-card {
  align-items: start;
}

.sub-feature-card img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.article-ops,
.legal-body li {
  border-left: 2px solid var(--blue);
}

.article-body p,
.case-detail-body p,
.service-detail-body > p,
.event-card p,
.event-card li {
  color: var(--b900);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.68;
}

.event-card,
.case-index-card,
.career-value-card,
.career-job-card,
.platform-card,
.news-index-card,
.visual-sub-card,
.service-index-card,
.contact-route-card {
  color: var(--b900);
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
}

:is(.event-card, .case-index-card, .career-job-card, .contact-route-card):hover {
  transform: none;
  background: var(--paper);
  border-color: var(--blue);
}

.events-section {
  gap: var(--s-6);
}

.events-heading {
  align-items: center;
  gap: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: var(--border);
}

.events-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.event-card {
  min-height: 280px;
  gap: var(--s-4);
  padding: var(--s-6);
}

.event-card h3,
.advisory-card h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--b900);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.event-card span,
.event-card time,
.event-card strong,
.advisory-card-meta {
  color: var(--b400);
  font-size: var(--t-small);
  font-weight: 500;
}

.advisory-card {
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 0;
  min-height: 220px;
  max-height: 240px;
  padding: 0;
}

.advisory-card img {
  width: 160px;
  height: 100%;
  min-height: 220px;
  max-height: 240px;
  object-fit: cover;
  filter: saturate(0.6);
}

.advisory-card > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-6);
}

.advisory-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.advisory-card .button {
  min-height: 0;
  margin-top: auto;
  padding: 0 0 var(--s-1);
  color: var(--b900);
  background: transparent;
  border-bottom: 2px solid var(--ice);
}

.tracking-mode label,
.location-card-metrics span {
  border: var(--border);
  border-radius: var(--radius);
}

.service-detail-hero,
.case-detail-hero,
.survey-hero {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 0;
  padding: var(--s-12) 0 var(--s-20);
}

.service-detail-hero > div,
.case-detail-hero > div,
.survey-hero > div {
  min-height: 420px;
  padding: var(--s-12);
  color: var(--b900);
  background: var(--chart);
  border: var(--border);
}

.service-detail-hero :is(h1, p),
.case-detail-hero :is(h1, p),
.survey-hero :is(h1, p) {
  color: var(--b900);
}

.service-detail-hero img,
.case-detail-hero img,
.survey-hero img {
  min-height: 420px;
  max-height: 420px;
  border: var(--border);
  border-left: 0;
  filter: saturate(0.6);
}

.sector-detail-hero {
  padding-top: var(--s-12);
}

.service-process {
  gap: var(--s-3);
}

.service-process-card {
  display: grid;
  grid-template-rows: 160px auto;
  min-height: 0;
  color: var(--b900);
  background: var(--paper);
  border: var(--border);
}

.service-process-card img {
  min-height: 160px;
  max-height: 160px;
  opacity: 1;
  filter: saturate(0.6);
}

.service-process-card::after {
  display: none;
}

.service-process-card figcaption {
  position: static;
  padding: var(--s-4);
  color: var(--b900);
  font-size: var(--t-small);
  font-weight: 500;
}

.careers-hero,
.vacancy-hero,
.location-detail-hero,
.platform-hero {
  gap: var(--s-8);
  min-height: 0;
  padding: var(--s-12) 0 var(--s-20);
}

.careers-hero img,
.vacancy-hero img,
.location-detail-hero img {
  border: var(--border);
  filter: saturate(0.6);
}

.career-value-card {
  min-height: 260px;
  padding: var(--s-6);
}

.career-job-card div,
.platform-card-body {
  padding: var(--s-6);
}

.platform-main {
  background: var(--paper);
}

.platform-hero aside {
  padding: var(--s-6);
  background: var(--chart);
  border: var(--border);
  border-radius: var(--radius);
}

.platform-hero aside span,
.platform-card-body > span {
  color: var(--b400);
  font-size: var(--t-small);
  font-weight: 500;
}

.platform-hero aside strong,
.platform-card h3 {
  color: var(--b900);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.25;
}

.platform-card {
  min-height: 360px;
  background: var(--paper);
}

.platform-card-media {
  min-height: 360px;
  background: var(--chart);
}

.platform-card-media img[src$=".svg"] {
  background: var(--chart);
}

.platform-card p,
.platform-card li {
  color: var(--mute);
  font-size: var(--t-body);
  font-weight: 300;
}

.locations-map-panel img {
  filter: none;
}

.location-card,
.news-index-card {
  min-height: 220px;
}

.location-card h2,
.case-index-card h2,
.career-job-card h3 {
  font-size: var(--t-h2);
  font-weight: 500;
}

.tracking-result-main {
  padding-block: var(--s-12) var(--s-20);
}

.tracking-result-intro {
  gap: var(--s-12);
}

@media (max-width: 920px) {
  .section,
  .sub-tool-module,
  .tracking-result-main,
  .service-detail-hero,
  .case-detail-hero,
  .location-detail-hero,
  .careers-hero,
  .vacancy-hero,
  .survey-hero,
  .platform-hero,
  .sub-nav-strip {
    width: calc(100% - (var(--s-6) * 2));
  }

  .article-hero,
  .sub-hero {
    padding: var(--s-16) var(--s-6);
  }

  .sub-layout,
  .article-layout,
  .service-detail-layout,
  .survey-layout,
  .case-detail-layout,
  .location-detail-layout,
  .tracking-result-intro,
  .careers-hero,
  .vacancy-hero,
  .location-detail-hero,
  .platform-hero {
    grid-template-columns: 1fr;
  }

  :is(.sub-aside, .article-meta, .survey-aside, .case-metrics, .service-detail-aside, .contact-direct-panel, .locations-map-panel, .location-desk-card) {
    position: static;
  }

  .events-grid {
    grid-template-columns: 1fr;
  }

  .advisory-card {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .advisory-card img {
    width: 180px;
  }

  .service-detail-hero,
  .case-detail-hero,
  .survey-hero {
    grid-template-columns: 1fr;
  }

  .service-detail-hero img,
  .case-detail-hero img,
  .survey-hero img {
    min-height: 300px;
    max-height: 300px;
    border-left: var(--border);
    border-top: 0;
  }

  .news-index-card > img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .locations-map-panel {
    min-height: 0;
  }

  .locations-map-panel img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: contain;
  }

  .platform-card-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .platform-card-media img {
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .events-heading,
  .page-contact-band {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .events-heading {
    display: grid;
  }

  .events-heading .button,
  .page-contact-band .button {
    width: max-content;
  }

  .advisory-card {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 200px;
    max-height: 220px;
  }

  .advisory-card img {
    width: 112px;
    min-height: 200px;
    max-height: 220px;
  }

  .advisory-card > div {
    gap: var(--s-2);
    padding: var(--s-4);
  }

  .advisory-card p {
    -webkit-line-clamp: 2;
  }

  .service-process,
  .career-values-grid,
  .careers-job-grid,
  .vacancy-detail-layout {
    grid-template-columns: 1fr;
  }
}