/* GML - shared components used by every page (home + inner):
   nav search button, search overlay, News & Events banner.
   Palette tokens come from the page (:root in index.html / inner.css). */

/* ---- NAV: search button + News & Events ---- */
.nav__search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; margin-left: 4px;
  border: 0; border-radius: 10px; padding: 0; cursor: pointer;
  background: transparent; color: #fff;
  transition: background 0.25s;
}
.nav__search:hover { background: rgba(255, 255, 255, 0.12); }
.nav__search svg { width: 18px; height: 18px; }
.nav__search--m { display: none; margin-left: auto; }
@media (max-width: 1180px) { .nav__search--m { display: inline-flex; } }

/* ---- SEARCH OVERLAY ---- */
.search {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6, 9, 15, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 96px 20px 24px;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.search.open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.search__panel {
  width: 100%; max-width: 720px; max-height: calc(100svh - 140px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  transform: translateY(-8px); transition: transform 0.35s var(--ease);
}
.search.open .search__panel { transform: none; }
.search__form { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.search__form svg { width: 20px; height: 20px; flex: none; color: var(--blue-deep); }
.search__input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 18px; color: var(--ink);
}
.search__input::placeholder { color: var(--soft); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__close {
  flex: none; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer;
  font-family: var(--label-font); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted);
  padding: 6px 10px;
}
.search__close:hover { border-color: var(--ink); color: var(--ink); }
.search__body { overflow-y: auto; padding: 10px 10px 14px; }
.search__label {
  margin: 10px 12px 8px; font-family: var(--label-font); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-deep);
}
.search__tabs { display: flex; align-items: center; gap: 4px; margin: 4px 6px 8px; border-bottom: 1px solid var(--line); }
.search__tabs [role="tab"] {
  position: relative; border: 0; background: none; cursor: pointer; padding: 10px 8px 11px; margin-bottom: -1px;
  font-family: var(--label-font); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft);
  border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.search__tabs[hidden] { display: none; }
.search__tabs [role="tab"]:hover { color: var(--blue-deep); }
.search__tabs [role="tab"][aria-selected="true"] { color: var(--blue-deep); border-bottom-color: var(--red); }
.search__clear { margin-left: auto; border: 0; background: none; cursor: pointer; padding: 8px; font-family: inherit; font-size: 13px; color: var(--muted); }
.search__clear:hover { color: var(--red); }
.search__recent { display: flex !important; align-items: center; gap: 12px; }
.search__recent .search__title { margin-top: 0; font-weight: 600; }
.search__clock { width: 18px; height: 18px; flex: none; color: var(--soft); }
.search__results { list-style: none; margin: 0; padding: 0; }
.search__results a {
  display: block; padding: 12px 14px; border-radius: 10px; color: var(--ink);
  transition: background 0.15s;
}
.search__results a:hover, .search__results a[aria-selected="true"] { background: var(--paper, #F4F4F4); }
.search__page { display: block; font-family: var(--label-font); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-deep); }
.search__title { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.search__snip { display: block; margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.search mark { background: none; color: var(--red); font-weight: 600; }
.search__empty { margin: 18px 14px; font-size: 15px; color: var(--muted); }
.search__foot { margin: 0; padding: 12px 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--soft); }
.search__foot kbd { font-family: var(--label-font); font-size: 11px; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); }
.search-lock { overflow: hidden; }
@media (max-width: 720px) {
  .search { padding: 72px 12px 12px; }
  .search__form { padding: 14px 16px; }
  .search__input { font-size: 16px; }
  .search__foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .search, .search__panel { transition: none; }
}

/* ---- NEWS & EVENTS: event banner (electronica 2026) ----
   Co-branded with electronica and modelled on the show's own campaign banner (Sigal, Round 2 + Round 3): electronica
   logo top-left, the PCB globe bottom-left, "Visit us / at electronica 2026" on two lines, GML + booth in a white
   circle cut by the top-right corner, green and red wave lines top-left and bottom-right. Green on the home page,
   white (.evt--light) on /news-events. The greens, the globe and the waves are electronica's campaign assets and live
   ONLY inside this banner; GML keeps its logo on white. */
.evt {
  --circle: clamp(270px, 26vw, 370px);
  /* circle offset (fractions of its size, cut by the top-right corner) and the electronica logo box - the GML logo
     inside the circle sits on the same centre line as the electronica logo (Haim, 4.10) */
  --c-top: -0.27; --c-right: -0.19;
  --brand-top: 44px; --brand-h: clamp(36px, 3.3vw, 46px);
  --gml-w: calc(var(--circle) * 0.48);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) calc(var(--circle) * (1 + var(--c-right)));
  min-height: clamp(430px, 36vw, 480px);
  background: radial-gradient(130% 150% at 0% 0%, #7DBF46 0%, #64A23C 38%, #4D8634 70%, #3F7530 100%);
  color: #fff; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(11, 21, 36, 0.18);
  scroll-margin-top: 110px;
}
.evt__waves { position: absolute; z-index: 0; height: auto; pointer-events: none; overflow: visible; }
.evt__waves path { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.evt__waves .r { stroke: var(--red); }
.evt__waves .b { stroke: rgba(255, 255, 255, 0.28); }
/* top-left lines: drawn in a 100x100 box stretched over the gap between the electronica logo and the headline -
   they drop from the top edge, then sweep out to the left edge below the logo, never under "Visit us" (Haim, 4.10) */
.evt__waves--tl { top: 0; left: 0; width: 26%; height: 46%; }
.evt__waves--br { right: 0; bottom: 0; width: 46%; }
.evt__art { position: relative; padding: var(--brand-top) 0 0 48px; }
.evt__brand { position: relative; z-index: 2; display: block; height: var(--brand-h); width: auto; }
.evt__globe {
  position: absolute; z-index: 1; left: 0; bottom: -6%; width: 134%; max-width: none; height: auto; pointer-events: none;
  /* the photo's flat green backdrop fades out, so only the planet sits on the banner */
  -webkit-mask-image: radial-gradient(ellipse 62% 112% at 34% 100%, #000 62%, transparent 92%);
          mask-image: radial-gradient(ellipse 62% 112% at 34% 100%, #000 62%, transparent 92%);
}
.evt__main { position: relative; z-index: 2; align-self: center; padding: 56px 20px 56px 0; }
.evt__title { margin: 0; color: #fff; }
.evt__title b { display: block; font-size: clamp(56px, 6.2vw, 96px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; }
.evt__title span { display: block; margin-top: 10px; font-size: clamp(28px, 3vw, 46px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.evt__facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
.evt__facts li { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: #fff; }
.evt__facts svg { width: 18px; height: 18px; color: #fff; flex: none; }
/* stacked, equal width ("Get a Free Visitor Pass / Book a Meeting" is too long to share a row; Round 5: it leads, as the filled button) */
.evt__ctas { margin-top: 30px; display: grid; grid-template-columns: max-content; gap: 12px; }
.evt__ctas .btn { padding: 15px 26px; justify-content: center; text-align: center; }
.evt__btn { background: #fff; color: var(--ink); }
.evt__btn:hover { background: var(--paper, #F4F4F4); } /* the home page has no --paper token */
.evt .btn--ghost { border-color: rgba(255, 255, 255, 0.7); }
.evt .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.evt__booth {
  position: absolute; z-index: 2; top: calc(var(--circle) * var(--c-top)); right: calc(var(--circle) * var(--c-right));
  width: var(--circle); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  /* top: the GML logo's centre lands on the electronica logo's centre (logo.png is 750x230 -> half height = 0.1533w);
     sides: content centred on the part of the circle left visible by the banner's right edge.
     (padding % would follow the banner width, hence calc) */
  padding: calc(var(--brand-top) + var(--brand-h) / 2 - var(--gml-w) * 0.1533 - var(--circle) * var(--c-top))
           calc(var(--circle) * (0.1 - var(--c-right))) 0 calc(var(--circle) * 0.1);
  background: #fff; color: var(--ink);
  box-shadow: 0 18px 44px rgba(11, 21, 36, 0.22);
}
.evt__gml { display: block; flex: none; width: var(--gml-w); max-width: none; height: auto; }
.evt__spot { flex: none; width: var(--gml-w); margin-top: calc(var(--circle) * 0.045); padding-top: calc(var(--circle) * 0.04); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
.evt__spot > div { text-align: center; }
.evt__spot > div + div { border-left: 1px solid var(--line); }
.evt__spot span { display: block; font-family: var(--label-font); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue-deep); }
.evt__spot b { display: block; margin-top: 6px; font-size: calc(var(--circle) * 0.1); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
/* white version (/news-events): the show's light banner - green haze behind the globe, ink type, GML red CTA */
.evt--light {
  background: radial-gradient(50% 92% at 0% 100%, rgba(125, 191, 70, 0.62) 0%, rgba(125, 191, 70, 0.2) 55%, rgba(125, 191, 70, 0) 100%), #fff;
  color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(11, 21, 36, 0.1);
}
.evt--light .evt__title, .evt--light .evt__facts li, .evt--light .evt__facts svg { color: var(--ink); }
.evt--light .evt__waves path { stroke: #7DBF46; }
.evt--light .evt__waves .r { stroke: var(--red); }
.evt--light .evt__waves .b { stroke: #4D8634; }
.evt--light .evt__booth { border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(11, 21, 36, 0.12); }
@media (max-width: 1100px) {
  .evt { --circle: clamp(250px, 30vw, 310px); --c-top: -0.24; --c-right: -0.17; --brand-top: 40px; grid-template-columns: minmax(0, 1fr) calc(var(--circle) * (1 + var(--c-right))); min-height: 0; }
  .evt__art { grid-column: 1; grid-row: 1; position: static; padding: var(--brand-top) 0 0 44px; }
  /* the planet moves under the circle, mirrored so its cut edge stays on the banner edge */
  .evt__globe { left: auto; right: 0; bottom: -4%; width: calc(var(--circle) * 1.35); transform: scaleX(-1); }
  .evt__main { grid-column: 1; grid-row: 2; padding: 30px 0 44px 44px; }
  .evt__waves--tl { display: none; } /* no room between the logo and the headline in this layout */
  .evt__waves--br { width: 54%; }
}
@media (max-width: 720px) {
  /* phone: electronica logo + circle on top, the copy, then the planet rising from the bottom-left corner */
  .evt { --circle: min(210px, 56vw); --c-top: -0.2; --c-right: -0.16; --brand-top: 24px; --brand-h: 24px; --gml-w: calc(var(--circle) * 0.56); display: block; border-radius: 16px; }
  .evt__art { position: static; height: calc(var(--circle) * (1 + var(--c-top)) + 10px); padding: var(--brand-top) 22px 0; }
  .evt__globe { right: auto; left: 0; bottom: -2%; width: min(74%, 340px); transform: none; }
  .evt__main { padding: 14px 22px 0; }
  .evt__title b { font-size: min(64px, 16vw); }
  .evt__title span { font-size: min(30px, 7.6vw); margin-top: 6px; }
  .evt__facts { margin-top: 20px; flex-direction: column; }
  .evt__facts li { font-size: 15px; }
  .evt__ctas { margin-top: 24px; padding-bottom: min(46vw, 210px); }
  .evt__ctas { grid-template-columns: minmax(0, 1fr); }
  .evt__ctas .btn { width: 100%; justify-content: center; }
  .evt__spot { margin-top: 9px; padding-top: 8px; }
  .evt__spot span { font-size: 11px; letter-spacing: 0.1em; }
  .evt__spot b { font-size: calc(var(--circle) * 0.115); margin-top: 3px; }
  .evt__waves--tl { display: block; width: 64%; height: calc(var(--circle) * (1 + var(--c-top)) + 4px); }
  .evt__waves--br { width: 80%; }
}
@media (max-width: 400px) {
  /* small phones: smaller circle + logo so the two never touch */
  .evt { --circle: min(200px, 54vw); --c-right: -0.12; --brand-h: 20px; }
}

/* Home hero: announcement pill for the upcoming show - electronica green so it stands out on the film (Sigal, Round 3) */
.hero__event {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 24px 12px 16px; border-radius: 999px;
  background: linear-gradient(120deg, #7DBF46 0%, #64A23C 45%, #4D8634 100%);
  box-shadow: 0 10px 30px rgba(6, 9, 15, 0.35);
  font-size: 15.5px; font-weight: 500; color: #fff;
  transition: box-shadow 0.3s, filter 0.3s;
}
.hero__event:hover { filter: brightness(1.06); box-shadow: 0 14px 36px rgba(6, 9, 15, 0.45); }
.hero__event b { font-weight: 700; color: #fff; }
.hero__event-booth { white-space: nowrap; }
.hero__event i { font-style: normal; color: #fff; transition: transform 0.3s var(--ease); }
.hero__event:hover i { transform: translateX(3px); }
.hero__event-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28); flex: none; }
@media (max-width: 720px) {
  /* phones: dot | text | arrow stay on one row; if the text is too long (narrow phone, large text setting) it wraps
     inside its own column instead of pushing the dot and arrow onto separate lines. The right 36px stay free for
     the hero pause button. */
  .hero__event { flex-wrap: nowrap; font-size: 13.5px; gap: 10px; padding: 10px 16px 10px 13px; max-width: calc(100% - 36px); border-radius: 22px; }
  .hero__event > span:not(.hero__event-dot) { min-width: 0; line-height: 1.35; }
  .hero__event i { flex: none; }
  .hero__event-more, .hero__event-lead { display: none; }
}
@media (max-width: 400px) { .hero__event { font-size: 12.5px; } }

/* Contact band: the circuit tree stands on the Alps just right of the form - from the band's top edge down to the
   mountain ridge (Sigal, Round 3) - and the form steps left to make room. tree.svg draws between 9.9% and 90.4% of
   its height, so a 124.4% background height makes the drawing itself span the box top to bottom. */
.cta-band, .contact { --cf-shift: 0px; }
.cta-tree {
  position: absolute; top: 0; bottom: 31%; width: 640px;
  /* trunk ~50px right of the form's edge, never past the viewport edge */
  right: max(-280px, calc(max(48px, (100% - 1320px) / 2 + 48px) + var(--cf-shift) - 370px));
  background: url(tree.svg) no-repeat 50% 50% / auto 124.4%;
  opacity: 0.5; pointer-events: none;
}
@media (min-width: 1181px) {
  .cta-band, .contact { --cf-shift: clamp(0px, calc((100vw - 1240px) * 0.6), 120px); }
  .cform { margin-right: var(--cf-shift); }
  .cta-band__cols > div:first-child, .contact__cols > div:first-child { flex: 1 1 440px; }
}
@media (max-width: 1180px) {
  .cta-tree { bottom: auto; top: 24px; right: -90px; width: 340px; height: 340px; background-size: contain; opacity: 0.26; }
}

/* ---- GML GROUP MAP (dotted world map, palette-only; labels in HTML so they stay crisp) ---- */
.gmap { margin: 0; }
.gmap__stage { position: relative; aspect-ratio: 1600 / 708; }
.gmap__dots, .gmap__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the dots are #DADADA in the file - darkened on light surfaces so the continents read (Sigal, Round 3: too light on phones) */
.gmap__dots { filter: brightness(0.8); }
@media (max-width: 720px) { .gmap__dots { filter: brightness(0.68); } }
.gmap__lines polyline { fill: none; stroke: var(--blue-deep); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* Round 6 (Sigal, 13.10): an arrow from GML in Switzerland to every location, and a red dot like GML's at each arrow end.
   --aw = arrow stroke in map units; the heads scale with it, so their tips land on the pin's edge at every breakpoint. */
.gmap { --aw: 2.4; }
.gmap__pin { fill: var(--red); stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; }
/* Partner pairs (Sigal, 14.10): beside every red GML dot at an arrow end, a second circle in the partner's colour -
   I.O. Logic turquoise (io-logic.png); PSA/GBM in the site blue (Haim, 14.10: not the PSA crimson, too close to GML's red) -
   --blue-deep on the light About map, --blue on the dark home map (index.html overrides, as the pins were before Round 6).
   Same size as the GML dot, shifted east by --po (map units) so they overlap by about a third. Sigal (14.10): the partner circle sits IN FRONT
   (it is drawn after the red dot in the markup); the red dot keeps the arrow end, so its west two thirds stay visible and the arrow still lands on it. */
.gmap { --po: 10px; }
.gmap__pin--co { transform: translateX(var(--po)); }
.gmap__pin--il { fill: #0CC6C4; }
.gmap__pin--net { fill: var(--blue-deep); }
.gmap__arcs path { fill: none; stroke: var(--red); stroke-width: calc(var(--aw) * 1px); stroke-linecap: round; }
.gmap__heads path { fill: var(--red); transform-box: view-box; transform-origin: 0 0; transform: translate(var(--x), var(--y)) rotate(var(--a)) scale(var(--aw)); }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal .gmap__arcs path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease) calc(0.45s + var(--i) * 0.16s); }
  .js .reveal .gmap__heads path { opacity: 0; transition: opacity 0.5s var(--ease) calc(1.45s + var(--i) * 0.16s); }
  .js .reveal.in .gmap__arcs path { stroke-dashoffset: 0; }
  .js .reveal.in .gmap__heads path { opacity: 1; }
}
.gmap__ring { fill: none; stroke: var(--red); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .gmap__ring { animation: gmapPulse 2.6s var(--ease) infinite; }
}
@keyframes gmapPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.2); opacity: 0; } }
.gmap__label {
  position: absolute; left: var(--x); top: var(--y); transform: translateY(-50%); margin: 0;
  display: flex; flex-direction: column; gap: 3px; white-space: nowrap;
}
.gmap__label--end { transform: translate(-100%, -50%); text-align: right; align-items: flex-end; }
/* PSA/GBM plate (Round 4): logos shown once for China, Taiwan and Malaysia - anchored by its bottom edge, where the pin lines end */
.gmap__label--net { transform: translateY(-100%); gap: 8px; align-items: flex-start; } /* Round 6 (Michal, 12.10): only the PSA | GBM lockup - the separate PSA mark is gone */
.gmap__label b, .gmap__legend b { font-size: clamp(12px, 1.05vw, 15px); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.gmap__label span, .gmap__legend span { font-family: var(--label-font); font-size: clamp(9.5px, 0.78vw, 11px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-deep); }
.gmap__legend { display: none; }
/* company logos at each location (Sigal, Round 3: "as in the previous map design"); white-ink versions on the dark home map */
.gmap__label { gap: 7px; padding: 8px 12px 9px; border-radius: 10px; background: rgba(255, 255, 255, 0.94); }
/* doubled class: the About map card sets `.group-map img { width: 100% }`.
   Rafi (15.10): the logo-to-country gap is ONE rule for every plate (the 7px gap above) - but the I.O. Logic artwork carries an
   empty band under its icon, left of the "Technology for Life" tagline (31% of the file height), so its "Israel" line read twice
   as far away. --trim on the <img> = that empty share of the artwork, taken back out of the gap (0 for GML and PSA/GBM). */
.gmap .gmap__logo { --s: 1; display: block; height: calc(var(--lh, 26px) * var(--s)); width: auto; max-width: none; margin-bottom: calc(var(--lh, 26px) * var(--s) * var(--trim, 0) * -1); }
@media (max-width: 1180px) { .gmap .gmap__logo { --s: 0.82; } }
/* the labels need the full desktop map: from 1000px down (the PSA/GBM plate no longer fits beside Israel) the legend takes over.
   Romain/Sigal (11.10): the legend logos read too small next to the country names and felt detached from the map - logos now at
   their desktop size, country names smaller, and every legend dot has the colour of its pin (red since Round 6, 13.10).
   Sigal (14.10): the red + brand-colour PAIR stays on the map pins only - each legend row carries ONE dot: red for GML,
   turquoise for I.O. Logic, blue for PSA/GBM. */
@media (max-width: 1000px) {
  .gmap { --aw: 3.7; --po: 17px; }
  .gmap__lines polyline, .gmap__label { display: none; }
  .gmap__pin { r: 12px; stroke-width: 2; }
  .gmap__pin--hq, .gmap__ring { r: 15px; }
  .gmap__legend { display: block; }
  .gmap__legend ul { list-style: none; margin: 18px 0 0; padding: 0 22px; display: flex; flex-wrap: wrap; gap: 22px 56px; }
  .gmap__legend li { --mk: 24px; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding-left: 26px; }
  .gmap__legend li.is-hq { --mk: 30px; }
  .gmap__legend li.is-il { --mk: 23px; } /* = its logo height (Rafi, 15.10: 27 -> 23px), keeps the dot on the logo's centre line */
  .gmap__legend li::before { content: ""; position: absolute; left: 0; top: calc(var(--mk) / 2 - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
  .gmap__legend li.is-il::before { background: #0CC6C4; } /* I.O. Logic turquoise, as its map circle */
  .gmap__legend li.is-net::before { background: var(--blue-deep); } /* PSA/GBM site blue, as its map circle (the dark home map overrides to --blue in index.html) */
  .gmap .gmap__legend .gmap__logo { --s: 1; }
  .gmap__legend li.is-net { --mk: min(19px, 5.4vw); }
  .gmap .gmap__legend li.is-net .gmap__logo { height: min(var(--lh, 19px), 5.4vw); }
  .gmap__legend span { font-size: 10.5px; letter-spacing: 0.12em; }
}
@media (max-width: 720px) {
  .gmap__legend ul { flex-direction: column; gap: 16px; margin-top: 14px; padding: 0 4px; }
}
@media (max-width: 820px) {
  /* China and Taiwan sit 36 map units apart - 17 keeps their pins from overlapping */
  .gmap { --aw: 4.8; --po: 24px; }
  .gmap__pin { r: 17px; }
  .gmap__pin--hq, .gmap__ring { r: 28px; }
}
@media (max-width: 560px) { .gmap { --aw: 5.6; } }

/* ---- INTRO LOADER: black screen, GML mark + a red line filling, then the site fades in (first page of a visit) ----
   The markup carries style="display:none", so without this stylesheet the loader can never show unstyled. */
.intro .intro-loader {
  display: flex !important; position: fixed; inset: 0; z-index: 1000; background: var(--dark);
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.7s;
}
.intro-loader img { width: auto; height: clamp(44px, 6vw, 64px); opacity: 0; animation: introIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards; }
.intro-loader i { position: relative; width: 120px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.intro-loader i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; animation: introBar 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; }
.intro.intro-done .intro-loader { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes introIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes introBar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .intro-loader img { animation: none; opacity: 1; }
  .intro-loader i::after { animation: none; transform: none; }
}