/* ============================================
   NOVI MARINE — Custom Theme Styles
   ============================================ */

/* RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: #031d30;
  color: #ffffff;
  margin: 0;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Titillium Web', sans-serif;
  margin: 0;
}

/* Remove default WP block margins that break layout */
.wp-block-group { margin-top: 0 !important; margin-bottom: 0 !important; }
.wp-site-blocks { padding: 0 !important; }
.wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-block-template-part { display: contents; }
.is-layout-flow > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* Prevent dark gaps between adjacent white full-width sections */
.wp-block-post-content > *,
.is-root-container > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ============================================
   NAVBAR
   ============================================ */
.nm-nav {
  position: fixed;
  top: calc(24px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 1280px;
  z-index: 50;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 20px 44px;
  border-radius: 999px;

  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nm-nav.nm-nav--scrolled {
  top: calc(4px + env(safe-area-inset-top, 0px));
  padding: 12px 44px;
  background: rgba(0, 0, 0, 0.60);
  transform: translateX(-50%) scale(0.98);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.nm-nav__logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
  padding: 2px;
  display: block;
}

/* Desktop: extra breathing room around the header logo */
@media (min-width: 901px) {
  .nm-nav__logo {
    padding: 2px 14px 2px 0;
  }
}

/* Desktop nav — WordPress Navigation block (.nm-nav__menu sits on the block's <nav>) */
.nm-nav__menu {
  margin: 0;
  padding: 0;
}

.nm-nav__menu .wp-block-navigation__container {
  gap: 32px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nm-nav__menu .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.70) !important;
  text-decoration: none;
  font-size: 0.85rem !important;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: 'Titillium Web', sans-serif;
  padding: 0 !important;
  transition: color 0.3s ease;
}

/* Active state — WP auto-adds .current-menu-item to nav-link blocks that
   point (via kind:"post-type") to the page currently being viewed. */
.nm-nav__menu .current-menu-item .wp-block-navigation-item__content {
  color: #00c6ff !important;
}

.nm-nav__menu .wp-block-navigation-item__content:hover {
  color: #00c6ff !important;
}

/* Dropdown submenus (core/navigation-submenu) — generic, so any future
   top-level item edited in the backend into a dropdown (Appearance > Editor
   > Primary Navigation) automatically gets this treatment. WP core's own
   Interactivity API drives open/close (hover + click + keyboard); this only
   skins it to match the glass navbar instead of core's default white box. */
.nm-nav__menu .wp-block-navigation-item__content {
  display: flex !important;
  align-items: center;
}
.nm-nav__menu .wp-block-navigation-submenu__toggle {
  display: inline-flex;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.nm-nav__menu .wp-block-navigation__submenu-icon {
  width: 8px;
  height: 8px;
  margin-left: 7px;
}
.nm-nav__menu .wp-block-navigation__submenu-icon svg {
  width: 100%;
  height: 100%;
  stroke: rgba(255, 255, 255, 0.55);
  transition: transform 0.25s ease, stroke 0.25s ease;
}
.nm-nav__menu .wp-block-navigation-item.has-child:hover .wp-block-navigation__submenu-icon svg,
.nm-nav__menu .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
  stroke: #ffffff;
  transform: rotate(180deg);
}

/* Dropdown panel. It used to share the navbar pill's translucency
   (rgba(0,0,0,0.55)), but the panel overlaps page content rather than floating
   above empty space: over a bright hero the artwork bled through and cyan item
   text on the hover tint became unreadable. A menu is functional, so it is now
   an essentially opaque navy panel; the blur is kept so it still reads as the
   same material, just denser. Plus a small connector "tail" bridging trigger
   and panel so the two read as one object. Flush against the
   trigger (top:100%, no gap/margin) is deliberate — any empty space there
   breaks hover continuity (pointer crosses dead space, menu closes before
   a click on an item lands). Breathing room lives inside via padding-top. */
.nm-nav__menu .wp-block-navigation__submenu-container {
  background: rgba(4, 26, 42, 0.96) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 18px;
  /* Item text must line up with the trigger text above. Items keep
     symmetric padding (so their hover pill is balanced), and the panel is
     shifted left by exactly panel-pad-left + item-pad-left (6+16 = 22px)
     to net the text back to the trigger's x-position. */
  padding: 14px 6px 8px !important;
  min-width: 220px !important;
  left: -22px !important;
  top: 100% !important;
  transform: translateY(-6px);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
}
.nm-nav__menu .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 40px;
  width: 10px;
  height: 10px;
  background: rgba(4, 26, 42, 0.96);
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 2px 0 0 0;
  transform: rotate(45deg);
}
.nm-nav__menu .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.nm-nav__menu .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  transform: translateY(0) !important;
}
/* Core gives nav items background-color:inherit — each li would re-paint the
   panel's semi-transparent black on top of itself, reading as a darker inset
   box. Kill it; only the panel paints. */
.nm-nav__menu .wp-block-navigation__submenu-container .wp-block-navigation-item,
.nm-nav__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  background: transparent !important;
}
.nm-nav__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 12px 16px !important;
  border-radius: 10px;
  white-space: nowrap;
  font-family: 'Titillium Web', sans-serif;
  text-transform: uppercase;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em;
}
.nm-nav__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #00c6ff !important;
}

.nm-nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Language toggle */
.nm-lang {
  position: relative;
  display: flex;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 4px;
}

.nm-lang__indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 40px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00c6ff, #0088cc);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.nm-lang__btn {
  width: 40px;
  height: 28px;
  border: none;
  background: none;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.60);
  position: relative;
  z-index: 1;
  font-family: 'Titillium Web', sans-serif;
}

.nm-lang__btn.is-active {
  color: #ffffff;
}

/* ============================================
   BUTTONS
   ============================================ */
.nm-btn,
.wp-block-button.nm-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #ffffff;
  background: linear-gradient(135deg, #0088cc, #00c6ff);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: 'Titillium Web', sans-serif;
}

.nm-btn:hover,
.wp-block-button.nm-btn .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 136, 204, 0.40);
  color: #ffffff;
}

