/* ==========================================================================
   Open Net Multiservices — theme styles
   Palette taken from the brand logo:
     cyan #169ED2 · deep blue #0C567B · orange #FF8A00
     charcoal #17191B · dark grey #32373B · white #FFFFFF
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --onm-navy-900: #0A1E33;
  --onm-navy-800: #0E2439;
  --onm-navy-700: #16334d;
  --onm-navy-600: #1d4a6b;

  --onm-blue-800: #0C567B;
  --onm-blue-700: #106A96;
  --onm-blue-600: #147FB4;
  --onm-blue-500: #169ED2;
  --onm-blue-400: #2BB3E3;
  --onm-blue-100: #DCEEF8;

  --onm-orange-600: #E67A00;
  --onm-orange-500: #FF8A00;
  --onm-orange-400: #FFA733;
  --onm-orange-100: #FFF0DC;

  --onm-ink: #17191B;
  --onm-grey-700: #32373B;
  --onm-grey-600: #4C555E;
  --onm-grey-500: #6B7785;
  --onm-grey-300: #C7D0D9;
  --onm-grey-200: #E3E9EE;
  --onm-grey-100: #F1F5F8;
  --onm-soft: #F4F7F9;
  --onm-white: #ffffff;

  --onm-font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --onm-font-body: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --onm-font-logo: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;

  --onm-shell: 1200px;
  --onm-gutter: 24px;
  --onm-radius: 10px;
  --onm-radius-lg: 14px;

  --onm-shadow-sm: 0 1px 2px rgba(10, 30, 51, .06), 0 2px 8px rgba(10, 30, 51, .06);
  --onm-shadow: 0 2px 6px rgba(10, 30, 51, .07), 0 12px 28px rgba(10, 30, 51, .10);
  --onm-shadow-lg: 0 8px 20px rgba(10, 30, 51, .10), 0 28px 60px rgba(10, 30, 51, .16);

  --onm-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--onm-white);
  color: var(--onm-grey-700);
  font-family: var(--onm-font-body);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--onm-blue-700); text-decoration: none; transition: color .18s var(--onm-ease); }
a:hover { color: var(--onm-orange-500); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .55em;
  color: var(--onm-navy-800);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.012em;
}
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.06rem + .6vw, 1.5rem); }
h4 { font-size: 1.12rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li + li { margin-top: .35em; }

hr { border: 0; border-top: 1px solid var(--onm-grey-200); margin: 2.5rem 0; }

blockquote {
  margin: 1.6rem 0;
  padding: 1.1rem 1.4rem;
  border-left: 4px solid var(--onm-orange-500);
  background: var(--onm-soft);
  border-radius: 0 var(--onm-radius) var(--onm-radius) 0;
  font-size: 1.05rem;
}

:focus-visible {
  outline: 3px solid var(--onm-orange-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.onm-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--onm-orange-500); color: #fff;
  padding: 12px 20px; font-weight: 600; border-radius: 0 0 8px 0;
}
.onm-skip-link:focus { left: 0; color: #fff; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.onm-shell {
  width: min(100% - (var(--onm-gutter) * 2), var(--onm-shell));
  margin-inline: auto;
}
.onm-shell--narrow { width: min(100% - (var(--onm-gutter) * 2), 820px); }

.onm-section { padding: clamp(56px, 4vw + 34px, 96px) 0; }
.onm-section--soft { background: var(--onm-soft); }
.onm-section--dark { background: var(--onm-navy-900); color: rgba(255,255,255,.82); }
.onm-section--dark h1, .onm-section--dark h2,
.onm-section--dark h3, .onm-section--dark h4 { color: #fff; }
.onm-section--tight { padding-top: clamp(36px, 3vw + 18px, 56px); }

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

@media (max-width: 1000px) {
  .onm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .onm-grid--2, .onm-grid--3, .onm-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   4. Section headings
   -------------------------------------------------------------------------- */
.onm-eyebrow {
  display: block;
  font-family: var(--onm-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--onm-orange-500);
  margin-bottom: .45rem;
}

.onm-heading { margin-bottom: 0; }
.onm-heading::after {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  border-radius: 2px;
  background: var(--onm-orange-500);
  margin-top: 16px;
}
.onm-head--center { text-align: center; }
.onm-head--center .onm-heading::after { margin-inline: auto; }

.onm-head__lede {
  margin-top: 18px;
  font-size: 1.06rem;
  color: var(--onm-grey-600);
  max-width: 66ch;
}
.onm-head--center .onm-head__lede { margin-inline: auto; }
.onm-section--dark .onm-head__lede { color: rgba(255,255,255,.76); }

.onm-head { margin-bottom: 40px; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.onm-btn {
  --btn-bg: var(--onm-orange-500);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: 6px;
  font-family: var(--onm-font-display);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  line-height: 1.15;
  cursor: pointer;
  text-align: center;
  transition: transform .18s var(--onm-ease), box-shadow .18s var(--onm-ease), background-color .18s var(--onm-ease), color .18s var(--onm-ease);
}
.onm-btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(10, 30, 51, .22);
}
.onm-btn:active { transform: translateY(0); }

