:root{
      --ink:#ffffff;
      --muted:#b8c1cc;
      --bg:#141516;            /* page background (dark) */
      --panel:#101113;         /* cards/hero base */
      --brand:#2f79ff;         /* blue accent */
      --lime:#7be000;          /* lime accent */
      --soft:#22252b;          /* soft borders */
      --bluePane:#2a63ff;      /* bottom contact section */
      --radius:16px;
      --wrap:1120px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
      color:var(--ink);
      background:var(--bg);
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
    .stack{display:flex;flex-direction:column;max-width:480px;gap:16px}
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 18px;
      border-radius: 999px;
      background: var(--brand);
      color: #fff;
      font-weight: 700;
      text-align: center;
      max-width: 400px;
      width: 100%;
      box-sizing: border-box;
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .btn:hover {
    background: #5c8aff; /* lighter blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    }

    .btn:active {
    background: #244fd1; /* slightly darker when clicked */
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    }
    .eyebrow{font-size:16px;color:var(--muted)}
    .lead{font-size:18px;color:var(--muted)}
    .kicker{letter-spacing:.4px;text-transform:uppercase;font-size:12px;color:var(--muted)}
    h1,h2,h3{margin:0 0 8px}
    h1{font-size:clamp(36px,5vw,56px);line-height:1.06}
    h2{font-size:clamp(22px,3.2vw,32px)}
    h3{font-size:18px}

    /* Header */
    .site-header{
      position:sticky;top:0;z-index:20;
      background:rgba(16,17,19,.8);backdrop-filter:saturate(130%) blur(8px);
      border-bottom:1px solid var(--soft);
    }
    .nav{
      height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;
    }
    .brand{
      display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;
    }
    .logo-img {
      height: 40px;
      width: auto;
      display: block;
      object-fit: contain;
      margin-left: 12px;
    }
    .brand span{opacity:.9}
    .nav-links{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
    .nav-links a{color:var(--muted)}
    .nav-links a:hover{color:#fff}

    /* Hero */
    .hero{padding:72px 0;border-bottom:1px solid var(--soft)}
    .hero-grid{
      display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;
    }
    .hero-grid .stack {
      align-items: center;        /* centers all items inside the stack */
    }
    .illus-placeholder { width:100%; max-width:500px; position:relative; margin:0 auto; }
    .illus-placeholder .illus-img { width:100%; height:auto; display:block; object-fit:contain; }

    /* Hero-only: remove constraints that cause cropping */
    .hero-image { max-width:900px; aspect-ratio:auto; overflow:visible; }
    .hero-image .illus-img { height:auto !important; }

    /* Big statement */
    .statement{padding:72px 0;text-align:center}
    .statement p{
      margin:0 auto;max-width:900px;
      font-size:clamp(18px,2.8vw,28px);line-height:1.35;font-weight:700;
    }
    .statement .brand-inline{color:var(--lime);font-weight:800}

    .center-illus{margin:32px auto 0;max-width:640px}
    .center-illus .illus-placeholder{aspect-ratio:16/10}

    /* Services */
    .services{padding:72px 0}
    .services .intro{max-width:760px}
    .cards {
      margin-top: 28px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }
    .card{
      background:#2a63ff;border:1px solid var(--soft);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:10px;transition: all 0.25s ease;
    }
    .card:hover {
        background: #5c8aff; /* lighter shade of your blue */
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    }
    .icon-placeholder{width:44px;height:44px;border-radius:12px;background:#1f2430;border:1px solid var(--soft)}
    .card p{color:var(--muted);margin:0}

    /* Split section (Not noticed? fixes that.) */
    .split{padding:72px 0}
    .split-grid{
      display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;
    }
    .card a {
    display: block;
    color: inherit;
    text-decoration: none;
    line-height: 1.4;
    }

    .card a > .icon-placeholder {
    margin-bottom: 16px; /* restore original spacing */
    }

    .card a > h3 {
    margin-top: 16px;
    }
    .card .btn {
    margin: 12px auto 0 auto; /* centers horizontally */
    display: inline-block;    /* ensures margin:auto works */
    }
    .panel{
      background:#1a2031;border-radius:28px;padding:28px;
    }
    .panel h3{font-size:clamp(22px,2.6vw,28px)}
    .panel strong{color:var(--lime)}
    .circle-illus{
      width:100%;aspect-ratio:1/1;border-radius:50%;
      background:repeating-linear-gradient(45deg,#1e2127 0 10px,#20242a 10px 20px);
      border:1px dashed var(--soft);
    }

    /* Contact (blue band) */
    .contact{background:var(--bluePane);margin-top:72px}
    .contact .wrap{padding:72px 20px}
    .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
    .contact .panel{background:#2a63ff}
    .contact h2{margin-bottom:12px}
    .contact .info{line-height:1.9}
    .contact a{color:#fff;text-decoration:underline}

    /* Footer */
    footer{padding:28px 0;color:#d0d7e5;opacity:.7}

    /* Utilities */
    .sp-8{height:8px}.sp-16{height:16px}.sp-24{height:24px}.sp-32{height:32px}

    /* Responsive */
    @media (max-width: 900px){
      .hero-grid {
        text-align: center;
        justify-items: center;      
      }
      .split-grid, .contact-grid{grid-template-columns:1fr}
      .nav{height:auto;padding:12px 0}
      .nav-links{gap:12px}
    }
    @media (max-width: 520px){
      .cards{grid-template-columns:1fr}
      .btn{width:100%;text-align:center}
    }
    @media (max-width: 900px) {
    .hero-grid {
      grid-template-columns: 1fr;     /* keeps it vertical stack */
      justify-items: center;          /* centers the items horizontally */
    }

    .hero-grid .stack {
      align-items: center;            /* centers content within the text block */
      text-align: center;
      max-width: 90%;                 /* prevents text from stretching too wide */
    }

    .hero-grid .illus-placeholder {
      margin-top: 24px;               /* add a bit of spacing below text */
    }
    /* page-specific override */
    .blog .hero-grid {
        justify-items: center;
        text-align: center;
    }

    /* Shared image layout for blog list + posts */
    .blog .illus-placeholder {
      display: flex;
      justify-content: center;
      margin: 24px auto 0;
      max-width: 350px;
    }

    .blog .illus-img {
      margin: 0 auto;
      max-width: 80%;
      height: auto;
    }

    /* Optional modifier for top hero images */
    .blog .illus-img.blog-hero {
      width: 60%;       /* scales nicely on small screens */
      max-width: 80%;
      height: auto;
      margin: 0 auto;
    }
  }
/* ---- BLOG POST: Align headings, paragraphs, and lists on the same left edge ---- */
.blog #content.post-body {
  /* optional but helps consistent wrapping */
  max-width: 750px;
  margin: 0 auto;
}

/* Headings + body copy share the same left edge */
.blog #content.post-body h2,
.blog #content.post-body h3,
.blog #content.post-body p,
.blog #content.post-body ul {
  text-align: left;          /* kill center align on lists */
  margin-left: 0;            /* ensure no stray negative/extra margins */
}

/* Lists: keep markers in a small gutter and align list TEXT with paragraphs */
.blog #content.post-body ul {
  list-style: disc outside;  /* marker outside the text block */
  padding-left: 1.25rem;     /* creates a gutter for the bullet */
  margin: 0.5rem 0 1rem;     /* your existing vertical rhythm */
}

/* Make li text the same size/leading as paragraphs */
.blog #content.post-body p,
.blog #content.post-body li {
  font-size: 1em;
  line-height: 1.75;
  letter-spacing: 0.1px;
}

/* Optional: slightly larger subheads so they read like section titles */
.blog #content.post-body h2 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.25;
  margin: 1.5rem 0 0.75rem;
}
.blog #content.post-body h3 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.35;
  margin: 1.25rem 0 0.5rem;
}

/* Text links inside article body (restore blue + underline) */
.blog #content.post-body p a,
.blog #content.post-body li a,
.blog #content.post-body .lead a {
  color: #2a63ff;
  text-decoration: underline;
}

.blog #content.post-body p a:hover,
.blog #content.post-body li a:hover,
.blog #content.post-body .lead a:hover {
  color: #1a49cc;
  text-decoration-thickness: 2px;
}

/* Ensure buttons remain button-styled (no underline/color override) */
.blog #content.post-body a.btn,
.blog .blog-nav a.btn {
  text-decoration: none !important;
  /* omit color here so your existing .btn color rules win */
}
/* Layout for blog post navigation buttons (reuse existing .btn) */
.blog .blog-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;         /* space between your existing buttons */
  flex-wrap: wrap;   /* stack on small screens */
  margin-top: 24px;
}

/* Make blog article paragraphs slightly lighter */
.blog #content.post-body p,
.blog #content.post-body li {
  font-weight: 400;     /* normal weight */
  color: var(--muted);       /* optional: a softer black for easier reading */
}

  .icon-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none; /* remove gray placeholder background */
    border: none;
  }

  .icon-placeholder img.icon-img {
    width: 100%;
    height: 100%;
    padding: 2px 2px;
    object-fit: contain; /* keeps full icon visible */
    display: block;
  }

  .image-row {
    display: flex;
    gap: 20px;
    justify-content: center; /* centers horizontally */
    flex-wrap: wrap;         /* stacks them on small screens */
  }

  .image-row .illus-placeholder {
    flex: 1 1 300px;         /* each image can shrink or grow */
    max-width: 400px;
    border: none;
  }
  .nav-logo {
    height: 40px;         /* fixed, doesn’t shrink */
    width: auto;
    display: block;
    object-fit: contain;
    margin-left: 12px;    /* add spacing from left edge */
  }

  .social {
    margin-top: 12px;
  }

  .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
  }

  .social-link:hover {
    opacity: 0.7;
  }

  .social-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-top: 6px;
  }

    /* Focus */
    :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}