/* ==========================================================================
   NAVAL ORIENTATION: Inner pages (About, Contact)

   Built entirely from the tokens and components established on the homepage.
   Nothing here introduces a new colour, type step, radius or easing curve.
   ========================================================================== */

/* =========================================================================
   PAGE HERO: shorter sibling of the homepage hero
   ========================================================================= */
.no-phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--no-ink-900);
  color: var(--no-text-invert-muted);
  padding-top: calc(var(--no-header-h) + var(--no-topbar-h) + clamp(2rem, 1.5rem + 2.5vw, 4rem));
  padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}
@media (max-width: 1024px) {
  .no-phero { padding-top: calc(var(--no-header-h) + clamp(2rem, 1.5rem + 2.5vw, 3.5rem)); }
}
.no-phero__media { position: absolute; inset: 0; z-index: -3; }
.no-phero__media img { width: 100%; height: 100%; object-fit: cover; }
.no-phero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(11, 30, 44, .72) 0%, rgba(11, 30, 44, .52) 55%, rgba(6, 15, 23, .82) 100%),
    linear-gradient(90deg, rgba(11, 30, 44, .62) 0%, rgba(11, 30, 44, .18) 70%, transparent 100%);
}
.no-phero .no-gridlines { z-index: -1; opacity: .5; }
.no-phero__inner { position: relative; max-width: 900px; }

/* Page titles: compact inner-page scale with a 30px minimum. */
.no-phero__title {
  font-size: clamp(2.5rem, 4.8vw, 5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  color: #fff;
  margin-top: var(--no-s-4);
  text-wrap: balance;
  max-width: 26ch;
}
/*
 * The accent half of a page title.
 *
 * .no-accent-text resolves to the dark action blue, which is correct on a white
 * section and unreadable over the hero photograph, where it read as a muted
 * navy against a navy scrim. The page heroes are dark surfaces, so the title is
 * white and its accent is the beacon cyan, matching the homepage hero.
 */
.no-phero__title .no-accent-text,
.no-phero .no-kicker,
.no-phero__title em {
  color: var(--no-accent);
}

.no-phero__title[data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: none;
}
@media (max-width: 640px) {
  .no-phero__title {
    font-size: clamp(2.25rem, 10vw, 3rem);
    max-width: 12ch;
  }
}

.no-404 {
  min-height: calc(100vh - var(--no-header-h));
  display: grid;
  align-items: center;
  padding-block: clamp(4rem, 3rem + 4vw, 7rem);
}
.no-404__inner {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.no-404__code {
  font-family: var(--no-font-mono);
  font-size: clamp(3rem, 2rem + 5vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--no-primary-action);
}
.no-404__inner h1 {
  margin-top: 1rem;
  font-size: clamp(1.875rem, 1.45rem + 1.8vw, 3rem);
  font-weight: 700;
  color: var(--no-ink-800);
}
.no-404__inner p:not(.no-404__code) {
  margin-top: .875rem;
  color: var(--no-text-muted);
}
.no-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.75rem;
}
@media (max-width: 520px) {
  .no-404__actions { flex-direction: column; }
  .no-404__actions .no-btn { width: 100%; }
}
.no-phero__lead {
  font-size: clamp(1.0625rem, 1rem + .28vw, 1.25rem);
  line-height: var(--no-lh-relaxed);
  color: rgba(255, 255, 255, .82);
  max-width: 58ch;
  margin-top: var(--no-s-5);
}

/* Breadcrumb */
.no-crumb {
  display: flex;
  align-items: center;
  gap: .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, .5);
  margin-bottom: var(--no-s-5);
}
.no-crumb a { color: rgba(255, 255, 255, .7); }
.no-crumb a:hover { color: var(--no-accent); }
.no-crumb svg { display: block; opacity: .6; }

/* =========================================================================
   INTRODUCTION
   ========================================================================= */
/* A supporting paragraph rather than a second headline: one step down in size,
   a little more line height, and a narrower measure so it reads as the note
   under the heading it belongs to. */
