/* ==========================================================================
   NAVAL ORIENTATION: Home page sections
   ========================================================================== */

/* =========================================================================
   HERO
   ========================================================================= */
.no-hero {
  position: relative;
  min-height: clamp(540px, 100svh, 1000px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  background: var(--no-ink-900);
  overflow: hidden;
  padding-top: calc(var(--no-header-h) + var(--no-topbar-h) + 1rem);
}
.no-hero__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.no-hero__media video,
.no-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Motion layer sits above the poster; the poster stays as the LCP element and
   as the fallback whenever the video is suppressed or blocked. */
.no-hero__media video,
.no-hero__yt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--no-dur-cine, 1.6s) var(--no-ease-out);
}
.no-hero__media video.is-playing,
.no-hero__yt.is-playing { opacity: 1; }

/* A 16:9 iframe scaled to cover an arbitrary container. */
.no-hero__yt { pointer-events: none; }
.no-hero__yt iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;          /* 100vw / (16/9) */
  min-height: 100%;
  min-width: 177.78vh;      /* 100vh * (16/9) */
  border: 0;
  pointer-events: none;
}
/*
 * Hero scrim.
 *
 * The footage is bright in the middle of its loop, and the previous mix thinned
 * to .28 across exactly the band the headline sits in, so the title and lead
 * washed out for part of every cycle. The vertical gradient no longer drops
 * below .52, and the horizontal one holds a heavier left side, which is the
 * column all the copy occupies. The picture still reads: the top and the far
 * right are barely touched.
 */
.no-hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(11,30,44,.78) 0%, rgba(11,30,44,.56) 34%, rgba(11,30,44,.62) 62%, rgba(6,15,23,.92) 100%),
    linear-gradient(90deg, rgba(6,15,23,.80) 0%, rgba(11,30,44,.46) 46%, rgba(11,30,44,.10) 78%, transparent 100%);
}
.no-hero__grid { z-index: -1; opacity: .55; }

/* Animated sonar sweep: subtle "radar" signature */
.no-hero__sonar {
  position: absolute;
  right: -8%; top: 18%;
  width: min(46vw, 620px); aspect-ratio: 1;
  z-index: -1;
  opacity: .3;
  pointer-events: none;
}
.no-hero__sonar span {
  position: absolute; inset: 0;
  border: 1px solid rgba(111,207,255,.4);
  border-radius: 50%;
  animation: noSonar 5s var(--no-ease-out) infinite;
}
.no-hero__sonar span:nth-child(2) { animation-delay: 1.66s; }
.no-hero__sonar span:nth-child(3) { animation-delay: 3.33s; }
@keyframes noSonar {
  0%   { transform: scale(.18); opacity: 0; }
  12%  { opacity: .85; }
  100% { transform: scale(1); opacity: 0; }
}

.no-hero__body {
  position: relative;
  padding-bottom: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  flex: 1;
  display: flex;
  align-items: center;
}
.no-hero__content { max-width: 860px; }

.no-hero__kicker {
  color: var(--no-accent);
  margin-bottom: var(--no-s-5);
  animation: noRise .8s var(--no-ease-out) both;
}
.no-hero__title {
  /*
   * Sized so the headline holds its two written lines rather than breaking
   * into three. It was capped at 3.375rem, which put "Your Integrated Marine
   * Partner" at about 834px inside an 820px column — fourteen pixels too wide,
   * so on a 1600 or 1920 screen the first line broke and the headline read as
   * three. The cap comes down to 3.15rem, which fits with room to spare, and
   * the fluid middle term is steeper so the second line survives further down:
   * two lines from roughly 730px up, and on a phone three tidy lines instead
   * of four ragged ones.
   */
  font-size: clamp(1.4rem, .7rem + 4.2vw, 3.15rem);
  line-height: 1.12;
  letter-spacing: -.018em;
  color: #fff;
  text-wrap: balance;
  margin-bottom: var(--no-s-6);
}
.no-hero__title .ln { display: block; animation: noRise .9s var(--no-ease-out) both; }
.no-hero__title .ln:nth-child(1) { animation-delay: .08s; }
.no-hero__title .ln:nth-child(2) { animation-delay: .18s; }
.no-hero__title em {
  font-style: normal;
  color: var(--no-accent);
}
/*
 * The gradient is applied only where clipping text to a background actually
 * works. Without the guard, a browser that ignores background-clip renders
 * transparent text on a transparent background: an invisible headline. The
 * same applies in forced-colours mode, which is why it is reverted there.
 */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .no-hero__title em {
    background: linear-gradient(100deg, var(--no-accent) 0%, #BDEBFF 55%, var(--no-accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
@media (forced-colors: active) {
  .no-hero__title em {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: currentColor;
  }
}
@keyframes noRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.no-hero__lead {
  font-size: var(--no-fs-md);
  line-height: var(--no-lh-relaxed);
  color: rgba(255,255,255,.82);
  max-width: 58ch;
  margin-bottom: var(--no-s-6);
  animation: noRise .9s var(--no-ease-out) .3s both;
}
.no-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--no-s-4);
  animation: noRise .9s var(--no-ease-out) .42s both;
}
/*
 * Below 560px the two long labels no longer fit side by side. Stacking them at
 * full width keeps both tap targets a comfortable size and stops the second
 * button from wrapping into a lone, awkward half-row.
 */
@media (max-width: 560px) {
  .no-hero__actions { flex-direction: column; align-items: stretch; }
  .no-hero__actions .no-btn { width: 100%; }
}

/* Stat strip docked to hero bottom */
.no-hero__stats {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(6,15,23,.35), rgba(6,15,23,.72));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.no-hero__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.no-stat {
  padding: clamp(1.25rem, .9rem + 1.2vw, 2rem) clamp(.75rem, .4rem + 1vw, 1.75rem);
  border-left: 1px solid rgba(255,255,255,.1);
}
.no-stat:first-child { border-left: 0; padding-left: 0; }
.no-stat__num {
  font-family: var(--no-font-display);
  font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  color: #fff;
  display: flex; align-items: baseline; gap: 2px;
}
.no-stat__num sup {
  font-size: .42em; color: var(--no-accent); font-weight: 600; top: -.1em; position: relative;
}
/* An unconfirmed figure is visibly marked so it cannot ship by accident. */
.no-stat--unverified .no-stat__num { color: rgba(255, 255, 255, .55); }
.no-stat--unverified .no-stat__label {
  color: #FFC46B;
}
.no-stat--unverified .no-stat__label::before {
  content: "⚠ ";
}

.no-stat__label {
  margin-top: .5rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  line-height: 1.4;
}
@media (max-width: 780px) {
  .no-hero__stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .no-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .no-stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
}

/* Scroll cue */
.no-hero__cue {
  position: absolute;
  left: 50%; bottom: calc(100% + 18px);
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: .5rem;
  font-family: var(--no-font-mono);
  font-size: 9px; letter-spacing: var(--no-tr-wider); text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.no-hero__cue i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(180deg, transparent, var(--no-accent));
  animation: noCue 2.2s var(--no-ease-in-out) infinite;
}
@keyframes noCue { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 900px) { .no-hero__cue { display: none; } }


/* =========================================================================
   ABOUT / INTRO
   ========================================================================= */
.no-about__grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(2rem, 1rem + 4.4vw, 5rem);
  align-items: center;
}
@media (max-width: 960px) { .no-about__grid { grid-template-columns: 1fr; } }

