/* ==========================================================================
   NexGen IT Solutions — Design System v4
   Palette: White / Orange #ff7a00 / Navy #0b2a4a
   Built for conversion to a WordPress theme. Every value is a token.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand core */
  --navy-900: #061627;
  --navy-800: #081d34;
  --navy-700: #0b2a4a;   /* PRIMARY BRAND NAVY */
  --navy-600: #123a61;
  --navy-500: #1d5183;
  --navy-400: #3d76ab;
  --navy-200: #a8c4dd;
  --navy-100: #dce8f3;
  --navy-050: #eef4fa;

  --orange-700: #ad4f00;  /* a11y: darkened from #c25a00 for WCAG AA text contrast */
  --orange-600: #e66d00;
  --orange-500: #ff7a00;  /* PRIMARY BRAND ORANGE */
  --orange-400: #ff9433;
  --orange-200: #ffd4a8;
  --orange-050: #fff4e8;

  /* Neutrals — warm-tinted so they sit with the orange */
  --white: #ffffff;
  --gray-050: #f7f9fc;
  --gray-100: #eef2f7;
  --gray-200: #dfe5ee;
  --gray-300: #c4cddb;
  --gray-500: #616f80;  /* a11y: darkened from #7a8798 (3.65:1) to 5.13:1 on white */
  --gray-600: #5c6c82;
  --gray-800: #2a3a4f;
  --ink: #152238;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--gray-050);
  --bg-navy: var(--navy-700);
  --text: var(--ink);
  --text-dim: var(--gray-600);
  --text-invert: rgba(255, 255, 255, 0.86);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --accent: var(--orange-500);
  --accent-ink: var(--orange-700);
  --btn-primary-ink: var(--navy-800);  /* a11y: navy on brand orange = 6.50:1 */

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  clamp(1.5rem, 2.2vw, 1.875rem);
  --fs-3xl:  clamp(1.75rem, 3vw, 2.5rem);
  --fs-4xl:  clamp(2.1rem, 4.4vw, 3.4rem);

  /* Space — 4px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;

  /* Shape + depth */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 42, 74, 0.06), 0 1px 3px rgba(11, 42, 74, 0.05);
  --shadow: 0 4px 6px -1px rgba(11, 42, 74, 0.07), 0 10px 24px -8px rgba(11, 42, 74, 0.12);
  --shadow-lg: 0 12px 28px -8px rgba(11, 42, 74, 0.16), 0 32px 64px -24px rgba(11, 42, 74, 0.22);
  --shadow-accent: 0 8px 20px -6px rgba(255, 122, 0, 0.45);

  --ring: 0 0 0 3px rgba(255, 122, 0, 0.35);

  --wrap: 1180px;
  --wrap-narrow: 780px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; height: auto; }
/* Do NOT add height:auto here. Inline icons rely on their width/height attributes,
   and height:auto would collapse them back to the 300x150 replaced-element default
   in any context that has no explicit CSS size rule. */
svg { max-width: 100%; display: block; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-700);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.14;
}
/* Second line of defence against the grid blowout described in section 20: if a
   single long token (a domain, an email address, a compound term) is wider than a
   phone screen, break it rather than letting it set a min-content floor. */
body { overflow-wrap: break-word; }

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); line-height: 1.3; letter-spacing: -0.014em; }
h4 { font-size: var(--fs-md); line-height: 1.4; letter-spacing: -0.01em; }
p { color: var(--text-dim); }
/* a11y: p must not inherit the light-background dim grey when it sits on navy.
   Without this, .topbar p and .footer-bottom p render #5c6c82 on navy (3.2:1). */
.topbar p, .site-footer p, .footer-bottom p, .section-navy p, .navy-panel p { color: inherit; }
strong { color: var(--text); font-weight: 700; }

/* ---------- 3. LAYOUT ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-5); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--s-5); }
.section { padding: var(--s-11) 0; }
.section-sm { padding: var(--s-9) 0; }
.section-alt { background: var(--bg-alt); }
.section-navy {
  background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-900) 100%);
  color: var(--text-invert);
}
/* h1 belongs in this list. It was missing, so the one page that puts an h1 on the
   navy band (thank-you) rendered "Got it. Thank you." in dark navy ON navy, which is
   very close to invisible and a straight contrast failure. */
