/* ==========================================================================
   Orion Venture Facility Services — design system
   Consolidated from the Claude Design page sources, where these rules were
   duplicated inline in every page's <style> block.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --navy: #0d2a63;
  --navy-2: #1c3f8f;
  --navy-deep: #08286c;

  --gold: #d9601f;
  --gold-2: #e9a13a;
  --gold-deep: #a84c1c;
  --orange: #d9601f;
  --gold-grad: linear-gradient(135deg, #d9601f, #e07a2a 55%, #e9a13a);
  --gold-soft: rgba(217, 96, 31, .10);
  /* Buttons use the Claude Design amber. It is deliberately not --gold:
     the design shipped a warmer, lighter fill here, and dark ink on it hits
     8.74:1 — the strongest contrast of any option we tested. */
  /* Buttons: solid brand orange with white text, as specified.
     CONTRAST NOTE — #fff on #d9601f is 3.72:1. WCAG AA wants 4.5:1 for text
     this size, so button labels sit just under the bar. #c34f10 is the
     nearest shade that passes (4.72:1) and looks near-identical; swap --btn
     for it if AA compliance is required. Hover is already compliant. */
  --btn: #d9601f;
  --btn-hover: #b8490c;   /* #fff on this is 5.25:1 */

  --ink: #0d2a63;
  --ink-80: rgba(13, 42, 99, .82);
  --ink-70: rgba(13, 42, 99, .74);
  --ink-65: rgba(13, 42, 99, .66);
  --ink-55: rgba(13, 42, 99, .55);
  --ink-30: rgba(13, 42, 99, .30);
  --ink-15: rgba(13, 42, 99, .16);
  --ink-10: rgba(13, 42, 99, .10);
  --border: rgba(13, 42, 99, .12);

  --cream: #fff;
  --sand: #f1f4f9;
  --white: #fff;

  --teal: #d9601f;
  --teal-dark: #a84c1c;
  --teal-deeper: #a63203;
  --action: #0d2a63;
  --action-hover: #1c3f8f;
  --link: #a84c1c;
  --eyebrow: #a84c1c;

  /* The homepage source omitted these two — they came from the design-system
     token files. Unified here with the values the other pages declare. */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Chevron used as a mask for the active mobile-nav marker. */
  --ov-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");

  --header-h: 72px;
  --topbar-h: 36px;
}

/* Anything linkable has to clear the sticky header when jumped to, or the
   heading lands underneath it. */
[id] { scroll-margin-top: calc(var(--header-h) + 26px); }

/* -------------------------------------------------------------------- base */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); }

img { max-width: 100%; }

::selection { background: var(--gold); color: var(--navy); }

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

.ov-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 — sits off-screen until focused. */
.ov-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.ov-skip:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------------ layout */
.ov-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

.ov-sec { padding: 100px 0; }
.ov-section { scroll-margin-top: 118px; }

.ov-split,
.ov-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ov-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ov-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ov-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

/* --------------------------------------------------------------- typography */
.ov-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--gold-deep);
}
.ov-eyebrow-light { color: var(--gold-2); }

.ov-h1 {
  margin: 0;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
}
.ov-h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--navy);
}

.ov-grad-word {
  color: var(--gold-2);
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ov-justify { text-align: justify; }

/* -------------------------------------------------------------- gold rule */
.ov-rule { height: 3px; background: var(--gold-grad); }

/* ------------------------------------------------------------------ topbar */
.ov-topbar {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .82);
}
.ov-topbar-inner {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}
.ov-topbar-cert { font-weight: 600; color: var(--gold-2); }
.ov-topbar-contact { display: flex; align-items: center; gap: 22px; }
.ov-topbar a { color: rgba(255, 255, 255, .82); text-decoration: none; }

/* ------------------------------------------------------------------ header */
.ov-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  transition: box-shadow .3s var(--ease-out);
}
.ov-header.is-scrolled { box-shadow: 0 6px 24px -10px rgba(14, 31, 64, .28); }

.ov-header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ov-logo { display: flex; align-items: center; flex: none; }
.ov-logo img { height: 42px; width: auto; display: block; }

.ov-header-actions { display: flex; align-items: center; gap: 16px; flex: none; }

/* Nine items sit between the logo and the CTA before the 1024px breakpoint
   hands over to the burger. Each carries a gold underline that wipes in on
   hover and stays put on the current page. */
.ov-nav { display: flex; align-items: center; gap: 24px; height: 100%; }
.ov-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: var(--navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: color .22s var(--ease-out);
}
.ov-nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
.ov-nav-link:hover { color: var(--gold-deep); }
.ov-nav-link:hover::after { transform: scaleX(1); opacity: 1; }

/* Active state is driven by <body data-page="…"> so the nav partial stays
   static — no per-page duplication. */
body[data-page="home"]       .ov-nav-link[data-nav="home"],
body[data-page="about"]      .ov-nav-link[data-nav="about"],
body[data-page="services"]   .ov-nav-link[data-nav="services"],
body[data-page="industries"] .ov-nav-link[data-nav="industries"],
body[data-page="projects"]   .ov-nav-link[data-nav="projects"],
body[data-page="insights"]   .ov-nav-link[data-nav="insights"],
body[data-page="media"]      .ov-nav-link[data-nav="media"],
body[data-page="careers"]    .ov-nav-link[data-nav="careers"],
body[data-page="contact"]    .ov-nav-link[data-nav="contact"] {
  color: var(--gold-deep);
}
/* No active underline: the gold colour already marks the current page, and a
   permanent bar under one item reads as a stray mark. Hover still underlines. */
@media (max-width: 1240px) {
  .ov-nav { gap: 17px; }
  .ov-nav-link { font-size: 13.5px; }
  .ov-logo img { height: 38px; }
}

.ov-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--navy);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  color: #fff;
}

