/* =========================================================================
   site.css - the shared chassis for the five Nexsec pages that carry a navbar.

   Loaded by index.html, cybersecurity/index.html, 404.html, privacy-policy.html
   and terms-and-conditions.html. NOT by maintenance.html: that page renders while
   the site is down, so an extra network dependency is a liability there, and it
   shares only one rule anyway.

   Extracted 2026-08-28 (review findings U1/U2/U3). Every rule here previously
   existed as a byte-identical copy in all five pages - 2,212 duplicated CSS lines
   across the site - and that duplication had already produced four separate bugs:
   a stray brace propagated to four files, a button font fix applied to two of
   three places, a nav CTA weight that drifted on one page, and a mobile menu
   hand-ported five times.

   WHAT BELONGS HERE: only rules that all five pages genuinely shared, verified
   identical before extraction. A rule one page lacks stays inline on the pages
   that have it - `button {}` (index only) and `html { scroll-behavior }`
   (index + cybersecurity only) are deliberately NOT here for that reason.
   Tokens are the exception: values were verified conflict-free across pages, and
   an unused token costs nothing, so :root is the union.

   PATHS: relative url() resolves against THIS FILE, so `images/x.jpg` means
   assets/images/x.jpg on every page whatever its depth. The three per-page
   variants ('', '../', '/') collapse to one here. Do not add a prefix.

   ORDER: loaded BEFORE each page's inline <style>, so a page can still override
   anything here at equal specificity - the same cascade position these rules had
   when they sat at the top of each page's own stylesheet.
   ========================================================================= */

:root {
  --white: #FFFFFF;
  --mist: #FFFFFF;
  --ink: #0A1633;
  --slate: #51607A;
  /* Raised from #8B97AD (2.95:1 on white) to clear WCAG AA - ADR-027.
     12 of the 13 rules that use this sit on white and now measure 4.64:1.
     The exception is .hero-footprint span, which sits on the hero's ice
     gradient and still falls short at 4.00:1 - logged, not changed here. */
  --faint: #68758F;
  --line: #D5EBF3;
  --blue: #1F3A7D;
  --blue-deep: #142A5C;
  --blue-sky: #04C6C8;
  --blue-pale: #DFF7FF;
  /* Status green - verification/trust content ONLY. Never a button, link or
  any interactive element: it must never compete with the Quantum Blue CTA. */
  --ok-bg: #E1F5EE;
  --ok-ink: #085041;
  /* Status pair for form send-failure only - ADR-008 colour decision
  2026-08-28, the second sanctioned exception to one-accent-family after
  --ok-bg/--ok-ink. Never use these anywhere but .enq-alert. */
  --warn-bg: #FBEAEB;
  --warn-ink: #9E1C26;
  --font-display: 'Raleway', sans-serif;
  --font-body: 'Manrope', sans-serif;
  /* every numeral on the Nexsec pages - see BRANDING_GUIDELINES THE RULES #4 */
  --font-num: 'Inter', var(--font-display), sans-serif;
  /* the sticky nav's height - constant at every breakpoint. The hero box is
  pulled up by exactly this so the nav floats inside it, as in the reference. */
  --nav-h: 45px;
  /* Artwork + bevel shared by the solid-blue buttons, matching
  cybersecurity/index.html. Declared once so the stack cannot drift.
  The outer shadow is the hero's three-layer falloff scaled to button size. */
  /* ROOT-RELATIVE ON PURPOSE. A url() inside a custom property is NOT resolved
     against this stylesheet - custom properties substitute as tokens at use time,
     so the URL resolves against the DOCUMENT that uses the variable. A path
     relative to this file therefore breaks: "images/btn.jpg" became /images/btn.jpg
     on the root pages and /cybersecurity/images/btn.jpg on the nested one. Only a
     root-relative path is correct for every page at once. (Normal rules further
     down this file DO resolve against the stylesheet and use "images/...".) */
  --btn-art: url("/assets/images/btn.jpg") center center / cover no-repeat;
  --btn-bevel: inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 2px 1px -1px rgba(255, 255, 255, .65),
    inset 0 8px 14px -10px rgba(255, 255, 255, .35),
    inset 0 -2px 1px -1px rgba(10, 22, 51, .45),
    inset 0 -10px 14px -12px rgba(10, 22, 51, .55),
    0 1px 3px rgba(10, 22, 51, .10),
    0 4px 10px rgba(10, 22, 51, .14),
    0 10px 22px rgba(10, 22, 51, .18);
  --font-slab: 'Roboto Slab', serif;
  --font-nav: 'Ranade', sans-serif;
  /* Decorative gradient stops only - NOT part of the one-accent-family UI
  palette, and never for text, borders or interactive states. These are
  the ice tints inside the glass/wallpaper gradients, numbered light to
  deep. See BRANDING_GUIDELINES 'Decorative gradient tokens' and ADR-009. */
  --blue-glow-2: #F2FCFE;
  --blue-glow-3: #EFFBFE;
  --blue-glow-6: #C4EBF6;
  --blue-glow-7: #BCE9F6;
  /* Decorative gradient stops only - the dark grounds under the domain cards
  and the pinned slides. Deeper than --ink, which is why they are not it. */
  --navy-1: #111B33;
  --navy-2: #0A1024;
  /* Decorative gradient stops only - NOT part of the one-accent-family UI
  palette, and never for text, borders or interactive states. These are
  the ice tints inside the glass/wallpaper gradients, numbered light to
  deep. See BRANDING_GUIDELINES 'Decorative gradient tokens' and ADR-009. */
  --blue-glow-1: #F4FBFE;
  --blue-glow-4: #E6F1F7;
  --blue-glow-5: #DFEBF3;
}

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

