/* ==========================================================================
   NAVAL ORIENTATION: Base: reset, typography, primitives, utilities
   ========================================================================== */

/* ---------- Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--no-header-h) + 16px);
}

body {
  font-family: var(--no-font-body);
  font-size: var(--no-fs-base);
  line-height: var(--no-lh-normal);
  color: var(--no-text);
  background: var(--no-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

/*
 * Photographic images default to centre-centre. Several cards were cropping
 * their subject to one edge because object-position was never set; centre is
 * the only safe default when the art direction is unknown. Logos and
 * certificate scans opt out below: cropping those destroys legibility, so
 * they are contained rather than covered.
 */
img { object-position: center center; }
[class*="__media"] img,
.no-about__frame img,
.no-about__frame--sm img,
.no-post__media img,
.no-core__media img,
.no-cta__bg img,
.no-phero__media img,
.no-hero__media img,
.no-hero__media video {
  object-fit: cover;
  object-position: center center;
}

/* Marks and documents are contained, never cropped. */
.no-marquee__item img,
.no-logos__item img,
.no-brand__img,
.no-fmain__logo {
  object-fit: contain;
  object-position: center center;
}
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--no-primary-action); text-decoration: none; }
svg { flex-shrink: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--no-accent);
  outline-offset: 3px;
  border-radius: var(--no-r-xs);
}

::selection { background: var(--no-accent); color: var(--no-ink-900); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Typography -------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .no-display {
  font-family: var(--no-font-display);
  font-weight: 700;
  line-height: var(--no-lh-snug);
  letter-spacing: var(--no-tr-snug);
  color: var(--no-ink-800);
}

h1, .no-h1 { font-size: var(--no-fs-4xl); line-height: var(--no-lh-tight); letter-spacing: var(--no-tr-tight); }
h2, .no-h2 { font-size: var(--no-fs-3xl); line-height: 1.2;  letter-spacing: var(--no-tr-tight); }
h3, .no-h3 { font-size: var(--no-fs-xl); line-height: 1.32; }
h4, .no-h4 { font-size: var(--no-fs-lg); line-height: 1.38; }
h5, .no-h5 { font-size: var(--no-fs-md); line-height: 1.42; }
h6, .no-h6 { font-size: var(--no-fs-base); line-height: 1.45; }

/* Long headings read better balanced than ragged. */
h1, h2, h3, .no-shead__title { text-wrap: balance; }

.no-lead {
  font-size: var(--no-fs-md);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
  max-width: 62ch;
}
/* Body copy caps its measure so lines never run past comfortable reading. */
.no-prose { max-width: 68ch; }

.no-prose p + p { margin-top: 1em; }
.no-prose { line-height: var(--no-lh-relaxed); color: var(--no-text-muted); }

/* Eyebrow / kicker: the technical "instrument label" of the brand */
.no-kicker {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--no-tr-wider);
  text-transform: uppercase;
  color: var(--no-primary-action);
}
.no-kicker::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  opacity: .75;
}
.no-kicker--center::before { display: none; }
.no-kicker--invert { color: var(--no-accent); }

/* Accent word inside a heading */
.no-accent-text { color: var(--no-primary-action); }
.no-invert .no-accent-text { color: var(--no-accent); }

/* Underlined stroke accent */
.no-stroke-text {
  position: relative;
  display: inline-block;
}
.no-stroke-text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .04em;
  height: .28em;
  background: var(--no-accent);
  opacity: .32;
  z-index: -1;
  border-radius: 2px;
}

/* ---------- Layout primitives ------------------------------------------- */
.no-container {
  width: 100%;
  max-width: var(--no-container);
  margin-inline: auto;
  padding-inline: var(--no-gutter);
}
.no-container--wide { max-width: var(--no-container-wide); }
.no-container--narrow { max-width: 900px; }

