/* ==========================================================================
   NAVAL ORIENTATION: Services overview page and the 14 service pages

   Loads only where it is used. Everything here reuses the existing tokens,
   type scale, buttons and reveal system; no new colours, fonts or libraries.
   ========================================================================== */

/* =========================================================================
   SERVICE HERO (extends .no-phero)
   ========================================================================= */
.no-phero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--no-s-4);
  margin-top: var(--no-s-8);
}
@media (max-width: 560px) {
  .no-phero__actions { flex-direction: column; align-items: stretch; }
  .no-phero__actions .no-btn { width: 100%; }
}

/* The service breadcrumb has three levels, so it needs to wrap cleanly. */
.no-phero--service .no-crumb { flex-wrap: wrap; row-gap: .25rem; }

/* =========================================================================
   SERVICES PAGE: overview and category jump list
   ========================================================================= */
.no-svcoverview__inner {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.no-svcoverview__inner .no-shead__title { margin-top: 1rem; }
.no-svcoverview__inner .no-lead { margin: var(--no-s-5) auto 0; max-width: 78ch; }

.no-svccats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--no-s-5);
  margin: var(--no-s-10) 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) { .no-svccats { grid-template-columns: minmax(0, 1fr); } }

.no-svccat a {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.125rem 1.25rem;
  color: var(--no-ink-800);
  background: #fff;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  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-svccat a:hover,
.no-svccat a:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--no-sh-md);
  border-color: var(--no-primary-300);
}
.no-svccat__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--no-r-sm);
  color: var(--no-primary-action);
  background: var(--no-primary-50, rgba(19, 134, 179, .08));
  border: 1px solid rgba(19, 134, 179, .16);
}
.no-svccat__body { min-width: 0; flex: 1; }
.no-svccat__body b {
  display: block;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-base);
  line-height: 1.3;
}
.no-svccat__body small {
  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-muted);
}
.no-svccat__arrow { flex: none; color: var(--no-primary-action); transition: transform var(--no-dur, .52s) var(--no-ease-out); }
.no-svccat a:hover .no-svccat__arrow { transform: translateX(4px); }

/* =========================================================================
   SERVICES PAGE: the 14 cards
   ========================================================================= */
.no-svclist:nth-of-type(even) { background: var(--no-bg-soft); }

/* =========================================================================
   SERVICE PAGE
   -------------------------------------------------------------------------
   The fourteen service pages. Every value below resolves to a token already
   declared in tokens.css: no new colour, font, radius or spacing step is
   introduced here, and no component defined in base.css or home.css is
   restyled. The pages are the existing design system rearranged, not a second
   design system sitting next to it.
   ========================================================================= */

/* -------------------------------------------------------------------------
   In-page section bar
   -------------------------------------------------------------------------
   Sticks under the site header from 1024px up. Below that the site header is
   already sticky and the viewport is short, so a second fixed bar would cost
   more height than it saves; there it stays where it sits and scrolls
   sideways instead.
   ---------------------------------------------------------------------- */
.no-svcbar {
  position: relative;
  z-index: var(--no-z-raised);
  background: var(--no-white);
  border-bottom: 1px solid var(--no-border);
}
.no-svcbar__inner {
  display: flex;
  align-items: center;
  gap: var(--no-s-6);
  min-height: 60px;
}
.no-svcbar__label {
  flex: none;
  max-width: 26ch;
  overflow: hidden;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--no-text-muted);
}

.no-svcbar__list {
  display: flex;
  flex: 1;
  gap: var(--no-s-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.no-svcbar__list::-webkit-scrollbar { display: none; }

.no-svcbar__link {
  display: block;
  padding: .5rem .875rem;
  border-radius: var(--no-r-pill);
  font-size: var(--no-fs-sm);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--no-text-muted);
  transition: color var(--no-dur-fast) var(--no-ease),
              background-color var(--no-dur-fast) var(--no-ease);
}
.no-svcbar__link:hover,
.no-svcbar__link:focus-visible { color: var(--no-primary-action); background: var(--no-primary-50); }
.no-svcbar__link.is-current { color: var(--no-primary-action); background: var(--no-primary-50); }

.no-svcbar__cta { flex: none; }

@media (min-width: 1025px) {
  .no-svcbar { position: sticky; top: var(--no-header-h); }
}
@media (max-width: 1024px) {
  .no-svcbar__label,
  .no-svcbar__cta { display: none; }
  .no-svcbar__inner { min-height: 54px; padding-inline: 0; }
  .no-svcbar__list { padding-inline: var(--no-gutter); }
}

/* -------------------------------------------------------------------------
   Facts strip
   ---------------------------------------------------------------------- */
.no-svcfacts {
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--no-bg-soft);
  border-bottom: 1px solid var(--no-border);
}
.no-svcfacts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--no-s-4) var(--no-s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.no-svcfact {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.no-svcfact + .no-svcfact { border-left: 1px solid var(--no-border); padding-left: var(--no-s-6); }
.no-svcfact__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--no-r-sm);
  color: var(--no-primary-action);
  background: var(--no-primary-50);
  border: 1px solid var(--no-primary-100);
}
.no-svcfact__body { min-width: 0; }
.no-svcfact__body 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: var(--no-text-faint);
}
.no-svcfact__body b {
  display: block;
  margin-top: .1rem;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-sm);
  font-weight: 700;
  line-height: 1.35;
  color: var(--no-ink-800);
  overflow-wrap: break-word;
}

