/* ==========================================================================
   global-market-hours.css
   The prototype design for /global-market-hours, ported from
   update/MarketHour/royce-global-market-hours.html.

   EVERYTHING IS SCOPED UNDER .gmh — the <main class="gmh"> wrapper. The
   prototype styled html, body, .container, .btn and .eyebrow at the top level
   and carried its own header and footer; none of that is here. The host page
   owns html/body, the shared partials own the chrome (NFR-07), and the two
   generic class names are renamed (.gmh-wrap, .gmh-eyebrow) so Bootstrap's
   .container and css/buttons.css never collide with them.

   Type: the prototype loaded Marcellus and Inter from Google Fonts. Neither
   came across. The sans stack is 'Ping AR + LT', the site's self-hosted face,
   which is also what covers Arabic (NFR-10); the serif stack falls back to
   system faces, so nothing is fetched. Under RTL the serif is repointed at the
   site face too — Georgia has no Arabic glyphs — and every letter-spacing is
   zeroed, because tracking breaks Arabic letter joining.

   Direction: written in logical properties wherever a block mirrors. The
   exceptions are deliberate and physical: the 24-hour timeline, the overlap
   tracks and the activity tracks are time axes that read left-to-right in
   both languages, so those containers pin direction: ltr and keep their
   left/right offsets.

   Palette: the brand tokens are the BRD §9.1 values the prototype already
   used. The surface, line, status and elevation scales below are the page's
   own extensions of that system and stay local to .gmh.

   Fixed navbar: the hero reserves --nav-h (set by css/royce-header.css) above
   its own padding, and the sticky timezone bar sits under the bar rather than
   at the viewport top.

   Theme: the prototype was dark only. The light set below it (September
   2026) is the site's own — Ivory White ground, white cards, Royce Black
   type, deep gold for gold-as-text — gated on html[data-bs-theme='light']
   like every other page sheet. Nothing after the two token blocks names a
   theme: every surface, wash and tint reads a token.
   ========================================================================== */

.gmh {
  /* brand */
  --royce-black: #111111;
  --royce-navy: #0b1628;
  --royce-gold: #d6a61c;
  --royce-gold-hover: #e6be4a;
  --royce-ivory: #f8f8f8;
  --royce-grey: #2e3137;
  --royce-platinum: #c8c8c8;
  --line-dark: rgba(214, 166, 28, 0.26);
  --gmh-max-w: 1240px;

  /* surface scale — background → section → card → raised */
  --gmh-void: #05080e;
  --gmh-band: #090f1a;
  --gmh-ink: #0b1628;
  --gmh-card: #101927;
  --gmh-card-2: #0c1420;
  --gmh-raised: #16202f;

  /* lines */
  --gmh-line: rgba(255, 255, 255, 0.085);
  --gmh-line-soft: rgba(255, 255, 255, 0.05);
  --gmh-line-strong: rgba(255, 255, 255, 0.16);

  /* type */
  --gmh-txt: #f6f8fb;
  --gmh-txt-2: #afb9c8;
  --gmh-mute: #7c8798;
  --gmh-serif: Georgia, 'Times New Roman', 'Iowan Old Style', 'Palatino Linotype', serif;
  --gmh-sans: 'Ping AR + LT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* status */
  --gmh-ok: #41a87e;
  --gmh-ok-soft: rgba(65, 168, 126, 0.16);
  --gmh-pending: #d6a61c;
  --gmh-info: #6e8cb5;

  /* radius */
  --r-xl: 24px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-xs: 8px;
  --r-pill: 999px;

  /* elevation — soft, wide, low opacity */
  --sh-1: 0 2px 6px rgba(0, 0, 0, 0.3);
  --sh-2: 0 18px 44px -20px rgba(0, 0, 0, 0.72), 0 2px 8px rgba(0, 0, 0, 0.3);
  --sh-3: 0 32px 72px -28px rgba(0, 0, 0, 0.8), 0 4px 14px rgba(0, 0, 0, 0.34);
  --sh-gold: 0 20px 60px -26px rgba(214, 166, 28, 0.34);
  --gmh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.045);

  /* rhythm + motion */
  --gmh-sec-y: 132px;
  --gmh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gmh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-mid: 280ms;
  --t-slow: 400ms;

  /* theme-dependent families, in the same scale as above. Every value that
     is not a brand token or a gold tint reads one of these, so the light set
     below is the only other place a surface, wash or tint is declared. */
  --gmh-wash-rgb: 255, 255, 255; /* hover washes, rules, ticks: ink-on-surface at low alpha */
  --gmh-glass-hi-rgb: 22, 32, 47; /* translucent card gradients, upper stop */
  --gmh-glass-lo-rgb: 12, 20, 32; /* ... lower stop */
  --gmh-void-rgb: 5, 8, 14; /* the page ground as an rgb triplet (sticky bar, tooltips) */
  --gmh-recess: rgba(0, 0, 0, 0.16); /* a row pushed back inside an open month */
  --gmh-hero-hi: #07101e;
  --gmh-hero-mid: #0a1526;
  --gmh-hero-glow: rgba(43, 74, 120, 0.2);
  --gmh-card-hi: #101927;
  --gmh-card-lo: #0a111c;
  --gmh-clock-hi: #0f1826;
  --gmh-clock-lo: #0a111c;
  --gmh-clock-hover-hi: #131e2e;
  --gmh-clock-hover-lo: #0c1421;
  --gmh-feature-hi: #141e2e;
  --gmh-feature-lo: #0c1420;
  --gmh-cap: #1b2434;
  --gmh-cap-in: #0b1220;
  --gmh-disc: #03060b;
  --gmh-ok-text: #6fcca5;
  --gmh-closed: #c6b3a2;
  --gmh-closed-rgb: 198, 179, 162;
  --gmh-modified: #e0b65c;
  --gmh-modified-rgb: 224, 182, 92;
  /* Gold as a foreground. Brand gold is a fill colour: as text on the light
     surfaces it measures ~2.3:1, so the light set swaps this one token for the
     deep gold the rest of the site uses (#8a6a0f, 4.76:1 on white) and every
     fill keeps --royce-gold. */
  --gmh-gold-text: var(--royce-gold);

  /* the fixed site navbar, a token set by css/royce-header.css */
  --gmh-nav: var(--nav-h);

  display: block;
  background: var(--gmh-void);
  color: var(--gmh-txt);
  font-family: var(--gmh-sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ==========================================================================
   Light theme. Gated on html[data-bs-theme='light'] like css/style.css and
   css/accounts.css. The ground is the site's Ivory White, sections step down
   to a warm off-white and cards lift to white — the same three-step scale the
   dark set uses, inverted. Text is Royce Black / Editorial Grey. Status
   greens and the closed / modified tints are deepened to clear 4.5:1 as text
   on these surfaces; gold fills stay brand gold, gold text goes deep gold.
   Shadows lose most of their weight — on a light page a dark shadow reads as
   dirt, not depth.
   ========================================================================== */
html[data-bs-theme='light'] .gmh {
  --gmh-void: #f8f8f8;
  --gmh-band: #f1efea;
  --gmh-ink: #ffffff;
  --gmh-card: #ffffff;
  --gmh-card-2: #f6f4ef;
  --gmh-raised: #ffffff;

  --gmh-line: rgba(17, 17, 17, 0.1);
  --gmh-line-soft: rgba(17, 17, 17, 0.06);
  --gmh-line-strong: rgba(17, 17, 17, 0.2);
  /* the gold hairline needs more alpha to stay visible against ivory, as the
     header edge does in css/style.css */
  --line-dark: rgba(214, 166, 28, 0.42);

  --gmh-txt: #111111;
  --gmh-txt-2: rgba(46, 49, 55, 0.84);
  --gmh-mute: #5f6673;

  --gmh-ok: #2e8f68;
  --gmh-ok-soft: rgba(46, 143, 104, 0.14);
  --gmh-pending: #8a6a0f;
  --gmh-info: #3f5f8c;

  --sh-1: 0 2px 6px rgba(17, 17, 17, 0.06);
  --sh-2: 0 18px 44px -20px rgba(17, 17, 17, 0.18), 0 2px 8px rgba(17, 17, 17, 0.05);
  --sh-3: 0 32px 72px -28px rgba(17, 17, 17, 0.22), 0 4px 14px rgba(17, 17, 17, 0.06);
  --sh-gold: 0 20px 60px -26px rgba(214, 166, 28, 0.24);
  --gmh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --gmh-wash-rgb: 17, 17, 17;
  --gmh-glass-hi-rgb: 255, 255, 255;
  --gmh-glass-lo-rgb: 246, 244, 239;
  --gmh-void-rgb: 248, 248, 248;
  --gmh-recess: rgba(17, 17, 17, 0.035);
  --gmh-hero-hi: #f1efea;
  --gmh-hero-mid: #f6f4f0;
  --gmh-hero-glow: rgba(43, 74, 120, 0.08);
  --gmh-card-hi: #ffffff;
  --gmh-card-lo: #f4f2ed;
  --gmh-clock-hi: #ffffff;
  --gmh-clock-lo: #f3f1ec;
  --gmh-clock-hover-hi: #ffffff;
  --gmh-clock-hover-lo: #ece9e2;
  --gmh-feature-hi: #fdfcfa;
  --gmh-feature-lo: #f0ede6;
  --gmh-cap: #ffffff;
  --gmh-cap-in: #e6e2d9;
  --gmh-disc: #f1efea;
  --gmh-ok-text: #1f7a55;
  --gmh-closed: #6b5a49;
  --gmh-closed-rgb: 107, 90, 73;
  --gmh-modified: #8a6a0f;
  --gmh-modified-rgb: 138, 106, 15;
  --gmh-gold-text: #8a6a0f;
}

.gmh *,
.gmh *::before,
.gmh *::after {
  box-sizing: border-box;
}
.gmh img {
  max-width: 100%;
  height: auto;
  display: block;
}
.gmh a {
  color: inherit;
  text-decoration: none;
}
.gmh button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.gmh table {
  border-collapse: collapse;
  width: 100%;
}
.gmh h1,
.gmh h2,
.gmh h3,
.gmh h4 {
  font-family: var(--gmh-serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.004em;
  color: inherit;
}
.gmh p {
  margin: 0;
}
.gmh :focus-visible {
  outline: 2px solid var(--gmh-gold-text);
  outline-offset: 3px;
  border-radius: 2px;
}
.gmh ::selection {
  background: rgba(214, 166, 28, 0.3);
  color: var(--gmh-txt);
}

.gmh-wrap {
  width: 100%;
  max-width: var(--gmh-max-w);
  margin: 0 auto;
  padding-inline: 40px;
}

/* eyebrow — gold rule + label */
.gmh-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gmh-gold-text);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.gmh-eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--royce-gold), rgba(214, 166, 28, 0.15));
}