.no-lead--secondary {
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--no-fs-base);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
}
.no-shead--center .no-lead--secondary { margin-top: var(--no-s-4); }

/* -------------------------------------------------------------------------
   ABOUT: introduction
   -------------------------------------------------------------------------
   Copy on the left, one tall picture on the right. The picture is deliberately
   portrait rather than the wide band this section used to carry: at half the
   container it holds its own beside a column of text, where a 16:7 strip
   shrank to a letterbox.
   ---------------------------------------------------------------------- */
.no-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem);
  align-items: center;
}

.no-intro__head { max-width: 100%; }
.no-intro__head h2 { margin-top: 1rem; font-size: var(--no-fs-2xl); line-height: var(--no-lh-snug); }

.no-intro__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  max-height: min(74vh, 620px);
  border-radius: var(--no-r-lg);
  overflow: hidden;
  box-shadow: var(--no-sh-lg);
  background: var(--no-bg-soft);
}
.no-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.no-intro__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The opening paragraph carries the section; the two that follow support it. */
.no-intro__lead {
  max-width: 56ch;
  margin-top: var(--no-s-5);
  font-size: var(--no-fs-lg);
  line-height: var(--no-lh-normal);
  color: var(--no-text);
}
.no-intro__body {
  max-width: 62ch;
  margin-top: var(--no-s-5);
  font-size: var(--no-fs-base);
  color: var(--no-text-muted);
}

.no-intro__facts {
  display: grid;
  gap: .625rem;
  margin: var(--no-s-6) 0 0;
  padding: 0;
  list-style: none;
}
.no-intro__facts li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding-top: .625rem;
  border-top: 1px solid var(--no-border);
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-normal);
  color: var(--no-text);
}
.no-intro__facts li:first-child { padding-top: 0; border-top: 0; }
.no-intro__facts svg { flex: none; margin-top: 2px; color: var(--no-primary-action); }

.no-intro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: var(--no-s-8);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.no-intro__actions .no-btn { flex: 0 1 auto; }

@media (max-width: 980px) {
  /* Copy first, picture after it: the heading has to stay above the fold on a
     phone, and a tall image at the top would push it off. */
  .no-intro { grid-template-columns: minmax(0, 1fr); }
  .no-intro__media { aspect-ratio: 4 / 3; max-height: 420px; }
}
@media (max-width: 560px) {
  .no-intro__actions .no-btn { flex: 1 1 100%; }
}

.no-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--no-s-8);
  background: var(--no-border);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  overflow: hidden;
  list-style: none;
  padding: 0;
}
.no-facts li {
  background: var(--no-bg-soft);
  padding: 1.125rem 1.25rem;
}
.no-facts b {
  display: block;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-base);
  line-height: 1.25;
  color: var(--no-ink-800);
}
.no-facts span {
  display: block;
  margin-top: .25rem;
  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);
}

/* =========================================================================
   HISTORY TIMELINE
   A marker rail plus one detail panel. Selecting a milestone swaps the panel
   instead of stacking every milestone on the page.
   ========================================================================= */
.no-history { background: var(--no-ink-900); position: relative; overflow: hidden; }
/*
 * The readability scrim.
 *
 * It used to sit at z-index 0 alongside .no-history__bg, and because the
 * background element comes later in the document the photograph painted over
 * the scrim instead of under it: the only thing darkening this section was the
 * image's own opacity against the near-black section colour. Raising the scrim
 * above the picture is what makes the timeline copy legible; with it doing its
 * job the photograph can now be shown at a higher opacity than before, so the
 * section is both more readable and less murky than it was.
 */
.no-history::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 15, 23, .42) 0%, rgba(6, 15, 23, .28) 45%, rgba(6, 15, 23, .50) 100%),
    linear-gradient(90deg, rgba(11, 30, 44, .50) 0%, rgba(11, 30, 44, .14) 62%, rgba(11, 30, 44, .26) 100%);
  z-index: 1;
}
.no-history > * { position: relative; z-index: 2; }
.no-history__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.no-history__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
}

