/* Simply Quality Consulting — site stylesheet
 * Design tokens consolidated from the SimplyQuality design system
 * (navy + check-green brand, Nunito / Nunito Sans / IBM Plex Mono).
 */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,600;1,700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,400;1,6..12,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Fonts ---- */
  --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Brand core ---- */
  --navy-950: #061633;
  --navy-900: #0A2148;
  --navy-800: #0D2B58;
  --navy-700: #143A6F;
  --navy-600: #1D4C8A;
  --navy-500: #2A61A6;
  --navy-400: #4E80C2;
  --navy-300: #8AABD8;
  --navy-200: #C2D5EC;
  --navy-100: #E3ECF7;
  --navy-50:  #F1F6FC;

  --green-700: #2F7A3E;
  --green-600: #3E9150;
  --green-500: #5BAA5E;
  --green-400: #7DBE80;
  --green-300: #A6D4A8;
  --green-200: #CFE8D0;
  --green-100: #E8F4E9;
  --green-50:  #F2F9F3;

  /* ---- Cool slate neutrals ---- */
  --slate-950: #0B1220;
  --slate-900: #141C2B;
  --slate-800: #20293A;
  --slate-700: #313C50;
  --slate-600: #4B5567;
  --slate-500: #6B7585;
  --slate-400: #9AA3B0;
  --slate-300: #C2C9D4;
  --slate-200: #DEE3EB;
  --slate-100: #EDF0F5;
  --slate-50:  #F6F8FB;

  /* ---- Semantic states ---- */
  --success: #3E9150;
  --success-bg: var(--green-100);
  --success-border: var(--green-300);
  --danger: #BE433A;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--slate-50);
  --text-heading: var(--navy-800);
  --text-body: var(--slate-700);
  --text-muted: var(--slate-500);
  --border: var(--slate-200);
  --border-subtle: var(--slate-100);

  --focus-ring: rgba(42, 97, 166, 0.32);

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-card: 18px;

  /* ---- Shadows (cool navy-tinted) ---- */
  --shadow-sm: 0 1px 3px rgba(13, 43, 88, 0.08), 0 1px 2px rgba(13, 43, 88, 0.04);
  --shadow-md: 0 6px 18px -6px rgba(13, 43, 88, 0.14), 0 2px 6px rgba(13, 43, 88, 0.06);
  --shadow-lg: 0 18px 40px -14px rgba(13, 43, 88, 0.22), 0 4px 12px rgba(13, 43, 88, 0.08);
  --shadow-focus: 0 0 0 4px var(--focus-ring);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 200ms;

  /* ---- Layout ---- */
  --container: 1200px;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: #fff;
  font-family: var(--font-sans);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }

/* ---- Responsive nav ---- */
@media (max-width: 880px) {
  .nav-desktop { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
  .nav-compact { display: flex !important; }
}
@media (max-width: 420px) {
  .cta-label { display: none; }
}
@media (max-width: 640px) {
  .svc-go { display: none !important; }
}

/* Mobile dropdown menu (toggled by site.js) */
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }

/* ---- Standards marquee (home) ---- */
.norms-track { display: flex; align-items: center; width: max-content; animation: norms-scroll 34s linear infinite; }
.norms-set { display: flex; align-items: center; gap: var(--space-4) var(--space-8); flex: none; padding-right: var(--space-8); }
.norms-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.norms-bar:hover .norms-track { animation-play-state: paused; }
@media (max-width: 760px) {
  .norms-bar { flex-direction: column !important; align-items: flex-start !important; gap: var(--space-5) !important; }
  .norms-label { max-width: none !important; }
}
@keyframes norms-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .norms-track { animation: none !important; } }

/* ---- Form inputs (contact) ---- */
.sq-in { width: 100%; font-family: var(--font-sans); font-size: 1rem; color: var(--text-body); background: #fff; border: 1.5px solid var(--slate-300); border-radius: var(--radius-md); padding: .7rem .85rem; transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); }
.sq-in::placeholder { color: var(--slate-400); }
.sq-in:hover { border-color: var(--slate-400); }
.sq-in:focus { outline: none; border-color: var(--navy-500); box-shadow: var(--shadow-focus); }
textarea.sq-in { resize: vertical; min-height: 104px; line-height: 1.5; }
select.sq-in { padding-right: 2.4rem; appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ---- Hover states (replace the design tool's style-hover) ---- */
.navlink:hover { color: var(--navy-800) !important; }
.btn-navy:hover { background: var(--navy-900) !important; }
.btn-green:hover { background: var(--green-600) !important; }
.btn-ghost:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.6) !important; }
.btn-white:hover { border-color: var(--slate-400) !important; background: var(--slate-50) !important; }
.svc-row:hover { background: var(--navy-50) !important; }
.card-link:hover { background: var(--navy-50) !important; }
.footer-link:hover { opacity: 1 !important; }