/* ============================================================
   SHARED STYLES — TheSolutionCounts
   Loaded by index.html and services.html
   ============================================================ */

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* BASE TOKENS */
:root {
  --bg:#FAFAFA; --bg-soft:#F5F5F5; --bg-muted:#EEEEEE;
  --ink:#0e1520; --ink-2:#1a2e4a; --ink-3:#5a6a80; --ink-4:#98a6b8;
  --border:#e2e7ef; --border-dark:#c8d2e0;
  --blue:#1a2e4a; --blue-mid:#2e5fa3; --blue-accent:#2e86c1; --blue-light:#e8f2fb;
  --warm:#9e6b3e; --warm-light:#fdf2e6;
  --radius:10px; --radius-lg:16px; --radius-pill:20px; --section-gap:140px;
}
html { scroll-behavior:smooth; }
body { font-family:'Inter',-apple-system,sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.025; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size:180px; }
::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border-dark);border-radius:4px}

/* SKIP LINK */
.skip-link{position:absolute;top:-100px;left:16px;z-index:9999;padding:10px 20px;background:var(--blue);color:#fff;font-size:13px;font-weight:500;border-radius:0 0 8px 8px;text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}

/* NAV */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:300;background:rgba(250,250,250,0.88);backdrop-filter:blur(24px) saturate(200%);border-bottom:1px solid var(--border);overflow:hidden}
nav{display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:68px;max-width:1440px;margin:0 auto}
.nav-logo img{height:200px;width:auto;display:block}
.nav-links{display:flex;gap:2px}
.nav-links a{font-size:13.5px;font-weight:400;color:var(--ink-3);text-decoration:none;padding:7px 15px;border-radius:var(--radius-pill);transition:background .15s,color .15s;letter-spacing:-.01em}
.nav-links a:hover,.nav-links a.active{background:var(--bg-muted);color:var(--ink)}
.nav-right{display:flex;gap:8px;align-items:center}
.btn-ghost{font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:8px 18px;border-radius:var(--radius-pill);border:1px solid var(--border-dark);transition:all .15s;letter-spacing:-.01em}
.btn-ghost:hover{border-color:var(--ink-3);background:var(--bg-soft);transform:translateY(-1px)}
.btn-solid{font-size:13.5px;font-weight:500;color:#fff;text-decoration:none;padding:8px 18px;border-radius:var(--radius-pill);background:var(--blue-mid);transition:all .15s;letter-spacing:-.01em}
.btn-solid:hover{background:var(--blue);transform:translateY(-1px);box-shadow:0 4px 14px rgba(26,46,74,.25)}

/* FOOTER */
.footer-wrap{background:var(--bg-soft);border-top:1px solid var(--border)}
footer{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:56px;padding:72px 48px 56px;max-width:1440px;margin:0 auto;align-items:start}
.footer-brand-logo{display:block;margin-bottom:20px;margin-left:-26px;overflow:hidden;height:64px}
.footer-brand-logo img{height:200px;width:auto;display:block;margin-top:-76px}
.footer-tagline{font-size:13.5px;color:var(--ink-3);line-height:1.75;max-width:230px;margin-bottom:20px;letter-spacing:-.01em}
.footer-contact-line{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);margin-bottom:7px;text-decoration:none;transition:color .15s;letter-spacing:-.01em}
.footer-contact-line:hover{color:var(--ink)}
.footer-social{display:flex;gap:8px;margin-top:20px}
.footer-social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-dark);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .2s}
.footer-social a[aria-label="LinkedIn"]{color:#0077B5;border-color:#0077B5}
.footer-social a[aria-label="LinkedIn"]:hover{background:#0077B5;color:#fff}
.footer-social a[aria-label="Instagram"]{color:#E1306C;border-color:#E1306C}
.footer-social a[aria-label="Instagram"]:hover{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:transparent;color:#fff}
.footer-col-title{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:20px}
.footer-col-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-col-links a{font-size:13px;color:var(--ink-3);text-decoration:none;transition:color .15s;letter-spacing:-.01em}
.footer-col-links a:hover{color:var(--ink)}
.footer-bottom-wrap{border-top:1px solid var(--border);background:var(--bg-soft)}
.footer-bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 48px;max-width:1440px;margin:0 auto}
.footer-copyright{font-size:12px;color:var(--ink-4)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{font-size:12px;color:var(--ink-4);text-decoration:none;transition:color .15s}
.footer-legal a:hover{color:var(--ink-3)}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none}
.fi{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.fi.visible{opacity:1;transform:none}

/* SHARED ANIMATIONS */
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* ── RESPONSIVE NAV + FOOTER (≤960px) ── */
@media(max-width:960px){
  nav{padding:0 20px}
  .nav-links{display:none}
  .btn-ghost{display:none}
  footer{grid-template-columns:1fr 1fr;gap:36px;padding:48px 20px 40px}
  .footer-brand{grid-column:1/-1}
  .footer-tagline{max-width:100%}
  .footer-bottom-bar{flex-direction:column;text-align:center;padding:16px 20px}
  .footer-legal{flex-wrap:wrap;justify-content:center;gap:12px}
}
@media(max-width:560px){
  nav{padding:0 16px}
  .nav-right .btn-solid{font-size:12.5px;padding:7px 14px}
  footer{grid-template-columns:1fr;gap:32px;padding:40px 16px 32px}
  .footer-bottom-bar{padding:14px 16px}
}