000

/* =============================================
   WHITE GLOBE — SOLUTIONS BY FORMAT HUB
   Shared palette: Navy / Blue / Gold
   Format accents: 6-colour per delivery type
   Signature element: Hero format-selector grid
   — six interactive format tiles that anchor
   the visitor immediately to their need before
   a single line of body copy is read.
============================================= */

:root {
  --navy:      #071525;
  --navy-mid:  #0D2040;
  --navy-card: #132B54;
  --blue:      #1A5CB8;
  --blue-lt:   #2472D4;
  --blue-pale: #EAF1FB;
  --gold:      #C8901A;
  --gold-lt:   #E0A830;
  --gold-pale: #FEF5E2;
  --ink:       #1A2035;
  --slate:     #3D5270;
  --muted:     #6880A8;
  --light:     #F5F7FC;
  --white:     #FFFFFF;
  --border:    #D4DDF0;

/* Format accent palette */
  --lrn:   #1AAD6E; --lrn-d: #0E7A4A; --lrn-p: #EBF9F2;
  --mlt:   #A63820; --mlt-d: #7A2618; --mlt-p: #FAF0EC;
  --crt:   #2A4898; --crt-d: #1C3270; --crt-p: #EDF0FB;
  --pmt:   #0E8A9A; --pmt-d: #096470; --pmt-p: #E6F6F8;
  --biz:   #C8801A; --biz-d: #906010; --biz-p: #FEF3E2;
  --itp:   #7840C8; --itp-d: #5628A0; --itp-p: #F2EEFB;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--white); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 60px;
  background: rgba(7,21,37,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--blue); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; color: #fff; letter-spacing: .02em; }
.nav-brand { font-size: 14px; font-weight: 600; color: #fff; }
.nav-brand span { color: #6AACF0; }
.nav-links { display: flex; align-items: center; gap: 4px; }

/* Plain nav link */
.nav-plain { color: rgba(255,255,255,0.52); padding: 6px 14px; border-radius: 6px; font-size: 13px; transition: color .2s, background .2s; cursor: pointer; white-space: nowrap; }
.nav-plain:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* Generic dropdown wrapper */
.nav-dd-wrap { position: relative; }
.nav-dd-trigger {
  display: flex; align-items: center; gap: 5px;
  color: rgba(255,255,255,0.52); padding: 6px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 400; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s; user-select: none;
}
.nav-dd-trigger:hover, .nav-dd-wrap.open .nav-dd-trigger { color: #fff; background: rgba(255,255,255,0.06); }
.nav-dd-trigger svg { width: 12px; height: 12px; transition: transform .22s; }
.nav-dd-wrap.open .nav-dd-trigger svg { transform: rotate(180deg); }

/* ── SOLUTIONS BY FORMAT DROPDOWN (active tab) ── */
.sbf-trigger {
  display: flex; align-items: center; gap: 5px;
  color: #fff; padding: 6px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  background: rgba(26,92,184,0.18);
  border: 1px solid rgba(26,92,184,0.30);
  cursor: pointer; white-space: nowrap;
  transition: background .2s, border-color .2s; user-select: none;
}
.sbf-trigger:hover, .sbf-wrap.open .sbf-trigger { background: rgba(26,92,184,0.28); border-color: rgba(26,92,184,0.55); }
.sbf-trigger svg { width: 12px; height: 12px; transition: transform .22s; }
.sbf-wrap.open .sbf-trigger svg { transform: rotate(180deg); }

.sbf-dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  width: 480px;
  background: var(--navy-mid);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 200;
}
.sbf-wrap.open .sbf-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }

.sbf-head { padding: 12px 18px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sbf-head-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.36); }

.sbf-list { display: flex; flex-direction: column; }
.sbf-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer; transition: background .18s; text-decoration: none;
  position: relative;
}
.sbf-item:last-child { border-bottom: none; }
.sbf-item:hover { background: rgba(255,255,255,0.05); }
.sbf-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0; transition: opacity .18s; }
.sbf-item:hover::before { opacity: 1; }
.sf-lrn::before { background: var(--lrn); } .sf-mlt::before { background: var(--mlt); }
.sf-crt::before { background: var(--crt); } .sf-pmt::before { background: var(--pmt); }
.sf-biz::before { background: var(--biz); } .sf-itp::before { background: var(--itp); }

