/* v22: alternate composition and lighter typography.
   The v21 stylesheet is retained unchanged for comparison.
   No fonts, external libraries, or new network dependencies are required. */
:root {
  --interface-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --header-height: 86px;
  /* 1518 / 1782: the non-Antarctic portion of the original map. */
  --map-crop-ratio: .8518518519;
}

body {
  font-family: var(--interface-font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font-family: inherit; }
.topbar { height: var(--header-height); flex: 0 0 var(--header-height); }
.brand-lockup { overflow: visible; }
.brand-name {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: .008em;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}
.top-actions { flex: 0 0 auto; }
.top-cta, .modal-cta {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .01em;
  white-space: nowrap;
}
.top-cta { padding: 13px 22px; }
.lang-btn { font-weight: 600; font-size: 11px; letter-spacing: .055em; }

/* Map and cards are now consecutive items, not independently positioned layers.
   Retain v21's rendering scale for the remaining map pixels: the frame height is
   shortened by exactly the removed Antarctic portion. */
.page-home { min-height: 100vh; min-height: 100svh; }
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
  padding: 4px 0 22px;
  overflow: visible;
}
.world-map {
  position: relative;
  display: block;
  left: auto;
  top: auto;
  bottom: auto;
  transform: none;
  flex: 0 0 auto;
  width: min(1240px, 92vw);
  max-width: none;
  height: calc((100vh - var(--header-height) - 122px) * var(--map-crop-ratio));
  height: calc((100svh - var(--header-height) - 122px) * var(--map-crop-ratio));
  min-height: 200px;
  margin: 0;
  /* Keep the same projection/scaling as v21, without stretching the crop to
     fill the removed continent's old area. */
  object-fit: fill;
  opacity: .96;
}
.rolebar {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  transform: none;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(1000px, 90vw);
  margin: 12px auto 0;
  gap: 10px;
  overflow: visible;
  padding: 0;
}
.role {
  width: auto;
  min-width: 0;
  min-height: 98px;
  padding: 8px 7px;
  gap: 5px;
}
.role b {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .005em;
  overflow-wrap: normal;
  hyphens: manual;
}
.role-icon { width: 46px; height: 46px; }

/* The service panel keeps its existing fixed header / scrollable list / CTA. */
.product-modal { padding: 30px 36px 26px; }
.modal-kicker, .eyebrow {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .15em;
}
.modal-kicker { margin: 0 44px 0 0; flex: 0 0 auto; }
.product-modal h2 {
  font-size: 27px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: 10px 38px 10px 0;
  flex: 0 0 auto;
}
.modal-lead {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  margin-bottom: 18px;
  flex: 0 0 auto;
}
.service-list { flex: 1 1 auto; min-height: 0; margin-bottom: 20px; }
.service-item { padding: 12px 0; }
.service-item b { font-size: 15px; line-height: 1.4; font-weight: 500; }
.service-item span { font-size: 13px; line-height: 1.5; font-weight: 400; }
.modal-cta { padding: 13px 22px; }
.close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  top: 12px;
  right: 12px;
}

