@charset "UTF-8";
/*! Netlogic Computer Consulting - site chrome: tokens, header, navigation, footer, back-to-top. */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* Brand */
  --nl-navy-900:#04264A;
  --nl-navy-800:#062F5C;
  --nl-blue-900:#084A8C;
  --nl-blue-700:#0A5FA8;
  --nl-blue-500:#328ED2;
  --nl-blue-300:#88B7E0;
  --nl-blue-100:#DCEAF7;
  --nl-blue-50:#F1F7FC;
  --nl-green:#7EC454;
  --nl-green-dark:#5AA232;
  /* Green dark enough for small text on white (6.6:1). --nl-green-dark is 3.2:1
     and must not be used for type. */
  --nl-green-text:#35691C;
  --nl-green-ink:#173D06;

  /* Neutrals, biased slightly toward the brand blue */
  --nl-ink:#0E1B28;
  --nl-ink-2:#42566A;
  --nl-ink-3:#5A6B7E;  /* 5.47:1 on white; #6B8095 was 4.08:1, below AA */
  --nl-line:#DBE4EE;
  --nl-line-soft:#EAF0F6;
  --nl-surface:#FFFFFF;
  --nl-ground:#F6F9FC;

  /* Type */
  --nl-font-display:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --nl-font-body:"Lato",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* Metrics */
  --nl-shell:1200px;
  --nl-radius-sm:8px;
  --nl-radius:14px;
  --nl-radius-lg:22px;
  --nl-shadow:0 1px 2px rgba(8,74,140,.06), 0 8px 28px rgba(8,74,140,.07);
  --nl-shadow-lg:0 18px 48px rgba(4,38,74,.16);

  /* Elevation ladder. --nl-shadow reached a resting element in only two places
     site wide, so eight components shared one identical rest surface: white,
     1px --nl-line, 14px radius, no shadow. A white card separates from the tint
     ground at 1.057:1, which is why the page reads flat. elev-1 is deliberately
     under 6px blur and 5 percent alpha; a four-column grid of anything heavier
     turns to grey mud. */
  --nl-elev-1:0 1px 1px rgba(4,38,74,.04), 0 2px 6px rgba(4,38,74,.045);
  --nl-elev-2:var(--nl-shadow);
  --nl-elev-3:var(--nl-shadow-lg);
  --nl-header-h:84px;

  /* Spacing. A vertical band consumes viewport HEIGHT, but the old value
     answered only to viewport WIDTH, so it pinned at its 104px maximum on every
     desktop from 1387px up and made the band 20 to 27 percent of page height.
     min() nested inside clamp() makes it answer to whichever is scarcer. */
  --nl-band:clamp(44px, min(6.2vw, 9vh), 84px);
  --nl-band-head:clamp(26px, min(3.4vw, 4.6vh), 42px);
  --nl-seam:clamp(30px, 3.2vw, 46px);
  --nl-seam-edge:clamp(40px, 4vw, 56px);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body.nl-site,
body.nl-site *,
body.nl-site *::before,
body.nl-site *::after { box-sizing:border-box; }

