/*
 * UNOC Brand Overrides
 *
 * Corrects the global colour, typography and component tokens to align with the
 * official UNOC Brand Guide / Identity Manual 2026, while preserving the existing
 * layout and component structure.
 */

/* Import Poppins as the primary brand typeface */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Re-map legacy template variables to official brand tokens where possible */
  --background: 0 0% 100%;              /* white page background */
  --foreground: 0 1% 25%;               /* charcoal text */
  --card: 0 0% 100%;
  --card-foreground: 0 1% 25%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 1% 25%;
  --primary: 349 100% 44%;              /* UNOC red */
  --primary-foreground: 0 0% 100%;
  --secondary: 45 100% 51%;             /* UNOC yellow */
  --secondary-foreground: 0 0% 0%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 1% 45%;
  --accent: 45 100% 51%;                /* UNOC yellow */
  --accent-foreground: 0 0% 0%;
  --destructive: 349 100% 44%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 89%;
  --input: 0 0% 89%;
  --ring: 349 100% 44%;

  /* Alias the design-system tokens */
  --unoc-background: var(--unoc-white);
  --unoc-foreground: var(--unoc-charcoal);
  --unoc-page-bg: var(--unoc-white);
  --unoc-page-text: var(--unoc-text);
}

html {
  scroll-behavior: smooth;
}