.no-tl {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: start;
}

.no-tl__rail { position: relative; display: grid; gap: .25rem; padding-left: 2.25rem; }
.no-tl__line {
  position: absolute;
  left: 1.06rem;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 2px;
  background: rgba(255, 255, 255, .12);
  border-radius: 2px;
  overflow: hidden;
}
.no-tl__progress {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--no-primary-400), var(--no-accent));
  transition: height var(--no-dur-slow, .95s) var(--no-ease-out);
}

.no-tl__marker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: .875rem 1rem;
  margin-left: -2.25rem;
  padding-left: 2.25rem;
  background: none;
  border: 0;
  border-radius: var(--no-r-md);
  color: rgba(255, 255, 255, .66);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--no-dur, .52s) var(--no-ease), color var(--no-dur, .52s) var(--no-ease);
}
.no-tl__marker:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.no-tl__marker.is-active { background: rgba(19, 134, 179, .18); color: #fff; }

.no-tl__dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--no-ink-800);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .55);
  transition: all var(--no-dur, .52s) var(--no-ease);
}
.no-tl__marker.is-active .no-tl__dot {
  background: var(--no-primary-action);
  border-color: var(--no-accent);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(111, 207, 255, .14);
}
.no-tl__marker-text { display: block; min-width: 0; }
.no-tl__no {
  display: block;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  letter-spacing: var(--no-tr-wide);
  color: var(--no-accent);
}
.no-tl__marker-title {
  display: block;
  font-family: var(--no-font-display);
  font-weight: 600;
  font-size: var(--no-fs-sm);
  line-height: 1.35;
  margin-top: .125rem;
}

.no-tl__panels { position: relative; }
.no-tl__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--no-r-lg);
  animation: noTlIn .5s var(--no-ease-out) both;
}
.no-tl__panel[hidden] { display: none; }
@keyframes noTlIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.no-tl__ghost {
  position: absolute;
  right: -.05em; top: -.22em;
  font-family: var(--no-font-display);
  font-size: clamp(6rem, 5rem + 6vw, 11rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(111, 207, 255, .12);
  pointer-events: none;
  user-select: none;
}
.no-tl__eyebrow {
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  letter-spacing: var(--no-tr-wider);
  text-transform: uppercase;
  color: var(--no-accent);
}
.no-tl__panel h3 { color: #fff; font-size: var(--no-fs-xl); margin-top: .625rem; }
.no-tl__text {
  margin-top: .875rem;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: rgba(255, 255, 255, .74);
  max-width: 58ch;
}

/*
 * Under 900px the rail-plus-panel model stops working: there is no room for
 * two columns and tapping to reveal hides content behind an interaction.
 * Each milestone becomes a self-contained card in a single vertical run.
 */
@media (max-width: 900px) {
  .no-tl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .no-tl__rail { display: none; }
  .no-tl__panels { display: grid; gap: 1rem; }
  .no-tl__panel { animation: none; }
  .no-tl__panel[hidden] { display: block; }
  .no-tl__ghost { font-size: 5.5rem; opacity: .8; }
  .no-tl__panel::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--no-grad-brand);
  }
}

/* =========================================================================
   VISION / MISSION / VALUES
   ========================================================================= */
.no-vm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, .7rem + 1.2vw, 1.75rem);
}
@media (max-width: 760px) { .no-vm { grid-template-columns: minmax(0, 1fr); } }