.no-about__visual { position: relative; }
.no-about__frame {
  position: relative;
  border-radius: var(--no-r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 4.6;
  box-shadow: var(--no-sh-lg);
}
.no-about__frame img { width: 100%; height: 100%; object-fit: cover; }
.no-about__frame--sm {
  position: absolute;
  right: -6%; bottom: -8%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: var(--no-r-lg);
  border: 8px solid #fff;
  overflow: hidden;
  box-shadow: var(--no-sh-lg);
}
.no-about__frame--sm img { width: 100%; height: 100%; object-fit: cover; }
/* Single-column layout: the visual is centred and the inset is pulled back
   inside the container, otherwise its negative offset escapes the gutter and
   creates horizontal scroll at tablet widths. */
@media (max-width: 960px) {
  .no-about__visual { max-width: 560px; margin-inline: auto; }
  .no-about__frame--sm { right: 0; bottom: -5%; width: 40%; }
}
@media (max-width: 520px) {
  .no-about__frame--sm { display: none; }
}

.no-about__cta { display: flex; flex-wrap: wrap; gap: var(--no-s-4); align-items: center; }


/* =========================================================================
   COVERAGE / MAP
   ========================================================================= */
.no-coverage { background: var(--no-grad-deep); position: relative; overflow: hidden; }
.no-coverage__grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  position: relative;
}
@media (max-width: 1024px) { .no-coverage__grid { grid-template-columns: 1fr; } }

.no-ports { display: grid; gap: .625rem; margin-top: var(--no-s-8); }
.no-port {
  display: flex; align-items: center; gap: var(--no-s-4);
  width: 100%;
  padding: 1rem 1.125rem;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--no-r-md);
  color: #fff; text-align: left; cursor: pointer;
  transition: all var(--no-dur) var(--no-ease);
}
.no-port:hover, .no-port.is-active {
  background: rgba(19,134,179,.22);
  border-color: var(--no-accent);
  transform: translateX(5px);
}
/*
 * The nudge is a pointer affordance and it does not belong on a phone. There
 * is no hover on a touch screen, but the active card keeps the class, so the
 * first card sat five pixels to the right of the three below it — which on a
 * 390px screen does not read as emphasis, it reads as broken alignment, with
 * the card 5px nearer the right edge than its own gutter.
 */
@media (max-width: 900px) {
  .no-port:hover, .no-port.is-active { transform: none; }
}
.no-port__code {
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--no-accent);
  background: rgba(111,207,255,.1);
  border: 1px solid rgba(111,207,255,.22);
  border-radius: var(--no-r-xs);
  padding: .375rem .5rem;
  flex: none;
}
.no-port__name { display: block; font-family: var(--no-font-display); font-weight: 600; font-size: var(--no-fs-sm); }
.no-port__meta { display: block; font-size: var(--no-fs-2xs); color: rgba(255,255,255,.5); margin-top: 3px; line-height: 1.4; }
.no-port__go { margin-left: auto; opacity: .4; transition: opacity var(--no-dur) var(--no-ease), transform var(--no-dur) var(--no-ease-out); }

/* Location variant: the same card carrying a dialable number.
   The number sits between the name and the icon on a desktop and drops under
   the name once the row is too narrow to hold both. */
.no-ports--locations .no-port { text-decoration: none; }
.no-port__phone {
  margin-left: auto;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  color: rgba(255, 255, 255, .66);
  transition: color var(--no-dur) var(--no-ease);
}
.no-port:hover .no-port__phone,
.no-port.is-active .no-port__phone { color: var(--no-accent); }
.no-port__phone + .no-port__go { margin-left: .875rem; }
@media (max-width: 1280px) {
  .no-ports--locations .no-port { flex-wrap: wrap; row-gap: .5rem; }
  .no-port__phone { margin-left: 0; flex-basis: 100%; padding-left: calc(var(--no-s-4) + 2.6rem); }
  .no-port__phone + .no-port__go { margin-left: auto; }
}
@media (max-width: 1024px) {
  .no-ports--locations .no-port { flex-wrap: nowrap; }
  .no-port__phone { margin-left: auto; flex-basis: auto; padding-left: 0; }
}
@media (max-width: 560px) {
  .no-ports--locations .no-port { flex-wrap: wrap; row-gap: .375rem; }
  .no-port__phone { margin-left: 0; flex-basis: 100%; padding-left: calc(var(--no-s-4) + 2.6rem); }
  .no-ports--locations .no-port__go { display: none; }
}
.no-port:hover .no-port__go, .no-port.is-active .no-port__go { opacity: 1; transform: translateX(3px); color: var(--no-accent); }

.no-hubs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--no-s-6); }
.no-hub {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .875rem;
  font-size: var(--no-fs-xs); font-weight: 600;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--no-r-pill);
}
.no-hub svg { width: 14px; height: 14px; color: var(--no-accent); }

/* Map panel */
.no-map {
  position: relative;
  border-radius: var(--no-r-xl);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(700px 420px at 30% 30%, rgba(19,134,179,.28), transparent 65%),
    rgba(255,255,255,.03);
  padding: clamp(1rem, .5rem + 1.6vw, 2rem);
  overflow: hidden;
  min-height: 420px;
  display: grid;
  place-items: center;
}
.no-map__lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(111,207,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,207,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.no-map svg { width: 100%; height: auto; position: relative; }
.no-map__pin { cursor: pointer; transition: transform var(--no-dur) var(--no-ease-out); transform-box: fill-box; transform-origin: center; }
.no-map__pin circle.core { fill: var(--no-accent); }
.no-map__pin circle.halo { fill: var(--no-accent); opacity: .18; animation: noPinPulse 3s var(--no-ease-out) infinite; transform-box: fill-box; transform-origin: center; }
.no-map__pin.is-active circle.core { fill: #fff; }
.no-map__pin.is-active circle.halo { opacity: .38; }
.no-map__pin text { font-family: var(--no-font-mono); font-size: 2.7px; font-weight: 600; fill: rgba(255,255,255,.75); letter-spacing: .06em; }
/*
 * The chart scales with its container, so the port names scale down with it:
 * at 2.7 user units they land at about 9px on a 390px screen, which is a label
 * you can see but not read. Larger units on a small screen, and a touch more
 * contrast, because this is the one section the client singled out on mobile.
 */
@media (max-width: 700px) {
  /*
   * Port names on the Omani chart: three or four letters each, on a chart that
   * is nearly square, so they can afford to be larger. The world chart is left
   * alone — its labels are whole country names, and a country name that grows
   * with the chart stops being a label and starts being the map.
   */
  .no-map:not(.no-map--world) .no-map__pin text { font-size: 3.2px; fill: rgba(255,255,255,.92); }
}

/*
 * The world chart's land data stops at a latitude, so Africa ends in a
 * straight horizontal line. Softening the bottom edge turns that from a slice
 * through the continent into the chart fading out, which is what it is. The
 * lowest pin sits at 65% of the height, well clear of the fade.
 */
.no-map--world svg {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
}

.no-map__pin.is-active text { fill: #fff; }
@keyframes noPinPulse { 0% { transform: scale(.55); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }
.no-map__legend {
  position: absolute; left: 1rem; bottom: 1rem;
  display: flex; gap: 1rem; flex-wrap: wrap;
  font-family: var(--no-font-mono); font-size: var(--no-fs-3xs);
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.no-map__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .375rem; }

/*
 * The panel is 420px tall because that is what the chart needs beside a column
 * of port cards on a desktop. On a phone the chart is the full width of the
 * screen and about 190px tall, so the floor left roughly 230px of empty panel
 * under it — which is what reads as "the map is broken" on a phone. The panel
 * now takes the height of its own contents.
 */
@media (max-width: 700px) {
  .no-map { min-height: 0; row-gap: .625rem; }
  /*
   * And with the panel no longer taller than its chart, the legend cannot stay
   * pinned to the bottom of it: at 390px it landed on top of the coastline and
   * across the Salalah label. It joins the flow as a second row instead, and
   * the panel grows by exactly its height.
   */
  .no-map__legend { position: static; left: auto; bottom: auto; justify-content: center; }
}

/* =========================================================================
   PARTNERS TICKER
   ========================================================================= */
.no-partners { padding-block: var(--no-section-y-tight); background: var(--no-white); }
.no-partners__head {
  text-align: center; margin-bottom: var(--no-s-8);
}
.no-partners__head > .no-kicker {
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  letter-spacing: var(--no-tr-wider);
  text-transform: uppercase;
  color: var(--no-text-faint);
}
.no-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Duration scales with the wider tiles so the strip keeps the same apparent
   speed rather than accelerating. */
.no-marquee__track { display: flex; width: max-content; animation: noMarquee 64s linear infinite; }
.no-marquee:hover .no-marquee__track { animation-play-state: paused; }
@keyframes noMarquee { to { transform: translateX(-50%); } }
.no-marquee__item {
  flex: none;
  display: grid; place-items: center;
  width: clamp(150px, 14vw, 210px);
  height: 84px;
  padding: 0 var(--no-s-5);
  opacity: 1;
}
.no-marquee__item img { max-height: 44px; width: auto; object-fit: contain; }
.no-marquee__item .ph {
  font-family: var(--no-font-display);
  font-weight: 700; font-size: var(--no-fs-md);
  letter-spacing: -.02em; color: var(--no-ink-600);
  text-align: center; line-height: 1.15;
}

/* =========================================================================
   SERVICES
   ========================================================================= */
.no-services { background: var(--no-bg-soft); position: relative; }

/* Six supporting services fill three columns as two even rows; auto-fill gave
   four across and left a ragged pair on the second row. */
.no-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
@media (max-width: 980px) { .no-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .no-svc-grid { grid-template-columns: minmax(0, 1fr); } }
.no-svc {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--no-s-4);
  padding: var(--no-s-6);
  background: var(--no-white);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-lg);
  overflow: hidden;
  isolation: isolate;
  min-height: 246px;
  transition: transform var(--no-dur) var(--no-ease-out), box-shadow var(--no-dur) var(--no-ease), border-color var(--no-dur) var(--no-ease);
}
.no-svc::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--no-grad-deep);
  opacity: 0;
  transition: opacity var(--no-dur) var(--no-ease);
}
.no-svc:hover { transform: translateY(-7px); box-shadow: var(--no-sh-lg); border-color: var(--no-card-hover); }
.no-svc:hover::before { opacity: 1; }
.no-svc:hover .no-svc__title,
.no-svc:hover .no-svc__num { color: #fff; }
.no-svc:hover .no-svc__desc { color: rgba(255,255,255,.72); }
.no-svc:hover .no-svc__ico { background: rgba(111,207,255,.16); border-color: rgba(111,207,255,.3); color: var(--no-accent); }
.no-svc:hover .no-svc__more { color: var(--no-accent); gap: .875rem; }

.no-svc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.no-svc__ico {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: var(--no-r-md);
  background: var(--no-primary-50);
  border: 1px solid var(--no-primary-100);
  color: var(--no-primary-600);
  transition: all var(--no-dur) var(--no-ease);
}
.no-svc__ico svg { width: 30px; height: 30px; }
.no-svc__num {
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--no-ink-200);
  transition: color var(--no-dur) var(--no-ease);
}
.no-svc__title {
  font-size: var(--no-fs-md);
  line-height: 1.28;
  transition: color var(--no-dur) var(--no-ease);
  overflow-wrap: break-word;
  word-break: break-word;
}
/*
 * The whole card is the link. It looked like one already — it lifts, its
 * background inverts and it carries a "View Service" cue — but the only thing
 * you could actually tap was the 21px line of the title. Same stretched-anchor
 * pattern the homepage service card uses, which keeps one interactive element
 * per card rather than nesting them.
 */