/* ── Reveal + stagger ──────────────────────────────────────────────────── */
.gmh-anim {
  opacity: 0;
  transform: translateY(22px);
}
.gmh-anim.is-in {
  animation: gmh-rise 0.78s var(--gmh-ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
.gmh-anim-1 {
  --d: 80ms;
}
.gmh-anim-2 {
  --d: 160ms;
}
.gmh-anim-3 {
  --d: 240ms;
}
.gmh-anim-4 {
  --d: 320ms;
}
@keyframes gmh-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

.gmh-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--gmh-ease-out),
    transform 0.7s var(--gmh-ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.gmh-stagger.is-in > * {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   01 — HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.gmh-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--gmh-nav) + 96px) 0 116px;
  background: radial-gradient(115% 85% at 76% 4%, rgba(214, 166, 28, 0.13) 0%, transparent 56%), radial-gradient(80% 70% at 6% 92%, var(--gmh-hero-glow) 0%, transparent 60%), linear-gradient(180deg, var(--gmh-hero-hi) 0%, var(--gmh-hero-mid) 46%, var(--gmh-void) 100%);
}
.gmh-geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 26%, #000 58%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 0%, transparent 26%, #000 58%, #000 100%);
}
.gmh-geo-grid line {
  stroke: rgba(var(--gmh-wash-rgb), 0.055);
  stroke-width: 0.7;
}
.gmh-geo-grid line.is-major {
  stroke: rgba(var(--gmh-wash-rgb), 0.13);
}
.gmh-geo-grid line.is-equator {
  stroke: rgba(var(--gmh-wash-rgb), 0.11);
  stroke-width: 1;
}
.gmh-geo-dot {
  fill: rgba(var(--gmh-wash-rgb), 0.2);
  transition: fill 0.9s var(--gmh-ease);
}
.gmh-geo-halo {
  fill: none;
  stroke: rgba(65, 168, 126, 0);
  stroke-width: 0.9;
  transition: stroke 0.9s var(--gmh-ease);
}
.gmh-geo-lbl {
  font-family: var(--gmh-sans);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  font-weight: 500;
  text-transform: uppercase;
  fill: rgba(var(--gmh-wash-rgb), 0.1);
  transition: fill 0.9s var(--gmh-ease);
}
.gmh-geo-pt.is-open .gmh-geo-dot {
  fill: var(--gmh-ok);
}
.gmh-geo-pt.is-open .gmh-geo-halo {
  stroke: rgba(65, 168, 126, 0.3);
}
.gmh-geo-pt.is-open .gmh-geo-lbl {
  fill: rgba(var(--gmh-wash-rgb), 0.26);
}
.gmh-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 220px;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--gmh-void));
}
.gmh-hero-in {
  max-width: 860px;
}
.gmh-hero h1 {
  font-size: clamp(2.8rem, 5.6vw, 4.75rem);
  line-height: 1.06;
  margin: 0 0 32px;
  letter-spacing: -0.005em;
}
.gmh-hero h1 em {
  font-style: normal;
  color: var(--gmh-gold-text);
}
.gmh-hero-sub {
  font-size: clamp(1.04rem, 1.5vw, 1.24rem);
  line-height: 1.8;
  color: var(--gmh-txt-2);
  max-width: 620px;
}

/* live snapshot — primary card */
.gmh-snap {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  border: 1px solid var(--gmh-line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(155deg, rgba(var(--gmh-glass-hi-rgb), 0.94) 0%, rgba(var(--gmh-glass-lo-rgb), 0.94) 100%);
  box-shadow: var(--sh-3), var(--gmh-inset);
  position: relative;
}
.gmh-snap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 166, 28, 0.6) 22%, rgba(214, 166, 28, 0.6) 78%, transparent);
}
.gmh-snap-cell {
  padding: 40px 44px;
}
.gmh-snap-cell + .gmh-snap-cell {
  border-inline-start: 1px solid var(--gmh-line-soft);
}
.gmh-snap-k {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 600;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.gmh-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gmh-ok);
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px var(--gmh-ok-soft);
}
.gmh-live-dot::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gmh-ok);
  animation: gmh-halo 3.4s var(--gmh-ease) infinite;
}
@keyframes gmh-halo {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  70%,
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
.gmh-snap-n {
  font-family: var(--gmh-serif);
  font-size: 3rem;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--gmh-txt);
}
.gmh-snap-of {
  font-size: 0.84rem;
  color: var(--gmh-mute);
  letter-spacing: 0.03em;
  display: block;
  min-height: 1.4em;
}
.gmh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.gmh-chip {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(65, 168, 126, 0.32);
  background: var(--gmh-ok-soft);
  color: var(--gmh-ok-text);
}
.gmh-chip.is-empty {
  border-style: dashed;
  border-color: var(--gmh-line);
  background: none;
  color: var(--gmh-mute);
}
.gmh-next-name {
  font-family: var(--gmh-serif);
  font-size: 1.8rem;
  line-height: 1.22;
  display: block;
  color: var(--gmh-txt);
}
.gmh-next-meta {
  font-size: 13px;
  color: var(--gmh-mute);
  margin-top: 10px;
  line-height: 1.7;
}
.gmh-next-meta .gmh-zone-lbl {
  opacity: 0.6;
}
.gmh-count {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: var(--gmh-gold-text);
  font-weight: 600;
}
.gmh-hero-fx {
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--gmh-mute);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--gmh-line-soft);
  padding-top: 20px;
}
.gmh-hero-fx b {
  font-weight: 500;
  color: var(--gmh-txt-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMEZONE CONTROL BAR — sticky under the fixed site navbar
   ═══════════════════════════════════════════════════════════════════════════ */
.gmh-tzbar {
  position: sticky;
  top: var(--gmh-nav);
  z-index: 50;
  border-bottom: 1px solid var(--gmh-line-soft);
  background: rgba(var(--gmh-void-rgb), 0.94);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gmh-tzbar {
    background: rgba(var(--gmh-void-rgb), 0.72);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
}
.gmh-tzbar-in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}
.gmh-tz-lab {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 600;
  white-space: nowrap;
}
.gmh-tz-opts {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-sm);
  background: rgba(var(--gmh-wash-rgb), 0.035);
  border: 1px solid var(--gmh-line-soft);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gmh-tz-opts::-webkit-scrollbar {
  display: none;
}
.gmh-tz-opts button {
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--r-xs);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gmh-mute);
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    color var(--t-fast) var(--gmh-ease),
    background var(--t-fast) var(--gmh-ease),
    border-color var(--t-fast) var(--gmh-ease);
}
.gmh-tz-opts button:hover {
  color: var(--gmh-txt);
  background: rgba(var(--gmh-wash-rgb), 0.05);
}
.gmh-tz-opts button[aria-pressed='true'] {
  color: var(--gmh-gold-text);
  background: rgba(214, 166, 28, 0.11);
  border-color: var(--line-dark);
}
.gmh-tz-now {
  margin-inline-start: auto;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--gmh-txt-2);
  white-space: nowrap;
}
.gmh-tz-now span {
  color: var(--gmh-mute);
  letter-spacing: 0.2em;
  font-size: 10px;
  text-transform: uppercase;
  margin-inline-end: 12px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION SCAFFOLD + RHYTHM
   ═══════════════════════════════════════════════════════════════════════════ */
.gmh-sec {
  padding: var(--gmh-sec-y) 0;
  position: relative;
  scroll-margin-top: calc(var(--gmh-nav) + 84px);
}
.gmh-sec-alt {
  background: var(--gmh-band);
  border-top: 1px solid var(--gmh-line-soft);
  border-bottom: 1px solid var(--gmh-line-soft);
}
.gmh-sec-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 55% at 20% 6%, rgba(214, 166, 28, 0.07), transparent 70%);
}
.gmh-sec-glow > .gmh-wrap {
  position: relative;
}