a {
  color: inherit;
  text-decoration: none
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px
}

.numeral {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums
}

/* ---------------------------------------------------------------------
   NAVBAR - shared by all five nav-bearing pages.

   The nav CTA is deliberately NOT here. index/404/privacy/terms style it
   as .nav-cta; cybersecurity styles the same button as `nav .btn-flat`.
   Two selectors for one component - unifying them is a markup change, not
   an extraction, so each page keeps its own for now. Worth doing next time
   the nav is touched; until then a change to one must be made twice.
   --------------------------------------------------------------------- */

nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Reference-matched bar (2026-08-26): the CTA is centred in the band with
     equal space above and below. --nav-h must track the total height. */
  /* full-bleed row (owner request 2026-08-28): the bar spans the viewport and
     its own padding is the only inset, so brand and CTA sit close to the two
     corners. Both pages use the identical clamp so the x positions still match
     across them. It now runs wider than .hero-stage (1320), so the row
     deliberately overhangs the rounded box below. */
  padding: 9px clamp(18px, 2.4vw, 36px)
}

.nav-inner {
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem
}

nav .brand {
  margin-right: auto;
  white-space: nowrap;
  font-family: var(--font-display)
}

.brand-mark {
  width: 24px;
  height: 24px;
  flex: none;
  /* 72px source for a 24px box: exactly 1:1 at DPR 3, the highest density in
     common use. The 104px nexsec-mark.png is NOT interchangeable here - it is
     still the apple-touch-icon on all six pages, and maintenance.html draws it
     in a 52px box, where 104 is its own DPR-2 size. ADR-029. */
  background: url("images/nexsec-mark-72.png") center center / contain no-repeat
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 38px);
  /* links and CTA read as one group hard against the right edge; the gap before
     the CTA is a little wider than the gap between links */
  margin-right: clamp(24px, 3vw, 44px);
}

.nav-links a {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-transform: uppercase;
  font-family: var(--font-nav);
  font-size: 0.66rem;
  color: var(--slate);
  font-weight: 400;
  white-space: nowrap;
  transition: color .2s ease, transform .2s ease;
}

.nav-links a::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none
}

