/* =====================================================================
   site-chrome.css — CyMobility shared HEADER + FOOTER
   Extracted from the homepage's style.css so the exact same header and
   footer can be dropped onto pages that use a different body stylesheet
   (e.g. the cym-designed About page). Only header/footer selectors are
   included; button rules are scoped to .site-header so they never touch
   a page's body buttons. Home's design tokens use a distinct variable
   namespace (--bg, --txt, --accent) that does not collide with cym's
   (--color-x, --cyan-x), so they are safe to define globally.
   ===================================================================== */

:root {                      /* LIGHT (default, soft) */
  --bg: #e9ebf7;
  --bg-2: #e0e3f2;
  --surface: rgba(255,255,255,0.66);
  --surface-2: rgba(255,255,255,0.85);
  --panel: rgba(255,255,255,0.74);
  --panel-solid: #ffffff;
  --line: rgba(24,28,84,0.12);
  --line-2: rgba(24,28,84,0.2);
  --line-hi: rgba(58,99,200,0.55);
  --txt: #363a60;
  --txt-dim: rgba(54,58,96,0.66);
  --txt-dimmer: rgba(54,58,96,0.45);
  --heading: #12143c;
  --strong: #0c0e30;
  --accent: #3a63c8;
  --accent-bright: #4d7fe6;
  --accent-2: #6a95ec;
  --accent-3: #2f52b0;
  --purple: #5a3fb0;
  --crimson: #d1274f;
  --header-bg: rgba(233,235,247,0.94);
  --shadow-1: 0 24px 60px rgba(30,34,90,0.14);
}
:root[data-theme="dark"] {   /* DARK */
  --bg: #0a0d24;
  --bg-2: #16123a;
  --surface: rgba(255,255,255,0.028);
  --surface-2: rgba(255,255,255,0.055);
  --panel: rgba(22,18,52,0.9);
  --panel-solid: #14122e;
  --line: rgba(255,255,255,0.09);
  --line-2: rgba(255,255,255,0.14);
  --line-hi: rgba(77,127,230,0.42);
  --txt: #c7cbe0;
  --txt-dim: rgba(199,203,224,0.62);
  --txt-dimmer: rgba(199,203,224,0.4);
  --heading: #ffffff;
  --strong: #ffffff;
  --accent: #4d7fe6;
  --accent-bright: #4d7fe6;
  --accent-2: #86a8f0;
  --accent-3: #b9ccf7;
  --purple: #6a4fc0;
  --crimson: #ff4d6d;
  --header-bg: rgba(13,18,64,0.94);
  --shadow-1: 0 24px 70px rgba(0,0,0,0.55);
}
:root {
  --font-disp: "Montserrat", "Segoe UI", Verdana, system-ui, sans-serif;
  --font-sans: "Segoe UI", Verdana, Geneva, Tahoma, system-ui, sans-serif;
  --fs-h2: clamp(2.25rem, 3.1vw + .6rem, 3.7rem);
  --maxw: 2160px;
  --radius: 12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 180ms var(--ease);
  --t-med: 340ms var(--ease);
}

/* Match the homepage's root scale (style.css sets 88%) so the shared rem-based
   header/footer render at the exact same size on every page. */
html { font-size: 88%; }

/* layout helper (unique to chrome on cym pages) */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 2.2vw, 46px); }

/* scoped resets so chrome renders identically regardless of the body stylesheet */
.site-header ul, .site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-header a, .site-footer a { text-decoration: none; }
/* svgs may be block; IMG display is left to the .logo-on-* toggle below so the
   theme logo-swap is never overridden (a block reset here would show both logos) */
.site-header svg, .site-footer svg { display: block; max-width: 100%; }
.site-header img, .site-footer img { max-width: 100%; }
.footer-logo { display: block; }
.site-header h4, .site-footer h4, .site-footer h3 { margin: 0; }

