/* ============================================================
   GOTHAM FONT FAMILY — site-wide @font-face declarations.
   Placed in protect.css because it's the one CSS file loaded by
   nearly every page. Lazy-fetched (font-display: swap) so the
   browser only downloads weights the page actually uses.
============================================================ */
@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/gotham/Gotham-Thin.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/gotham/Gotham-Thin-Italic.otf') format('opentype');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/gotham/Gotham-Extra-Light.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/gotham/Gotham-Extra-Light-Italic.otf') format('opentype');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/gotham/Gotham-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/gotham/Gotham-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham Book';
  src: url('/assets/fonts/gotham/Gotham-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/gotham/Gotham-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/gotham/Gotham-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham Bold';
  src: url('/assets/fonts/gotham/Gotham-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/gotham/Gotham-Bold-Italic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/gotham/Gotham-Black.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('/assets/fonts/gotham/Gotham-Ultra.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* protect.css — Motley Exim Co. lightweight media protection (Balanced level).
 * Pairs with /assets/js/protect.js. Makes images / animations awkward to grab:
 *   - blocks drag-to-save of media
 *   - suppresses the iOS Safari long-press "Save Image" callout
 *   - stops media being included in text selections
 * NOTE: pointer-events is intentionally left alone so image links / clickable
 * hero animations keep working. Body text stays fully selectable for usability,
 * accessibility and SEO — only media elements are locked down here.
 */
img,
picture,
canvas,
video,
svg {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================================================
   Responsive tables (audit fix 2026-06-28). Bare <table> elements overflowed
   narrow viewports on ~36 pages (country/legal/statistics). protect.css loads
   on every page after each page's inline <style>, so this is additive: tables
   keep their per-page width:100%; on overflow they scroll instead of pushing
   the viewport sideways.
   ============================================================================ */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ============================================================================
   Colour-contrast fixes (audit fix 2026-06-28, WCAG 2.2 AA 1.4.3). Centralised
   overrides, each verified to >=4.5:1 with axe-core. Loaded last so they win by
   source order; the footer variable needs !important because its <style> is
   injected in <body> (later than this <head> sheet).
   ============================================================================ */
/* Site-wide footer faint grey (--me-ink-3 was oklch(60%) ~ #837f7b @ 4.38:1) */
.me-footer { --me-ink-3: #9a958f !important; }                 /* ~5.9:1 on #1a1a1a */
.me-footer__updated { opacity: 1 !important; }                 /* was .72 inline -> blended fail */
/* Blog index hub labels */
.i-tag, .p-num { color: #5c7830; }                             /* 4.58:1 on #fff */
.hub-stats .lbl { color: #4d6528; }                            /* ~6:1 on #f5f5f0 */
/* Blog-post related-card labels (all posts) */
.related-card .rc-label { color: #5c7830; }                    /* 4.58:1 on #fff */
/* Product WhatsApp CTA — white text needs a darker green */
.btn-wa, .btn-wa:hover { background: #15803c; }                /* white ~5.1:1 */
/* Innovation collab/timeline tags on brown #5c3317 */
.rnd-tile-tag { color: #c9a87a; }                              /* ~4.8:1 */
.rnd-tile-tag.priority, .timeline-when { color: #b8c46a; }     /* ~5.7:1 */
.collab-content p { color: #cdb088; }                          /* ~5.2:1 */
/* Help & support contact cards / response note (only help-support uses --h-sand2) */
:root { --h-sand2: #b8945f; }                                  /* drop .8 alpha -> 5.9:1 on #2d1a0e */
.form-response-note { color: #b8945f; }
/* Defence-applications progress label on dark hero */
#progress-count, .progress-count { color: #c2a06a; }
/* Auto-breadcrumb on a dark hero (class added by breadcrumb.js). Default
   breadcrumb text is dark for light pages; on dark heroes it was near-invisible. */
.me-breadcrumb--on-dark { color: rgba(245,245,240,.72); }
.me-breadcrumb--on-dark .me-breadcrumb__item [aria-current="page"] { color: #fff; }
.me-breadcrumb--on-dark .me-breadcrumb__sep { color: rgba(245,245,240,.4); }
.me-breadcrumb--on-dark .me-breadcrumb__item a:hover { color: #e8d9a8; }
/* Skip-link: product pages carry the <a class="skip-link"> element but no skip-link
   CSS, so it rendered as a low-contrast default link (#9e9eff on #fafaf7 = 2.28:1).
   Give it the standard accessible pattern site-wide: hidden off-screen with its own
   dark background (so contrast is measured #fff-on-#1a1a1a = pass), revealed as a
   high-contrast banner on keyboard focus. Audit fix 2026-06-28. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100001;
  background: #1a1a1a; color: #fff;
  padding: .6rem 1rem; text-decoration: none; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; outline: 2px solid #c9a84c; outline-offset: 2px; }