.no-vm__card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  border-radius: var(--no-r-lg);
  border: 1px solid var(--no-border);
  background: var(--no-bg-soft);
  transition: transform var(--no-dur-mid, .72s) var(--no-ease-out), box-shadow var(--no-dur-mid, .72s) var(--no-ease);
}
.no-vm__card:hover { transform: translateY(-4px); box-shadow: var(--no-sh-md); }
.no-vm__card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--no-grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--no-dur-slow, .95s) var(--no-ease-out);
}
.no-vm__card.is-visible::after { transform: scaleX(1); }
.no-vm__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--no-r-md);
  background: var(--no-primary-50);
  border: 1px solid var(--no-primary-100);
  color: var(--no-primary-700);
}
.no-vm__card h3 { margin-top: 1.25rem; font-size: var(--no-fs-xl); }
.no-vm__card p {
  margin-top: .75rem;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
}

.no-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .7rem + 1.2vw, 1.75rem);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
@media (max-width: 900px) { .no-values { grid-template-columns: minmax(0, 1fr); } }

.no-values-section { background: var(--no-bg-soft); }

.no-value {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  background: var(--no-white);
}
.no-value__ico {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--no-r-sm);
  background: var(--no-primary-50);
  color: var(--no-primary-700);
}
.no-value h4 { font-size: var(--no-fs-base); }
.no-value p {
  margin-top: .375rem;
  font-size: var(--no-fs-xs);
  line-height: 1.7;
  color: var(--no-text-muted);
}

/* Certifications on About use a quieter accreditation strip plus detail rows. */
.no-certs--deep { background: var(--no-ink-900); }
.no-certs--about { background: var(--no-bg-soft); }

.no-certlogos {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--no-s-8);
  background: var(--no-border);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  overflow: hidden;
}
.no-certlogo {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: .875rem;
  background: var(--no-white);
}
.no-certlogo img {
  max-width: 100%;
  max-height: 58px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.no-certlogo__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--no-r-sm);
  color: var(--no-primary-700);
  background: var(--no-primary-50);
  border: 1px solid var(--no-primary-100);
}
.no-certlogo--placeholder .no-certlogo__ico {
  color: var(--no-text-muted);
  background: var(--no-bg-soft);
  border-color: var(--no-border);
}
@media (max-width: 1100px) {
  .no-certlogos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .no-certlogos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .no-certlogo { min-height: 82px; }
}
@media (max-width: 420px) {
  .no-certlogos { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Certifications in detail (About) -----------------------------------
 * Two labelled groups: Part 1 ISO, Part 2 international frameworks, sit
 * below the accreditation strip. Each entry is a row rather than a card so a
 * long standard name and its scope stay readable at 320px without the text
 * being squeezed into a narrow column.
 */
.no-certdetail { margin-top: var(--no-s-10); }
/* The About page no longer repeats the certificate artwork above these
   groups, so the first one follows the section heading directly. */
.no-shead + .no-certdetail { margin-top: clamp(2rem, 1.5rem + 1.8vw, 3rem); }
.no-certdetail + .no-certdetail { margin-top: var(--no-s-8); }

.no-certdetail__head {
  display: flex;
  align-items: center;
  gap: .875rem;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-lg);
  line-height: 1.3;
  color: #fff;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  text-wrap: balance;
}
.no-certdetail__head::before {
  content: "";
  flex: none;
  width: 4px;
  align-self: stretch;
  min-height: 1.25em;
  border-radius: 4px;
  background: var(--no-accent);
}

/* Each group holds three entries, so three columns fill a row exactly and no
   card is left orphaned in a half-empty second row. */
.no-certdetail__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--no-s-5);
  margin-top: var(--no-s-6);
}
@media (max-width: 1100px) { .no-certdetail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .no-certdetail__grid { grid-template-columns: minmax(0, 1fr); } }

.no-certdetail__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(1rem, .8rem + .6vw, 1.375rem);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--no-r-md);
  transition: background-color var(--no-dur, .52s) var(--no-ease), border-color var(--no-dur, .52s) var(--no-ease);
}
.no-certdetail__item:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(111, 207, 255, .38);
}
.no-certdetail__item > div { min-width: 0; }

.no-certdetail__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--no-r-sm);
  color: var(--no-accent);
  background: rgba(111, 207, 255, .1);
  border: 1px solid rgba(111, 207, 255, .22);
}

