/* ==========================================================================
   ORA International - foundation
   Tokens, reset, typography, layout, header, drawer, search, footer

   The layout geometry, header behaviour and component rhythm follow the
   nchme.com reference build. The palette is derived from the ORA logo:
   navy #09315A and gold #AD8C69 are sampled directly from the artwork, and
   every other token is built from those two.
   ========================================================================== */

:root {
  /* --- brand, sampled from FINAL LOGO ORA ------------------------------- */
  --navy: #09315a;          /* ORA wordmark + emblem sphere */
  --navy-deep: #061f3b;     /* dark sections, dropdowns, footer base */
  --navy-mid: #14477c;      /* hover / gradient partner */
  --navy-soft: #e9eff6;     /* tinted panels */
  --gold: #ad8c69;          /* "INTERNATIONAL" + the emblem ring */
  --gold-light: #c9a96b;    /* gold on dark ground */
  --gold-ink: #8c6d45;      /* gold that still passes contrast as text */
  --gold-soft: #f6f1e9;
  --steel: #658ba9;         /* emblem highlight blue */

  /* --- neutrals --------------------------------------------------------- */
  --ink: #0e2136;
  --ink-soft: #24384f;
  --body: #5c6b7d;
  --muted: #a3b4c6;
  --line: #dde4ec;
  --bg-alt: #f5f7fa;
  --white: #fff;

  --font-head: Jost, "Century Gothic", "Trebuchet MS", sans-serif;
  --font-body: Tahoma, Verdana, "Segoe UI", sans-serif;

  --container: 1245px;
  --gutter: 27px;

  /* Header geometry: an 80px nav row inside 10px/6px padding gives a 96px
     header (96px tablet, 82px mobile) - trimmed from the nchme.com
     reference's 160px, which read as too tall. The row condenses once the
     bar sticks. */
  --nav-h: 80px;
  --nav-h-stuck: 64px;
  --header-pad-x: 90px;
  --header-pad-top: 10px;
  --header-pad-bottom: 6px;
  --header-h: calc(var(--nav-h) + var(--header-pad-top) + var(--header-pad-bottom));
  /* Same sum once the bar sticks and the row condenses. Anything that pins
     itself under the header needs this, not --nav-h-stuck: that is the inner
     row only and leaves the header's own padding unaccounted for. */
  --header-h-stuck: calc(var(--nav-h-stuck) + var(--header-pad-top) + var(--header-pad-bottom));
  /* Height of the Brands page's sticky category bar. It lives here beside the
     header geometry because the channel sections are siblings of the bar and
     cannot inherit it, yet their anchor offset is header + bar. */
  --channel-bar-h: 58px;
  /* Dropdown opens just above the foot of the row, clear of the label. */
  --submenu-top: 92%;

  --shadow-sm: 0 2px 10px rgba(9, 49, 90, 0.07);
  --shadow-md: 0 14px 38px rgba(9, 49, 90, 0.13);
  --shadow-lg: 0 24px 60px rgba(9, 49, 90, 0.16);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- reset -- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--navy);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

a:hover { color: var(--gold-ink); }

button { font: inherit; }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200000;
  padding: 10px 18px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.skip-link:focus { top: 12px; color: var(--white); }

/* ---------------------------------------------------------- typography -- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.16;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

h1 { font-size: 50px; letter-spacing: 1px; }
h2 { font-size: 36px; }
h3 { font-size: 25px; }
h4 { font-size: 21px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

/* Client-specified body typeface (Tahoma, via --font-body). Headings, labels and
   buttons keep the Jost heading face. */
p {
  margin: 0 0 1.2em;
  font-family: var(--font-body);
}
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.lead { font-size: 17.5px; color: var(--ink-soft); }

.text-center { text-align: center; }

/* Short gold rule under a section title - the ORA reading of the reference's
   accent rule. */
.rule::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 20px auto 0;
  background: var(--gold);
}

.rule-left::after { margin-left: 0; margin-right: auto; }

.section-ink .eyebrow,
.section-navy .eyebrow { color: var(--gold-light); }

/* -------------------------------------------------------------- layout -- */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-wide { max-width: 1560px; }

.section { padding: 84px 0 74px; }
.section-tight { padding: 56px 0; }
.section-alt { background: var(--bg-alt); }
.section-navy { background: var(--navy); }
.section-ink { background: var(--navy-deep); }