/* Inquire CTA — Navigation block (#35) styled as the pill button, pinned far right */
.nm-nav__cta .wp-block-navigation__container {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nm-nav__cta .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px !important;
  border-radius: 999px;
  font-size: 13px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0088cc, #00c6ff);
  border: none;
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: 'Titillium Web', sans-serif;
}

.nm-nav__cta .wp-block-navigation-item__content:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 136, 204, 0.40);
  color: #ffffff !important;
}

/* CTA fill button — override WP's default 9999px pill radius */
.wp-block-button.nm-btn-cta {
  width: fit-content !important;
}
.wp-block-button.nm-btn-cta .wp-block-button__link,
.wp-block-button.nm-btn-cta .wp-element-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 24px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0088cc, #00c6ff) !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  font-family: 'Titillium Web', sans-serif !important;
  width: fit-content !important;
  box-shadow: none;
}
.wp-block-button.nm-btn-cta .wp-block-button__link:hover,
.wp-block-button.nm-btn-cta .wp-element-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 15px 40px rgba(0, 136, 204, 0.40) !important;
}

/* CTA outline button */
.wp-block-button.nm-btn-outline {
  width: fit-content !important;
}
.wp-block-button.nm-btn-outline .wp-block-button__link,
.wp-block-button.nm-btn-outline .wp-element-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 24px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  font-family: 'Titillium Web', sans-serif !important;
  width: fit-content !important;
  box-shadow: none !important;
}
.wp-block-button.nm-btn-outline .wp-block-button__link:hover,
.wp-block-button.nm-btn-outline .wp-element-button:hover {
  border-color: #00c6ff !important;
  color: #00c6ff !important;
  transform: translateY(-2px) !important;
  background: transparent !important;
}

/* ============================================
   PULSE DOT
   ============================================ */
.nm-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: #00c6ff;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
}

.nm-pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 198, 255, 0.60);
  animation: nm-pulse 1.8s infinite ease-out;
}

@keyframes nm-pulse {
  0%   { transform: scale(1); opacity: 0.8; }
  70%  { transform: scale(2.5); opacity: 0; }
  100% { opacity: 0; }
}

.nm-eyebrow {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #00c6ff;
  margin: 0 0 16px;
}

/* Cyan full stop at the end of a cover-hero H1 ("Kabelaanleg support<span
   class="nmuc-dot">.</span>"). Sitewide because both hero variants use it
   (.nmuc-hero-title AND .nmcp-hero-title), and custom-projects pages don't
   load usecase.css where the rule originally lived. */
.nmuc-dot { color: #00c6ff; }

.nm-eyebrow-dark {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #9ca3af;
  margin: 0 0 16px;
}

/* ============================================
   HERO SECTION
   ============================================ */
.nm-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0 !important;
}

.nm-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.nm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(3,29,48,0.95), rgba(3,29,48,0.70), transparent);
  z-index: 1;
  pointer-events: none;
}

.nm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #031d30, transparent);
  z-index: 1;
  pointer-events: none;
}

.nm-hero-content {
  position: relative !important;
  z-index: 10;
  width: 100%;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 24px 96px !important;
  /* Kill WordPress block-gap inside this group */
  --wp--style--block-gap: 0px !important;
  gap: 0 !important;
}

/* Remove any WP-generated spacing between blocks inside the hero content */
.nm-hero-content > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.nm-hero__headline {
  max-width: 860px;
  margin-bottom: 40px !important; /* mt-10 in concept = 2.5rem = 40px */
}

/* Eyebrow inside hero: tight spacing below */
.nm-hero-content .nm-eyebrow {
  margin-bottom: 16px !important;
}

/* Title: no extra space above, 20px below */
.nm-hero-content h1 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

/* Subtitle: no extra space */
.nm-hero__sub,
.nm-hero-content p.nm-hero__sub {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Class used in seeder: nm-hero-title (with dash, not BEM __)
   Multiple selectors for maximum specificity over WP defaults */
.nm-hero-title,
.nm-hero__title,
h1.nm-hero-title,
h1.wp-block-heading.nm-hero-title,
.nm-hero h1,
.nm-hero-content h1 {
  font-family: 'Titillium Web', sans-serif !important;
  font-size: clamp(3rem, 7vw, 5rem) !important; /* 6rem = matches novimarine.html text-8xl */
  font-weight: 800 !important;
  line-height: 0.9 !important;
  color: #ffffff !important;
  margin: 0 0 20px !important;
}

.nm-cyan { color: #00c6ff; }

/* Sub-headline: class used in seeder is nm-hero__sub */
.nm-hero__sub,
.nm-hero-content p.nm-hero__sub {
  color: rgba(255, 255, 255, 0.70) !important;
  font-size: 1.3rem !important;
  max-width: 500px;
  line-height: 1.6;
  margin: 0;
}

/* CTA Cards grid — max-w-4xl equivalent (896px) like novimarine.html */
.nm-cta-grid,
.nm-cta-grid.wp-block-columns {
  max-width: 896px;
  gap: 24px !important;
  margin: 0 !important;
}

.nm-cta-card.wp-block-column {
  background: rgba(10, 20, 30, 0.09) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 28px !important;
  transition: all 0.3s ease;
}

.nm-cta-card.wp-block-column:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 200, 255, 0.40);
}

.nm-card-num {
  display: block;
  font-size: 1.875rem;
  font-weight: 700;
  color: #00c6ff;
  margin-bottom: 10px;
  font-family: 'Titillium Web', sans-serif;
}

.nm-cta-card h3.wp-block-heading {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 0 12px !important;
}

.nm-cta-card p {
  color: rgba(255, 255, 255, 0.60) !important;
  margin: 0 0 24px !important;
  max-width: 340px;
}

.nm-cta-card .wp-block-buttons {
  margin: 0 !important;
}

/* ============================================
   HAMBURGER BUTTON
   ============================================ */