/* buttons — scoped to the header so a page's own body buttons are never restyled */
.site-header .btn { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: 1rem; cursor: pointer;
  position: relative; overflow: hidden; z-index: 1;
  border-radius: 6px 12px 28px; padding: 14px 28px; border: 1.5px solid transparent;
  transition: transform var(--t-fast), box-shadow var(--t-med), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.site-header .btn span[aria-hidden] { transition: transform var(--t-fast); }
.site-header .btn:hover span[aria-hidden] { transform: translateX(3px); }
/* The header's height is driven by this button, so it sets the bar's size. */
.site-header .btn-sm { padding: 8px 16px; font-size: .85rem; }
.site-header .btn-primary { background: linear-gradient(120deg, var(--accent-bright), var(--accent-2)); color: #00131a; box-shadow: 0 8px 24px rgba(77,127,230,.3); }
.site-header .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(77,127,230,.45); }

/* ================================ HEADER ================================== */
/* One header for the whole site, matching the homepage exactly: it MERGES into
   the hero (no background, no border, no shadow) for as long as the hero is on
   screen, then breaks into the frosted bar once the reader scrolls past it.
   js/site-chrome.js measures the hero and flips `.past-hero` at its bottom edge
   — not after an arbitrary 60px — and publishes the measured bar height as
   --hdr-h so the hero can slide underneath (see "header/hero merge" below). */
.site-header { position: sticky; top: 0; z-index: 100; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid transparent;
  transition: background var(--t-med), -webkit-backdrop-filter var(--t-med), backdrop-filter var(--t-med), border-color var(--t-med), box-shadow var(--t-med); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-bright) 50%, transparent); opacity: 0; transition: opacity var(--t-med); }
.site-header.past-hero { background: var(--header-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: var(--line); box-shadow: 0 10px 30px rgba(0,0,20,.14); }
.site-header.past-hero::after { opacity: .6; }
/* Pages with no hero (privacy, terms) have nothing to merge into, so the bar is
   solid from the start — js adds .no-hero when it finds no hero to measure. */
.site-header.no-hero { background: var(--header-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: var(--line); }
.site-header.no-hero::after { opacity: .6; }
/* An open mobile drawer always needs a solid bar, merged or not. */
.site-header.nav-open { background: var(--header-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: var(--line); }
/* While merged, the chrome sits on the hero rather than on the header's own
   panel, so it takes the homepage's brighter on-dark values (style.css) instead
   of the dimmer --txt. Home applies these unconditionally because its hero is
   always a dark band; interior heroes follow the theme, so this is scoped to
   dark — in light mode the default navy chrome is already right on the light
   hero. Once .past-hero lands, both fall back to --txt and match again. */
:root[data-theme="dark"] .site-header:not(.past-hero) .nav-link,
:root[data-theme="dark"] .site-header:not(.past-hero) .header-login { color: #eaeefc; }
:root[data-theme="dark"] .site-header:not(.past-hero) .nav-link:hover,
:root[data-theme="dark"] .site-header:not(.past-hero) .header-login:hover { color: #ffffff; }
:root[data-theme="dark"] .site-header:not(.past-hero) .theme-toggle { color: #eaeefc; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .site-header:not(.past-hero) .nav-toggle span { background: #eaeefc; }
.header-inner { display: flex; align-items: center; gap: 20px; padding-block: 7px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; transition: transform var(--t-fast), filter var(--t-fast); }
.brand:hover { transform: translateY(-1px); filter: drop-shadow(0 0 10px rgba(77,127,230,.4)); }
/* Fixed height + natural width, and never let the global img{max-width:100%} squish it */
.brand-logo { height: 14px; width: auto; max-width: none; flex-shrink: 0; }
.logo-on-dark { display: none; } .logo-on-light { display: block; }
:root[data-theme="dark"] .logo-on-dark { display: block; } :root[data-theme="dark"] .logo-on-light { display: none; }
.main-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 5px; color: var(--txt); font-weight: 600; font-size: .89rem; padding: 7px 11px; border-radius: 8px; transition: color var(--t-fast), background var(--t-fast); }
.nav-link .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform var(--t-fast); }
.nav-item:hover .nav-link { color: var(--accent); background: rgba(77,127,230,.08); }
.nav-item:hover .chev { transform: rotate(180deg); }
.nav-item.has-menu { position: relative; }
.nav-wide { position: static; }
.mega { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 120; display: grid; grid-auto-flow: column; gap: clamp(22px, 3vw, 52px); padding: clamp(28px, 2.4vw, 40px) clamp(32px, 3vw, 46px); background: var(--panel-solid); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-1); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px); pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); }
.mega::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.mega-1 { width: min(480px, 92vw); grid-template-columns: 1fr; }
.mega-2 { width: min(78vw, 1160px); grid-auto-flow: row; grid-template-columns: 1fr 1fr minmax(300px, 340px); align-items: start; }
.mega-feature { width: auto; padding: 8px 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.mega-feature .mega-title { border-bottom: 0; padding: 6px 6px 10px; margin-bottom: 4px; }
.feat-media { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2);
  box-shadow: var(--shadow-1); margin-bottom: 13px; }
.feat-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top;
  display: block; transition: transform .5s ease; }