.no-svc__title a { color: inherit; }
.no-svc__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.no-svc__desc {
  font-size: var(--no-fs-xs);
  line-height: 1.62;
  color: var(--no-text-muted);
  transition: color var(--no-dur) var(--no-ease);
  flex: 1;
  overflow-wrap: break-word;
  word-break: break-word;
}
.no-svc__more {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--no-fs-2xs); font-weight: 700;
  letter-spacing: var(--no-tr-wide); text-transform: uppercase;
  color: var(--no-primary-600);
  transition: all var(--no-dur) var(--no-ease-out);
  margin-top: auto;
}
.no-svc__more svg { width: 15px; height: 15px; }
.no-svc__flags { display: inline-flex; align-items: center; gap: .5rem; }
.no-svc__tag {
  font-family: var(--no-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .5rem;
  background: var(--no-accent); color: var(--no-ink-900);
  border-radius: var(--no-r-xs);
}
.no-svc:hover .no-svc__tag { background: var(--no-accent); color: var(--no-ink-900); }
.no-svc[hidden] { display: none; }
.no-svc-foot { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); display: flex; justify-content: center; }

/* =========================================================================
   WHY US
   ========================================================================= */
.no-why { background: var(--no-ink-900); position: relative; overflow: hidden; }
.no-why::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(760px 460px at 82% 12%, rgba(19,134,179,.3), transparent 62%),
    radial-gradient(620px 420px at 8% 92%, rgba(111,207,255,.13), transparent 62%);
}
.no-why > * { position: relative; }
/* Four reasons in two rows of two. Three columns left the fourth cell alone on
   its own row beside two empty ones, which looked like a rendering failure. */
.no-why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--no-r-lg);
  overflow: hidden;
}
.no-why__cell {
  position: relative;
  background: rgba(11,30,44,.62);
  padding: clamp(1.25rem, .95rem + 1.1vw, 1.875rem);
  display: flex; flex-direction: column; gap: var(--no-s-3, .75rem);
  transition: background-color var(--no-dur) var(--no-ease);
  overflow: hidden;
}
.no-why__cell::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--no-grad-brand);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--no-dur-slow) var(--no-ease-out);
}
.no-why__cell:hover { background: rgba(19,134,179,.14); }
.no-why__cell:hover::after { transform: scaleY(1); }
.no-why__num {
  font-family: var(--no-font-display);
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); font-weight: 700; line-height: 1;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(111,207,255,.35);
  transition: color var(--no-dur) var(--no-ease);
}
.no-why__cell:hover .no-why__num { color: rgba(111,207,255,.12); }
@media (max-width: 640px)  { .no-why__grid { grid-template-columns: minmax(0, 1fr); } }
.no-why__ico {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: var(--no-r-sm);
  background: rgba(111,207,255,.1);
  border: 1px solid rgba(111,207,255,.2);
  color: var(--no-accent);
}
.no-why__ico svg { width: 28px; height: 28px; }
.no-why__cell h3 { font-size: var(--no-fs-lg); color: #fff; }
.no-why__cell p { font-size: var(--no-fs-sm); line-height: 1.7; color: rgba(255,255,255,.68); }

/* =========================================================================
   CERTIFICATIONS BAR
   ========================================================================= */
.no-certs { background: var(--no-white); padding-block: var(--no-section-y-tight); }
.no-certs__panel {
  background: var(--no-bg-soft);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (max-width: 900px) { .no-certs__panel { grid-template-columns: 1fr; } }
.no-certs__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--no-s-4);
}
.no-cert {
  display: flex; align-items: center; gap: .875rem;
  padding: 1rem 1.125rem;
  background: var(--no-white);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  transition: all var(--no-dur) var(--no-ease);
}
.no-cert:hover { border-color: var(--no-primary-300); box-shadow: var(--no-sh-md); transform: translateY(-3px); }
.no-cert__ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--no-r-sm);
  background: var(--no-primary-50);
  color: var(--no-primary-700);
}
.no-cert__ico svg { width: 22px; height: 22px; }
.no-cert b { display: block; font-family: var(--no-font-display); font-size: var(--no-fs-sm); color: var(--no-ink-800); line-height: 1.2; }
.no-cert span { font-size: var(--no-fs-2xs); color: var(--no-text-faint); }

/* =========================================================================
   NEWS
   ========================================================================= */