.no-section { padding-block: var(--no-section-y); position: relative; }
.no-section--tight { padding-block: var(--no-section-y-tight); }
.no-section--flush-top { padding-top: 0; }
.no-section--soft { background: var(--no-bg-soft); }
.no-section--tint { background: var(--no-bg-tint); }
.no-section--deep { background: var(--no-bg-deep); }

/* Inverted context: everything inside flips to light-on-dark */
.no-invert { color: var(--no-text-invert-muted); }
.no-invert h1, .no-invert h2, .no-invert h3,
.no-invert h4, .no-invert h5, .no-invert h6 { color: var(--no-white); }
.no-invert .no-lead, .no-invert .no-prose { color: var(--no-text-invert-muted); }

/* Section header block */
.no-shead {
  display: flex;
  flex-direction: column;
  gap: var(--no-s-4);
  max-width: 780px;
  margin-bottom: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
}
.no-shead__title { font-size: var(--no-fs-3xl); }
.no-shead--center { text-align: center; margin-inline: auto; align-items: center; }
.no-shead--split {
  max-width: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--no-s-8);
  flex-wrap: wrap;
}
.no-shead--split > * { min-width: 0; }
.no-shead__group { display: flex; flex-direction: column; gap: var(--no-s-4); max-width: 720px; }

/* Grid helpers */
.no-grid { display: grid; gap: var(--no-s-6); }
.no-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.no-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.no-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .no-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .no-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  {
  .no-grid--2, .no-grid--3, .no-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* One or two cards in a three-column track leave dead columns that read as a
   broken layout. Below three the tracks cap their width and centre. */
.no-grid--sparse {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 400px));
  justify-content: center;
}

/*
 * Editor-only note. Rendered only for signed-in users who can edit posts, so a
 * visitor never sees it. It explains an empty or half-filled section instead of
 * the theme quietly inventing content to fill the gap.
 */
.no-editor-note {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: 72ch;
  margin: var(--no-s-8) auto 0;
  padding: 1rem 1.125rem;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
  background: rgba(19, 134, 179, .06);
  border: 1px dashed var(--no-border-strong);
  border-radius: var(--no-r-md);
}
.no-editor-note svg { color: var(--no-primary-action); margin-top: 3px; }
.no-invert .no-editor-note {
  color: var(--no-text-invert-muted);
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .28);
}


/* ---------- Buttons ------------------------------------------------------ */
.no-btn {
  --btn-bg: var(--no-primary-500);
  --btn-fg: #fff;
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .9375rem 1.75rem;
  min-height: 52px;
  font-family: var(--no-font-body);
  font-size: var(--no-fs-sm);
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--no-r-sm);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--no-dur, .52s) var(--no-ease-out),
              box-shadow var(--no-dur, .52s) var(--no-ease),
              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);
  text-align: center;
}
.no-btn__ico { transition: transform var(--no-dur-mid, .72s) var(--no-ease-out); }
.no-btn:hover .no-btn__ico,
.no-btn:focus-visible .no-btn__ico { transform: translateX(3px); }

/*
 * ONE hover system, used by every button on every page.
 *
 * A single background-colour step, a one-pixel lift and a soft shadow. No
 * wipe, no sheen, no colour flash, and the label never moves relative to the
 * button, so nothing jumps and no layout shifts. Focus-visible mirrors hover
 * exactly, so keyboard users get the same affordance.
 */
.no-btn:hover,
.no-btn:focus-visible {
  background: var(--btn-bg-hover, var(--btn-bg));
  border-color: var(--btn-bd-hover, var(--btn-bd));
  color: var(--btn-fg-hover, var(--btn-fg));
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(11, 30, 44, .4);
}
.no-btn:active { transform: translateY(0); transition-duration: var(--no-dur-tap, .12s); }