.section-navy h1, .section-navy h2, .section-navy h3, .section-navy h4 { color: var(--white); }
.section-navy p { color: rgba(255, 255, 255, 0.72); }
.grid { display: grid; gap: var(--s-5); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* Section heading block */
.sect-head { max-width: 680px; margin-bottom: var(--s-8); }
.sect-head.center { margin-inline: auto; }
.sect-head p { font-size: var(--fs-lg); margin-top: var(--s-4); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink);
  background: var(--orange-050); border: 1px solid var(--orange-200);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill);
  margin-bottom: var(--s-4);
}
.eyebrow svg { width: 1.15em; height: 1.15em; }
.section-navy .eyebrow {
  color: var(--orange-400); background: rgba(255, 122, 0, 0.1);
  border-color: rgba(255, 122, 0, 0.3);
}

/* ---------- 4. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-weight: 700; font-size: var(--fs-base); line-height: 1;
  padding: 0.95rem 1.6rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background 0.18s var(--ease), color 0.18s var(--ease);
}
/* min-height keeps the small variant above the 24px CSS target minimum in WCAG 2.2.
   Without it the resource "Download Free" buttons measure 23px, which is a fail on
   the one control the whole resources page exists to get clicked. */
.btn-sm { min-height: 32px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.1em; height: 1.1em; }
.btn-primary { background: var(--accent); color: var(--btn-primary-ink); box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--orange-600); color: var(--btn-primary-ink); box-shadow: 0 12px 26px -6px rgba(255,122,0,0.55); }
.btn-navy { background: var(--navy-700); color: var(--white); box-shadow: var(--shadow); }
.btn-navy:hover { background: var(--navy-600); }
.btn-ghost { background: transparent; color: var(--navy-700); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--navy-700); background: var(--navy-050); }
.section-navy .btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.35); }
.section-navy .btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }
.btn-sm { padding: 0.65rem 1.15rem; font-size: var(--fs-sm); }
.btn-lg { padding: 1.1rem 2rem; font-size: var(--fs-lg); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 700; font-size: var(--fs-sm); color: var(--accent-ink);
}
.link-arrow svg { transition: transform 0.18s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- 5. HEADER + NAV ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar {
  background: var(--navy-800); color: rgba(255,255,255,0.78);
  font-size: var(--fs-xs); letter-spacing: 0.01em;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-block: 0.5rem; }
.topbar a { color: var(--white); font-weight: 600; }
.topbar a:hover { color: var(--orange-400); }
.topbar-meta { display: flex; gap: var(--s-5); }

.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-4); }
.brand { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--navy-700), var(--navy-500));
  display: grid; place-items: center; color: var(--white);
  font-weight: 900; font-size: 1rem; letter-spacing: -0.04em;
  box-shadow: var(--shadow-sm);
}
.brand-mark span { color: var(--orange-500); }
.brand-name { font-weight: 800; font-size: 1.06rem; color: var(--navy-700); letter-spacing: -0.03em; line-height: 1.1; }
.brand-name em { font-style: normal; color: var(--accent); }
.brand-sub { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gray-500); }

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav > li { position: relative; }
.nav > li > a {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--gray-800);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.nav > li > a:hover, .nav > li.is-current > a { color: var(--navy-700); background: var(--gray-100); }
.nav > li.is-current > a { color: var(--accent-ink); }
.nav .caret { width: 10px; height: 10px; opacity: 0.5; transition: transform 0.2s var(--ease); }
.nav > li:hover .caret { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 288px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: var(--s-3); opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.nav > li:hover .submenu, .nav > li:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a { display: block; padding: var(--s-3); border-radius: var(--radius-sm); transition: background 0.14s; }
.submenu a:hover { background: var(--gray-050); }
.submenu strong { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--navy-700); }
.submenu small { display: block; font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.45; margin-top: 2px; }