.gmh-head-block {
  max-width: 700px;
  margin-bottom: 84px;
}
.gmh-head-block h2 {
  font-size: clamp(2.15rem, 3.9vw, 3.25rem);
  line-height: 1.14;
  margin: 0 0 26px;
  letter-spacing: -0.004em;
}
.gmh-head-block p {
  color: var(--gmh-txt-2);
  font-size: 1.04rem;
  line-height: 1.82;
}
.gmh-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 84px;
}
.gmh-head-row .gmh-head-block {
  margin-bottom: 0;
}

/* shared status pill */
.gmh-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--gmh-line);
  background: rgba(var(--gmh-wash-rgb), 0.03);
  transition:
    color var(--t-slow) var(--gmh-ease),
    border-color var(--t-slow) var(--gmh-ease),
    background var(--t-slow) var(--gmh-ease);
  white-space: nowrap;
}
.gmh-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  font-style: normal;
  background: transparent;
  border: 1px solid var(--gmh-mute);
  transition:
    background var(--t-slow) var(--gmh-ease),
    border-color var(--t-slow) var(--gmh-ease),
    box-shadow var(--t-slow) var(--gmh-ease);
}
.gmh .is-open .gmh-status {
  color: var(--gmh-ok-text);
  border-color: rgba(65, 168, 126, 0.34);
  background: var(--gmh-ok-soft);
}
.gmh .is-open .gmh-status i {
  background: var(--gmh-ok);
  border-color: var(--gmh-ok);
  box-shadow: 0 0 0 3px var(--gmh-ok-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   02 — GLOBAL MARKET CLOCK MODULE
   One unified module; panels divided by hairline separators (grid gap over a
   line-coloured backdrop) rather than discrete floating cards.
   ═══════════════════════════════════════════════════════════════════════════ */
.gmh-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.gmh-module {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--gmh-line);
  border-radius: var(--r-xl);
  background: radial-gradient(120% 80% at 50% -10%, rgba(214, 166, 28, 0.05), transparent 62%), linear-gradient(168deg, var(--gmh-card-hi) 0%, var(--gmh-card-lo) 100%);
  box-shadow: var(--sh-2), var(--gmh-inset);
}
.gmh-module::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(214, 166, 28, 0.42) 30%, rgba(214, 166, 28, 0.42) 70%, transparent);
}
.gmh-clocks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gmh-line-soft);
}
.gmh-clock {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: 44px 24px 38px;
  background: linear-gradient(180deg, var(--gmh-clock-hi) 0%, var(--gmh-clock-lo) 100%);
  transition: background var(--t-slow) var(--gmh-ease);
}
/* soft radial illumination behind the dial */
.gmh-clock::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 26px;
  left: 50%;
  width: 230px;
  height: 230px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(214, 166, 28, 0.1), transparent 66%);
  opacity: 0;
  transition: opacity 0.8s var(--gmh-ease);
}
.gmh-clock.is-open::before {
  opacity: 1;
}
.gmh-clock:hover {
  background: linear-gradient(180deg, var(--gmh-clock-hover-hi) 0%, var(--gmh-clock-hover-lo) 100%);
}
.gmh-clock:hover::before {
  opacity: 0.6;
}
.gmh-clock.is-open:hover::before {
  opacity: 1;
}

/* ── identity ──────────────────────────────────────────────────────────── */
.gmh-city {
  font-family: var(--gmh-serif);
  font-size: 1.16rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--gmh-txt-2);
  transition: color var(--t-slow) var(--gmh-ease);
}
.gmh-clock.is-open .gmh-city {
  color: var(--gmh-txt);
}
.gmh-mkt-tag {
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 700;
  margin: 0 0 26px;
  direction: ltr;
}

