/* Extracted from the static site's inline <style> block.
   Used by: portfolio.html */

/* ==========================================================================
       CLEAN & SLEEK INNER PORTFOLIO PAGE — CASE STUDIES (case-studies.html)
       ========================================================================== */
    body.al-loaded .cs-hero .container { opacity: 1 !important; transform: none !important; }

    .navbar .nav-pill a {
      white-space: nowrap;
      padding: 6px 14px;
    }

    /* 1. Editorial Portfolio Hero */
    .cs-hero {
      position: relative;
      padding-top: 185px;
      padding-bottom: 60px;
      overflow: hidden;
    }
    .cs-hero-glow {
      position: absolute;
      top: -10%;
      right: 5%;
      width: 45vw;
      height: 35vw;
      background: radial-gradient(circle, rgba(193, 255, 114, 0.09) 0%, transparent 70%);
      filter: blur(80px);
      pointer-events: none;
    }
    .cs-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.78);
      margin-bottom: 24px;
    }
    .cs-kicker .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--main-color);
    }
    .cs-hero h1 {
      font-size: clamp(38px, 5vw, 68px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.03em;
      color: #fff;
    }
    .cs-hero-lead {
      font-size: 16.5px;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.75);
      max-width: 44ch;
    }

    /* Aggregate Impact Strip */
    .cs-metrics-bar {
      margin-top: 56px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      background: #15171A;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      overflow: hidden;
    }
    .cs-metric-item {
      padding: 32px 38px;
      border-right: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: baseline;
      gap: 18px;
    }
    .cs-metric-item:last-child { border-right: 0; }
    .cs-metric-item b {
      font-size: clamp(32px, 3.2vw, 44px);
      font-weight: 700;
      color: var(--main-color);
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .cs-metric-item span {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.78);
      line-height: 1.4;
    }

    /* 2. Interactive Filter Bar */
    .cs-filter-wrap {
      margin-top: 56px;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }
    .cs-filter-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .cs-filter-btn {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.14);
      color: rgba(255, 255, 255, 0.78);
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      padding: 9px 20px;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .cs-filter-btn:hover {
      border-color: rgba(255, 255, 255, 0.35);
      color: #fff;
    }
    .cs-filter-btn.is-active {
      background: var(--main-color);
      border-color: var(--main-color);
      color: #0d0e10;
      font-weight: 600;
    }

    /* 3. Flagship Deep-Dive Case Study Banner Card */
    .cs-flagship-card {
      background: #15171A;
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 24px;
      overflow: hidden;
      margin-bottom: 44px;
      transition: border-color 0.35s ease, transform 0.35s ease;
    }
    .cs-flagship-card:hover {
      border-color: rgba(193, 255, 114, 0.45);
    }
    .cs-flagship-grid {
      display: grid;
      grid-template-columns: 46% 54%;
      align-items: stretch;
    }
    .cs-flagship-cont {
      padding: 48px 44px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .cs-client-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--main-color);
      margin-bottom: 14px;
    }
    .cs-flagship-cont h3 {
      font-size: clamp(26px, 2.8vw, 36px);
      font-weight: 600;
      letter-spacing: -0.025em;
      line-height: 1.2;
      color: #fff;
      margin-bottom: 16px;
    }
    .cs-flagship-cont p {
      font-size: 14.5px;
      line-height: 1.62;
      color: rgba(255, 255, 255, 0.72);
      margin-bottom: 28px;
    }
    .cs-kpi-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      padding: 20px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 26px;
    }
    .cs-kpi b {
      display: block;
      font-size: 24px;
      font-weight: 700;
      color: var(--main-color);
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .cs-kpi small {
      font-size: 11px;
      color: var(--al-muted);
    }
    .cs-tags-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .cs-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .cs-tags span {
      font-size: 11.5px;
      color: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.14);
      padding: 6px 13px;
      border-radius: 999px;
    }
    .cs-flagship-img {
      padding: 22px;
      min-height: 440px;
      display: flex;
      align-items: center;
    }
    .cs-flagship-img.warm-bg {
      background: radial-gradient(circle at 50% 40%, rgba(196, 114, 78, 0.5), rgba(21, 23, 26, 0) 75%);
    }
    .cs-flagship-img img {
      width: 100%;
      height: 420px;
      object-fit: cover;
      border-radius: 16px;
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
    }

    /* 4. 2-Column Editorial Case Study Grid */
    .cs-grid-sec {
      padding-bottom: 110px;
    }
    .cs-cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px 34px;
    }
    .cs-project-card {
      display: flex;
      flex-direction: column;
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .cs-project-card.is-filtered-out {
      display: none;
    }
    .cs-project-card .p-img {
      position: relative;
      height: 390px;
      border-radius: 20px;
      overflow: hidden;
      background: #16181B;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .cs-project-card .p-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .cs-project-card:hover .p-img img {
      transform: scale(1.045);
    }
    /* Top-Right Verified Metric Pill on Card Image */
    .cs-result-badge {
      position: absolute;
      top: 18px;
      right: 18px;
      background: rgba(13, 14, 16, 0.88);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(193, 255, 114, 0.5);
      color: var(--main-color);
      font-size: 12px;
      font-weight: 700;
      padding: 7px 14px;
      border-radius: 999px;
      z-index: 2;
    }
    .cs-project-card .p-tags {
      position: absolute;
      left: 18px;
      bottom: 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      z-index: 2;
    }
    .cs-project-card .p-tags span {
      background: rgba(13, 14, 16, 0.82);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: #fff;
      font-size: 11.5px;
      padding: 5px 13px;
      border-radius: 999px;
    }
    .cs-project-card .p-body {
      padding: 22px 4px 0;
    }
    .cs-project-card .p-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }
    .cs-project-card h4 {
      font-size: 23px;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: #fff;
      margin: 0;
      transition: color 0.25s ease;
    }
    .cs-project-card:hover h4 {
      color: var(--main-color);
    }
    .cs-project-card .p-cat {
      font-size: 12px;
      color: var(--al-muted);
    }
    .cs-project-card p {
      font-size: 14px;
      line-height: 1.58;
      color: rgba(255, 255, 255, 0.68);
      margin: 0;
    }

    /* 5. Bottom CTA Banner */
    .cs-cta-sec {
      padding-bottom: 110px;
    }
    .cs-cta-box {
      background: linear-gradient(140deg, rgba(193, 255, 114, 0.1) 0%, #15171A 55%);
      border: 1px solid rgba(193, 255, 114, 0.35);
      border-radius: 24px;
      padding: 56px 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap;
    }

    @media (max-width: 991px) {
      .cs-metrics-bar,
      .cs-flagship-grid,
      .cs-cards-grid {
        grid-template-columns: 1fr;
      }
      .cs-metric-item {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .cs-flagship-cont {
        padding: 32px 24px;
      }
      .cs-flagship-img {
        min-height: auto;
      }
      .cs-flagship-img img {
        height: 290px;
      }
      .cs-cta-box {
        padding: 36px 24px;
      }
    }