body,
body.unoc-theme,
body.unoc-inner-page,
body.unoc-redesigned-page {
  font-family: var(--unoc-font-brand) !important;
  background: var(--unoc-background) !important;
  color: var(--unoc-page-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Neutralise old decorative serif/display faces on public pages */
body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body a,
body li,
body span,
body button,
body input,
body textarea,
body select,
body label,
body strong,
body small,
body blockquote,
body figcaption {
  font-family: inherit;
}

.font-sans,
.font-serif,
.font-mono {
  font-family: var(--unoc-font-brand) !important;
}

/* Global focus */
:focus-visible {
  outline: var(--unoc-focus-outline) !important;
  outline-offset: 3px !important;
  box-shadow: var(--unoc-focus-ring) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  border-radius: var(--unoc-radius-sm);
}

/* Header / navigation ------------------------------------------------------ */
.unoc-site-header,
header.unoc-site-header,
nav.unoc-site-header {
  --header-surface: rgba(255, 255, 255, 0.94);
  --header-text: var(--unoc-charcoal);
  --header-border: rgba(65, 64, 66, 0.12);
  background: var(--header-surface) !important;
  color: var(--header-text) !important;
  border-color: var(--header-border) !important;
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

.unoc-site-header a,
.unoc-site-header button,
.unoc-site-header .unoc-nav-trigger {
  color: var(--header-text) !important;
}

.unoc-site-header a:hover,
.unoc-site-header button:hover,
.unoc-site-header .unoc-nav-trigger:hover {
  color: var(--unoc-red) !important;
}

/* Logo swap: normal logo on inner pages / when scrolled; dark logo on transparent dark hero */
.unoc-site-header .unoc-logo-light,
body.unoc-scrolled .unoc-site-header .unoc-logo-light {
  display: block !important;
}

.unoc-site-header .unoc-logo-dark,
body.unoc-scrolled .unoc-site-header .unoc-logo-dark {
  display: none !important;
}

body.unoc-dark-hero:not(.unoc-scrolled) .unoc-site-header,
body.unoc-careers-dark-hero:not(.unoc-scrolled) .unoc-site-header {
  --header-surface: linear-gradient(to bottom, rgba(26, 25, 26, 0.55), rgba(26, 25, 26, 0.18));
  --header-text: var(--unoc-white);
  --header-border: rgba(255, 255, 255, 0.14);
  background: var(--header-surface) !important;
  box-shadow: none !important;
}

body.unoc-dark-hero:not(.unoc-scrolled) .unoc-site-header img.unoc-logo-light,
body.unoc-careers-dark-hero:not(.unoc-scrolled) .unoc-site-header img.unoc-logo-light {
  display: none !important;
}

body.unoc-dark-hero:not(.unoc-scrolled) .unoc-site-header img.unoc-logo-dark,
body.unoc-careers-dark-hero:not(.unoc-scrolled) .unoc-site-header img.unoc-logo-dark {
  display: block !important;
}

/* Mega-menu dropdowns */
.unoc-submenu {
  background: var(--unoc-white) !important;
  border: 1px solid var(--unoc-border) !important;
  box-shadow: var(--unoc-shadow-medium) !important;
  border-radius: var(--unoc-radius-md) !important;
}

.unoc-submenu h4 {
  color: var(--unoc-charcoal) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--unoc-text-xs);
}

.unoc-submenu a {
  color: var(--unoc-text-secondary) !important;
}

.unoc-submenu a:hover,
.unoc-submenu a:focus-visible {
  color: var(--unoc-red) !important;
  background: var(--unoc-surface-soft);
}

/* Mobile drawer */
.unoc-mobile-drawer {
  background: var(--unoc-white) !important;
  color: var(--unoc-charcoal) !important;
}

.unoc-mobile-drawer a,
.unoc-mobile-drawer button {
  color: var(--unoc-charcoal) !important;
}

.unoc-mobile-group.is-open .unoc-mobile-group-toggle {
  color: var(--unoc-red) !important;
}

/* Hero (homepage) ---------------------------------------------------------- */
.unoc-hero-enhanced {
  color: var(--unoc-white) !important;
  background-color: var(--unoc-charcoal) !important;
}

/* Remove Elementor's default 10px column padding inside the full-bleed hero widget */
body.unoc-dark-hero .elementor-section:has(.unoc-hero-enhanced) .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.elementor-element-populated:has(.unoc-hero-enhanced) {
  padding: 0 !important;
}

.unoc-hero-enhanced h1,
.unoc-hero-enhanced h1 *,
.unoc-hero-enhanced h2,
.unoc-hero-enhanced h3,
.unoc-hero-enhanced p,
.unoc-hero-enhanced [class*="text-foreground"] {
  color: var(--unoc-white) !important;
}

.unoc-hero-enhanced [class*="text-primary"],
.unoc-hero-enhanced h1 em,
.unoc-hero-enhanced h1 [class*="text-primary"] {
  color: var(--unoc-yellow) !important;
}

.unoc-hero-enhanced .bg-gradient-to-t {
  background-image: linear-gradient(to top, rgba(26, 25, 26, 0.98), rgba(26, 25, 26, 0.68), rgba(26, 25, 26, 0.24)) !important;
}

.unoc-hero-enhanced button,
.unoc-hero-enhanced .btn {
  background-color: var(--unoc-red) !important;
  color: var(--unoc-white) !important;
}

.unoc-hero-enhanced button:hover,
.unoc-hero-enhanced .btn:hover {
  background-color: #b8002b !important;
}

.unoc-hero-enhanced button svg,
.unoc-hero-enhanced button svg * {
  stroke: var(--unoc-white) !important;
}

/* Footer ------------------------------------------------------------------- */
.unoc-site-footer,
footer.unoc-site-footer,
.site-footer {
  background: var(--unoc-charcoal) !important;
  color: var(--unoc-white) !important;
  border-top: 0;
}

.unoc-site-footer *,
footer.unoc-site-footer * {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

html body .unoc-site-footer h1,
html body .unoc-site-footer h2,
html body .unoc-site-footer h3,
html body .unoc-site-footer h4,
html body .unoc-site-footer h5,
html body .unoc-site-footer strong,
html body .unoc-site-footer .footer-logo span,
html body.unoc-theme:not(.page-id-473) .unoc-site-footer h5,
html body.unoc-theme:not(.page-id-473) .unoc-site-footer strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.unoc-site-footer p,
.unoc-site-footer li,
.unoc-site-footer span,
.unoc-site-footer a {
  color: rgba(255, 255, 255, 0.78) !important;
}

.unoc-site-footer a:hover,
.unoc-site-footer a:focus-visible {
  color: var(--unoc-yellow) !important;
}

.unoc-site-footer .footer-logo-mark img {
  filter: none !important;
}

.unoc-site-footer,
footer.unoc-site-footer,
.site-footer {
  overflow: visible !important;
}

.unoc-site-footer .footer-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)) !important;
  gap: 40px 36px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1200px !important;
}

.unoc-site-footer .footer-brand-block,
.unoc-site-footer .footer-col {
  min-width: 0 !important;
  max-width: none !important;
}