/* ── dial ──────────────────────────────────────────────────────────────── */
.gmh-dial {
  width: 100%;
  max-width: 184px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 30px;
  display: block;
  overflow: visible;
}
.gmh-clock.is-closed .gmh-dial {
  opacity: 0.72;
  transition: opacity 0.8s var(--gmh-ease);
}
.gmh-ring-base,
.gmh-ring-gold {
  fill: none;
  stroke-width: 1.3;
}
.gmh-ring-gold {
  opacity: 0;
  transition: opacity 0.8s var(--gmh-ease);
}
.gmh-clock.is-open .gmh-ring-gold {
  opacity: 0.68;
}
.gmh-clock:hover .gmh-ring-gold {
  opacity: 0.34;
}
.gmh-clock.is-open:hover .gmh-ring-gold {
  opacity: 0.88;
}
.gmh-ring-in {
  fill: none;
  stroke: rgba(var(--gmh-wash-rgb), 0.07);
  stroke-width: 1;
}
.gmh-minutes {
  fill: none;
  stroke: rgba(var(--gmh-wash-rgb), 0.2);
  stroke-width: 1.3;
  stroke-linecap: round;
  transition: stroke 0.8s var(--gmh-ease);
}
.gmh-clock.is-open .gmh-minutes {
  stroke: rgba(var(--gmh-wash-rgb), 0.3);
}
.gmh-arc-ghost {
  fill: none;
  stroke: rgba(214, 166, 28, 0.2);
  stroke-width: 2.4;
  stroke-linecap: butt;
}
.gmh-arc-live {
  fill: none;
  stroke: var(--royce-gold);
  stroke-width: 2.4;
  stroke-linecap: butt;
  filter: drop-shadow(0 0 5px rgba(214, 166, 28, 0.5));
}
.gmh-tick {
  stroke: rgba(var(--gmh-wash-rgb), 0.22);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.gmh-tick-maj {
  stroke: rgba(var(--gmh-wash-rgb), 0.68);
  stroke-width: 2.6;
  stroke-linecap: butt;
}
.gmh-clock.is-open .gmh-tick-maj {
  stroke: var(--gmh-txt);
}
.gmh-hand-h {
  stroke: var(--gmh-txt);
  stroke-width: 3.6;
  stroke-linecap: round;
}
.gmh-hand-m {
  stroke: var(--gmh-txt);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.gmh-hand-s {
  stroke: var(--royce-gold);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.gmh-sec-tail {
  fill: var(--royce-gold);
}
.gmh-cap {
  fill: var(--gmh-cap);
  stroke: rgba(var(--gmh-wash-rgb), 0.5);
  stroke-width: 0.8;
}
.gmh-cap-gold {
  fill: var(--royce-gold);
}
.gmh-cap-in {
  fill: var(--gmh-cap-in);
}

/* ── readout ───────────────────────────────────────────────────────────── */
.gmh-digital {
  font-size: 1.72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.055em;
  line-height: 1;
  margin-bottom: 9px;
  color: var(--gmh-txt);
  direction: ltr;
}
.gmh-digital .gmh-sec-sm {
  font-size: 0.95rem;
  color: var(--gmh-mute);
  letter-spacing: 0.04em;
  font-weight: 400;
}
.gmh-tzabbr {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  margin-bottom: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.gmh-until {
  font-size: 12px;
  color: var(--gmh-mute);
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.gmh-until b {
  font-weight: 600;
  color: var(--gmh-txt-2);
}

/* soon-to-open state */
.gmh .is-soon .gmh-status {
  color: var(--gmh-gold-text);
  border-color: var(--line-dark);
  background: rgba(214, 166, 28, 0.1);
}
.gmh .is-soon .gmh-status i {
  background: var(--royce-gold);
  border-color: var(--gmh-gold-text);
  box-shadow: 0 0 0 3px rgba(214, 166, 28, 0.14);
}

/* ── module legend ─────────────────────────────────────────────────────── */
.gmh-module-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 26px;
  font-size: 11px;
  color: var(--gmh-mute);
}
.gmh-module-note .gmh-key i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--gmh-mute);
}
.gmh-module-note .gmh-key-live i {
  background: var(--gmh-ok);
  border-color: var(--gmh-ok);
  box-shadow: 0 0 0 3px var(--gmh-ok-soft);
}
.gmh-module-cap {
  margin-inline-start: auto;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 400;
  max-width: 52ch;
  text-align: end;
}
.gmh-rail {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   03 — 24-HOUR TIMELINE  (a time axis: stays left-to-right in both languages)
   ═══════════════════════════════════════════════════════════════════════════ */
.gmh-tl {
  border: 1px solid var(--gmh-line);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(var(--gmh-glass-hi-rgb), 0.72), rgba(var(--gmh-glass-lo-rgb), 0.72));
  box-shadow: var(--sh-2), var(--gmh-inset);
  padding: 52px 48px 44px;
  position: relative;
}
.gmh-tl-scale,
.gmh-tl-body {
  direction: ltr;
}
.gmh-tl-scale {
  position: relative;
  height: 22px;
  margin-left: 118px;
  margin-bottom: 16px;
}
.gmh-tl-scale span {
  position: absolute;
  top: 0;
  left: calc(var(--p) * 100%);
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--gmh-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  transition: opacity var(--t-mid) var(--gmh-ease);
}
.gmh-tl-scale span.is-dim {
  opacity: 0;
}
.gmh-tl-body {
  position: relative;
  margin-left: 118px;
  padding-bottom: 40px;
  border-left: 1px solid var(--gmh-line-soft);
}
.gmh-tl-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gmh-tl-grid i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--p) * 100%);
  width: 1px;
  background: var(--gmh-line-soft);
}
.gmh-tl-row {
  position: relative;
  z-index: 2;
  height: 68px;
  display: flex;
  align-items: center;
}
.gmh-tl-row + .gmh-tl-row {
  border-top: 1px solid var(--gmh-line-soft);
}
.gmh-tl-name {
  position: absolute;
  left: -118px;
  width: 104px;
  text-align: right;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 600;
  transition: color 0.5s var(--gmh-ease);
}
.gmh-tl-row.is-open .gmh-tl-name {
  color: var(--gmh-txt);
}
.gmh-tl-bar {
  position: absolute;
  height: 18px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3px;
  left: calc(var(--s) * 100%);
  width: calc(var(--l) * 100%);
  background: rgba(214, 166, 28, 0.15);
  border: 1px solid rgba(214, 166, 28, 0.3);
  transition:
    background 0.5s var(--gmh-ease),
    border-color 0.5s var(--gmh-ease),
    box-shadow 0.5s var(--gmh-ease);
}
.gmh-tl-row.is-open .gmh-tl-bar {
  background: linear-gradient(180deg, rgba(214, 166, 28, 0.5), rgba(214, 166, 28, 0.34));
  border-color: rgba(214, 166, 28, 0.66);
  box-shadow: 0 0 18px -4px rgba(214, 166, 28, 0.42);
}
.gmh-tl-ov {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--s) * 100%);
  width: calc(var(--l) * 100%);
  background: repeating-linear-gradient(135deg, rgba(214, 166, 28, 0.05) 0 2px, transparent 2px 8px);
  border-left: 1px solid rgba(214, 166, 28, 0.14);
  border-right: 1px solid rgba(214, 166, 28, 0.14);
  pointer-events: none;
}
.gmh-tl-ov.is-key {
  background: linear-gradient(180deg, rgba(214, 166, 28, 0.05), transparent 60%), repeating-linear-gradient(135deg, rgba(214, 166, 28, 0.11) 0 2px, transparent 2px 7px);
  border-left-color: var(--line-dark);
  border-right-color: var(--line-dark);
}
.gmh-tl-ov b {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gmh-gold-text);
  background: rgba(var(--gmh-void-rgb), 0.92);
  padding: 5px 11px;
  border-radius: var(--r-xs);
  border: 1px solid rgba(214, 166, 28, 0.2);
}
.gmh-tl-now {
  position: absolute;
  top: -32px;
  bottom: -8px;
  left: calc(var(--s) * 100%);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--royce-gold) 12%, var(--royce-gold) 92%, transparent);
  z-index: 4;
  pointer-events: none;
}
.gmh-tl-now b {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #0b0f16;
  background: var(--royce-gold);
  padding: 4px 9px;
  border-radius: var(--r-xs);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px -4px rgba(214, 166, 28, 0.6);
}
.gmh-tl-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--gmh-line-soft);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--gmh-mute);
}
.gmh-tl-foot-note {
  margin-inline-start: auto;
}
.gmh-key {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
  font-weight: 600;
}
.gmh-key i {
  width: 24px;
  height: 11px;
  display: block;
  border-radius: 2px;
}
.gmh-key-open i {
  background: linear-gradient(180deg, rgba(214, 166, 28, 0.5), rgba(214, 166, 28, 0.34));
  border: 1px solid rgba(214, 166, 28, 0.66);
}
.gmh-key-idle i {
  background: rgba(214, 166, 28, 0.15);
  border: 1px solid rgba(214, 166, 28, 0.3);
}
.gmh-key-ov i {
  background: repeating-linear-gradient(135deg, rgba(214, 166, 28, 0.22) 0 2px, transparent 2px 7px);
  border: 1px solid var(--line-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   04 — SESSION CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.gmh-sessions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.gmh-scard {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gmh-line);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--gmh-card) 0%, var(--gmh-card-2) 100%);
  box-shadow: var(--sh-2), var(--gmh-inset);
  padding: 44px 42px;
  transition:
    transform var(--t-slow) var(--gmh-ease),
    border-color var(--t-slow) var(--gmh-ease),
    box-shadow var(--t-slow) var(--gmh-ease);
}
.gmh-scard::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: var(--royce-gold);
  transition: width 0.55s var(--gmh-ease-out);
}
.gmh-scard:hover {
  transform: translateY(-4px);
  border-color: var(--line-dark);
  box-shadow: var(--sh-3), var(--gmh-inset);
}
.gmh-scard:hover::before {
  width: 100%;
}
.gmh-scard.is-open::before {
  width: 100%;
  background: linear-gradient(90deg, var(--gmh-ok), rgba(65, 168, 126, 0));
}
.gmh-scard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.gmh-scard h3 {
  font-size: 1.95rem;
  line-height: 1.18;
  margin: 0 0 8px;
  color: var(--gmh-txt);
}
.gmh-scard-region {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 700;
}
.gmh-scard p {
  color: var(--gmh-txt-2);
  font-size: 0.96rem;
  line-height: 1.8;
  margin-bottom: 32px;
}
.gmh-dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--gmh-line-soft);
  border: 1px solid var(--gmh-line-soft);
  margin: 0;
}
.gmh-dl > div {
  background: rgba(var(--gmh-void-rgb), 0.55);
  padding: 22px 24px;
}
.gmh-dl dt {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 700;
  margin-bottom: 10px;
}
.gmh-dl dd {
  margin: 0;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--gmh-txt);
  font-weight: 500;
  direction: ltr;
  text-align: start;
}
.gmh-scard-foot {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.gmh-scard-foot .gmh-until {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   05 — OVERLAPS
   ═══════════════════════════════════════════════════════════════════════════ */
.gmh-ov-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.gmh-ov-main {
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl);
  padding: 56px 52px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(80% 70% at 88% 0%, rgba(214, 166, 28, 0.12), transparent 62%), linear-gradient(155deg, var(--gmh-feature-hi) 0%, var(--gmh-feature-lo) 100%);
  box-shadow: var(--sh-3), var(--gmh-inset);
}
.gmh-ov-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--royce-gold), rgba(214, 166, 28, 0));
}
.gmh-ov-main h3 {
  font-size: 2.3rem;
  line-height: 1.16;
  margin: 0 0 22px;
  color: var(--gmh-txt);
}
.gmh-ov-main p {
  color: var(--gmh-txt-2);
  line-height: 1.84;
  max-width: 54ch;
}
.gmh-ov-side {
  display: grid;
  gap: 28px;
  align-content: start;
}
.gmh-ov-card {
  border: 1px solid var(--gmh-line);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(var(--gmh-glass-hi-rgb), 0.8), rgba(var(--gmh-glass-lo-rgb), 0.8));
  box-shadow: var(--sh-1);
  padding: 34px 32px;
  transition:
    transform var(--t-slow) var(--gmh-ease),
    border-color var(--t-slow) var(--gmh-ease),
    box-shadow var(--t-slow) var(--gmh-ease);
}
.gmh-ov-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-dark);
  box-shadow: var(--sh-2);
}
.gmh-ov-card h4 {
  font-size: 1.3rem;
  margin: 0 0 14px;
  color: var(--gmh-txt);
}
.gmh-ov-card p {
  font-size: 0.9rem;
  color: var(--gmh-txt-2);
  line-height: 1.75;
}
.gmh-ov-win {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gmh-gold-text);
  font-variant-numeric: tabular-nums;
  margin-top: 20px;
  font-weight: 700;
}
.gmh-ov-viz {
  margin: 46px 0 32px;
  direction: ltr;
}
.gmh-ov-plot {
  position: relative;
  padding-top: 4px;
}
.gmh-ov-axis {
  position: relative;
  height: 16px;
  margin-bottom: 22px;
}
.gmh-ov-axis span {
  position: absolute;
  left: calc(var(--p) * 100%);
  transform: translateX(-50%);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  color: var(--gmh-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.gmh-ov-track {
  position: relative;
  z-index: 2;
  height: 14px;
  border-radius: 3px;
  background: rgba(var(--gmh-wash-rgb), 0.055);
}
.gmh-ov-track + .gmh-ov-track {
  margin-top: 40px;
}
.gmh-ov-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--s) * 100%);
  width: calc(var(--l) * 100%);
  background: linear-gradient(180deg, rgba(214, 166, 28, 0.62), rgba(214, 166, 28, 0.42));
  border-radius: 3px;
}
.gmh-ov-track b {
  position: absolute;
  left: 0;
  top: -24px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 700;
}
.gmh-ov-zone {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: calc(var(--s) * 100%);
  width: calc(var(--l) * 100%);
  border-left: 1px solid rgba(214, 166, 28, 0.5);
  border-right: 1px solid rgba(214, 166, 28, 0.5);
  background: linear-gradient(180deg, rgba(214, 166, 28, 0.17), rgba(214, 166, 28, 0.07));
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}
.gmh-note {
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--gmh-line);
  font-size: 0.88rem;
  color: var(--gmh-mute);
  line-height: 1.85;
  max-width: 64ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   06 — EXCHANGES
   ═══════════════════════════════════════════════════════════════════════════ */