@media (max-width: 1024px) {
  .no-svcfacts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--no-s-4); }
  .no-svcfact + .no-svcfact { border-left: 0; padding-left: 0; }
  .no-svcfact:nth-child(even) { border-left: 1px solid var(--no-border); padding-left: var(--no-s-5); }
}
@media (max-width: 620px) {
  .no-svcfacts { padding-block: 1.125rem; }
  .no-svcfacts__list { gap: .875rem 1rem; }
  .no-svcfact { gap: .625rem; align-items: flex-start; }
  .no-svcfact:nth-child(even) { padding-left: 1rem; }
  .no-svcfact__ico { width: 32px; height: 32px; }
  .no-svcfact__ico svg { width: 16px; height: 16px; }
  .no-svcfact__body b { font-size: var(--no-fs-xs); }
}

/* -------------------------------------------------------------------------
   Introduction: copy beside the at-a-glance panel
   ---------------------------------------------------------------------- */
.no-svcintro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem);
  align-items: center;
}
.no-svcintro__content { min-width: 0; }

.no-svcintro__kicker {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
}
.no-svcintro__kicker svg { flex: none; color: var(--no-primary-action); }

/* The lead is the first sentence of the client's own introduction, set at
   display size so the page opens on a statement rather than on a paragraph. */
/* One step down from the section headings: this is the opening sentence of the
   client's own copy, not a title, and at display size it competed with the H1
   in the hero directly above it. */
.no-svcintro__lead {
  max-width: 36ch;
  margin-top: var(--no-s-5);
  font-size: var(--no-fs-xl);
  font-weight: 700;
  line-height: var(--no-lh-snug);
  letter-spacing: var(--no-tr-snug);
  color: var(--no-ink-800);
}
.no-svcintro__body {
  max-width: 62ch;
  margin-top: var(--no-s-5);
  font-size: var(--no-fs-base);
}
.no-svcintro__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--no-s-4) var(--no-s-6);
  margin-top: var(--no-s-8);
}
.no-svcintro__jump {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--no-fs-sm);
  font-weight: 600;
}
.no-svcintro__jump svg { transform: rotate(90deg); }

/* -------------------------------------------------------------------------
   The service photograph
   -------------------------------------------------------------------------
   Shown clean. Nothing is laid over it: no scrim, no gradient, no caption and
   no list. It is the only picture of the service on the page and the point of
   it is that a visitor can see the work.
   ---------------------------------------------------------------------- */
.no-svcshot {
  position: relative;
  min-width: 0;
  margin: 0;
  aspect-ratio: 6 / 5;
  max-height: min(66vh, 560px);
  overflow: hidden;
  border-radius: var(--no-r-lg);
  background: var(--no-bg-soft);
  box-shadow: var(--no-sh-lg);
}
.no-svcshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* The branded fallback, used only where no photograph has been assigned. */
.no-svcpanel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--no-r-lg);
  background: var(--no-grad-deep);
  box-shadow: var(--no-sh-md);
  isolation: isolate;
}
.no-svcpanel .no-gridlines { opacity: .5; }
.no-svcpanel__inner {
  position: relative;
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
}
.no-svcpanel__ico {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: var(--no-s-5);
  border-radius: var(--no-r-sm);
  color: var(--no-accent);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--no-border-invert);
}
.no-svcpanel__scope {
  margin-top: var(--no-s-4);
  font-size: var(--no-fs-md);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-invert-muted);
}
/* The editor-only note. Same component as every other .no-editor-note, on the
   inverted surface this panel provides. */