.nav-actions { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.nav-phone { font-size: var(--fs-sm); font-weight: 800; color: var(--navy-700); white-space: nowrap; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; cursor: pointer; color: var(--navy-700);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* ---------- 6. HERO ---------- */
.hero { position: relative; overflow: hidden; padding: var(--s-10) 0 var(--s-11); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px 420px at 88% -8%, rgba(255,122,0,0.13), transparent 62%),
    radial-gradient(680px 480px at 6% 4%, rgba(11,42,74,0.09), transparent 60%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(to right, var(--gray-100) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gray-100) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black, transparent 72%);
}
.hero .wrap { position: relative; z-index: 1; }
/* minmax(0,...) is load-bearing: without it the widest rotating phrase sets the
   column's min-content width and the right-hand card visibly resizes on each cycle. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--s-9); align-items: center;
}
.hero h1 { margin-bottom: var(--s-5); }
.hero-lead { font-size: var(--fs-lg); max-width: 560px; margin-bottom: var(--s-6); }

/* Rotating vertical — H1 stays static for SEO, only this line cycles.
   Grid stacking, not absolute positioning: every item occupies the same grid cell,
   so the container automatically sizes to the TALLEST phrase. Absolute positioning
   was the earlier bug — it took items out of flow, the container reserved a single
   line, and any phrase that wrapped to two lines overflowed into the paragraph below. */
.rotator { display: grid; color: var(--accent); }
/* Sequential crossfade, not a simultaneous one. Both phrases occupy the same grid
   cell, so fading them at the same rate parks them both at ~50% opacity mid-swap
   and the two words render on top of each other as unreadable mush. The outgoing
   phrase clears fast, then the incoming one fades in after a short delay. */
.rotator-item {
  grid-area: 1 / 1;               /* all items share one cell and overlap */
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.rotator-item.is-active {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.34s var(--ease) 0.16s, transform 0.34s var(--ease) 0.16s;
}
/* The JS keeps cycling under reduced motion; only the animation is removed. */
@media (prefers-reduced-motion: reduce) {
  .rotator-item, .rotator-item.is-active { transition: none; }
}

/* ---------- LOGO ----------
   Native asset is 433x126 (3.44:1). Height drives the size; width follows so the
   aspect ratio can never be squashed by a container. */
.brand-logo { height: 40px; width: auto; display: block; }
.site-footer .brand-logo { height: 44px; }
@media (max-width: 900px) { .brand-logo { height: 34px; } }
@media (max-width: 380px) { .brand-logo { height: 30px; } }

.trust-row { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--border); }
.trust-item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--gray-800); }
.trust-item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* Hero visual card */
.hero-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.hero-card { max-width: 460px; margin-left: auto; }
.hero-card-head {
  background: linear-gradient(150deg, var(--navy-700), var(--navy-800));
  padding: var(--s-4) var(--s-5); color: var(--white);
}
.hero-card-head h3 { color: var(--white); font-size: var(--fs-base); }
.hero-card-head p { color: rgba(255,255,255,0.68); font-size: var(--fs-xs); margin-top: var(--s-1); }
.hero-card-body { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-3); }
.hero-card-body .check-line { font-size: var(--fs-sm); line-height: 1.5; }
.check-line { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.check-line svg { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }
.hero-card-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); background: var(--gray-050); }
@media (max-width: 900px) { .hero-card { max-width: none; margin-left: 0; } }