.ov-mobile-nav {
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 6px 22px 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 30px -22px rgba(14, 31, 64, .5);
}
.ov-mobile-nav[hidden] { display: none; }
.ov-mobile-nav .ov-nav-link {
  height: auto;
  font-size: 16px;
  padding: 14px 10px;
  margin: 0 -10px;
  border-bottom: 1px solid var(--border);
  border-radius: 2px;
  justify-content: flex-start;
  transition: background .2s var(--ease-out), color .2s var(--ease-out), padding-left .2s var(--ease-out);
}
/* The desktop underline would float in the middle of a stacked row. */
.ov-mobile-nav .ov-nav-link::after { display: none; }
/* A chevron marker rather than a dot: it points at the item and reads as
   navigation, where a floating dot read as a stray bullet. Drawn as a masked
   SVG so it inherits the accent colour. */
.ov-mobile-nav .ov-nav-link::before {
  content: "";
  width: 15px; height: 15px;
  flex: none;
  margin-right: 9px;
  background: var(--gold);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
  -webkit-mask: var(--ov-chev) center / contain no-repeat;
  mask: var(--ov-chev) center / contain no-repeat;
}
.ov-mobile-nav .ov-nav-link:hover,
.ov-mobile-nav .ov-nav-link:focus-visible { background: var(--sand); padding-left: 14px; }
.ov-mobile-nav .ov-nav-link:last-child { border-bottom: 0; }
body[data-page="home"]       .ov-mobile-nav .ov-nav-link[data-nav="home"]::before,
body[data-page="about"]      .ov-mobile-nav .ov-nav-link[data-nav="about"]::before,
body[data-page="services"]   .ov-mobile-nav .ov-nav-link[data-nav="services"]::before,
body[data-page="industries"] .ov-mobile-nav .ov-nav-link[data-nav="industries"]::before,
body[data-page="projects"]   .ov-mobile-nav .ov-nav-link[data-nav="projects"]::before,
body[data-page="insights"]   .ov-mobile-nav .ov-nav-link[data-nav="insights"]::before,
body[data-page="media"]      .ov-mobile-nav .ov-nav-link[data-nav="media"]::before,
body[data-page="careers"]    .ov-mobile-nav .ov-nav-link[data-nav="careers"]::before,
body[data-page="contact"]    .ov-mobile-nav .ov-nav-link[data-nav="contact"]::before { opacity: 1; transform: none; }

/* ----------------------------------------------------------------- buttons */
.ov-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 2px;
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
  transition: background .25s var(--ease-out), color .25s var(--ease-out),
              border-color .25s var(--ease-out), transform .2s var(--ease-out),
              box-shadow .25s var(--ease-out);
}
.ov-btn:active { transform: translateY(1px); }

.ov-btn-sm { padding: 11px 20px; font-size: 13.5px; }
.ov-btn-md { padding: 14px 26px; font-size: 14px; }
.ov-btn-lg { padding: 16px 32px; font-size: 15px; }

.ov-btn-gold {
  background: var(--btn);
  color: #fff;
  border: none;
  box-shadow: 0 10px 24px -10px rgba(217, 96, 31, .55);
}
/* Deeper amber, not navy: the CTA band is navy, so a navy hover made the
   button vanish into its own background. Amber-on-amber reads on both. */
.ov-btn-gold:hover {
  background: var(--btn-hover);
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(184, 73, 12, .65);
}
.ov-btn-navy { background: var(--navy); color: #fff; border: none; }
.ov-btn-navy:hover { background: var(--navy-2); }
.ov-btn-outline {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
}
.ov-btn-outline:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--gold);
}
.ov-btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
  font-weight: 600;
}
.ov-btn-ghost:hover { border-color: var(--navy); color: var(--navy); }

/* ------------------------------------------------------------------- links */
.ov-link { transition: color .2s var(--ease-out); }
.ov-link:hover { color: var(--gold-deep) !important; }

/* ------------------------------------------------------------------- cards */
.ov-card { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.ov-card:hover { transform: translateY(-6px); }

/* A card that draws its own bounds needs padding inside them, or the copy sits
   flush against the edge the hover shadow reveals. Pair .ov-card-tile with
   .ov-card-body on the text — never use the lift shadow without it. */
.ov-card-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ov-card-tile .ov-card-img { border-radius: 0; flex: none; }
.ov-card-body {
  padding: 18px 22px 24px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.ov-card-lift:hover { box-shadow: 0 24px 50px -26px rgba(13, 42, 99, .4); }

.ov-card-title { transition: color .25s var(--ease-out); }
.ov-card:hover .ov-card-title { color: var(--gold-deep); }

.ov-card-img { position: relative; overflow: hidden; border-radius: 2px; }
.ov-card-img > img { transition: transform .85s var(--ease-out); }
.ov-card:hover .ov-card-img > img { transform: scale(1.07); }

/* Fills its container the way the design's <image-slot fit="cover"> did. */
.ov-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ov-duo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 31, 64, .12), rgba(14, 31, 64, .48));
}
.ov-duo-strong {
  background: linear-gradient(180deg, rgba(8, 18, 39, .05), rgba(8, 18, 39, .8));
}

.ov-panel {
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 2px;
}

/* Placeholder for a project or post with no confirmed photograph. Carries the
   emblem so it reads as "image to follow" rather than a failed load — we do
   not borrow another project's photography to fill a gap. */
.ov-noimg {
  background:
    url("../img/orion-emblem.png") center 42% / 84px auto no-repeat,
    linear-gradient(150deg, rgba(40, 74, 134, .14), rgba(14, 33, 71, .08)),
    var(--sand);
  border: 1px solid var(--border);
}
.ov-noimg::after {
  content: "Photography to follow";
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.ov-noimg--sm { background-size: 54px auto; }
.ov-noimg--sm::after { font-size: 9px; bottom: 12px; }
/* On the dark project hero the emblem and caption need to lift off navy. */
.ov-noimg--hero {
  background:
    url("../img/orion-emblem.png") center 40% / 190px auto no-repeat,
    linear-gradient(150deg, #2a4a82, #173059 52%, #0e2147);
  border: 0;
}
.ov-noimg--hero::after { color: rgba(255, 255, 255, .45); bottom: 26%; }

/* Portrait frame that still reads as intentional while the real photograph is
   outstanding — see README "Placeholders to replace". */
.ov-portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 430px;
  height: auto;
  background:
    linear-gradient(150deg, rgba(40, 74, 134, .16), rgba(14, 33, 71, .10)),
    var(--sand);
  border: 1px solid var(--border);
}
.ov-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 30% 18%, rgba(217, 96, 31, .14), transparent 62%);
  pointer-events: none;
}
.ov-portrait > img { position: relative; z-index: 1; }
/* 4:5 portrait in a near-square frame: bias the cover-crop upward so the face
   stays and the trim comes off the lower chest, not the top of the head. */