.no-btn--primary {
  --btn-bg: var(--no-primary-action);
  --btn-bg-hover: var(--no-primary-700);
}
.no-btn--accent {
  --btn-bg: var(--no-accent);
  --btn-fg: var(--no-ink-900);
  --btn-bg-hover: #8AD9FF;
}
.no-btn--ink {
  --btn-bg: var(--no-ink-800);
  --btn-bg-hover: var(--no-ink-700);
}
.no-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--no-primary-action);
  --btn-bd: var(--no-border-strong);
  --btn-bg-hover: var(--no-ink-800);
  --btn-fg-hover: #fff;
  --btn-bd-hover: var(--no-ink-800);
}
.no-btn--ghost-invert {
  --btn-bg: rgba(255, 255, 255, .08);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .3);
  --btn-bg-hover: rgba(255, 255, 255, .18);
  --btn-bd-hover: rgba(255, 255, 255, .62);
  backdrop-filter: blur(8px);
}

.no-btn--sm { min-height: 42px; padding: .625rem 1.125rem; font-size: var(--no-fs-xs); }
.no-btn--lg { min-height: 60px; padding: 1.125rem 2.25rem; font-size: var(--no-fs-base); }
/* At 320-360px the large button's generous side padding is what pushes long
   labels past the viewport edge, so it tightens rather than the type shrinking. */
@media (max-width: 400px) {
  .no-btn--lg { padding-inline: 1.125rem; }
  .no-btn { padding-inline: 1.125rem; }
}
.no-btn--block { width: 100%; }

/*
 * Disabled state: used by the corporate-profile download button while the
 * real PDF has not been uploaded yet. It is deliberately visible rather than
 * hidden so the client can see the asset slot waiting to be connected, but it
 * is inert: no pointer, no hover lift, and assistive tech reads it as
 * unavailable via aria-disabled on the element itself.
 */
.no-btn.is-disabled {
  cursor: not-allowed;
  opacity: .55;
  box-shadow: none;
  border-style: dashed;
}
.no-btn.is-disabled:hover,
.no-btn.is-disabled:focus-visible {
  transform: none;
  box-shadow: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bd);
}
.no-btn.is-disabled .no-btn__ico { transform: none; }

/* Text link with arrow */
.no-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--no-fs-sm);
  font-weight: 650;
  color: var(--no-primary-action);
  letter-spacing: .01em;
  transition: gap var(--no-dur) var(--no-ease-out), color var(--no-dur) var(--no-ease);
}
.no-link:hover { gap: .875rem; color: var(--no-primary-700); }
/* A standalone link is a target, not a word in a sentence: 24px is the
   smallest square anyone should be asked to hit with a thumb. */
.no-link { min-height: 24px; }
.no-invert .no-link { color: var(--no-accent); }
.no-invert .no-link:hover { color: #fff; }

/* ---------- Chips / badges ---------------------------------------------- */
.no-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 600;
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  border-radius: var(--no-r-pill);
  background: var(--no-primary-50);
  color: var(--no-primary-700);
  border: 1px solid var(--no-primary-100);
}
.no-chip--invert {
  background: rgba(111,207,255,.12);
  color: var(--no-accent);
  border-color: rgba(111,207,255,.26);
}