.no-svcpanel__note {
  margin-top: var(--no-s-6);
  margin-inline: 0;
  max-width: none;
  color: var(--no-text-invert-muted);
  background: rgba(255, 255, 255, .06);
  border-color: var(--no-border-invert);
}
.no-svcpanel__note svg { color: var(--no-accent); }
.no-svcpanel__note a { color: var(--no-accent); text-decoration: underline; }

/* -------------------------------------------------------------------------
   "This service covers", in the copy column
   ---------------------------------------------------------------------- */
.no-svccovers { margin-top: var(--no-s-6); }
.no-svccovers__label {
  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-text-faint);
}
.no-svccovers__list {
  display: grid;
  gap: .5rem;
  margin: .875rem 0 0;
  padding: 0;
  list-style: none;
}
.no-svccovers__list li {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  padding-top: .5rem;
  border-top: 1px solid var(--no-border);
  font-size: var(--no-fs-sm);
  line-height: 1.45;
  color: var(--no-ink-800);
}
.no-svccovers__list li:first-child { padding-top: 0; border-top: 0; }
.no-svccovers__list svg { flex: none; align-self: flex-start; margin-top: 3px; color: var(--no-primary-action); }
.no-svccovers__title { flex: 1; min-width: 0; font-family: var(--no-font-display); font-weight: 600; }
.no-svccovers__count {
  flex: none;
  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-text-faint);
}

@media (max-width: 900px) {
  .no-svcintro__grid { grid-template-columns: minmax(0, 1fr); }
  .no-svcintro__lead { max-width: none; font-size: var(--no-fs-lg); }
  /* Copy first, photograph after it: the opening sentence has to stay above the
     fold on a phone. */
  .no-svcshot { aspect-ratio: 16 / 11; max-height: 400px; order: 2; }
}

/* -------------------------------------------------------------------------
   Scope: heading rail beside one open panel
   -------------------------------------------------------------------------
   Base state, and the state without JavaScript, is every panel open in
   sequence. The two arrangements below are enhancements on top of it, so a
   crawler and a reader with scripts blocked both get the whole section.
   ---------------------------------------------------------------------- */
.no-svcscope { background: var(--no-bg-soft); }

.no-svcscope__count {
  align-self: end;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  font-weight: 700;
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  color: var(--no-text-faint);
}

.no-scope {
  margin-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-lg);
  overflow: hidden;
  background: var(--no-white);
}
.no-scope__item { min-width: 0; }
.no-scope__head { margin: 0; font: inherit; }

.no-scope__tab {
  display: flex;
  align-items: center;
  gap: .875rem;
  width: 100%;
  padding: 1rem clamp(1rem, .8rem + .6vw, 1.375rem);
  text-align: left;
  color: var(--no-ink-800);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--no-border);
  cursor: pointer;
  transition: background-color var(--no-dur-fast) var(--no-ease),
              color var(--no-dur-fast) var(--no-ease);
}
.no-scope__item:first-child .no-scope__tab { border-top: 0; }
.no-scope__tab:hover { background: var(--no-primary-50); }
.no-scope__tab.is-active { background: var(--no-primary-50); color: var(--no-primary-700); }

.no-scope__no {
  flex: none;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--no-primary-action);
}
.no-scope__label {
  flex: 1;
  min-width: 0;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-base);
  font-weight: 700;
  line-height: 1.35;
}
.no-scope__meta {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: .35rem;
  border-radius: var(--no-r-pill);
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  color: var(--no-text-faint);
  background: var(--no-bg-tint);
}
.no-scope__tab.is-active .no-scope__meta { color: var(--no-white); background: var(--no-primary-action); }
.no-scope__chev { flex: none; color: var(--no-text-faint); transition: transform var(--no-dur) var(--no-ease); }
.no-scope__tab[aria-expanded="true"] .no-scope__chev { transform: rotate(180deg); color: var(--no-primary-action); }

.no-scope__panel {
  padding: 0 clamp(1rem, .8rem + .6vw, 1.375rem) 1.375rem;
  border-top: 1px solid transparent;
}
.no-scope__lead {
  max-width: 78ch;
  margin-bottom: 1.125rem;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
}
.no-scope__items {
  display: grid;
  gap: .75rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.no-scope__item-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  min-width: 0;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
}
.no-scope__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  color: var(--no-primary-action);
  background: var(--no-primary-50);
}
.no-scope__text { min-width: 0; }
.no-scope__text b { color: var(--no-ink-800); }
.no-scope__text b::after { content: ":"; }