.ov-portrait > img { object-position: center 18%; }

/* ---------------------------------------------------------- icon medallion */
.ov-ico {
  position: relative;
  background: linear-gradient(150deg, #2a4a82, #173059 52%, #0e2147);
  box-shadow: 0 12px 26px -10px rgba(8, 20, 39, .7),
              inset 0 1px 0 rgba(255, 255, 255, .16),
              inset 0 -3px 8px rgba(0, 0, 0, .4);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ov-ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 90% at 28% 12%, rgba(217, 96, 31, .32), transparent 60%);
  pointer-events: none;
}
.ov-ico-h:hover,
.ov-card:hover .ov-ico {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 22px 38px -12px rgba(8, 20, 39, .85),
              inset 0 1px 0 rgba(255, 255, 255, .18),
              inset 0 -3px 8px rgba(0, 0, 0, .4);
}
.ov-ico-soft {
  background: var(--gold-soft);
  border: 1px solid rgba(217, 96, 31, .35);
  box-shadow: none;
}
.ov-ico-soft::after { display: none; }
.ov-ico-glass {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: none;
}
.ov-ico-glass::after { display: none; }

/* ------------------------------------------------------------------- chips */
.ov-chip { transition: border-color .25s var(--ease-out), color .25s var(--ease-out); }
.ov-chip:hover { border-color: var(--gold) !important; }

/* --------------------------------------------------- hero (shared subpages) */
.ov-hero { position: relative; background: var(--navy); overflow: hidden; }
.ov-hero-media { position: absolute; inset: 0; }
.ov-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 18, 39, .94), rgba(14, 31, 64, .72) 60%, rgba(14, 31, 64, .45));
}
.ov-hero-inner { position: relative; padding: 96px 40px 86px; }
.ov-hero .ov-h1 { color: #fff; max-width: 880px; }
.ov-hero-lead {
  margin: 22px 0 0;
  max-width: 660px;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}
.ov-crumb { font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.ov-crumb a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.ov-crumb-here { color: var(--gold-2); }

.ov-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  /* White label on a deepened orange: #fff on --gold (#d9601f) is only 3.72:1,
     so the tag uses --btn-hover (#b8490c) where white reaches 5.25:1. */
  color: #fff;
  background: var(--btn-hover);
  padding: 6px 11px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------- CTA */
.ov-cta { background: var(--navy); position: relative; overflow: hidden; }
.ov-cta-emblem {
  position: absolute;
  right: -40px;
  bottom: -50px;
  width: 360px;
  opacity: .08;
  pointer-events: none;
}
.ov-cta-inner {
  padding: 74px 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.ov-cta .ov-h2 { color: #fff; font-size: 34px; max-width: 640px; }

/* ------------------------------------------------------------------ footer */
/* A gold hairline separates the footer from the navy CTA above it: the two
   navies are close enough that the boundary was invisible without one. It also
   echoes the rule at the very top of the page. */
.ov-footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .7);
  border-top: 2px solid transparent;
  border-image: var(--gold-grad) 1;
  box-shadow: inset 0 14px 30px -18px rgba(0, 0, 0, .55);
}
.ov-footer-inner { padding: 64px 40px 0; }
.ov-footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 40px; }
.ov-footer-word { display: flex; align-items: baseline; gap: 3px; }
.ov-footer-word span {
  font-size: 23px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
}
.ov-footer-word .gold { color: var(--gold); }
.ov-footer-sub {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-top: 3px;
}
.ov-footer-blurb {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .6);
  max-width: 320px;
  text-align: left;
}
.ov-footer-head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #fff;
}
.ov-footer-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .66);
}
.ov-footer-list a { color: rgba(255, 255, 255, .66); text-decoration: none; }
.ov-footer-bar {
  margin-top: 44px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}
.ov-footer-bar a { color: var(--gold-2); text-decoration: none; font-weight: 600; }

/* -------------------------------------------------------------- form fields */
.ov-field {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.ov-field:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(217, 96, 31, .16);
}
.ov-field[aria-invalid="true"] { border-color: #b3261e; }

.ov-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-55);
  margin-bottom: 6px;
}
.ov-error { margin: 6px 0 0; font-size: 12.5px; color: #b3261e; }

.ov-form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 38px;
  box-shadow: 0 20px 50px -30px rgba(13, 42, 99, .4);
}

/* Honeypot — hidden from humans, tempting to bots. */
.ov-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------- career roles */
.ov-role { transition: padding-left .2s var(--ease-out), background .2s var(--ease-out); }
.ov-role:hover { padding-left: 10px; background: var(--sand); }
.ov-role-row:hover { padding-left: 26px; }   /* no reflow: bar marks it instead */
.ov-role:hover .ov-role-t { color: var(--gold-deep); }
.ov-role-t { transition: color .2s var(--ease-out); }
.ov-role-dark:hover { background: rgba(255, 255, 255, .04); }
.ov-role-dark:hover .ov-role-t { color: var(--gold-2); }

/* ------------------------------------------------------ project filter grid */
.ovp-chip {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background .2s var(--ease-out), color .2s var(--ease-out),
              border-color .2s var(--ease-out);
}
.ovp-chip:hover { border-color: var(--gold); }
/* Selected filter is a control, so it uses the button amber like the rest. */
.ovp-chip[aria-pressed="true"] {
  background: var(--btn);
  color: #fff;
  border-color: var(--btn);
}

/* Filtering is pure CSS off the container's data-cat, so it works before the
   JS loads and degrades to "show everything" if JS never runs.
   !important is required, not lazy: the cards carry an inline display:block
   (preserved from the design markup) which would otherwise win.

   KEEP IN SYNC with the sector keys in inc/data/sectors.php. CSS cannot compare
   two attributes, so each sector needs its own pair — a sector missing from this
   list filters to an empty grid. All twelve are listed. */