.gmh-tabs {
  position: relative;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--gmh-line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.gmh-tabs::-webkit-scrollbar {
  display: none;
}
.gmh-tabs button {
  min-height: 56px;
  padding: 0 30px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gmh-mute);
  white-space: nowrap;
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  transition:
    color var(--t-mid) var(--gmh-ease),
    background var(--t-mid) var(--gmh-ease);
}
.gmh-tabs button:first-child {
  padding-inline-start: 0;
}
.gmh-tabs button:hover {
  color: var(--gmh-txt);
  background: rgba(var(--gmh-wash-rgb), 0.03);
}
.gmh-tabs button[aria-selected='true'] {
  color: var(--gmh-gold-text);
}
/* positioned by offsetLeft in the script — physical on purpose */
.gmh-tabs-ind {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--royce-gold);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 12px -2px rgba(214, 166, 28, 0.7);
  transition:
    transform var(--t-slow) var(--gmh-ease-out),
    width var(--t-slow) var(--gmh-ease-out);
  pointer-events: none;
}
.gmh-xwrap {
  margin-top: 10px;
  border: 1px solid var(--gmh-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--gmh-glass-hi-rgb), 0.5), rgba(var(--gmh-glass-lo-rgb), 0.5));
  box-shadow: var(--sh-2);
}
.gmh-xtable thead th {
  text-align: start;
  padding: 24px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 700;
  background: rgba(var(--gmh-wash-rgb), 0.028);
  border-bottom: 1px solid var(--gmh-line);
}
.gmh-xtable thead th:last-child {
  text-align: end;
}
.gmh-xtable td {
  padding: 28px 24px;
  border-bottom: 1px solid var(--gmh-line-soft);
  vertical-align: middle;
  font-size: 0.94rem;
}
.gmh-xtable td:last-child {
  text-align: end;
}
.gmh-xtable tbody tr:last-child td {
  border-bottom: 0;
}
.gmh-xtable tbody tr {
  transition: background var(--t-mid) var(--gmh-ease);
}
.gmh-xtable tbody tr:hover {
  background: rgba(var(--gmh-wash-rgb), 0.035);
}
.gmh-x-name {
  font-family: var(--gmh-serif);
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  display: block;
  margin-bottom: 6px;
  color: var(--gmh-txt);
}
.gmh-x-code {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 700;
}
.gmh-x-hours {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--gmh-txt);
  font-weight: 500;
}
.gmh-x-hours small {
  display: block;
  color: var(--gmh-mute);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 6px;
  font-weight: 600;
}
.gmh-x-sup {
  font-size: 0.7em;
  vertical-align: super;
  color: var(--gmh-gold-text);
  margin-inline-start: 2px;
  font-weight: 600;
}
.gmh-x-city {
  color: var(--gmh-txt-2);
}
.gmh-x-next {
  font-size: 12.5px;
  color: var(--gmh-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gmh-x-next b {
  font-weight: 600;
  color: var(--gmh-txt-2);
}
.gmh-x-hol {
  display: inline-block;
  margin-top: 8px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gmh-gold-text);
  border: 1px solid var(--line-dark);
  background: rgba(214, 166, 28, 0.08);
  padding: 4px 10px;
  border-radius: var(--r-xs);
  font-weight: 600;
}
.gmh-panel[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   07 — INSTRUMENT ACTIVITY
   ═══════════════════════════════════════════════════════════════════════════ */
.gmh-act {
  border-top: 1px solid var(--gmh-line);
}
.gmh-act-row {
  display: grid;
  grid-template-columns: 230px 1fr 220px;
  gap: 40px;
  align-items: center;
  padding-block: 36px;
  padding-inline: 0 20px;
  border-bottom: 1px solid var(--gmh-line-soft);
  border-radius: var(--r-md);
  transition:
    background var(--t-mid) var(--gmh-ease),
    padding var(--t-mid) var(--gmh-ease);
}
.gmh-act-row:hover {
  background: rgba(var(--gmh-wash-rgb), 0.03);
  padding-inline-start: 20px;
}
.gmh-act-sym {
  font-family: var(--gmh-serif);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  color: var(--gmh-txt);
}
.gmh-act-sym small {
  display: block;
  font-family: var(--gmh-sans);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  margin-top: 8px;
  font-weight: 700;
}
.gmh-act-track {
  position: relative;
  height: 14px;
  border-radius: 3px;
  background: rgba(var(--gmh-wash-rgb), 0.055);
  direction: ltr;
}
.gmh-act-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--s) * 100%);
  width: calc(var(--l) * 100%);
  background: linear-gradient(180deg, rgba(214, 166, 28, 0.55), rgba(214, 166, 28, 0.36));
  border-radius: 3px;
}
.gmh-act-track .gmh-act-now {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 2px;
  left: calc(var(--s) * 100%);
  background: var(--royce-gold);
  border-radius: 2px;
  box-shadow: 0 0 10px -1px rgba(214, 166, 28, 0.8);
}
.gmh-act-when {
  font-size: 12.5px;
  color: var(--gmh-mute);
  line-height: 1.7;
}
.gmh-act-when b {
  display: block;
  color: var(--gmh-txt);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.gmh-act-scale {
  display: grid;
  grid-template-columns: 230px 1fr 220px;
  gap: 40px;
  padding-bottom: 8px;
}
.gmh-act-scale-in {
  position: relative;
  height: 16px;
  direction: ltr;
}
.gmh-act-scale-in span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  color: var(--gmh-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   08 — UPCOMING GLOBAL MARKET HOLIDAYS
   Compact institutional calendar: region filter, next events, collapsed
   monthly archive, year-end summary. No full table on initial load.
   ═══════════════════════════════════════════════════════════════════════════ */
.gmh-hol-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

.gmh-hol {
  border: 1px solid var(--gmh-line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(168deg, var(--gmh-card-hi) 0%, var(--gmh-card-lo) 100%);
  box-shadow: var(--sh-2), var(--gmh-inset);
}
.gmh-hol-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 28px;
  border-bottom: 1px solid var(--gmh-line);
  background: rgba(var(--gmh-wash-rgb), 0.022);
}
.gmh-hol-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gmh-hol-tabs::-webkit-scrollbar {
  display: none;
}
.gmh-hol-tabs button {
  min-height: 36px;
  padding: 0 15px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gmh-mute);
  white-space: nowrap;
  transition:
    color var(--t-fast) var(--gmh-ease),
    background var(--t-fast) var(--gmh-ease),
    border-color var(--t-fast) var(--gmh-ease);
}
.gmh-hol-tabs button:hover {
  color: var(--gmh-txt);
  background: rgba(var(--gmh-wash-rgb), 0.05);
}
.gmh-hol-tabs button[aria-selected='true'] {
  color: var(--gmh-gold-text);
  background: rgba(214, 166, 28, 0.11);
  border-color: var(--line-dark);
}
.gmh-hol-next {
  margin-inline-start: auto;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--gmh-mute);
  white-space: nowrap;
}
.gmh-hol-next b {
  color: var(--gmh-txt-2);
  font-weight: 600;
}

