/* ═══════════════════════════════════════
       PRIMARY:   Powder Blue  #6BACE4
       SECONDARY: Burgundy     #6f263d
    ═══════════════════════════════════════ */
    :root {
      --bg: #ffffff;
      --bg-subtle: #f3f8fb;
      --bg-card: #ffffff;
      --ink: #0c1d26;
      --steel: #39515d;
      --rule: #d0e6ef;

      --blue: #6BACE4;
      --blue-dark: #1e6b8a;
      --blue-mid: #6f263d;
      --blue-light: #ddf0f8;
      --blue-pale: #eef7fb;

      --burg: #6f263d;
      --burg-dark: #4f1220;
      --burg-mid: #8B2035;
      --burg-light: #f8eaec;

      --nav-bg: rgba(255, 255, 255, .94);
      --icons: #0c1d26;
    }

    .dark {
      --bg: #060f14;
      --bg-subtle: #0d1e27;
      --bg-card: #102030;
      --ink: #e2f0f6;
      --steel: #a7c0d6;
      --rule: #1a3a4e;

      --blue: #6BACE4;
      --blue-dark: #6dd0eb;
      --blue-mid: #6f263d;
      --blue-light: #082030;
      --blue-pale: #051520;

      --burg: #6F263D;
      --burg-dark: #4f1220;
      --burg-mid: #8B2035;
      --burg-light: #f8eaec;

      --nav-bg: rgba(6, 15, 20, .94);
      --icons: #e2f0f6;
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Libre Franklin', system-ui, sans-serif;
      color: var(--ink);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      transition: background .3s, color .3s
    }

    /* Nav */
    .nav-link {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--steel);
      text-decoration: none;
      position: relative;
      transition: color .2s
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--blue);
      transition: width .25s ease
    }

    .nav-link:hover {
      color: var(--blue)
    }

    .nav-link:hover::after {
      width: 100%
    }

    /* Theme toggle */
    .theme-btn {
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 50%;
      flex-shrink: 0;
      border: 1.5px solid var(--rule);
      background: var(--bg-card);
      color: var(--steel);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color .2s, color .2s
    }

    .theme-btn:hover {
      border-color: var(--blue);
      color: var(--blue)
    }

    .icon-sun {
      display: none
    }

    .dark .icon-sun {
      display: block
    }

    .dark .icon-moon {
      display: none
    }

    /* Anim */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(26px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .fade-up {
      opacity: 0;
      animation: fadeUp .7s ease forwards
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    /* Labels */
    .sec-label {
      font-size: .66rem;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--blue);
      display: block;
      margin-bottom: .55rem
    }

    /* Canvas for sections (used by hero, bento, etc.) */
    .section-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0
    }

    /* control panel styling for dark mode */
    .dark .particle-panel {
      background: rgba(6, 15, 20, .92);
      color: var(--ink)
    }

    /* ensure the controls panel background flips with theme */
    .particle-panel {
      background: rgba(255, 255, 255, .92);
      color: var(--ink)
    }

    .dark #toggleParticlePanel {
      background: var(--blue-dark);
      color: #fff
    }

    .hero-inner {
      position: relative;
      z-index: 1
    }

    /* Bento */
    .bento {
      background: var(--bg-subtle);
      border: 1px solid var(--rule);
      border-radius: 1.25rem;
      padding: 1.75rem 2rem;
      transition: transform .2s, box-shadow .22s
    }

    .bento:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 44px rgba(42, 138, 175, .12)
    }

    .bento-num {
      font-size: clamp(2.4rem, 4.5vw, 3.5rem);
      font-weight: 800;
      line-height: 1;
      color: var(--ink);
      font-variant-numeric: tabular-nums
    }

    .stat-acc {
      color: var(--blue)
    }

    .bento-lbl {
      font-size: .66rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--steel);
      margin-top: .4rem
    }

    /* Testimonial rotator */
    .testimonial-track {
      position: relative;
      min-height: 130px
    }

    .testi-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .6s ease;
      pointer-events: none
    }

    .testi-slide.active {
      opacity: 1;
      pointer-events: auto;
      position: relative
    }

    .testi-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, .5);
      cursor: pointer;
      transition: background .2s
    }

    .testi-dot.on {
      background: #fff;
      border-color: #fff
    }

    /* About portrait placeholder */
    .portrait-ring {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      border: 3px solid var(--blue);
      padding: 3px;
      flex-shrink: 0
    }

    .portrait-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: var(--blue-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      font-weight: 800;
      color: var(--blue);
      overflow: hidden
    }

    .portrait-inner img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    /* Impact pillars */
    .pillar {
      background: var(--bg-card);
      border: 1px solid var(--rule);
      border-radius: 1.25rem;
      padding: 2.25rem;
      transition: border-color .25s, box-shadow .25s;
      position: relative;
      overflow: hidden
    }

    .pillar::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--burg));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s ease
    }

    .pillar:hover {
      border-color: var(--blue);
      box-shadow: 0 8px 40px rgba(42, 138, 175, .1)
    }

    .pillar:hover::before {
      transform: scaleX(1)
    }

    .pillar-icon {
      width: 48px;
      height: 48px;
      border-radius: .85rem;
      background: var(--blue-light);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
      transition: background .2s
    }

    .pillar:hover .pillar-icon {
      background: var(--blue-light);
      color: #fff
    }

    .pillar-icon svg {
      transition: stroke .2s
    }

    /* Timeline */
    .tl-wrap {
      position: relative;
      padding-left: 2rem;
      border-left: 2px solid var(--rule);
      padding-bottom: 2.25rem
    }

    .tl-wrap:last-child {
      border-left-color: transparent;
      padding-bottom: 0
    }

    .tl-dot {
      position: absolute;
      left: -7px;
      top: 5px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--blue);
      border: 2.5px solid var(--bg);
      box-shadow: 0 0 0 2px var(--blue)
    }

    /* Pills */
    .pill {
      display: inline-flex;
      align-items: center;
      font-size: .66rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: .28rem .8rem;
      border-radius: 999px
    }

    .pill-blue {
      background: var(--blue);
      color: var(--blue-light)
    }

    .pill-burg {
      background: var(--burg);
      color: var(--burg-light)
    }

    .pill-solid {
      background: var(--blue);
      color: #fff
    }

    /* Buttons */
    .btn-primary {
      background: var(--blue);
      color: #fff;
      font-family: 'Libre Franklin', sans-serif;
      font-weight: 700;
      font-size: .75rem;
      letter-spacing: .07em;
      text-transform: uppercase;
      padding: .8rem 1.75rem;
      border-radius: .75rem;
      border: none;
      cursor: pointer;
      transition: background .2s, transform .15s;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      text-decoration: none
    }

    .btn-primary:hover {
      background: var(--blue-mid);
      transform: translateY(-1px)
    }

    .btn-primary:disabled {
      background: var(--steel);
      cursor: not-allowed;
      transform: none
    }

    .btn-outline {
      background: transparent;
      color: var(--blue);
      font-family: 'Libre Franklin', sans-serif;
      font-weight: 700;
      font-size: .75rem;
      letter-spacing: .07em;
      text-transform: uppercase;
      padding: .78rem 1.75rem;
      border-radius: .75rem;
      border: 2px solid var(--blue);
      cursor: pointer;
      transition: all .2s;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      text-decoration: none
    }

    .btn-outline:hover {
      background: var(--blue);
      color: #fff;
      transform: translateY(-1px)
    }

    .btn-ghost {
      background: transparent;
      color: var(--ink);
      font-family: 'Libre Franklin', sans-serif;
      font-weight: 600;
      font-size: .85rem;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      text-decoration: none;
      border-bottom: 1.5px solid var(--rule);
      padding-bottom: 1px;
      transition: color .2s, border-color .2s
    }

    .btn-ghost:hover {
      color: var(--blue);
      border-color: var(--blue)
    }

    /* Form */
    .input-field {
      width: 100%;
      border: 1.5px solid var(--rule);
      border-radius: .65rem;
      padding: .65rem .9rem;
      font-size: .875rem;
      font-family: 'Libre Franklin', sans-serif;
      outline: none;
      background: var(--bg-card);
      color: var(--ink);
      transition: border-color .2s, box-shadow .2s
    }

    .input-field:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(42, 138, 175, .12)
    }

    .input-field::placeholder {
      color: var(--steel)
    }

    /* Fit check */
    .fit-area {
      resize: none;
      border: 1.5px solid var(--rule);
      border-radius: .85rem;
      padding: 1rem 1.1rem;
      width: 100%;
      font-family: 'Libre Franklin', sans-serif;
      font-size: .875rem;
      color: var(--ink);
      outline: none;
      min-height: 145px;
      transition: border-color .2s, box-shadow .2s;
      background: var(--bg-card)
    }

    .fit-area:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(42, 138, 175, .1)
    }

    .fit-area::placeholder {
      color: var(--steel)
    }

    .result-box {
      background: var(--blue-pale);
      border: 1px solid var(--blue-light);
      border-radius: .85rem;
      padding: 1.25rem 1.4rem;
      margin-top: 1rem;
      font-size: .875rem;
      line-height: 1.85;
      color: var(--ink);
      display: none
    }

    /* Chips */
    .chip {
      background: var(--bg-subtle);
      border: 1px solid var(--rule);
      font-size: .71rem;
      font-weight: 500;
      color: var(--steel);
      padding: .28rem .75rem;
      border-radius: 999px;
      white-space: nowrap
    }

    /* Chat */
    .chat-fab {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      z-index: 999;
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 8px 28px rgba(42, 138, 175, .38);
      transition: transform .2s, box-shadow .2s;
      border: none
    }

    .chat-fab:hover {
      transform: scale(1.08);
      box-shadow: 0 14px 40px rgba(42, 138, 175, .5)
    }

    .chat-drawer {
      position: fixed;
      bottom: 6rem;
      right: 1.5rem;
      z-index: 998;
      width: min(400px, calc(100vw - 2rem));
      background: var(--bg-card);
      border-radius: 1.25rem;
      box-shadow: 0 24px 72px rgba(0, 0, 0, .2);
      border: 1px solid var(--rule);
      display: none;
      flex-direction: column;
      overflow: hidden;
      height: 500px
    }

    .chat-drawer.open {
      display: flex;
      animation: chatIn .24s ease
    }

    @keyframes chatIn {
      from {
        opacity: 0;
        transform: translateY(14px) scale(.97)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .chat-head {
      background: var(--blue);
      color: #fff;
      padding: 1rem 1.25rem;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .chat-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: .75rem;
      background: var(--bg)
    }

    .cmsg {
      max-width: 88%;
      font-size: .84rem;
      line-height: 1.65;
      padding: .7rem .95rem;
      border-radius: 1rem
    }

    .cmsg.ai {
      background: var(--bg-subtle);
      color: var(--ink);
      border-bottom-left-radius: .2rem;
      align-self: flex-start
    }

    .cmsg.user {
      background: var(--blue);
      color: #fff;
      border-bottom-right-radius: .2rem;
      align-self: flex-end
    }

    .chat-bar {
      border-top: 1px solid var(--rule);
      padding: .75rem;
      display: flex;
      gap: .5rem;
      background: var(--bg-card)
    }

    .chat-in {
      flex: 1;
      border: 1.5px solid var(--rule);
      border-radius: .6rem;
      padding: .5rem .8rem;
      font-size: .84rem;
      outline: none;
      font-family: 'Libre Franklin', sans-serif;
      background: var(--bg);
      color: var(--ink);
      transition: border-color .2s
    }

    .chat-in:focus {
      border-color: var(--blue)
    }

    .chat-send {
      background: var(--blue);
      color: #fff;
      border: none;
      border-radius: .6rem;
      padding: .5rem .9rem;
      cursor: pointer;
      transition: background .2s
    }

    .chat-send:hover {
      background: var(--blue-dark)
    }

    .tdot {
      display: inline-block;
      width: 6px;
      height: 6px;
      background: var(--steel);
      border-radius: 50%;
      animation: td 1s infinite
    }

    .tdot:nth-child(2) {
      animation-delay: .15s
    }

    .tdot:nth-child(3) {
      animation-delay: .3s
    }

    @keyframes td {

      0%,
      80%,
      100% {
        transform: translateY(0)
      }

      40% {
        transform: translateY(-6px)
      }
    }

    /* Projects */
    .proj-card {
      background: var(--bg-card);
      border: 1px solid var(--rule);
      border-radius: 1.1rem;
      padding: 1.75rem;
      transition: border-color .2s, box-shadow .2s;
      position: relative;
      overflow: hidden
    }

    .proj-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), var(--burg));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s ease
    }

    .proj-card:hover {
      border-color: var(--blue);
      box-shadow: 0 8px 32px rgba(42, 138, 175, .1)
    }

    .proj-card:hover::after {
      transform: scaleX(1)
    }

    /* Layout helpers */
    .max-w {
      max-width: 72rem;
      margin: 0 auto;
      padding: 0 1.5rem
    }

    @media(min-width:768px) {
      #desktopNav {
        display: flex !important;
        align-items: center
      }

      .bento-grid-top {
        grid-template-columns: repeat(4, 1fr) !important
      }

      .bento-grid-bot {
        grid-template-columns: 1fr 2fr !important;
        align-items: start
      }

      .bento-sub-grid {
        grid-template-columns: repeat(3, 1fr) !important
      }

      .impact-grid {
        grid-template-columns: 1fr 2fr !important
      }

      .pillars-grid {
        grid-template-columns: repeat(3, 1fr) !important
      }

      .about-grid {
        grid-template-columns: auto 1fr !important;
        align-items: center
      }

      .contact-grid {
        grid-template-columns: 1fr 1fr !important;
        align-items: start
      }

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

    /* Core Competencies */
    .group-label {
      font-size: .64rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: .65rem;
      padding-bottom: .4rem;
      border-bottom: 1.5px solid var(--blue-light);
    }

    .comp-item {
      display: flex;
      align-items: center;
      gap: .6rem;
      font-size: .8rem;
      font-weight: 500;
      color: var(--steel);
      padding: .45rem 0;
      border-bottom: 1px solid var(--rule);
      line-height: 1.4;
    }

    .comp-item:last-child {
      border-bottom: none;
    }

    .comp-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--blue);
      flex-shrink: 0;
    }