.sbf-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sbf-icon svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.si-lrn { background: rgba(26,173,110,0.22); color: #40CC8A; }
.si-mlt { background: rgba(166,56,32,0.22);  color: #E8907A; }
.si-crt { background: rgba(42,72,152,0.25);  color: #8AAAD8; }
.si-pmt { background: rgba(14,138,154,0.22); color: #40C8DA; }
.si-biz { background: rgba(200,128,26,0.22); color: var(--gold-lt); }
.si-itp { background: rgba(120,64,200,0.22); color: #B090E8; }

.sbf-name { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.sbf-sub  { font-size: 10.5px; color: rgba(255,255,255,0.38); }

.sbf-foot {
  padding: 10px 18px; border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.20);
  display: flex; align-items: center; justify-content: space-between;
}
.sbf-foot-note { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; color: rgba(255,255,255,0.28); text-transform: uppercase; }
.sbf-foot-link { font-size: 12px; font-weight: 600; color: #6AACF0; display: flex; align-items: center; gap: 4px; }
.sbf-foot-link svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── INDUSTRY SOLUTIONS DROPDOWN ── */
.is-dd-trigger {
  display: flex; align-items: center; gap: 5px;
  color: rgba(255,255,255,0.52); padding: 6px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 400; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s; user-select: none;
}
.is-dd-wrap.open .is-dd-trigger, .is-dd-trigger:hover { color: #fff; background: rgba(255,255,255,0.06); }
.is-dd-trigger svg { width: 12px; height: 12px; transition: transform .22s; }
.is-dd-wrap.open .is-dd-trigger svg { transform: rotate(180deg); }

.is-dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  width: 660px; background: var(--navy-mid);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; overflow: hidden;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease; z-index: 200;
}
.is-dd-wrap.open .is-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }

.is-head { padding: 12px 18px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.is-head-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.36); }
.is-mega { display: grid; grid-template-columns: 1fr 1fr; }
.is-col { display: flex; flex-direction: column; }
.is-col:first-child { border-right: 1px solid rgba(255,255,255,0.08); }
.is-col-hdr { padding: 9px 16px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.15); display: flex; align-items: center; gap: 8px; }
.is-col-hdr-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.is-col-hdr-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.38); }
.is-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: background .18s; text-decoration: none; position: relative; }
.is-item:last-child { border-bottom: none; }
.is-item:hover { background: rgba(255,255,255,0.05); }
.is-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0; transition: opacity .18s; }
.is-item:hover::before { opacity: 1; }
.im-med::before { background: #1A9090; } .im-leg::before { background: #3A52A8; }
.im-pat::before { background: #C8901A; } .im-tec::before { background: #2E6EA6; }
.im-mkt::before { background: #1AAD6E; }
.is-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.is-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ii-med { background: rgba(26,144,144,0.22); color: #4ACACA; } .ii-leg { background: rgba(58,82,168,0.25); color: #8090D8; }
.ii-pat { background: rgba(200,144,26,0.22); color: #E0A830; } .ii-tec { background: rgba(46,110,166,0.25); color: #6AACF0; }
.ii-mkt { background: rgba(26,173,110,0.22); color: #40CC8A; }
.is-text { flex: 1; min-width: 0; }
.is-name { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.3; margin-bottom: 3px; }
.is-sub  { font-size: 11px; color: rgba(255,255,255,0.40); margin-bottom: 5px; }
.is-badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 500; letter-spacing: .06em; padding: 2px 8px; border-radius: 100px; }
.ib-med { background: rgba(26,144,144,0.18); color: #4ACACA; border: 1px solid rgba(26,144,144,0.25); }
.ib-leg { background: rgba(58,82,168,0.18);  color: #8090D8; border: 1px solid rgba(58,82,168,0.25); }
.ib-pat { background: rgba(200,144,26,0.18); color: #E0A830; border: 1px solid rgba(200,144,26,0.25); }
.ib-tec { background: rgba(46,110,166,0.18); color: #6AACF0; border: 1px solid rgba(46,110,166,0.25); }
.ib-mkt { background: rgba(26,173,110,0.18); color: #40CC8A; border: 1px solid rgba(26,173,110,0.25); }
.is-foot { padding: 10px 18px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.20); display: flex; align-items: center; justify-content: space-between; }
.is-foot-stat { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; color: rgba(255,255,255,0.30); text-transform: uppercase; }
.is-foot-link { font-size: 12px; font-weight: 600; color: #6AACF0; display: flex; align-items: center; gap: 5px; }
.is-foot-link svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ── WHY WHITE GLOBE DROPDOWN ── */
.wg-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 560px; background: var(--navy-mid);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease; z-index: 200;
}
.nav-dd-wrap.open .wg-dropdown { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
.dd-head { padding: 12px 18px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.dd-head-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.36); }
.dd-items { display: grid; grid-template-columns: 1fr 1fr; }
.dd-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); border-right: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: background .18s; text-decoration: none; }
.dd-item:nth-child(even) { border-right: none; }
.dd-item:nth-last-child(-n+2) { border-bottom: none; }
.dd-item:hover { background: rgba(255,255,255,0.05); }
.dd-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.di-blue  { background: rgba(26,92,184,0.25); } .di-gold  { background: rgba(200,144,26,0.20); }
.di-green { background: rgba(26,173,110,0.20); } .di-slate { background: rgba(255,255,255,0.08); }
.dd-icon svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.di-blue svg { color: #6AACF0; } .di-gold svg { color: #E0A830; } .di-green svg { color: #22C87E; } .di-slate svg { color: rgba(255,255,255,0.55); }
.dd-name { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 3px; }
.dd-sub  { font-size: 11px; color: rgba(255,255,255,0.40); line-height: 1.4; }
.dd-foot { padding: 11px 18px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.20); display: flex; align-items: center; justify-content: space-between; }
.dd-foot-tagline { font-size: 12px; color: rgba(255,255,255,0.35); font-style: italic; }
.dd-foot-link { font-size: 12px; font-weight: 600; color: #6AACF0; display: flex; align-items: center; gap: 5px; }
.dd-foot-link svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.nav-cta { padding: 8px 20px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; transition: background .2s, transform .15s; margin-left: 8px; white-space: nowrap; }
.nav-cta:hover { background: var(--blue-lt); transform: translateY(-1px); }

/* ── HERO ── */
.hero {
  background: var(--navy);
  padding: 130px 48px 88px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 55% at 100% 0%,   rgba(26,92,184,0.16), transparent 55%),
    radial-gradient(ellipse 40% 40% at 0% 100%,    rgba(200,144,26,0.07), transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 100%,   rgba(26,173,110,0.05), transparent 55%);
}
.hero-inner { position: relative; z-index: 2; }
.hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--gold-lt); margin-bottom: 20px;
}
.hero-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 600; line-height: 1.10;
  letter-spacing: -.02em; color: #fff;
  margin-bottom: 14px; max-width: 800px;
}
.hero-title em { font-style: italic; color: var(--gold-lt); }
.hero-sub {
  font-size: 17px; font-weight: 300;
  color: rgba(255,255,255,0.52); line-height: 1.70;
  max-width: 620px; margin-bottom: 52px;
}
.hero-sub strong { color: rgba(255,255,255,0.85); font-weight: 500; }

/* ── FORMAT SELECTOR GRID (hero signature) ── */
.format-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.format-tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; padding: 22px 20px;
  display: flex; flex-direction: column;
  cursor: pointer; transition: background .2s, border-color .2s, transform .2s;
  text-decoration: none; position: relative; overflow: hidden;
}
.format-tile::after {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  opacity: 0; transition: opacity .2s;
}
.format-tile:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); transform: translateY(-3px); }
.format-tile:hover::after { opacity: 1; }

.ft-lrn::after { background: var(--lrn); } .ft-lrn:hover { border-color: rgba(26,173,110,0.40); }
.ft-mlt::after { background: var(--mlt); } .ft-mlt:hover { border-color: rgba(166,56,32,0.40); }
.ft-crt::after { background: var(--crt); } .ft-crt:hover { border-color: rgba(42,72,152,0.40); }
.ft-pmt::after { background: var(--pmt); } .ft-pmt:hover { border-color: rgba(14,138,154,0.40); }
.ft-biz::after { background: var(--biz); } .ft-biz:hover { border-color: rgba(200,128,26,0.40); }
.ft-itp::after { background: var(--itp); } .ft-itp:hover { border-color: rgba(120,64,200,0.40); }

.tile-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; flex-shrink: 0;
}
.tile-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ti-lrn { background: rgba(26,173,110,0.20); color: #40CC8A; }
.ti-mlt { background: rgba(166,56,32,0.20);  color: #E8907A; }
.ti-crt { background: rgba(42,72,152,0.20);  color: #8AAAD8; }
.ti-pmt { background: rgba(14,138,154,0.20); color: #40C8DA; }
.ti-biz { background: rgba(200,128,26,0.20); color: var(--gold-lt); }
.ti-itp { background: rgba(120,64,200,0.20); color: #B090E8; }

.tile-name {
  font-size: 15px; font-weight: 600; color: #fff;
  margin-bottom: 5px; letter-spacing: -.01em;
}
.tile-desc { font-size: 12px; color: rgba(255,255,255,0.46); line-height: 1.5; margin-bottom: 12px; }
.tile-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 500; letter-spacing: .08em;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35);
}

/* ── SECTIONS ── */
.section { padding: 88px 48px; }
.s-white { background: var(--white); }
.s-light { background: var(--light); }
.s-dark  { background: var(--navy); }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 12px;
}
.ey-blue  { color: var(--blue); }
.ey-gold  { color: var(--gold-lt); }

.sec-rule { width: 48px; height: 2px; margin-bottom: 20px; }
.rule-blue { background: var(--blue); }
.rule-gold { background: var(--gold); }

.sec-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 600; line-height: 1.12;
  letter-spacing: -.02em; color: var(--ink);
  margin-bottom: 12px;
}
.sec-title em { font-style: italic; color: var(--blue); }
.sec-title-lt { color: #fff; }
.sec-title-lt em { color: var(--gold-lt); }

.sec-lead {
  font-size: 15px; font-weight: 300;
  color: var(--slate); line-height: 1.75;
  max-width: 640px; margin-bottom: 48px;
}
.sec-lead-lt { color: rgba(255,255,255,0.50); }

/* ── FORMAT CARDS (deep-dive) ── */
.format-cards { display: flex; flex-direction: column; gap: 20px; }

.fcard {
  display: grid;
  grid-template-columns: 260px 1fr;
  border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  transition: box-shadow .2s;
}
.fcard:hover { box-shadow: 0 6px 28px rgba(26,92,184,0.09); }

.fc-panel {
  padding: 30px 26px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.fc-panel::before {
  content: ''; position: absolute;
  top: 0; left: 0; bottom: 0; width: 4px;
}
.fp-lrn { background: var(--lrn-p); } .fp-lrn::before { background: var(--lrn); }
.fp-mlt { background: var(--mlt-p); } .fp-mlt::before { background: var(--mlt); }
.fp-crt { background: var(--crt-p); } .fp-crt::before { background: var(--crt); }
.fp-pmt { background: var(--pmt-p); } .fp-pmt::before { background: var(--pmt); }
.fp-biz { background: var(--biz-p); } .fp-biz::before { background: var(--biz); }
.fp-itp { background: var(--itp-p); } .fp-itp::before { background: var(--itp); }

.fc-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.fc-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fci-lrn { background: rgba(26,173,110,0.15); color: var(--lrn-d); }
.fci-mlt { background: rgba(166,56,32,0.15);  color: var(--mlt-d); }
.fci-crt { background: rgba(42,72,152,0.15);  color: var(--crt-d); }
.fci-pmt { background: rgba(14,138,154,0.15); color: var(--pmt-d); }
.fci-biz { background: rgba(200,128,26,0.15); color: var(--biz-d); }
.fci-itp { background: rgba(120,64,200,0.15); color: var(--itp-d); }

.fc-num { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.fc-name { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin-bottom: 8px; }
.fc-tag  { font-size: 12px; font-weight: 300; color: var(--slate); line-height: 1.5; }
.fc-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.55);
  color: var(--ink); transition: background .18s;
  margin-top: 18px; cursor: pointer; text-decoration: none;
}
.fc-cta:hover { background: rgba(255,255,255,0.90); }
.fc-cta svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.fc-content {
  background: var(--white); padding: 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.fc-col-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.fc-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.fc-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--slate); line-height: 1.4; }
.fc-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }

