/* ==========================================================
   LogiX MSP shared styles: header, footer, and site-wide basics.
   Page-specific styles live in /assets/css/pages/<page>.css
   Everything here is prefixed "lx-" so it never collides with page styles.
   ========================================================== */
:root{
  --lx-yellow:#fdbb22;
  --lx-red:#f20d0d;
  --lx-ink:#111111;
  --lx-muted:#5f6368;
  --lx-line:#e9e9e9;
  --lx-max:1180px;
}
html{scroll-padding-top:96px}
body{margin:0;background:#fff;color:var(--lx-ink);font-family:Arial,Helvetica,sans-serif}
.lx-wrap{width:min(var(--lx-max),92%);margin:0 auto}
.lx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lx-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#111;color:#fff;padding:10px 16px;border-radius:6px;font-weight:700}
.lx-skip:focus{left:12px}
.lx-header :focus-visible,.lx-footer :focus-visible{outline:3px solid var(--lx-yellow);outline-offset:3px}

/* ---------- Header ---------- */
.lx-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--lx-line);font-family:Arial,Helvetica,sans-serif}
.lx-header .lx-wrap{width:min(1320px,94%)}
.lx-header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.lx-header a{color:var(--lx-ink);text-decoration:none}
.lx-logo{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.lx-logo img{height:32px;width:auto;display:block}
.lx-tagline{font-family:'Poppins',Arial,sans-serif;font-size:8.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#111;white-space:nowrap}
.lx-tagline b{color:var(--lx-red)}
.lx-nav{display:flex;align-items:center;gap:22px}
.lx-menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.lx-menu > li{position:relative}
.lx-menu a,.lx-sub-toggle{white-space:nowrap;display:flex;align-items:center;gap:4px;padding:10px 11px;border-radius:6px;font-family:'Poppins',Arial,sans-serif;font-weight:600;font-size:14.5px;color:var(--lx-ink);background:none;border:0;cursor:pointer;line-height:1.2}
.lx-menu a:hover,.lx-sub-toggle:hover{color:var(--lx-red)}
.lx-menu a[aria-current="page"],.lx-has-sub.lx-active > .lx-sub-toggle{color:var(--lx-red)}
.lx-sub-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.lx-sub{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--lx-line);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s ease}
.lx-sub a{padding:10px 12px;font-size:14px;font-weight:600}
.lx-sub a:hover{background:#fff5d7;color:var(--lx-ink)}
.lx-has-sub:hover > .lx-sub,.lx-has-sub:focus-within > .lx-sub,.lx-has-sub.lx-open > .lx-sub{opacity:1;visibility:visible;transform:none}
.lx-has-sub.lx-open > .lx-sub-toggle svg{transform:rotate(180deg)}
.lx-nav-actions{display:flex;align-items:center;gap:14px}
.lx-phone{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:14.5px;white-space:nowrap}
.lx-header a.lx-phone:hover{color:var(--lx-red)}
.lx-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border-radius:999px;background:var(--lx-yellow);color:#111 !important;font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:14px;letter-spacing:.02em;white-space:nowrap;text-decoration:none;transition:background .15s ease}
.lx-cta:hover{background:#ffd15c}
.lx-menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--lx-line);border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center}
.lx-burger,.lx-burger:before,.lx-burger:after{display:block;width:20px;height:2px;background:#111;border-radius:2px;position:relative;transition:.2s ease}
.lx-burger:before,.lx-burger:after{content:"";position:absolute;left:0}
.lx-burger:before{top:-6px}.lx-burger:after{top:6px}
.lx-menu-toggle[aria-expanded="true"] .lx-burger{background:transparent}
.lx-menu-toggle[aria-expanded="true"] .lx-burger:before{top:0;transform:rotate(45deg)}
.lx-menu-toggle[aria-expanded="true"] .lx-burger:after{top:0;transform:rotate(-45deg)}

@media (max-width:1380px){
  .lx-phone{display:none}
  .lx-menu a,.lx-sub-toggle{padding:10px 8px;font-size:14px}
}
@media (max-width:1140px){
  .lx-menu-toggle{display:inline-flex}
  .lx-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--lx-line);box-shadow:0 18px 30px rgba(0,0,0,.08);padding:10px 4% 22px;max-height:calc(100vh - 88px);overflow-y:auto}
  .lx-nav.lx-nav-open{display:flex}
  .lx-menu{flex-direction:column;align-items:stretch;gap:0}
  .lx-menu a,.lx-sub-toggle{width:100%;justify-content:space-between;padding:14px 6px;font-size:16px;border-bottom:1px solid #f1f1f1;border-radius:0}
  .lx-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 6px 12px;display:none;min-width:0}
  .lx-has-sub:hover > .lx-sub,.lx-has-sub:focus-within > .lx-sub{display:none}
  .lx-has-sub.lx-open > .lx-sub{display:block}
  .lx-sub a{border-bottom:0;padding:11px 6px;font-size:15px}
  .lx-nav-actions{flex-direction:column;align-items:stretch;margin-top:16px}
  .lx-phone{display:block;text-align:center;padding:8px}
  .lx-cta{min-height:50px}
}
@media (max-width:420px){.lx-tagline{display:none}.lx-logo img{height:26px}}