.nm-hamburger {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 12px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nm-hamburger:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

/* Cyan glow when menu is open */
.nm-hamburger[aria-expanded="true"] {
  border-color: rgba(0, 198, 255, 0.40);
  background: rgba(0, 198, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.06);
}

.nm-hamburger span {
  display: block;
  height: 1.5px;
  background: #ffffff;
  border-radius: 2px;
  transform-origin: center;
  transition:
    width  0.38s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
}

/* Asymmetric rhythm: full / short / medium */
.nm-hamburger span:nth-child(1) { width: 100%; }
.nm-hamburger span:nth-child(2) { width: 58%; }
.nm-hamburger span:nth-child(3) { width: 78%; }

/* Hover: cascade-shift the widths */
.nm-hamburger:hover span:nth-child(1) { width: 58%; }
.nm-hamburger:hover span:nth-child(2) { width: 100%; }
.nm-hamburger:hover span:nth-child(3) { width: 58%; }

/* Open: spring X morph (bar 1 & 3 meet at bar 2's center) */
.nm-hamburger[aria-expanded="true"] span:nth-child(1) {
  width: 100%;
  transform: translateY(6.5px) rotate(45deg);
}
.nm-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nm-hamburger[aria-expanded="true"] span:nth-child(3) {
  width: 100%;
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================
   MOBILE MENU
   ============================================ */
/* ============================================
   NAV INQUIRE BUTTON (mobile only)
   ============================================ */
.nm-nav__inquire {
  display: none; /* shown via media query at ≤ 900px */
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: 'Titillium Web', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0073b0, #00b8eb);
  box-shadow: 0 0 0 1px rgba(0, 198, 255, 0.20) inset;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* shimmer sweep on hover */
.nm-nav__inquire::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.nm-nav__inquire:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0, 198, 255, 0.25) inset,
    0 8px 22px rgba(0, 136, 204, 0.38);
}

.nm-nav__inquire:hover::after {
  left: 140%;
}

/* Tighten slightly when nav is scrolled */
.nm-nav--scrolled .nm-nav__inquire {
  padding: 6px 14px;
}

/* backdrop no longer needed — full-screen menu */
.nm-mobile-backdrop { display: none; }

/* ---- Mobile menu: full-screen clip-path reveal ---- */
.nm-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  /* Reveal downward from top edge */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.nm-mobile-menu.is-open {
  clip-path: inset(0 0 0% 0);
  pointer-events: all;
}

/* Layered background — deep navy with subtle radial glows */
.nm-mobile-menu__inner {
  position: absolute;
  inset: 0;
  background: #031d30;
  display: flex;
  flex-direction: column;
  padding: 28px 32px 44px;
  overflow-y: auto;
}

.nm-mobile-menu__inner::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(0, 136, 204, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 5% 5%,   rgba(0, 198, 255, 0.05) 0%, transparent 55%);
  pointer-events: none;
}

/* ---- Header row ---- */
.nm-mobile-menu__header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

.nm-mobile-menu.is-open .nm-mobile-menu__header {
  opacity: 1;
  transform: translateY(0);
}

.nm-mobile-menu__logo img {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
  opacity: 0.85;
}

.nm-mobile-menu__close {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.nm-mobile-menu__close:hover {
  border-color: rgba(0, 198, 255, 0.60);
  color: #00c6ff;
  background: rgba(0, 198, 255, 0.08);
}

/* ---- Nav links (mirrored from the Primary Navigation block, incl. dropdowns) ---- */
.nm-mobile-menu__nav {
  flex: 1;
  position: relative;
  padding-top: 8px;
}

.nm-mobile-menu__nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level rows. Scoped to `> ul > li` on purpose: the mirrored dropdown
   children live in a nested <ul> and must not inherit the row hairline or the
   entrance animation — they ride in with their own panel instead. */
.nm-mobile-menu__nav > ul > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Staggered entrance. --nm-i is the item index, written by buildMobileNav(),
   so the stagger fits any menu length instead of a fixed nth-child list
   (the menu is editable in Appearance > Editor, so its length is not fixed). */
.nm-mobile-menu.is-open .nm-mobile-menu__nav > ul > li {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.22s + var(--nm-i, 0) * 0.06s);
}

/* The tappable top-level row: an <a> for a plain item, a <button> for a group.
   Both are styled here so a group row lines up exactly with a plain one. */