.onm-btn--primary { --btn-bg: var(--onm-orange-500); --btn-bd: var(--onm-orange-500); }
.onm-btn--primary:hover { --btn-bg: var(--onm-orange-600); }

.onm-btn--blue { --btn-bg: var(--onm-blue-700); --btn-bd: var(--onm-blue-700); }
.onm-btn--blue:hover { --btn-bg: var(--onm-blue-800); }

.onm-btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); }
.onm-btn--ghost:hover { --btn-bg: rgba(255,255,255,.12); --btn-bd: #fff; }

.onm-btn--outline { --btn-bg: transparent; --btn-fg: var(--onm-navy-800); --btn-bd: var(--onm-grey-300); }
.onm-btn--outline:hover { --btn-bg: var(--onm-navy-800); --btn-fg: #fff; --btn-bd: var(--onm-navy-800); }

.onm-btn--sm { padding: 10px 20px; font-size: .95rem; }
.onm-btn--lg { padding: 17px 36px; font-size: 1.14rem; }
.onm-btn--block { display: flex; width: 100%; }

.onm-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.onm-btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. Logo lockup
   -------------------------------------------------------------------------- */
.onm-logo { display: inline-flex; align-items: center; }
.onm-logo:hover { color: inherit; }

/* One image for the whole lockup — the badge and the wordmark are the official
   artwork, so nothing here restyles them. Only the height changes per breakpoint. */
.onm-logo__img { display: block; height: 54px; width: auto; max-width: 100%; }

@media (max-width: 960px) {
  .onm-logo__img { height: 48px; }
}
@media (max-width: 460px) {
  .onm-logo__img { height: 42px; }
}

/* --------------------------------------------------------------------------
   7. Top bar
   -------------------------------------------------------------------------- */
.onm-topbar {
  background: var(--onm-navy-900);
  color: rgba(255,255,255,.8);
  font-size: .845rem;
}
.onm-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.onm-topbar__area { display: inline-flex; align-items: center; gap: 8px; }
.onm-topbar__right { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.onm-topbar a { color: rgba(255,255,255,.8); display: inline-flex; align-items: center; gap: 8px; }
.onm-topbar a:hover { color: #fff; }
.onm-topbar svg { width: 15px; height: 15px; flex: none; }
.onm-topbar__area svg { color: var(--onm-orange-500); }

.onm-social { display: inline-flex; align-items: center; gap: 14px; }
.onm-social a { color: rgba(255,255,255,.72); }
.onm-social a:hover { color: var(--onm-orange-500); }
.onm-social svg { width: 16px; height: 16px; }

@media (max-width: 860px) {
  .onm-topbar { font-size: .8rem; }
  .onm-topbar__inner { justify-content: center; text-align: center; }
  .onm-topbar__area { display: none; }
  .onm-topbar__right { gap: 16px; justify-content: center; }
}

/* --------------------------------------------------------------------------
   8. Header + navigation
   -------------------------------------------------------------------------- */
.onm-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: #fff;
  box-shadow: 0 1px 0 var(--onm-grey-200);
  transition: box-shadow .2s var(--onm-ease);
}
.onm-header.is-stuck { box-shadow: 0 2px 18px rgba(10,30,51,.12); }

.onm-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 86px;
  padding: 10px 0;
}

.onm-nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.onm-nav__list li { margin: 0; position: relative; }

.onm-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  color: var(--onm-navy-800);
  font-weight: 500;
  font-size: 1rem;
}
.onm-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--onm-orange-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--onm-ease);
}
.onm-nav a:hover { color: var(--onm-orange-500); }
.onm-nav a:hover::after,
.onm-nav .current-menu-item > a::after,
.onm-nav .current_page_item > a::after,
.onm-nav .current-menu-ancestor > a::after,
.onm-nav .current_page_parent > a::after { transform: scaleX(1); }
.onm-nav .current-menu-item > a,
.onm-nav .current_page_item > a,
.onm-nav .current-menu-ancestor > a,
.onm-nav .current_page_parent > a { color: var(--onm-orange-500); }

.onm-nav__caret { width: 11px; height: 11px; opacity: .7; transition: transform .2s var(--onm-ease); }
.onm-nav li:hover > a .onm-nav__caret { transform: rotate(180deg); }

/* dropdown */
.onm-nav .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  min-width: 264px;
  background: #fff;
  border-radius: var(--onm-radius);
  border: 1px solid var(--onm-grey-200);
  box-shadow: var(--onm-shadow);
  list-style: none;
  margin: 0;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s var(--onm-ease), transform .18s var(--onm-ease), visibility .18s;
}
.onm-nav li:hover > .sub-menu,
.onm-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.onm-nav .sub-menu li { margin: 0; }
.onm-nav .sub-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .96rem;
  font-weight: 400;
}
.onm-nav .sub-menu a::after { display: none; }
.onm-nav .sub-menu a:hover { background: var(--onm-blue-100); color: var(--onm-blue-800); }