.unoc-site-footer .footer-col ul {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.unoc-site-footer .footer-col li a {
  display: block !important;
  padding: 6px 0 !important;
  line-height: 1.4 !important;
}

.unoc-site-footer .footer-col li a::after {
  content: " →";
  color: #ffc808;
}

.unoc-site-footer .footer-connect {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.unoc-site-footer .footer-connect p {
  margin: 0 !important;
}

.unoc-site-footer .social-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.unoc-site-footer .social-row a {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #ffc808 !important;
  color: #414042 !important;
  border: 0 !important;
}

.unoc-site-footer .social-row a svg {
  display: none !important;
}
.unoc-site-footer .social-row a::before {
  color: #414042 !important;
  font-family: "Font Awesome 5 Brands" !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
.unoc-site-footer .social-row a:nth-child(1)::before { content: "\f0e1"; }
.unoc-site-footer .social-row a:nth-child(2)::before { content: "\f16d"; }
.unoc-site-footer .social-row a:nth-child(3)::before { content: "\f099"; }
.unoc-site-footer .social-row a:nth-child(4)::before { content: "\f167"; }
.unoc-site-footer .social-row a:nth-child(5)::before { content: "\e07b"; }
}

.unoc-site-footer .social-row a:hover,
.unoc-site-footer .social-row a:focus-visible {
  background: #e10032 !important;
  color: #fff !important;
}

.unoc-site-footer .social-row a:hover::before,
.unoc-site-footer .social-row a:focus-visible::before {
  color: #fff !important;
}

.unoc-site-footer .footer-connect .unoc-footer-careers-btn,
.unoc-site-footer a.unoc-footer-careers-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 4px 0 0 !important;
  padding: 12px 20px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #e10032 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  transform: none !important;
  aspect-ratio: auto !important;
}

.unoc-site-footer .unoc-footer-careers-btn:hover,
.unoc-site-footer .unoc-footer-careers-btn:focus-visible,
.unoc-site-footer a.unoc-footer-careers-btn:hover,
.unoc-site-footer a.unoc-footer-careers-btn:focus-visible {
  background: #b8002b !important;
  color: #fff !important;
  transform: none !important;
}

/* Canonical fourth footer column: one shared renderer on the home page and
 * every internal page. The yellow action deliberately distinguishes the
 * careers pathway without changing the footer's core charcoal palette. */
.unoc-site-footer .footer-careers-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.055)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 36px rgba(0,0,0,.2) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
  overflow: hidden !important;
}

.unoc-site-footer .footer-careers-card h5 {
  margin: 0 !important;
  color: #fff !important;
}

.unoc-site-footer .footer-careers-card .footer-careers-copy {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 0.97rem !important;
  line-height: 1.55 !important;
}

.unoc-site-footer .footer-careers-card .unoc-footer-careers-btn {
  gap: 10px !important;
  margin-top: 4px !important;
  background: #ffc808 !important;
  color: #252427 !important;
}

.unoc-site-footer .footer-careers-card .unoc-footer-careers-btn:hover,
.unoc-site-footer .footer-careers-card .unoc-footer-careers-btn:focus-visible {
  background: #fff !important;
  color: #252427 !important;
}

.unoc-site-footer .footer-careers-secondary {
  color: #fff !important;
  font-weight: 650 !important;
}

.unoc-site-footer .footer-careers-secondary span {
  color: #ffc808 !important;
  margin-left: 5px !important;
}

.unoc-site-footer .footer-careers-secondary:hover,
.unoc-site-footer .footer-careers-secondary:focus-visible {
  color: #ffc808 !important;
}

/* Preserve the card's glass surface against generic footer-column resets. */
html body.unoc-theme .unoc-site-footer .footer-top .footer-careers-card {
  background-color: rgba(255, 255, 255, 0.10) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.045)) !important;
}

/* Canonical footer layout: full-bleed charcoal surface, using the exact same
 * shared content container and gutters as the rest of the website. */