.nm-mobile-menu__row {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 20px 0;
  text-decoration: none;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nm-mobile-menu__row:hover { padding-left: 6px; }

/* A group that also has its own destination gets a split row: the label stays
   a link, the chevron is a separate button. Padding moves to the link so the
   whole label area, and only that, navigates. */
.nm-mobile-menu__row--split { padding: 0; gap: 0; }
.nm-mobile-menu__row--split:hover { padding-left: 0; }

.nm-mobile-menu__parent-link {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
  padding: 20px 0;
  text-decoration: none;
  transition: padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nm-mobile-menu__parent-link:hover { padding-left: 6px; }

.nm-mobile-menu__num {
  font-family: 'Titillium Web', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(0, 198, 255, 0.45);
  flex-shrink: 0;
  width: 22px;
  transition: color 0.25s ease;
  padding-top: 3px;
}

.nm-mobile-menu__label {
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1;
  transition: color 0.25s ease;
}

.nm-mobile-menu__row:hover .nm-mobile-menu__num,
.nm-mobile-menu__parent-link:hover .nm-mobile-menu__num   { color: #00c6ff; }
.nm-mobile-menu__row:hover .nm-mobile-menu__label,
.nm-mobile-menu__parent-link:hover .nm-mobile-menu__label { color: #ffffff; }

/* Active state — li.is-active added by buildMobileNav() when the mirrored
   desktop item carries WP's .current-menu-item (see novimarine.js). */
.nm-mobile-menu__nav > ul > li.is-active .nm-mobile-menu__num   { color: #00c6ff; }
.nm-mobile-menu__nav > ul > li.is-active .nm-mobile-menu__label { color: #ffffff; }

/* An expanded group reads as "current" too, so the eye can find its way back
   up out of a long child list. */
.nm-mobile-menu__item.is-open .nm-mobile-menu__num   { color: #00c6ff; }
.nm-mobile-menu__item.is-open .nm-mobile-menu__label { color: #ffffff; }

/* ---- Chevron ---- */
/* Desktop uses a bare 8px caret next to the label; on a phone the chevron is
   the accordion's only affordance and has to be a real 34px touch target, so
   it gets the same pill treatment as the close button in the header. */
.nm-mobile-menu__chevron {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.nm-mobile-menu__chevron svg {
  width: 14px;
  height: 14px;
  display: block;
}

.nm-mobile-menu__item.is-open .nm-mobile-menu__chevron {
  transform: rotate(180deg);
  color: #00c6ff;
  border-color: rgba(0, 198, 255, 0.45);
  background: rgba(0, 198, 255, 0.10);
}

/* ---- Dropdown panel (mirrors a core/navigation-submenu) ---- */
/* max-height (not height:auto) so it can animate; the open value is the
   measured height, written by initMobileSubmenus() — no magic number, so any
   number of children added in the backend still animates cleanly. */
.nm-mobile-menu__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.nm-mobile-menu__sublist {
  list-style: none;
  margin: 0;
  /* 40px left = num column (22) + row gap (18), so child labels hang under
     the parent label rather than under its number. */
  padding: 2px 0 18px 40px;
  position: relative;
}

/* Hairline rail tying the children back to their parent row */
.nm-mobile-menu__sublist::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 4px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(180deg, rgba(0, 198, 255, 0.45), rgba(0, 198, 255, 0));
}

.nm-mobile-menu__sublist li { border: 0; }

.nm-mobile-menu__sublist a {
  display: flex;
  align-items: center;
  padding: 11px 0;
  text-decoration: none;
  transition: padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nm-mobile-menu__sublist a:hover { padding-left: 6px; }

/* Deliberately a clear step down from the 1.6rem top-level label: the size
   jump is what makes the two levels legible without indent guesswork. */
.nm-mobile-menu__sublabel {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.25;
  transition: color 0.25s ease;
}

.nm-mobile-menu__sublist a:hover .nm-mobile-menu__sublabel   { color: #00c6ff; }
.nm-mobile-menu__sublist li.is-active .nm-mobile-menu__sublabel { color: #ffffff; }
.nm-mobile-menu__sublist li.is-active a { padding-left: 6px; }

/* Keyboard focus — the rows are now buttons as well as links */
.nm-mobile-menu__row:focus-visible,
.nm-mobile-menu__parent-link:focus-visible,
.nm-mobile-menu__chevron:focus-visible,
.nm-mobile-menu__sublist a:focus-visible {
  outline: 2px solid rgba(0, 198, 255, 0.70);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Short viewports (landscape phones): with a dropdown expanded the list gets
   tall, so trade some row height for visible items before scrolling starts. */
@media (max-height: 720px) {
  .nm-mobile-menu__row,
  .nm-mobile-menu__parent-link { padding: 15px 0; }
  .nm-mobile-menu__label       { font-size: 1.35rem; }
  .nm-mobile-menu__sublist a   { padding: 9px 0; }
  .nm-mobile-menu__sublist     { padding-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .nm-mobile-menu__sub,
  .nm-mobile-menu__chevron,
  .nm-mobile-menu__row,
  .nm-mobile-menu__parent-link,
  .nm-mobile-menu__sublist a { transition: none !important; }
}

/* ---- Footer: CTA + language ---- */
.nm-mobile-menu__footer {
  flex-shrink: 0;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;

  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease 0.56s, transform 0.4s ease 0.56s;
}

.nm-mobile-menu.is-open .nm-mobile-menu__footer {
  opacity: 1;
  transform: translateY(0);
}

.nm-mobile-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0088cc, #00c6ff);
  text-decoration: none;
  font-family: 'Titillium Web', sans-serif;
  box-shadow: 0 8px 32px rgba(0, 136, 204, 0.30);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nm-mobile-menu__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0, 136, 204, 0.45);
}

.nm-mobile-menu__lang-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 0 0;
}

.nm-mobile-menu__lang-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.28);
  font-family: 'Titillium Web', sans-serif;
}

/* ============================================
   HERO MOBILE CTA BUTTONS
   ============================================ */
.nm-hero-cta-mobile {
  display: none; /* visible only on mobile via media query */
  flex-direction: column;
  gap: 10px;
  margin-top: 44px;
}

/* Always visible inside the block editor regardless of viewport */
.editor-styles-wrapper .nm-hero-cta-mobile {
  display: flex !important;
}

/* Explore label — 3-col grid mirrors the button row */
.nm-hero-cta-explore {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  height: 36px;
  position: relative;
}

/* Hairline at a fixed vertical position — text sits above, ticks hang below */
.nm-hero-cta-explore::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.38) 6%,
    rgba(255, 255, 255, 0.38) 94%,
    transparent 100%
  );
}

.nm-hero-cta-explore__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Tick: anchored just below the hairline, pointing downward */
.nm-hero-cta-explore__tick {
  position: absolute;
  top: 23px; /* 1px below the hairline at top:22px */
  width: 1px;
  height: 9px;
  background: rgba(255, 255, 255, 0.52);
}

/* Center cell: EXPLORE text floats above the hairline */
.nm-hero-cta-explore__text {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  font-family: 'Titillium Web', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: rgba(255, 255, 255, 0.58);
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

/* Button row — targets native wp:buttons / wp:button block structure */
.wp-block-buttons.nm-hero-cta-buttons {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.nm-hero-cta-buttons .wp-block-button {
  flex: 1 !important;
  margin: 0 !important;
}

.nm-hero-cta-buttons .wp-block-button__link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  text-decoration: none !important;
  font-family: 'Titillium Web', sans-serif !important;
  transition: all 0.25s ease !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.nm-hero-cta-buttons .nm-cta-primary .wp-block-button__link {
  background: linear-gradient(135deg, #0088cc, #00c6ff) !important;
  border-color: transparent !important;
}

.nm-hero-cta-buttons .wp-block-button__link:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 198, 255, 0.50) !important;
  color: #ffffff !important;
}

/* ============================================
   SERVICES SECTION (white bg)
   ============================================ */
.nm-services {
  background: #ffffff !important;
  padding: 112px 0 48px !important;  /* bottom reduced — logo scroller is now external */
  position: relative;
  overflow: hidden;
}

.nm-services::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: #051f30;
  opacity: 0.03;
  pointer-events: none;
}

.nm-services-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.nm-services-grid,
.nm-services-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;  /* top-align: "What we do" lines up with the navy stats block */
  margin-bottom: 0 !important;  /* logo scroller is now a separate block */
}

/* Heading: works for both HTML blocks (.nm-services-title) and
   native WP heading blocks (.wp-block-heading) inside the left column */
.nm-services-title,
.nm-services-left h2,
.nm-services-left .wp-block-heading {
  font-family: 'Titillium Web', sans-serif !important;
  font-size: clamp(2.5rem, 4vw, 3.75rem) !important;
  font-weight: 800 !important;
  color: #051f30 !important;
  line-height: 1.1 !important;
  margin: 0 0 24px !important;
}

/* Eyebrow: explicit dark color so it's not inherited as white */
.nm-eyebrow-dark {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: #9ca3af !important;
  margin: 0 0 16px !important;
}

/* Body text in services left column */
.nm-services-left p:not(.nm-eyebrow-dark) {
  color: #4b5563 !important;
  font-size: 1.125rem !important;
  line-height: 1.7 !important;
  max-width: 540px;
  margin: 0 !important;
}

/* Stats block */
.nm-stats-block {
  background: #051f30 !important;
  border-radius: 24px !important;
  padding: 40px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  margin-bottom: 24px !important;
}

.nm-stats-grid,
.nm-stats-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 0 !important;
}

.nm-stats-grid > div,
.nm-stats-grid .wp-block-column {
  padding: 0 !important;
}

.nm-stat-value {
  font-family: 'Titillium Web', sans-serif;
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 4px !important;
  line-height: 1;
}

.nm-stat-label {
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.60) !important;
  margin: 0 !important;
}

/* Gemini mini card */
.nm-gemini-mini {
  background: #051f30 !important;
  border-radius: 24px !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: nowrap;
}

.nm-gemini-mini figure { margin: 0 !important; flex-shrink: 0; }

.nm-gemini-mini img,
.nm-gemini-mini-logo {
  width: 144px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  flex-shrink: 0;
}

.nm-gemini-mini-text {
  flex: 1;
}

.nm-gemini-mini h4 {
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 6px !important;
}

.nm-gemini-mini p {
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.60) !important;
  line-height: 1.625 !important;
  margin: 0 !important;
}

/* ============================================
   LOGO SCROLLER — shared styles
   ============================================ */

/* Legacy HTML-block version (inside nm-services) */
.nm-logo-section {
  margin-top: 80px;
  padding: 0 0 40px;
}

.nm-logo-section h3 {
  font-family: 'Titillium Web', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 800;
  color: #051f30;
  text-align: center;
  margin: 0 0 40px;
}

/* Native block pattern version */
.nm-logo-scroller-block {
  background: #ffffff;
  padding: 60px 0 80px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* Needed for the split-bg pseudo-element below */
  position: relative !important;
  overflow: hidden;
}

/* Replicate the exact same 40% right-side tint from .nm-services::before
   so the split background continues seamlessly behind the logo scroller */
.nm-logo-scroller-block::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: #051f30;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* Keep heading + scroller above the pseudo-element */
.nm-logo-scroller-block > * {
  position: relative;
  z-index: 1;
}

.nm-logo-scroller-title {
  font-family: 'Titillium Web', sans-serif !important;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem) !important;
  font-weight: 800 !important;
  color: #051f30 !important;
  text-align: center !important;
  /* Match same contained width as .nm-services-inner above */
  max-width: 1280px;
  margin: 0 auto 48px !important;
  padding: 0 24px;
  display: block;
}