/* Live 24/7 pulse dot */
.no-pulse {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #34D399;
  flex: none;
}
.no-pulse::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid #34D399;
  animation: noPulse 2s var(--no-ease-out) infinite;
}
@keyframes noPulse {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Cards -------------------------------------------------------- */
.no-card {
  position: relative;
  background: var(--no-white);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-lg);
  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-card:hover { transform: translateY(-6px); box-shadow: var(--no-sh-lg); border-color: var(--no-primary-200); }

/* ---------- Decorative ---------------------------------------------------- */
.no-hairline { height: 1px; background: var(--no-grad-hairline); opacity: .5; border: 0; }

/* Sonar / nautical grid backdrop */
.no-gridlines {
  position: absolute; inset: 0;
  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: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}

/* Wave divider */
.no-wave { position: absolute; left: 0; right: 0; line-height: 0; pointer-events: none; }
.no-wave--bottom { bottom: -1px; }
.no-wave--top { top: -1px; transform: rotate(180deg); }
.no-wave svg { width: 100%; height: clamp(40px, 5vw, 84px); display: block; }

/* ---------- Accessibility helpers ---------------------------------------- */
.no-visually-hidden, .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.no-skip-link {
  position: absolute;
  top: -100px; left: 16px;
  z-index: var(--no-z-modal);
  padding: .75rem 1.25rem;
  background: var(--no-ink-800);
  color: #fff;
  border-radius: 0 0 var(--no-r-sm) var(--no-r-sm);
  font-weight: 600;
  transition: top var(--no-dur) var(--no-ease);
}
.no-skip-link:focus { top: 0; }

/* ---------- Scroll reveal -------------------------------------------------
   One calm system used site-wide. The distance is short and the curve is a
   long ease-out, so movement reads as settling into place rather than sliding
   in. Nothing bounces, nothing scales, nothing rotates.

   Variants:
     [data-reveal]          fade + short rise (default)
     [data-reveal="left"]   fade + short drift from the left
     [data-reveal="right"]  fade + short drift from the right
     [data-reveal="mask"]   image reveal: the frame's children wipe open
     [data-reveal="text"]   heading reveal: fade + a shorter rise
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-rise, 26px), 0);
  transition:
    opacity var(--reveal-dur, 1.05s) var(--no-ease-out),
    transform var(--reveal-dur, 1.05s) var(--no-ease-out),
    clip-path calc(var(--reveal-dur, 1.05s) + .15s) var(--no-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal="left"]  { transform: translate3d(-18px, 0, 0); }
[data-reveal="right"] { transform: translate3d(18px, 0, 0); }

/* Image reveal: the frame wipes open while the picture settles from a slight
   over-scale. Two motions at different speeds, which is what makes it feel
   expensive rather than mechanical.
   -------------------------------------------------------------------------
   The wipe is applied to the CHILDREN, never to the element itself, and that
   is not a style choice. An element clipped to zero area by its own clip-path
   reports intersectionRatio 0 to IntersectionObserver, so a reveal that clips
   the observed element deadlocks: it stays clipped because it never fires, and
   never fires because it is clipped. Keeping the frame unclipped leaves it
   measurable; the picture inside it is what wipes open. */
[data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: none;
}
[data-reveal="mask"] img,
[data-reveal="mask"] > * {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.08);
  transition:
    clip-path var(--reveal-wipe, 1.2s) var(--no-ease-out),
    transform var(--reveal-settle, 2s) var(--no-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="mask"].is-visible img,
[data-reveal="mask"].is-visible > * {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* Heading reveal: rises into place, no letter-by-letter theatrics.
   -------------------------------------------------------------------------
   This used to be a clip wipe, and that was a bug rather than a style. The
   rule below is the same one the mask variant carries: an element clipped to
   zero area by its own clip-path reports intersectionRatio 0, so it never
   fires and therefore never unclips. It went unnoticed because a heading
   inside a .no-shead is skipped by the auto-enroller (its ancestor already
   reveals), and only headings enrolled on their own — the ones inside an
   article body — were left permanently invisible.

   A heading has no wrapper element to move the clip onto, the way an image
   frame does, so it reveals on opacity and transform instead. For a single
   line of type the difference is barely perceptible, and it cannot deadlock.

   The invariant: no clip-path may ever be the pre-reveal state of an element
   the observer is watching. Only children of [data-reveal="mask"] are clipped. */
[data-reveal="text"] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  clip-path: none;
  transition:
    opacity var(--no-dur-cine, 1.6s) var(--no-ease),
    transform var(--no-dur-cine, 1.6s) var(--no-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="text"].is-visible { opacity: 1; transform: none; }

/* Children of a group stagger automatically: the delay is set in JS so the
   markup stays clean. */
[data-reveal-group] > * { transition-delay: var(--reveal-delay, 0ms); }

/* Depth: a section's own children can travel a little further than the block
   around them, which is what stops a long page reading as one flat fade. */
[data-reveal="rise"]  { --reveal-rise: 40px; --reveal-dur: 1.25s; }
[data-reveal="settle"]{ --reveal-rise: 14px; --reveal-dur: .9s; }

/*
 * Parallax.
 *
 * A slow counter-drift on the large photographs, driven by main.js writing a
 * single custom property per element. Transform only, so it composites on the
 * GPU and never triggers layout; the element keeps whatever object-fit and
 * border radius it already had.
 */
[data-parallax] > img,
[data-parallax] > video,
img[data-parallax] {
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.12);
  will-change: transform;
}

.no-no-js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
.no-no-js [data-reveal="mask"] img,
.no-no-js [data-reveal="mask"] > * { clip-path: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal="mask"] img,
  [data-reveal="mask"] > * { transform: none !important; clip-path: none !important; }
  [data-parallax] > img,
  [data-parallax] > video,
  img[data-parallax] { transform: none !important; }
}

