/* ============================================================
   Legal / policy pages — shared stylesheet.
   Used by: privacy-policy.html, modern-slavery-statement.html,
   carbon-reduction-plan.html (prefix `lgl-`).
   These three pages are one template (dark title band over a
   grid + brand image, then a white long-form prose column), so
   they share one stylesheet rather than triplicating it.
   Brand tokens: colors_and_type.css. Chrome: site.css.
   No page JS — static prose, nothing to reveal.
   ============================================================ */

body { margin: 0; background: var(--ax-ink); color: #fff; }
a { color: var(--ax-turquoise); text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- Layout primitives ---------- */
.lgl-root { position: relative; background: var(--ax-ink); color: #fff; font-family: var(--font-text); overflow: hidden; }
.lgl-nav-wrap { position: relative; z-index: 20; margin-bottom: -78px; }
.lgl-container { position: relative; max-width: 1560px; margin: 0 auto 0 6vw; }

.mono { font-family: 'IBM Plex Mono', monospace; }
.lgl-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .22em; line-height: 1.2; color: var(--ax-turquoise); margin: 0 0 26px; }
.lgl-divider { height: 2px; background: linear-gradient(to right, transparent, rgba(26,206,188,.75), transparent); }

/* ---------- Title band (dark) ---------- */
.lgl-title { position: relative; overflow: hidden;
      background-image: linear-gradient(rgba(26,206,188,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26,206,188,.05) 1px, transparent 1px);
      background-size: 48px 48px; }
.lgl-title__media { position: absolute; top: 0; right: 1.5%; width: 46%; height: 100%; max-height: 420px; overflow: hidden; pointer-events: none;
      -webkit-mask-image: radial-gradient(130% 130% at 95% 6%, #000 30%, transparent 78%), linear-gradient(to left, transparent 0, #000 14%), linear-gradient(to right, transparent 0, #000 12%);
      mask-image: radial-gradient(130% 130% at 95% 6%, #000 30%, transparent 78%), linear-gradient(to left, transparent 0, #000 14%), linear-gradient(to right, transparent 0, #000 12%);
      -webkit-mask-composite: source-in; mask-composite: intersect; }
.lgl-title__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: brightness(1.62) saturate(1.2); }
.lgl-title__media-wash1 { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(4,20,27,0), rgba(2,12,16,.24) 66%, var(--ax-ink) 100%); mix-blend-mode: multiply; }
.lgl-title__media-wash2 { position: absolute; inset: 0; background: radial-gradient(90% 90% at 88% 12%, rgba(26,206,188,.22), transparent 62%); }
.lgl-title__scrim { position: absolute; inset: 0; background: radial-gradient(115% 100% at 52% 42%, rgba(2,12,16,.12) 0%, rgba(2,12,16,.56) 62%, rgba(2,12,16,.8) 100%); }
/* Shared hero-inner top padding keeps the heading starting at the same
   vertical point as every other page (overrides the design's 150px). */
.lgl-title__inner { position: relative; z-index: 2; max-width: 1560px; margin: 0 auto 0 6vw;
      padding: clamp(120px, 16vw, 200px) clamp(24px, 4vw, 56px) clamp(56px, 8vw, 72px); }
.lgl-title__h { font-family: var(--font-display); font-weight: 300; font-size: clamp(38px, 6vw, 56px); line-height: 1.04; letter-spacing: -.02em; margin: 0; max-width: 20ch; }
.lgl-title__sub { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .14em; color: rgba(255,255,255,.5); margin: 24px 0 0; }

/* ---------- Content (light) — long-form prose ---------- */
.lgl-content { background: #fff; color: var(--ax-ink-2); padding: clamp(56px, 8vw, 80px) clamp(24px, 4vw, 56px) clamp(72px, 11vw, 104px); }
.lgl-prose { max-width: 78ch; }
.lgl-prose > .lgl-lead { font-size: clamp(17px, 2vw, 19px); color: rgba(4,20,27,.7); }
.lgl-prose h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 3.4vw, 30px); line-height: 1.2; margin: 56px 0 18px; color: var(--ax-ink-2); }
.lgl-prose h2:first-child { margin-top: 0; }
.lgl-prose h3 { font-family: var(--font-text); font-weight: 600; font-size: 17px; line-height: 1.4; margin: 34px 0 12px; color: var(--ax-ink-2); }
.lgl-prose p { font-weight: 300; font-size: 17px; line-height: 1.75; color: rgba(4,20,27,.78); margin: 0 0 18px; text-wrap: pretty; }
.lgl-prose ul, .lgl-prose ol { margin: 0 0 18px; padding-left: 22px; }
.lgl-prose li { font-weight: 300; font-size: 17px; line-height: 1.75; color: rgba(4,20,27,.78); margin-bottom: 10px; text-wrap: pretty; }
.lgl-prose em { font-style: italic; }
.lgl-prose strong { font-weight: 600; color: var(--ax-ink-2); }
.lgl-prose a { color: var(--ax-turquoise-ink); text-decoration: none; }
.lgl-prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lgl-prose hr { border: 0; border-top: 1px solid rgba(4,20,27,.14); margin: 48px 0; }

/* ---------- Emissions tables (carbon reduction plan) ---------- */
.lgl-etab { width: 100%; max-width: 520px; border-collapse: collapse; margin: 0 0 22px; }
.lgl-etab caption { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .18em; color: rgba(4,20,27,.45); text-align: left; padding-bottom: 12px; }
.lgl-etab th { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; font-weight: 500; color: rgba(4,20,27,.5); text-align: left; padding: 0 0 10px; border-bottom: 1px solid rgba(4,20,27,.16); }
.lgl-etab th:last-child, .lgl-etab td:last-child { text-align: right; }
.lgl-etab td { font-size: 17px; font-weight: 300; color: rgba(4,20,27,.78); padding: 13px 0; border-bottom: 1px solid rgba(4,20,27,.09); }
.lgl-etab tr:last-child td { font-weight: 500; color: var(--ax-ink-2); border-bottom: 0; border-top: 1px solid rgba(4,20,27,.16); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .lgl-container,
  .lgl-title__inner { margin-left: auto; margin-right: auto; }
  .lgl-title__media { display: none; }
}