.kpi-row { grid-column: 1 / -1; display: flex; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.kpi { flex: 1; text-align: center; padding: 12px 8px; border-radius: 8px; background: var(--light); border: 1px solid var(--border); }
.kpi-val { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; color: var(--blue); margin-bottom: 3px; letter-spacing: -.01em; }
.kpi-lbl { font-size: 10.5px; color: var(--muted); line-height: 1.35; }

/* ── CROSS-FORMAT CONSISTENCY ── */
.consistency-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.con-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; padding: 26px 22px;
  transition: background .2s, border-color .2s;
}
.con-card:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.20); }
.con-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.30); margin-bottom: 10px; }
.con-title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.con-body  { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.50); line-height: 1.65; }

/* ── COMPARISON TABLE ── */
.comp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.comp-table th { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--border); background: var(--light); }
.comp-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--slate); line-height: 1.4; vertical-align: top; }
.comp-table tr:last-child td { border-bottom: none; }
.comp-table tr:hover td { background: var(--blue-pale); }
.ct-format { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ct-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ct-tag { display: inline-block; font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 4px; margin: 2px 2px 2px 0; }
.tag-lrn { background: var(--lrn-p); color: var(--lrn-d); }
.tag-mlt { background: var(--mlt-p); color: var(--mlt-d); }
.tag-crt { background: var(--crt-p); color: var(--crt-d); }
.tag-pmt { background: var(--pmt-p); color: var(--pmt-d); }
.tag-biz { background: var(--biz-p); color: var(--biz-d); }
.tag-itp { background: var(--itp-p); color: var(--itp-d); }

/* ── CTA ── */
.cta-section { background: var(--navy); padding: 96px 48px; text-align: center; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(26,92,184,0.18), transparent 60%); }
.cta-title { font-family: 'Fraunces', serif; font-size: clamp(32px, 4.5vw, 52px); font-weight: 600; font-style: italic; color: #fff; line-height: 1.12; letter-spacing: -.02em; margin-bottom: 16px; position: relative; z-index: 2; }
.cta-title em { font-style: normal; color: var(--gold-lt); }
.cta-sub { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.50); max-width: 520px; margin: 0 auto 36px; line-height: 1.75; position: relative; z-index: 2; }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; position: relative; z-index: 2; }
.btn-primary { padding: 14px 32px; border-radius: 7px; border: none; background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 4px 20px rgba(26,92,184,0.30); }
.btn-primary:hover { background: var(--blue-lt); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,92,184,0.38); }
.btn-ghost { padding: 14px 24px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.20); color: rgba(255,255,255,0.70); font-size: 14px; font-weight: 500; transition: border-color .2s, color .2s; }
.btn-ghost:hover { border-color: rgba(255,255,255,0.50); color: #fff; }
.cta-note { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .10em; color: rgba(255,255,255,0.28); text-transform: uppercase; margin-top: 22px; position: relative; z-index: 2; }

/* ── FOOTER ── */
.footer { background: #050E1A; padding: 22px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-left { font-size: 12px; color: rgba(255,255,255,0.30); }
.footer-links { display: flex; gap: 20px; font-size: 12px; color: rgba(255,255,255,0.35); }
.footer-links a:hover { color: rgba(255,255,255,0.70); }
.footer-iso { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; color: rgba(200,144,26,0.55); }

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  .format-grid { grid-template-columns: repeat(3, 1fr); }
  .fcard { grid-template-columns: 1fr; }
  .fc-content { grid-template-columns: 1fr; }
  .consistency-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav { padding: 0 20px; }
  .hero, .section, .cta-section { padding-left: 24px; padding-right: 24px; }
  .format-grid { grid-template-columns: 1fr 1fr; }
  .consistency-grid { grid-template-columns: 1fr; }
  .footer { padding: 16px 24px; }
}
@media (max-width: 560px) {
  .format-grid { grid-template-columns: 1fr 1fr; }
  .kpi-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.visible { opacity: 1; transform: none; }
}

</style>
</head>
<body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="White Globe Document and Language Translation Services">
    <meta name="keywords" content="white globe, translation, interpretation, localization, language translation services, document translation services">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Asia's Leading LSP For Translation, Localization And Language Services</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<link rel="stylesheet" href="./style.css">

<script src="./script.js" defer></script>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-CW3RSR91PY"></script>
    <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());

gtag('config', 'G-CW3RSR91PY');
     </script>

</head>
<body>

<nav class="navbar navbar-expand-xl" id="top-nav">
      <div class="container-fluid">
        <a class="navbar-brand pt-0 pb-0" href="./index.html">
          <img src="./images/logo/WG-logo.webp" alt="logo-whiteglobe" width="180" height=auto; class="img-fluid">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <li class="nav-item dropdown">
              <div id="dropdown1">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                 Our Story
              </a>
              <ul class="dropdown-menu" id="dropdown-1">
                <li>
                  <a class="dropdown-item" href="./origin-story-of-white-globe">Origin Story Of White Globe</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./origin-of-brand-name.html">Origin Of Brand Name</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./vision-mission.html">Vision & Mission</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./about-us.html">About Us</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./team.html">Management Team</a></li>
                <li>
                  <a class="dropdown-item" href="./language-coe-team.html">Language COE Team</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./white-globe-trotter.html">White Globe Trotter</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./whiteglobe-in-news.html">White Globe In News</a>
                </li>
                <li>
    <a class="dropdown-item" href="./our-corporate-profile.html">
        Our Corporate Profile
    </a>