.no-news { background: var(--no-bg-soft); }
.no-post {
  display: flex; flex-direction: column;
  background: var(--no-white);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-lg);
  overflow: hidden;
  transition: transform var(--no-dur) var(--no-ease-out), box-shadow var(--no-dur) var(--no-ease), border-color var(--no-dur) var(--no-ease);
}
.no-post:hover { transform: translateY(-7px); box-shadow: var(--no-sh-lg); border-color: var(--no-primary-200); }
.no-post__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--no-ink-700); }
.no-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--no-dur-cine, 1.6s) var(--no-ease-out); }
.no-post:hover .no-post__media img { transform: scale(1.07); }
.no-post__cat {
  position: absolute; left: .875rem; top: .875rem;
  font-family: var(--no-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .375rem .625rem;
  background: rgba(11,30,44,.82);
  backdrop-filter: blur(6px);
  color: var(--no-accent);
  border-radius: var(--no-r-xs);
}
.no-post__body { padding: var(--no-s-6); display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.no-post__date {
  font-family: var(--no-font-mono); font-size: var(--no-fs-3xs);
  letter-spacing: var(--no-tr-wide); text-transform: uppercase; color: var(--no-text-faint);
  display: flex; align-items: center; gap: .5rem;
}
.no-post__title {
  font-size: var(--no-fs-md);
  line-height: 1.32;
  overflow-wrap: break-word;
  word-break: break-word;
}
.no-post__title a { color: inherit; }
.no-post:hover .no-post__title a { color: var(--no-primary-600); }
.no-post__excerpt { font-size: var(--no-fs-xs); line-height: 1.65; color: var(--no-text-muted); flex: 1; }

/* =========================================================================
   FINAL CTA + INQUIRY
   ========================================================================= */
.no-cta { position: relative; background: var(--no-ink-900); overflow: hidden; }
.no-cta__bg { position: absolute; inset: 0; }
.no-cta__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.no-cta::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,15,23,.88) 0%, rgba(11,30,44,.72) 45%, rgba(10,65,87,.52) 100%);
}
.no-cta__inner { position: relative; z-index: 2; }
.no-cta__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 960px) { .no-cta__grid { grid-template-columns: 1fr; } }

.no-cta__title { font-size: var(--no-fs-3xl); line-height: 1.2; color: #fff; text-wrap: balance; }
.no-cta__answer {
  margin-top: var(--no-s-4);
  max-width: 60ch;
  font-size: var(--no-fs-base);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-invert-muted);
}
.no-cta__list { display: grid; gap: .875rem; margin-top: var(--no-s-6); }
.no-cta__li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--no-fs-sm); color: rgba(255,255,255,.76); }
.no-cta__li svg { width: 19px; height: 19px; color: var(--no-accent); flex: none; margin-top: 2px; }
.no-cta__phone {
  display: inline-flex; align-items: center; gap: var(--no-s-4);
  margin-top: var(--no-s-8);
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--no-r-md);
  background: rgba(255,255,255,.04);
}
.no-cta__phone-ico {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--no-primary-500); color: #fff; flex: none;
}
.no-cta__phone small {
  display: block; font-family: var(--no-font-mono); font-size: var(--no-fs-3xs);
  letter-spacing: var(--no-tr-wide); text-transform: uppercase; color: rgba(255,255,255,.5);
}
.no-cta__phone b { font-family: var(--no-font-display); font-size: var(--no-fs-lg); color: #fff; letter-spacing: -.01em; }

/* Inquiry form card */
.no-form {
  background: var(--no-white);
  border-radius: var(--no-r-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--no-sh-xl);
  position: relative;
  overflow: hidden;
}
.no-form::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--no-grad-brand);
}
.no-form__head { margin-bottom: var(--no-s-6); }
.no-form__head h3 { font-size: var(--no-fs-xl); }
.no-form__head p { font-size: var(--no-fs-xs); color: var(--no-text-muted); margin-top: .375rem; }
.no-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--no-s-4); }
.no-field { display: grid; gap: .4375rem; }
.no-field--full { grid-column: 1 / -1; }
.no-field label {
  font-size: var(--no-fs-2xs); font-weight: 650;
  letter-spacing: .02em; color: var(--no-ink-700);
  text-transform: uppercase;
  font-family: var(--no-font-mono);
}
.no-field label .req { color: var(--no-danger); }
.no-field input, .no-field select, .no-field textarea {
  width: 100%;
  padding: .8125rem .9375rem;
  font-size: var(--no-fs-sm);
  color: var(--no-text);
  background: var(--no-bg-soft);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-sm);
  transition: border-color var(--no-dur) var(--no-ease), box-shadow var(--no-dur) var(--no-ease), background-color var(--no-dur) var(--no-ease);
}
.no-field textarea { resize: vertical; min-height: 96px; }
.no-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='%23587585' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .875rem center; background-size: 16px; padding-right: 2.5rem; }
.no-field input:focus, .no-field select:focus, .no-field textarea:focus {
  outline: none;
  background: var(--no-white);
  border-color: var(--no-primary-400);
  box-shadow: 0 0 0 3px rgba(19,134,179,.14);
}
.no-field input::placeholder, .no-field textarea::placeholder { color: var(--no-text-faint); }
.no-form__consent {
  display: flex; gap: .625rem; align-items: flex-start;
  font-family: var(--no-font-body);
  font-size: var(--no-fs-2xs);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--no-text-muted);
  line-height: 1.55;
}
.no-form__consent input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--no-primary-500); flex: none; }
/* Comfortable under a thumb. The label is the target too, but a 16px box is
   still a 16px box when someone taps the box itself. */
@media (max-width: 900px) {
  .no-form__consent input { width: 24px; height: 24px; margin-top: 0; }
}
.no-form__note {
  display: flex; align-items: center; gap: .5rem;
  margin-top: var(--no-s-4);
  font-size: var(--no-fs-2xs); color: var(--no-text-faint);
}
.no-form__note svg { width: 14px; height: 14px; color: var(--no-success); }
@media (max-width: 520px) { .no-form__grid { grid-template-columns: 1fr; } }


/* =========================================================================
   MOBILE REFINEMENTS
   ========================================================================= */
@media (max-width: 560px) {
  .no-hero__actions { flex-direction: column; align-items: stretch; }
  .no-hero__actions .no-btn { width: 100%; }
  .no-hero__kicker { font-size: 10px; letter-spacing: .1em; }
  .no-about__cta .no-btn { flex: 1 1 100%; }
}


/* =========================================================================
   20 YEARS PLATE
   Replaces the old caption badge. The figure is the trust signal, so it gets
   its own object: a drawn ring, digits that count up, and nothing else
   competing with it.
   ========================================================================= */
.no-years {
  position: absolute;
  left: clamp(-1.5rem, -2vw, -0.5rem);
  top: 8%;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: .125rem;
  width: clamp(122px, 11vw, 158px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background: var(--no-grad-brand);
  box-shadow: 0 18px 42px -14px rgba(10, 65, 87, .65);
}
.no-years__ring {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid var(--no-primary-300);
  opacity: 0;
  transform: scale(.86);
  transition: opacity var(--no-dur-cine, 1.6s) var(--no-ease-out), transform var(--no-dur-cine, 1.6s) var(--no-ease-out);
}
.no-years.is-visible .no-years__ring { opacity: .55; transform: scale(1); }

.no-years__num {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--no-font-display);
  font-size: clamp(2.5rem, 2.1rem + 1.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.no-years__num i {
  font-style: normal;
  font-size: .42em;
  line-height: 1;
  margin-top: .18em;
  opacity: .85;
}
.no-years__label {
  font-family: var(--no-font-mono);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .9;
  max-width: 8.5em;
}
@media (max-width: 560px) {
  .no-years {
    position: static;
    width: auto;
    aspect-ratio: auto;
    border-radius: var(--no-r-lg);
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: .875rem;
    text-align: left;
  }
  .no-years__ring { display: none; }
  .no-years__label { max-width: none; }
}


/* =========================================================================
   SERVICE CARD (shared)
   -------------------------------------------------------------------------
   Image, title, one-line scope and a "View Service" cue. Defined here rather
   than in services.css because home.css is the layer the inner pages already
   share: the card is used by the Services page, by the category sections, and
   by the "Complete service range" row on the homepage, and none of those
   should have to load a second stylesheet to get it.
   ========================================================================= */
.no-svccards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
@media (max-width: 980px) { .no-svccards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .no-svccards { grid-template-columns: minmax(0, 1fr); } }

.no-svccard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-lg);
  overflow: hidden;
  box-shadow: var(--no-sh-xs);
  transition: transform var(--no-dur, .52s) var(--no-ease-out),
              box-shadow var(--no-dur, .52s) var(--no-ease),
              border-color var(--no-dur, .52s) var(--no-ease);
}
.no-svccard:hover,
.no-svccard:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--no-sh-lg);
  border-color: var(--no-card-hover);
}