/* nm-logo-source: hidden on frontend, JS builds the visual */
.nm-logo-source {
  display: none;
}

/* Logo zone: constrained to same width as content above it */
.nm-logo-scroller-block .nm-logo-zone,
.nm-logo-section .nm-logo-zone {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.nm-logo-zone {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.nm-logo-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: nm-logo-scroll 28s linear infinite;
  will-change: transform;
}

.nm-logo-item {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.45);
  transition: filter 0.4s ease;
  flex-shrink: 0;
}

.nm-logo-item:hover {
  filter: grayscale(0) opacity(1);
}

@keyframes nm-logo-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   VESSELS SECTION
   ============================================ */
.nm-vessels {
  background: #031d30;
  padding: 112px 0;
  overflow-x: hidden;
}

.nm-vessels-header {
  max-width: 1280px;
  margin: 0 auto !important;
  padding: 0 48px !important;
  margin-bottom: 48px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 24px;
}

.nm-vessels-header-left .wp-block-heading {
  font-family: 'Titillium Web', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3.25rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.nm-vessels-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 32px;
}

.nm-vessel-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.nm-vessel-nav-btn:hover {
  border-color: #00c6ff;
  background: rgba(0, 198, 255, 0.10);
}

.nm-vessel-nav-btn:disabled {
  opacity: 0.30;
  cursor: default;
}

/* Vessel scroll track */
.nm-vessel-scroll {
  max-width: 1280px;
  margin: 0 auto;
}

.nm-vessel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 20px 48px 24px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.nm-vessel-track::-webkit-scrollbar { display: none; }
.nm-vessel-track.is-dragging { cursor: grabbing; }

/* Vessel card */
.nm-vessel-card {
  width: 420px;
  min-width: 420px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #0c2436;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
  cursor: pointer;
}

/* The entire card is one link; do not underline its nested text. */
.nm-vessel-track a.nm-vessel-card,
.nm-vessel-track a.nm-vessel-card:hover,
.nm-vessel-track a.nm-vessel-card:focus-visible {
  text-decoration: none !important;
}

.nm-vessel-card:hover {
  transform: translateY(-14px);
  box-shadow: 0 14px 44px rgba(0, 136, 204, 0.15);
}

.nm-vessel-card__img-wrap {
  position: relative;
  height: 260px;
  flex-shrink: 0;
  overflow: hidden;
}