.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4,
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 {
  color: var(--white);
}

.section-ink p, .section-navy p { color: rgba(255, 255, 255, 0.8); }

.grid { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.section-head {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}

.section-head p { margin-top: 18px; }
.section-head-left { margin-left: 0; text-align: left; }

/* -------------------------------------------------------------- header -- */

/* Structure and states follow the reference header; ORA adds the logo the
   reference never shows, and sticks the bar on scroll. */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8000;
  padding: var(--header-pad-top) var(--header-pad-x) var(--header-pad-bottom);
  background: transparent;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: var(--container);
  min-height: var(--nav-h);
  margin: 0 auto;
  padding: 0 10px;
  transition: min-height 0.3s var(--ease);
}

.site-header.is-stuck {
  background: var(--white);
  box-shadow: 0 2px 18px rgba(9, 49, 90, 0.12);
}

.site-header.is-stuck .header-inner { min-height: var(--nav-h-stuck); }

/* --------------------------------------------------------------- logo -- */

.site-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px 0;
}

.site-logo img {
  width: auto;
  height: 64px;
  transition: height 0.3s var(--ease);
}

.site-header.is-stuck .site-logo img { height: 50px; }

/* Dark ink over a light bar, reversed over the dark hero and page banners. */
.site-logo .logo-dark { display: none; }
.site-header.is-stuck .logo-dark { display: block; }
.site-header.is-stuck .logo-light { display: none; }

.header-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------- primary nav -- */

.primary-nav { display: none; }

/* Direct child only - submenus must stay stacked. */
.primary-nav > ul {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Reference spacing: 21.75px each side of every item. */
.primary-nav > ul > li { position: relative; padding: 0 21.75px; }

.primary-nav > ul > li > a {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 4.5px;
  border-top: 4px solid transparent;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
  line-height: 22.5px;
  letter-spacing: 1.75px;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s, height 0.3s var(--ease);
}

.site-header.is-stuck .primary-nav > ul > li > a {
  height: var(--nav-h-stuck);
  color: var(--ink);
}

/* Hover, open and current all light the label and the 4px top rule - the
   reference's active indicator, in ORA gold. */
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li.is-open > a,
.primary-nav > ul > li.is-current > a {
  color: var(--gold-light);
  border-top-color: var(--gold);
}

.site-header.is-stuck .primary-nav > ul > li > a:hover,
.site-header.is-stuck .primary-nav > ul > li.is-open > a,
.site-header.is-stuck .primary-nav > ul > li.is-current > a {
  color: var(--gold-ink);
}

.primary-nav .submenu {
  position: absolute;
  top: var(--submenu-top);
  left: 20px;
  z-index: 10000;
  /* The reference box is 201.6px wide. Its condensed display face fits the
     longest label at that width; ORA's is wider, so this is the reference
     width as a floor with room to grow rather than wrapped labels. */
  min-width: 201.6px;
  width: max-content;
  max-width: 320px;
  margin: 0;
  padding: 22.4px 0;
  list-style: none;
  background: var(--navy-deep);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}

.primary-nav li.is-open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav .submenu li { display: block; }

.primary-nav .submenu a {
  position: relative;
  display: block;
  padding: 8.4px 31.5px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 1.65px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s, padding-left 0.3s var(--ease);
}

/* Gold bullet on the hovered / current item. */
.primary-nav .submenu a::before {
  content: "";
  position: absolute;
  left: 14.84px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.3s;
}

.primary-nav .submenu a:hover,
.primary-nav .submenu .is-current > a { color: var(--white); }

.primary-nav .submenu a:hover::before,
.primary-nav .submenu .is-current > a::before { background: var(--gold); }

/* --------------------------------------------------------- icon buttons -- */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: color 0.3s;
}

.site-header.is-stuck .icon-btn { color: var(--ink-soft); }
.icon-btn:hover { color: var(--gold-light); }
.site-header.is-stuck .icon-btn:hover { color: var(--gold-ink); }

.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.menu-toggle { display: inline-flex; }
.menu-toggle svg { width: 21px; height: 21px; }

/* ------------------------------------------------------- mobile drawer -- */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: block;
  padding: 0 0 48px;
  background: var(--navy-deep);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.mobile-nav.is-open { opacity: 1; visibility: visible; }