/* ---------- Utilities ----------------------------------------------------- */
.no-mt-0 { margin-top: 0 !important; }
.no-flex { display: flex; }
.no-wrap { flex-wrap: wrap; }
.no-items-center { align-items: center; }
.no-justify-between { justify-content: space-between; }
.no-gap-2 { gap: var(--no-s-2); }
.no-gap-3 { gap: var(--no-s-3); }
.no-gap-4 { gap: var(--no-s-4); }
.no-gap-6 { gap: var(--no-s-6); }
.no-text-center { text-align: center; }
.no-relative { position: relative; }
.no-hide-mobile { }
@media (max-width: 768px) { .no-hide-mobile { display: none !important; } }
@media (min-width: 769px) { .no-only-mobile { display: none !important; } }

/* Custom scrollbar */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--no-bg-soft); }
  ::-webkit-scrollbar-thumb { background: var(--no-ink-200); border-radius: 99px; border: 3px solid var(--no-bg-soft); }
  ::-webkit-scrollbar-thumb:hover { background: var(--no-primary-400); }
}

/*
 * Search form. Used by the not-found page and, from Phase 4, the news archive.
 * Kept in the base layer because both need it and neither should pull in a
 * page-level stylesheet just for one control.
 */
.no-searchform {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  max-width: 560px;
}
.no-searchform input[type="search"] {
  flex: 1 1 240px;
  min-width: 0;
  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), background-color var(--no-dur) var(--no-ease);
}
.no-searchform input[type="search"]:focus {
  outline: none;
  background: var(--no-white);
  border-color: var(--no-primary-action);
}
@media (max-width: 480px) {
  .no-searchform input[type="search"] { flex: 1 1 100%; }
  .no-searchform .no-btn { width: 100%; }
}

/* =========================================================================
   COMPACT CTA BAND
   One row on a desktop, stacked on a phone. Used at the foot of the archive
   pages, where the full inquiry form was repeating the Contact page.
   ========================================================================= */
.no-ctaband { background: var(--no-grad-deep); }
.no-ctaband__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--no-s-5) var(--no-s-8);
}
.no-ctaband__copy { min-width: 0; flex: 1 1 420px; }
.no-ctaband__title {
  font-size: var(--no-fs-2xl);
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
}
/* The closing question a caller can pass in, set above the action button. */
.no-ctaband__ask {
  margin-top: .875rem;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-md);
  font-weight: 600;
  line-height: 1.4;
  color: var(--no-accent);
}
.no-ctaband__text {
  margin-top: .5rem;
  max-width: 62ch;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-invert-muted);
}
.no-ctaband__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--no-s-4);
  flex: none;
}
@media (max-width: 640px) {
  .no-ctaband__actions { width: 100%; }
  .no-ctaband__actions .no-btn { flex: 1 1 100%; }
}