/* inxy.ca — Litest Solutions Corp. — standalone site styles
 * Design tokens ported from the internal design system. Self-contained.
 */

/* ---------- Fonts (local) ---------- */
@font-face { font-family: Manrope; font-style: normal; font-weight: 400; src: url('fonts/Manrope-Regular.woff2') format('woff2'), url('fonts/Manrope-Regular.woff') format('woff'); font-display: swap; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 500; src: url('fonts/Manrope-Medium.woff2') format('woff2'), url('fonts/Manrope-Medium.woff') format('woff'); font-display: swap; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 600; src: url('fonts/Manrope-SemiBold.woff2') format('woff2'), url('fonts/Manrope-SemiBold.woff') format('woff'); font-display: swap; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 700; src: url('fonts/Manrope-Bold.woff2') format('woff2'), url('fonts/Manrope-Bold.woff') format('woff'); font-display: swap; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 800; src: url('fonts/Manrope-ExtraBold.woff2') format('woff2'), url('fonts/Manrope-ExtraBold.woff') format('woff'); font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --clr-gray-100: #f3f4f6; --clr-gray-150: #eceef1; --clr-gray-200: #e4e7eb; --clr-gray-300: #d1d5db;
  --clr-gray-400: #9ca3af; --clr-gray-500: #6b7280; --clr-gray-600: #4b5563; --clr-gray-700: #374151;
  --clr-gray-800: #1f2937; --clr-gray-800-rgb: 31, 41, 55;
  --clr-amber-50: #fffbeb; --clr-amber-100: #fef3c7; --clr-amber-200: #fde68a; --clr-amber-300: #fbd34d;
  --clr-amber-400: #fbbf24; --clr-amber-500: #f59e0b; --clr-amber-600: #d97706; --clr-amber-700: #b45309;
  --clr-amber-800: #92400e;
  --clr-yellow-250: #fedb67; --clr-yellow-350: #ffc93d; --clr-yellow-500: #eab308; --clr-yellow-600: #ca8a04;
  --clr-green-50: #f0fdf4; --clr-green-100: #dcfce7; --clr-green-400: #4ade80; --clr-green-600: #16a34a; --clr-green-700: #15803d;
  --clr-red-50: #fef2f2; --clr-red-100: #fee2e2; --clr-red-200: #fecaca; --clr-red-400: #f87171; --clr-red-500: #ef4444; --clr-red-600: #dc2626; --clr-red-700: #b91c1c;
  --clr-blue-50: #eff6ff; --clr-blue-600: #2563eb;
  --clr-white: #ffffff;

  --brand-ink-deep: #78350f;
  --text-primary: var(--clr-gray-800); --text-secondary: var(--clr-gray-600); --text-tertiary: var(--clr-gray-500); --text-muted: var(--clr-gray-400);
  --surface-page: var(--clr-gray-100); --surface-card: var(--clr-white); --surface-success: var(--clr-green-50);
  --clr-link: var(--clr-yellow-600); --clr-link-active: var(--clr-amber-700);
  --border-default: var(--clr-gray-300); --border-subtle: var(--clr-gray-200); --divider-color: var(--clr-gray-200);

  --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px;
  --box-shadow-700: 0px 16px 34px rgb(var(--clr-gray-800-rgb), 0.12);
  --box-shadow-800: 0px 32px 48px -8px rgb(var(--clr-gray-800-rgb), 0.16);
  --shadow-card: 4px 4px 20px -10px rgb(0, 0, 0, 0.1);

  --font-sans: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* clip (not hidden) prevents sideways scroll from any stray wide element while keeping position: sticky working */
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text-primary); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, p { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }
img { max-width: 100%; display: block; }
a { color: var(--clr-link); text-decoration: none; transition: color .1s; }
a:hover { color: var(--clr-link-active); }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 88px; padding: 0 20px; border: none; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; flex-shrink: 0; cursor: pointer; text-decoration: none; transition: background-color .1s, color .1s; }
.btn--sm { height: 32px; min-width: 80px; padding: 0 16px; font-size: 12px; }
.btn--lg { height: 48px; min-width: 96px; padding: 0 24px; }
.btn--primary { background: var(--clr-amber-300); color: var(--clr-gray-800); }
.btn--primary:hover { background: var(--clr-yellow-250); color: var(--clr-gray-800); }
.btn--primary:active { background: var(--clr-yellow-350); color: var(--clr-gray-800); }
.btn--default { background: #fff; color: var(--clr-gray-800); }
.btn--default:hover { background: var(--clr-gray-100); color: var(--clr-gray-800); }
.btn--secondary { background: var(--clr-gray-200); color: var(--clr-gray-800); }
.btn--secondary:hover { background: var(--clr-gray-300); color: var(--clr-gray-800); }
.btn--full { width: 100%; }
.btn[disabled], .btn:disabled { background: var(--clr-amber-100); color: var(--clr-gray-400); cursor: not-allowed; }

/* ---------- Site nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 50; background: rgba(14,19,32,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); font-family: var(--font-sans); }
.site-nav-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 66px; display: flex; align-items: center; gap: 28px; }
.site-nav-links { display: flex; gap: 22px; margin-left: 4px; align-items: center; }
.site-nav-links a { font-size: 15px; font-weight: 600; white-space: nowrap; color: rgba(255,255,255,0.72); border-bottom: 2px solid transparent; padding-bottom: 3px; transition: color .1s; }
.site-nav-links a:hover { color: #fff; }
.site-nav-links a.is-active { color: #fff; border-bottom-color: var(--clr-amber-300); }
.nav-info { position: relative; display: inline-flex; }
.nav-tip { position: absolute; top: 34px; right: 0; width: 300px; background: #fff; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--box-shadow-700); padding: 14px 16px; font-size: 13px; line-height: 1.5; z-index: 60; visibility: hidden; opacity: 0; transition: opacity .12s; }
.nav-info:hover .nav-tip, .nav-info:focus-within .nav-tip { visibility: visible; opacity: 1; }

/* ---------- FAQ (native details) ---------- */
.faq { border: 1px solid var(--border-subtle); border-radius: 16px; background: #fff; overflow: hidden; }
.faq + .faq { margin-top: 12px; }
.faq > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; font-size: 16.5px; font-weight: 700; color: var(--text-primary); }
.faq > summary::-webkit-details-marker { display: none; }
.faq .ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--clr-gray-200); color: var(--clr-gray-700); font-size: 18px; font-weight: 800; line-height: 1; }
.faq[open] .ic { background: var(--clr-amber-300); color: var(--clr-gray-800); }
.faq .ic .minus { display: none; }
.faq[open] .ic .plus { display: none; }
.faq[open] .ic .minus { display: block; }
.faq .ans { padding: 0 22px 22px; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }

/* ---------- API tabs ---------- */
.apitab { width: 100%; text-align: left; font-family: var(--font-sans); font-size: 15px; font-weight: 700; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border-subtle); background: #fff; color: var(--text-secondary); cursor: pointer; }
.apitab.is-active { border-color: var(--clr-amber-300); background: var(--clr-amber-50); color: var(--clr-amber-700); }

/* ---------- Cookie toggles + form checkboxes ---------- */
.ck-toggle { width: 40px; height: 22px; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: flex-start; padding: 2px; box-sizing: border-box; background: var(--clr-gray-300); border: none; cursor: pointer; transition: background .1s; }
.ck-toggle .knob { width: 18px; height: 18px; border-radius: 50%; background: #fff; display: block; }
.ck-toggle[aria-pressed="true"] { background: var(--clr-amber-300); justify-content: flex-end; }
.chk { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; border-radius: 6px; border: 1px solid var(--clr-gray-300); background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .1s, border-color .1s; }
[data-check][aria-pressed="true"] .chk { border-color: var(--clr-amber-600); background: var(--clr-amber-300); }
.chk svg { display: none; }
[data-check][aria-pressed="true"] .chk svg { display: block; }
[data-check] { display: flex; align-items: flex-start; gap: 12px; padding: 0; border: none; background: transparent; cursor: pointer; text-align: left; }
input:focus, textarea:focus { border-color: var(--clr-yellow-600) !important; }

/* ---------- Marquee (seamless, gap-free) ---------- */
.ppw-marq { display: flex; width: max-content; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ppw-marq-track { display: flex; flex-shrink: 0; align-items: center; animation: ppw-marq 60s linear infinite; }
.ppw-marq-item { display: inline-flex; align-items: center; gap: 11px; padding: 15px 28px; white-space: nowrap; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.74); }
.ppw-marq-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--clr-amber-300); flex-shrink: 0; }
@keyframes ppw-marq { to { transform: translateX(-100%); } }

