/* =====================================================================
   SolveSA — global site navigation
   ---------------------------------------------------------------------
   ONE header, used on every page, so the navigation is identical
   everywhere. Class names are prefixed "sgn-" and every value is written
   out in full (no CSS variables), because the product sub-pages define
   their own --teal, --navy, .nav and .btn rules. Prefixing keeps this
   header immune to whatever each page's own stylesheet does.

   To change the menu, edit the markup in every page OR re-run:
       python build-global-nav.py
   ===================================================================== */

.sgn-header{
  position:sticky; top:0; z-index:500;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid #E4E9ED;
  font-family:'Montserrat',system-ui,-apple-system,Arial,sans-serif;
}
.sgn-inner{
  max-width:1200px; margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:48px; min-height:74px; position:relative;
}
.sgn-logo{flex:0 0 auto; display:flex; align-items:center; text-decoration:none}
.sgn-logo img{height:46.2px; width:auto; display:block; max-width:none}  /* 10% larger, 5 Aug 2026 */

.sgn-links{
  display:flex; align-items:center; flex-wrap:wrap;
  justify-content:center; gap:12px 22px;
}
.sgn-links > a,
.sgn-has-sub > a{
  color:#1A2E44; font-weight:600; font-size:15px;
  text-decoration:none; transition:.2s; line-height:1.3;
}
.sgn-links > a:hover,
.sgn-has-sub > a:hover{color:#1D7991}
.sgn-links a.sgn-active{color:#1D7991}
.sgn-links > a.sgn-active::after,
.sgn-has-sub > a.sgn-active::after{
  content:""; display:block; height:2px; background:#1D7991;
  border-radius:2px; margin-top:4px;
}

/* Solutions dropdown */
.sgn-has-sub{position:relative; height:74px; display:flex; align-items:center}
.sgn-has-sub > a{display:inline-flex; align-items:center; gap:6px}
.sgn-caret{font-size:10px; color:#5C6B7A; transition:transform .2s}
.sgn-has-sub:hover .sgn-caret{transform:rotate(180deg)}
.sgn-submenu{
  position:absolute; top:100%; left:0; min-width:258px;
  background:#FFFFFF; border:1px solid #E4E9ED; border-radius:12px;
  box-shadow:0 18px 45px rgba(26,46,68,.14);
  padding:8px; display:none; z-index:60;
}
.sgn-has-sub:hover .sgn-submenu{display:block}
.sgn-submenu a{
  display:block; padding:11px 16px; color:#1A2E44; font-weight:600;
  font-size:14.5px; border-radius:8px; white-space:nowrap; text-decoration:none;
}
.sgn-submenu a:hover{background:#EAF4F8; color:#1D7991}
.sgn-submenu a.sgn-active{background:#EAF4F8; color:#1D7991}
.sgn-subhead{
  font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:#5C6B7A; padding:12px 16px 5px; margin-top:6px; border-top:1px solid #E4E9ED;
}

/* Buttons inside the nav */
.sgn-btn{
  display:inline-block; font-weight:700; font-size:15px; padding:11px 20px;
  border-radius:100px; transition:.2s; cursor:pointer; text-align:center;
  text-decoration:none; border:2px solid transparent; line-height:1.2;
}
.sgn-btn.ghost{background:transparent; color:#1D7991; border-color:#1D7991}
.sgn-btn.ghost:hover{background:#EAF4F8}
.sgn-btn.primary{background:#E8A44A; color:#3a2a10; border-color:#E8A44A}
.sgn-btn.primary:hover{background:#d8922f; transform:translateY(-2px)}

/* Search button (styled here too so it matches before the search JS loads) */
.sgn-inner .ssa-search-btn{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 15px;
  border-radius:100px; border:1.5px solid #1D7991; background:#fff; color:#1D7991;
  font-weight:700; font-size:14px; font-family:inherit; cursor:pointer;
  white-space:nowrap; transition:.2s; flex:0 0 auto; line-height:1;
}
.sgn-inner .ssa-search-btn:hover{background:#1D7991; color:#fff}
.sgn-inner .ssa-search-btn svg{width:16px; height:16px; display:block; flex:0 0 auto}

.sgn-burger{
  display:none; background:none; border:none; font-size:26px; line-height:1;
  color:#1A2E44; cursor:pointer; padding:0 4px; flex:0 0 auto;
}

@media(max-width:900px){
  .sgn-inner{gap:14px}
  .sgn-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#FFFFFF; flex-direction:column;
    flex-wrap:nowrap; align-items:flex-start;
    justify-content:flex-start; padding:18px 24px; gap:16px;
    border-bottom:1px solid #E4E9ED;
    box-shadow:0 14px 26px -18px rgba(26,46,68,.6);
    max-height:calc(100vh - 74px); overflow-y:auto;
  }
  .sgn-links.open{display:flex}
  .sgn-burger{display:block}
  .sgn-has-sub{height:auto; flex-direction:column; align-items:flex-start; width:100%}
  .sgn-submenu{
    position:static; display:block; box-shadow:none; border:none;
    padding:6px 0 6px 14px; min-width:0;
  }
  .sgn-submenu a{padding:8px 0}
  .sgn-subhead{padding-left:0}
  .sgn-caret{display:none}
  .sgn-inner .ssa-search-btn .ssa-search-btn-label{display:inline}
}

/* ===== Narrow phones (9 Aug 2026) ==============================
   Below about 400px the header row no longer fits: the logo (188px), the
   search button with its "Search" label (105px) and the burger (31px), plus
   two 14px gaps, need 352px inside a content box that is only 327px wide at
   375px. The burger was pushed past the right edge, which gave EVERY page a
   slight sideways scroll on a phone.

   Dropping the search button to its magnifier icon recovers ~50px — enough to
   fit, while the icon still reads as "search" on its own. The breakpoint sits
   just above the ~400px failure point so the label stays visible wherever it
   genuinely fits. */
@media(max-width:420px){
  .sgn-inner .ssa-search-btn .ssa-search-btn-label{display:none}
  .sgn-inner .ssa-search-btn{padding:0 11px}
}


/* ===== Site-wide CTA button (5 Aug 2026) ==============================
   One look for every "book a demo / booking / chat to a real person /
   free gap analysis" button, taken from the Skills Intelligence hero
   button: gradient pill, white text, teal glow, lift + arrow slide on
   hover. !important is deliberate — every solution page defines its own
   .btn-primary in a local <style> block and would otherwise win. */
.ssa-cta{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  gap:.55em!important;
  font-family:'Poppins','Montserrat',system-ui,-apple-system,Arial,sans-serif!important;
  font-weight:600!important; font-size:.97rem!important; line-height:1.3!important;
  padding:.85em 1.5em!important; border-radius:100px!important; border:0!important;
  background:linear-gradient(100deg,#1A2E44 0%,#1D7991 55%,#5BC2E7 100%)!important;
  color:#fff!important; text-decoration:none!important; white-space:nowrap!important;
  box-shadow:0 12px 26px -10px rgba(29,121,145,.6)!important;
  cursor:pointer!important; transition:.22s!important;
}
.ssa-cta:hover{
  transform:translateY(-2px)!important; color:#fff!important;
  box-shadow:0 18px 36px -10px rgba(29,121,145,.7)!important;
}
.ssa-cta .arrow{transition:transform .22s}
.ssa-cta:hover .arrow{transform:translateX(3px)}
/* On a dark section the gradient's navy end merges into the background,
   so the button loses its shape. A hairline rim restores the silhouette
   without changing the fill. */
.ssa-cta.on-dark{
  box-shadow:0 0 0 1.5px rgba(255,255,255,.45), 0 14px 30px -12px rgba(0,0,0,.65)!important;
}
.ssa-cta.on-dark:hover{
  box-shadow:0 0 0 1.5px rgba(255,255,255,.75), 0 18px 36px -12px rgba(0,0,0,.7)!important;
}

/* The two nav buttons get the same look, at nav scale so the header
   keeps its height. */
.sgn-btn.ghost, .sgn-btn.primary{
  background:linear-gradient(100deg,#1A2E44 0%,#1D7991 55%,#5BC2E7 100%);
  color:#fff; border:0; border-radius:100px; font-weight:600;
  box-shadow:0 10px 22px -10px rgba(29,121,145,.6);
}
.sgn-btn.ghost:hover, .sgn-btn.primary:hover{
  background:linear-gradient(100deg,#1A2E44 0%,#1D7991 55%,#5BC2E7 100%);
  color:#fff; transform:translateY(-2px);
  box-shadow:0 16px 30px -10px rgba(29,121,145,.7);
}

/* 'Website at a Glance' renders as a nav button; the active state must not
   repaint it as a plain teal link or add the underline bar.  (5 Aug 2026) */
.sgn-links a.sgn-btn.sgn-active{color:#fff}
.sgn-links > a.sgn-btn.sgn-active::after{content:none; display:none}


/* =====================================================================
   V2 HEADER — promoted site-wide, 10 August 2026
   ---------------------------------------------------------------------
   These rules were built and signed off on the home page (then
   index-v2.html, now index.html) and are now applied to every page by
   build-global-nav.py, which writes class="sgn-header sgn-v2".

   Everything below is scoped to .sgn-v2. That scoping is deliberate and
   worth keeping: it is the whole revert path. Remove "sgn-v2" from the
   header class in build-global-nav.py and re-run, and every page falls
   back to the original header above with nothing else to undo.

   What it changes, versus the block above:
     - the bar is 1560px wide, not 1200px, so it is wider than the page
       content and the logo sits outboard of the body copy (intended);
     - the logo is 58px tall, not 46.2px;
     - Solutions is a 4-column mega panel, opened by hover, click AND
       keyboard, closed by Escape;
     - the nav carries NO .sgn-btn — "Free Gap Analysis" and "Chat to a
       real person" were removed. Gap Analysis lives in the panel footer;
     - "Website at a Glance" is a pill to the right of Search, styled to
       match it;
     - the burger threshold moves from 900px to 1100px, because the
       bigger logo plus two pills run out of room before 900px.

   The behaviour lives in assets/solvesa-globalnav.js.
   ===================================================================== */

/* ---------- nav: grouped Solutions panel ---------- */
.sgn-v2 .sgn-links{gap:10px 14px}
.sgn-v2 .sgn-links > a, .sgn-v2 .sgn-has-sub > a{font-size:14.5px;white-space:nowrap}

/* The panel is a 4-column grid, not a 16-row column. It also opens on click and
   on keyboard focus, and fades in over 180ms instead of snapping into place. */
/* Anchored to .sgn-inner (already position:relative) rather than to the
   Solutions link, so the panel can never push the page sideways. A panel
   hung off the link is still laid out while visibility:hidden, which is what
   gave the page a horizontal scrollbar between 900px and 1260px. */
.sgn-v2 .sgn-has-sub{position:static}
.sgn-v2 .sgn-mega{
  top:100%; left:24px; right:24px; width:auto; min-width:0;
  padding:24px 24px 18px;
  display:block;                       /* overrides the base display:none */
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.sgn-v2 .sgn-has-sub:hover .sgn-mega{opacity:0;visibility:hidden}   /* neutralise base hover rule */
.sgn-v2 .sgn-has-sub.sgn-open .sgn-mega{opacity:1;visibility:visible;transform:none}
.sgn-v2 .sgn-has-sub.sgn-open .sgn-caret{transform:rotate(180deg)}

.sgn-v2 .sgn-mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sgn-v2 .sgn-mcol h4{
  font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#5C6B7A;
  padding:0 0 8px;margin:0 0 5px;border-bottom:1px solid #E4E9ED;
}
.sgn-v2 .sgn-mega a{
  display:block;padding:7px 9px;margin:0 -9px;border-radius:7px;
  font-size:14px;font-weight:500;color:#1A2E44;white-space:normal;line-height:1.4;
}
.sgn-v2 .sgn-mega a:hover{background:#EAF4F8;color:#1D7991}
.sgn-v2 .sgn-meta{display:block;font-size:12px;font-weight:400;color:#5C6B7A;margin-top:1px}
.sgn-v2 .sgn-mega a.sgn-all{color:#1D7991;font-weight:700}
.sgn-v2 .sgn-mega a.sgn-flag{font-weight:700}
.sgn-v2 .sgn-mega a.sgn-flag::after{
  content:"Flagship";display:block;width:fit-content;margin-top:5px;
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:#7A5410;background:#FCEFD8;border:1px solid #F0D9AE;padding:2px 8px;border-radius:100px;
}
.sgn-v2 .sgn-grp2{margin-top:16px}
.sgn-v2 .sgn-mega-foot{
  margin-top:18px;padding-top:14px;border-top:1px solid #E4E9ED;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.5px;color:#5C6B7A;
}
.sgn-v2 .sgn-mega-foot b{color:#1A2E44}
.sgn-v2 .sgn-mega-foot .sgn-btn{margin-left:auto}

/* CORRECTION to the earlier review: assets/solvesa-globalnav.css (5 Aug 2026)
   deliberately paints .sgn-btn.ghost AND .sgn-btn.primary with the same teal
   gradient, so on the live site all three nav buttons look identical and none
   reads as the primary action — amber is not used in the nav at all. V2 restores
   a hierarchy: one amber CTA matching the hero, everything else outlined. */
.sgn-v2 .sgn-btn{font-size:14px;padding:10px 17px}
.sgn-v2 .sgn-btn.primary{
  background:#E8A44A;color:#3a2a10;border:0;
  box-shadow:0 8px 18px -8px rgba(232,164,74,.7);
}
.sgn-v2 .sgn-btn.primary:hover{
  background:#d8922f;color:#3a2a10;
  box-shadow:0 14px 26px -10px rgba(232,164,74,.75);
}
.sgn-v2 .sgn-btn.ghost{
  background:transparent;color:#1D7991;border:1.5px solid #1D7991;box-shadow:none;
}
.sgn-v2 .sgn-btn.ghost:hover{background:#EAF4F8;color:#1D7991;box-shadow:none}

/* ---------- nav bar width, logo, right-hand action pills ----------
   The header is deliberately WIDER than the 1200px content column used by
   every section below it: 6 links + 2 pills will not sit on one row inside
   1200px, and the two-row bar was the reason the header ran 142px tall.
   Everything in the bar hangs off the same left edge as the logo, so the
   logo now sits outboard of the body copy — that is intended. */
.sgn-v2 .sgn-inner{max-width:1560px; gap:28px; min-height:82px}
.sgn-v2 .sgn-logo img{height:58px}

/* right-hand group: Search, then Website at a Glance, same pill design */
.sgn-v2 .sgn-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.sgn-v2 .sgn-glance{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 15px;
  border-radius:100px; border:1.5px solid #1D7991; background:#fff; color:#1D7991;
  font-weight:700; font-size:14px; font-family:inherit; cursor:pointer;
  white-space:nowrap; transition:.2s; flex:0 0 auto; line-height:1; text-decoration:none;
}
.sgn-v2 .sgn-glance:hover{background:#1D7991; color:#fff}
.sgn-v2 .sgn-glance svg{width:16px; height:16px; display:block; flex:0 0 auto}
/* the same link, but only inside the burger menu */
.sgn-v2 .sgn-glance-m{display:none}

/* 6 links + 2 pills; below 1400 the links tighten before anything wraps */
@media(max-width:1400px){
  .sgn-v2 .sgn-inner{gap:20px}
  .sgn-v2 .sgn-links{gap:8px 14px}
}
@media(max-width:1260px){
  .sgn-v2 .sgn-links{gap:8px 10px}
  .sgn-v2 .sgn-links > a, .sgn-v2 .sgn-has-sub > a{font-size:13.5px}
  .sgn-v2 .sgn-logo img{height:50px}
  .sgn-v2 .sgn-glance .g-full{display:none}   /* pill reads "at a Glance" */
}

/* ---------- burger threshold raised to 1100px (V2 only) ----------
   The base stylesheet swaps to the burger at 900px. With a bigger logo and
   two pills on the right, the row runs out of space at about 1060px, and the
   bar was silently wrapping to two rows between 900 and 1060. Rather than
   let it wrap, V2 goes to the burger earlier. These rules re-state the base
   900px block at the higher breakpoint, scoped to .sgn-v2 so no other page
   is affected. */
@media(max-width:1100px){
  .sgn-v2 .sgn-inner{gap:14px; min-height:74px}
  .sgn-v2 .sgn-logo img{height:46px}
  .sgn-v2 .sgn-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#FFFFFF; flex-direction:column;
    flex-wrap:nowrap; align-items:flex-start;
    justify-content:flex-start; padding:18px 24px; gap:16px;
    border-bottom:1px solid #E4E9ED;
    box-shadow:0 14px 26px -18px rgba(26,46,68,.6);
    max-height:calc(100vh - 74px); overflow-y:auto;
  }
  .sgn-v2 .sgn-links.open{display:flex}
  .sgn-v2 .sgn-burger{display:block}
  .sgn-v2 .sgn-has-sub{height:auto; flex-direction:column; align-items:flex-start; width:100%}
  .sgn-v2 .sgn-caret{display:none}
  .sgn-v2 .sgn-submenu{position:static; display:block; box-shadow:none; border:none; min-width:0}
  /* the standalone Glance pill drops out; the plain link inside the menu takes over */
  .sgn-v2 .sgn-glance{display:none}
  .sgn-v2 .sgn-glance-m{display:block}
  .sgn-v2 .sgn-glance .g-full{display:inline}
}
/* At 360px the enlarged logo plus search plus burger overran the row. */
@media(max-width:380px){
  .sgn-v2 .sgn-logo img{height:38px}
}
@media(max-width:1100px){
  /* burger view: the panel becomes a plain stacked list again */
  .sgn-v2 .sgn-mega{left:auto;right:auto;width:100%;padding:4px 0 6px 14px;opacity:1;visibility:visible;transform:none}
  .sgn-v2 .sgn-mega-grid{grid-template-columns:1fr;gap:14px}
  .sgn-v2 .sgn-mega-foot{display:none}
}


/* ===== Site-wide button shape (10 Aug 2026) ===========================
   Every button on the site takes the full pill of the "Chat to a real
   person" CTA (.ssa-cta above, 100px), so one shape reads across all 38
   pages. !important is deliberate, for the same reason as the .ssa-cta
   block: each solution subpage defines its own .btn in a local <style>
   block and would otherwise win.

   Deliberately NOT in this list, because they are not buttons:
     - 50%-radius circular controls (.play-btn, .mcard-chev, .step .n)
     - badge-style .pill tags on the product subpages (pill ok / track / due)
     - panels that merely carry "cta" in the name (.cta-final, .cta-box,
       .detail-cta, .plan-cta) and card-like option rows (.pq-option)
   To revert the whole site: delete this block. */
.btn, a.btn, button.btn,
.sgn-btn, .ssa-cta,
.btn-primary, .btn-ghost, .btn-ghost-dark, .btn-hero, .btn-light,
.btn-outline, .btn-outline-light, .btn-teal, .btn-back,
.btn-tour, .btn-clear, .btn-send-top,
.tab-btn, .tier-btn, .elem-btn, .add-btn, .list-bar-btn, .configure-btn,
.pick-btn, .cta-contact, .ct-cta, .bk-send, .cf-no, .cf-yes,
#solvesa-gate button, .example-banner button, #ssa-cycle .nav-row button{
  border-radius:100px!important;
}