@charset "utf-8";
/* ==========================================================================
   NAAVAAY MARITIME SOLUTIONS — responsive overrides
   Mobile-first: style.css holds the base (largest) layout rules, this file
   steps the layout DOWN at each breakpoint. Loaded after style.css.

   Bootstrap 5 breakpoints: sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1399px — below the design width, tighten the mega menu
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .nv-mega__inner { grid-template-columns: 1fr 1fr 1fr 280px; gap: 1.75rem; }
  .nv-mega__inner--4col { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .nv-mega__inner--2col { grid-template-columns: 1fr 1fr 300px; gap: 1.75rem; }
  .nv-nav { gap: .15rem; }
  .nv-nav__link { padding: .75rem .7rem; font-size: .9rem; }
}

/* --------------------------------------------------------------------------
   ≤ 1199px — drop the mega-menu promo, soften the trust strip
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .nv-mega__inner { grid-template-columns: repeat(3, 1fr); }
  /* the promo tile is the first thing to go when width gets tight */
  .nv-mega__promo { display: none; }
  .nv-mega__inner--4col { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .nv-mega__inner--4col .nv-mega__list a { font-size: .875rem; padding-inline: .5rem; }
  .nv-mega__inner--2col { grid-template-columns: 1fr 1fr; }

  /* The horizontal lockup is ~4.8:1, so it eats far more width than a compact
     mark would. Between lg and xl the logo, six nav items and the CTA no
     longer fit on one bar, and the CTA was being clipped — so shrink the logo
     rather than drop the call to action. */
  .nv-brand img { height: 42px; }
  .nv-header.is-stuck .nv-brand img { height: 38px; }
  .nv-nav__link { padding: .75rem .5rem; font-size: .875rem; }
  .nv-navbar__actions .btn-nv--sm { --btn-px: 1.05rem; font-size: .84rem; }

  .nv-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .nv-strip__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .nv-strip__item:nth-child(3),
  .nv-strip__item:nth-child(4) { padding-top: 1.5rem; border-top: 1px solid var(--nv-line); }

  .nv-footer__grid { grid-template-columns: 1.4fr 1fr 1.3fr; }
  .nv-footer__col--services { display: none; }

  .nv-topbar__list li:nth-child(3) { display: none; }
}

/* --------------------------------------------------------------------------
   ≤ 991px — the big one: desktop nav becomes the off-canvas drawer
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  :root {
    --nv-navbar-h: 74px;
    --nv-navbar-h-stuck: 66px;
  }

  /* iOS Safari zooms the whole page whenever a focused field is smaller than
     16px, and does not zoom back out. 16 is a hard threshold, not a preference,
     so the form controls step up here even though the desktop sizes are finer. */
  .nv-form .form-control,
  .nv-form .form-select,
  .nv-search input { font-size: 16px; }

  /* WCAG 2.5.8 wants a 24x24 minimum target. These sit on their own rather than
     inside a sentence, so the inline-link exemption does not apply to them and
     they were only 20px tall. Links inside body copy are left alone. */
  .nv-footer__bar ul a,
  .nv-crumbs a,
  .nv-crumbs [aria-current] { display: inline-block; padding-block: .35rem; }

  .nv-nav,
  .nv-mega,
  .nv-navbar__actions .btn-nv { display: none; }

  .nv-burger { display: inline-flex; }
  .nv-navbar > .container { justify-content: space-between; gap: 1rem; }
  .nv-brand img { height: 44px; }
  .nv-header.is-stuck .nv-brand img { height: 40px; }

  .nv-hero { min-height: clamp(560px, 82vh, 700px); }
  .nv-hero__content { max-width: 100%; }
  .nv-hero__nav { display: none; }
  .nv-hero__dots { left: 50%; transform: translateX(-50%); }

  .nv-counters__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }

  .nv-process { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .nv-process__item:nth-child(2)::after { display: none; }

  .nv-footer__grid { grid-template-columns: 1fr 1fr; }
  .nv-footer__col--services { display: block; }

  .nv-cta { text-align: center; justify-content: center; }
  .nv-cta p { margin-inline: auto; }
  .nv-cta__actions { justify-content: center; width: 100%; }

  .nv-map { min-height: 340px; }
}

