/*
  Background classes for the 17 new images added to /img/bg/.
  Same pattern as the compiled classes in global.min.css:
  .ns-bg-img-Bg-<Name> { background: linear-gradient(overlay), url(image) }
  Used with .ns-bg-img-fixed (scroll) or .ns-bg-parallax (fixed) for section hero backgrounds.
*/

.ns-bg-img-Bg-Ancient-Manuscript-Silhouette{background:linear-gradient( rgba(20,20,20,.55),rgba(20,20,20,.55) ),url( '/img/bg/Bg-Ancient-Manuscript-Silhouette.jpg' )}
.ns-bg-img-Bg-Antique-Keys-Map-Color{background:linear-gradient( rgba(20,20,20,.65),rgba(20,20,20,.65) ),url( '/img/bg/Bg-Antique-Keys-Map-Color.png' )}
.ns-bg-img-Bg-Antique-Keys-Map-Mono{background:linear-gradient( rgba(20,20,20,.6),rgba(20,20,20,.6) ),url( '/img/bg/Bg-Antique-Keys-Map-Mono.jpg' )}
.ns-bg-img-Bg-Antique-Map-Asia{background:linear-gradient( rgba(20,20,20,.65),rgba(20,20,20,.65) ),url( '/img/bg/Bg-Antique-Map-Asia.jpg' )}
.ns-bg-img-Bg-Antique-Maps-Books{background:linear-gradient( rgba(20,20,20,.6),rgba(20,20,20,.6) ),url( '/img/bg/Bg-Antique-Maps-Books.jpg' )}
.ns-bg-img-Bg-Compass-Old-Map-Macro{background:linear-gradient( rgba(20,20,20,.55),rgba(20,20,20,.55) ),url( '/img/bg/Bg-Compass-Old-Map-Macro.png' )}
.ns-bg-img-Bg-Compass-Watch-Keys-Color{background:linear-gradient( rgba(20,20,20,.6),rgba(20,20,20,.6) ),url( '/img/bg/Bg-Compass-Watch-Keys-Color.png' )}
.ns-bg-img-Bg-Compass-Watch-Keys-Mono{background:linear-gradient( rgba(20,20,20,.6),rgba(20,20,20,.6) ),url( '/img/bg/Bg-Compass-Watch-Keys-Mono.png' )}
.ns-bg-img-Bg-Data-Pattern-Equations{background:linear-gradient( rgba(20,20,20,.55),rgba(20,20,20,.55) ),url( '/img/bg/Bg-Data-Pattern-Equations.jpg' )}
.ns-bg-img-Bg-Foggy-Harbour-Tall-Ships{background:linear-gradient( rgba(20,20,20,.55),rgba(20,20,20,.55) ),url( '/img/bg/Bg-Data-Pattern-Equations.jpg' )}
.ns-bg-img-Bg-Investigator-Desk-Globe{background:linear-gradient( rgba(20,20,20,.6),rgba(20,20,20,.6) ),url( '/img/bg/Bg-Investigator-Desk-Globe.jpg' )}
.ns-bg-img-Bg-Journalist-Camera-Desk{background:linear-gradient( rgba(20,20,20,.6),rgba(20,20,20,.6) ),url( '/img/bg/Bg-Journalist-Camera-Desk.png' )}
.ns-bg-img-Bg-Kings-Cross-Clock{background:linear-gradient( rgba(20,20,20,.7),rgba(20,20,20,.7) ),url( '/img/bg/Bg-Kings-Cross-Clock.png' )}
.ns-bg-img-Bg-Nautical-Chart-Ships{background:linear-gradient( rgba(20,20,20,.65),rgba(20,20,20,.65) ),url( '/img/bg/Bg-Nautical-Chart-Ships.jpg' )}
.ns-bg-img-Bg-Sailing-Ship-Map-Illustration{background:linear-gradient( rgba(20,20,20,.6),rgba(20,20,20,.6) ),url( '/img/bg/Bg-Sailing-Ship-Map-Illustration.jpg' )}
.ns-bg-img-Bg-Vintage-Globe-Atlantic{background:linear-gradient( rgba(20,20,20,.6),rgba(20,20,20,.6) ),url( '/img/bg/Bg-Vintage-Globe-Atlantic.jpg' )}
.ns-bg-img-Bg-Vintage-Rotary-Phone{background:linear-gradient( rgba(20,20,20,.55),rgba(20,20,20,.55) ),url( '/img/bg/Bg-Vintage-Rotary-Phone.png' )}