/* ── rows ──────────────────────────────────────────────────────────────── */
.gmh-hol-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gmh-hol-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1.05fr) minmax(0, 1.25fr) auto;
  gap: 24px;
  align-items: center;
  padding: 22px 28px;
  position: relative;
  border-bottom: 1px solid var(--gmh-line-soft);
  transition: background var(--t-mid) var(--gmh-ease);
}
.gmh-hol-list > .gmh-hol-row:last-child {
  border-bottom: 0;
}
.gmh-hol-row:hover {
  background: rgba(var(--gmh-wash-rgb), 0.03);
}
.gmh-hol-row.is-today::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--royce-gold);
  border-radius: 2px;
}
.gmh-hol-date {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--gmh-txt);
  font-weight: 600;
  white-space: nowrap;
}
.gmh-hol-date small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 600;
  margin-top: 5px;
}
.gmh-hol-mkt {
  font-size: 0.96rem;
  color: var(--gmh-txt);
  font-weight: 500;
  min-width: 0;
}
.gmh-hol-mkt small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 600;
  margin-top: 5px;
}
.gmh-hol-name {
  font-size: 0.92rem;
  color: var(--gmh-txt-2);
  min-width: 0;
}
.gmh-hol-name em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--gmh-mute);
  margin-top: 4px;
  line-height: 1.6;
}

/* ── status pills ──────────────────────────────────────────────────────── */
.gmh-hol-st {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  white-space: nowrap;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--gmh-line);
  color: var(--gmh-mute);
  background: rgba(var(--gmh-wash-rgb), 0.025);
}
.gmh-hol-st i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  opacity: 0.85;
}
.gmh-hol-st.is-closed {
  color: var(--gmh-closed);
  border-color: rgba(var(--gmh-closed-rgb), 0.26);
  background: rgba(var(--gmh-closed-rgb), 0.07);
}
.gmh-hol-st.is-early-close {
  color: var(--gmh-gold-text);
  border-color: var(--line-dark);
  background: rgba(214, 166, 28, 0.1);
}
.gmh-hol-st.is-modified {
  color: var(--gmh-modified);
  border-color: rgba(var(--gmh-modified-rgb), 0.3);
  background: rgba(var(--gmh-modified-rgb), 0.09);
}
.gmh-hol-st small {
  font-size: 9px;
  letter-spacing: 0.1em;
  opacity: 0.75;
  font-weight: 600;
}
.gmh-hol-prov {
  display: inline-block;
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gmh-mute);
  border: 1px dashed var(--gmh-line-strong);
  padding: 3px 9px;
  border-radius: var(--r-xs);
}

/* ── view-all toggle ───────────────────────────────────────────────────── */
.gmh-hol-foot {
  border-top: 1px solid var(--gmh-line);
  background: rgba(var(--gmh-wash-rgb), 0.018);
}
.gmh-hol-toggle {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gmh-txt-2);
  transition:
    color var(--t-mid) var(--gmh-ease),
    background var(--t-mid) var(--gmh-ease);
}
.gmh-hol-toggle[hidden] {
  display: none;
}
.gmh-hol-toggle:hover {
  color: var(--gmh-gold-text);
  background: rgba(214, 166, 28, 0.05);
}
.gmh-hol-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-slow) var(--gmh-ease);
}
.gmh-hol-toggle[aria-expanded='true'] .gmh-hol-caret {
  transform: translateY(1px) rotate(-135deg);
}

/* ── monthly archive ───────────────────────────────────────────────────── */
.gmh-hol-archive {
  overflow: hidden;
  transition: max-height var(--t-slow) var(--gmh-ease-out);
}
.gmh-hol-months {
  border-top: 1px solid var(--gmh-line);
}
.gmh-mon + .gmh-mon {
  border-top: 1px solid var(--gmh-line-soft);
}
.gmh-mon-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 0 28px;
  text-align: start;
  transition: background var(--t-mid) var(--gmh-ease);
}
.gmh-mon-head:hover {
  background: rgba(var(--gmh-wash-rgb), 0.03);
}
.gmh-mon-t {
  font-family: var(--gmh-serif);
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gmh-txt-2);
  transition: color var(--t-mid) var(--gmh-ease);
}
.gmh-mon[data-open='true'] .gmh-mon-t {
  color: var(--gmh-gold-text);
}
.gmh-mon-n {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 600;
}
.gmh-mon-n .gmh-hol-caret {
  width: 6px;
  height: 6px;
}
.gmh-mon-body {
  overflow: hidden;
  transition: max-height var(--t-slow) var(--gmh-ease-out);
}
.gmh-mon-body .gmh-hol-row {
  background: var(--gmh-recess);
  padding-top: 18px;
  padding-bottom: 18px;
}
.gmh-mon-body .gmh-hol-row:hover {
  background: rgba(var(--gmh-wash-rgb), 0.03);
}