.onm-header__cta { display: inline-flex; align-items: center; gap: 14px; }

.onm-burger {
  display: none;
  width: 46px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 2px solid var(--onm-grey-200);
  border-radius: 8px;
  cursor: pointer;
  color: var(--onm-navy-800);
}
.onm-burger span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: background .2s; }
.onm-burger span::before, .onm-burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
  transition: transform .22s var(--onm-ease), top .22s var(--onm-ease);
}
.onm-burger span::before { top: -6px; }
.onm-burger span::after { top: 6px; }
.onm-burger[aria-expanded="true"] span { background: transparent; }
.onm-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.onm-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .onm-nav__list { gap: 20px; }
  .onm-nav a { font-size: .95rem; }
  .onm-header__cta .onm-btn { padding: 12px 18px; font-size: .96rem; }
}

@media (max-width: 980px) {
  .onm-burger { display: inline-flex; }
  .onm-header__inner { min-height: 74px; }
  .onm-header__cta .onm-btn--primary { display: none; }

  .onm-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 86vw);
    background: #fff;
    padding: 92px 24px 32px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .28s var(--onm-ease);
    box-shadow: -12px 0 40px rgba(10,30,51,.18);
    z-index: 90;
  }
  .onm-nav.is-open { transform: translateX(0); }
  .onm-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .onm-nav__list > li { border-bottom: 1px solid var(--onm-grey-200); }
  .onm-nav a { padding: 14px 2px; font-size: 1.06rem; justify-content: space-between; }
  .onm-nav a::after { display: none; }
  .onm-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 10px 12px; min-width: 0;
    display: none;
  }
  .onm-nav li.is-open > .sub-menu { display: block; }
  .onm-nav .sub-menu a { font-size: .98rem; padding: 9px 12px; }

  .onm-nav__mobile-cta { margin-top: 26px; display: grid; gap: 12px; }

  /* Must stay below the header (z-index 80), because the drawer lives inside it:
     the header is a stacking context, so the drawer cannot escape above the scrim
     on its own. Order is callbar 70 < scrim 75 < header 80 < drawer 90. */
  .onm-scrim {
    position: fixed; inset: 0; background: rgba(10,30,51,.5);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; z-index: 75;
  }
  .onm-scrim.is-open { opacity: 1; visibility: visible; }
}
@media (min-width: 981px) { .onm-nav__mobile-cta { display: none; } }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.onm-hero {
  position: relative;
  background: var(--onm-navy-900);
  color: #fff;
  overflow: hidden;
}
.onm-hero__media { position: absolute; inset: 0; }
.onm-hero__media picture { display: block; width: 100%; height: 100%; }
.onm-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.onm-hero__fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 88% 14%, rgba(22,158,210,.34), transparent 58%),
    radial-gradient(90% 80% at 74% 96%, rgba(255,138,0,.22), transparent 60%),
    linear-gradient(120deg, #0A1E33 0%, #103552 52%, #0C567B 100%);
}
.onm-hero__fallback::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(80% 70% at 76% 40%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(80% 70% at 76% 40%, #000, transparent 72%);
}
.onm-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(10,30,51,.97) 0%,
    rgba(10,30,51,.93) 26%,
    rgba(10,30,51,.72) 44%,
    rgba(10,30,51,.30) 62%,
    rgba(10,30,51,.18) 100%);
}
@media (max-width: 820px) {
  .onm-hero__veil { background: linear-gradient(180deg, rgba(10,30,51,.93) 0%, rgba(10,30,51,.82) 55%, rgba(10,30,51,.90) 100%); }
}

.onm-hero__inner {
  position: relative;
  padding: clamp(64px, 7vw, 128px) 0 clamp(96px, 8vw, 150px);
}
.onm-hero__copy { max-width: 590px; }

.onm-hero__title {
  font-family: var(--onm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: .004em;
  color: #fff;
  margin: 0;
}
.onm-hero__title em { font-style: normal; color: var(--onm-blue-500); display: block; }

.onm-hero__rule { width: 62px; height: 3px; background: var(--onm-orange-500); border-radius: 2px; margin: 26px 0 24px; }

.onm-hero__lede {
  font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem);
  color: rgba(255,255,255,.86);
  max-width: 46ch;
  margin: 0 0 22px;
}

.onm-hero__keywords {
  font-family: var(--onm-font-display);
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
  margin: 0 0 30px;
}
.onm-hero__keywords b { color: var(--onm-orange-500); font-weight: 600; margin: 0 .18em; }

@media (max-width: 560px) {
  /* Keep the four words on one line on phones. */
  .onm-hero__keywords { font-size: 1rem; letter-spacing: .14em; }
}