/* ---------- Footer ---------- */
.lx-footer{background:#111;color:#c9c9c9;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;border-top:5px solid var(--lx-yellow)}
.lx-footer a{color:#e6e6e6;text-decoration:none}
.lx-footer a:hover{color:var(--lx-yellow)}
.lx-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lx-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding:64px 0 44px}
.lx-footer-brand img{height:27px;width:auto;display:block;margin-bottom:18px}
.lx-footer-brand p{max-width:300px;margin:0 0 22px}
.lx-hl{color:var(--lx-yellow)}
.lx-area{color:#9a9a9a;font-size:14px;margin-top:6px !important}
.lx-social{display:flex !important;gap:10px;margin:0 0 22px !important}
.lx-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#1f1f1f;border:1px solid #2c2c2c;transition:.15s ease}
.lx-social a:hover{background:var(--lx-yellow)}
.lx-social svg{width:18px;height:18px;fill:#e6e6e6}
.lx-social a:hover svg{fill:#111}
.lx-mt-btn{margin-top:18px}
.lx-footer .lx-cta{background:var(--lx-yellow);color:#111 !important}
.lx-footer .lx-cta:hover{background:#ffd15c}
.lx-footer-h{font-family:'Poppins',Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.lx-mt{margin-top:28px}
.lx-footer a.lx-emerg{color:#ff6b6b;font-weight:700}
.lx-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px 0 26px;border-top:1px solid #2a2a2a;font-size:13.5px;color:#9a9a9a}
@media (max-width:900px){.lx-footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lx-footer-grid{grid-template-columns:1fr;gap:30px;padding-top:48px}}

@media (prefers-reduced-motion:reduce){.lx-header *,.lx-footer *{transition:none !important}}

/* Images with width/height attributes keep their aspect ratio when CSS sets the width */
:where(img[width][height]){height:auto}

/* ---------- Client result (service pages) ---------- */
.lx-story{background:#f7f7f5;padding:72px 0;font-family:Arial,Helvetica,sans-serif;color:#111}
.lx-story-wrap{width:min(900px,92%);margin:0 auto}
.lx-story-eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lx-red);margin-bottom:10px}
.lx-story-h{font-family:'Poppins',Arial,sans-serif;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em;margin:0 0 18px}
.lx-story-q{margin:0 0 22px;font-size:18px;line-height:1.65;color:#2b2b2b;border-left:4px solid var(--lx-yellow);padding-left:20px}
.lx-story-q strong{color:#111}
.lx-story-by{display:flex;align-items:center;gap:12px;font-size:14.5px;color:#5f6368;line-height:1.45}
.lx-story-by strong{color:#111}
.lx-story-av{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#111;color:var(--lx-yellow);display:grid;place-items:center;font-family:'Poppins',Arial,sans-serif;font-weight:700}
.lx-story-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.lx-story-stats>div{background:#fff;border:1px solid var(--lx-line);border-radius:14px;padding:16px}
.lx-story-v{font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:22px;color:#111}
.lx-story-l{font-size:13px;color:#5f6368;margin-top:2px}
.lx-story-more{display:inline-block;margin-top:24px;font-weight:800;color:#111;text-decoration:none;border-bottom:2px solid var(--lx-red);padding-bottom:2px}
.lx-story-more:hover{color:var(--lx-red)}
@media(max-width:600px){.lx-story-stats{grid-template-columns:1fr}}

/* Plain "what, who, where" line under service page headlines */
.lx-arealine{font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;font-weight:600;color:inherit;opacity:.82;max-width:620px;margin:0 0 26px}

/* ---------- FAQ (service pages) ---------- */
.lx-faq{background:#fff;padding:72px 0;font-family:Arial,Helvetica,sans-serif;color:#111}
.lx-faq-wrap{width:min(900px,92%);margin:0 auto}
.lx-faq-eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lx-red);margin-bottom:10px}
.lx-faq-h{font-family:'Poppins',Arial,sans-serif;font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.01em;margin:0 0 24px}
.lx-faq-item{border-bottom:1px solid var(--lx-line)}
.lx-faq-item:first-of-type{border-top:1px solid var(--lx-line)}
.lx-faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:17px;line-height:1.35}
.lx-faq-item summary::-webkit-details-marker{display:none}
.lx-faq-item summary::after{content:"+";flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#f7f7f5;display:grid;place-items:center;font-size:20px;font-weight:400;color:#111}
.lx-faq-item[open] summary::after{content:"\2212";background:var(--lx-yellow)}
.lx-faq-item summary:focus-visible{outline:3px solid var(--lx-yellow);outline-offset:4px}
.lx-faq-item p{margin:0 0 22px;font-size:16px;line-height:1.7;color:#3a3a3a;max-width:780px}