.ovp-grid[data-cat]:not([data-cat="all"]) > .ov-card { display: none !important; }
.ovp-grid[data-cat="healthcare"]   > .ov-card[data-c="healthcare"],
.ovp-grid[data-cat="hospitality"]  > .ov-card[data-c="hospitality"],
.ovp-grid[data-cat="education"]    > .ov-card[data-c="education"],
.ovp-grid[data-cat="residential"]  > .ov-card[data-c="residential"],
.ovp-grid[data-cat="commercial"]   > .ov-card[data-c="commercial"],
.ovp-grid[data-cat="mixed-use"]    > .ov-card[data-c="mixed-use"],
.ovp-grid[data-cat="retail"]       > .ov-card[data-c="retail"],
.ovp-grid[data-cat="industrial"]   > .ov-card[data-c="industrial"],
.ovp-grid[data-cat="logistics"]    > .ov-card[data-c="logistics"],
.ovp-grid[data-cat="government"]   > .ov-card[data-c="government"],
.ovp-grid[data-cat="aviation"]     > .ov-card[data-c="aviation"],
.ovp-grid[data-cat="data-centres"] > .ov-card[data-c="data-centres"] { display: block !important; }

.ovp-empty { display: none; margin: 0; font-size: 15px; color: var(--ink-65); }

/* --------------------------------------------------------------- lightbox */
.ov-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 18, 39, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease-out);
  border: 0;
}
.ov-lightbox.is-open { opacity: 1; pointer-events: auto; }
.ov-lightbox img {
  max-width: 90vw;
  max-height: 84vh;
  border-radius: 2px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}
.ov-lightbox-close {
  position: absolute;
  top: 24px; right: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------- homepage project column */
.ov-proj-sticky { position: sticky; top: 108px; align-self: start; }
.ov-proj-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) transparent;
  overscroll-behavior: auto;
}
.ov-proj-scroll::-webkit-scrollbar { width: 6px; }
.ov-proj-scroll::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 9999px; }
.ov-proj-scroll::-webkit-scrollbar-track { background: transparent; }

/* ----------------------------------------------------------- scroll reveal */
.ov-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}
.ov-reveal.in { opacity: 1; transform: none; }

@keyframes ovBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(9px); }
}
@keyframes ovWheel {
  0%   { opacity: 0; transform: translateY(-3px); }
  25%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(7px); }
}
.ov-scroll-cue { animation: ovBounce 2.4s var(--ease-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ov-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ov-card:hover .ov-card-img > img { transform: none !important; }
  .ov-scroll-cue { animation: none !important; }
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .ov-nav { display: none !important; }
  .ov-burger { display: inline-flex !important; }
}

@media (max-width: 900px) {
  .ov-split, .ov-2col, .ov-3col, .ov-detail { grid-template-columns: 1fr !important; }
  .ov-4col, .ov-stat-row { grid-template-columns: 1fr 1fr !important; }
  .ov-footer-cols { grid-template-columns: 1fr 1fr !important; }
  .ov-container { padding-left: 22px !important; padding-right: 22px !important; }
  .ov-topbar { display: none !important; }
  .ov-sec { padding-top: 74px !important; padding-bottom: 74px !important; }
  .ov-hero-inner { padding: 70px 22px 62px !important; }
  .ov-hero-pad { padding-top: 128px !important; padding-bottom: 64px !important; min-height: auto !important; }
  .ov-h1 { font-size: 40px !important; }
  .ov-h2 { font-size: 32px !important; }
  .ov-proj-sticky { position: static !important; }
  .ov-proj-scroll { height: auto !important; overflow: visible !important; padding-right: 0 !important; }
  .ov-proj-fade { display: none !important; }
  .ov-form-card { padding: 26px !important; }
}

@media (max-width: 560px) {
  .ov-4col, .ov-stat-row { grid-template-columns: 1fr !important; }
  .ov-footer-cols { grid-template-columns: 1fr !important; }
  .ov-h1 { font-size: 34px !important; }
  .ov-cta-inner { padding: 56px 22px !important; }
}

/* ------------------------------------------------------------------- print */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ov-header { position: static !important; box-shadow: none !important; }
  .ov-burger, .ov-mobile-nav, .ov-skip, .ov-lightbox { display: none !important; }
  .ov-reveal { opacity: 1 !important; transform: none !important; }
  a { text-decoration: none; }
}

/* ==========================================================================
   Preloader · ticker · parallax · hover · map
   ========================================================================== */

/* --------------------------------------------------------------- preloader */
/* Hidden unless JS adds .is-loading to <html>, so a no-JS visitor and a
   failed script both get the page immediately rather than a stuck curtain. */
.ov-preloader { display: none; }

html.is-loading .ov-preloader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(252, 85, 6, .06), transparent 60%),
    #fff;
  transition: opacity .7s var(--ease-out), visibility .7s var(--ease-out);
}
html.is-loading { overflow: hidden; }

.ov-preloader-logo {
  width: min(300px, 62vw);
  height: auto;
  opacity: 0;
  transform: translateY(12px) scale(.96);
  animation: ovPreMark 1s var(--ease-out) forwards;
}
.ov-preloader-slogan {
  width: min(200px, 44vw);
  height: auto;
  margin-top: 6px;
  /* Wipes in left-to-right, as if the slogan is being written on. */
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: ovPreWipe .85s var(--ease-out) .35s forwards;
}
/* The rail fills on a timer, then snaps to 100% when load actually fires. */
.ov-preloader-rail {
  position: relative;
  width: 168px; height: 2px;
  border-radius: 2px;
  background: rgba(13, 42, 99, .12);
  overflow: hidden;
}
.ov-preloader-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gold-grad);
  transform: scaleX(var(--ov-progress, 0));
  transform-origin: center;
  transition: transform .45s var(--ease-out);
}

/* The reveal: curtain lifts and fades as one movement. */
html.is-done .ov-preloader {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
}