/* Two arrangements, both switched on only once JS has taken over the state. */
.no-scope.is-ready .no-scope__panel[hidden] { display: none; }

@media (min-width: 1025px) {
  .no-scope.is-ready {
    display: grid;
    grid-template-columns: minmax(0, .38fr) minmax(0, .62fr);
    grid-template-rows: var(--scope-rows, auto);
    align-items: start;
  }
  /* The pair dissolves so the heading lands in the rail and the panel beside
     it, without the panel ever leaving its heading in the document. */
  .no-scope.is-ready .no-scope__item { display: contents; }
  .no-scope.is-ready .no-scope__head { grid-column: 1; }
  .no-scope.is-ready .no-scope__panel {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    border-top: 0;
    border-left: 1px solid var(--no-border);
  }
  .no-scope.is-ready .no-scope__tab { border-right: 1px solid var(--no-border); }
  .no-scope.is-ready .no-scope__tab.is-active { border-right-color: transparent; }
  .no-scope.is-ready .no-scope__chev { display: none; }
  .no-scope.is-ready .no-scope__items--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .no-scope.is-ready .no-scope__panel { padding-top: .25rem; }
  .no-scope.is-ready .no-scope__tab.is-active { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
   Gateways: split panel (Port Agency only)
   ---------------------------------------------------------------------- */
.no-svcports__panel {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 1.1rem + 1.8vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  background: var(--no-bg-soft);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-lg);
}
.no-svcports__copy { min-width: 0; }
.no-svcports__title {
  margin-top: .875rem;
  font-size: var(--no-fs-2xl);
  line-height: var(--no-lh-snug);
  letter-spacing: var(--no-tr-snug);
}
.no-svcports__lead {
  margin-top: .875rem;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
}

.no-svcports__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--no-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.no-svcport {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .875rem 1rem;
  background: var(--no-white);
  border: 1px solid var(--no-border);
  border-left: 3px solid var(--no-primary-action);
  border-radius: var(--no-r-md);
  box-shadow: var(--no-sh-xs);
}
.no-svcport__ico { flex: none; color: var(--no-primary-action); }
.no-svcport__name {
  min-width: 0;
  font-family: var(--no-font-display);
  font-weight: 700;
  font-size: var(--no-fs-sm);
  line-height: 1.35;
  color: var(--no-ink-800);
}

@media (max-width: 900px) {
  .no-svcports__panel { grid-template-columns: minmax(0, 1fr); }
  .no-svcports__title { font-size: var(--no-fs-xl); }
}
@media (max-width: 480px) {
  .no-svcports__grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   Process rail
   ---------------------------------------------------------------------- */
.no-svcprocess { background: var(--no-grad-deep); position: relative; overflow: hidden; }
.no-svcprocess > * { position: relative; }

.no-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--no-s-5);
  margin: clamp(2rem, 1.6rem + 1.6vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.no-step { position: relative; min-width: 0; padding-top: 3rem; }

/*
 * The connecting line is drawn on the step itself rather than as one long
 * element, so it survives any number of steps and simply stops at the last one.
 */
.no-step::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  right: calc(var(--no-s-5) * -1);
  height: 1px;
  background: linear-gradient(90deg, rgba(111, 207, 255, .38), rgba(111, 207, 255, .12));
}
.no-step:last-child::before { right: 0; background: linear-gradient(90deg, rgba(111, 207, 255, .38), transparent); }

.no-step__dot {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-xs);
  font-weight: 700;
  color: var(--no-accent);
  background: rgba(11, 30, 44, .92);
  border: 1px solid rgba(111, 207, 255, .35);
  box-shadow: 0 0 0 6px rgba(11, 30, 44, .55);
}
.no-step__title { font-size: var(--no-fs-base); line-height: 1.35; color: var(--no-white); }
.no-step__text {
  margin-top: .5rem;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-invert-muted);
}

@media (max-width: 1024px) { .no-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  /* Below 860px the rail turns vertical: every step stays open and readable
     without any horizontal scrolling. */
  .no-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .no-step { padding: 0 0 var(--no-s-6) 3.5rem; }
  .no-step:last-child { padding-bottom: 0; }
  .no-step::before {
    top: 40px;
    bottom: 0;
    left: 19px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(111, 207, 255, .38), rgba(111, 207, 255, .1));
  }
  .no-step:last-child::before { display: none; }
}

