/* Start custom CSS *//* ===== Projects page (Figma 338:381) =====
   Sizes are Figma px at 1920 wide, scaled with clamp()/vw. Banner + CTA reuse the kit's cpn-banner / cpn-cta classes.
   Cards come from a loop over the "project" post type; filter pills + photo counts are added by the page's code snippet. */

/* ---------- Brand rings (#EBF6FC bands) ---------- */
body .elementor .cpn-prj{position:relative;overflow-x:clip;padding:clamp(56px,6.198vw,119px) 0 clamp(72px,8.6vw,165px)}
body .elementor .cpn-prj-ring{position:absolute;z-index:0;min-width:0;padding:0;border:solid #EBF6FC;border-radius:50%;pointer-events:none}
body .elementor .cpn-prj-ring-a{left:68.23vw;top:-24.9vw;width:41.094vw;aspect-ratio:789 / 767;border-width:5.729vw}
body .elementor .cpn-prj-ring-b{left:-16.54vw;top:37.92vw;width:30.417vw;aspect-ratio:1;border-width:4.25vw}
body .elementor .cpn-prj > .cpn-wrap{position:relative;z-index:1}

/* ---------- Intro ---------- */
body .elementor .cpn-prj-head{display:flex;flex-direction:column;align-items:flex-start;padding:0;max-width:760px}
body .elementor .cpn-prj-head .cpn-h2{margin-top:11px;line-height:1.21}
body .elementor .cpn-prj-head .cpn-lead{max-width:660px;margin-top:clamp(16px,1.25vw,24px)}

/* ---------- Filter pills (Figma: 56.7px tall, 26.2px bold, count in 40% alpha) ---------- */
body .elementor .cpn-prj-filters{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:clamp(10px,1.77vw,34px);padding:0;margin-top:clamp(28px,2.4vw,46px)}
body .elementor .cpn-prj-filters:empty{display:none}
body .elementor .cpn-prj-pill{display:inline-flex;align-items:center;gap:.32em;min-height:clamp(44px,2.953vw,56.7px);padding:0 clamp(18px,1.77vw,34px);border:clamp(1.5px,.104vw,2px) solid rgba(22,158,235,.3);border-radius:999px;background:rgba(236,248,254,.53);color:#169EEB;font-family:"Host Grotesk",sans-serif;font-size:clamp(16px,1.365vw,26.2px);font-weight:700;line-height:1;letter-spacing:-0.02em;white-space:nowrap;cursor:pointer;transition:background-color var(--cpn-dur,.32s),border-color var(--cpn-dur,.32s),color var(--cpn-dur,.32s),box-shadow var(--cpn-dur,.32s),translate var(--cpn-dur,.32s)}
body .elementor .cpn-prj-pill-count{font-weight:500;opacity:.4}
body .elementor .cpn-prj-pill:hover{background:#fff;border-color:#169EEB;translate:0 -2px}
body .elementor .cpn-prj-pill:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(22,158,235,.25)}
body .elementor .cpn-prj-pill[aria-pressed="true"]{border-color:transparent;background:linear-gradient(158deg,#0095EE 0%,#0079C1 100%);color:#fff;box-shadow:0 10px 22px -12px rgba(0,121,193,.8);translate:none}
body .elementor .cpn-prj-pill[aria-pressed="true"] .cpn-prj-pill-count{opacity:1;color:rgba(255,255,255,.4)}

/* ---------- Project cards (Figma 493.7 × 584.3, gaps 85 / 103) ---------- */
body .elementor .cpn-prj-list{position:relative;padding:0;margin-top:clamp(32px,4.1vw,79px)}
body .elementor .cpn-prj-list > .e-collection-loop,body .elementor .cpn-prj-list .e-collection-loop{position:relative;z-index:1;padding:0}
body .elementor .cpn-prj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,4.43vw,85px);row-gap:clamp(28px,5.365vw,103px);padding:0}
body .elementor .cpn-prj-card{display:flex;flex-direction:column;padding:clamp(10px,.693vw,13.3px) clamp(10px,.833vw,16px) 0;border-radius:clamp(24px,2.068vw,39.7px);background:#fff;box-shadow:1.241px 1.241px 12.034px rgba(0,0,0,.09),0 0 33.124px rgba(91,202,244,.2);transition:translate var(--cpn-dur,.32s),box-shadow var(--cpn-dur,.32s)}
body .elementor .cpn-prj-card:hover{translate:0 -4px;box-shadow:1.241px 1.241px 12.034px rgba(0,0,0,.09),0 10px 40px rgba(91,202,244,.35)}
body .elementor .cpn-prj-card[hidden]{display:none}
body .elementor .cpn-prj-card.is-in{animation:cpn-prj-in .45s ease both}
@keyframes cpn-prj-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body .elementor .cpn-prj-card .cpn-prj-img{display:block;width:100%;height:auto;aspect-ratio:461.4 / 388.5;object-fit:cover;border-radius:clamp(18px,1.424vw,27.35px)}
body .elementor .cpn-prj-body{flex:1;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:16px;padding:clamp(16px,1.51vw,29px) clamp(10px,1.72vw,33px) clamp(22px,2.08vw,40px)}
body .elementor .cpn-prj-body > .e-con{padding:0;min-width:0}
body .elementor .cpn-prj-title{font-family:"Host Grotesk",sans-serif;font-size:clamp(20px,1.644vw,31.56px);font-weight:600;line-height:1.3;letter-spacing:-0.02em;color:#000}
body .elementor .cpn-prj-meta,body .elementor .cpn-prj-photos{font-family:"Host Grotesk",sans-serif;font-size:clamp(15px,1.315vw,25.25px);font-weight:400;line-height:1.43;letter-spacing:-0.02em;color:#8B8B8B}
body .elementor .cpn-prj-title + .cpn-prj-meta,body .elementor .cpn-prj-title + .cpn-prj-photos{margin-top:clamp(2px,.3vw,6px)}
body .elementor .cpn-prj-meta:empty{display:none}

/* Arrow to the single project page (Figma: 57.5px gradient circle, white diagonal arrow).
   Hidden until the single-project template exists: delete the display:none line to show it. */
body .elementor .cpn-prj-go{flex:none;width:clamp(44px,2.995vw,57.5px);aspect-ratio:1;padding:0;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 17L17 7M9 7h8v8' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/44% no-repeat,linear-gradient(180deg,#5BCAF4 0%,#1DA1EE 100%);transition:translate var(--cpn-dur,.32s),box-shadow var(--cpn-dur,.32s)}
body .elementor .cpn-prj-go:hover{translate:2px -2px;box-shadow:0 8px 18px -8px rgba(0,121,193,.7)}

/* Loop data read by the filter script */
body .elementor .cpn-prj-data{display:none}
body .elementor .cpn-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  body .elementor .cpn-prj-card.is-in{animation:none}
  body .elementor .cpn-prj-pill,body .elementor .cpn-prj-card{transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  body .elementor .cpn-prj-ring{display:none}
  body .elementor .cpn-prj-filters{justify-content:flex-start}
  body .elementor .cpn-prj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  body .elementor .cpn-h2 br{display:none} /* Figma line breaks are for wide screens */
  body .elementor .cpn-prj-filters{gap:8px}
  body .elementor .cpn-prj-pill{min-height:40px;padding:0 14px;font-size:15px}
  body .elementor .cpn-prj-grid{grid-template-columns:minmax(0,1fr);row-gap:24px;max-width:480px;margin-inline:auto}
}/* End custom CSS */