/* ── year-end card ─────────────────────────────────────────────────────── */
.gmh-hol-ye {
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(90% 70% at 100% 0%, rgba(214, 166, 28, 0.13), transparent 62%), linear-gradient(158deg, var(--gmh-feature-hi) 0%, var(--gmh-feature-lo) 100%);
  box-shadow: var(--sh-2), var(--gmh-inset);
}
.gmh-hol-ye[hidden] {
  display: none;
}
.gmh-hol-ye::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--royce-gold), rgba(214, 166, 28, 0));
}
.gmh-hol-ye h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 22px;
  color: var(--gmh-txt);
}
.gmh-ye-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
.gmh-ye-list li {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--gmh-line-soft);
  font-size: 12.5px;
  color: var(--gmh-txt-2);
  line-height: 1.55;
}
.gmh-ye-list li b {
  flex: 0 0 52px;
  color: var(--gmh-gold-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.gmh-ye-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gmh-gold-text);
  transition:
    gap var(--t-mid) var(--gmh-ease),
    color var(--t-mid) var(--gmh-ease);
}
.gmh-ye-cta:hover {
  gap: 16px;
  color: var(--royce-gold-hover);
}

.gmh-empty {
  padding: 56px 28px;
  text-align: center;
  color: var(--gmh-mute);
  font-size: 0.95rem;
}
.gmh-empty[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10 — RESOURCES  /  11 — DISCLOSURE
   ═══════════════════════════════════════════════════════════════════════════ */
.gmh-res {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.gmh-res a {
  display: flex;
  flex-direction: column;
  padding: 36px 30px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gmh-line);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--gmh-card), var(--gmh-card-2));
  box-shadow: var(--sh-1);
  transition:
    transform var(--t-slow) var(--gmh-ease),
    border-color var(--t-slow) var(--gmh-ease),
    box-shadow var(--t-slow) var(--gmh-ease);
}
.gmh-res a::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: var(--royce-gold);
  transition: width 0.5s var(--gmh-ease-out);
}
.gmh-res a:hover {
  transform: translateY(-4px);
  border-color: var(--line-dark);
  box-shadow: var(--sh-2);
}
.gmh-res a:hover::before {
  width: 100%;
}
.gmh-res h3 {
  font-size: 1.22rem;
  margin: 0 0 12px;
  color: var(--gmh-txt);
  transition: color var(--t-mid) var(--gmh-ease);
}
.gmh-res a:hover h3 {
  color: var(--gmh-gold-text);
}
.gmh-res p {
  font-size: 0.86rem;
  color: var(--gmh-txt-2);
  line-height: 1.72;
}
.gmh-res-arrow {
  margin-top: auto;
  padding-top: 26px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gmh-mute);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    color var(--t-mid) var(--gmh-ease),
    gap var(--t-mid) var(--gmh-ease);
}
.gmh-res a:hover .gmh-res-arrow {
  color: var(--gmh-gold-text);
  gap: 16px;
}