.nm-vessel-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s ease;
  backface-visibility: hidden;
  will-change: transform;
}

.nm-vessel-card:hover .nm-vessel-card__img {
  transform: scale(1.05);
}

.nm-vessel-card__img-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #0c2436);
  pointer-events: none;
}

.nm-vessel-card__body {
  padding: 4px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: -6px;
  position: relative;
  z-index: 1;
}

.nm-vessel-card__title {
  font-family: 'Titillium Web', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.2;
  color: #ffffff;
}

.nm-vessel-card__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin-bottom: 16px;
}

.nm-vessel-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 20px;
}

.nm-vessel-card__spec {
  padding: 0;
}

.nm-vessel-card__spec + .nm-vessel-card__spec {
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  padding-left: 18px;
}

.nm-vessel-card__spec-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
  margin-bottom: 5px;
  font-family: 'Titillium Web', sans-serif;
}

.nm-vessel-card__spec-value {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Titillium Web', sans-serif;
}

.nm-vessel-card__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px 24px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #ffffff;
  background: linear-gradient(135deg, #0088cc, #00c6ff);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: 'Titillium Web', sans-serif;
  box-sizing: border-box;
}

.nm-vessel-card:hover .nm-vessel-card__cta {
  background: linear-gradient(135deg, #0099e6, #00d9ff);
  box-shadow: 0 10px 30px rgba(0, 136, 204, 0.40);
}

/* ============================================
   GEMINI PARTNERSHIP SECTION
   ============================================ */
.nm-gemini {
  background: #ffffff;
  padding: 112px 0 0;
  position: relative;
  overflow: hidden;
}

/* nm-gemini-cols = de core/columns block */
.nm-gemini .wp-block-columns.nm-gemini-cols {
  max-width: 1280px;
  margin: 0 auto !important;
  padding: 0 48px 96px;
  gap: 72px;
  align-items: center;
}

/* Fallback voor oudere selector */
.nm-gemini-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px 96px;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 72px;
  align-items: center;
}

.nm-gemini-img-wrap {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(0, 80, 140, 0.16);
}

.nm-gemini-img-wrap img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  object-position: right center;
  display: block;
}

.nm-gemini-content {}

.nm-gemini-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 24px !important;
  display: block;
}

.nm-gemini-eyebrow {
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #0088cc;
  margin-bottom: 14px;
  font-weight: 600;
  font-family: 'Titillium Web', sans-serif;
}

.nm-gemini-title {
  font-family: 'Titillium Web', sans-serif;
  font-size: clamp(1.7rem, 2.3vw, 2.35rem);
  font-weight: 800;
  color: #031d30;
  line-height: 1.15;
  margin-bottom: 20px;
}

.nm-gemini-body {
  color: #5a7080;
  line-height: 1.85;
  margin-bottom: 36px;
  font-size: 1rem;
}

/* Gemini stats row */
.nm-gemini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 32px 0;
  border-top: 1px solid #e8edf2;
  border-bottom: 1px solid #e8edf2;
  margin-top: 24px !important;
  margin-bottom: 36px;
}

.nm-gemini-stat { padding-right: 24px; }
.nm-gemini-stat + .nm-gemini-stat {
  border-left: 1px solid #e8edf2;
  padding-left: 24px;
}

.nm-gemini-stat__value {
  font-size: 2.2rem;
  font-weight: 800;
  color: #031d30;
  font-family: 'Titillium Web', sans-serif;
  line-height: 1;
  letter-spacing: -0.02em;
}

.nm-gemini-stat__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fa5b5;
  margin-top: 7px;
  font-weight: 600;
}

/* Exclusive dealer card */
.nm-dealer-card {
  background: #031d30;
  border-radius: 16px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nm-dealer-card__badge {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00c6ff;
  margin-bottom: 8px;
  font-weight: 700;
  font-family: 'Titillium Web', sans-serif;
}

.nm-dealer-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  font-family: 'Titillium Web', sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.nm-dealer-card__sub {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 8px;
  font-weight: 500;
}

.nm-dealer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0088cc, #00c6ff);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-family: 'Titillium Web', sans-serif;
}

.nm-dealer-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 136, 204, 0.40);
  color: #ffffff;
}

/* ============================================
   REVEAL ON SCROLL
   ============================================ */
.nm-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.nm-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   FOOTER
   Three horizontal bands: the company as a full-width hairline-divided readout,
   then the brand alongside the four sitelink columns, then the administrative
   closing line. The readout is horizontal on purpose — stacked under the logo
   it made a tall left column beside short link columns, which left a large
   empty well in the middle of the footer.
   ============================================ */
.nm-footer {
  --nmf-line:   rgba(255, 255, 255, 0.09);
  --nmf-link:   rgba(255, 255, 255, 0.74);
  --nmf-soon:   rgba(255, 255, 255, 0.42);
  --nmf-label:  rgba(255, 255, 255, 0.38);
  --nmf-body:   rgba(255, 255, 255, 0.58);
  --nmf-cyan:   #00c6ff;
  --nmf-ease:   cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  overflow: hidden;
  background: #031d30;
  color: #ffffff;
  text-align: left;
  font-size: 1rem;
}

/* Horizon: the page's closing edge, brightest at centre and fading out. */
.nm-footer__horizon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(0, 198, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.06) 100%);
  pointer-events: none;
}

.nm-footer__glow {
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 620px;
  background: radial-gradient(ellipse, rgba(0, 136, 204, 0.16), transparent 70%);
  pointer-events: none;
}

.nm-footer__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ---------- shared label ---------- */
.nm-footer__label {
  display: flex;
  align-items: center;
  font-family: 'Titillium Web', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  color: var(--nmf-label);
  margin: 0 0 18px;
}

.nm-pulse-dot--sm {
  width: 6px;
  height: 6px;
  margin-right: 9px;
}

/* ---------- band 1: company readout ---------- */
.nm-footer__strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  /* stretch, not start: every cell then spans the full band height, so the
     dividers run edge to edge instead of stopping at each cell's own content. */
  align-items: stretch;
  padding: 58px 0 34px;
  border-bottom: 1px solid var(--nmf-line);
}