html body.unoc-theme .unoc-site-footer {
  width: 100% !important;
  padding: clamp(3.5rem, 6vw, 4.75rem) 0 1.5rem !important;
  background: linear-gradient(125deg, #3b3a3d 0%, #333336 75%, #383737 100%) !important;
}
html body.unoc-theme .unoc-site-footer > .container {
  width: 100% !important;
  max-width: var(--unoc-content-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--unoc-gutter) !important;
}
html body.unoc-theme .unoc-site-footer .footer-top {
  grid-template-columns: minmax(0, 1.17fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.03fr) !important;
  gap: clamp(1.875rem, 3.5vw, 3.875rem) !important;
}
html body.unoc-theme .unoc-site-footer .footer-brand-block {
  max-width: none !important;
}
html body.unoc-theme .unoc-site-footer .footer-logo img {
  width: 190px !important;
  height: auto !important;
  max-height: 74px !important;
  object-fit: contain !important;
}
html body.unoc-theme .unoc-site-footer .footer-addr {
  margin-top: 2px !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.035) !important;
}
html body.unoc-theme .unoc-site-footer .footer-col ul {
  gap: 18px !important;
}
@media (max-width: 1040px) {
  html body.unoc-theme .unoc-site-footer .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  html body.unoc-theme .unoc-site-footer > .container {
    padding-inline: var(--unoc-gutter-mobile) !important;
  }
  html body.unoc-theme .unoc-site-footer .footer-top {
    grid-template-columns: 1fr !important;
    gap: 35px !important;
  }
}

@media (max-width: 1024px) {
  .unoc-site-footer .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .unoc-site-footer .footer-top {
    grid-template-columns: 1fr !important;
  }
}

.unoc-site-footer .gov-badge {
  color: rgba(255, 255, 255, 0.8) !important;
}

.unoc-site-footer .back-to-top {
  background: var(--unoc-red) !important;
  color: var(--unoc-white) !important;
}

/* Containers and readable measure ------------------------------------------ */
.unoc-site-header > .container,
.unoc-site-footer > .container,
main .container,
.unoc-main .container,
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--unoc-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--unoc-gutter) !important;
  padding-right: var(--unoc-gutter) !important;
}

.unoc-site-header > .container-wide,
.unoc-site-footer > .container-wide,
.container-wide {
  max-width: var(--unoc-content-wide) !important;
}

/* Utility: readable prose */
.unoc-prose,
.unoc-reading,
.reading-column,
.editorial-body {
  max-width: var(--unoc-content-narrow);
}

/* Buttons ------------------------------------------------------------------ */
.btn,
.button,
.wp-block-button__link,
.elementor-button {
  font-family: var(--unoc-font-brand) !important;
  font-weight: 600 !important;
  border-radius: var(--unoc-radius-sm) !important;
  transition: background-color var(--unoc-transition-fast), transform var(--unoc-transition-fast), box-shadow var(--unoc-transition-fast);
}

.btn-primary,
.button-primary,
.elementor-button-primary,
[type="submit"],
.btn.unoc-red {
  background-color: var(--unoc-red) !important;
  color: var(--unoc-white) !important;
  border-color: var(--unoc-red) !important;
}

.btn-primary:hover,
.button-primary:hover,
.elementor-button-primary:hover,
[type="submit"]:hover {
  background-color: #b8002b !important;
  border-color: #b8002b !important;
}

.btn-secondary,
.button-secondary,
.elementor-button-secondary {
  background-color: var(--unoc-yellow) !important;
  color: var(--unoc-black) !important;
  border-color: var(--unoc-yellow) !important;
}

.btn-secondary:hover,
.button-secondary:hover,
.elementor-button-secondary:hover {
  background-color: #e6b400 !important;
  border-color: #e6b400 !important;
}

/* Links -------------------------------------------------------------------- */
a {
  color: var(--unoc-red);
  transition: color var(--unoc-transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--unoc-charcoal);
}

/* Form fields -------------------------------------------------------------- */
input,
textarea,
select {
  font-family: var(--unoc-font-brand) !important;
  border: 1px solid var(--unoc-border);
  border-radius: var(--unoc-radius-sm);
  background: var(--unoc-white);
  color: var(--unoc-text);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--unoc-red);
  box-shadow: var(--unoc-focus-ring);
}

/* Fixed header offset for non-dark-hero pages ------------------------------ */
/* The nav is fixed, so inner pages with a light hero need top padding to
 * prevent content from sliding underneath the header. Dark-hero pages
 * (homepage and careers) keep the transparent header overlay. */