/* -------------------------------------------------------------------------
   Why choose us: heading beside horizontal rows
   ---------------------------------------------------------------------- */
.no-svcwhy__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(1.75rem, 1.2rem + 2.4vw, 4rem);
  align-items: start;
}
.no-svcwhy__head { min-width: 0; }
.no-svcwhy__head .no-shead__title { margin-top: 1rem; }
.no-svcwhy__lead {
  margin-top: var(--no-s-4);
  font-size: var(--no-fs-md);
  line-height: var(--no-lh-normal);
  color: var(--no-text-muted);
}
.no-svcwhy__head .no-btn { margin-top: var(--no-s-6); }

.no-svcwhy__rows {
  display: grid;
  gap: var(--no-s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.no-svcwhy__row {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  min-width: 0;
  padding: clamp(1.125rem, .9rem + .7vw, 1.5rem);
  background: var(--no-white);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  box-shadow: var(--no-sh-xs);
  transition: border-color var(--no-dur) var(--no-ease),
              box-shadow var(--no-dur) var(--no-ease);
}
.no-svcwhy__row:hover { border-color: var(--no-primary-300); box-shadow: var(--no-sh-sm); }
.no-svcwhy__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--no-r-sm);
  color: var(--no-primary-action);
  background: var(--no-primary-50);
  border: 1px solid var(--no-primary-100);
}
.no-svcwhy__body { min-width: 0; }
.no-svcwhy__body h3 { font-size: var(--no-fs-md); line-height: 1.35; }
.no-svcwhy__body p {
  margin-top: .5rem;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
}

@media (max-width: 900px) {
  .no-svcwhy__grid { grid-template-columns: minmax(0, 1fr); gap: var(--no-s-8); }
  .no-svcwhy__head .no-btn { display: none; }
}

/* -------------------------------------------------------------------------
   Call to action
   ---------------------------------------------------------------------- */
.no-svccta { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.no-svccta { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.no-svccta__inner { max-width: 820px; margin-inline: auto; text-align: center; }
.no-svccta__inner .no-cta__title { margin-top: .875rem; }
/* .no-cta__answer caps its measure at 60ch but sets no inline margin, so inside
   a centred column the text centred while the block itself stayed hard left.
   Centring the block is what actually squares it under the heading. */
.no-svccta__inner .no-cta__answer,
.no-cta__inner .no-svccta__inner .no-cta__answer {
  margin-inline: auto;
  text-align: center;
}
.no-svccta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--no-s-4);
  margin-top: var(--no-s-8);
}
@media (max-width: 640px) {
  .no-svccta__actions .no-btn { flex: 1 1 100%; }
  .no-svccta__actions .no-btn--lg { padding-inline: 1.25rem; }
}

/* -------------------------------------------------------------------------
   Related services and previous/next
   ---------------------------------------------------------------------- */
.no-svcrel { background: var(--no-bg-soft); }

.no-svcnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--no-s-4);
  margin-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  padding-top: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  border-top: 1px solid var(--no-border);
}
@media (max-width: 720px) { .no-svcnav { grid-template-columns: minmax(0, 1fr); } }

.no-svcnav__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 1.125rem 1.25rem;
  color: var(--no-ink-800);
  background: var(--no-white);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  box-shadow: var(--no-sh-xs);
  transition: transform var(--no-dur, .52s) var(--no-ease-out),
              box-shadow var(--no-dur) var(--no-ease),
              border-color var(--no-dur) var(--no-ease);
}
.no-svcnav__link:hover,
.no-svcnav__link:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--no-sh-md);
  border-color: var(--no-primary-300);
}
.no-svcnav__link--next { grid-column: 2; text-align: right; justify-content: flex-end; }
@media (max-width: 720px) { .no-svcnav__link--next { grid-column: 1; } }