/* ---------- 7. CARDS ---------- */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s-6);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  display: flex; flex-direction: column; gap: var(--s-3);
}
a.card:hover, .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--navy-200); }
.card p { font-size: var(--fs-sm); flex-grow: 1; }
.card .link-arrow { margin-top: var(--s-2); }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--orange-050); border: 1px solid var(--orange-200); color: var(--accent-ink);
}
.card-icon svg { width: 22px; height: 22px; }
.card-navy { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.card-navy .card-icon { background: rgba(255,122,0,0.13); border-color: rgba(255,122,0,0.3); color: var(--orange-400); }
.card-feature { border-color: var(--accent); box-shadow: var(--shadow); position: relative; }
.card-tag {
  position: absolute; top: -12px; left: var(--s-6);
  background: var(--accent); color: var(--btn-primary-ink); font-size: var(--fs-xs);
  font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
}

/* ---------- 8. COMPARISON TABLE (the differentiator) ---------- */
.compare { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
.compare-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--border); }
.compare-row:last-child { border-bottom: none; }
.compare-row > div { padding: var(--s-4) var(--s-5); display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.compare-head > div { background: var(--gray-050); font-weight: 800; color: var(--navy-700); font-size: var(--fs-xs); letter-spacing: 0.07em; text-transform: uppercase; }
.compare-head .col-us { background: var(--navy-700); color: var(--white); }
.compare-row .col-label { font-weight: 700; color: var(--navy-700); background: var(--gray-050); }
.compare-row .col-us { background: var(--orange-050); font-weight: 600; color: var(--navy-700); border-left: 1px solid var(--orange-200); border-right: 1px solid var(--orange-200); }
.compare-row .col-them { color: var(--text-dim); }
.ic-yes, .ic-no { width: 18px; height: 18px; flex-shrink: 0; }
.ic-yes { color: #12855b; }
.ic-no { color: var(--gray-300); }

/* ---------- 8b. PLAN FEATURE MATRIX ---------- */
/* min-width:0 and max-width:100% are load-bearing. Without them a scroll container
   holding a 780px-wide table can still be sized by its own content when it sits in a
   grid or flex context, so the container grows to 780px and the whole PAGE scrolls
   sideways instead of just the table. */
.matrix-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  min-width: 0; max-width: 100%;
  overscroll-behavior-x: contain;   /* stop the swipe chaining to browser back-nav */
  /* `contain: paint` is the load-bearing line, and overflow-x:auto alone is NOT
     enough. On a phone the layout viewport expands to fit the widest content on the
     page, and this table's 780px min-width was expanding it even though the table
     itself scrolled correctly. The visible symptom was on .sticky-cta: it is
     position:fixed with left/right 0, so it sized to the 746px layout viewport
     instead of the 320px screen, which pushed the "Book a Fit Call" button
     completely off the right edge. The primary mobile CTA was unreachable on this
     page. Containment stops the table's width escaping into the viewport
     calculation. Verified: table still scrolls horizontally, page no longer does.
     Do not remove without re-testing plans.html at 320px. */
  contain: paint;
  padding-bottom: 6px;   /* room for the table's shadow, which contain would clip */
}
.matrix {
  min-width: 780px; width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  font-size: var(--fs-sm);
}
.matrix th, .matrix td { padding: var(--s-3) var(--s-4); text-align: center; vertical-align: middle; }
.matrix thead th {
  background: var(--navy-700); color: var(--white); font-weight: 800;
  font-size: var(--fs-xs); letter-spacing: 0.07em; text-transform: uppercase;
  position: sticky; top: 0;
}
.matrix thead th.col-elite { background: var(--orange-600); color: var(--btn-primary-ink); }  /* a11y: navy on orange = 5.30:1 */
.matrix th.row-label, .matrix td.row-label {
  text-align: left; font-weight: 600; color: var(--navy-700);
  background: var(--gray-050); min-width: 260px;
  border-right: 1px solid var(--border);
}
.matrix tbody tr:not(:last-child) td, .matrix tbody tr:not(:last-child) th { border-bottom: 1px solid var(--border); }
.matrix tr.group-row th {
  background: var(--navy-050); color: var(--navy-700); text-align: left;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.matrix td.yes svg { width: 19px; height: 19px; color: #12855b; margin: 0 auto; }
.matrix td.no svg { width: 17px; height: 17px; color: var(--gray-300); margin: 0 auto; }
.matrix td.text { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.4; }
.matrix td.col-elite { background: var(--orange-050); }
.matrix-hint { font-size: var(--fs-xs); color: var(--text-dim); margin-top: var(--s-3); }

/* Tier summary cards */
.tier { display: flex; flex-direction: column; gap: var(--s-3); }
.tier-name { font-size: 1.25rem; }
.tier-tagline { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-ink); }
.tier-adds { display: grid; gap: 0.55rem; padding-top: var(--s-4); border-top: 1px solid var(--border); margin-top: var(--s-2); }
.tier .btn { margin-top: auto; }

/* ---------- 9. PROCESS / STEPS ---------- */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
.step { position: relative; padding-left: var(--s-9); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-size: var(--fs-sm); font-weight: 900; color: var(--accent);
  background: var(--orange-050); border: 1px solid var(--orange-200);
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
}
.step h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.step p { font-size: var(--fs-sm); }

/* ---------- 10. STATS ---------- */
.stat { text-align: center; padding: var(--s-4); }
.stat-num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 900; color: var(--white); letter-spacing: -0.04em; line-height: 1; }
.stat-num em { font-style: normal; color: var(--orange-500); }
.stat-label { font-size: var(--fs-sm); color: rgba(255,255,255,0.66); margin-top: var(--s-2); }

/* ---------- 11. TESTIMONIALS ---------- */
.quote { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.stars { display: flex; gap: 2px; color: var(--orange-500); }
.stars svg { width: 16px; height: 16px; }
.quote blockquote { font-size: var(--fs-base); color: var(--text); line-height: 1.65; flex-grow: 1; }
.quote-who { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--navy-100); color: var(--navy-700); display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm); flex-shrink: 0; }
.quote-who strong { display: block; font-size: var(--fs-sm); }
.quote-who small { color: var(--text-dim); font-size: var(--fs-xs); }

