/* =========================================================
   CYPERFOX PROJECTS PAGE
========================================================= */

.cf-root.cfp-projects{

  --blue:#2880b7;
  --blue-dark:#1f6a99;
  --blue-bg:#e8f2ff;

  --white:#ffffff;

  --page-bg:#f4f5f7;

  --border:#e2e4e9;
  --border-mid:#d0d3db;

  --text-dark:#1a1d23;
  --text-mid:#3d4452;
  --text-muted:#7a8295;

  --fh:'Montserrat',sans-serif;
  --fb:'Open Sans',sans-serif;

  box-sizing:border-box;

  width:100%;
  max-width:100%;

  background:var(--page-bg);

  font-family:var(--fb);
  font-size:15px;
  line-height:1.6;

  color:var(--text-dark);

  overflow-x:clip;
}


.cf-root.cfp-projects *,
.cf-root.cfp-projects *::before,
.cf-root.cfp-projects *::after{
  box-sizing:border-box;
}



/* =========================================================
   PROJECT STATS
========================================================= */

.cf-root.cfp-projects .cf-stats{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  width:100%;

  background:var(--white);

  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);

  padding:8px 24px;
}


.cf-root.cfp-projects .cf-stat{

  position:relative;

  padding:20px 32px;

  text-align:center;

  border-right:1px solid var(--border);
}


.cf-root.cfp-projects .cf-stat:last-child{
  border-right:none;
}


.cf-root.cfp-projects .cf-stat-num{

  display:block;

  margin:0 0 7px;

  font-family:var(--fh);

  font-size:30px;
  font-weight:800;

  line-height:1;

  color:var(--blue);
}


.cf-root.cfp-projects .cf-stat-lbl{

  display:block;

  margin:0;

  font-family:var(--fh);

  font-size:9px;
  font-weight:700;

  letter-spacing:.12em;

  text-transform:uppercase;

  color:var(--text-muted);
}



/* =========================================================
   PROJECT MAP SECTION
========================================================= */

.cf-root.cfp-projects .cf-map-section{

  width:100%;

  padding:38px 32px 38px;
}



/* =========================================================
   PROJECT LOCATIONS HEADING
========================================================= */

.cf-root.cfp-projects .cf-projects-heading{

  max-width:760px;

  margin:0 0 28px;
}


.cf-root.cfp-projects .cf-projects-eyebrow{

  display:inline-block;

  margin:0 0 9px;

  font-family:var(--fh);

  font-size:10px;
  font-weight:800;

  line-height:1;

  letter-spacing:.18em;

  text-transform:uppercase;

  color:var(--blue);
}


.cf-root.cfp-projects .cf-projects-heading h2{

  margin:0 0 9px;
  padding:0;

  font-family:var(--fh);

  font-size:clamp(32px,3vw,46px);

  font-weight:800;

  line-height:1.05;

  letter-spacing:-.035em;

  color:var(--text-dark);
}


.cf-root.cfp-projects .cf-projects-heading p{

  max-width:620px;

  margin:0;
  padding:0;

  font-size:15px;

  line-height:1.7;

  color:var(--text-muted);
}



/* =========================================================
   MAIN MAP + CARDS LAYOUT
========================================================= */

.cf-root.cfp-projects .cf-layout{

  display:flex;

  gap:22px;

  align-items:flex-start;
}



/* =========================================================
   LEFT — STICKY MAP
========================================================= */

.cf-root.cfp-projects .cf-map-col{

  flex:0 0 60%;

  position:sticky;

  top:80px;

  height:calc(100vh - 100px);

  max-height:800px;
}


.cf-root.cfp-projects .cf-map-box{

  height:100%;

  display:flex;

  flex-direction:column;

  background:var(--white);

  border:1px solid var(--border);

  border-radius:18px;

  padding:16px 18px;

  box-shadow:
    0 2px 10px rgba(0,0,0,.03),
    0 12px 32px rgba(0,0,0,.045);
}



/* =========================================================
   MAP LEGEND
========================================================= */

.cf-root.cfp-projects .cf-legend{

  display:flex;

  align-items:center;

  gap:16px;

  flex-wrap:wrap;

  margin-bottom:12px;
}


.cf-root.cfp-projects .cf-li{

  display:flex;

  align-items:center;

  gap:7px;

  font-size:11px;

  color:var(--text-mid);
}


.cf-root.cfp-projects .cf-ld{

  display:inline-block;

  width:10px;
  height:10px;

  border-radius:50%;

  flex-shrink:0;
}



/* =========================================================
   LEAFLET MAP
========================================================= */

.cf-root.cfp-projects .cfp-map{

  width:100%;

  flex:1;

  min-height:300px;

  border-radius:12px;

  border:1px solid var(--border);

  overflow:hidden;
}


