html, body { overflow-x: hidden; }
.about-page { overflow-x: clip; }
.page-shell { min-height: 72vh; padding: 180px 0 140px; background: var(--ivory); }
.page-shell.dark { background: var(--black); color: var(--white); }
.page-shell .display-title { max-width: 850px; }
.page-shell .body-copy { max-width: 650px; margin-top: 30px; }
.page-shell .page-rule { width: 70px; height: 1px; margin-top: 34px; background: var(--gold); }
@media (max-width: 767.98px) {
  .page-shell { min-height: 78vh; padding: 145px 0 90px; }
}

/* Content must remain usable when optional motion assets are unavailable. */
html:not(.motion-ready) .reveal-up,
html:not(.motion-ready) .reveal-image,
html:not(.motion-ready) .about-reveal,
html:not(.motion-ready) .contact-reveal,
html:not(.motion-ready) .product-reveal,
html:not(.motion-ready) .markets-reveal,
html:not(.motion-ready) .buyers-reveal,
html:not(.motion-ready) .supplier-reveal,
html:not(.motion-ready) .how-reveal,
html:not(.motion-ready) .insight-reveal {
  opacity: 1;
  transform: none;
  clip-path: none;
}

html:not(.motion-ready) .hero-main-title .line-mask > span,
html:not(.motion-ready) .insight-hero-title span > span,
html:not(.motion-ready) .how-hero .eyebrow,
html:not(.motion-ready) .how-hero-text,
html:not(.motion-ready) .hero-actions,
html:not(.motion-ready) .how-hero-visual,
html:not(.motion-ready) .trade-insights-hero .eyebrow,
html:not(.motion-ready) .insight-hero-text,
html:not(.motion-ready) .trade-hero-visual {
  opacity: 1;
  transform: none;
}

img {
  max-width: 100%;
}

@media (max-width: 1199.98px) {
  .nav-enquiry-item { margin: 8px 0 4px; }
  .nav-enquiry-item .nav-cta { width: 100%; justify-content: space-between; }
}

@media (min-width: 1200px) {
  .nav-shell { position: relative; }
  .nav-shell .navbar-collapse { justify-content: center; }
  .nav-shell .main-menu { justify-content: center; padding-right: 150px; }
  .nav-shell .nav-enquiry-item {
    position: absolute;
    top: 23px;
    right: 4vw;
    margin: 0;
  }
}