/* ---------- Advantage cards ---------- */
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.adv-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 26px 24px; box-shadow: var(--shadow-card); }
.ico-tile, .adv-card .adv-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(155deg, var(--clr-amber-100), var(--clr-amber-50)); color: var(--clr-amber-700); border: 1px solid var(--clr-amber-200); box-shadow: 0 6px 16px -8px rgba(180,83,9,0.45); }
.adv-card .adv-ico { margin-bottom: 16px; }
.adv-card h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.adv-card p { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); margin: 8px 0 0; }
@media (max-width: 900px) { .adv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .adv-grid { grid-template-columns: 1fr; } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .ppw-hero-split { grid-template-columns: 1fr !important; }
  .ppw-2col { grid-template-columns: 1fr !important; }
  .ppw-feat { grid-template-columns: 1fr !important; }
  .ppw-feat-visual { order: 2 !important; }
  .api-split { grid-template-columns: 1fr !important; }
  .api-visual { order: 2 !important; }
  .api-2col { grid-template-columns: 1fr !important; }
  .foot-cols { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) { .ppw-3col { grid-template-columns: 1fr !important; } }
/* Stack multi-column content on phones/small tablets (services.html, about.html) */
@media (max-width: 760px) {
  .svc-2col { grid-template-columns: 1fr !important; }
  .about-values { grid-template-columns: 1fr !important; }
  .about-facts { grid-template-columns: 1fr !important; }
  .about-facts > div { padding-bottom: 14px; border-bottom: 1px solid var(--divider-color); }
  .about-facts > div:last-child { padding-bottom: 0; border-bottom: none; }
}
@media (max-width: 720px) {
  .api-endpoint { grid-template-columns: 1fr !important; }
  .api-endpoint > span:first-child { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .ppw-marq-track { animation: none !important; } }


/* ---------- Brand mark ---------- */
.brand-mark { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-mark svg { display: block; }

/* ---------- Mobile nav (burger) ---------- */
.nav-burger { display: none; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; }
.nav-burger span { display: block; width: 16px; height: 2px; border-radius: 2px; background: #fff; transition: transform .18s ease, opacity .18s ease; }
.site-nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.site-nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 960px) {
  .nav-burger { display: inline-flex; }
  .site-nav-links { display: none; }
  /* keep the header row within the viewport on phones */
  .site-nav-inner { gap: 12px; }
  .site-nav-inner > a > span:last-child { display: none; }      /* hide "Part of Inxy Group" badge */
  .nav-info { display: none; }                                   /* hide info tooltip trigger (same text is in the footer) */
  .site-nav-inner .btn--primary { height: 38px; min-width: 0; padding: 0 14px; font-size: 13px; }
  .site-nav.nav-open .site-nav-links { display: flex; flex-direction: column; gap: 4px; position: absolute; top: 66px; left: 0; right: 0; margin: 0; padding: 14px 24px 20px; background: rgba(14,19,32,0.98); border-bottom: 1px solid rgba(255,255,255,0.1); box-shadow: 0 24px 40px -20px rgba(0,0,0,0.6); }
  .site-nav.nav-open .site-nav-links a { padding: 10px 0; border-bottom: none; font-size: 16px; }
}

/* ---------- Who we serve cards ---------- */
.uc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.uc-card { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.11); border-radius: var(--radius-xl); padding: 24px 22px; }
.uc-card h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; margin: 0; color: #fff; }
.uc-card p { font-size: 14px; line-height: 1.6; color: #aab2c4; margin: 10px 0 0; }
@media (max-width: 960px) { .uc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .uc-grid { grid-template-columns: 1fr; } }

/* ---------- Micro-polish ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.adv-card, .uc-card, .ppw-3col > article, .faq { transition: transform .18s ease, box-shadow .18s ease; }
.adv-card:hover, .ppw-3col > article:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(31,41,55,0.28); }
.uc-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.07); }
:focus-visible { outline: 2px solid var(--clr-amber-500); outline-offset: 2px; border-radius: 4px; }
.rvl { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rvl.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rvl { opacity: 1; transform: none; transition: none; } }