@keyframes ovPreMark {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ovPreWord {
  to { opacity: 1; }
}
@keyframes ovPreWipe {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  20%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Page content settles in behind the lifting curtain. */
html.is-loading body > main,
html.is-loading body > header,
html.is-loading body > .ov-topbar,
html.is-loading body > footer { opacity: 0; }
body > main, body > header, body > .ov-topbar, body > footer {
  transition: opacity .6s var(--ease-out) .1s;
}

@media (prefers-reduced-motion: reduce) {
  html.is-loading .ov-preloader { display: none; }
  html.is-loading { overflow: auto; }
  html.is-loading body > * { opacity: 1 !important; }
  .ov-preloader-logo, .ov-preloader-slogan { animation: none; opacity: 1; transform: none; clip-path: none; }
}

/* ------------------------------------------------------------ stats ticker */
.ov-stat-item { }
.ov-stat-figure {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #fff;
  /* Digits change width as they count; tabular figures stop the row jittering. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.ov-stat-fix { font-size: .78em; }
.ov-stat-label {
  margin-top: 9px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gold-2);
}
.ov-statband .ov-stat-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.ov-statband.in .ov-stat-item { opacity: 1; transform: none; }
.ov-statband.in .ov-stat-item:nth-child(2) { transition-delay: .08s; }
.ov-statband.in .ov-stat-item:nth-child(3) { transition-delay: .16s; }
.ov-statband.in .ov-stat-item:nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .ov-statband .ov-stat-item { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 900px) { .ov-stat-figure { font-size: 36px; } }

/* --------------------------------------------------------------- parallax */
/* The media layer is oversized so it can travel without exposing an edge.
   JS only ever writes transform, which stays off the main thread. */
.ov-parallax { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .ov-parallax { transform: none !important; }
}

/* ------------------------------------------------------- image hover boxes */
/* Standalone images (not inside a card) get the same lift on hover. */
.ov-hoverbox { position: relative; overflow: hidden; }
.ov-hoverbox > img,
.ov-hoverbox > .ov-img {
  transition: transform .9s var(--ease-out), filter .6s var(--ease-out);
}
.ov-hoverbox:hover > img,
.ov-hoverbox:hover > .ov-img { transform: scale(1.06); }

/* A slow gold sheen crossing the image on hover — reads as premium, and is
   cheap: one transform on one pseudo-element. */
.ov-hoverbox::after,
.ov-card .ov-card-img::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  transition: opacity .2s var(--ease-out);
}
.ov-hoverbox:hover::after,
.ov-card:hover .ov-card-img::after {
  opacity: 1;
  animation: ovSheen 1.1s var(--ease-out);
}
@keyframes ovSheen {
  from { left: -60%; }
  to   { left: 115%; }
}

/* Tiles lift their caption slightly as the image zooms. */
.ov-card-tile .ov-card-body { transition: transform .35s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .ov-hoverbox:hover > img, .ov-hoverbox:hover > .ov-img { transform: none; }
  .ov-hoverbox::after, .ov-card .ov-card-img::after { display: none; }
}

/* -------------------------------------------------------------------- map */
.ov-map { position: relative; background: var(--sand); }
.ov-map iframe {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
  filter: grayscale(.35) contrast(1.05);
  transition: filter .5s var(--ease-out);
}
.ov-map:hover iframe { filter: grayscale(0) contrast(1); }

.ov-map-card {
  position: absolute;
  top: 50%;
  left: max(24px, calc((100% - 1240px) / 2 + 40px));
  transform: translateY(-50%);
  width: min(360px, calc(100% - 48px));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 26px 28px;
  box-shadow: 0 30px 60px -32px rgba(14, 31, 64, .55);
}
.ov-map-card-head { display: flex; align-items: center; gap: 13px; }
.ov-map-card-title { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.ov-map-card-sub {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.ov-map-card-addr {
  margin: 16px 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-70);
}
.ov-map-card .ov-btn { width: 100%; justify-content: center; }

@media (max-width: 820px) {
  .ov-map iframe { height: 320px; }
  .ov-map-card {
    position: static;
    transform: none;
    width: auto;
    margin: -40px 22px 0;
    position: relative;
    z-index: 2;
  }
  .ov-map { padding-bottom: 34px; }
}

/* -------------------------------------------------------------------- 404 */
.ov-404 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 78% 20%, rgba(217, 96, 31, .16), transparent 58%),
    var(--navy);
}
.ov-404-num {
  font-family: var(--font-display);
  font-size: clamp(96px, 18vw, 210px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .95;
}
.ov-404-emblem {
  position: absolute;
  right: -70px;
  top: 50%;
  transform: translateY(-50%);
  width: 460px;
  opacity: .07;
  pointer-events: none;
}

/* ==========================================================================
   Mega menu · pills · panel hover · hero slider
   ========================================================================== */

/* --------------------------------------------------------------- mega menu */
/* .ov-nav-item stays static so the panel resolves against .ov-header (which is
   sticky, and therefore the containing block) and can span the full width. */
.ov-nav-item { position: static; display: flex; align-items: center; height: 100%; }
.ov-nav-chev {
  margin-left: 5px;
  transition: transform .3s var(--ease-out);
  opacity: .55;
}
.ov-nav-item.is-open > .ov-nav-link > .ov-nav-chev { transform: rotate(180deg); opacity: 1; }

.ov-mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 30px 60px -30px rgba(14, 31, 64, .45);
  z-index: 60;
}
.ov-mega[hidden] { display: none; }
/* Animate in only once JS has taken over, so a no-JS :hover fallback is instant. */
.ov-mega.is-anim {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.ov-mega.is-anim.is-open { opacity: 1; transform: none; }

.ov-mega-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 34px;
  padding-top: 30px;
  padding-bottom: 30px;
  align-items: start;
}

.ov-mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; }
.ov-mega-card {
  display: flex;
  gap: 13px;
  padding: 13px 14px;
  border-radius: 3px;
  text-decoration: none;
  transition: background .22s var(--ease-out), transform .22s var(--ease-out);
}
.ov-mega-card:hover { background: var(--sand); transform: translateX(3px); }
.ov-mega-ico {
  width: 38px; height: 38px;
  border-radius: 8px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
}
.ov-mega-body { display: flex; flex-direction: column; min-width: 0; }
.ov-mega-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  transition: color .2s var(--ease-out);
}
.ov-mega-card:hover .ov-mega-title { color: var(--gold-deep); }
.ov-mega-sub {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-55);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ov-mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 20px; }
.ov-mega-col { display: flex; flex-direction: column; }
.ov-mega-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 3px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}
.ov-mega-link svg { flex: none; opacity: 0; transition: opacity .2s var(--ease-out); }
.ov-mega-link:hover { background: var(--sand); color: var(--gold-deep); transform: translateX(3px); }
.ov-mega-link:hover svg { opacity: 1; }