</li>

<li class="dropend">
    <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">
        Our Brands
    </a>

<li>
            <a class="dropdown-item" href="./Nexoratech.html">
                Nexoratech
            </a>
        </li>

<li>
            <a class="dropdown-item" href="./indic-translation.html">
                Indic Translation
                <img src="./images/logo/indic-translation.webp" width="25">
            </a>
        </li>

<li>
            <a class="dropdown-item" href="./lang-train.html">
                Lang Train
                <img src="./images/logo/lang-train.webp" width="25">
            </a>
        </li>

<li>
            <a class="dropdown-item" href="./lang-writer.html">
                Lang Writer
                <img src="./images/logo/lang-writer.webp" width="25">
            </a>
        </li>

<li>
            <a class="dropdown-item" href="./on-tap-translation.html">
                On Tap Translation
                <img src="./images/logo/on-tap-translation.webp" width="25">
            </a>
        </li>

<li>
            <a class="dropdown-item" href="./online-interpreter.html">
                Online Interpreter
                <img src="./images/logo/online-interpreter.webp" width="25">
            </a>
        </li>

<li>
            <a class="dropdown-item" href="./polyverse-digital.html">
                Polyverse Digital
                <img src="./images/logo/polyverse-digital.webp" width="25">
            </a>
        </li>

<li>
            <a class="dropdown-item" href="./polyverse-media.html">
                Polyverse Media
                <img src="./images/logo/polyverse-media.webp" width="25">
            </a>
        </li>

<li>
            <a class="dropdown-item" href="./yellow-hat-global.html">
                Yellow Hat Global
                <img src="./images/logo/yellow-hat-global.webp" width="25">
            </a>
        </li>

</ul>
</li>
            </div>
            </li>
            
            <li class="nav-item dropdown">
              <div id="dropdown2">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Industry Solutions
              </a>
              <ul class="dropdown-menu" id="dropdown-2">
                  <li>
                  <a class="dropdown-item" href=Industry-Solutions.html>Industry Solutions</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./Technical-Documentation-Transformation.html">Technical Documentation Transformation</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./customised-industry-solution.html">Customised Industry Solution</a>
                </li>
                <li>
                 <a class="dropdown-item" href="./Precision-Medical-Translation.html">Precision Medical Translation</a>
                </li>
                <li>
                   <a class="dropdown-item" href="./Certified-Translation-Services.html">Certified Translation Services </a>
                </li>
                <li>
                  <a class="dropdown-item" href="./Legal-Translation-Services.html">Legal Translation Services</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./Patent-Translation-Services.html">Patent Translation Services</a>
                </li>
                <li>
                   <a class="dropdown-item" href="./Business-Translation-Services.html">Business Translation Services</a>
                </li>
                <li>
                   <a class="dropdown-item" href="./mdr-solutions.html">MDR Solutions</a>
                </li>
              </ul>
            </div>
            </li>
            
            <li class="nav-item dropdown">
              <div id="dropdown2">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Solutions By Format
              </a>
              <ul class="dropdown-menu" id="dropdown-2">
                  <li>
                  <a class="dropdown-item" href="./Solutions-By-Format.html">Solutions By Format </a>
                </li>
                <li>
                  <a class="dropdown-item" href="./Multilingual-eLearning-Solutions.html">Multilingual-eLearning-Solutions </a>
                </li>
                <li>
                  <a class="dropdown-item" href="./Enterprise-Multimedia-Localisation.html">Enterprise-Multimedia-Localisation</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./language-solutions-hub.html">Language Solutions Hub</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./beyond-language-solution.html">Value Added Solutions </a>
                </li>
              </ul>
            </div>
            </li>
            
            <li class="nav-item dropdown">
              <div id="dropdown2">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Why White Globe
              </a>
              <ul class="dropdown-menu" id="dropdown-2">
                  <li>
                  <a class="dropdown-item" href="./Why-Whiteglobe.html">Why Whiteglobe</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./common-language-pair.html">Common Language Pair</a>
                </li>
                <li>
                  <a class="dropdown-item" href="./tailored-solutions-for-functions.html">Tailored Solutions For Function</a>
                </li>
              </ul>
            </div>
            </li>
           
            <li class="nav-item dropdown">
              <div id="dropdown3">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Success Stories
              </a>
              <ul class="dropdown-menu" id="dropdown-3">
                <li>
                  <a class="dropdown-item" href="./case-studies.html">Case Studies</a>
                </li>
              </ul>
            </div>
            </li>
            <li class="nav-item dropdown">
              <div id="dropdown3">
              <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Lang Tech
              </a>
              <ul class="dropdown-menu" id="dropdown-3">
                <li>
                  <a class="dropdown-item" href="./our-technology-platform.html">
                     Our Technology Platform <img src="./images/logo/langtech.webp" alt="logo-lang-tech" width="30" height="30">
                  </a>
                </li>
              </ul>
            </div>
            </li>
           
           <li class="nav-item dropdown">
              <div id="dropdown5">
              <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Knowledge Center
              </a>
              <ul class="dropdown-menu" id="dropdown-5">
                <li>
                  <a class="dropdown-item" href="./articles.html">
                    Articles
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="./blogs.html">
                    Blogs
                  </a>
                </li>
              </ul>
            </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./request-a quote.html">
                Request A Quote
              </a>
            </li>
           <li class="nav-item dropdown">
              <div id="dropdown6">
              <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Get In Touch
              </a>
              <ul class="dropdown-menu" id="dropdown-6">
                <li>
                  <a class="dropdown-item" href="./connect-with-us.html">
                    Connect With Us
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="./career.html">
                    Career
                  </a>
                </li>
                 </ul>
        </div>
    </nav>

<section class="hero">
  <div class="hero-inner">
    <p class="hero-eyebrow">Solutions by Format &mdash; Six Delivery Formats &mdash; 350+ Languages</p>
    <h1 class="hero-title">
      Choose How It's Delivered.<br>
      <em>We'll Handle the Rest.</em>
    </h1>
    <p class="hero-sub">
      Every enterprise has a preferred delivery format — a SCORM module for the LMS, a dubbed video for global onboarding, a certified document for regulatory submission, or a post-edited translation for high-volume content pipelines. White Globe delivers <strong>every format</strong> in every language, under one quality standard and one accountability structure.
    </p>

<div class="format-grid">
      <a class="format-tile ft-lrn" href="#elearning">
        <div class="tile-icon ti-lrn">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
        </div>
        <div class="tile-name">eLearning &amp; Learning Content</div>
        <div class="tile-desc">Custom modules, gamification, AR/VR, microlearning — SCORM, xAPI, LMS-agnostic</div>
        <div class="tile-stat">22%&rarr;94% completion &nbsp;&middot;&nbsp; 350+ languages</div>
      </a>