/* ---------- 12. ACCORDION (FAQ) ---------- */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-5) 0; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--navy-700); font-size: var(--fs-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 12px; height: 12px; flex-shrink: 0;
  border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(45deg); transition: transform 0.22s var(--ease); margin-top: -6px;
  /* The 45deg rotation makes the chevron's painted area about 3px wider than its
     layout box on each side. Without this margin it pokes past the container edge. */
  margin-right: 4px;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.faq-body { padding: 0 0 var(--s-5); max-width: 68ch; }
.faq-body p + p { margin-top: var(--s-3); }

/* ---------- 13. FORMS ---------- */
.form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-7); box-shadow: var(--shadow); }
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-700); }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 1rem; font-size: var(--fs-base);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--white); transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.field textarea { min-height: 130px; resize: vertical; }
.field-hint { font-size: var(--fs-xs); color: var(--text-dim); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form-note { font-size: var(--fs-xs); color: var(--text-dim); margin-top: var(--s-4); }

/* ---------- 14. RESOURCE / LEAD MAGNET ---------- */
.resource {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--s-5); align-items: start;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-5); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.resource:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.resource-thumb {
  aspect-ratio: 3 / 4; border-radius: var(--radius-sm); background: linear-gradient(155deg, var(--navy-700), var(--navy-900));
  display: grid; place-items: center; color: var(--orange-400); box-shadow: var(--shadow-sm);
}
.resource-thumb svg { width: 30px; height: 30px; }
.resource h3 { font-size: var(--fs-md); }
.resource p { font-size: var(--fs-sm); margin: var(--s-2) 0 var(--s-3); }
.resource-meta { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); }

/* ---------- 14b. PORTFOLIO / WORK GRID ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.work-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.work-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--navy-200); }
.work-mark {
  height: 132px; display: grid; place-items: center; padding: var(--s-5); text-align: center;
  background: linear-gradient(150deg, var(--navy-050), var(--navy-100));
  border-bottom: 1px solid var(--border);
}
.work-mark span {
  font-family: var(--font-display); font-weight: 900; font-size: 1.375rem;
  letter-spacing: -0.03em; color: var(--navy-700); line-height: 1.15;
}
.work-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.work-body h3 { font-size: var(--fs-md); }
.work-body p { font-size: var(--fs-sm); flex: 1; }
.work-body .link-arrow { margin-top: var(--s-3); }
/* Clients whose live URL is still unknown */
.work-card[data-needs-url] .work-mark { background: repeating-linear-gradient(45deg, var(--gray-050), var(--gray-050) 10px, var(--gray-100) 10px, var(--gray-100) 20px); }
.work-card[data-needs-url] .link-arrow { color: var(--gray-500); }
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .work-grid { grid-template-columns: 1fr; } }

/* ---------- 15. CTA BAND ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(620px 320px at 78% 12%, rgba(255,122,0,0.24), transparent 62%);
}
.cta-band .wrap { position: relative; z-index: 1; }

/* Sticky mobile CTA */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; display: none;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border); padding: var(--s-3) var(--s-4);
  gap: var(--s-3); box-shadow: 0 -6px 24px rgba(11,42,74,0.1);
}
.sticky-cta .btn { flex: 1; }