body:not(.unoc-dark-hero):not(.unoc-careers-dark-hero) .site-main {
  padding-top: 96px;
}

@media (max-width: 768px) {
  body:not(.unoc-dark-hero):not(.unoc-careers-dark-hero) .site-main {
    padding-top: 88px;
  }
}

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Eyebrow text contrast ---------------------------------------------------- */
/* Gold (#FFC808) on white fails WCAG contrast, so use charcoal text on light
 * backgrounds while keeping the gold accent line. Dark heroes and dark panels
 * retain the gold eyebrow. */
.unoc-redesigned-page .ey {
  color: var(--unoc-charcoal);
}

body.unoc-dark-hero .hero .ey,
body.unoc-careers-dark-hero .hero .ey,
.unoc-redesigned-page .dark .ey,
.unoc-redesigned-page .band .ey,
.unoc-redesigned-page .unoc-site-footer .ey {
  color: var(--unoc-yellow);
}

/* Local unoc8 mobile header and shared footer contrast correction. */
.unoc-shared-footer h4,
.unoc-shared-footer h5 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Who We Are: the statistics band uses a charcoal surface, so its labels and
 * values must stay readable even when Elementor's inline palette is present. */
body.page-id-145 main .unoc-stats,
body.page-id-145 main .unoc-stats .unoc-stat b,
body.page-id-145 main .unoc-stats .unoc-stat span,
body.page-id-145 main .unoc-stats .ey {
  color: #fff !important;
}

body.page-id-145 main .unoc-stats .unoc-stat b::after {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin: 12px 0;
  background: #ededed !important;
}

@media (max-width: 1024px) {
  .unoc-site-header .unoc-mobile-burger,
  .unoc-mobile-burger {
    color: #e51d48 !important;
  }

  .unoc-site-header .unoc-mobile-burger svg,
  .unoc-site-header .unoc-mobile-burger svg * {
    stroke: #e51d48 !important;
  }
}

/* Interior pages use the same readable mobile header treatment as the home
 * page: dark text on a white header, with the UNOC red menu control. */
@media (max-width: 1024px) {
  body.unoc-theme:not(.page-id-473) .unoc-site-header,
  body.unoc-theme:not(.page-id-473) header.unoc-site-header,
  body.unoc-theme:not(.page-id-473) nav.unoc-site-header {
    background: rgba(255,255,255,.98) !important;
    color: #414042 !important;
    border-color: rgba(65,64,66,.12) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  }
  body.unoc-theme:not(.page-id-473) .unoc-site-header a,
  body.unoc-theme:not(.page-id-473) .unoc-site-header button,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .unoc-main-menu > li > a,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .unoc-nav-trigger {
    color: #414042 !important;
    -webkit-text-fill-color: #414042 !important;
  }
  body.unoc-theme:not(.page-id-473) .unoc-site-header .unoc-mobile-burger,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .unoc-mobile-burger svg,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .unoc-mobile-burger svg * {
    color: #e51d48 !important;
    stroke: #e51d48 !important;
    -webkit-text-fill-color: #e51d48 !important;
  }
  body.unoc-theme:not(.page-id-473) .unoc-mobile-menu,
  body.unoc-theme:not(.page-id-473) .unoc-mobile-nav,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .mobile-menu {
    background: #fff !important;
    color: #414042 !important;
  }
  body.unoc-theme:not(.page-id-473) .unoc-mobile-menu a,
  body.unoc-theme:not(.page-id-473) .unoc-mobile-nav a,
  body.unoc-theme:not(.page-id-473) .unoc-site-header .mobile-menu a {
    color: #414042 !important;
    -webkit-text-fill-color: #414042 !important;
  }
}