.feat-media:hover img { transform: scale(1.04); }
.feat-name { font-family: var(--font-disp); font-weight: 800; font-size: 1.32rem; color: var(--heading); margin: 0 0 8px; padding: 0 6px; }
.feat-desc { font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.55; color: var(--txt-dim); margin: 0 0 15px; padding: 0 6px; }
.feat-link { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--accent);
  font-family: var(--font-sans); font-weight: 700; font-size: .92rem; transition: gap var(--t-fast); }
.feat-link span { transition: transform var(--t-fast); }
.feat-link:hover span { transform: translateX(4px); }
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%); pointer-events: auto; }
.mega-col { min-width: 0; display: flex; flex-direction: column; }
.mega-title { font-family: var(--font-sans); font-size: .86rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); padding: 8px 16px 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
/* Dropdown link scale — must stay identical to css/style.css (homepage). These
   were a step smaller here, which made the menu visibly different on hover. */
.mega-col a { display: block; padding: 13px 16px; border-radius: 11px; transition: background var(--t-fast); }
.mega-col a b { display: block; color: var(--heading); font-size: 1.26rem; font-weight: 700; line-height: 1.2; }
.mega-col a small { display: block; color: var(--txt-dim); font-size: 1rem; line-height: 1.5; margin-top: 4px; }
.mega-col a:hover { background: rgba(77,127,230,.1); }
.mega-col a:hover b { color: var(--accent); }
.mega-col a.mega-cta { margin: 10px 6px 2px; padding: 11px 14px; border-top: 0; text-align: center;
  position: relative; overflow: hidden; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 6px 12px 28px;
  background: linear-gradient(120deg, var(--accent-bright), var(--accent-2)); color: #00131a;
  font-family: var(--font-sans); font-weight: 800; font-size: .86rem; letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(77,127,230,.28); transition: transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); }