<a class="format-tile ft-mlt" href="#multimedia">
        <div class="tile-icon ti-mlt">
          <svg viewBox="0 0 24 24" aria-hidden="true"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
        </div>
        <div class="tile-name">Multimedia, Video &amp; Animation</div>
        <div class="tile-desc">Dubbing, voiceover, subtitling, motion graphics, accessibility — governed by domain experts</div>
        <div class="tile-stat">6,000+ voice artists &nbsp;&middot;&nbsp; WCAG 2.1</div>
      </a>

<a class="format-tile ft-crt" href="#certified">
        <div class="tile-icon ti-crt">
          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="6"/><path d="M6 14l-2 7 8-3 8 3-2-7"/></svg>
        </div>
        <div class="tile-name">Certified &amp; Sworn Translation</div>
        <div class="tile-desc">Official, notarised, apostille-ready translations for courts, authorities and embassies globally</div>
        <div class="tile-stat">ISO 17100 &nbsp;&middot;&nbsp; 100+ authorities</div>
      </a>

<a class="format-tile ft-pmt" href="#pemt">
        <div class="tile-icon ti-pmt">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
        </div>
        <div class="tile-name">Post-Edited Machine Translation</div>
        <div class="tile-desc">AI-first speed, human-governed quality — ISO 18587 aligned for high-volume enterprise pipelines</div>
        <div class="tile-stat">40&ndash;60% cost reduction &nbsp;&middot;&nbsp; audit-ready</div>
      </a>

<a class="format-tile ft-biz" href="#business">
        <div class="tile-icon ti-biz">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/></svg>
        </div>
        <div class="tile-name">Business &amp; Enterprise Translation</div>
        <div class="tile-desc">All document types, all file formats, 24/7 delivery — from single documents to enterprise programmes</div>
        <div class="tile-stat">350+ languages &nbsp;&middot;&nbsp; 24/7 delivery</div>
      </a>

<a class="format-tile ft-itp" href="#interpretation">
        <div class="tile-icon ti-itp">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
        </div>
        <div class="tile-name">Interpretation Services</div>
        <div class="tile-desc">Simultaneous, consecutive and remote interpretation — OPI, VRI and RSI for global events and meetings</div>
        <div class="tile-stat">Real-time &nbsp;&middot;&nbsp; OPI &middot; VRI &middot; RSI</div>
      </a>
    </div>
  </div>
</section>

<section class="section s-white" id="formats">
  <div class="eyebrow ey-blue">Format Capabilities</div>
  <div class="sec-rule rule-blue"></div>
  <h2 class="sec-title reveal">Six Formats. <em>One Partner.</em></h2>
  <p class="sec-lead reveal">Each format is a distinct production capability — not a variant of the same process. White Globe maintains dedicated teams, tools, and quality frameworks for every format it delivers.</p>

<div class="fcard" id="elearning">
      <div class="fc-panel fp-lrn">
        <div>
          <div class="fc-icon fci-lrn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg></div>
          <div class="fc-num">01 &mdash; eLearning</div>
          <div class="fc-name">eLearning &amp; Learning Content Development</div>
          <div class="fc-tag">Empower global learning. In every language. On every device.</div>
        </div>
        <a class="fc-cta" href="WG_eLearning_BrochureDownload_Form.html">
          Download Brochure
          <svg viewBox="0 0 12 12" aria-hidden="true"><line x1="2" y1="6" x2="10" y2="6"/><polyline points="7,3 10,6 7,9"/></svg>
        </a>
      </div>
      <div class="fc-content">
        <div>
          <div class="fc-col-label">Capabilities</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--lrn)"></span>Custom eLearning from storyboard to SCORM — all authoring tools</li>
            <li><span class="fc-dot" style="background:var(--lrn)"></span>Multilingual localisation — 3,000+ voice artists, 350+ languages</li>
            <li><span class="fc-dot" style="background:var(--lrn)"></span>Gamification — leaderboards, badges, scenario-based decision trees</li>
            <li><span class="fc-dot" style="background:var(--lrn)"></span>Animation, AR/VR and immersive learning experiences</li>
            <li><span class="fc-dot" style="background:var(--lrn)"></span>Microlearning, mobile-first and offline-capable packaging</li>
          </ul>
        </div>
        <div>
          <div class="fc-col-label">Standards &amp; LMS compatibility</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--lrn)"></span>SCORM 1.2, SCORM 2004, xAPI (Tin Can), AICC, HTML5</li>
            <li><span class="fc-dot" style="background:var(--lrn)"></span>Cornerstone, SAP SuccessFactors, Moodle, Workday, Docebo</li>
            <li><span class="fc-dot" style="background:var(--lrn)"></span>GxP, AML, SEBI/RBI, OSHA compliance modules — audit-ready</li>
            <li><span class="fc-dot" style="background:var(--lrn)"></span>Articulate 360, Adobe Captivate, Lectora, iSpring, custom HTML5</li>
            <li><span class="fc-dot" style="background:var(--lrn)"></span>White Globe &amp; Yellow Hat Global — combined L&D capability</li>
          </ul>
        </div>
        <div class="kpi-row">
          <div class="kpi"><div class="kpi-val">22%&rarr;94%</div><div class="kpi-lbl">Safety training completion, auto OEM</div></div>
          <div class="kpi"><div class="kpi-val">14%&rarr;91%</div><div class="kpi-lbl">Compliance completion via gamification</div></div>
          <div class="kpi"><div class="kpi-val">60%</div><div class="kpi-lbl">Faster content refresh, Human + AI</div></div>
          <div class="kpi"><div class="kpi-val">5,000+</div><div class="kpi-lbl">L&amp;D content writers on platform</div></div>
        </div>
      </div>
    </div>

<div class="fcard" id="multimedia">
      <div class="fc-panel fp-mlt">
        <div>
          <div class="fc-icon fci-mlt"><svg viewBox="0 0 24 24" aria-hidden="true"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg></div>
          <div class="fc-num">02 &mdash; Multimedia</div>
          <div class="fc-name">Multimedia, Video, Animation &amp; Accessibility</div>
          <div class="fc-tag">Enterprise multimedia. In every language. Governed at every stage.</div>
        </div>
        <a class="fc-cta" href="WG_Multimedia_BrochureDownload_Form.html">
          Download Brochure
          <svg viewBox="0 0 12 12" aria-hidden="true"><line x1="2" y1="6" x2="10" y2="6"/><polyline points="7,3 10,6 7,9"/></svg>
        </a>
      </div>
      <div class="fc-content">
        <div>
          <div class="fc-col-label">Capabilities</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--mlt)"></span>Video localisation — subtitling, dubbing, voiceover replacement</li>
            <li><span class="fc-dot" style="background:var(--mlt)"></span>2D/3D animation and motion graphics — custom branded</li>
            <li><span class="fc-dot" style="background:var(--mlt)"></span>AI-assisted dubbing with native-speaker QA and lip-sync</li>
            <li><span class="fc-dot" style="background:var(--mlt)"></span>Accessibility — SDH captions, audio description, WCAG 2.1 AA</li>
            <li><span class="fc-dot" style="background:var(--mlt)"></span>LMS packaging — SCORM/xAPI, HTML5, CDN delivery</li>
          </ul>
        </div>
        <div>
          <div class="fc-col-label">Compliance &amp; certification</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--mlt)"></span>ISO 27001 certified production — IP-safe for classified content</li>
            <li><span class="fc-dot" style="background:var(--mlt)"></span>ISO 13485 workflow — pharma and medical device multimedia</li>
            <li><span class="fc-dot" style="background:var(--mlt)"></span>FDA/EMA bilingual SME review for regulated video content</li>
            <li><span class="fc-dot" style="background:var(--mlt)"></span>SEBI/RBI compliance video — SCORM-tracked, audit-ready</li>
            <li><span class="fc-dot" style="background:var(--mlt)"></span>ADA, CVAA, WCAG 2.1 AA accessibility as standard</li>
          </ul>
        </div>
        <div class="kpi-row">
          <div class="kpi"><div class="kpi-val">6,000+</div><div class="kpi-lbl">Native-speaker voice artists</div></div>
          <div class="kpi"><div class="kpi-val">40&ndash;60%</div><div class="kpi-lbl">Faster production, Human + AI</div></div>
          <div class="kpi"><div class="kpi-val">WCAG 2.1</div><div class="kpi-lbl">Accessibility compliant as standard</div></div>
          <div class="kpi"><div class="kpi-val">ISO 27001</div><div class="kpi-lbl">IP-safe production certified</div></div>
        </div>
      </div>
    </div>

