/* ---------- projects: six sticky stacked cards. targetScale =
       1 - (totalCards - 1 - index) * 0.03, offset top: index * 28px,
       h-85vh containers sticky at top-24 / md:top-32 ---------- */
    .p2 {
      --p2-radius: 40px;
      --p2-pad: 16px;
      position: relative;
      z-index: 10;
      background: #0C0C0C;
      border: 1px solid rgba(215, 226, 234, .14);
      border-radius: var(--p2-radius);
      padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px) clamp(130px, 17vw, 230px);
      box-sizing: border-box
    }

    @media (min-width: 640px) {
      .p2 {
        --p2-radius: 50px;
        --p2-pad: 24px
      }
    }

    @media (min-width: 768px) {
      .p2 {
        --p2-radius: 60px;
        --p2-pad: 32px
      }
    }

    .p2-head {
      margin: 0 0 clamp(28px, 5vw, 64px);
      text-align: center;
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: -.03em;
      line-height: .92;
      font-size: clamp(44px, 8.5vw, 120px);
      background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: #BBCCD7
    }

    .p2-stack {
      display: flex;
      flex-direction: column
    }

    .p2-cell {
      height: 85vh;
      position: sticky;
      top: 64px
    }

    @media (min-width: 768px) {
      .p2-cell {
        top: 88px
      }
    }

    .p2-card {
      width: min(1180px, 100%);
      margin: 0 auto;
      height: 100%;
      background: #0C0C0C;
      border: 2px solid #D7E2EA;
      border-radius: var(--p2-radius);
      padding: var(--p2-pad);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      position: relative;
      transform-origin: 50% 0;
      will-change: transform;
      overflow: hidden
    }

    .p2-top {
      /* uniform reserve across all six cards (covers the tallest stack:
         wrapped bilingual name + 4-lines desc) so media canvases match */
      min-height: calc(190*var(--t));
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: clamp(14px, 2.5vw, 36px);
      margin-bottom: clamp(14px, 2vw, 26px)
    }

    .p2-num {
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: clamp(40px, 7vw, 92px);
      line-height: .9;
      letter-spacing: -.02em;
      background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: #BBCCD7
    }

    .p2-id {
      flex: 1;
      min-width: 200px;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .p2-cat {
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: clamp(9px, 1.05vw, 12px);
      letter-spacing: .32em;
      text-transform: uppercase;
      color: #646973
    }

    .p2-name {
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: clamp(20px, 3.2vw, 42px);
      line-height: 1.05;
      letter-spacing: -.01em;
      color: #F4F8FB
    }

    .p2-desc {
      margin: 4px 0 0;
      font-family: 'Inter S', sans-serif;
      font-size: clamp(11px, 1.2vw, 14px);
      line-height: 1.65;
      color: rgba(187, 204, 215, .78);
      max-width: 680px
    }

    .p2-pill {
      flex: none;
      display: inline-flex;
      align-items: center;
      margin-left: auto;
      padding: clamp(9px, 1.2vw, 13px) clamp(16px, 2vw, 26px);
      border: 2px solid #D7E2EA;
      border-radius: 999px;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .1em;
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: clamp(9px, 1vw, 12px);
      line-height: 1;
      color: #D7E2EA;
      transition: background .25s ease, color .25s ease
    }

    .p2-pill:hover {
      background: #D7E2EA;
      color: #0C0C0C
    }

    .p2-note {
      flex: none;
      display: inline-flex;
      align-items: center;
      margin-left: auto;
      padding: clamp(9px, 1.2vw, 13px) clamp(16px, 2vw, 26px);
      border: 2px dashed rgba(215, 226, 234, .35);
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: .1em;
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: clamp(9px, 1vw, 12px);
      line-height: 1;
      color: rgba(215, 226, 234, .55)
    }

    .p2-actions {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: clamp(8px, 1vw, 12px);
      flex-wrap: wrap
    }

    .p2-desc {
      /* reserve exactly 4 lines (4 × 1.5 line-height) so every card's text
         stack is the same height — the media canvases below all render identical */
      min-height: 6em
    }

    .p2-media {
      flex: 1;
      min-height: clamp(200px, 26vw, 390px);
      border-radius: var(--p2-radius);
      overflow: hidden;
      background: #131417;
      position: relative;
      padding: clamp(6px, 1vw, 12px);
      box-sizing: border-box
    }

    .p2-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      cursor: zoom-in
    }

    .p2-ph {
      position: absolute;
      top: 8px;
      right: 8px;
      bottom: 8px;
      left: 8px;
      border: 2px dashed rgba(215, 226, 234, .16);
      border-radius: calc(var(--p2-radius) - 6px);
      background: repeating-linear-gradient(45deg, rgba(215, 226, 234, .035) 0 14px, transparent 14px 28px);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .p2-ph span {
      font-family: 'Chakra S', 'Inter S', sans-serif;
      font-weight: 700;
      font-size: clamp(8px, .9vw, 11px);
      letter-spacing: .3em;
      text-transform: uppercase;
      color: rgba(215, 226, 234, .35)
    }

    @media (max-width: 639px) {
      .p2-media {
        min-height: clamp(180px, 46vw, 300px)
      }
    }

    .backdrop-blur-xl {
      backdrop-filter: blur(24px)
    }

    .xgrid2 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: clamp(14px, 2vw, 24px);
      max-width: 1120px;
      margin: 0 auto
    }

    .xcontact {
      display: flex;
      flex-direction: column;
      gap: calc(6*var(--t));
      border: 2px solid #D7E2EA;
      border-radius: clamp(16px, 2vw, 24px);
      padding: calc(20*var(--t)) calc(22*var(--t));
      text-decoration: none;
      background: transparent;
      transition: background .25s ease
    }

    .xcontact .contact-icon {
      color: #BBCCD7
    }

    .xcontact span {
      font-family: 'Inter S', sans-serif;
      font-size: calc(12*var(--t));
      color: rgba(215, 226, 234, .75)
    }

    .xcontact:hover {
      background: #D7E2EA
    }

    .xcontact:hover .contact-icon {
      color: #0C0C0C
    }

    .xcontact:hover span {
      color: rgba(12, 12, 12, .8)
    }

    .contact-icon:hover {
      color: #000
    }

    .xfoot {
      margin-top: calc(30*var(--t));
      font-size: calc(11*var(--t));
      color: rgba(232, 238, 250, .45)
    }

    @media (max-width: 700px) {
      .xgrid2 {
        grid-template-columns: 1fr
      }
    }