/* SIMPLIXITY — AI page's navigation parity with the site's standard header.
   Matches assets/css/styles.css + simplixity-brand-theme.css (Oct 2026).
   Intentionally scoped to .site-header and .topline so AI landing-page
   typography and artwork are not affected. */
.topline {
  background:#081b22; color:#c8dcde; font-size:11px; font-weight:700; letter-spacing:.025em;
}
.topline .container {
  max-width:1280px; width:auto; padding:0 28px; margin-inline:auto;
}
.topline .topline-inner {
  height:34px; min-height:34px; display:flex;align-items:center;justify-content:center;gap:10px;
}
.topline .topline-inner > a {
  display:inline-flex; align-items:center; gap:4px; color:#f4f9f8; margin-left:8px; font-weight:700;
}
.topline .topline-inner > a:hover {color:#b4da89}
.topline .pulse-dot {width:7px;height:7px;display:inline-block;flex-shrink:0;border-radius:50%;background:#b2db8b;box-shadow:0 0 0 4px rgba(178,219,139,.12)}
.site-header {
  height:78px; min-height:0; background:rgba(255,255,255,.975); border-bottom:1px solid #e7eced;
  position:sticky; top:0;z-index:100;backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px); transition:box-shadow .25s;
}
.site-header.scrolled {box-shadow:0 9px 25px rgba(8,30,37,.065)}
.site-header .container {max-width:1280px; width:auto;padding:0 28px;margin-inline:auto}
.site-header .nav-inner {height:100%;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:25px}
.site-header .brand {display:inline-flex;align-items:center;gap:11px;white-space:nowrap;flex:0 0 auto}
.site-header .brand-mark {
  display:grid;place-items:center;position:relative;transform:rotate(-8deg);width:36px;height:36px;
  background:#b4dd88;border-radius:11px;flex:0 0 auto;
}
/* The original AI page draws the logo with pseudo-elements; this sync uses
   the same nested-elements logo as the rest of the website. */
.site-header .brand-mark::before,.site-header .brand-mark::after {content:none;display:none}
.site-header .brand-mark-inner {display:block;width:15px;height:15px;border:5px solid #153733;border-right-color:#153733;border-radius:6px;transform:rotate(0deg)}
.site-header .brand-mark-dot {display:block;position:absolute;width:6px;height:6px;top:-2px;right:-2px;border:1px solid white;border-radius:50%;background:#4dbbd2}
.site-header .brand-word {color:#103037;font:800 25px/1 'Manrope',sans-serif;letter-spacing:-.072em}
.site-header .brand-period {color:#89bc62}
.site-header .desktop-nav {display:flex;align-items:center;gap:23px;margin-left:auto;white-space:nowrap}
.site-header .desktop-nav .nav-link {position:relative;color:#506167;font-size:12px;font-weight:700;letter-spacing:-.015em;white-space:nowrap;transition:color .2s}
.site-header .desktop-nav .nav-link:hover,.site-header .desktop-nav .nav-link.is-current {color:#0e3942}
.site-header .desktop-nav .nav-link.is-current::after {content:'';position:absolute;height:3px;background:#a7d578;border-radius:3px;bottom:-31px;left:0;right:0}
.site-header .nav-actions {display:flex;align-items:center}
.site-header .nav-contact {height:43px;padding:0 19px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:14px;background:#0d2b33;color:white;font-size:12px;font-weight:800;transition:background .2s,transform .2s;white-space:nowrap}
.site-header .nav-contact:hover {background:#21545c;transform:translateY(-2px)}
.site-header .nav-contact svg {width:16px;height:16px;flex:0 0 auto}
.site-header .mobile-toggle {width:44px;height:44px;background:#ecf3f3;border:1px solid #d9e5e6;border-radius:12px;color:#163339;display:none;align-items:center;justify-content:center;cursor:pointer}
.site-header .mobile-nav {display:none}
.site-header .mobile-nav[hidden] {display:none!important}
@media(max-width:1220px) and (min-width:1001px) {
  .site-header .desktop-nav {gap:13px}
  .site-header .desktop-nav .nav-link {font-size:11px}
  .site-header .brand-word {font-size:24px}
}
@media (min-width:1001px) and (max-width:1260px) {
  .site-header .desktop-nav {gap:12px}
  .site-header .desktop-nav .nav-link {font-size:11px}
  .site-header .nav-inner {gap:14px}
  .site-header .nav-contact {padding:0 13px}
}
@media (max-width:1140px) and (min-width:1001px) {
  .site-header .brand-word {font-size:22px}
  .site-header .desktop-nav {gap:10px}
}
@media(max-width:1000px) {
  .site-header {height:78px}
  .site-header .desktop-nav {display:none}
  .site-header .mobile-toggle {display:flex}
  .site-header .mobile-nav {
    position:absolute;left:0;right:0;top:100%;padding:18px 26px 27px;
    background:#f8faf9;box-shadow:0 25px 40px rgba(6,34,39,.15);
    border-top:1px solid #e2eaeb;max-height:calc(100vh - 105px);overflow:auto;z-index:101;
  }
  .site-header .mobile-nav:not([hidden]) {display:flex;flex-direction:column;gap:0}
  .site-header .mobile-nav .nav-link {color:#193e46;padding:13px 6px;font-size:15px;font-weight:700;border-bottom:1px solid #edf1f0;background:none;border-radius:0}
  .site-header .mobile-nav .nav-link.is-current {color:#237484}
  .site-header .mobile-contact {margin-top:17px;background:#b4da89;color:#112e29;padding:16px;border-radius:12px;font-weight:800;display:flex;justify-content:space-between}
}
@media(max-width:720px) {
  .topline .container,.site-header .container {padding-left:20px;padding-right:20px}
  .topline .topline-inner {font-size:10px;line-height:1.2;text-align:center}
  .topline .topline-inner > a {display:none}
  .site-header {height:70px}
  .site-header .brand-word {font-size:25px}
  .site-header .brand-mark {width:34px;height:34px}
  .site-header .nav-contact {display:none}
}
@media(max-width:420px) {
  .topline .container,.site-header .container {padding-left:17px;padding-right:17px}
  .topline .topline-inner > span:nth-child(2) {font-size:9px}
}