.mega-col a.mega-cta::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, #49299a 0%, #00003b 100%); opacity: 0; transition: opacity .5s var(--ease); }
.mega-col a.mega-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(73,41,154,.4); }
.mega-col a.mega-cta:hover::before { opacity: 1; }
.mega-col a.mega-cta span { transition: transform var(--t-fast); }
.mega-col a.mega-cta:hover span { transform: translateX(4px); }
.header-actions { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-login { color: var(--txt); font-weight: 600; font-size: .92rem; transition: color var(--t-fast); }
.header-login:hover { color: var(--accent); }
.theme-toggle { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--txt); display: grid; place-items: center; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent-bright); transform: translateY(-1px); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-moon { display: none; } .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; } :root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
/* A <button> takes the UA's `buttontext` (black) rather than inheriting; the
   homepage lands on --heading via its own global button reset, so match that. */
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 6px; background: none; border: 0; cursor: pointer; color: var(--heading); }
.nav-toggle span { width: 24px; height: 2px; background: var(--heading); border-radius: 2px; transition: .3s; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================== FOOTER ================================== */
.site-footer { position: relative; background: #0d1240; border-top: 1px solid rgba(255,255,255,.11); overflow: hidden; padding-top: clamp(32px, 3.4vw, 50px); box-shadow: 0 -1px 0 rgba(0,221,221,.14), 0 -22px 46px rgba(0,0,25,.30); }
.footer-social-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: clamp(-40px, -2.6vw, -16px); padding-bottom: clamp(8px, 1.2vw, 15px); }
.footer-certs { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.footer-cert-badge { width: 62px; height: 62px; transition: transform 180ms ease; }
.footer-cert-badge:hover { transform: translateY(-2px) scale(1.04); }
.footer-glow { position: absolute; top: -140px; left: 50%; transform: translateX(-50%); width: 820px; height: 300px; background: radial-gradient(ellipse at center, rgba(77,127,230,.1), transparent 70%); pointer-events: none; }
.footer-main { position: relative; display: grid; grid-template-columns: 1.3fr 2.7fr; gap: clamp(40px,6vw,84px); padding-bottom: clamp(16px, 2vw, 26px); }
.footer-logo { height: 14px; width: auto; margin: 0 0 15px; }
.footer-tag { color: #b9bde0; font-size: .95rem; margin: 0 0 18px; max-width: 42ch; }
.footer-contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; color: #cdd0ec; font-size: .94rem; }
.fc-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(77,127,230,.14); color: var(--accent-bright); flex-shrink: 0; }
.fc-ico svg { width: 14px; height: 14px; }
.footer-contact a { color: inherit; }
.footer-contact a:hover { color: var(--accent-bright); }
.fc-sep { color: rgba(199,203,224,.4); margin: 0 3px; font-weight: 400; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: #cdd0ec; border: 1px solid rgba(255,255,255,.1); transition: all var(--t-fast); }
.footer-social a svg { width: 15px; height: 15px; }
.footer-social a:hover { color: #00131a; background: var(--accent-bright); border-color: var(--accent-bright); transform: translateY(-3px); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.site-footer .footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col h4 { font-family: var(--font-sans); color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 18px; }
.footer-col a { color: #a8ace0; font-size: .92rem; padding: 7px 0; transition: color var(--t-fast), padding-left var(--t-fast); }
.footer-col a:hover { color: var(--accent-bright); padding-left: 6px; }
/* Fully neutralise the OLD footer design in the About body stylesheet
   (styles.css .footer-bottom sets max-width:1200px; margin:0 auto; padding-top:
   2.5rem; display:flex) whose class name collides with the shared footer's
   .footer-bottom and bleeds in — narrowing/centring the bottom bar vs the
   homepage. Reset every one of those properties so it's a plain full-width
   block exactly like the homepage. */
.footer-bottom { position: relative; background: transparent; border: 0; margin: 0; max-width: none; padding: 0; display: block; font-size: inherit; color: inherit; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.footer-copy { color: rgba(200,204,240,.5); font-size: .86rem; margin: 0; }
.footer-meta { display: flex; align-items: center; gap: 24px; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { color: rgba(200,204,240,.5); font-size: .86rem; transition: color var(--t-fast); }
.footer-legal a:hover { color: var(--accent-bright); }

/* ============================== RESPONSIVE =============================== */
@media (max-width: 1024px) {
  .footer-main { grid-template-columns: 1fr; gap: 40px; }
  .footer-social-row { margin-top: 0; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) and (max-width: 1120px) {
  .mega-feature { display: none; }
  .mega-2 { grid-template-columns: 1fr 1fr; }
}
/* 1024, not 768 — the same collapse point as the homepage's copy of this bar in
   style.css, and for the same reason: the desktop header needs 962px of
   viewport, so everything from 769 up rendered it into a space too small and
   pushed the CTA past the right edge, scrolling the whole document sideways.
   The reasoning for 1024 over the tightest workable value is written out in
   style.css. Keep the two files in step — this chrome is meant to render
   identically to the homepage's, and a split breakpoint would show up as the
   header changing shape when you move between pages at the same width.

   The footer rules stay at 768 below, where they were. */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .header-login { display: none; }
  .header-actions { margin-left: auto; gap: 10px; }
  .nav-cta { padding: 9px 14px; font-size: .8rem; }
  .nav-toggle { display: flex; }
  .site-header.nav-open .main-nav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; max-height: 78vh; overflow-y: auto; background: var(--panel-solid); padding: 16px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-1); }
  .site-header.nav-open .nav-item { position: static; }
  .site-header.nav-open .nav-link { justify-content: space-between; padding: 14px 12px; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .site-header .mega { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; display: block; width: auto; min-width: 0; left: auto; margin-left: 0; box-shadow: none; border: 0; background: transparent; padding: 4px 0 10px 12px; }
  .mega-1, .mega-2 { display: block; grid-template-columns: none; width: auto; }
  .mega-1 .mega-col { display: block; }
  .mega-feature { width: auto; margin-left: 0; margin-top: 8px; }
  .mega-title, .mega-col a small { display: none; }
}
@media (max-width: 768px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { flex-wrap: wrap; gap: 16px; }
}
/* Narrow phones: a full-size, undistorted logo and the long "Start a Gap
   Assessment" CTA can't share the bar. Keep the logo at its constant size and
   drop the header CTA here (it stays available in-page and in the hero). */
@media (max-width: 600px) {
  .header-actions .nav-cta { display: none; }
}

/* ===== Make the shared chrome render EXACTLY like the homepage =====
   site-chrome.css loads only on non-home pages (e.g. About), whose body
   stylesheet (styles.css) sets its own fonts, nav underline, and button shine
   on these shared classes. Neutralise them so the header/footer are identical
   to the homepage. */

/* Homepage typography — styles.css nav/buttons use Montserrat (--font-heading),
   which made the header render bigger and bolder than the homepage. */
.site-header .nav-link, .site-header .header-login, .site-header .btn,
.site-header .mega-col a, .site-header .mega-title, .site-header .feat-desc, .site-header .feat-link,
.site-footer, .site-footer a, .site-footer p, .site-footer li, .site-footer .footer-col h4 {
  font-family: var(--font-sans);
}
/* Pin the chrome's line-height to the homepage's body value (1.65). The About
   body stylesheet (styles.css) sets body { line-height: 1.6 }, which the shared
   footer/header would otherwise inherit — making every text line sit slightly
   tighter and the whole footer drift out of alignment vs the homepage. Setting
   it here guarantees identical vertical rhythm on every page, current or new. */
.site-header, .site-footer { line-height: 1.65; }
/* Interior pages inherit Roboto and navy #00003b into the chrome from their own
   body rules, while the homepage inherits Segoe UI and --txt. Anything in the
   menu without an explicit colour/font therefore rendered differently — and
   navy-on-dark is close to invisible. Re-establish the homepage's inherited
   values at the header so the two are the same menu. */
.site-header { color: var(--txt); font-family: var(--font-sans); }
.site-header .feat-name { font-family: var(--font-disp); }
/* The `.site-header h4 { margin: 0 }` reset near the top of this file outranks
   .feat-name's own margin (0,1,1 vs 0,1,0), so the featured-card title lost its
   8px gap here but kept it on the homepage. Restore it at matching weight. */
.site-header .feat-name { margin: 0 0 8px; line-height: 1.05; }
.site-header .nav-link::after { display: none; }   /* homepage nav has no underline */

/* styles.css adds `margin-left: 1.5rem` to .theme-toggle (= 21px at the 88% root),
   which shoves the whole nav 21px left vs the homepage. Remove it so the layout matches. */
.site-header .theme-toggle { margin: 0; }

/* Scroll-progress bar: match the homepage's purple→cyan (styles.css made it cyan→purple→red/pink). */
.scroll-progress span { background: linear-gradient(90deg, var(--purple), var(--accent-bright)); }

/* CTA "Start a Gap Assessment" — identical to the homepage: same gradient, radius
   and a simple lift on hover (kill styles.css's Montserrat, odd radius & shine sweep). */
.site-header .btn.btn-primary {
  font-family: var(--font-sans); border-radius: 6px 12px 28px;
  background: linear-gradient(135deg, #4d7fe6 0%, #7fa0ee 100%); color: #00003b;
  box-shadow: 0 4px 20px rgba(77,127,230,.28);
}
.site-header .btn.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, #49299a 0%, #00003b 100%); opacity: 0;
  transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header .btn.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; z-index: 1;
}
.site-header .btn.btn-primary:hover {
  color: #fff; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(73,41,154,.35);
}
.site-header .btn.btn-primary:hover::before { opacity: 1; }
.site-header .btn.btn-primary:hover::after { left: 140%; }

/* About page footer now matches the home footer exactly — always the dark navy
   design in every theme — so the former light-mode footer "blend" overrides
   (light lavender background + navy text) were removed. */

/* ==================== HEADER / HERO MERGE ==================================
   The homepage merges for free: its whole page sits on one fixed .bg-field, so
   a transparent header shows the same field the hero shows. Interior heroes
   carry their OWN background, so a transparent header there would expose a band
   of body colour above the hero instead of blending into it.

   Fix: pull the hero up by the header's height and give back the same amount as
   a transparent top border. Because backgrounds paint to the border box, the
   hero's gradient runs underneath the header — a real merge — while the border
   keeps the hero's content exactly where it was. The header's z-index (100)
   keeps it above the hero, which is only position:relative.

   --hdr-h is measured and published by js/site-chrome.js; the 54px fallback is
   the desktop bar height, so the layout is still right if the script fails. */
/* Two shapes to cover: most pages put the hero directly after the header, while
   the pages without a .hero (privacy, terms, the blog composer) open with their
   own dark banner section as the first child of <main>. Both merge the same way,
   so the header is transparent over the top band on every page in the site. */
.site-header + .hero,
.site-header + main > :first-child {
  margin-top: calc(-1 * var(--hdr-h, 54px));
  border-top: var(--hdr-h, 54px) solid transparent;
  /* Critical: gradients default to background-origin:padding-box, so they would
     be sized and positioned BELOW the transparent border and then tile into it —
     painting a visibly different band exactly the height of the header. Sizing
     them to the border box instead makes the hero one continuous gradient that
     runs behind the header with no seam. */
  background-origin: border-box;
  /* The hero's own overflow:hidden clips to the PADDING box, i.e. at the border's
     lower edge — so even a layer moved up into the strip painted nothing there.
     `clip` behaves like `hidden` for a non-scrollable box, and clipping to the
     border box instead extends the region by exactly the header's height at the
     top and by nothing on the other three sides (those borders are 0). That lets
     the hero's animation run up behind the transparent header instead of being
     cut off at it. Browsers without overflow-clip-margin fall back to clipping
     at the padding box — today's behaviour, so nothing breaks. */
  overflow: clip;
  overflow-clip-margin: border-box;
}
/* Full-bleed animation layers use inset:0, which resolves against the padding
   box, so they start below the header. Pull them up to the border box so they
   are continuous through it.

   `.site-header.site-header` is repeated only to raise specificity to (0,3,1):
   page stylesheets load after this file and pin these same layers with rules
   like `.page-services .hero .hero-story { inset: 0 }` at (0,3,0), which would
   otherwise win and leave the layer sitting below the header.

   .hero-story is deliberately excluded: those drawings are anchored to
   fractions of the canvas height, so making the canvas 53px taller moved the
   whole diagram 79px up the page — and they paint nothing in the header band
   anyway, so they only stood to lose.

   The `*/` that used to sit at the end of the paragraph above closed this
   comment early, which left the four lines under it as bare text at the top
   level. CSS error recovery skips to the next `}` when it hits that, and the
   next `}` is the end of the rule below — so this rule has been silently
   dropped, and every full-bleed hero layer has been starting below the header
   rather than running up through it. */
.site-header.site-header + .hero > canvas:not(.hero-story),
.site-header.site-header + main > :first-child > canvas:not(.hero-story) {
  top: calc(-1 * var(--hdr-h, 54px));
  height: auto;
  bottom: 0;
}
/* Overlay layers inside the hero are positioned with inset:0, which resolves to
   the padding box and so would stop at the border's lower edge — the same seam
   one layer up. Pull them to the top of the border box too. */
.site-header + .hero::before,
.site-header + .hero::after,
.site-header + main > :first-child::before,
.site-header + main > :first-child::after {
  top: calc(-1 * var(--hdr-h, 54px));
  /* these layers set height:100% (of the padding box), which would keep them the
     old height and just shift them up, leaving their top edge visible as a band.
     Let top/bottom drive the height so they stretch over the border box. */
  height: auto;
  bottom: 0;
}