.no-certdetail__item h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .75rem;
  font-size: var(--no-fs-base);
  line-height: 1.35;
  color: #fff;
  overflow-wrap: anywhere;
}
.no-certdetail__item h4 span {
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  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: .25rem .4375rem;
}
.no-certdetail__item p {
  margin-top: .5rem;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-invert-muted);
}

.no-certs--about .no-certdetail__head {
  color: var(--no-ink-800);
  border-bottom-color: var(--no-border);
}
.no-certs--about .no-certdetail__item {
  background: var(--no-white);
  border-color: var(--no-border);
}
.no-certs--about .no-certdetail__item:hover {
  background: var(--no-white);
  border-color: var(--no-primary-200);
}
.no-certs--about .no-certdetail__item h4 {
  color: var(--no-ink-800);
}
.no-certs--about .no-certdetail__item p {
  color: var(--no-text-muted);
}

/* ---- About CTA ----------------------------------------------------------
 * Single centred column, unlike the homepage CTA which pairs copy with the
 * inquiry form. The buttons wrap to full width on narrow screens so the long
 * "Download Our Full Certified Corporate Profile (PDF)" label never overflows.
 */
.no-aboutcta { text-align: center; }
/* The measure is capped on the copy, not on the block, so the button row can
   use the full container width and keep both actions on one line. */
.no-aboutcta .no-cta__title,
.no-aboutcta .no-cta__answer { max-width: 860px; margin-inline: auto; }
.no-aboutcta .no-cta__title { margin-top: 1rem; }

.no-aboutcta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--no-s-4);
  margin-top: var(--no-s-8);
}
.no-aboutcta__actions .no-btn { max-width: 100%; }
#about-cta .no-cta__bg img { opacity: .56; }
#about-cta.no-cta::after {
  background: linear-gradient(100deg, rgba(6,15,23,.8) 0%, rgba(11,30,44,.64) 48%, rgba(10,65,87,.46) 100%);
}
@media (max-width: 640px) {
	.no-aboutcta__actions .no-btn { flex: 1 1 100%; }
	.no-aboutcta__actions .no-btn--lg { padding-inline: 1.25rem; }
}

/* =========================================================================
   CONTACT
   ========================================================================= */
.no-contact {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1.2rem + 3.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 960px) { .no-contact { grid-template-columns: minmax(0, 1fr); } }
.no-contact--info {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
}

.no-cinfo { display: grid; gap: .75rem; margin-top: var(--no-s-8); }
.no-cinfo__row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  background: var(--no-white);
  transition: border-color var(--no-dur, .52s) var(--no-ease), transform var(--no-dur, .52s) var(--no-ease-out);
}
.no-cinfo__row:hover { border-color: var(--no-primary-300); transform: translateX(3px); }
/* The flex child must be allowed to shrink, and long addresses like
   operations@navalorientation.com have to be able to break, or the row pushes
   past the viewport at 320px. */
.no-cinfo__row > span:last-child { min-width: 0; flex: 1; }
.no-cinfo__ico {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--no-r-sm);
  background: var(--no-primary-50);
  color: var(--no-primary-700);
}
.no-cinfo__label {
  display: block;
  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);
}
.no-cinfo__value {
  display: block;
  margin-top: .25rem;
  font-size: var(--no-fs-sm);
  line-height: 1.55;
  color: var(--no-ink-800);
  font-style: normal;
  overflow-wrap: anywhere;
}
.no-cinfo__value a { color: var(--no-ink-800); }
.no-cinfo__value a:hover { color: var(--no-primary-action); }