.ov-mega-projects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ov-mega-project { text-decoration: none; display: block; }
.ov-mega-project-img {
  position: relative;
  display: block;
  height: 96px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--sand);
}
.ov-mega-project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.ov-mega-project:hover .ov-mega-project-img img { transform: scale(1.07); }
.ov-mega-project-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.ov-mega-project-title {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  transition: color .2s var(--ease-out);
}
.ov-mega-project:hover .ov-mega-project-title { color: var(--gold-deep); }

.ov-mega-feature {
  position: relative;
  display: block;
  border-radius: 3px;
  overflow: hidden;
  min-height: 210px;
  text-decoration: none;
  background: var(--navy);
}
.ov-mega-feature img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: transform .8s var(--ease-out), opacity .4s var(--ease-out);
}
.ov-mega-feature:hover img { transform: scale(1.06); opacity: .62; }
.ov-mega-feature-body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(180deg, rgba(14, 31, 64, .1), rgba(14, 31, 64, .86));
  min-height: 210px;
}
.ov-mega-feature-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-2);
}
.ov-mega-feature-title {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; line-height: 1.3; color: #fff;
}
.ov-mega-feature-cta {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-2);
}
.ov-mega-feature-cta svg { transition: transform .25s var(--ease-out); }
.ov-mega-feature:hover .ov-mega-feature-cta svg { transform: translate(2px, -2px); }

@media (max-width: 1180px) {
  .ov-mega-inner { grid-template-columns: 1fr 250px; }
  .ov-mega-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) { .ov-mega { display: none !important; } }

/* Mobile nav: mega sections become simple expandable groups. */
.ov-mnav-group > .ov-mnav-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: 0; cursor: pointer;
  font: 600 16px/1 var(--font-sans); color: var(--navy);
  padding: 14px 10px; margin: 0 -10px;
  border-bottom: 1px solid var(--border);
}
.ov-mnav-toggle svg { transition: transform .25s var(--ease-out); opacity: .5; }
.ov-mnav-group.is-open .ov-mnav-toggle svg { transform: rotate(180deg); opacity: 1; }
.ov-mnav-panel { display: none; padding: 6px 0 10px 12px; }
.ov-mnav-group.is-open .ov-mnav-panel { display: block; }
.ov-mnav-panel a {
  display: block; padding: 9px 0;
  font-size: 14.5px; font-weight: 600; color: var(--ink-70); text-decoration: none;
}
.ov-mnav-panel a:hover { color: var(--gold-deep); }

/* -------------------------------------------------------------- pill index */
/* Replaces the plain outlined pills — these read as a real index. */
.ov-pillbar { display: flex; flex-wrap: wrap; gap: 10px; }
.ov-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px 11px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color .28s var(--ease-out), border-color .28s var(--ease-out),
              transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
/* Gold fill wipes in from the left rather than snapping on. */
.ov-pill::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--btn);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .34s var(--ease-out);
}
.ov-pill:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(217, 96, 31, .8);
}
.ov-pill:hover::before { transform: scaleX(1); }
.ov-pill-ico {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft);
  transition: background .28s var(--ease-out);
}
.ov-pill:hover .ov-pill-ico { background: rgba(255, 255, 255, .22); }
.ov-pill-ico svg { width: 14px; height: 14px; }
.ov-pill:hover .ov-pill-ico svg { stroke: #fff; }

@media (prefers-reduced-motion: reduce) {
  .ov-pill, .ov-pill::before { transition: none; }
  .ov-pill:hover { transform: none; }
}

/* --------------------------------------------------- static panel hover -- */
/* Every card-shaped block now responds to the pointer — previously the
   service-excellence, purpose/vision and careers-benefit panels were inert. */
.ov-lift {
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out),
              border-color .32s var(--ease-out);
}
.ov-lift:hover {
  transform: translateY(-5px);
  border-color: rgba(217, 96, 31, .45);
  box-shadow: 0 22px 44px -26px rgba(13, 42, 99, .45);
}
.ov-lift .ov-ico { transition: transform .32s var(--ease-out); }
.ov-lift:hover .ov-ico { transform: translateY(-3px) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .ov-lift:hover { transform: none; }
}

/* ------------------------------------------------------- "full scope" cue */
.ov-more {
  display: inline-flex;
  /* In a flex column (the office and service cards) a stretched inline-flex
     spans the full width, and the ::after underline stretched with it — the
     "big line". Shrink to content so the rule sits under the text only. */
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gold-deep);
  position: relative;
  padding-bottom: 3px;
}
.ov-more::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease-out);
}
.ov-card:hover .ov-more::after,
.ov-more:hover::after { transform: scaleX(1); }
.ov-more svg { transition: transform .3s var(--ease-out); }
.ov-card:hover .ov-more svg,
.ov-more:hover svg { transform: translate(3px, -3px); }

/* ------------------------------------------------------------ stat figure */
/* "USD 500M" needs air: the prefix reads as a unit label, the suffix as a
   magnitude — neither should crowd the number. */
.ov-stat-figure { gap: 0; align-items: baseline; }
.ov-stat-fix {
  font-size: .46em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.ov-stat-fix:first-child { margin-right: .34em; }
.ov-stat-fix:last-child  { margin-left: .22em; letter-spacing: .04em; }
.ov-stat-label { max-width: 22ch; }

/* ----------------------------------------------------------- hero slider */
.ov-heroslides { position: absolute; inset: 0; overflow: hidden; }
.ov-heroslide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.ov-heroslide.is-active { opacity: 1; }
.ov-heroslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Slow drift keeps a still frame from feeling static between changes. */
.ov-heroslide.is-active img { animation: ovKenBurns 12s linear forwards; }
@keyframes ovKenBurns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.09); }
}

.ov-herodots {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  display: flex; justify-content: center; gap: 9px;
  z-index: 3;
}
.ov-herodot {
  width: 30px; height: 3px;
  border-radius: 3px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background .3s var(--ease-out), width .3s var(--ease-out);
}
.ov-herodot.is-active { background: var(--gold); width: 46px; }