<div class="fcard" id="certified">
      <div class="fc-panel fp-crt">
        <div>
          <div class="fc-icon fci-crt"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="6"/><path d="M6 14l-2 7 8-3 8 3-2-7"/></svg></div>
          <div class="fc-num">03 &mdash; Certified</div>
          <div class="fc-name">Certified &amp; Sworn Translation</div>
          <div class="fc-tag">Official. Apostille-ready. Accepted by every authority.</div>
        </div>
        <a class="fc-cta" href="WG_CertifiedTranslation_BrochureDownload_Form.html">
          Download Brochure
          <svg viewBox="0 0 12 12" aria-hidden="true"><line x1="2" y1="6" x2="10" y2="6"/><polyline points="7,3 10,6 7,9"/></svg>
        </a>
      </div>
      <div class="fc-content">
        <div>
          <div class="fc-col-label">Document types</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--crt)"></span>Legal — contracts, court judgments, affidavits, deeds</li>
            <li><span class="fc-dot" style="background:var(--crt)"></span>Official — birth, marriage, death, academic, police certificates</li>
            <li><span class="fc-dot" style="background:var(--crt)"></span>Corporate — articles of incorporation, board resolutions, PoA</li>
            <li><span class="fc-dot" style="background:var(--crt)"></span>Immigration and visa support documentation</li>
            <li><span class="fc-dot" style="background:var(--crt)"></span>Financial — audited accounts, bank statements for embassies</li>
          </ul>
        </div>
        <div>
          <div class="fc-col-label">Certification &amp; apostille services</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--crt)"></span>ISO 17100 certified translation with signed declaration</li>
            <li><span class="fc-dot" style="background:var(--crt)"></span>Notarization co-ordination and affidavit preparation</li>
            <li><span class="fc-dot" style="background:var(--crt)"></span>MEA apostille for India-origin documents</li>
            <li><span class="fc-dot" style="background:var(--crt)"></span>Embassy and consular attestation support — 100+ countries</li>
            <li><span class="fc-dot" style="background:var(--crt)"></span>Sworn translators for EU courts, LATAM and MEA submissions</li>
          </ul>
        </div>
        <div class="kpi-row">
          <div class="kpi"><div class="kpi-val">ISO 17100</div><div class="kpi-lbl">Translation quality certified</div></div>
          <div class="kpi"><div class="kpi-val">100+</div><div class="kpi-lbl">Countries &amp; authorities covered</div></div>
          <div class="kpi"><div class="kpi-val">350+</div><div class="kpi-lbl">Languages with certified output</div></div>
          <div class="kpi"><div class="kpi-val">MEA</div><div class="kpi-lbl">Apostille co-ordination available</div></div>
        </div>
      </div>
    </div>

<div class="fcard" id="pemt">
      <div class="fc-panel fp-pmt">
        <div>
          <div class="fc-icon fci-pmt"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div>
          <div class="fc-num">04 &mdash; PEMT</div>
          <div class="fc-name">Post-Edited Machine Translation</div>
          <div class="fc-tag">AI-first speed. Human-governed quality. ISO 18587 aligned.</div>
        </div>
        <a class="fc-cta" href="WG_PEMT_BrochureDownload_Form.html">
          Download Brochure
          <svg viewBox="0 0 12 12" aria-hidden="true"><line x1="2" y1="6" x2="10" y2="6"/><polyline points="7,3 10,6 7,9"/></svg>
        </a>
      </div>
      <div class="fc-content">
        <div>
          <div class="fc-col-label">Use cases &amp; content types</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--pmt)"></span>High-volume, lower-risk content — product descriptions, FAQs</li>
            <li><span class="fc-dot" style="background:var(--pmt)"></span>Internal communications and intranet content</li>
            <li><span class="fc-dot" style="background:var(--pmt)"></span>E-commerce catalogue localisation at scale</li>
            <li><span class="fc-dot" style="background:var(--pmt)"></span>Knowledge base and support content refresh cycles</li>
            <li><span class="fc-dot" style="background:var(--pmt)"></span>Software UI strings and localisation pipelines</li>
          </ul>
        </div>
        <div>
          <div class="fc-col-label">Governance &amp; quality framework</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--pmt)"></span>ISO 18587 MT post-editing standard — all programmes</li>
            <li><span class="fc-dot" style="background:var(--pmt)"></span>Domain-trained MT engines — not generic off-the-shelf</li>
            <li><span class="fc-dot" style="background:var(--pmt)"></span>Light PE and full PE options — matched to content risk level</li>
            <li><span class="fc-dot" style="background:var(--pmt)"></span>TM integration — cost compounds over programme lifecycle</li>
            <li><span class="fc-dot" style="background:var(--pmt)"></span>AI disclosure documentation for regulated industry clients</li>
          </ul>
        </div>
        <div class="kpi-row">
          <div class="kpi"><div class="kpi-val">ISO 18587</div><div class="kpi-lbl">MT post-editing certified</div></div>
          <div class="kpi"><div class="kpi-val">40&ndash;60%</div><div class="kpi-lbl">Cost reduction vs human-only</div></div>
          <div class="kpi"><div class="kpi-val">99.5%+</div><div class="kpi-lbl">Post-QA accuracy score</div></div>
          <div class="kpi"><div class="kpi-val">350+</div><div class="kpi-lbl">Language pairs supported</div></div>
        </div>
      </div>
    </div>