/* Local unoc8 About page restoration: scoped to page 145, excluding homepage. */
body.page-id-145 .unoc-about-reference{background:#fff;color:#231f20}
body.page-id-145 .unoc-about-wrap{width:min(1200px,calc(100% - 48px));margin:0 auto}
body.page-id-145 .pghero{position:relative;background:linear-gradient(180deg,#fff 0%,#f6f5f3 100%);padding:34px 0 76px;overflow:hidden}
body.page-id-145 .pghero:after{content:"";position:absolute;right:-90px;top:30px;width:430px;height:560px;border:2px solid rgba(65,64,66,.08);border-radius:50%;transform:rotate(-18deg);pointer-events:none}
body.page-id-145 .crumbs{display:flex;gap:12px;margin:0 0 34px;font-size:13px;color:#5f5e60}
body.page-id-145 .crumbs a{color:#e10032;text-decoration:none}
body.page-id-145 .pghero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;position:relative;z-index:1}
body.page-id-145 .pghero h1{font:700 clamp(38px,5.2vw,64px)/1.04 Poppins,sans-serif;letter-spacing:-.03em;margin:20px 0 0;color:#231f20}
body.page-id-145 .pghero h1 em{font-style:normal;color:#e10032}
body.page-id-145 .pghero .lead{margin-top:22px;font-size:18px;line-height:1.65;max-width:520px;color:#5f5e60}
body.page-id-145 .unoc-tri{display:block;width:96px;height:4px;margin-top:18px;background:linear-gradient(90deg,#414042 0 62%,#e10032 62% 100%)}
body.page-id-145 .unoc-about-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
body.page-id-145 .unoc-about-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:6px;font:600 14px/1 Poppins,sans-serif;text-decoration:none}
body.page-id-145 .unoc-about-btn.primary{background:#e10032;color:#fff}.unoc-about-btn.outline{border:1.5px solid #414042;color:#414042}
body.page-id-145 .about-hero-image{aspect-ratio:3/2;border-radius:8px;background:url('/unoc8/wp-content/uploads/2026/10/unoc-about-hero-reference.png') center/cover no-repeat;box-shadow:18px 18px 0 #e10032;min-height:360px}
body.page-id-145 .unoc-about-contact-replacement{background:#242224;color:#fff;padding:72px 0;margin:0}
body.page-id-145 .unoc-about-contact-replacement h2{font:700 clamp(34px,4vw,56px)/1.05 Poppins,sans-serif;margin:16px 0;color:#fff}
body.page-id-145 .unoc-about-contact-replacement p{max-width:620px;color:#d6d4d7;font-size:18px;line-height:1.6}
body.page-id-145 .unoc-about-contact-replacement ul{max-width:760px;margin:34px 0 0;padding:0;list-style:none}.unoc-about-contact-replacement li{border-bottom:1px solid rgba(255,255,255,.24)}
body.page-id-145 .unoc-about-contact-replacement li a{display:flex;justify-content:space-between;padding:20px 0;color:#fff;text-decoration:none;font-size:18px}.unoc-about-contact-replacement li a span{color:#ff2b57}
@media(max-width:900px){body.page-id-145 .pghero-grid{grid-template-columns:1fr;gap:44px}body.page-id-145 .about-hero-image{min-height:280px}body.page-id-145 .unoc-about-wrap{width:min(100% - 32px,1200px)}}


/* Key Milestones (Who We Are): the photograph is 2:1 and the frame was 3:2, so
 * cover was cropping people off the sides. Widen the image column, compress the
 * copy column, and match the frame to the photo so nothing is cropped. */
@media (min-width: 901px) {
	body.page-id-145 .journey {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
	}

	body.page-id-145 .journey .frameimg {
		aspect-ratio: 879 / 440 !important;
	}
}

body.page-id-145 .journey .frameimg img {
	object-fit: cover !important;
	object-position: 50% 50% !important;
}

/* The Who We Are hero now carries a group photograph whose own ratio is 2:1.
 * Matching the frame to the image keeps every face in shot instead of cropping
 * a person in half. */
body.page-id-145 .unoc-ref-page .heroimg,
body.page-id-145 .heroimg {
	aspect-ratio: 879 / 440 !important;
	background-size: cover !important;
	background-position: center 32% !important;
}

/* The lower frame swapped to a 4:3 rig photograph; give it that ratio rather
 * than cropping the derrick. */
body.page-id-145 .frameimg {
	aspect-ratio: 772 / 545 !important;
}

body.page-id-145 .frameimg img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* The journey frame now holds a 4:3 rig photograph. This must out-rank the
 * earlier .journey .frameimg rule (879/440) that cropped the derrick. */
body.page-id-145 .journey .frameimg {
	aspect-ratio: 772 / 545 !important;
}

body.page-id-145 .journey .frameimg img {
	object-position: 50% 42% !important;
}