/* ---------- 16. BREADCRUMBS + PAGE HERO ---------- */
.page-hero { background: linear-gradient(165deg, var(--navy-700) 0%, var(--navy-900) 100%); color: var(--text-invert); padding: var(--s-8) 0 var(--s-9); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(680px 340px at 88% 0%, rgba(255,122,0,0.2), transparent 62%); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); max-width: 20ch; }
.page-hero .hero-lead { color: rgba(255,255,255,0.74); margin-top: var(--s-5); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-xs); color: rgba(255,255,255,0.6); margin-bottom: var(--s-5); }
.crumbs a:hover { color: var(--orange-400); }
.crumbs span { opacity: 0.5; }

/* ---------- 17. PROSE (blog / long content) ---------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }
.prose ul, .prose ol { display: grid; gap: var(--s-3); padding-left: 0; }
.prose ul li { position: relative; padding-left: var(--s-6); color: var(--text-dim); }
.prose ul li::before {
  content: ""; position: absolute; left: 6px; top: 0.65em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: var(--s-7); color: var(--text-dim); }
.prose ol li::before {
  counter-increment: n; content: counter(n) "."; position: absolute; left: 0; top: 0;
  font-weight: 800; color: var(--accent);
}
.callout {
  border-left: 4px solid var(--accent); background: var(--orange-050);
  padding: var(--s-5); border-radius: 0 var(--radius) var(--radius) 0;
}
.callout strong { color: var(--accent-ink); }

/* ---------- 18. FOOTER ---------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,0.66); padding: var(--s-10) 0 var(--s-5); font-size: var(--fs-sm); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
.site-footer h4 { color: var(--white); font-size: var(--fs-xs); letter-spacing: 0.11em; text-transform: uppercase; margin-bottom: var(--s-4); }
.site-footer a:hover { color: var(--orange-400); }
.footer-links { display: grid; gap: var(--s-3); }
.site-footer .brand-name { color: var(--white); }
.site-footer .brand-sub { color: rgba(255,255,255,0.55); }
.footer-blurb { margin: var(--s-4) 0 var(--s-5); max-width: 40ch; color: rgba(255,255,255,0.6); }
.footer-contact { display: grid; gap: var(--s-2); }
.footer-contact a { color: var(--white); font-weight: 700; }
.socials { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.socials a { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.08); display: grid; place-items: center; color: rgba(255,255,255,0.8); transition: background 0.15s, color 0.15s; }
.socials a:hover { background: var(--accent); color: var(--btn-primary-ink); }
.socials svg { width: 17px; height: 17px; }
.footer-bottom { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-xs); color: rgba(255,255,255,0.55); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.service-areas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.service-areas li { font-size: var(--fs-xs); background: rgba(255,255,255,0.07); padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); }

/* ---------- 19. UTILITIES ---------- */
.mt-0{margin-top:0}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}
.mb-0{margin-bottom:0}.mb-5{margin-bottom:var(--s-5)}.mb-6{margin-bottom:var(--s-6)}
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s-4); top: var(--s-4); z-index: 999; background: var(--white); padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); box-shadow: var(--shadow); }

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width: 1040px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --s-11: 4.5rem; --s-10: 3.5rem; }
  .nav-bar { padding-block: var(--s-3); }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg); padding: var(--s-3); max-height: 76vh; overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  /* ---- Mobile submenu accordions ----
     Previously every submenu was permanently expanded here, so opening the menu
     dumped all nine service pages and every industry into one long scroll and
     pushed Plans, Portfolio, About, Resources and Contact off the screen.
     Now the parent row is a toggle. nexgen.js adds .has-submenu to any <li> that
     contains a .submenu and toggles .is-open on tap.

     MOBILE ONLY, deliberately. Every rule in this block lives inside the 900px
     media query, and the JS no-ops above that width, so desktop keeps its
     hover-to-open flyout menus untouched. */
  .nav > li > a {
    padding: var(--s-4); border-radius: var(--radius-sm); font-size: var(--fs-md);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  }

  .nav .caret { display: block; width: 13px; height: 13px; opacity: .8; flex-shrink: 0; }
  /* Kill the desktop hover rotation. On a touch screen "hover" sticks after a tap,
     which would leave the chevron pointing the wrong way once the panel closes. */
  .nav > li:hover .caret { transform: none; }
  .nav > li.is-open > a .caret { transform: rotate(180deg); }
  .nav > li.is-open > a { background: var(--gray-100); color: var(--navy-700); }

  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-left: 2px solid var(--orange-200);
    border-radius: 0; margin: 0 0 0 var(--s-4); padding: 0 0 0 var(--s-2); min-width: 0;
    /* max-height rather than display:none so the open and close can animate.
       40rem is headroom: the longest panel (Services, ten rows with descriptions
       hidden) measures roughly 27rem. If a panel ever grows past 40rem it will
       clip, so raise this rather than adding items blindly. */
    max-height: 0; overflow: hidden;
    transition: max-height .3s var(--ease), margin-bottom .3s var(--ease);
  }
  .nav > li.is-open > .submenu { max-height: 40rem; margin-bottom: var(--s-3); }
  .submenu small { display: none; }   /* descriptions would double the panel height */
  .submenu a { padding: var(--s-3) var(--s-4); }
  .nav-toggle { display: block; }
  .nav-phone { display: none; }
  .nav-actions .btn { display: none; }
  .topbar-meta { display: none; }
  .topbar .wrap { justify-content: center; }
  /* minmax(0, 1fr), never a bare 1fr. A bare `1fr` is shorthand for
     minmax(auto, 1fr), and that `auto` floor resolves to the track's MIN-CONTENT
     width. One long word in a paragraph then forces the track wider than the
     screen, the whole column stretches to match, and the page scrolls sideways.
     This was the cause of the horizontal scroll on about, industries, resources
     and low-voltage at phone widths. The desktop rules already guarded against it;
     these mobile overrides were silently throwing the guard away. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .g-2, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .compare-row { grid-template-columns: minmax(0, 1fr); }
  .compare-row > div { padding: var(--s-3) var(--s-4); }
  .compare-head { display: none; }
  .compare-row .col-label { font-size: var(--fs-base); }
  .compare-row .col-us::before { content: "NexGen: "; font-weight: 800; color: var(--accent-ink); }
  .compare-row .col-them::before { content: "Legacy MSP: "; font-weight: 800; color: var(--gray-500); }
  .compare-row .col-us, .compare-row .col-them { border: none; }
  .sticky-cta { display: flex; }
  body { padding-bottom: 74px; }
  .form-card { padding: var(--s-5); }

  /* Touch targets. These render 21 to 23px tall by default, under the 24px CSS
     minimum in WCAG 2.2 (2.5.8 Target Size). Padding rather than height, so the
     text position does not shift. This sits at the 900px breakpoint, not 560px,
     because tablets are touch devices too. */
  .crumbs a { display: inline-block; padding-block: 6px; }
  .footer-links a, .footer-bottom nav a, .footer-contact a {
    display: inline-block; padding-block: 7px;
  }
  .faq summary { min-height: 44px; }
}
@media (max-width: 560px) {
  .g-4, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .resource { grid-template-columns: 64px minmax(0, 1fr); }
  .btn { width: 100%; }
  .sticky-cta .btn, .btn-row .btn { width: auto; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  .trust-row { gap: var(--s-3); }

  /* Let long button labels wrap on a phone. The base .btn sets white-space:nowrap,
     which is right on desktop but means a label like "Grab a Free Checklist While
     You Wait" has a min-content width of ~345px. That floor propagated up through
     the container and pushed thank-you.html 74px wider than a 320px screen.
     line-height goes to 1.25 because the base value of 1 looks cramped once a
     label actually runs to two lines. */
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
  .sticky-cta .btn { white-space: nowrap; }   /* short labels, must stay one line */
}

/* ---------- 21. PRINT ---------- */
@media print {
  .site-header, .site-footer, .sticky-cta, .btn { display: none !important; }
  body { padding: 0; }
}