/* Dividers sit ON the grid lines: no column gap, each cell carries its own
   padding, so the hairlines separate the row into one instrument strip rather
   than four boxes. (Grid gap + a border would put the line off-centre.) */
.nm-footer__cell { padding: 0 24px; }
.nm-footer__cell:first-child { padding-left: 0; }
.nm-footer__cell:last-child { padding-right: 0; }

.nm-footer__cell + .nm-footer__cell {
  border-left: 1px solid var(--nmf-line);
}

/* Caption above a value: sets expectations (opening hours, response time)
   without competing with the number or address it introduces. */
.nm-footer__note {
  margin: 0 0 9px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.40);
}

.nm-footer__value {
  display: block;
  font-family: 'Titillium Web', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #ffffff;
  font-style: normal;
  text-decoration: none;
}

a.nm-footer__value-link { transition: color 0.25s ease; }
a.nm-footer__value-link:hover { color: var(--nmf-cyan); }

.nm-footer__social {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nm-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--nmf-line);
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.02);
  transition: color 0.3s var(--nmf-ease), border-color 0.3s var(--nmf-ease),
              background-color 0.3s var(--nmf-ease), transform 0.3s var(--nmf-ease);
}

.nm-footer__social a:hover {
  color: var(--nmf-cyan);
  border-color: rgba(0, 198, 255, 0.45);
  background: rgba(0, 198, 255, 0.08);
  transform: translateY(-2px);
}

/* ---------- band 2: brand + sitelinks ---------- */
.nm-footer__nav {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
  gap: 48px 40px;
  align-items: start;
  padding: 46px 0 52px;
}

.nm-footer__brand { max-width: 340px; }

.nm-footer__logo { display: inline-block; }

.nm-footer__logo img {
  height: 34px;
  width: auto;
  display: block;
}

.nm-footer__desc {
  margin: 26px 0 0;
  color: var(--nmf-body);
  font-size: 0.9rem;
  line-height: 1.75;
}

.nm-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nm-footer__col li + li { margin-top: 12px; }

.nm-footer__col a,
.nm-footer__col .nm-footer__soon {
  display: inline-block;
  font-size: 0.925rem;
  line-height: 1.45;
  text-decoration: none;
}

.nm-footer__col a {
  color: var(--nmf-link);
  transition: color 0.25s ease;
}

.nm-footer__col a:hover { color: var(--nmf-cyan); }

/* Menu entries still pointing at "#". Kept close to the link colour on
   purpose: at a big contrast gap a column of them reads as broken UI rather
   than as pages that don't exist yet. Not clickable, so no dead links ship.
   Giving the item a real URL in the Navigation editor turns it into a link. */
.nm-footer__soon {
  color: var(--nmf-soon);
  cursor: default;
}

/* ---------- band 3: closing line ---------- */
.nm-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 32px;
  padding: 22px 0 28px;
  border-top: 1px solid var(--nmf-line);
}

.nm-footer__copy,
.nm-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin: 0;
}

.nm-footer__bottom,
.nm-footer__bottom a,
.nm-footer__bottom .nm-footer__soon {
  font-family: 'Titillium Web', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.5;
}

.nm-footer__copy { color: rgba(255, 255, 255, 0.34); }

.nm-footer__legal a {
  color: rgba(255, 255, 255, 0.48);
  text-decoration: none;
  transition: color 0.25s ease;
}

.nm-footer__legal a:hover { color: var(--nmf-cyan); }
.nm-footer__bottom .nm-footer__soon { color: rgba(255, 255, 255, 0.30); }

/* ---------- a11y ---------- */
.nm-footer a:focus-visible {
  outline: 2px solid var(--nmf-cyan);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .nm-footer *,
  .nm-footer *::after {
    animation: none !important;
    transition: none !important;
  }
  .nm-footer a:hover { transform: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nm-footer__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 44px 32px;
  }
  .nm-footer__brand { grid-column: 1 / -1; max-width: 560px; }
}

@media (max-width: 900px) {
  .nm-footer__inner { padding: 0 28px; }
  .nm-footer__strip { padding: 48px 0 30px; }
  .nm-footer__nav { padding: 40px 0 44px; }
}

@media (max-width: 700px) {
  .nm-footer__nav { grid-template-columns: 1fr 1fr; gap: 36px 28px; }

  /* Readout folds to 2x2: the divider moves to the second column only. */
  .nm-footer__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .nm-footer__cell { padding: 0; }
  .nm-footer__cell + .nm-footer__cell { border-left: none; }
  .nm-footer__cell:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--nmf-line); }
}