.cf-root.cfp-projects .cf-map-box .leaflet-container{
  border-radius:12px;
}



/* =========================================================
   SELECTED PROJECT BAR
========================================================= */

.cf-root.cfp-projects .cf-selected-bar{

  display:none;

  align-items:center;

  gap:10px;

  margin-bottom:10px;

  padding:8px 14px;

  background:var(--blue-bg);

  border:1px solid rgba(40,128,183,.25);

  border-radius:9px;
}


.cf-root.cfp-projects .cf-selected-bar.show{
  display:flex;
}


.cf-root.cfp-projects .cf-sel-dot{

  width:9px;
  height:9px;

  border-radius:50%;

  flex-shrink:0;
}


.cf-root.cfp-projects .cf-sel-name{

  flex:1;

  min-width:0;

  font-family:var(--fh);

  font-size:12px;
  font-weight:700;

  color:var(--text-dark);

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


.cf-root.cfp-projects .cf-sel-addr{

  max-width:180px;

  font-size:11px;

  color:var(--text-muted);

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


.cf-root.cfp-projects .cf-sel-clear{

  flex-shrink:0;

  padding:0 2px;

  background:none;

  border:none;

  cursor:pointer;

  font-size:18px;

  line-height:1;

  color:var(--text-muted);
}


.cf-root.cfp-projects .cf-sel-clear:hover{
  color:var(--blue);
}



/* =========================================================
   RIGHT — PROJECT CARDS COLUMN
========================================================= */

.cf-root.cfp-projects .cf-cards-col{

  flex:1;

  min-width:0;

  max-height:60vh;

  overflow-y:auto;

  padding-right:5px;
}


.cf-root.cfp-projects .cf-cards-col::-webkit-scrollbar{
  width:4px;
}


.cf-root.cfp-projects .cf-cards-col::-webkit-scrollbar-track{
  background:transparent;
}


.cf-root.cfp-projects .cf-cards-col::-webkit-scrollbar-thumb{

  background:var(--border-mid);

  border-radius:99px;
}


.cf-root.cfp-projects .cf-cards{

  display:flex;

  flex-direction:column;

  gap:10px;
}



/* =========================================================
   PROJECT CARD
========================================================= */

.cf-root.cfp-projects .cf-card{
  position:relative;

  padding:12px 16px;

  min-height:0 !important;
  height:auto !important;

  background:#ffffff;

  border:1px solid var(--border);
  border-radius:12px;

  cursor:pointer;

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

/* 


.cf-card.selected::after{

  content:'✓ Selected';

  position:absolute;

  top:10px;
  right:12px;

  font-family:var(--fh);

  font-size:8px;
  font-weight:700;

  letter-spacing:.06em;

  text-transform:uppercase;

  color:var(--blue);
}




/* =========================================================
   PROJECT CARD — HOVER / SELECTED
========================================================= */

.cf-root.cfp-projects .cf-card:hover{
  transform:translateY(-1px);

  /* Cool blue only — no radial/warm gradient */
  background:#f1f7fd !important;

  border-color:#fff!important;

  box-shadow:
    0 5px 16px rgba(40,128,183,.12);
}


.cf-root.cfp-projects .cf-card.selected{
  background:#eaf4fc !important;

  border-color:#2880b7 !important;

  box-shadow:
    0 5px 18px rgba(40,128,183,.14);
}








.cf-root.cfp-projects =========================================================
   PROJECT CARD CONTENT
========================================================= */

.cf-card-top{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  margin-bottom:4px;
}


.cf-root.cfp-projects .cf-card-cat{

  font-family:var(--fh);

  font-size:8px;
  font-weight:700;

  letter-spacing:.14em;

  text-transform:uppercase;

  color:var(--blue);
}


.cf-root.cfp-projects .cf-card-dot{

  width:9px;
  height:9px;

  margin-top:2px;

  border-radius:50%;

  flex-shrink:0;
}


.cf-root.cfp-projects .cf-card-name{

  display:block;

  margin-bottom:5px;

  font-family:var(--fh);

  font-size:13px;
  font-weight:700;

  line-height:1.35;

  color:var(--text-dark);
}


.cf-root.cfp-projects .cf-card-loc{

  display:flex;

  align-items:center;

  gap:5px;

  margin-bottom:7px;

  font-size:11px;

  line-height:1.45;

  color:var(--text-muted);
}


.cf-root.cfp-projects .cf-card-tags{

  display:flex;

  gap:4px;

  flex-wrap:wrap;
}


.cf-root.cfp-projects .cf-tag{

  display:inline-block;

  padding:2px 7px;

  background:#e8f1fa;

  border:1px solid rgba(40,128,183,.13);

  border-radius:99px;

  font-size:7px;
  font-weight:700;

  letter-spacing:.06em;

  text-transform:uppercase;

  color:#185fa5;
}



/* =========================================================
   MAP POPUP
========================================================= */

.cf-root.cfp-projects .cf-popup .leaflet-popup-content-wrapper{

  min-width:220px;

  padding:0;

  background:#1a1d23;

  border:1px solid rgba(255,255,255,.08);

  border-radius:12px;

  color:#ffffff;

  box-shadow:0 10px 34px rgba(0,0,0,.40);
}


.cf-root.cfp-projects .cf-popup .leaflet-popup-tip{
  background:#1a1d23;
}


.cf-root.cfp-projects .cf-popup .leaflet-popup-content{

  margin:0;

  padding:14px 16px;
}


.cf-root.cfp-projects .cf-popup-status{

  display:flex;

  align-items:center;

  gap:6px;

  margin-bottom:6px;

  font-family:var(--fh);

  font-size:9px;
  font-weight:700;

  letter-spacing:.14em;

  text-transform:uppercase;
}


.cf-root.cfp-projects .cf-popup-name{

  margin-bottom:4px;

  font-family:var(--fh);

  font-size:13px;
  font-weight:700;

  line-height:1.3;

  color:#ffffff;
}


.cf-root.cfp-projects .cf-popup-addr{

  margin-bottom:7px;

  font-size:11px;

  line-height:1.4;

  color:#9ca3af;
}


.cf-root.cfp-projects .cf-popup-desc{

  margin-bottom:8px;

  font-size:11px;

  line-height:1.5;

  color:#d1d5db;
}


.cf-root.cfp-projects .cf-popup-tags{

  display:flex;

  gap:4px;

  flex-wrap:wrap;
}


.cf-root.cfp-projects .cf-popup-tag{

  padding:2px 7px;

  background:rgba(40,128,183,.25);

  border:1px solid rgba(40,128,183,.30);

  border-radius:99px;

  font-size:8px;
  font-weight:700;

  letter-spacing:.07em;

  text-transform:uppercase;

  color:#93c5fd;
}



/* =========================================================
   CTA
========================================================= */

.cf-root.cfp-projects .cf-cta-bar{

  width:100%;

  padding:54px 24px;

  text-align:center;

  background:#ffffff;

  border-top:1px solid var(--border);
}


.cf-root.cfp-projects .cf-cta-bar h2{

  margin:0 0 10px;
  padding:0;

  font-family:var(--fh);

  font-size:clamp(22px,3vw,34px);

  font-weight:800;

  letter-spacing:-.02em;

  color:var(--text-dark);
}


.cf-root.cfp-projects .cf-cta-bar p{

  margin:0 0 24px;
  padding:0;

  font-size:15px;

  color:var(--text-muted);
}


.cf-root.cfp-projects .cf-cta-btn{

  display:inline-block;

  padding:14px 32px;

  background:var(--blue);

  border:none;

  border-radius:8px;

  font-family:var(--fh);

  font-size:12px;
  font-weight:800;

  letter-spacing:.08em;

  text-transform:uppercase;

  text-decoration:none;

  color:#ffffff;

  box-shadow:
    0 5px 18px rgba(40,128,183,.24);

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


.cf-root.cfp-projects .cf-cta-btn:hover{

  transform:translateY(-2px);

  background:var(--blue-dark);

  color:#ffffff;

  box-shadow:
    0 8px 24px rgba(40,128,183,.30);
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

  .cf-root.cfp-projects .cf-stats{
    padding:6px 12px;
  }


  .cf-root.cfp-projects .cf-stat{
    padding:17px 12px;
  }


  .cf-root.cfp-projects .cf-stat-num{
    font-size:26px;
  }


  .cf-root.cfp-projects .cf-map-section{
    padding:28px 16px 26px;
  }


  .cf-root.cfp-projects .cf-projects-heading{
    margin-bottom:22px;
  }


  .cf-root.cfp-projects .cf-projects-heading h2{
    font-size:36px;
  }


  .cf-root.cfp-projects .cf-layout{
    flex-direction:column;
  }


  .cf-root.cfp-projects .cf-map-col{

    position:relative;

    top:0;

    flex:none;

    width:100%;

    height:390px;

    max-height:390px;
  }


  .cf-root.cfp-projects .cf-cards-col{

    width:100%;

    max-height:none;

    overflow-y:visible;

    padding-right:0;
  }


  .cf-root.cfp-projects .cfp-map{
    height:100%;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:600px){

  .cf-root.cfp-projects .cf-stats{

    grid-template-columns:repeat(3,1fr);

    padding:4px 2px;
  }


  .cf-root.cfp-projects .cf-stat{

    padding:14px 5px;
  }


  .cf-root.cfp-projects .cf-stat-num{

    margin-bottom:6px;

    font-size:22px;
  }


  .cf-root.cfp-projects .cf-stat-lbl{

    font-size:7.5px;

    line-height:1.35;

    letter-spacing:.04em;
  }


  .cf-root.cfp-projects .cf-map-section{

    padding:24px 8px 22px;
  }


  .cf-root.cfp-projects .cf-projects-heading{

    margin-bottom:19px;

    padding:0 4px;
  }


  .cf-root.cfp-projects .cf-projects-eyebrow{

    margin-bottom:7px;

    font-size:9px;
  }


  .cf-root.cfp-projects .cf-projects-heading h2{

    margin-bottom:8px;

    font-size:30px;
  }


  .cf-root.cfp-projects .cf-projects-heading p{

    font-size:14px;

    line-height:1.6;
  }


  .cf-root.cfp-projects .cf-map-col{

    height:310px;

    max-height:310px;
  }


  .cf-root.cfp-projects .cf-map-box{

    padding:10px;

    border-radius:14px;
  }


  .cf-root.cfp-projects .cf-legend{

    gap:10px;

    margin-bottom:9px;
  }


  .cf-root.cfp-projects .cf-li{
    font-size:9px;
  }


  .cf-root.cfp-projects .cf-card{

    padding:14px;
  }


  .cf-root.cfp-projects .cf-card-name{
    font-size:12px;
  }

}




/* =========================================================
   REMOVE ANY EXTRA CARD HOVER OVERLAYS / ORANGE GLOW
========================================================= */

.cf-root.cfp-projects .cf-card::before,
.cf-root.cfp-projects .cf-card:hover::before,
.cf-root.cfp-projects .cf-card.selected::before{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}

.cf-root.cfp-projects .cf-card:hover,
.cf-root.cfp-projects .cf-card.selected{
  background-image:none !important;
  filter:none !important;
}


/* HOVER — BLUE ONLY */
.cf-root.cfp-projects .cf-card:hover{
  background:#f1f7fd !important;
  border-color:#2880b7 !important;

  box-shadow:
    0 5px 16px rgba(40,128,183,.12) !important;
}


/* SELECTED — BLUE ONLY */
.cf-root.cfp-projects .cf-card.selected{
  background:#eaf4fc !important;
  border-color:#2880b7 !important;

  box-shadow:
    0 5px 18px rgba(40,128,183,.14) !important;
}






/* =========================================================
   FIX CARD BORDER / HOVER CLIPPING
========================================================= */

.cf-root.cfp-projects .cf-cards-col{
  padding:2px 8px 2px 2px;
  overflow-y:auto;
  overflow-x:visible;
}

.cf-root.cfp-projects .cf-cards{
  padding:1px;
}

.cf-root.cfp-projects .cf-card{
  position:relative;
  z-index:1;
}

.cf-root.cfp-projects .cf-card:hover,
.cf-root.cfp-projects .cf-card.selected{
  z-index:5;
}

.cf-root.cfp-projects .cfp-map{position:relative;isolation:isolate;min-height:280px}
.cf-root.cfp-projects .cf-card{cursor:pointer;outline-offset:3px}
.cf-root.cfp-projects .cf-card:focus-visible{outline:3px solid #f47a20}
.cf-root.cfp-projects .cfp-photo{width:100%;height:145px;object-fit:cover;border-radius:8px;margin:0 0 12px;display:block}
.cf-root.cfp-projects .cfp-work{font-size:12px;color:var(--text-mid);line-height:1.6;margin:8px 0;white-space:pre-line}
.cf-root.cfp-projects .cfp-search{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;margin:0 0 16px;background:white;color:var(--text-dark)}
.cf-root.cfp-projects .cfp-empty{padding:20px;color:var(--text-mid)}
.cf-root.cfp-projects .cfp-message{font-size:12px;margin:8px 0;color:var(--text-mid)}
.cf-root.cfp-projects [hidden]{display:none!important}
.cf-root.cfp-projects .cfp-pin{background:transparent;border:0}
.cf-root.cfp-projects .cfp-pin span{display:block;width:22px;height:22px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 5px #ffffff26,0 2px 8px #0008}
.cf-root.cfp-projects .cfp-pin.cfp-hq span{width:30px;height:30px;border:4px solid white;box-shadow:0 0 0 9px #f47a2033}
.cf-root.cfp-projects .cfp-popup-photo{width:100%;height:120px;object-fit:cover;border-radius:6px;margin-top:8px}
.cf-root.cfp-projects .cfp-toolbar{display:flex;gap:10px;align-items:start}
.cf-root.cfp-projects .cfp-reset{padding:11px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text-mid);white-space:nowrap;font-size:12px}
@media(prefers-reduced-motion:reduce){.cf-root.cfp-projects *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.cf-root.cfp-projects .cfp-map{min-height:0;height:100%}