.no-svcnav__text { min-width: 0; }
.no-svcnav__text 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: var(--no-text-muted);
}
.no-svcnav__text b {
  display: block;
  margin-top: .25rem;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-base);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.no-svcnav__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--no-primary-action);
  background: var(--no-primary-50);
  border: 1px solid var(--no-primary-100);
  transition: transform var(--no-dur, .52s) var(--no-ease-out);
}
.no-svcnav__link--prev .no-svcnav__ico { transform: rotate(180deg); }
.no-svcnav__link--prev:hover .no-svcnav__ico { transform: rotate(180deg) translateX(3px); }
.no-svcnav__link--next:hover .no-svcnav__ico { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   Section rhythm on the service pages
   -------------------------------------------------------------------------
   The pages now carry more sections than before, so each one is set slightly
   tighter than the site default. The gap between two sections stays clearly
   readable as a break without adding the length back.
   ---------------------------------------------------------------------- */
.no-main--service .no-section { padding-block: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem); }
.no-main--service .no-section--tight { padding-block: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.no-main--service .no-shead + * { margin-top: 0; }

/* The hero keeps its proportions; only the air above and below it comes in a
   step, which is the same trim applied to every other section on the page. */
.no-phero--service {
  padding-top: calc(var(--no-header-h) + var(--no-topbar-h) + clamp(1.75rem, 1.3rem + 2vw, 3rem));
  padding-bottom: clamp(1.75rem, 1.3rem + 2vw, 3rem);
}
@media (max-width: 1024px) {
  .no-phero--service { padding-top: calc(var(--no-header-h) + clamp(1.75rem, 1.3rem + 2vw, 2.75rem)); }
}

/* Related cards carry a 246px floor so the homepage grid stays even. Here they
   sit beside nothing, so the floor only adds empty card. */
.no-svcrel .no-svc { min-height: 0; padding: var(--no-s-5); }
.no-svcrel .no-svc__ico { width: 52px; height: 52px; }
.no-svcrel .no-svc__ico svg { width: 26px; height: 26px; }
.no-svcrel .no-svc__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.no-svcrel .no-grid { margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

.no-svcwhy__row { padding: 1.125rem clamp(1.125rem, .95rem + .6vw, 1.375rem); }
.no-svcwhy__rows { gap: .875rem; }

/* An in-page link must not land behind the site header and the section bar. */
.no-main--service [id] { scroll-margin-top: calc(var(--no-header-h) + 76px); }
@media (max-width: 1024px) { .no-main--service [id] { scroll-margin-top: calc(var(--no-header-h) + 12px); } }


/* -------------------------------------------------------------------------
   Related services: cards on a desktop, a compact list on a phone
   -------------------------------------------------------------------------
   The shared .no-svc card carries a 246px floor so the homepage grid stays
   even. Stacked on a phone that floor is three-quarters of a screen of mostly
   empty card, so here the same card lays itself out as a row instead. Only
   the geometry changes; the colours, borders and hover state are the card's
   own.
   ---------------------------------------------------------------------- */
@media (max-width: 620px) {
  .no-svcrel .no-svc {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: .5rem 1rem;
    min-height: 0;
    padding: 1rem 1.125rem;
  }
  .no-svcrel .no-svc:hover { transform: none; }
  .no-svcrel .no-svc__top { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .no-svcrel .no-svc__ico { width: 46px; height: 46px; }
  .no-svcrel .no-svc__ico svg { width: 22px; height: 22px; }
  .no-svcrel .no-svc__title { grid-column: 2; margin: 0; }
  .no-svcrel .no-svc__desc {
    grid-column: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .no-svcrel .no-svc__more { display: none; }
}

/* -------------------------------------------------------------------------
   Phone: close the remaining dead space
   -------------------------------------------------------------------------
   A service page now carries nine or ten sections, so the default section
   rhythm alone adds most of a screen of padding on a 390px viewport. These
   are the same tokens, one step tighter.
   ---------------------------------------------------------------------- */
@media (max-width: 620px) {
  .no-main--service .no-section { padding-block: 2.25rem; }
  .no-main--service .no-section--tight { padding-block: 1.75rem; }

  .no-svcintro__actions { margin-top: var(--no-s-6); gap: var(--no-s-4); }
  .no-svcintro__body { margin-top: var(--no-s-4); }
  .no-svcpanel__ico { width: 44px; height: 44px; margin-bottom: var(--no-s-4); }

  .no-steps { gap: 0; }
  .no-step { padding-bottom: var(--no-s-5); }
  .no-step__text { margin-top: .375rem; }

  .no-svcwhy__grid { gap: var(--no-s-6); }
  .no-svcwhy__rows { gap: .75rem; }
  .no-svcwhy__row { gap: .875rem; padding: 1rem 1.125rem; }
  .no-svcwhy__ico { width: 38px; height: 38px; }
  .no-svcwhy__ico svg { width: 19px; height: 19px; }

  .no-scope__tab { padding: .875rem 1rem; }
  .no-scope__panel { padding: 0 1rem 1.125rem; }
}