/* trust strip that overlaps the hero */
.onm-trust {
  position: relative;
  margin-top: clamp(-78px, -6vw, -56px);
  z-index: 3;
}
.onm-trust__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: #fff;
  border-radius: var(--onm-radius-lg);
  box-shadow: var(--onm-shadow-lg);
  overflow: hidden;
}
.onm-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 24px;
  border-right: 1px solid var(--onm-grey-200);
}
.onm-trust__item:last-child { border-right: 0; }
.onm-trust__icon { flex: none; width: 38px; height: 38px; color: var(--onm-blue-700); }
.onm-trust__title { font-weight: 600; color: var(--onm-navy-800); font-size: 1rem; line-height: 1.28; margin: 0 0 4px; }
.onm-trust__text { font-size: .9rem; color: var(--onm-grey-500); line-height: 1.5; margin: 0; }

@media (max-width: 900px) {
  .onm-trust__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onm-trust__item:nth-child(2) { border-right: 0; }
  .onm-trust__item:nth-child(1), .onm-trust__item:nth-child(2) { border-bottom: 1px solid var(--onm-grey-200); }
}
@media (max-width: 520px) {
  .onm-trust { margin-top: -40px; }
  .onm-trust__inner { grid-template-columns: minmax(0, 1fr); }
  .onm-trust__item { border-right: 0; border-bottom: 1px solid var(--onm-grey-200); }
  .onm-trust__item:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   10. Page hero (interior pages)
   -------------------------------------------------------------------------- */
.onm-pagehero {
  position: relative;
  background: var(--onm-navy-900);
  color: #fff;
  overflow: hidden;
  padding: clamp(52px, 5vw, 88px) 0 clamp(56px, 5vw, 92px);
}
.onm-pagehero__bg { position: absolute; inset: 0; }
.onm-pagehero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.onm-pagehero__fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(100% 120% at 82% 8%, rgba(22,158,210,.30), transparent 60%),
    radial-gradient(80% 90% at 10% 100%, rgba(255,138,0,.16), transparent 62%),
    linear-gradient(115deg, #0A1E33, #13405f);
}
.onm-pagehero__inner { position: relative; }
.onm-pagehero__title { color: #fff; margin: 0; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
.onm-pagehero__lede { margin: 18px 0 0; color: rgba(255,255,255,.82); max-width: 68ch; font-size: 1.06rem; }

.onm-crumbs { font-size: .88rem; color: rgba(255,255,255,.62); margin-bottom: 14px; }
.onm-crumbs a { color: rgba(255,255,255,.82); }
.onm-crumbs a:hover { color: var(--onm-orange-500); }
.onm-crumbs span { margin: 0 8px; opacity: .6; }

/* --------------------------------------------------------------------------
   11. Service cards
   -------------------------------------------------------------------------- */
.onm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--onm-radius);
  box-shadow: var(--onm-shadow-sm);
  overflow: hidden;
  transition: transform .22s var(--onm-ease), box-shadow .22s var(--onm-ease);
}
.onm-card:hover { transform: translateY(-5px); box-shadow: var(--onm-shadow); }

.onm-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--onm-grey-100);
  overflow: hidden;
}
.onm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--onm-ease); }
.onm-card:hover .onm-card__media img { transform: scale(1.05); }

.onm-card__badge {
  position: absolute;
  top: 14px; left: 14px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--onm-blue-700);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 6px 14px rgba(10,30,51,.22);
  z-index: 2;
}
.onm-card__badge svg { width: 22px; height: 22px; }

.onm-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.onm-card__title { font-size: 1.12rem; margin: 0 0 8px; color: var(--onm-navy-800); font-weight: 600; }
.onm-card__title a { color: inherit; }
.onm-card__title a:hover { color: var(--onm-orange-500); }
.onm-card__text { font-size: .955rem; color: var(--onm-grey-500); margin: 0; line-height: 1.6; }
.onm-card__more {
  margin-top: 14px;
  font-family: var(--onm-font-display);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .92rem;
  color: var(--onm-blue-700);
  display: inline-flex; align-items: center; gap: 7px;
}
.onm-card__more svg { width: 14px; height: 14px; transition: transform .2s var(--onm-ease); }
.onm-card:hover .onm-card__more svg { transform: translateX(4px); }

.onm-card__link { position: absolute; inset: 0; z-index: 3; text-indent: -9999px; overflow: hidden; }

/* photo placeholder when no image has been uploaded yet */
.onm-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #13405f 0%, #0C567B 55%, #0A1E33 100%);
  color: rgba(255,255,255,.5);
}
.onm-ph svg { width: 40%; max-width: 84px; height: auto; opacity: .38; }
.onm-ph--light { background: linear-gradient(135deg, #E8EEF3, #DCE6ED); color: var(--onm-blue-700); }

/* --------------------------------------------------------------------------
   12. Projects
   -------------------------------------------------------------------------- */
.onm-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--onm-radius);
  overflow: hidden;
  background: var(--onm-navy-700);
}
.onm-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--onm-ease); }
.onm-tile:hover img { transform: scale(1.06); }
.onm-tile__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 40px 18px 16px;
  background: linear-gradient(to top, rgba(10,30,51,.92), transparent);
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s var(--onm-ease), transform .25s var(--onm-ease);
}
.onm-tile:hover .onm-tile__cap, .onm-tile:focus-visible .onm-tile__cap { opacity: 1; transform: translateY(0); }
.onm-tile__name { display: block; font-weight: 600; font-size: 1rem; }
.onm-tile__meta { display: block; font-size: .84rem; color: rgba(255,255,255,.75); }