/* Smaller, calmer headings without making form text or labels tiny. */
.request-wrap h2 {
  font-size: clamp(28px, 3.25vw, 40px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.018em;
  margin: 18px 0 22px;
}
.request-lead { font-size: 18px; line-height: 1.7; font-weight: 400; }
label { font-size: 14px; line-height: 1.35; font-weight: 500; }
input, textarea { font-size: 16px; line-height: 1.45; font-weight: 400; }
form button { font-size: 16px; line-height: 1.4; font-weight: 500; letter-spacing: .01em; }
footer { font-size: 14px; line-height: 1.5; }
footer span { font-weight: 400; line-height: 1.5; }

@media (orientation: landscape) and (min-width: 700px) and (max-width: 1100px) {
  :root { --header-height: 74px; }
  .brand-name { font-size: 12px; font-weight: 500; line-height: 1.35; }
  .top-cta { font-size: 12px; padding: 12px 16px; }
  .world-map {
    width: 96vw;
    height: calc((100vh - var(--header-height) - 108px) * var(--map-crop-ratio));
    height: calc((100svh - var(--header-height) - 108px) * var(--map-crop-ratio));
    min-height: 160px;
  }
  .rolebar { width: 95vw; gap: 8px; margin-top: 10px; }
  .role { min-height: 92px; padding: 7px 5px; gap: 5px; }
  .role-icon { width: 40px; height: 40px; }
  .role b { font-size: 12px; line-height: 1.25; font-weight: 500; }
}

/* Portrait tablet: explicit 3+2, in normal flow, attached to the cropped map. */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1100px) {
  :root { --header-height: 78px; }
  .brand-name { font-size: 12px; line-height: 1.35; font-weight: 500; }
  .top-cta { padding: 12px 16px; font-size: 12px; }
  .hero { height: auto !important; min-height: 0 !important; padding: 4px 0 24px !important; }
  .world-map {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    margin: 0 !important;
    object-fit: contain !important;
  }
  .rolebar {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: min(850px, 94vw) !important;
    margin: 12px auto 0 !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .role { min-height: 100px !important; padding: 8px 6px !important; gap: 5px !important; }
  .role:nth-child(1) { grid-column: 1 / span 2; }
  .role:nth-child(2) { grid-column: 3 / span 2; }
  .role:nth-child(3) { grid-column: 5 / span 2; }
  .role:nth-child(4) { grid-column: 2 / span 2; }
  .role:nth-child(5) { grid-column: 4 / span 2; }
  .role-icon { width: 42px !important; height: 42px !important; }
  .role b { font-size: 13px; font-weight: 500; line-height: 1.3; }
}

@media (orientation: landscape) and (max-height: 720px) {
  .product-modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 18px 26px; }
  .product-modal h2 { font-size: 24px; margin: 6px 40px 7px 0; line-height: 1.22; }
  .modal-kicker { font-size: 10px; }
  .modal-lead { font-size: 14px; line-height: 1.4; margin-bottom: 12px; }
  .service-list { margin-bottom: 14px; }
  .service-item { padding: 9px 0; }
  .service-item b { font-size: 14px; line-height: 1.35; }
  .service-item span { font-size: 12.5px; line-height: 1.4; }
  .modal-cta { padding: 12px 20px; }
  .close { right: 10px; top: 8px; }
}

@media (max-width: 599px) {
  .topbar {
    height: auto;
    min-height: 100px;
    flex-basis: auto;
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .brand-lockup { width: 100%; gap: 10px; }
  .brand-mark { width: 46px; height: 42px; }
  .brand-name { font-size: 12px; line-height: 1.35; max-width: none; }
  .top-actions { width: 100%; justify-content: flex-end; gap: 10px; }
  .top-cta { padding: 10px 15px; font-size: 12px; }
  .lang-btn { font-size: 10px; padding: 8px; }
  .hero { min-height: 0; height: auto; padding: 4px 0 22px; }
  .world-map { position: relative; top: auto; width: 100%; height: auto; min-height: 0; object-fit: contain; }
  .rolebar { width: 94vw; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin: 12px auto 0; }
  .role { min-height: 102px; padding: 8px 4px; gap: 6px; }
  .role:nth-child(1) { grid-column: 1 / span 2; }
  .role:nth-child(2) { grid-column: 3 / span 2; }
  .role:nth-child(3) { grid-column: 5 / span 2; }
  .role:nth-child(4) { grid-column: 2 / span 2; }
  .role:nth-child(5) { grid-column: 4 / span 2; }
  .role b { font-size: 11px; line-height: 1.25; }
  .role-icon { width: 38px; height: 38px; }
  .modal-backdrop { padding: 12px; }
  .product-modal { width: 100%; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 20px; }
  .product-modal h2 { font-size: 22px; line-height: 1.25; }
  .modal-lead { font-size: 14px; }
  .service-item b { font-size: 14px; }
  .service-item span { font-size: 13px; }
  .request-lead { font-size: 16px; }
  .request-wrap form { margin-top: 32px; }
  .request-wrap h2 { font-size: 28px; }
}

/* Keep keyboard navigation visible; respect the user's motion preference. */
button:focus-visible, a:focus-visible { outline: 2px solid #008e79; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .role, .lang-btn { transition: none; }
  .product-modal { animation: none; }
}