.nav-links a::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transition: transform .24s cubic-bezier(.3, .7, .4, 1)
}

.nav-links a:hover {
  color: var(--ink);
  font-weight: 700;
  transform: scale(1.08)
}

.nav-toggle {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 30px;
  padding: 0 5px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.6px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .24s ease, opacity .18s ease
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.6px) rotate(45deg)
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.6px) rotate(-45deg)
}

.nav-links a.active::before {
  transform: scaleX(1)
}

.nav-links a.active {
  color: var(--ink);
  font-weight: 700
}

@media (prefers-reduced-motion:reduce) {

  .nav-links a,
  .nav-links a::before {
    transition: none
  }

  .nav-links a:hover {
    transform: none
  }
}

@media (prefers-reduced-motion:reduce) {
  .nav-toggle span {
    transition: none
  }
}

@media (max-width:900px) {
  nav .brand {
    font-size: 0.82rem;
    gap: 7px
  }

  .nav-links {
    gap: 18px;
    margin-right: 20px
  }

  .nav-links a {
    font-size: 0.62rem
  }
}

@media (max-width:700px) {
  .nav-toggle {
    display: inline-flex
  }

  /* nav is position:sticky, which is a positioned ancestor, so the panel
     hangs off the bar itself */
  .nav-links {
    display: flex;
    position: absolute;
    top: calc(100% + 2px);
    left: clamp(18px, 2.4vw, 36px);
    right: clamp(18px, 2.4vw, 36px);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-right: 0;
    padding: 12px;
    border-radius: 18px;
    background: var(--white);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .9),
      0 1px 2px rgba(10, 22, 51, .06),
      0 12px 30px rgba(10, 22, 51, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s
  }

  /* stacked rows: left-aligned, tap-sized, and the current page reads as a
     filled chip because a full-width underline would look like a divider */
  /* The stacked rows were 28px tall with 0.7rem type - under the 44px tap target
     touch guidance asks for, and cramped to read. Owner asked for a larger panel;
     this is where the size comes from.

     `nav .nav-links a`, not `.nav-links a`: index.html and cybersecurity/index.html
     each carry an inline `.nav-links a{padding:5px 2px}` in their <head> - the
     desktop 24px tap-target fix. Same specificity as this rule and later in the
     cascade, so a plain `.nav-links a` here loses and the padding silently stays
     at 5px. The extra element selector wins it back without touching either page. */
  nav .nav-links a {
    align-items: flex-start;
    padding: 15px 16px;
    border-radius: 12px;
    font-size: 0.82rem
  }

  .nav-links a::before {
    display: none
  }

  .nav-links a:hover {
    transform: none;
    background: var(--blue-pale)
  }

  .nav-links a.active {
    background: var(--blue-pale)
  }

  @media (prefers-reduced-motion:reduce) {
    .nav-links {
      transition: none
    }
  }
}

/* ---------------------------------------------------------------------
   FOOTER - the Liquid Glass card, shared by all five nav-bearing pages.
   Three link columns (Solutions / Company / Legal); the Legal column was
   added 2026-08-28 with the utility pages. Below 560px the columns become
   a 2-column grid so the third is not clipped.
   --------------------------------------------------------------------- */

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 340px
}

.footer-cols {
  display: flex;
  gap: 48px
}

.footer-col h4 {
  font-family: var(--font-slab);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px 12px;
  font-weight: 400
}

.footer-bottom a {
  display: inline-block;
  padding: 3px 0
}

.footer-bottom a:hover {
  color: var(--blue-deep)
}

@media (max-width:900px) {
  .footer-top {
    flex-direction: column;
    gap: 36px
  }

  .footer-glass {
    padding: 32px 30px 26px;
    gap: 24px
  }
}

.footer-col h2 {
  font-family: var(--font-slab);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px 12px;
  font-weight: 400
}

.footer-col h3 {
  font-family: var(--font-slab);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px 12px;
  font-weight: 400
}