/* before / after slider */
.onm-ba {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--onm-radius);
  overflow: hidden;
  background: var(--onm-grey-100);
  user-select: none;
  touch-action: pan-y;
}
.onm-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.onm-ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.onm-ba__handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 3px; background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(10,30,51,.2);
  pointer-events: none;
}
.onm-ba__handle::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 42px; height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C567B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 3 12l6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 4px 14px rgba(10,30,51,.3);
}
.onm-ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
}
.onm-ba__tag {
  position: absolute; bottom: 14px;
  padding: 5px 12px;
  border-radius: 4px;
  background: rgba(10,30,51,.8);
  color: #fff;
  font-family: var(--onm-font-display);
  font-size: .88rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
}
.onm-ba__tag--before { left: 14px; }
.onm-ba__tag--after { right: 14px; background: rgba(255,138,0,.92); }

/* --------------------------------------------------------------------------
   13. Why choose us / split section
   -------------------------------------------------------------------------- */
.onm-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.onm-split--flip .onm-split__media { order: 2; }
@media (max-width: 900px) {
  .onm-split { grid-template-columns: minmax(0, 1fr); }
  .onm-split--flip .onm-split__media { order: 0; }
}

.onm-split__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--onm-radius-lg);
  overflow: hidden;
  box-shadow: var(--onm-shadow);
}
.onm-split__media img { width: 100%; height: 100%; object-fit: cover; }

.onm-checks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 24px; }
.onm-checks li { display: flex; align-items: flex-start; gap: 11px; margin: 0; font-size: .99rem; color: var(--onm-grey-700); }
.onm-checks svg { flex: none; width: 21px; height: 21px; color: var(--onm-orange-500); margin-top: 1px; }
.onm-section--dark .onm-checks li { color: rgba(255,255,255,.86); }
@media (max-width: 640px) { .onm-checks { grid-template-columns: minmax(0,1fr); } }

/* bullet list used across the service pages */
.onm-scope {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px 26px;
}
.onm-scope li {
  position: relative;
  margin: 0;
  padding: 9px 0 9px 30px;
  border-bottom: 1px solid var(--onm-grey-200);
  font-size: .99rem;
  color: var(--onm-grey-700);
}
.onm-scope li::before {
  content: "";
  position: absolute; left: 4px; top: 15px;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--onm-orange-500);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   14. Reviews
   -------------------------------------------------------------------------- */