.no-svccard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--no-grad-deep);
  overflow: hidden;
}
.no-svccard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--no-dur-cine, 1.6s) var(--no-ease-out);
}
.no-svccard:hover .no-svccard__media img { transform: scale(1.05); }

/* Without a photograph the tile keeps the brand gradient and grid rather than
   showing an empty box, so an unset image still looks deliberate. */
.no-svccard--noimg .no-svccard__media::before {
  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: 34px 34px;
}
.no-svccard__ico {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--no-r-sm);
  color: var(--no-accent);
  background: rgba(11, 30, 44, .72);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
}

.no-svccard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .625rem;
  padding: clamp(1.125rem, .9rem + .7vw, 1.5rem);
  /* Prevent content from escaping the card. */
  overflow: hidden;
  min-width: 0;
}
.no-svccard__title {
  font-size: var(--no-fs-md);
  line-height: 1.3;
  /* Allow long titles to wrap naturally. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.no-svccard__title a { color: inherit; }
.no-svccard__title a::after {
  /* Whole-card click target without nesting interactive elements. */
  content: "";
  position: absolute;
  inset: 0;
}
.no-svccard { position: relative; }
.no-svccard:hover .no-svccard__title a { color: var(--no-primary-action); }
.no-svccard__desc {
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
  overflow-wrap: break-word;
  word-break: break-word;
}
.no-svccard__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .5rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  color: var(--no-primary-action);
  transition: gap var(--no-dur, .52s) var(--no-ease-out);
}
.no-svccard:hover .no-svccard__more { gap: .875rem; }

/* Card consistency: equal heights, clamped copy, one radius. */
.no-svccards { align-items: stretch; }
.no-svccard {
  height: 100%;
  border-radius: var(--no-r-md);
}
.no-svccard__media {
  aspect-ratio: 16 / 10;
}
.no-svccard__body {
  min-height: 240px;
}
.no-svccard__title {
  font-size: clamp(1.125rem, 1.02rem + .35vw, 1.375rem);
}
.no-svccard__desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.no-svccard__ico {
  color: #fff;
  background: rgba(19, 134, 179, .88);
  border-color: rgba(111, 207, 255, .42);
}
@media (max-width: 620px) {
  .no-svccard__body { min-height: 0; }
  .no-svccard__desc { -webkit-line-clamp: 5; }
}

/* =========================================================================
   CERTIFICATIONS: document cards + zoom
   ========================================================================= */
.no-certs { background: var(--no-white); padding-block: var(--no-section-y); }
.no-certs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(.875rem, .6rem + .9vw, 1.375rem);
}
@media (min-width: 1100px) { .no-certs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1099px) and (min-width: 600px) { .no-certs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .no-certs__grid { grid-template-columns: minmax(0, 1fr); } }

.no-cert {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: .875rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--no-bg-soft);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  transition: transform var(--no-dur, .52s) var(--no-ease-out), box-shadow var(--no-dur, .52s) var(--no-ease), border-color var(--no-dur, .52s) var(--no-ease);
}
.no-cert--has-doc { cursor: zoom-in; }
.no-cert--has-doc:hover,
.no-cert--has-doc:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--no-sh-md);
  border-color: var(--no-primary-300);
}

.no-cert__doc {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.32;          /* A4-ish preview so scans sit naturally */
  overflow: hidden;
  border-radius: var(--no-r-sm);
  background: var(--no-white);
  border: 1px solid var(--no-border);
}
/* Certificates are contained: cropping a document hides the very details the
   client wants visible. The lightbox shows the full-resolution original. */
.no-cert__doc img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: .25rem;
}
.no-cert__ico { color: var(--no-primary-600); opacity: .8; }

.no-cert__zoom {
  position: absolute;
  right: .5rem; bottom: .5rem;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--no-r-sm);
  background: rgba(11, 30, 44, .82);
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--no-dur, .52s) var(--no-ease), transform var(--no-dur, .52s) var(--no-ease-out);
}
.no-cert--has-doc:hover .no-cert__zoom,
.no-cert--has-doc:focus-visible .no-cert__zoom { opacity: 1; transform: none; }

.no-cert__text { display: block; }
.no-cert__text b {
  display: block;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-sm);
  line-height: 1.3;
  color: var(--no-ink-800);
}
.no-cert__text span { font-size: var(--no-fs-2xs); color: var(--no-text-faint); }

.no-certs__grid--invert .no-cert {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
.no-certs__grid--invert .no-cert__doc { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.no-certs__grid--invert .no-cert__text b { color: #fff; }
.no-certs__grid--invert .no-cert__text span { color: rgba(255, 255, 255, .6); }
.no-certs__grid--invert .no-cert__ico { color: var(--no-accent); }

/* =========================================================================
   CERTIFICATION RAIL
   -------------------------------------------------------------------------
   One horizontal row for all seven cards. A scroll container with snap points
   is the whole mechanism: the arrows and dots that main.js adds page it, but
   removing them (or JavaScript) leaves a row that still swipes, still scrolls
   with a trackpad, and still reaches every card by keyboard.

   The card itself is unchanged; only its width and its document preview are
   set here, so the rail never produces a card taller than the copy above it.
   ========================================================================= */
.no-certrail {
  position: relative;
  margin-top: clamp(2rem, 1.5rem + 1.8vw, 3rem);
}

.no-certrail__viewport {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--certrail-gap)) / 4);
  gap: var(--certrail-gap);
  --certrail-gap: clamp(.875rem, .6rem + .9vw, 1.375rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* The card lifts on hover and the focus ring sits outside its border, so the
     viewport needs a little room or both are clipped by the scroll box. */
  padding: 6px 4px;
  margin: -6px -4px;
}
.no-certrail__viewport::-webkit-scrollbar { display: none; }
.no-certrail__viewport:focus-visible {
  outline: 3px solid var(--no-accent);
  outline-offset: 2px;
  border-radius: var(--no-r-md);
}

.no-certrail__slide {
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
}
.no-certrail__slide > * { width: 100%; }

/* A compact document preview. The certificate is still contained rather than
   cropped, so nothing on the page is hidden; it simply sits in a shorter box
   than the full A4 ratio the stacked grid used. */
.no-certrail .no-cert { height: 100%; gap: .875rem; padding: clamp(.875rem, .75rem + .5vw, 1.125rem); }
.no-certrail .no-cert__doc { aspect-ratio: 1 / 1.12; }
.no-certrail .no-cert__text b { font-size: var(--no-fs-sm); }

@media (max-width: 1180px) {
  .no-certrail__viewport { grid-auto-columns: calc((100% - 2 * var(--certrail-gap)) / 3); }
}
@media (max-width: 900px) {
  /* A fraction of the next card stays in view so the row reads as swipeable
     without needing an instruction. */
  .no-certrail__viewport { grid-auto-columns: 46%; }
}
@media (max-width: 620px) {
  .no-certrail__viewport { grid-auto-columns: 74%; }
  /* A near-square preview at phone widths: at 74% of a 390px screen the A4
     ratio alone would make the card most of a screen tall. */
  .no-certrail .no-cert__doc { aspect-ratio: 1 / .92; }
}

/* Nothing uploaded yet: the icon carries the tile instead of floating in an
   empty frame, and the frame keeps the brand grid so it reads as deliberate
   rather than as a missing image. */
.no-cert--noimg .no-cert__doc {
  background:
    linear-gradient(rgba(19, 134, 179, .05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(19, 134, 179, .05) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--no-bg-soft);
}
.no-certrail .no-cert__ico svg { width: 40px; height: 40px; }

/* ---------- Controls ---------- */
.no-certrail__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--no-s-4);
  margin-top: clamp(1.25rem, 1rem + .8vw, 1.75rem);
}
.no-certrail__controls[hidden] { display: none; }