.mobile-nav-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 66px;
  height: 66px;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
}

.mobile-nav-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }

.mobile-nav-logo {
  display: block;
  width: 148px;
  height: auto;
  margin: 52px auto 0;
}

.mobile-nav ul { margin: 0; padding: 0; list-style: none; }

.mobile-nav > ul {
  width: min(300px, calc(100% - 48px));
  margin: 30px auto 0;
  text-align: left;
}

.mobile-nav .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile-nav a {
  display: block;
  padding: 3px 0;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--white);
  transition: color 0.3s;
}

.mobile-nav a:hover,
.mobile-nav .is-current > .row > a,
.mobile-nav .is-current > a { color: var(--gold-light); }

.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  cursor: pointer;
}

.submenu-toggle svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  transition: transform 0.25s var(--ease);
}

.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.mobile-nav .submenu { display: none; padding: 2px 0 8px; }
.mobile-nav .submenu.is-open { display: block; }

.mobile-nav .submenu a {
  padding: 3px 12px 3px 16px;
  font-size: 14.5px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.72);
}

.mobile-nav .submenu a:hover { color: var(--gold-light); }

.mobile-nav-social {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 34px;
}

.mobile-nav-social a { padding: 0; color: var(--gold); }
.mobile-nav-social svg { width: 17px; height: 17px; fill: currentColor; }

/* ------------------------------------------------------ search overlay -- */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(6, 31, 59, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}

.search-overlay.is-open { opacity: 1; visibility: visible; }

.search-panel { width: 100%; max-width: 720px; }

.search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.search-form input {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  background: none;
  font-family: var(--font-head);
  font-size: 28px;
  letter-spacing: 1px;
  color: var(--white);
}

.search-form input::placeholder { color: rgba(255, 255, 255, 0.4); }
.search-form input:focus { outline: none; }

.search-form button { border: 0; background: none; color: var(--white); cursor: pointer; }
.search-form button svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }

.search-results {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  max-height: 46vh;
  overflow-y: auto;
}

.search-results li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.search-results a { display: block; padding: 13px 0; color: var(--white); }
.search-results a:hover { color: var(--gold-light); }

.search-results .result-title {
  display: block;
  font-family: var(--font-head);
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.search-results .result-meta { display: block; font-size: 13px; color: var(--muted); }

.search-hint { margin-top: 22px; font-size: 14px; color: var(--muted); }

.search-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
}

.search-close svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }

/* -------------------------------------------------------------- footer -- */

.site-footer { background: var(--navy); }

.footer-main {
  padding: 72px 0 56px;
  color: rgba(255, 255, 255, 0.82);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px 30px;
}

/* Column labels. They are h2 rather than h5 so the document outline never
   jumps a level between the page content and the footer landmark. */
.footer-main h2 {
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2.2px;
  line-height: 1.4;
  color: var(--gold-light);
}

.footer-main p { font-size: 14px; line-height: 1.8; }

.footer-address-label {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold-light);
}
.footer-main a { color: var(--white); }
.footer-main a:hover { color: var(--gold-light); }

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-brand img { width: 260px; max-width: 100%; margin-bottom: 26px; }

.footer-tagline {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold-light);
}

.footer-map-link {
  display: inline-block;
  margin: 8px 0 12px;
  font-size: 13px;
  text-decoration: underline;
}

.footer-contact { font-size: 14px; }
.footer-contact a { display: block; }

.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links a { display: block; padding: 5px 0; font-size: 14px; }

.footer-bottom {
  padding: 22px 0;
  background: var(--navy-deep);
  color: var(--muted);
  font-size: 13px;
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--white); }

.social-row { display: flex; gap: 16px; }
.social-row a { color: var(--muted); }
.social-row a:hover { color: var(--gold-light); }
.social-row svg { width: 17px; height: 17px; fill: currentColor; }

/* ------------------------------------------------------- scroll to top -- */

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s,
              background 0.25s var(--ease);
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--gold); }
.to-top svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }

/* --------------------------------------------------- reveal on scroll -- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* "ORA" initials inside "Opportunity in Retail Accelerations" */
.ora-initial {
  font-size: 1.45em;
  line-height: 1;
  color: var(--gold-ink);
}
.section-navy .ora-initial { color: var(--gold-light); }