.onm-review {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--onm-grey-200);
  border-radius: var(--onm-radius);
  padding: 26px 24px;
  height: 100%;
}
.onm-stars { display: inline-flex; gap: 3px; color: var(--onm-orange-500); }
.onm-stars svg { width: 17px; height: 17px; }
.onm-review__text { font-size: 1rem; color: var(--onm-grey-700); margin: 0; flex: 1; }
.onm-review__who { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.onm-review__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--onm-blue-100); color: var(--onm-blue-800);
  font-weight: 700; font-size: 1rem; flex: none;
}
.onm-review__who > span:last-child { display: block; }
.onm-review__name { display: block; font-weight: 600; color: var(--onm-navy-800); font-size: .98rem; line-height: 1.3; }
.onm-review__meta { display: block; font-size: .85rem; color: var(--onm-grey-500); }

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */
.onm-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--onm-radius-lg);
  background: linear-gradient(100deg, var(--onm-blue-800) 0%, var(--onm-blue-700) 55%, var(--onm-blue-600) 100%);
  color: #fff;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 44px);
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.onm-cta::after {
  content: "";
  position: absolute; right: -70px; top: -70px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.onm-cta__icon { flex: none; width: 54px; height: 54px; color: rgba(255,255,255,.9); }
.onm-cta__copy { flex: 1 1 320px; position: relative; }
.onm-cta__title { color: #fff; margin: 0 0 4px; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.onm-cta__text { margin: 0; color: rgba(255,255,255,.85); font-size: 1rem; }
.onm-cta .onm-btn { position: relative; }

.onm-cta-wrap { margin-top: clamp(-52px, -4vw, -36px); position: relative; z-index: 2; }

@media (max-width: 720px) {
  .onm-cta { flex-direction: column; align-items: flex-start; text-align: left; }
  .onm-cta__icon { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.onm-form { display: grid; gap: 18px; }
.onm-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .onm-form__row { grid-template-columns: minmax(0,1fr); } }

.onm-field { display: grid; gap: 7px; }
.onm-field > label { font-weight: 500; font-size: .95rem; color: var(--onm-navy-800); }
.onm-field .req { color: var(--onm-orange-500); }

.onm-field input[type="text"],
.onm-field input[type="email"],
.onm-field input[type="tel"],
.onm-field select,
.onm-field textarea {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 1rem;
  color: var(--onm-ink);
  background: #fff;
  border: 1.5px solid var(--onm-grey-300);
  border-radius: 8px;
  transition: border-color .18s var(--onm-ease), box-shadow .18s var(--onm-ease);
}
.onm-field textarea { min-height: 148px; resize: vertical; }
.onm-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332373B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
}
.onm-field input:focus, .onm-field select:focus, .onm-field textarea:focus {
  outline: none;
  border-color: var(--onm-blue-500);
  box-shadow: 0 0 0 4px rgba(22,158,210,.16);
}
.onm-field__hint { font-size: .85rem; color: var(--onm-grey-500); }

.onm-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.onm-consent { display: flex; align-items: flex-start; gap: 11px; font-size: .9rem; color: var(--onm-grey-600); }
.onm-consent input { margin-top: 4px; width: 17px; height: 17px; flex: none; accent-color: var(--onm-blue-700); }

.onm-notice { padding: 15px 18px; border-radius: 8px; font-size: .98rem; margin-bottom: 22px; }
.onm-notice--ok { background: #E8F6EC; border: 1px solid #B7E0C2; color: #1D6B34; }
.onm-notice--err { background: #FDECEC; border: 1px solid #F5C2C2; color: #A32626; }

.onm-formcard {
  background: #fff;
  border-radius: var(--onm-radius-lg);
  box-shadow: var(--onm-shadow);
  padding: clamp(26px, 3vw, 40px);
}

/* contact detail list */
.onm-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.onm-contact-list li { display: flex; gap: 15px; margin: 0; align-items: flex-start; }
.onm-contact-list .ic {
  flex: none; width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--onm-blue-100); color: var(--onm-blue-800);
}
.onm-contact-list .ic svg { width: 20px; height: 20px; }
.onm-contact-list__body { display: block; }
.onm-contact-list .lbl { display: block; font-weight: 600; color: var(--onm-navy-800); font-size: .95rem; }
.onm-contact-list .val { display: block; margin-top: 2px; color: var(--onm-grey-600); font-size: 1rem; }
.onm-contact-list .val a { color: var(--onm-grey-600); }
.onm-contact-list .val a:hover { color: var(--onm-orange-500); }

/* --------------------------------------------------------------------------
   17. Gallery
   -------------------------------------------------------------------------- */
.onm-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.onm-filter {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--onm-grey-200);
  background: #fff;
  color: var(--onm-grey-600);
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s var(--onm-ease);
}
.onm-filter:hover { border-color: var(--onm-blue-500); color: var(--onm-blue-800); }
.onm-filter.is-active { background: var(--onm-navy-800); border-color: var(--onm-navy-800); color: #fff; }

.onm-masonry { columns: 3; column-gap: 20px; }
.onm-masonry > * { break-inside: avoid; margin-bottom: 20px; }
@media (max-width: 900px) { .onm-masonry { columns: 2; } }
@media (max-width: 560px) { .onm-masonry { columns: 1; } }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.onm-footer { background: var(--onm-navy-900); color: rgba(255,255,255,.72); padding-top: clamp(56px, 5vw, 80px); }
.onm-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
  gap: 40px;
  padding-bottom: 48px;
}
@media (max-width: 980px) { .onm-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px; } }
@media (max-width: 560px) { .onm-footer__grid { grid-template-columns: minmax(0,1fr); } }

.onm-footer__about { font-size: .95rem; margin: 20px 0 20px; max-width: 40ch; line-height: 1.62; }
.onm-footer__title {
  color: #fff; font-size: 1.06rem; font-weight: 600; margin: 0 0 18px;
}
.onm-footer__list { list-style: none; margin: 0; padding: 0; }
.onm-footer__list li { margin: 0 0 11px; }
.onm-footer__list a { color: rgba(255,255,255,.72); font-size: .96rem; }
.onm-footer__list a:hover { color: var(--onm-orange-500); }

.onm-footer .onm-contact-list li { align-items: center; }
.onm-footer .onm-contact-list .ic { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.onm-footer .onm-contact-list .ic svg { width: 17px; height: 17px; }
.onm-footer .onm-contact-list .val,
.onm-footer .onm-contact-list .val a { color: rgba(255,255,255,.78); font-size: .96rem; }
.onm-footer .onm-contact-list .val a:hover { color: var(--onm-orange-500); }

.onm-footer__bar {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .88rem;
}
.onm-footer__bar a { color: rgba(255,255,255,.72); }
.onm-footer__bar a:hover { color: var(--onm-orange-500); }
.onm-footer__legal { display: inline-flex; align-items: center; gap: 14px; }
.onm-footer__legal i { opacity: .35; font-style: normal; }

/* sticky mobile call bar */
.onm-callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  background: #fff;
  border-top: 1px solid var(--onm-grey-200);
  box-shadow: 0 -4px 20px rgba(10,30,51,.12);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  gap: 10px;
}
.onm-callbar .onm-btn { flex: 1; padding: 12px 10px; font-size: .95rem; letter-spacing: .07em; }
@media (max-width: 720px) {
  .onm-callbar { display: flex; }
  body { padding-bottom: 70px; }
}

/* --------------------------------------------------------------------------
   19. Editor content (WYSIWYG output)
   -------------------------------------------------------------------------- */
.onm-prose { font-size: 1.04rem; color: var(--onm-grey-700); }
.onm-prose > *:first-child { margin-top: 0; }
.onm-prose h2 { margin-top: 2.2em; }
.onm-prose h3 { margin-top: 1.8em; }
.onm-prose img { border-radius: var(--onm-radius); margin: 1.6rem 0; }
.onm-prose ul { padding-left: 1.15em; }
.onm-prose li::marker { color: var(--onm-orange-500); }
.onm-prose .wp-caption-text, .onm-prose figcaption { font-size: .88rem; color: var(--onm-grey-500); text-align: center; margin-top: .6rem; }
.onm-prose table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; }
.onm-prose th, .onm-prose td { border: 1px solid var(--onm-grey-200); padding: 10px 14px; text-align: left; }
.onm-prose th { background: var(--onm-soft); color: var(--onm-navy-800); }