/* Direct-contact buttons */
.no-cactions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: var(--no-s-6);
}
.no-cactions .no-btn { flex: 1 1 auto; }
.no-btn--whatsapp { --btn-bg: #25D366; --btn-fg: #062f18; --btn-veil: rgba(255, 255, 255, .4); }

/* Map panel reuses the homepage chart component */
.no-cmap {
  background: var(--no-grad-deep);
  border-radius: var(--no-r-xl);
  padding: clamp(1rem, .7rem + 1.4vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, .1);
}
.no-cinfo + .no-cmap { margin-top: var(--no-s-8); }
.no-cmap .no-map { min-height: 0; border: 0; background: none; padding: 0; }
.no-cmap .no-map__legend { position: static; margin-top: 1rem; }
.no-cmap__network-label { margin-top: 1.5rem; }
.no-cmap__countries { margin-top: .875rem; }

/* Contact inquiry is intentionally separated from the map/details section. */
.no-contact-inquiry { background: var(--no-bg-soft); }
.no-contact-inquiry__head {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.no-contact-inquiry__head .no-lead {
  margin: var(--no-s-4) auto 0;
  max-width: 62ch;
}
.no-contact-inquiry__form {
  max-width: 880px;
  margin: clamp(2rem, 1.4rem + 2vw, 3rem) auto 0;
}

.no-cmap__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 1rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.no-cmap__list li {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: var(--no-fs-xs);
  color: rgba(255, 255, 255, .78);
}
.no-cmap__list span {
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  letter-spacing: .06em;
  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: .25rem .375rem;
}
@media (max-width: 420px) { .no-cmap__list { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   IMAGE GALLERY

   Shared by Vessels, Projects and anything else with a set of images. Scroll
   snap does the work; the script only syncs the thumbnails. The main image
   ratio is set per use through --gal-ratio.
   ========================================================================= */
.no-gal { position: relative; }

.no-gal__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--no-s-3, .75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--no-r-lg);
}
.no-gal__track::-webkit-scrollbar { display: none; }
.no-gal__slide { margin: 0; scroll-snap-align: start; }

.no-gal__zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--no-grad-deep);
  border-radius: var(--no-r-lg);
  overflow: hidden;
  cursor: zoom-in;
}
.no-gal__zoom img {
  display: block;
  width: 100%;
  aspect-ratio: var(--gal-ratio, 4 / 3);
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 900px) {
  .no-gal__zoom img { aspect-ratio: 16 / 10; }
}
.no-gal__zoomico {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: rgba(11, 30, 44, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  transition: transform var(--no-dur, .52s) var(--no-ease-out);
}
.no-gal__zoom:hover .no-gal__zoomico { transform: scale(1.08); }

.no-gal__controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .875rem;
}
.no-gal__nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--no-primary-action);
  background: #fff;
  border: 1px solid var(--no-border);
  cursor: pointer;
  transition: background-color var(--no-dur, .52s) var(--no-ease), color var(--no-dur, .52s) var(--no-ease), border-color var(--no-dur, .52s) var(--no-ease);
}
.no-gal__nav:hover,
.no-gal__nav:focus-visible {
  color: #fff;
  background: var(--no-primary-action);
  border-color: var(--no-primary-action);
}
.no-gal__nav--prev { transform: rotate(180deg); }

.no-gal__thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.no-gal__thumbs::-webkit-scrollbar { display: none; }
.no-gal__thumb {
  flex: none;
  width: 74px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--no-r-sm);
  overflow: hidden;
  background: var(--no-bg-soft);
  cursor: pointer;
  opacity: .6;
  transition: opacity var(--no-dur, .52s) var(--no-ease), border-color var(--no-dur, .52s) var(--no-ease);
}
.no-gal__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.no-gal__thumb:hover { opacity: 1; }
.no-gal__thumb.is-active { opacity: 1; border-color: var(--no-primary-action); }

@media (max-width: 620px) {
  .no-gal__nav { display: none; }
}

/* =========================================================================
   DETAIL PAGE PRIMITIVES

   The showcase layout was written for the vessel page and is now shared with
   Projects, so it lives here rather than in vessels.css: a breadcrumb strip,
   a media-and-facts grid, a write-up band and a related band. Anything that
   is genuinely about a vessel (key figures, availability, specifications)
   stays in vessels.css.
   ========================================================================= */