body.nl-site {
  margin:0;
  background:var(--nl-surface);
  color:var(--nl-ink);
  font-family:var(--nl-font-body);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.nl-shell {
  width:100%;
  max-width:var(--nl-shell);
  margin-inline:auto;
  padding-inline:24px;
  box-sizing:border-box;
}

.nl-sr {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Off-screen until focused. Clipping rather than a negative offset keeps the
   link out of the document's scroll width. */
.nl-skip {
  position:absolute; top:0; left:0; z-index:200;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  background:var(--nl-blue-900); color:#fff;
  padding:12px 18px; border-radius:0 0 var(--nl-radius-sm) 0;
  font-family:var(--nl-font-display); font-weight:700; text-decoration:none;
}
.nl-skip:focus {
  width:auto; height:auto; overflow:visible;
  clip:auto; clip-path:none;
}

/* Two-tone focus ring. Brand green is only 2.12:1 on white, below the 3:1 floor
   in WCAG 1.4.11, and no single brand token clears 3:1 against both #FFFFFF and
   the navy bands. The navy outline carries contrast on light grounds; the white
   halo carries it on dark ones. */
:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(summary):focus-visible {
  outline:3px solid var(--nl-blue-900);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,255,255,.95);
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.nl-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--nl-font-display); font-weight:700; font-size:1rem;
  line-height:1.2; text-decoration:none; cursor:pointer;
  padding:15px 28px; border-radius:999px; border:2px solid transparent;
  transition:transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.nl-btn--primary { background:var(--nl-green); color:var(--nl-green-ink); }
.nl-btn--primary:hover { background:#8FD265; transform:translateY(-2px); }
.nl-btn--solid { background:var(--nl-blue-900); color:#fff; }
.nl-btn--solid:hover { background:var(--nl-blue-700); transform:translateY(-2px); }
.nl-btn--ghost { border-color:rgba(255,255,255,.45); color:#fff; }
.nl-btn--ghost:hover { border-color:#fff; background:rgba(255,255,255,.1); }
.nl-btn--outline { border-color:var(--nl-blue-900); color:var(--nl-blue-900); }
.nl-btn--outline:hover { background:var(--nl-blue-900); color:#fff; }

@media (prefers-reduced-motion: reduce) {
  .nl-btn, .nl-btn:hover { transition:none; transform:none; }
}

/* ==========================================================================
   4. Top bar
   ========================================================================== */

.nl-topbar {
  background:var(--nl-navy-900);
  color:var(--nl-blue-300);
  font-size:.86rem;
}
.nl-topbar__inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-block:9px;
}
.nl-topbar__note { margin:0; }
.nl-topbar__contact { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.nl-topbar a { color:#fff; text-decoration:none; font-weight:700; }
.nl-topbar a:hover { color:var(--nl-green); }

@media (max-width:900px) {
  .nl-topbar__note { display:none; }
  .nl-topbar__inner { justify-content:center; }
}

/* ==========================================================================
   5. Header and navigation
   ========================================================================== */

.nl-header {
  position:sticky; top:0; z-index:100;
  background:var(--nl-surface);
  border-bottom:1px solid var(--nl-line);
}
.nl-header--stuck { box-shadow:0 6px 22px rgba(4,38,74,.09); }

.nl-header__inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:var(--nl-header-h);
}

.nl-brand { display:inline-flex; align-items:center; flex-shrink:0; }
.nl-brand img { display:block; width:auto; height:52px; }

.nl-nav__list {
  display:flex; align-items:center; gap:4px;
  margin:0; padding:0; list-style:none;
}
.nl-nav__item { position:relative; }
.nl-nav__item > a {
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 14px; border-radius:var(--nl-radius-sm);
  font-family:var(--nl-font-display); font-weight:700; font-size:.95rem;
  color:var(--nl-ink); text-decoration:none;
}
.nl-nav__item > a:hover { color:var(--nl-blue-900); background:var(--nl-blue-50); }
.nl-nav__cta {
  background:var(--nl-green); color:var(--nl-green-ink) !important;
  padding:13px 22px !important; border-radius:999px !important; margin-left:10px;
}
.nl-nav__cta:hover { background:#8FD265 !important; }

/* Desktop dropdowns */
.nl-has-sub > a::after {
  content:""; width:7px; height:7px; margin-top:-3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); opacity:.6;
}
.nl-subtoggle { display:none; }

.nl-sub {
  position:absolute; top:calc(100% + 8px); left:0; z-index:110;
  min-width:290px; padding:10px;
  background:var(--nl-surface);
  border:1px solid var(--nl-line);
  border-radius:var(--nl-radius);
  box-shadow:var(--nl-shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.nl-has-sub:hover > .nl-sub,
.nl-has-sub:focus-within > .nl-sub {
  opacity:1; visibility:visible; transform:translateY(0);
}
.nl-sub__list { margin:0; padding:0; list-style:none; }
.nl-sub__list a {
  display:block; padding:9px 12px; border-radius:var(--nl-radius-sm);
  font-size:.93rem; font-weight:700; color:var(--nl-ink-2); text-decoration:none;
  font-family:var(--nl-font-display);
}
.nl-sub__list a:hover { background:var(--nl-blue-50); color:var(--nl-blue-900); }

/* Mobile toggle */
.nl-navtoggle {
  display:none; align-items:center; gap:10px;
  background:var(--nl-blue-900); color:#fff; border:0; cursor:pointer;
  padding:11px 18px; border-radius:999px;
  font-family:var(--nl-font-display); font-weight:700; font-size:.9rem;
}
.nl-navtoggle__bars, .nl-navtoggle__bars::before, .nl-navtoggle__bars::after {
  display:block; width:18px; height:2px; background:#fff; border-radius:2px;
}
.nl-navtoggle__bars { position:relative; }
.nl-navtoggle__bars::before, .nl-navtoggle__bars::after { content:""; position:absolute; left:0; }
.nl-navtoggle__bars::before { top:-6px; }
.nl-navtoggle__bars::after { top:6px; }

@media (max-width:1080px) {
  .nl-navtoggle { display:inline-flex; }
  .nl-nav {
    position:absolute; top:100%; left:0; right:0;
    background:var(--nl-surface);
    border-bottom:1px solid var(--nl-line);
    box-shadow:var(--nl-shadow-lg);
    max-height:0; overflow:hidden;
    transition:max-height .28s ease;
  }
  .nl-nav.is-open { max-height:min(78vh, 900px); overflow-y:auto; }
  .nl-nav__list {
    flex-direction:column; align-items:stretch; gap:0;
    padding:10px 24px 26px;
    max-width:var(--nl-shell); margin-inline:auto;
  }
  .nl-nav__item { border-bottom:1px solid var(--nl-line-soft); }
  .nl-nav__item > a { padding:15px 4px; font-size:1.02rem; }
  .nl-nav__cta { margin:18px 0 0; justify-content:center; }
  .nl-has-sub > a::after { display:none; }

  .nl-subtoggle {
    display:block; position:absolute; top:8px; right:0;
    width:44px; height:44px; background:transparent; border:0; cursor:pointer;
  }
  .nl-subtoggle::before, .nl-subtoggle::after {
    content:""; position:absolute; left:50%; top:50%;
    width:13px; height:2px; margin-left:-6.5px; background:var(--nl-ink-2); border-radius:2px;
    transition:transform .2s ease;
  }
  .nl-subtoggle::after { transform:rotate(90deg); }
  .nl-subtoggle[aria-expanded="true"]::after { transform:rotate(0deg); }

  .nl-sub {
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; padding:0 0 12px; border:0; box-shadow:none; border-radius:0;
    display:none;
  }
  .nl-sub.is-open { display:block; }
  .nl-sub__list a { padding:10px 14px; color:var(--nl-ink-2); }
}

@media (prefers-reduced-motion: reduce) {
  .nl-nav, .nl-sub, .nl-subtoggle::before, .nl-subtoggle::after { transition:none; }
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.nl-footer {
  background:var(--nl-navy-900);
  color:var(--nl-blue-300);
  padding-top:64px;
  font-size:.95rem;
}
.nl-footer__grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.15fr;
  gap:40px;
  padding-bottom:52px;
}
.nl-footer__brand img { display:block; width:auto; height:56px; margin-bottom:18px; }
.nl-footer__blurb { margin:0 0 18px; max-width:38ch; }
.nl-footer__rating { margin:0; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.nl-stars { color:var(--nl-green); letter-spacing:2px; }
.nl-footer__rating a { color:#fff; font-weight:700; }

.nl-footer__h {
  margin:0 0 16px;
  font-family:var(--nl-font-display); font-size:.78rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#fff;
}
.nl-footer__col ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.nl-footer a { color:var(--nl-blue-300); text-decoration:none; }
.nl-footer a:hover { color:var(--nl-green); text-decoration:underline; }

.nl-address { display:flex; flex-direction:column; gap:5px; font-style:normal; margin-bottom:18px; }
.nl-footer__hours { margin:0 0 18px; }
.nl-footer__hours strong { color:#fff; }
.nl-social { display:flex !important; flex-direction:row !important; gap:16px !important; margin:0; padding:0; list-style:none; }

.nl-footer__legal {
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-block:22px;
  border-top:1px solid rgba(136,183,224,.22);
  font-size:.88rem;
}
.nl-footer__legal p { margin:0; }
.nl-footer__legal ul { display:flex; gap:22px; margin:0; padding:0; list-style:none; flex-wrap:wrap; }

@media (max-width:960px) {
  .nl-footer__grid { grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:560px) {
  .nl-footer__grid { grid-template-columns:1fr; }
  .nl-footer__legal { flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   7. Back to top
   ========================================================================== */

.nl-totop {
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:48px; height:48px; border-radius:50%;
  border:0; cursor:pointer;
  background:var(--nl-blue-900); color:#fff; font-size:1.2rem;
  box-shadow:var(--nl-shadow-lg);
}
.nl-totop:hover { background:var(--nl-blue-700); }
.nl-totop[hidden] { display:none; }

/* ==========================================================================
   8. Print
   ========================================================================== */

@media print {
  .nl-topbar, .nl-header, .nl-totop, .nl-navtoggle { display:none !important; }
  body.nl-site { font-size:11pt; color:#000; }
  .nl-footer { background:none; color:#000; padding-top:20px; }
}