.no-certrail__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  color: var(--no-primary-action);
  background: var(--no-white);
  border: 1px solid var(--no-border);
  cursor: pointer;
  transition: color var(--no-dur-fast) var(--no-ease),
              background-color var(--no-dur-fast) var(--no-ease),
              border-color var(--no-dur-fast) var(--no-ease),
              opacity var(--no-dur-fast) var(--no-ease);
}
.no-certrail__arrow:first-child svg { transform: rotate(180deg); }
.no-certrail__arrow:hover:not(:disabled) {
  color: var(--no-white);
  background: var(--no-primary-action);
  border-color: var(--no-primary-action);
}
.no-certrail__arrow:disabled { opacity: .32; cursor: default; }

.no-certrail__dots {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.no-certrail__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--no-r-pill);
  background: var(--no-border-strong);
  cursor: pointer;
  transition: width var(--no-dur) var(--no-ease-out), background-color var(--no-dur) var(--no-ease);
}
.no-certrail__dot.is-current { width: 26px; background: var(--no-primary-action); }
/*
 * The dot is 8px because that is the right size for a dot. The thing you tap
 * is not the dot: an invisible 24px square is centred on it, which is the
 * minimum target size and is what a thumb actually aims at. Nothing moves,
 * because the square is drawn outside the button's own box.
 */
.no-certrail__dot { position: relative; }
.no-certrail__dot::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
}

/* ---------- Dark background ---------- */
.no-certrail--invert .no-cert {
  background: rgba(255, 255, 255, .05);
  border-color: var(--no-border-invert);
}
.no-certrail--invert .no-cert__doc { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.no-certrail--invert .no-cert__text b { color: var(--no-white); }
.no-certrail--invert .no-cert__text span { color: var(--no-text-invert-muted); }
.no-certrail--invert .no-cert__ico { color: var(--no-accent); }
.no-certrail--invert .no-certrail__arrow {
  color: var(--no-accent);
  background: rgba(255, 255, 255, .06);
  border-color: var(--no-border-invert);
}
.no-certrail--invert .no-certrail__dot { background: rgba(255, 255, 255, .28); }
.no-certrail--invert .no-certrail__dot.is-current { background: var(--no-accent); }

@media (prefers-reduced-motion: reduce) {
  .no-certrail__viewport { scroll-behavior: auto; }
}

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.no-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--no-z-modal);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(6, 15, 23, .92);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--no-dur, .52s) var(--no-ease);
}
.no-lightbox[hidden] { display: none; }
.no-lightbox.is-open { opacity: 1; }

.no-lightbox__figure {
  display: grid;
  gap: 1rem;
  justify-items: center;
  max-width: min(1000px, 100%);
  max-height: 100%;
  margin: 0;
  transform: scale(.97);
  transition: transform var(--no-dur-mid, .72s) var(--no-ease-out);
}
.no-lightbox.is-open .no-lightbox__figure { transform: none; }
.no-lightbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  width: auto;
  border-radius: var(--no-r-md);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
  background: #fff;
}
.no-lightbox__caption {
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-align: center;
}
.no-lightbox__close {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--no-r-sm);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--no-dur, .52s) var(--no-ease), border-color var(--no-dur, .52s) var(--no-ease);
}
.no-lightbox__close:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }

/* =========================================================================
   PARTNER LOGOS: static grid variant for short lists
   ========================================================================= */
.no-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: clamp(1rem, .7rem + 1vw, 2rem);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.no-logos__item {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: .5rem;
  opacity: 1;
}
.no-logos__item img { max-height: 48px; width: auto; object-fit: contain; }
.no-logos__item .ph {
  font-family: var(--no-font-display);
  font-weight: 700;
  font-size: var(--no-fs-md);
  letter-spacing: -.02em;
  color: var(--no-ink-600);
  text-align: center;
  line-height: 1.15;
}
.no-marquee--text .no-marquee__item { width: clamp(140px, 13vw, 190px); }


/* =========================================================================
   SERVICES: core tier
   Image leads, detail slides up on hover. The title is always visible, so
   nothing important is hidden behind the interaction; the reveal only adds
   the summary and the link affordance.
   ========================================================================= */
.no-services { background: var(--no-bg-soft); }
.no-services__sub { margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 1.25rem; }

/* The four cards under "Complete service range". Four across on a desktop
   rather than the Services page's three, because they sit under a kicker
   rather than under a section heading and a shallower row reads as a coda to
   the core tier above instead of a second full grid. */
.no-services__range { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 1180px) { .no-services__range { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .no-services__range { grid-template-columns: minmax(0, 1fr); } }
.no-services__range .no-svccard__body { min-height: 0; padding-block: clamp(1rem, .85rem + .6vw, 1.25rem); }
.no-services__range .no-svccard__title { font-size: var(--no-fs-md); }
.no-services__range .no-svccard__desc { -webkit-line-clamp: 3; }

/* Three core services, three equal columns, so the row is always full. The
   number of columns follows the number of core cards, which the client sets in
   Customize > Core Services. */
.no-core {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .7rem + 1.1vw, 1.5rem);
}
@media (max-width: 980px) { .no-core { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .no-core { grid-template-columns: minmax(0, 1fr); } }

/*
 * The core tier has to read as more important than the grid beneath it, so the
 * cards are taller, carry a brand-tinted edge and lift further on hover.
 */
.no-core__card {
  min-height: clamp(250px, 17vw, 320px);
  border: 1px solid rgba(255, 255, 255, .1);
}
.no-core__card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  z-index: 3;
  background: linear-gradient(90deg, var(--no-primary-500), var(--no-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--no-dur-slow, .95s) var(--no-ease-out);
}
.no-core__card:hover::after,
.no-core__card:focus-within::after { transform: scaleX(1); }

.no-core__card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 26vw, 420px);
  padding: clamp(1.25rem, 1rem + .8vw, 1.75rem);
  border-radius: var(--no-r-lg);
  overflow: hidden;
  background: var(--no-ink-800);
  transition: transform var(--no-dur-slow, .95s) var(--no-ease-out), box-shadow var(--no-dur-slow, .95s) var(--no-ease);
}
.no-core__card:hover,
.no-core__card:focus-within { transform: translateY(-6px); box-shadow: var(--no-sh-lg); }

/* Whole-card link, kept above the media but below the text. */
.no-core__link { position: absolute; inset: 0; z-index: 2; }

.no-core__media { position: absolute; inset: 0; z-index: -2; }
.no-core__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--no-dur-cine, 1.6s) var(--no-ease-out); }
.no-core__card:hover .no-core__media img,
.no-core__card:focus-within .no-core__media img { transform: scale(1.06); }
.no-core__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,15,23,.15) 0%, rgba(6,15,23,.62) 55%, rgba(6,15,23,.93) 100%);
  transition: background var(--no-dur-slow, .95s) var(--no-ease);
}
.no-core__card:hover .no-core__media::after,
.no-core__card:focus-within .no-core__media::after {
  background: linear-gradient(180deg, rgba(6,15,23,.3) 0%, rgba(6,15,23,.74) 45%, rgba(6,15,23,.96) 100%);
}
/* Without a photograph the card falls back to the brand gradient, which is a
   finished state rather than a gap. */
.no-core__card--noimg { background: var(--no-grad-deep); }
.no-core__card--noimg::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(111,207,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,207,255,.06) 1px, transparent 1px);
  background-size: 54px 54px;
}