/* ========================================= */
/* INSIGHTS & ARTICLE SPECIFIC STYLES        */
/* ========================================= */

/* Insights & Article Specific Styles */

/* Articles Grid (insights.html) */
.articles-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin-top: 2rem;
}

.article-card {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: 1.1rem;
    padding: 2rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.article-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--burg));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 44px rgba(42, 138, 175, 0.12);
    border-color: var(--blue);
}

.article-card:hover::after {
    transform: scaleX(1);
}

.article-category {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 0.85rem;
}

.article-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 0.85rem;
    transition: color 0.2s;
}

.article-card:hover .article-title {
    color: var(--blue);
}

.article-excerpt {
    font-size: 0.95rem;
    color: var(--steel);
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 1.75rem;
}

.article-meta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--steel);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.read-arrow {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blue);
    margin-top: 1.25rem;
    transition: transform 0.2s;
    display: inline-flex;
    align-items: center;
}

.article-card:hover .read-arrow {
    transform: translateX(4px);
}

/* Individual Article (insights/*.html) */
.article-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    color: var(--steel);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    transition: color 0.2s;
    margin-bottom: 2rem;
}

.back-link:hover {
    color: var(--blue);
}

.article-header {
    margin-bottom: 3.5rem;
}

.article-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--steel);
}

.article-body h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ink);
    margin: 3.5rem 0 1.25rem;
    letter-spacing: -0.02em;
}

.article-body p {
    margin-bottom: 1.5rem;
}

.article-body ul,
.article-body ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-body li {
    margin-bottom: 0.5rem;
}

.article-body strong {
    color: var(--ink);
    font-weight: 700;
}

.article-body blockquote {
    border-left: 3px solid var(--blue);
    padding-left: 1.5rem;
    margin: 2.5rem 0;
    font-style: italic;
    color: var(--ink);
    font-size: 1.15rem;
}

.article-divider {
    border: 0;
    height: 1px;
    background: var(--rule);
    margin: 4rem 0;
}

.author-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--bg-subtle);
    padding: 2rem;
    border-radius: 1.1rem;
    border: 1px solid var(--rule);
}

.author-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--blue);
    padding: 2px;
}

.author-name {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: 0.25rem;
}

.author-desc {
    font-size: 0.95rem;
    color: var(--steel);
    line-height: 1.5;
}