.gmh-disc {
  padding: 104px 0;
  border-top: 1px solid var(--gmh-line-soft);
  background: var(--gmh-disc);
}
.gmh-disc-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 72px;
}
.gmh-disc h2 {
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  color: var(--gmh-txt-2);
}
.gmh-disc p {
  font-size: 0.87rem;
  line-height: 1.95;
  color: var(--gmh-mute);
  max-width: 78ch;
}
.gmh-disc p + p {
  margin-top: 20px;
}
.gmh-disc a {
  position: relative;
  color: var(--gmh-txt-2);
}
.gmh-disc a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--royce-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--gmh-ease);
}
.gmh-disc a:hover {
  color: var(--gmh-gold-text);
}
.gmh-disc a:hover::after {
  transform: scaleX(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .gmh {
    --gmh-sec-y: 150px;
  }
  .gmh-hero {
    padding: calc(var(--gmh-nav) + 110px) 0 130px;
  }
}
@media (max-width: 1199.98px) {
  .gmh {
    --gmh-sec-y: 112px;
  }
  .gmh-geo-lbl {
    display: none;
  }
  .gmh-clocks {
    grid-template-columns: repeat(2, 1fr);
  }
  .gmh-clock {
    padding: 40px 20px 34px;
  }
  .gmh-module-cap {
    margin-inline-start: 0;
    text-align: start;
    max-width: none;
    flex: 1 1 100%;
  }
  .gmh-res {
    grid-template-columns: repeat(2, 1fr);
  }
  .gmh-tl {
    padding: 44px 34px 36px;
  }
  .gmh-act-row,
  .gmh-act-scale {
    grid-template-columns: 200px 1fr 200px;
    gap: 30px;
  }
}
@media (max-width: 1199.98px) {
  .gmh-ov-grid {
    grid-template-columns: 1fr;
  }
  .gmh-ov-side {
    grid-template-columns: 1fr 1fr;
  }
  .gmh-act-row,
  .gmh-act-scale {
    grid-template-columns: 180px 1fr;
    gap: 28px;
  }
  .gmh-act-when {
    grid-column: 1 / -1;
    padding-top: 4px;
  }
  .gmh-disc-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .gmh-snap-cell {
    padding: 34px;
  }
  .gmh-hol-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .gmh-hol-ye {
    order: -1;
  }
  .gmh-hol-row {
    grid-template-columns: 104px minmax(0, 1fr) auto;
    gap: 18px;
  }
  .gmh-hol-name {
    grid-column: 1 / -1;
    padding-top: 6px;
  }
}
@media (max-width: 991.98px) {
  .gmh {
    --gmh-sec-y: 92px;
    --r-xl: 20px;
    --r-lg: 16px;
  }
  .gmh-wrap {
    padding-inline: 22px;
  }
  .gmh-hero {
    padding: calc(var(--gmh-nav) + 64px) 0 84px;
  }
  .gmh-snap {
    grid-template-columns: 1fr;
    margin-top: 56px;
  }
  .gmh-snap-cell + .gmh-snap-cell {
    border-inline-start: 0;
    border-top: 1px solid var(--gmh-line-soft);
  }
  .gmh-snap-cell {
    padding: 32px 28px;
  }
  .gmh-head-block {
    margin-bottom: 56px;
  }
  .gmh-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 56px;
  }
  .gmh-sessions {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .gmh-scard {
    padding: 34px 28px;
  }
  .gmh-ov-main {
    padding: 40px 28px;
  }
  .gmh-ov-side {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .gmh-ov-card {
    padding: 30px 26px;
  }
  .gmh-disc {
    padding: 76px 0;
  }

  /* ── CLOCK MODULE → horizontal swipe deck ────────────────────────── */
  .gmh-module {
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .gmh-module::before {
    display: none;
  }
  .gmh-clocks {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 22px;
    gap: 14px;
    background: none;
    margin-inline: -22px;
    padding: 4px 22px 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gmh-clocks::-webkit-scrollbar {
    display: none;
  }
  .gmh-clock {
    flex: 0 0 64%;
    max-width: 300px;
    scroll-snap-align: start;
    padding: 34px 20px 30px;
    border: 1px solid var(--gmh-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
  }
  .gmh-clock.is-open {
    border-color: rgba(214, 166, 28, 0.22);
  }
  .gmh-dial {
    max-width: 146px;
    margin-bottom: 26px;
  }
  .gmh-mkt-tag {
    margin-bottom: 22px;
  }
  .gmh-rail {
    display: block;
    height: 3px;
    border-radius: 3px;
    background: var(--gmh-line-soft);
    margin-top: 22px;
    position: relative;
    overflow: hidden;
    direction: ltr;
  }
  .gmh-module-note {
    margin-top: 22px;
    gap: 18px;
    font-size: 10.5px;
  }
  .gmh-rail i {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--royce-gold);
    border-radius: 3px;
    left: 0;
    width: 30%;
    transition:
      left 0.16s linear,
      width var(--t-mid) var(--gmh-ease);
  }

  /* ── TIMELINE → vertical orientation ─────────────────────────────── */
  .gmh-tl {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 12px;
    padding: 34px 20px 30px;
    direction: ltr;
  }
  .gmh-tl-scale {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    position: relative;
    margin: 48px 0 0;
    height: auto;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
  }
  .gmh-tl-scale span {
    top: calc(var(--p) * 100%);
    left: 0;
    transform: translateY(-50%);
  }
  .gmh-tl-foot {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .gmh-tl-body {
    grid-column: 2;
    grid-row: 1;
    margin: 48px 0 0;
    padding-bottom: 0;
    border-left: 0;
    display: flex;
    height: 500px;
    align-items: stretch;
    border-top: 1px solid var(--gmh-line-soft);
  }
  .gmh-tl-grid i {
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    top: calc(var(--p) * 100%);
    bottom: auto;
  }
  .gmh-tl-row {
    height: auto;
    flex: 1 1 0;
    display: block;
    position: relative;
  }
  .gmh-tl-row + .gmh-tl-row {
    border-top: 0;
    border-left: 1px solid var(--gmh-line-soft);
  }
  .gmh-tl-name {
    position: absolute;
    left: -4px;
    right: -4px;
    width: auto;
    top: -42px;
    text-align: center;
    font-size: 9px;
    letter-spacing: 0.08em;
    line-height: 1.3;
  }
  .gmh-tl-bar {
    left: 50%;
    top: calc(var(--s) * 100%);
    height: calc(var(--l) * 100%);
    width: 24px;
    transform: translateX(-50%);
  }
  .gmh-tl-ov {
    left: 0;
    right: 0;
    width: auto;
    top: calc(var(--s) * 100%);
    height: calc(var(--l) * 100%);
    bottom: auto;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
  }
  .gmh-tl-ov b {
    display: none;
  }
  .gmh-tl-now {
    left: 0;
    right: 0;
    width: auto;
    top: calc(var(--s) * 100%);
    height: 1px;
    bottom: auto;
    background: var(--royce-gold);
  }
  .gmh-tl-now b {
    top: -10px;
    left: auto;
    right: 0;
    transform: none;
  }

  /* ── EXCHANGE TABLE → cards ──────────────────────────────────────── */
  .gmh-xwrap {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    margin-top: 22px;
  }
  .gmh-xtable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .gmh-xtable tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 0;
    border: 1px solid var(--gmh-line);
    border-radius: var(--r-md);
    background: linear-gradient(160deg, var(--gmh-card), var(--gmh-card-2));
    box-shadow: var(--sh-1);
    padding: 26px 22px;
    margin-bottom: 14px;
  }
  .gmh-xtable tbody tr.is-open {
    border-color: rgba(65, 168, 126, 0.28);
  }
  .gmh-xtable td,
  .gmh-xtable tbody tr:last-child td {
    display: block;
    border: 0;
    padding: 0;
  }
  .gmh-xtable td:last-child {
    text-align: start;
  }
  .gmh-xtable td[data-l='mkt'] {
    grid-column: 1;
    grid-row: 1;
  }
  .gmh-xtable td[data-l='status'] {
    grid-column: 2;
    grid-row: 1;
    text-align: end;
    align-self: start;
  }
  .gmh-xtable td[data-l='city'] {
    grid-column: 1;
    grid-row: 2;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gmh-mute);
    font-weight: 700;
  }
  .gmh-xtable td[data-l='local'],
  .gmh-xtable td[data-l='yours'] {
    grid-row: 3;
    padding-top: 20px;
    margin-top: 18px;
    border-top: 1px solid var(--gmh-line-soft);
  }
  .gmh-xtable td[data-l='local'] {
    grid-column: 1;
    padding-inline-end: 16px;
  }
  .gmh-xtable td[data-l='yours'] {
    grid-column: 2;
    text-align: end;
  }
  .gmh-xtable td[data-l='local']::before,
  .gmh-xtable td[data-l='yours']::before {
    content: attr(data-h);
    display: block;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gmh-mute);
    font-weight: 700;
    margin-bottom: 9px;
  }
  .gmh-xtable td[data-l='next'] {
    grid-column: 1 / -1;
    grid-row: 4;
    padding-top: 18px;
    text-align: start;
  }

  /* ── HOLIDAY ROWS → compact cards ────────────────────────────────── */
  .gmh-hol-bar {
    padding: 16px 18px;
    gap: 14px;
  }
  .gmh-hol-next {
    margin-inline-start: 0;
    flex: 1 1 100%;
    white-space: normal;
  }
  .gmh-hol-tabs button {
    min-height: 44px;
  }
  .gmh-hol-row {
    grid-template-columns: 1fr auto;
    gap: 6px 14px;
    padding: 20px 18px;
    align-items: start;
  }
  .gmh-hol-date {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.86rem;
    letter-spacing: 0.1em;
  }
  .gmh-hol-date small {
    display: inline;
    margin: 0;
    margin-inline-start: 8px;
    letter-spacing: 0.14em;
  }
  .gmh-hol-st {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .gmh-hol-mkt {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.95rem;
    margin-top: 4px;
  }
  .gmh-hol-mkt small {
    display: inline;
    margin-inline-start: 8px;
  }
  .gmh-hol-name {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 0.86rem;
    margin-top: 2px;
  }
  .gmh-mon-head {
    padding: 0 18px;
    min-height: 60px;
  }
  .gmh-mon-t {
    font-size: 0.94rem;
    letter-spacing: 0.1em;
  }
  .gmh-hol-ye {
    padding: 28px 24px;
  }
  .gmh-empty {
    padding: 44px 18px;
  }

  .gmh-res {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .gmh-res a {
    padding: 28px 24px;
  }
  .gmh-tzbar-in {
    height: 66px;
    gap: 14px;
  }
  .gmh-tz-now {
    display: none;
  }
  .gmh-tz-opts button {
    min-height: 44px;
    padding: 0 15px;
  }
  .gmh-tabs button {
    min-height: 52px;
    padding: 0 20px;
  }
  .gmh-act-row:hover {
    padding-inline-start: 0;
  }
}
@media (max-width: 767.98px) {
  .gmh {
    --gmh-sec-y: 80px;
  }
  .gmh-clock {
    flex-basis: 70%;
  }
  .gmh-digital {
    font-size: 1.6rem;
  }
  .gmh-snap-n {
    font-size: 2.4rem;
  }
  .gmh-next-name {
    font-size: 1.5rem;
  }
  .gmh-tl-body {
    height: 440px;
  }
  .gmh-act-row,
  .gmh-act-scale {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .gmh-act-scale {
    display: none;
  }
  .gmh-act-row {
    padding: 28px 0;
  }
  .gmh-dl {
    grid-template-columns: 1fr;
  }
  .gmh-scard h3 {
    font-size: 1.7rem;
  }
  .gmh-ov-main h3 {
    font-size: 1.85rem;
  }
  .gmh-tl-foot {
    gap: 16px;
    font-size: 11px;
  }
}
@media (max-width: 399.98px) {
  .gmh-wrap {
    padding-inline: 18px;
  }
  .gmh-clocks {
    margin-inline: -18px;
    padding: 4px 18px 6px;
    scroll-padding-inline-start: 18px;
  }
  .gmh-clock {
    flex-basis: 78%;
  }
  .gmh-snap-cell {
    padding: 26px 22px;
  }
  .gmh-tl {
    padding: 30px 16px 26px;
    column-gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gmh *,
  .gmh *::before,
  .gmh *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .gmh-anim {
    opacity: 1;
    transform: none;
  }
  .gmh-stagger > * {
    opacity: 1;
    transform: none;
  }
  .gmh-live-dot::after {
    display: none;
  }
  .gmh-clock:hover,
  .gmh-scard:hover,
  .gmh-res a:hover,
  .gmh-ov-card:hover {
    transform: none;
  }
}
@media print {
  .gmh-tzbar,
  .gmh-geo {
    display: none;
  }
  .gmh {
    background: #fff;
    color: #111;
  }
  .gmh-sec {
    padding: 24px 0;
    break-inside: avoid;
  }
}

/* ==========================================================================
   Arabic typography and RTL
   Every mirrored block above is written in logical properties, so this is the
   whole of the RTL work: the serif has no Arabic glyphs and tracking breaks
   Arabic letter joining. The three time axes keep direction: ltr by design.
   The hero graticule mask reveals the side away from the copy; it flips with
   the copy so the markers do not sit under the headline.
   ========================================================================== */
html.rtl .gmh {
  --gmh-serif: 'Ping AR + LT', Georgia, serif;
}
html.rtl .gmh,
html.rtl .gmh * {
  letter-spacing: 0;
}
html.rtl .gmh-geo {
  -webkit-mask-image: linear-gradient(-100deg, transparent 0%, transparent 26%, #000 58%, #000 100%);
  mask-image: linear-gradient(-100deg, transparent 0%, transparent 26%, #000 58%, #000 100%);
}
html.rtl .gmh-hero h1 {
  line-height: 1.25;
}