.no-core__body { position: relative; z-index: 1; width: 100%; color: #fff; pointer-events: none; }
.no-core__ico {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--no-r-md);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  backdrop-filter: blur(6px);
  margin-bottom: .875rem;
}
.no-core__rank {
  position: absolute;
  right: 0; top: 0;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  letter-spacing: .1em;
  color: rgba(255,255,255,.45);
}
.no-core__title {
  color: #fff;
  font-size: var(--no-fs-lg);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* The reveal: collapsed to zero height, expanded on hover/focus. */
.no-core__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--no-dur-slow, .95s) var(--no-ease-out), opacity var(--no-dur-mid, .72s) var(--no-ease);
}
.no-core__reveal > * { overflow: hidden; }
.no-core__card:hover .no-core__reveal,
.no-core__card:focus-within .no-core__reveal { grid-template-rows: 1fr; opacity: 1; }
.no-core__reveal p {
  font-size: var(--no-fs-sm);
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  padding-top: .75rem;
}
.no-core__more {
  display: inline-flex; align-items: center; gap: .5rem;
  padding-top: .875rem;
  font-size: var(--no-fs-2xs); font-weight: 700;
  letter-spacing: var(--no-tr-wide); text-transform: uppercase;
  color: var(--no-accent);
}

/*
 * Touch devices have no hover, so the detail is simply always open. Better a
 * slightly taller card than content the user cannot reach.
 */
@media (hover: none) {
  .no-core__reveal { grid-template-rows: 1fr; opacity: 1; }
}

/* =========================================================================
   SERVICES: supporting tier
   ========================================================================= */
.no-more-svc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 800px) { .no-more-svc { grid-template-columns: minmax(0, 1fr); } }

.no-more-svc a {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1rem 1.125rem;
  background: var(--no-white);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  color: var(--no-ink-800);
  font-family: var(--no-font-display);
  font-weight: 600;
  font-size: var(--no-fs-sm);
  line-height: 1.35;
  transition: border-color var(--no-dur, .52s) var(--no-ease), transform var(--no-dur, .52s) var(--no-ease-out), box-shadow var(--no-dur, .52s) var(--no-ease);
}
.no-more-svc a:hover {
  border-color: var(--no-primary-300);
  transform: translateY(-3px);
  box-shadow: var(--no-sh-md);
}
.no-more-svc__ico {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--no-r-sm);
  background: var(--no-primary-50);
  color: var(--no-primary-700);
}
.no-more-svc__text { flex: 1; min-width: 0; }
.no-more-svc__go { color: var(--no-text-faint); transition: color var(--no-dur, .52s) var(--no-ease), transform var(--no-dur, .52s) var(--no-ease-out); }
.no-more-svc a:hover .no-more-svc__go { color: var(--no-primary-action); transform: translate(2px, -2px); }

.no-svc-foot { margin-top: clamp(2rem, 1.5rem + 1.6vw, 3rem); display: flex; justify-content: center; }

/* =========================================================================
   PARTNERS: logos lifted onto their own surface
   ========================================================================= */
.no-partners { background: var(--no-white); padding-block: var(--no-section-y-tight); }
.no-marquee__item,
.no-logos__item {
  /* A white card behind each mark separates it from the page and stops
     transparent PNGs disappearing into the background. */
  background: var(--no-white);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  box-shadow: var(--no-sh-xs);
  margin-inline: .5rem;
}
.no-marquee__item {
  width: clamp(160px, 15vw, 210px);
  height: 96px;
  padding: 1rem 1.25rem;
  opacity: 1;
}
.no-marquee__item img,
.no-logos__item img { max-height: 52px; max-width: 100%; width: auto; object-fit: contain; }
.no-logos__item { min-height: 96px; padding: 1rem 1.25rem; }

/* =========================================================================
   CERTIFICATIONS: larger previews, compact section
   ========================================================================= */
.no-certs { padding-block: clamp(3rem, 2.2rem + 3vw, 5.25rem); }
.no-certs__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, .9rem + 1.3vw, 2rem);
  align-items: stretch;
}
@media (max-width: 1024px) {
  .no-certs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .no-certs__grid { grid-template-columns: minmax(0, 1fr); }
}
.no-cert {
  padding: clamp(1.125rem, .95rem + .7vw, 1.5rem);
  gap: 1rem;
  border-radius: var(--no-r-md);
}
.no-cert--has-doc:hover,
.no-cert--has-doc:focus-visible {
  transform: translateY(-2px);
  border-color: var(--no-primary-300);
  box-shadow: 0 18px 44px -24px rgba(19, 134, 179, .42);
}
.no-cert--has-doc:hover .no-cert__ico,
.no-cert--has-doc:focus-visible .no-cert__ico { color: var(--no-primary-action); }
.no-cert--has-doc:hover .no-cert__zoom,
.no-cert--has-doc:focus-visible .no-cert__zoom {
  background: var(--no-primary-action);
  color: #fff;
}
.no-cert__doc {
  aspect-ratio: 1 / 1.414;
  width: 100%;
}
.no-cert__doc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* -------------------------------------------------------------------------
   Certification card: colours pinned against the parent theme
   -------------------------------------------------------------------------
   A card with a document uploaded renders as a <button>, which makes it a
   target for the parent theme's and Elementor's global button styling. These
   rules exist only to say "this is a card, not a button".

   They used to be scoped to `.no-certs__grid .no-cert`, which stopped working
   the moment the cards moved into the carousel rail: the container changed, the
   guard did not follow, and the parent theme's hover colour came straight
   through as a magenta panel behind the certificate. Scoping is now on the card
   itself, so the guard holds wherever the card is rendered: the rail, the grid
   or anywhere added later.
   ---------------------------------------------------------------------- */
.no-cert,
button.no-cert,
button.no-cert:hover,
button.no-cert:focus,
button.no-cert:focus-visible,
button.no-cert:active,
button.no-cert.no-cert--has-doc,
button.no-cert.no-cert--has-doc:hover,
button.no-cert.no-cert--has-doc:focus,
button.no-cert.no-cert--has-doc:focus-visible,
button.no-cert.no-cert--has-doc:active,
button.no-cert.no-cert--has-doc.is-visible {
  appearance: none;
  -webkit-appearance: none;
  /* !important is deliberate: the rule being defended against lives outside
     this theme and may itself be !important. */
  background-color: var(--no-bg-soft) !important;
  background-image: none !important;
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  text-shadow: none;
}
.no-cert:hover,
button.no-cert:hover,
button.no-cert.no-cert--has-doc:hover,
.no-cert--has-doc:focus-visible {
  border-color: var(--no-primary-300);
}

/* The document frame is the one surface a hover may tint, and it tints toward
   the brand rather than away from it. */
.no-cert__doc {
  background-color: var(--no-white);
  transition: background-color var(--no-dur) var(--no-ease), border-color var(--no-dur) var(--no-ease);
}
.no-cert--has-doc:hover .no-cert__doc,
.no-cert--has-doc:focus-visible .no-cert__doc {
  border-color: var(--no-primary-200);
}
.no-cert--has-doc:hover .no-cert__zoom,
.no-cert--has-doc:focus .no-cert__zoom,
.no-cert--has-doc:focus-visible .no-cert__zoom {
  background: var(--no-primary-action);
  color: var(--no-white);
}

/* On a dark ground the same guard resolves to the inverted surface. */
.no-certs__grid--invert .no-cert,
.no-certs__grid--invert button.no-cert,
.no-certs__grid--invert button.no-cert:hover,
.no-certrail--invert .no-cert,
.no-certrail--invert button.no-cert,
.no-certrail--invert button.no-cert:hover,
.no-certrail--invert button.no-cert:focus-visible {
  background-color: rgba(255, 255, 255, .05) !important;
}
.no-certs__grid--invert .no-cert__doc,
.no-certrail--invert .no-cert__doc {
  background-color: rgba(255, 255, 255, .06);
}

/* =========================================================================
   STRATEGY 2026 HOMEPAGE REFINEMENTS
   ========================================================================= */
.no-hero {
  min-height: 100vh;
  min-height: 100svh;
}
.no-hero__body {
  padding-block: 0 clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
}
.no-hero__content {
  max-width: 820px;
}
.no-hero__title {
  /* Restated here in the 2026 refinements block, which is why changing the
     size at the top of this sheet did nothing: this is the one that wins.
     Keep the two in step, or delete one of them. */
  font-size: clamp(1.4rem, .7rem + 4.2vw, 3.15rem);
  line-height: 1.12;
}
.no-hero__lead {
  max-width: 58ch;
  font-size: var(--no-fs-md);
  line-height: var(--no-lh-relaxed);
}
.no-hero__sonar span {
  animation-duration: 7s;
}