@media (prefers-reduced-motion: reduce) {
  .ov-heroslide { transition: none; }
  .ov-heroslide.is-active img { animation: none; }
}
@media (max-width: 900px) { .ov-herodots { bottom: 16px; } }

/* ------------------------------------------- hero controls: no collision -- */
/* The dots previously sat at the same bottom offset as the scroll cue and the
   two overlapped. Dots now align left with the container gutter; the cue keeps
   the centre to itself. */
.ov-herodots {
  left: max(24px, calc((100% - 1240px) / 2 + 40px));
  right: auto;
  bottom: 40px;
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .ov-herodots { left: 22px; bottom: 22px; }
}

/* --------------------------------------------- stat labels: more presence -- */
.ov-stat-label {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
  color: var(--gold-2);
  max-width: 24ch;
}
.ov-stat-figure { font-size: 46px; }
/* A short gold rule ties the number to its label. */
.ov-stat-item { position: relative; padding-top: 18px; }
.ov-stat-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 3px;
  border-radius: 3px;
  background: var(--gold-grad);
  opacity: .9;
}
@media (max-width: 900px) {
  .ov-stat-figure { font-size: 38px; }
  .ov-stat-label { font-size: 11.5px; }
}

/* ------------------------------------------------- projects mega: sectors */
.ov-mega-split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 34px; }
.ov-mega-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-55);
  padding: 0 0 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ov-mega-link--count { justify-content: flex-start; }
.ov-mega-link--count span { flex: 1 1 auto; }
.ov-mega-link em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-55);
  background: var(--sand);
  border-radius: 999px;
  padding: 3px 9px;
  min-width: 24px;
  text-align: center;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.ov-mega-link:hover em { background: var(--gold); color: #0c1730; }
.ov-mega-link--all {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  color: var(--gold-deep);
}
.ov-mega-link--all svg { opacity: 1; }
/* Featured column sits three-across under its own heading. */
.ov-mega-split .ov-mega-projects { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ov-mega-split .ov-mega-project-img { height: 84px; }

@media (max-width: 1180px) {
  .ov-mega-split { grid-template-columns: 1fr 1fr; gap: 22px; }
  .ov-mega-split .ov-mega-projects { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------- role list -- */
/* Vertical padding only: the row itself carries the horizontal inset so its
   hover background can bleed the full width. With padding on the container the
   highlight stopped short and the sides looked clipped. overflow:hidden keeps
   the first/last row's fill inside the rounded corners. */
.ov-roles {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}

/* Row layout lives here rather than inline, so padding stays overridable. */
.ov-role-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 26px;
  text-decoration: none;
}
.ov-role-row + .ov-role-row { border-top: 1px solid var(--border); }
/* A left accent bar marks the hovered row. The old treatment nudged
   padding-left, which reflowed the text on every hover. */
.ov-role-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--ease-out);
}
.ov-role-row:hover::before { transform: scaleX(1); }
.ov-role-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 7px;
  font-size: 13px;
  color: var(--ink-55);
}
.ov-role-pin { display: inline-flex; align-items: center; gap: 5px; }
.ov-role-pin svg { color: var(--gold-deep); flex: none; }
.ov-role-dot { opacity: .45; }
.ov-role-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  transition: background .25s var(--ease-out), color .25s var(--ease-out),
              border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.ov-role-go svg { transition: transform .25s var(--ease-out); }
.ov-role:hover .ov-role-go {
  background: var(--btn);
  border-color: var(--btn);
  color: #fff;
  transform: translateX(2px);
}
.ov-role:hover .ov-role-go svg { transform: translate(2px, -2px); }

@media (max-width: 640px) {
  .ov-roles { padding: 6px 18px; }
  .ov-role { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
}

/* ------------------------------------------ mega menu: current sub-item -- */
/* Clicking a mega sub-item lands on an anchor or a filtered view; that item is
   now marked so the menu reflects where you actually are. Query-string matches
   are resolved server-side, fragment matches in site.js. */
/* This was a 10% tint over white — technically present, visually invisible, so
   it read as broken. Now a solid tinted panel, a full-height accent bar, bolder
   type and a "you are here" pip. */
.ov-mega-card.is-current,
.ov-mega-link.is-current {
  position: relative;
  background: #fdf1ea;
  box-shadow: inset 3px 0 0 var(--gold);
}
.ov-mega-card.is-current .ov-mega-title,
.ov-mega-link.is-current > span,
.ov-mega-link.is-current { color: var(--gold-deep); font-weight: 700; }
.ov-mega-link.is-current svg { opacity: 1; }
.ov-mega-link.is-current em { background: var(--gold); color: #0c1730; }  /* dark ink: white is only 3.72:1 here */

/* A small filled pip on the right edge, so the marker survives even where the
   background tint is hard to see. */
.ov-mega-card.is-current::after,
.ov-mega-link.is-current::after {
  content: "";
  position: absolute;
  right: 11px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--gold);
}
.ov-mega-card.is-current .ov-mega-ico { box-shadow: 0 0 0 2px rgba(217, 96, 31, .35); }

.ov-mnav-panel a.is-current {
  color: var(--gold-deep);
  font-weight: 700;
  background: #fdf1ea;
  box-shadow: inset 3px 0 0 var(--gold);
  margin-left: -12px;
  padding-left: 12px;
}

/* --------------------------------------------------------- map fallback -- */
/* The embed is treated as an enhancement: the address panel renders first and
   the frame only fades in once it actually loads. Ad blockers, strict privacy
   settings and some in-app browsers all drop Google frames — without this the
   section was just a grey void. */
.ov-map { position: relative; background: var(--sand); min-height: 320px; }
.ov-map iframe {
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.ov-map.is-loaded iframe { opacity: 1; }

.ov-map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 22px;
  /* A quiet grid suggests a map without pretending to be one. */
  background:
    linear-gradient(rgba(13, 42, 99, .045) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(13, 42, 99, .045) 1px, transparent 1px) 0 0 / 34px 100%,
    var(--sand);
  transition: opacity .4s var(--ease-out), visibility .4s var(--ease-out);
}
.ov-map.is-loaded .ov-map-fallback { opacity: 0; visibility: hidden; }
.ov-map-fallback-inner { max-width: 420px; }
.ov-map-fallback p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-65);
}
.ov-map-fallback strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}

