/* ==========================================================================
   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; }
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.1;  letter-spacing: var(--no-tr-tight); }
h3, .no-h3 { font-size: var(--no-fs-xl); }
h4, .no-h4 { font-size: var(--no-fs-lg); }
h5, .no-h5 { font-size: var(--no-fs-md); }
h6, .no-h6 { font-size: var(--no-fs-base); }

.no-lead {
  font-size: var(--no-fs-md);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
}

.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(2rem, 1.2rem + 2.6vw, 3.75rem);
}
.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); }
}

/* ---------- 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-fast) var(--no-ease),
              box-shadow var(--no-dur) var(--no-ease),
              background-color var(--no-dur) var(--no-ease),
              color var(--no-dur) var(--no-ease),
              border-color var(--no-dur) var(--no-ease);
  text-align: center;
}
.no-btn__ico { transition: transform var(--no-dur) var(--no-ease-out); }
.no-btn:hover .no-btn__ico { transform: translateX(4px); }

/* sheen sweep */
.no-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--no-grad-sheen);
  transform: translateX(-120%);
  transition: transform .7s var(--no-ease-out);
  z-index: -1;
}
.no-btn:hover::after { transform: translateX(120%); }

.no-btn:hover { transform: translateY(-2px); box-shadow: var(--no-sh-md); }
.no-btn:active { transform: translateY(0); }

.no-btn--primary { --btn-bg: var(--no-primary-action); }
.no-btn--primary:hover { --btn-bg: var(--no-primary-600); box-shadow: 0 14px 34px -12px rgba(19,134,179,.7); }

.no-btn--accent { --btn-bg: var(--no-accent); --btn-fg: var(--no-ink-900); }
.no-btn--accent:hover { --btn-bg: #8FDBFF; box-shadow: 0 14px 34px -12px rgba(111,207,255,.75); }

.no-btn--ink { --btn-bg: var(--no-ink-800); }
.no-btn--ink:hover { --btn-bg: var(--no-ink-700); }

.no-btn--outline { --btn-bg: transparent; --btn-fg: var(--no-primary-action); --btn-bd: var(--no-border-strong); }
.no-btn--outline:hover { --btn-bd: var(--no-primary-500); --btn-bg: var(--no-primary-50); }

.no-btn--ghost-invert { --btn-bg: rgba(255,255,255,.06); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.no-btn--ghost-invert:hover { --btn-bg: rgba(255,255,255,.14); --btn-bd: var(--no-accent); }

.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); }
.no-btn--block { width: 100%; }

/* 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); }
.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 ------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--no-ease-out), transform .7s var(--no-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* ---------- 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); }
}