/* --------------------------------------------------------------------------
   ≤ 767px — single-column content, stacked utility bar
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body { font-size: 1rem; line-height: 1.7; }

  /* Bootstrap rows pull outwards by half the gutter. With g-5 that is -24px a
     side, which is more than the container's padding on a phone, so columns
     ended up wider than the viewport and their text was clipped. Capping the
     HORIZONTAL gutter fixes it; the vertical gutter from g-4 / g-5 is left
     alone so the stacked spacing stays generous. */
  .row { --bs-gutter-x: 1.5rem; }

  .nv-topbar { font-size: .76rem; }
  .nv-topbar__list { gap: 1rem; justify-content: center; width: 100%; }
  .nv-topbar__list li:nth-child(2) { display: none; }

  .nv-strip { margin-top: -40px; }
  .nv-strip__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .nv-strip__item + .nv-strip__item {
    border-left: 0;
    padding-left: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--nv-line);
  }

  .nv-hero__cta { flex-direction: column; align-items: stretch; }
  .nv-hero__cta .btn-nv,
  .nv-hero__cta .btn-nv-outline,
  .nv-hero__cta .btn-nv-ghost { width: 100%; }

  .nv-ticks--2 { grid-template-columns: 1fr; }

  .nv-process { grid-template-columns: 1fr; }
  .nv-process__item::after { display: none; }

  .nv-filter { flex-direction: column; align-items: stretch; padding: 1.25rem; }
  /* min-width:0 is required: a flex item defaults to its content's minimum
     size, so the nowrap pill strip would otherwise force itself — and its
     siblings — wider than the phone viewport instead of scrolling. */
  .nv-search,
  .nv-filter__pills { min-width: 0; max-width: 100%; }
  .nv-search { flex: 1 1 auto; }
  .nv-filter__pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .35rem; scrollbar-width: thin; }
  .nv-pill { white-space: nowrap; }

  .nv-quote { padding: 2rem 1.5rem; }

  .nv-footer__bar { flex-direction: column; text-align: center; }
  .nv-footer__bar ul { justify-content: center; gap: 1.15rem; }

  .nv-timeline { padding-left: 2rem; }
  .nv-timeline li::before { left: -2rem; width: 20px; height: 20px; }
  .nv-timeline::before { left: 9px; }

  .modal-header { padding: 1.35rem 1.35rem .75rem; }
  .modal-body { padding: .5rem 1.35rem 1.35rem; }
}

/* --------------------------------------------------------------------------
   ≤ 575px — phones
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  :root { --nv-gutter: 1.15rem; }

  /* uppercase + tracking gets long on a phone; ease the label back a step */
  .nv-eyebrow { font-size: .85rem; letter-spacing: .12em; }

  .nv-topbar { display: none; }              /* reclaim vertical space */

  /* :not() is load-bearing — without it this rule out-specifies
     .nv-page--overlay { padding-top: 0 } in style.css and drops a blank
     navbar-height band above the home page hero. */
  .nv-page:not(.nv-page--overlay) { padding-top: var(--nv-navbar-h); }

  .nv-hero__inner,
  .nv-pagehero { padding-top: calc(var(--nv-navbar-h) + 3rem); }

  .nv-counters__grid { grid-template-columns: 1fr; }

  .nv-footer__grid { grid-template-columns: 1fr; }

  .nv-card__watermark { font-size: 5.5rem; }
  .nv-card__chip { width: 46px; height: 46px; font-size: 1.2rem; left: 1rem; bottom: 1rem; }
  .nv-card__body { padding: 1.35rem 1.25rem 1.5rem; }

  .nv-marquee__item { width: 150px; height: 72px; font-size: .82rem; }

  .nv-top { width: 44px; height: 44px; }

  .nv-figure__badge { right: 1rem; bottom: 1rem; padding: .75rem 1rem; }
  .nv-figure__badge strong { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Short landscape phones — stop the hero eating the whole screen
   -------------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  /* A phone turned sideways has ~320-390px of height. The desktop hero spends
     most of that on padding before a word is visible, so the whole first screen
     reads as empty navy. Everything here buys vertical room back: the utility
     strip goes (it is the least useful chrome and costs 42px), the hero stops
     insisting on a height taller than the screen, and the vertical padding
     drops to something proportionate to the viewport it now sits in. */
  .nv-hero { min-height: 420px; }
  .nv-hero__inner {
    padding-top: calc(var(--nv-topbar-h) + var(--nv-navbar-h) + 1.25rem);
    padding-bottom: 2.25rem;
  }
  .nv-pagehero {
    padding-top: calc(var(--nv-topbar-h) + var(--nv-navbar-h) + 1.5rem);
    padding-bottom: 1.75rem;
  }

  /* The drawer is a full-height column of links; at 320px tall it must scroll. */
  .nv-drawer { overflow-y: auto; }
}

/* A short viewport that is also narrow is a phone held sideways, not a stubby
   desktop window. Only here is it worth dropping the utility strip and shrinking
   the display type -- doing that on a wide short window would give a 1440px
   screen a 30px headline. */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 991.98px) {
  .nv-topbar { display: none; }
  .nv-page:not(.nv-page--overlay) { padding-top: var(--nv-navbar-h); }

  .nv-hero__inner { padding-top: calc(var(--nv-navbar-h) + 1.25rem); }
  .nv-hero h1 { font-size: 1.85rem; margin-bottom: .7rem; }
  .nv-hero__text { font-size: 1rem; margin-bottom: 1.1rem; }
  .nv-hero__tag { margin-bottom: .7rem; padding: .35rem .85rem; }

  .nv-pagehero { padding-top: calc(var(--nv-navbar-h) + 1.5rem); }
  .nv-pagehero h1 { font-size: 1.85rem; }
}

/* --------------------------------------------------------------------------
   Very large screens — cap the hero so it never becomes a letterbox
   -------------------------------------------------------------------------- */
@media (min-width: 1800px) {
  .nv-hero { min-height: 820px; }
}

/* --------------------------------------------------------------------------
   Coarse pointers — hover effects are meaningless, keep tap targets big
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .nv-card:hover { transform: none; box-shadow: var(--nv-sh-sm); }
  .nv-icard:hover { transform: none; }
  .nv-card:hover .nv-card__media img { transform: none; }
  .btn-nv:hover, .btn-nv-outline:hover, .btn-nv-ghost:hover { transform: none; }
  .nv-nav__link, .nv-drawer__nav a, .nv-drawer__toggle { min-height: 44px; }
}