<div class="fcard" id="business">
      <div class="fc-panel fp-biz">
        <div>
          <div class="fc-icon fci-biz"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div>
          <div class="fc-num">05 &mdash; Business Translation</div>
          <div class="fc-name">Business &amp; Enterprise Translation</div>
          <div class="fc-tag">All document types. All file formats. Every language. Delivered with precision.</div>
        </div>
        <a class="fc-cta" href="WG_BusinessTranslation_BrochureDownload_Form.html">
          Download Brochure
          <svg viewBox="0 0 12 12" aria-hidden="true"><line x1="2" y1="6" x2="10" y2="6"/><polyline points="7,3 10,6 7,9"/></svg>
        </a>
      </div>
      <div class="fc-content">
        <div>
          <div class="fc-col-label">Document types</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--biz)"></span>Corporate communications, reports and presentations</li>
            <li><span class="fc-dot" style="background:var(--biz)"></span>HR documentation, employment contracts, policies</li>
            <li><span class="fc-dot" style="background:var(--biz)"></span>Marketing collateral, brochures and sales materials</li>
            <li><span class="fc-dot" style="background:var(--biz)"></span>Financial statements, audit reports, investor materials</li>
            <li><span class="fc-dot" style="background:var(--biz)"></span>Website and digital content localisation</li>
          </ul>
        </div>
        <div>
          <div class="fc-col-label">File formats &amp; delivery</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--biz)"></span>All formats: DOCX, PDF, PPTX, XLSX, HTML, XML, InDesign</li>
            <li><span class="fc-dot" style="background:var(--biz)"></span>24/7 delivery capability with priority SLA options</li>
            <li><span class="fc-dot" style="background:var(--biz)"></span>DTP and multilingual formatting in all target scripts</li>
            <li><span class="fc-dot" style="background:var(--biz)"></span>RTL adaptation — Arabic, Hebrew, Persian, Urdu</li>
            <li><span class="fc-dot" style="background:var(--biz)"></span>CJK complex script handling — Chinese, Japanese, Korean</li>
          </ul>
        </div>
        <div class="kpi-row">
          <div class="kpi"><div class="kpi-val">350+</div><div class="kpi-lbl">Languages &amp; language pairs</div></div>
          <div class="kpi"><div class="kpi-val">24/7</div><div class="kpi-lbl">Global delivery capability</div></div>
          <div class="kpi"><div class="kpi-val">All</div><div class="kpi-lbl">File formats supported</div></div>
          <div class="kpi"><div class="kpi-val">ISO 9001</div><div class="kpi-lbl">Quality management certified</div></div>
        </div>
      </div>
    </div>

<div class="fcard" id="interpretation">
      <div class="fc-panel fp-itp">
        <div>
          <div class="fc-icon fci-itp"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
          <div class="fc-num">06 &mdash; Interpretation</div>
          <div class="fc-name">Interpretation Services</div>
          <div class="fc-tag">Real-time. Every language. Every meeting, conference and courtroom.</div>
        </div>
        <a class="fc-cta" href="mailto:sales@whiteglobe.co.in?subject=Interpretation Services Enquiry">
          Request a Quote
          <svg viewBox="0 0 12 12" aria-hidden="true"><line x1="2" y1="6" x2="10" y2="6"/><polyline points="7,3 10,6 7,9"/></svg>
        </a>
      </div>
      <div class="fc-content">
        <div>
          <div class="fc-col-label">Interpretation modes</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--itp)"></span>Simultaneous interpretation (SI) — conferences, summits</li>
            <li><span class="fc-dot" style="background:var(--itp)"></span>Consecutive interpretation — legal, medical, business meetings</li>
            <li><span class="fc-dot" style="background:var(--itp)"></span>Over-the-Phone Interpretation (OPI) — 24/7 availability</li>
            <li><span class="fc-dot" style="background:var(--itp)"></span>Video Remote Interpretation (VRI) — legal, healthcare, enterprise</li>
            <li><span class="fc-dot" style="background:var(--itp)"></span>Remote Simultaneous Interpretation (RSI) — virtual conferences</li>
          </ul>
        </div>
        <div>
          <div class="fc-col-label">Sector applications</div>
          <ul class="fc-list">
            <li><span class="fc-dot" style="background:var(--itp)"></span>Legal — court proceedings, depositions, arbitration hearings</li>
            <li><span class="fc-dot" style="background:var(--itp)"></span>Medical — patient consultations, clinical trial informed consent</li>
            <li><span class="fc-dot" style="background:var(--itp)"></span>Corporate — board meetings, M&amp;A negotiations, investor calls</li>
            <li><span class="fc-dot" style="background:var(--itp)"></span>Government — diplomatic meetings, policy briefings, summits</li>
            <li><span class="fc-dot" style="background:var(--itp)"></span>Conferences — technical, scientific and international events</li>
          </ul>
        </div>
        <div class="kpi-row">
          <div class="kpi"><div class="kpi-val">350+</div><div class="kpi-lbl">Languages for interpretation</div></div>
          <div class="kpi"><div class="kpi-val">25,000+</div><div class="kpi-lbl">Interpretation hours delivered</div></div>
          <div class="kpi"><div class="kpi-val">OPI/VRI</div><div class="kpi-lbl">Remote interpretation available 24/7</div></div>
          <div class="kpi"><div class="kpi-val">RSI</div><div class="kpi-lbl">Platform-agnostic virtual delivery</div></div>
        </div>
      </div>
    </div>

</div>
</section>

<section class="section s-dark">
  <div class="eyebrow ey-gold">What Never Changes</div>
  <div class="sec-rule rule-gold"></div>
  <h2 class="sec-title sec-title-lt reveal">Across Every Format. <em>One Standard.</em></h2>
  <p class="sec-lead sec-lead-lt reveal">The delivery format changes. The quality framework, the domain expertise, the security infrastructure, and the accountability structure do not.</p>

<div class="consistency-grid reveal">
    <div class="con-card">
      <div class="con-num">01 &mdash; Security</div>
      <div class="con-title">ISO 27001 Across Every Format</div>
      <div class="con-body">Whether it is a video production, a certified document, an eLearning module, or a machine translation pipeline — all content is handled within White Globe's ISO 27001-certified infrastructure. NDA-governed teams, role-based access, full audit trail.</div>
    </div>
    <div class="con-card">
      <div class="con-num">02 &mdash; Domain Expertise</div>
      <div class="con-title">Specialist, Not Generalist — in Every Format</div>
      <div class="con-body">The pharma linguist who translates a regulatory submission is the same quality of specialist as the voice artist who narrates its HCP education video. Domain matching is not format-specific — it applies across every deliverable White Globe produces.</div>
    </div>
    <div class="con-card">
      <div class="con-num">03 &mdash; Translation Memory</div>
      <div class="con-title">TM Compounds Across Formats</div>
      <div class="con-body">A terminology glossary built for a certified translation feeds the PEMT engine. The TM from a business translation programme reduces cost in the eLearning localisation. One client, one TM, compounding value across every format and every language pair.</div>
    </div>
    <div class="con-card">
      <div class="con-num">04 &mdash; Quality Framework</div>
      <div class="con-title">Five ISO Certifications Applied to Every Deliverable</div>
      <div class="con-body">ISO 9001 governs process quality. ISO 17100 governs translation quality. ISO 13485 governs regulated content. ISO 18587 governs PEMT. ISO 27001 governs data security. All five apply regardless of which format you choose.</div>
    </div>
    <div class="con-card">
      <div class="con-num">05 &mdash; Single Programme Owner</div>
      <div class="con-title">One Partner Across All Formats — No Hand-Off Gaps</div>
      <div class="con-body">A client producing a regulatory submission, its HCP education video, and the eLearning module for sales training does not need three vendors. One programme manager, one NDA, one quality standard, one audit trail across every format in every language.</div>
    </div>
    <div class="con-card">
      <div class="con-num">06 &mdash; Human + AI Governance</div>
      <div class="con-title">AI Accelerates. Humans Govern. In Every Format.</div>
      <div class="con-body">AI-assisted subtitle generation, PEMT pre-translation, eLearning script drafting, and motion graphics text extraction all benefit from AI velocity. Domain experts, compliance specialists, and cultural reviewers govern every quality gate — across every format.</div>
    </div>
  </div>