.alignleft { float: left; margin: .4rem 1.6rem 1.2rem 0; }
.alignright { float: right; margin: .4rem 0 1.2rem 1.6rem; }
.aligncenter { margin-inline: auto; }
.alignwide { width: min(100vw - 48px, 1100px); margin-inline: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }
@media (max-width: 640px) { .alignleft, .alignright { float: none; margin: 1.2rem 0; } }

/* pagination */
.onm-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.onm-pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border-radius: 8px;
  border: 1.5px solid var(--onm-grey-200);
  color: var(--onm-grey-600);
  font-weight: 500;
}
.onm-pagination .page-numbers:hover { border-color: var(--onm-blue-500); color: var(--onm-blue-800); }
.onm-pagination .page-numbers.current { background: var(--onm-navy-800); border-color: var(--onm-navy-800); color: #fff; }

/* reveal on scroll */
.onm-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--onm-ease), transform .6s var(--onm-ease); }
.onm-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .onm-reveal { opacity: 1; transform: none; } }

/* WordPress admin bar offset */
body.admin-bar .onm-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .onm-header { top: 46px; } }

/* --------------------------------------------------------------------------
   Service photo strip and project gallery

   Photos belong next to the words that describe the work, so these sit inside
   the service copy and inside the project page rather than in a gallery of
   their own.
   -------------------------------------------------------------------------- */
.onm-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 46px 0;
}
.onm-strip__item {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: var(--onm-radius);
  aspect-ratio: 4 / 3;
  background: var(--onm-grey-100);
}
.onm-strip__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--onm-ease);
}
.onm-strip__item:hover .onm-strip__img { transform: scale(1.05); }
.onm-strip__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 13px;
  font-size: .86rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, rgba(10,30,51,0), rgba(10,30,51,.86));
}

/* Columns, not a grid: every photo keeps its own proportions, so the
   vertical shots are not cropped down to a landscape box. */
.onm-shots {
  columns: 3;
  column-gap: 16px;
  margin-top: 44px;
}
.onm-shots__item {
  margin: 0 0 16px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.onm-shots__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--onm-radius);
  background: var(--onm-grey-100);
}

@media (max-width: 900px) {
  .onm-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .onm-shots { columns: 2; column-gap: 12px; }
  .onm-shots__item { margin-bottom: 12px; }
}
@media (max-width: 560px) {
  .onm-strip { grid-template-columns: minmax(0, 1fr); margin: 32px 0; }
  .onm-shots { columns: 2; column-gap: 10px; }
  .onm-shots__item { margin-bottom: 10px; }
}

/* How much work sits behind a service, shown on its card. */
.onm-card__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--onm-blue-600, var(--onm-blue-500));
}
.onm-card__count svg { width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
body.onm-lb-open { overflow: hidden; }

.onm-lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background: rgba(6, 16, 28, .94);
}
.onm-lb[hidden] { display: none; }

.onm-lb__stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(1280px, 100%);
  max-height: 100%;
}
.onm-lb__img {
  max-width: 100%;
  max-height: calc(100vh - 128px);
  width: auto;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
  background: #0A1E33;
}
.onm-lb__cap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: rgba(255,255,255,.88);
  font-size: .92rem;
}
.onm-lb__count { color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }

.onm-lb__nav,
.onm-lb__close {
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.onm-lb__nav { width: 52px; height: 52px; font-size: 2rem; line-height: 1; }
.onm-lb__nav[hidden] { display: none; }
.onm-lb__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  font-size: 1.7rem; line-height: 1;
}
.onm-lb__nav:hover,
.onm-lb__close:hover { background: rgba(255,255,255,.2); border-color: #fff; }
.onm-lb__nav:focus-visible,
.onm-lb__close:focus-visible { outline: 3px solid var(--onm-orange-500); outline-offset: 2px; }

/* The photos themselves say they can be opened. */
[data-lightbox] img { cursor: zoom-in; }
[data-lightbox] img:focus-visible { outline: 3px solid var(--onm-orange-500); outline-offset: 3px; }

@media (max-width: 700px) {
  .onm-lb { padding: 12px; gap: 0; }
  .onm-lb__nav {
    position: absolute;
    bottom: 18px;
    width: 46px; height: 46px;
  }
  .onm-lb__nav--prev { left: 18px; }
  .onm-lb__nav--next { right: 18px; }
  .onm-lb__img { max-height: calc(100vh - 150px); }
  .onm-lb__cap { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
}

/* --------------------------------------------------------------------------
   Sliding photo row

   Fixed height, natural width: a portrait shot stays portrait next to a
   landscape one instead of both being cropped to the same box. Built on native
   scrolling so dragging and momentum come free on touch devices.
   -------------------------------------------------------------------------- */
.onm-slider { position: relative; margin: 46px 0; }

.onm-slider__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 4px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.onm-slider__track::-webkit-scrollbar { display: none; }

.onm-slider__item {
  flex: none;
  margin: 0;
  height: 400px;
  scroll-snap-align: center;
  border-radius: var(--onm-radius);
  overflow: hidden;
  background: var(--onm-grey-100);
}
.onm-slider__img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  cursor: zoom-in;
}

.onm-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--onm-grey-300);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--onm-navy-800);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(10,30,51,.16);
  transition: background .2s, color .2s, border-color .2s;
}
.onm-slider__nav svg { width: 22px; height: 22px; }
.onm-slider__nav--prev { left: -10px; }
.onm-slider__nav--next { right: -10px; }
.onm-slider__nav:hover { background: var(--onm-navy-800); color: #fff; border-color: var(--onm-navy-800); }
.onm-slider__nav:focus-visible { outline: 3px solid var(--onm-orange-500); outline-offset: 2px; }

/* On the dark band the arrows invert. */
.onm-section--dark .onm-slider__nav {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.onm-section--dark .onm-slider__nav:hover { background: #fff; color: var(--onm-navy-800); }

@media (max-width: 900px) {
  .onm-slider__item { height: 300px; }
  .onm-slider__nav { width: 42px; height: 42px; }
  .onm-slider__nav--prev { left: -6px; }
  .onm-slider__nav--next { right: -6px; }
}
@media (max-width: 560px) {
  .onm-slider { margin: 32px 0; }
  .onm-slider__track { gap: 10px; }
  .onm-slider__item { height: 230px; }
  /* Fingers swipe; the arrows just take up room. */
  .onm-slider__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .onm-slider__track { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Service block on the Services page

   Name, one line about it, then that work sliding past. One block per service,
   alternating background so the page reads as a sequence.
   -------------------------------------------------------------------------- */
.onm-svcblock__head { max-width: 820px; margin-bottom: 8px; }

.onm-svcblock__title {
  font-family: var(--onm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--onm-navy-800);
  margin: 0;
}
.onm-svcblock__lede {
  margin: 16px 0 0;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--onm-grey-600);
}
.onm-svcblock__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--onm-blue-600, var(--onm-blue-500));
}
.onm-svcblock__more svg { width: 18px; height: 18px; transition: transform .2s var(--onm-ease); }
.onm-svcblock__more:hover svg { transform: translateX(4px); }

/* The row runs wider than the text column, so photos bleed toward the edges. */
.onm-svcblock .onm-slider { margin-top: 30px; margin-bottom: 0; }

@media (max-width: 560px) {
  .onm-svcblock__lede { font-size: 1rem; }
}

/* A single photo between two blocks of copy. */
/* No cropping here: the photo keeps its own shape and is capped by height,
   so a portrait shot stands tall instead of being sliced into a wide band. */
.onm-figure {
  margin: 44px 0;
  display: flex;
  justify-content: center;
}
.onm-figure__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 680px;
  border-radius: var(--onm-radius-lg, var(--onm-radius));
  background: var(--onm-grey-100);
  cursor: zoom-in;
}
/* Copy and pictures take turns, so the spacing between them is even. */
.onm-section > .onm-shell + .onm-shell { margin-top: 0; }

@media (max-width: 560px) {
  .onm-figure { margin: 30px 0; }
  .onm-figure__img { max-height: 70vh; border-radius: var(--onm-radius); }
}

/* --------------------------------------------------------------------------
   Walkthrough video

   Phone footage is portrait and not very wide, so it is shown near its own
   size in a phone-shaped frame. Stretching it across the page would only make
   it look soft.
   -------------------------------------------------------------------------- */
.onm-video {
  margin: 44px auto;
  max-width: 430px;
  text-align: center;
}
.onm-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--onm-radius-lg, var(--onm-radius));
  background: var(--onm-navy-900);
  box-shadow: 0 18px 50px rgba(10,30,51,.22);
  object-fit: cover;
}
.onm-video__cap {
  margin: 14px 0 0;
  font-size: .9rem;
  color: var(--onm-grey-600);
}
.onm-section--dark .onm-video__cap { color: rgba(255,255,255,.72); }

@media (max-width: 560px) {
  .onm-video { margin: 30px auto; max-width: 100%; }
}