/* Checklist styling for service "includes" lists */
.ns-service-list{list-style:none;padding-left:0;margin-bottom:0}
.ns-service-list li{position:relative;padding:7px 0 7px 32px;border-bottom:1px solid #eaeaea;text-align:left}
.ns-service-list li:last-child{border-bottom:none}
.ns-service-list li:before{content:"\f00c";font-family:"Font Awesome 5 Free";font-weight:900;color:#27a4e0;position:absolute;left:2px;top:8px;font-size:13px}

/* Numbered, connected-line process steps (e.g. "Our Method") */
.ns-method-steps{position:relative;display:flex;align-items:flex-start;justify-content:space-between;margin-top:10px;padding:0 10px}
.ns-method-steps:before{content:'';position:absolute;top:34px;left:8%;right:8%;height:3px;background:linear-gradient(90deg,#27a4e0,#27a4e0 50%,#27a4e0);opacity:.3;z-index:0}
.ns-method-step{position:relative;z-index:1;flex:1 1 0;text-align:center;padding:0 12px}
.ns-method-number{width:68px;height:68px;line-height:66px;border-radius:50%;background:#27a4e0;color:#fff;font-size:1.5rem;font-weight:700;margin:0 auto 18px;box-shadow:0 6px 16px rgba(20,20,20,.25);border:3px solid #fff}
.ns-method-step h5{margin-bottom:8px;font-weight:700}
.ns-method-step p{margin-bottom:0}
.ns-method-arrow{display:none}

@media (max-width:767px){
  .ns-method-steps{flex-direction:column;padding:0}
  .ns-method-steps:before{left:34px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .ns-method-step{padding:0 0 34px 0;text-align:left;padding-left:0}
  .ns-method-step:last-child{padding-bottom:0}
  .ns-method-number{margin:0 20px 0 0;float:left}
  .ns-method-step .ns-method-body{overflow:hidden;padding-top:14px}
}

/* Blog post cards */
.ns-blog-card-img{width:100%;height:230px;object-fit:cover}

/* Side image next to a text column (About/Home/Media two-column sections).
   Capped height + object-fit so a tall portrait photo never dwarfs the
   text column it sits beside. Mobile/tablet (below the lg breakpoint,
   where the columns stack) gets a shorter crop; desktop gets a taller one. */
.ns-side-image{width:100%;height:300px;object-fit:cover}
@media (min-width:992px){
  .ns-side-image{height:560px}
}

/* Left-aligned text sitting directly on a full-width photo background.
   A soft dark scrim behind the text block gives it a defined "home" on
   the photo instead of floating in open space, and caps the reading
   width so long paragraphs don't run the full width of a wide image. */
.ns-photo-text-panel{
  max-width:620px;
  padding:36px 40px;
  background:rgba(10,10,10,.32);
  border-radius:4px;
}
@media (max-width:991px){
  .ns-photo-text-panel{
    max-width:100%;
    padding:26px 22px;
    background:rgba(10,10,10,.4);
  }
}

/* Elegant deep charcoal-navy gradient for CTA / "contact us" sections,
   replacing the flat mid-grey .ns-bg-grd-charcoal. A soft blue glow
   (matching the site accent colour) keeps it from reading as plain black. */
.ns-bg-grd-elegant{
  background-image:
    radial-gradient(circle at 15% 15%, rgba(39,164,224,.12), transparent 45%),
    linear-gradient(135deg, #1b222b 0%, #12161c 55%, #060708 100%);
  background-repeat:no-repeat;
  background-size:cover;
}

/* Hero logo (home page carousel). The hero band has a fixed height
   (500px up to the lg breakpoint, 600px above it) with its content
   vertically centred inside, so the logo needs an explicit cap or it
   crowds out the tagline and buttons below it, especially on mobile. */
.ns-hero-logo{
  width:100%;
  max-width:360px;
  height:auto;
}
@media (min-width:576px){
  .ns-hero-logo{max-width:400px}
}
@media (min-width:768px){
  .ns-hero-logo{max-width:420px}
}
@media (min-width:992px){
  .ns-hero-logo{max-width:580px}
  .padding-y-custom{padding-bottom: 120px !important; padding-top: 120px;}
}
@media (max-width:768px) {
  #mainNav .navbar-brand img{
    width: 70px !important;
    max-width: 70px !important;
  }
  .ns-section-titlebanner{
    padding-top: 88px !important;
  }
}