/* -------------------------------------------------------------------------
   OPERATING HIGHLIGHTS STRIP
   -------------------------------------------------------------------------
   Four figures on one ruled row rather than four boxed cards. The rules are
   hairline gradients that fade at both ends, each figure carries a short accent
   tick, and the band's top edge is the same accent hairline the rest of the
   site uses, so the dark hero resolves into the light page instead of stopping
   against it.
   ---------------------------------------------------------------------- */
.no-hero-stats {
  position: relative;
  z-index: 2;
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  background: linear-gradient(180deg, var(--no-bg-soft) 0%, var(--no-white) 100%);
  border-bottom: 1px solid var(--no-border);
}
.no-hero-stats__edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--no-grad-hairline);
  opacity: .85;
}

.no-hero-stats .no-hero__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.no-hero-stats .no-stat {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0 clamp(1.25rem, .8rem + 1.8vw, 2.75rem);
  background: none;
  border: 0;
  border-radius: 0;
}
.no-hero-stats .no-stat:first-child { padding-left: 0; }
.no-hero-stats .no-stat:last-child { padding-right: 0; }
.no-hero-stats .no-stat:hover { transform: none; background: none; }

/* The divider: a hairline that fades out top and bottom rather than a rule
   that stops abruptly. Drawn on the item, so it survives any stat count. */
.no-hero-stats .no-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6%;
  bottom: 6%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--no-border-strong) 22%, var(--no-border-strong) 78%, transparent);
}
.no-hero-stats .no-stat:first-child::before { display: none; }

.no-hero-stats .no-stat__tick {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: var(--no-r-pill);
  background: var(--no-primary-action);
  transition: width var(--no-dur) var(--no-ease-out);
}
.no-hero-stats .no-stat:hover .no-stat__tick { width: 40px; }

.no-hero-stats .no-stat__num {
  display: flex;
  align-items: baseline;
  gap: 1px;
  margin-top: clamp(.875rem, .7rem + .5vw, 1.25rem);
  font-family: var(--no-font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.55rem + 2.6vw, 4rem);
  line-height: 1;
  letter-spacing: var(--no-tr-tight);
  color: var(--no-ink-900);
  /* Digits share a width, so the four figures sit on one optical baseline
     and the count-up does not shuffle the label underneath. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.no-hero-stats .no-stat__num sup {
  position: relative;
  top: -.06em;
  font-size: .38em;
  font-weight: 600;
  color: var(--no-primary-action);
}

.no-hero-stats .no-stat__label {
  max-width: 20ch;
  margin-top: clamp(.625rem, .5rem + .4vw, .875rem);
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--no-tr-wide);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--no-text-muted);
}

/* An unconfirmed figure stays visibly marked so it cannot ship by accident. */
.no-hero-stats .no-stat--unverified .no-stat__num { color: var(--no-text-faint); }
.no-hero-stats .no-stat--unverified .no-stat__tick { background: var(--no-warning); }
.no-hero-stats .no-stat--unverified .no-stat__label { color: var(--no-warning); }

@media (max-width: 900px) {
  /* Two by two. The dividers become a cross: vertical between the pair,
     horizontal between the rows. */
  .no-hero-stats .no-hero__stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  }
  .no-hero-stats .no-stat { padding-inline: clamp(1rem, .7rem + 1.4vw, 1.75rem); }
  .no-hero-stats .no-stat:nth-child(odd) { padding-left: 0; }
  .no-hero-stats .no-stat:nth-child(even) { padding-right: 0; }
  .no-hero-stats .no-stat:nth-child(odd)::before { display: none; }
  .no-hero-stats .no-stat:nth-child(even)::before { display: block; }
  .no-hero-stats .no-stat__label { max-width: none; }
}
@media (max-width: 420px) {
  .no-hero-stats .no-stat__num { font-size: clamp(1.875rem, 1.2rem + 4vw, 2.25rem); }
  .no-hero-stats .no-stat__label { font-size: var(--no-fs-3xs); letter-spacing: .06em; }
}

.no-partners {
  padding-block: var(--no-section-y-tight);
}
.no-partners__head {
  margin-bottom: var(--no-s-8);
}
/* Larger tiles: the supplied marks carry fine lettering (Stolt, Kanoo, DEME,
   Sharaf) that was illegible at 60px, and several are square lock-ups that lose
   most of their height to a wide box. */
.no-marquee__item {
  width: clamp(210px, 18vw, 280px);
  height: 132px;
  padding: 1.25rem 1.5rem;
}
.no-marquee--text .no-marquee__item {
  width: clamp(180px, 15vw, 230px);
}
.no-marquee__item img,
.no-logos__item img {
  max-height: 88px;
  filter: none !important;
  opacity: 1 !important;
}
@media (max-width: 620px) {
  .no-marquee__item { width: clamp(170px, 52vw, 220px); height: 112px; padding: 1rem 1.25rem; }
  .no-marquee__item img, .no-logos__item img { max-height: 68px; }
}
.no-marquee__item .ph,
.no-logos__item .ph {
  color: var(--no-ink-800);
  font-size: var(--no-fs-md);
}
.no-logos {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.no-logos__item {
  min-height: 132px;
  padding: 1.25rem 1.5rem;
}

.no-about__frame {
  aspect-ratio: 4 / 3.45;
  max-height: 540px;
}
.no-coverage__countries {
  margin-top: var(--no-s-6);
}

.no-why .no-shead {
  max-width: 1120px;
}
.no-why .no-shead__title {
  white-space: nowrap;
  font-size: clamp(2rem, 2.7vw, 3.45rem);
}
.no-why .no-shead__title .no-accent-text {
  display: inline;
}

.no-certs {
  padding-block: clamp(2.75rem, 2rem + 2.6vw, 4.75rem);
}
.no-certs__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.875rem, .65rem + .85vw, 1.4rem);
}
.no-cert {
  padding: clamp(.875rem, .72rem + .55vw, 1.2rem);
  gap: .8rem;
}
.no-cert__doc {
  aspect-ratio: 1 / 1.2;
  min-height: 112px;
}
.no-cert__ico {
  width: 48px;
  height: 48px;
}
.no-cert__ico svg {
  width: 24px;
  height: 24px;
}
.no-cert--placeholder .no-cert__doc {
  background:
    linear-gradient(135deg, rgba(19, 134, 179, .1), rgba(111, 207, 255, .08)),
    var(--no-white);
  border-style: dashed;
}
.no-cert--placeholder .no-cert__ico {
  color: var(--no-primary-action);
  opacity: 1;
}
.no-cert--placeholder .no-cert__text span {
  color: var(--no-text-muted);
}

@media (max-width: 1100px) {
  /* The highlights strip sets its own two-up breakpoint at 900px, where the
     dividers change with it; it is deliberately not folded in here. */
  .no-certs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .no-why .no-shead__title {
    white-space: normal;
  }
}
/* 10px of uppercase mono is a label you squint at. One pixel up is the
   difference between reading it and recognising its shape. */
@media (max-width: 700px) {
  .no-hero__kicker,
  .no-hero__cue { font-size: 11px; }
}

@media (max-width: 700px) {
  .no-hero {
    min-height: auto;
  }
  .no-hero__body {
    min-height: calc(100svh - var(--no-header-h) - var(--no-topbar-h));
    padding-block: clamp(5.5rem, 18vw, 7rem) clamp(3rem, 10vw, 4rem);
  }
  .no-hero__actions {
    align-items: stretch;
  }
  .no-certs__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .no-about__frame {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .no-hero__title .ln,
  .no-hero__kicker,
  .no-hero__lead,
  .no-hero__actions,
  .no-hero__sonar span,
  .no-marquee__track {
    animation: none !important;
  }
}