@media (max-width: 460px) {
  .nm-footer__inner { padding: 0 20px; }

  .nm-footer__strip { padding: 40px 0 26px; }

  .nm-footer__nav {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 34px 0 32px;
  }

  .nm-footer__strip { grid-template-columns: 1fr; row-gap: 26px; }
  .nm-footer__cell,
  .nm-footer__cell:nth-child(even) { padding-left: 0; border-left: none; }

  .nm-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Keep the fixed desktop navigation from covering the homepage hero content. */
@media (min-width: 901px) {
  .nm-hero {
    box-sizing: border-box;
    min-height: max(100vh, 960px);
    padding-top: 136px !important;
  }
}

/* Wide screens can still have little vertical space (ultrawide/scaled displays).
   Compact only the homepage hero in that specific viewport shape. */
@media (min-width: 1440px) and (max-height: 900px) {
  .nm-hero-content {
    padding-bottom: 52px !important;
  }

  .nm-hero__headline {
    margin-bottom: 26px !important;
  }

  .nm-hero-title,
  .nm-hero__title,
  h1.nm-hero-title,
  h1.wp-block-heading.nm-hero-title,
  .nm-hero h1,
  .nm-hero-content h1 {
    font-size: clamp(3.5rem, 4vw, 4.5rem) !important;
    line-height: .95 !important;
  }

  .nm-cta-card.wp-block-column {
    padding: 24px !important;
  }
}

/* ---- Tablet (≤ 900px) ---- */
@media (max-width: 900px) {
  .nm-nav {
    padding: 16px 24px;
    top: 16px;
  }

  /* !important: beats core's .is-layout-flex{display:flex} on the navigation block,
     whose source order varies per page (e.g. when vessel.css is also enqueued). */
  .nm-nav__menu { display: none !important; }

  /* Hide Inquire CTA + language from nav; show mobile Inquire + hamburger instead */
  .nm-nav__right .nm-nav__cta { display: none !important; }
  .nm-nav__right .nm-lang     { display: none !important; }
  .nm-nav__inquire        { display: inline-flex !important; }
  .nm-hamburger           { display: flex !important; }

  /* CTA cards: stack */
  .nm-cta-grid,
  .nm-cta-grid.wp-block-columns {
    flex-direction: column !important;
    max-width: 100% !important;
  }

  /* Services: grid → single column (was flex-direction which doesn't affect grids) */
  .nm-services-grid,
  .nm-services-grid.wp-block-columns {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Gemini mini card: allow wrap so text doesn't overflow */
  .nm-gemini-mini {
    flex-wrap: wrap;
  }

  /* Gemini partnership: single column */
  .nm-gemini-inner {
    grid-template-columns: 1fr !important;
    padding: 0 24px 64px !important;
    gap: 48px !important;
  }

  .nm-gemini .wp-block-columns.nm-gemini-cols {
    flex-direction: column !important;
    padding: 0 24px 64px !important;
    gap: 48px !important;
  }

  .nm-gemini-img-wrap img { height: 320px; }

  .nm-vessels-header {
    padding: 0 24px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  .nm-vessel-track { padding: 20px 24px 24px !important; }
}

/* ---- Mobile (≤ 640px) ---- */
@media (max-width: 640px) {

  /* NAV */
  .nm-nav {
    top: calc(12px + env(safe-area-inset-top, 0px));
    padding: 12px 20px;
    width: calc(100% - 24px);
  }
  .nm-nav__logo img { height: 32px; }
  .nm-nav__right .nm-lang { display: none; }

  /* HERO */
  .nm-hero {
    min-height: 75vh;
    min-height: 75svh;
  }

  /* Switch left→right overlay to top→bottom on mobile */
  .nm-hero::before {
    background: linear-gradient(to bottom, rgba(3,29,48,0.60), rgba(3,29,48,0.30), transparent);
  }

  .nm-hero-content {
    padding: 0 20px 48px !important;
  }

  .nm-hero__headline {
    margin-bottom: 20px !important;
  }

  .nm-hero-title,
  .nm-hero__title,
  h1.nm-hero-title,
  h1.wp-block-heading.nm-hero-title,
  .nm-hero h1,
  .nm-hero-content h1 {
    font-size: clamp(2.2rem, 11vw, 2.8rem) !important;
    line-height: 1 !important;
  }

  .nm-hero__sub,
  .nm-hero-content p.nm-hero__sub {
    font-size: 1rem !important;
    max-width: 100%;
  }

  /* Swap desktop CTA cards for mobile CTA buttons */
  .nm-cta-grid,
  .nm-cta-grid.wp-block-columns {
    display: none !important;
  }

  .nm-hero-cta-mobile {
    display: flex !important;
  }

  /* SERVICES */
  .nm-services {
    padding: 72px 0 32px !important;
  }

  /* Disable scroll-reveal on the services grid — it sits just below the hero
     on mobile so it never pre-triggers and stays invisible on load */
  .nm-services-grid.nm-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .nm-services-inner { padding: 0 20px; }

  .nm-services-title,
  .nm-services-left h2,
  .nm-services-left .wp-block-heading {
    font-size: clamp(1.875rem, 9vw, 2.5rem) !important;
  }

  .nm-services-left p:not(.nm-eyebrow-dark) {
    font-size: 1rem !important;
    max-width: 100%;
  }

  .nm-stats-block { padding: 24px !important; }

  .nm-stats-grid,
  .nm-stats-grid.wp-block-columns {
    gap: 20px !important;
  }

  .nm-stat-value { font-size: 1.875rem !important; }

  .nm-gemini-mini {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 24px !important;
  }

  .nm-gemini-mini img,
  .nm-gemini-mini-logo {
    width: 100px !important;
  }

  /* LOGO SCROLLER */
  .nm-logo-scroller-block { padding: 40px 0 56px; }
  .nm-logo-item { height: 76px; }

  /* VESSELS */
  .nm-vessels { padding: 72px 0; }

  .nm-vessels-header-left .wp-block-heading {
    font-size: clamp(1.875rem, 8vw, 2.5rem) !important;
  }

  .nm-vessel-track {
    padding: 16px 20px 20px !important;
    gap: 16px !important;
  }

  /* Alleen de horizontaal scrollende slider heeft een vaste kaartbreedte
     nodig. Ongescoped raakte dit ook .nm-stock-grid en .nmuc-vessels-grid,
     waar de kaart juist zijn kolom hoort te vullen: die stonden op mobiel
     op 300px met lege ruimte ernaast, omdat hun `width: auto` het van dit
     !important verloor. Elke slider-kaart staat in een .nm-vessel-track. */
  .nm-vessel-track .nm-vessel-card {
    width: 300px !important;
    min-width: 300px !important;
  }

  .nm-vessel-card__img-wrap { height: 200px !important; }

  /* GEMINI SECTION */
  .nm-gemini { padding: 72px 0 0; }

  .nm-gemini-img-wrap img { height: 240px !important; }

  .nm-gemini-title {
    font-size: clamp(1.5rem, 6vw, 1.75rem) !important;
  }

  /* Stats: all 3 on one row on mobile */
  .nm-gemini-stats {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .nm-gemini-stat:nth-child(3) {
    grid-column: auto;
    border-left: 1px solid #e8edf2 !important;
    padding-left: 24px !important;
    border-top: none !important;
    padding-top: 0 !important;
  }

  /* Dealer card: stack button below text */
  .nm-dealer-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 18px 20px !important;
  }

  .nm-dealer-cta {
    width: 100% !important;
    justify-content: center !important;
  }

}