/* Breadcrumb strip above the showcase. */
.no-pagebar {
  border-bottom: 1px solid var(--no-border);
  background: var(--no-bg-soft);
}
.no-pagebar .no-crumb {
  padding-block: .875rem;
  flex-wrap: wrap;
  row-gap: .25rem;
}
.no-crumb--light { color: var(--no-text-muted); }
.no-crumb--light a { color: var(--no-text-muted); }
.no-crumb--light a:hover { color: var(--no-primary-action); }
.no-crumb--light [aria-current="page"] { color: var(--no-ink-800); font-weight: 650; }

/* Showcase: media left, name and facts right, both in the first screen. */
.no-show { padding-block: clamp(1.75rem, 1.3rem + 2.2vw, 3rem); }

.no-show__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) { .no-show__grid { grid-template-columns: minmax(0, 1fr); } }

.no-show__info { min-width: 0; }
.no-show__title {
  margin-top: .625rem;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: var(--no-tr-tight);
  color: var(--no-ink-800);
  text-wrap: balance;
}

/* The page's headline facts as one compact row of chips. */
.no-show__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}
.no-show__fact {
  min-width: 0;
  padding: .5rem .75rem;
  background: var(--no-bg-soft);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-sm);
}
.no-show__fact span {
  display: block;
  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-muted);
}
.no-show__fact b {
  display: block;
  margin-top: .125rem;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-sm);
  color: var(--no-ink-800);
}

.no-show__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
@media (max-width: 520px) {
  .no-show__actions { flex-direction: column; }
  .no-show__actions .no-btn { width: 100%; }
}

/* Write-up band below the showcase. */
.no-detail {
  padding-block: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  border-top: 1px solid var(--no-border);
}
.no-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .no-detail__grid { grid-template-columns: minmax(0, 1fr); } }

.no-detail h2 { font-size: var(--no-fs-xl); line-height: 1.25; }
.no-detail__body { max-width: 68ch; }
.no-detail__body > * + * { margin-top: .9em; }
.no-detail__body h2 { margin-bottom: .75rem; }

/* Related work at the foot of the page. */
.no-related {
  padding-block: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  background: var(--no-bg-soft);
  border-top: 1px solid var(--no-border);
}
.no-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.no-related__head h2 { font-size: var(--no-fs-xl); }

/* =========================================================================
   PAGINATION

   Shared by every paginated archive. This used to live in blog.css, which the
   project archives do not load, so the numbers rendered unstyled there.
   ========================================================================= */
.no-pagination { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.no-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.no-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .875rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-xs);
  color: var(--no-ink-700);
  background: #fff;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-sm);
  transition: background-color var(--no-dur) var(--no-ease),
              color var(--no-dur) var(--no-ease),
              border-color var(--no-dur) var(--no-ease);
}
.no-pagination .page-numbers:hover,
.no-pagination .page-numbers:focus-visible {
  color: #fff;
  background: var(--no-primary-action);
  border-color: var(--no-primary-action);
}
.no-pagination .page-numbers.current {
  color: #fff;
  background: var(--no-ink-800);
  border-color: var(--no-ink-800);
}
.no-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* =========================================================================
   PHASE POLISH: About visual flow
   ========================================================================= */
#introduction {
  background: linear-gradient(180deg, var(--no-white) 0%, rgba(19, 134, 179, .035) 100%);
}
#vision-mission {
  background: var(--no-white);
}
#vision-mission .no-vm {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.no-values-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(19, 134, 179, .08) 0%, rgba(255, 255, 255, 0) 42%),
    var(--no-bg-soft);
}
.no-values-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(19, 134, 179, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 134, 179, .05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000, transparent 65%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 65%);
}
.no-values-section > * {
  position: relative;
}
.no-value {
  min-height: 100%;
  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-value:hover {
  transform: translateY(-4px);
  box-shadow: var(--no-sh-md);
  border-color: var(--no-primary-300);
}