</section>

<section class="section s-light" id="comparison">
  <div class="eyebrow ey-blue">Format Comparison</div>
  <div class="sec-rule rule-blue"></div>
  <h2 class="sec-title reveal">Find Your Format <em>at a Glance</em></h2>
  <p class="sec-lead reveal">Not sure which format fits your requirement? This summary maps each format to its primary use cases, typical turnaround, and the certification that governs it.</p>

<div class="reveal" style="overflow-x:auto;">
    <table class="comp-table">
      <thead>
        <tr>
          <th style="width:20%">Format</th>
          <th style="width:25%">Primary use cases</th>
          <th style="width:20%">Typical turnaround</th>
          <th style="width:20%">Governing standard</th>
          <th style="width:15%">Industries</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><div class="ct-format"><div class="ct-dot" style="background:var(--lrn)"></div>eLearning &amp; Learning Content</div></td>
          <td>Safety training, compliance modules, onboarding, product knowledge, HCP education</td>
          <td>Pilot: 3&ndash;4 weeks<br>Full programme: 6&ndash;12 weeks</td>
          <td><span class="ct-tag tag-lrn">SCORM / xAPI</span><span class="ct-tag tag-lrn">ISO 9001</span></td>
          <td>All sectors, especially manufacturing, BFSI, pharma, automotive</td>
        </tr>
        <tr>
          <td><div class="ct-format"><div class="ct-dot" style="background:var(--mlt)"></div>Multimedia, Video &amp; Animation</div></td>
          <td>Safety video, product demos, HCP education, compliance training, brand content</td>
          <td>Standard: 2&ndash;4 weeks<br>Express: 48&ndash;72 hours</td>
          <td><span class="ct-tag tag-mlt">ISO 27001</span><span class="ct-tag tag-mlt">WCAG 2.1</span></td>
          <td>Manufacturing, BFSI, pharma, automotive, aerospace</td>
        </tr>
        <tr>
          <td><div class="ct-format"><div class="ct-dot" style="background:var(--crt)"></div>Certified &amp; Sworn Translation</div></td>
          <td>Legal filings, immigration, official certificates, embassy submissions, corporate registration</td>
          <td>Standard: 2&ndash;5 days<br>Express: 24 hours</td>
          <td><span class="ct-tag tag-crt">ISO 17100</span><span class="ct-tag tag-crt">Apostille-ready</span></td>
          <td>Legal, government, healthcare, corporate</td>
        </tr>
        <tr>
          <td><div class="ct-format"><div class="ct-dot" style="background:var(--pmt)"></div>Post-Edited Machine Translation</div></td>
          <td>High-volume content, e-commerce, internal comms, knowledge bases, software UI strings</td>
          <td>High volume: 24&ndash;48 hours<br>Continuous pipeline</td>
          <td><span class="ct-tag tag-pmt">ISO 18587</span><span class="ct-tag tag-pmt">Lang Tech MT</span></td>
          <td>Retail, tech/SaaS, manufacturing, logistics</td>
        </tr>
        <tr>
          <td><div class="ct-format"><div class="ct-dot" style="background:var(--biz)"></div>Business &amp; Enterprise Translation</div></td>
          <td>Corporate communications, HR, finance, marketing, website, contracts, presentations</td>
          <td>Standard: 1&ndash;5 days<br>Express: same day</td>
          <td><span class="ct-tag tag-biz">ISO 9001</span><span class="ct-tag tag-biz">ISO 17100</span></td>
          <td>All sectors &mdash; general enterprise requirements</td>
        </tr>
        <tr>
          <td><div class="ct-format"><div class="ct-dot" style="background:var(--itp)"></div>Interpretation</div></td>
          <td>Board meetings, court proceedings, medical consultations, conferences, M&amp;A negotiations</td>
          <td>OPI: immediate<br>SI/RSI: 3&ndash;7 days booking</td>
          <td><span class="ct-tag tag-itp">OPI / VRI / RSI</span><span class="ct-tag tag-itp">ISO 17100</span></td>
          <td>Legal, medical, corporate, government, events</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

<section class="cta-section">
  <h2 class="cta-title">
    Not sure which format fits?<br>
    <em>We'll tell you in one conversation.</em>
  </h2>
  <p class="cta-sub">
    Tell us your content type, your audience, and your deadline. Our specialists will recommend the right format, the right quality level, and the right cost model — with no obligation.
  </p>
  <div class="cta-actions">
    <a class="btn-primary" href="mailto:sales@whiteglobe.co.in?subject=Solutions by Format Enquiry">Book a Discovery Call</a>
    <a class="btn-ghost" href="mailto:sales@whiteglobe.co.in?subject=Request Format Recommendation">Request Format Recommendation</a>
  </div>
  <p class="cta-note">sales@whiteglobe.co.in &nbsp;&middot;&nbsp; +91 8799918172 &nbsp;&middot;&nbsp; WhatsApp available &nbsp;&middot;&nbsp; Response within 1 business day</p>
</section>

<footer class="footer">
  <div class="footer-left">&copy; 2025 White Globe Group &nbsp;&middot;&nbsp; <a href="https://www.whiteglobe.co.in" style="color:rgba(255,255,255,0.45)">whiteglobe.co.in</a></div>
  <div class="footer-links">
    <a href="https://www.linkedin.com/company/whiteglobegroupofcompanies" target="_blank">LinkedIn</a>
    <a href="https://bit.ly/whiteglobegroup" target="_blank">YouTube</a>
    <a href="https://www.whiteglobe.co.in/privacy">Privacy</a>
  </div>
  <div class="footer-iso">ISO 9001 &middot; ISO 17100 &middot; ISO 13485 &middot; ISO 27001 &middot; ISO 18587 &middot; WCAG 2.1 &middot; SCORM &middot; xAPI</div>
</footer>

// Generic dropdown factory
function initDropdown(wrapId, triggerId) {
  var wrap    = document.getElementById(wrapId);
  var trigger = document.getElementById(triggerId);
  if (!wrap || !trigger) return;

trigger.addEventListener('click', function(e) {
    e.stopPropagation();
    var isOpen = wrap.classList.contains('open');
    closeOthers();
    isOpen ? close() : open();
  });

trigger.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); closeOthers(); toggle(); }
    if (e.key === 'Escape') { close(); trigger.focus(); }
  });

wrap.querySelectorAll('a[role="menuitem"]').forEach(function(item) {
    item.addEventListener('click', function() { close(); });
  });

wrap.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') { close(); trigger.focus(); }
  });
}

initDropdown('isNavDd',  'isDdTrigger');   // Industry Solutions
initDropdown('sbfNavDd', 'sbfTrigger');    // Solutions by Format
initDropdown('navDd',    'ddTrigger');     // Why White Globe

document.addEventListener('click', function() {
  document.querySelectorAll('.nav-dd-wrap.open, .is-dd-wrap.open, .sbf-wrap.open').forEach(function(w) {
    w.classList.remove('open');
    var t = w.querySelector('[aria-expanded]');
    if (t) t.setAttribute('aria-expanded', 'false');
  });
});
</script>
</body>
</html>