/* ── Reset scoped to our component only ── */
.ct-tools-wrap,
.ct-tools-wrap *,
.ct-tools-wrap *::before,
.ct-tools-wrap *::after{
box-sizing:border-box;
}/* ── Hide GP’s native tool filter bar on this page ── */
.ct-tools-wrap ~ * .gb-filter-bar,
.gb-filter-bar,
[data-id=”filter-bar”]{
display:none !important;
}/* ── Wrapper ── */
.ct-tools-wrap{
font-family:’DM Sans’,sans-serif;
background:#f5f5f5;
padding:48px 24px 64px;
margin:0 -24px;
}/* ── Filter bar ── */
.ct-filter-bar{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:center;
margin-bottom:40px;
padding:0;
list-style:none;
border:none;
background:none;
}/* Hard reset on button — GP adds many button styles */
.ct-filter-btn,
.ct-filter-btn:link,
.ct-filter-btn:visited{
-webkit-appearance:none;
appearance:none;
display:inline-block;
font-family:’DM Sans’,sans-serif !important;
font-size:0.82rem !important;
font-weight:700 !important;
letter-spacing:1px !important;
text-transform:uppercase !important;
text-decoration:none !important;
padding:9px 22px !important;
border:2px solid #01133f !important;
background:#fff !important;
color:#01133f !important;
-webkit-text-fill-color:#01133f !important;
cursor:pointer !important;
border-radius:0 !important;
line-height:1 !important;
box-shadow:3px 3px 0 #01133f !important;
transition:background 0.18s,color 0.18s,-webkit-text-fill-color 0.18s,box-shadow 0.18s,transform 0.18s !important;
outline:none;
}
.ct-filter-btn:hover,
.ct-filter-btn:focus,
.ct-filter-btn.ct-active{
background:#01133f !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
box-shadow:6px 6px 0 #3e92cc !important;
transform:translate(-2px,-2px) !important;
}/* ── Grid ── */
.ct-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:28px;
max-width:1200px;
margin:0 auto;
}/* ── Card ── */
.ct-card,
.ct-card:link,
.ct-card:visited{
position:relative !important;
background:#01133f !important;
border-radius:0 !important;
padding:36px 28px 32px !important;
min-height:300px !important;
display:flex !important;
flex-direction:column !important;
justify-content:space-between !important;
text-decoration:none !important;
border:2px solid #01133f !important;
box-shadow:6px 6px 0 #3e92cc !important;
transition:transform 0.22s ease,box-shadow 0.22s ease,background 0.18s !important;
cursor:pointer !important;
outline:none !important;
}
.ct-card:hover,
.ct-card:focus{
background:#012456 !important;
transform:translate(-4px,-6px) !important;
box-shadow:8px 8px 0 #3e92cc !important;
}/* ── Card inner top block ── */
.ct-card-top{
display:flex;
flex-direction:column;
flex:1;
}/* ── Badges ── */
.ct-card-badges{
display:flex;
gap:8px;
margin-bottom:20px;
flex-wrap:wrap;
align-items:center;
}
.ct-badge{
font-family:’DM Mono’,monospace !important;
font-size:0.68rem !important;
font-weight:500 !important;
letter-spacing:1px !important;
text-transform:uppercase !important;
padding:4px 10px !important;
border-radius:0 !important;
border:1px solid rgba(255,255,255,0.25) !important;
background:rgba(255,255,255,0.1) !important;
color:rgba(255,255,255,0.85) !important;
-webkit-text-fill-color:rgba(255,255,255,0.85) !important;
line-height:1.4 !important;
display:inline-block !important;
}
.ct-badge.ct-popular{
background:#3e92cc !important;
border-color:#3e92cc !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
.ct-badge.ct-new{
background:rgba(62,146,204,0.2) !important;
border-color:#3e92cc !important;
color:#3e92cc !important;
-webkit-text-fill-color:#3e92cc !important;
}/* ── Icon ── */
.ct-card-icon{
width:52px;
height:52px;
border-radius:9999px;
background:rgba(62,146,204,0.12);
border:1.5px solid rgba(62,146,204,0.35);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
flex-shrink:0;
}
.ct-card-icon svg{
width:22px;
height:22px;
stroke:#3e92cc;
fill:none;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
display:block;
}/* ── Title — div not h3, so GP heading rules can’t touch it ── */
.ct-card-title{
font-family:’Syne’,sans-serif !important;
font-size:1.25rem !important;
font-weight:700 !important;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
letter-spacing:-0.01em !important;
margin:0 0 10px 0 !important;
padding:0 !important;
line-height:1.3 !important;
text-shadow:none !important;
border:none !important;
background:none !important;
}/* ── Description ── */
.ct-card-desc{
font-size:0.88rem !important;
color:rgba(255,255,255,0.72) !important;
-webkit-text-fill-color:rgba(255,255,255,0.72) !important;
line-height:1.6 !important;
margin:0 !important;
padding:0 !important;
flex:1;
}/* ── Arrow CTA ── */
.ct-card-arrow{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
margin-top:28px !important;
font-family:’DM Mono’,monospace !important;
font-size:0.75rem !important;
font-weight:600 !important;
letter-spacing:1px !important;
text-transform:uppercase !important;
color:#3e92cc !important;
-webkit-text-fill-color:#3e92cc !important;
text-decoration:none !important;
transition:gap 0.18s ease !important;
flex-shrink:0;
}
.ct-card:hover .ct-card-arrow{
gap:14px !important;
}
.ct-card-arrow svg{
width:13px;
height:13px;
stroke:#3e92cc;
fill:none;
stroke-width:2.2;
stroke-linecap:round;
stroke-linejoin:round;
display:block;
flex-shrink:0;
}.ct-tools-wrap .ct-card.ct-hidden{display:none !important;}
(function(){
var wrap=document.querySelector(‘.ct-tools-wrap’);
if(!wrap)return;
var btns=wrap.querySelectorAll(‘.ct-filter-btn’);
var cards=wrap.querySelectorAll(‘.ct-card’);
btns.forEach(function(btn){
btn.addEventListener(‘click’,function(){
btns.forEach(function(b){b.classList.remove(‘ct-active’)});
btn.classList.add(‘ct-active’);
var f=btn.getAttribute(‘data-filter’);
cards.forEach(function(card){
card.classList.toggle(‘ct-hidden’, !(f===’all’||card.getAttribute(‘data-cat’)===f));
});
});
});
})();