/* ------------------------------------------------------- team photograph -- */
/* A wide group shot: people are small, so it gets more height than a normal
   banner and object-position keeps faces off the crop line. */
.ov-team-figure { margin: 0 0 48px; }
.ov-team-figure .ov-img { object-position: center 42%; }
.ov-team-figure figcaption {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-55);
  text-align: center;
}

/* ------------------------------------------------------------ values list -- */
/* Replaces a plain dot: a ringed check reads as a commitment rather than a
   generic bullet, and the ring gives the gold something to sit against on navy. */
.ov-values {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ov-values li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}
.ov-values-mark {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-2);
  background: rgba(252, 85, 6, .16);
  box-shadow: inset 0 0 0 1px rgba(249, 172, 58, .42);
  transition: background .25s var(--ease-out), transform .25s var(--ease-out);
}
.ov-values-mark svg { width: 12px; height: 12px; }
.ov-values li:hover .ov-values-mark { background: rgba(252, 85, 6, .3); transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .ov-values li:hover .ov-values-mark { transform: none; }
}

/* -------------------------------------------------- service photo strip -- */
/* Thumbnails under a pillar's lead image. Wraps rather than scrolls, so all of
   the client's photography for that discipline stays visible. */
.ov-svc-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.ov-svc-shot {
  position: relative;
  border: 0;
  padding: 0;
  height: 74px;
  border-radius: 2px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--sand);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.ov-svc-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out), filter .3s var(--ease-out);
  filter: saturate(.92);
}
.ov-svc-shot:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -14px rgba(13,42,99,.55); }
.ov-svc-shot:hover img { transform: scale(1.08); filter: saturate(1); }

@media (prefers-reduced-motion: reduce) {
  .ov-svc-shot:hover { transform: none; }
  .ov-svc-shot:hover img { transform: none; }
}

/* ---------------------------------------------------------- FM Helpdesk -- */
/* Replaces the old "Get a quote" header button. Clicking asks how the visitor
   wants to reach the helpdesk, then hands them a real tel:/mailto: link. */
.ov-helpdesk { position: relative; }
.ov-helpdesk-btn { cursor: pointer; }
.ov-helpdesk-chev { margin-left: 2px; transition: transform .28s var(--ease-out); }
.ov-helpdesk.is-open .ov-helpdesk-chev { transform: rotate(180deg); }

.ov-helpdesk-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 70;
  width: 320px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px;
  box-shadow: 0 26px 50px -22px rgba(13, 42, 99, .5);
}
.ov-helpdesk-panel[hidden] { display: none; }
/* A little pointer up at the button. */
.ov-helpdesk-panel::before {
  content: "";
  position: absolute;
  top: -6px; right: 26px;
  width: 11px; height: 11px;
  background: #fff;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.ov-helpdesk-panel.is-anim {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.ov-helpdesk-panel.is-anim.is-open { opacity: 1; transform: none; }

.ov-helpdesk-head {
  margin: 2px 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.ov-helpdesk-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: 3px;
  text-decoration: none;
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.ov-helpdesk-opt:hover { background: var(--sand); transform: translateX(2px); }
.ov-helpdesk-ico {
  width: 36px; height: 36px;
  flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft);
  color: var(--gold-deep);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.ov-helpdesk-opt:hover .ov-helpdesk-ico { background: var(--btn); color: #fff; }
.ov-helpdesk-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.ov-helpdesk-value {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
/* The email is the longest value; drop it a touch so it never wraps. */
.ov-helpdesk-value.is-email { font-size: 12.5px; letter-spacing: -.01em; }
.ov-helpdesk-opt:hover .ov-helpdesk-value { color: var(--gold-deep); }

/* No JS: focus opens it, so keyboard users are never locked out. */
.ov-helpdesk:focus-within .ov-helpdesk-panel { display: block; }

@media (max-width: 420px) {
  .ov-helpdesk-panel { width: calc(100vw - 32px); right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-helpdesk-opt:hover { transform: none; }
  .ov-helpdesk-panel.is-anim { transition: none; }
}

/* FM Helpdesk inside the mobile menu. Hidden by default: it only appears on
   phones, where the header button is removed so the actions row cannot overrun
   the viewport. Between phone and desktop the header button carries it. */
.ov-mnav-helpdesk { display: none; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.ov-mnav-hd-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); margin: 0 0 8px; }
.ov-mnav-hd-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; margin: 0 -10px; border-radius: 4px;
  text-decoration: none; color: var(--navy);
  transition: background .2s var(--ease-out);
}
.ov-mnav-hd-opt:hover, .ov-mnav-hd-opt:focus-visible { background: var(--sand); }
.ov-mnav-hd-opt svg { flex: none; color: var(--gold-deep); }
.ov-mnav-hd-role { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-55); }
.ov-mnav-hd-val { display: block; font-size: 15px; font-weight: 700; }

@media (max-width: 480px) {
  .ov-header-actions .ov-helpdesk { display: none; }
  .ov-mnav-helpdesk { display: block; }
}

/* ------------------------------------------------- accreditation strip -- */
.ov-accred {
  padding: 30px 40px;
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ov-accred-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-55);
  flex: none;
}
/* Desktop: logos fill the row and sit to the right of the title. */
.ov-accred-logos {
  max-width: 100%;
  height: auto;
  max-height: 52px;
  flex: 1 1 520px;
  object-fit: contain;
  object-position: right center;
}
/* When the row wraps (tablet/mobile), the logo band drops to its own line and
   must line up with the title on the left, not stay pinned right. */
@media (max-width: 900px) {
  .ov-accred { gap: 16px; }
  .ov-accred-logos {
    flex-basis: 100%;
    object-position: left center;
    max-height: 46px;
  }
}

/* -------------------------------------------------------- resources grid -- */
.ov-resource { transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .32s var(--ease-out); }
.ov-resource.is-soon { cursor: default; opacity: .72; }
.ov-resource.is-soon:hover { transform: none; box-shadow: none; border-color: var(--border); }
.ov-resource-soon {
  margin-top: 16px;
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-55);
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  align-self: flex-start;
}