/* Base (theme, reset, typography) */
      
    /* Variable Poppins, adjust weight range to what you actually use */
    @font-face{
      font-family:"Poppins";
      src:url("/assets/fonts/poppins-vf.woff2") format("woff2-variations");
      font-weight:400 500 600 700 800 900;
      font-style:normal;
      font-display:swap; /* prevents blocking, avoids FOIT */
    }
    
    :root {
        --brand: #183B66;
        --accent: #F39200;
        --text: #14233B;
        --muted: #6B778C;
        --bg: #183b660d;
        --bg-alt: #F7F9FC;
        --radius: 14px;
        --shadow: 0 4px 20px rgba(24, 59, 102, .08);
        font-family: "Poppins", "Poppins Fallback", sans-serif;
;
    }

    * {
        box-sizing: border-box;
    }

    img,
    svg,
    video {
        display: block;
        max-width: 100%;
        height: auto
    }

    a {
        color: var(--brand)
    }

    a:hover {
        opacity: .9
    }

    h1,
    h2,
    h3,
    h4 {
        line-height: 1.2;
        margin: 0 0 .5em
    }

    p {
        margin: 0 0 1em;
    }

    small,
    .muted {
        color: var(--muted)
    }

    .brand img {
        height: 69px;
        width: 99px;
    }


    /* roomier vertical rhythm */
    .section {
        padding: 64px 16px;
        margin: 32px 16px 16px;
    }

    @media (max-width: 768px) {
        .section {
            padding: 48px 0
        }
    }

    .grid {
        display: grid;
        gap: 24px
    }

    /* more space between cards */

    .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        border-radius: 999px;
        border: 1px solid transparent;
        padding: 12px 18px;
        text-decoration: none;
        cursor: pointer
    }

    .btn--primary {
        background: var(--brand);
        color: #fff
    }

    .btn--accent {
        background: var(--accent);
        color: #fff
    }

    .card {
        background: #fff;
        border: 1px solid #e8edf3;
        border-radius: var(--radius);
        padding: 22px;
        box-shadow: var(--shadow)
    }

    .badge {
        display: inline-block;
        padding: .35em .6em;
        border-radius: 999px;
        background: var(--bg-alt);
        font-size: .85rem;
        color: var(--brand)
    }

    input,
    select,
    textarea {
        font: inherit
    }

    input[type="email"],
    input[type="text"],
    textarea {
        width: 100%;
        border: 1px solid #d7dee8;
        border-radius: 10px;
        padding: 12px 14px
    }

    label {
        font-weight: 500
    }

    .visually-hidden {
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px)
    }

.site-header{ position: fixed; top:0; left:0; right:0; z-index:1000; background:#fff;   font-family: "Poppins", sans-serif;
}


.nav{justify-content:space-between;  }
.primary{ display:flex; align-items:center; gap:18px; position:relative; }

/* Top-level links AND dropdown triggers share the same style */
.primary > a,
.primary .nav-item > .nav-link{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text, #0f3b62);
  font-weight: 500;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.primary > a:hover,
.primary .nav-item > .nav-link:hover{
  background: rgba(24,59,102,.06);
}
.primary > a:focus,
.primary .nav-item > .nav-link:focus{
  outline: 2px solid rgba(24,59,102,.25);
  outline-offset: 2px;
}

.nav-item{ position:relative; display:inline-flex; align-items:center; }



/* ===== Mega menu (Industries) ===== */
.mega{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:calc(100% + 6px);
  width:85vw;
  background:#fff;
  border-top:1px solid #e8edf3;
  box-shadow:0 18px 40px rgba(24,59,102,.16);
  padding:28px 0;
  display:none;
  z-index:20;
}
.mega-inner{ width:min(1000px,90vw); margin:0 auto; }
.mega-cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0 48px;
}
.mega-col ul{ margin:0; padding:0; list-style:none; }
.mega-link-line{
  display:block;
  padding:12px 0;
  color:#0f3b62;
  text-decoration:none;
  border-bottom:1px solid #eef3f8;
  white-space:normal;
}
.mega-col li:last-child .mega-link-line{ border-bottom:0; }
.mega-link-line:hover{ color:#163d62; text-decoration:underline; }
.mega-foot{ display:flex; justify-content:flex-end; margin-top:14px; }

/* Desktop: show panels on hover/focus */
@media (min-width:1101px){
  .nav-item[data-dropdown]:hover > .mega,
  .nav-item[data-dropdown]:focus-within > .mega{ display:block; }
  .nav-item[data-dropdown]:hover > .dropdown,
  .nav-item[data-dropdown]:focus-within > .dropdown{ display:block; }
}

/* ===== Small dropdown (Insights) ===== */
.nav-item .dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:12px;
  box-shadow:0 18px 40px rgba(24,59,102,.16);
  padding:8px;
  min-width:220px;
  display:none;
  z-index:20;
}
.nav-item .dropdown a{
  display:block;
  padding:10px 12px;
  color:#0f3b62;
  text-decoration:none;
  border-radius:8px;
  white-space:nowrap;
}
.nav-item .dropdown a:hover{ background:rgba(24,59,102,.06); }

/* ===== Tablet ONLY (881px–1100px)
   Keep nav in one row; just hide panels. No wrapping. ===== */
@media (min-width:881px) and (max-width:1100px){
  .primary{ flex-wrap:nowrap; gap:14px; }
  .nav-item[data-dropdown] > .mega,
  .nav-item[data-dropdown] > .dropdown{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
  }
}

/* ===== Mobile (≤880px)
   Use slide-down menu (toggle .open via hamburger JS) ===== */
@media (max-width:880px){
  .hamburger{ display:block; margin-left:auto; }
  nav.primary{
    display:none;
    position:absolute;
    inset:64px 0 auto 0;
    background:#fff;
    border-bottom:1px solid #e8edf3;
    padding:12px 16px;
  }
  nav.primary.open{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  nav.primary a,
  .primary .nav-item > .nav-link{
    display:block;
    width:100%;
    padding:12px 8px;
    border-radius:10px;
    background:transparent;
    text-align:left;
  }
  .nav-item{ width:100%; }

  /* Panels always hidden on mobile */
  .nav-item[data-dropdown] > .mega,
  .nav-item[data-dropdown] > .dropdown{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
  }
}

/* ===== Accessibility: touch devices keep large tap area ===== */
@media (hover:none){
  .primary .nav-item > .nav-link{ min-height:44px; padding:10px 12px; }
}


/* keep the one spacer you added on <main> earlier */
.site-header{
  position: fixed !important; /* win against earlier rules */
  top: 0; left: 0; right: 0;
  z-index: 1000;              /* raise if you have overlays */
  background: #fff;
}
/* replace selectors with your actual wrappers */
.site, .site-wrap, .page, .app, .shell {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

:root { --hdr-h: 72px; }
/*main { padding-top: var(--hdr-h); display: flow-root; }*/
html { scroll-padding-top: var(--hdr-h); }









    @media (min-width:768px) {
        .grid-3 {
            grid-template-columns: repeat(3, 1fr)
        }

        .grid-2 {
            grid-template-columns: repeat(2, 1fr)
        }

        .grid-4 {
            grid-template-columns: repeat(4, 1fr)
        }
    }