/* Case study overlay cards — shared (listing + detail Recent) */
.cs-section,
.csd-long .recent,
.cs-grid,
.cs-card{
  --cs-ac:#EE3D25;
  --cs-ink:#233058;
}
.cs-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(70% 55% at 8% 0%,rgba(238,61,37,.06),transparent 55%),
    radial-gradient(55% 45% at 100% 20%,rgba(35,48,88,.05),transparent 50%),
    #fff;
  padding:clamp(56px,6vw,100px) 0 clamp(64px,7vw,110px);
  font-family:"Geometria",sans-serif;
  color:#0a0803;
  border-bottom:1px solid rgba(35,48,88,.1);
}
.cs-section .container{
  width:min(1240px,90vw);
  margin:0 auto;
  position:relative;
  z-index:1;
  display:block !important;
  flex-direction:column !important;
  max-width:min(1240px,90vw);
}
/* Eyebrow — same as home Live Apps (.pf-eyebrow): size/color + gray L/R lines */
.cs-eyebrow{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1.2vw;
  width:100%;
  margin:0 0 1.1vw;
  padding:0 !important;
  font-family:"Geometria",sans-serif !important;
  font-weight:700 !important;
  font-size:1.35vw !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#6b6862 !important;
  text-align:center;
  border-bottom:0 !important;
}
.cs-eyebrow:before,
.cs-eyebrow:after{
  content:"";
  display:block;
  flex:1 1 0;
  height:1px;
  min-width:2vw;
}
.cs-eyebrow:before{
  background:linear-gradient(90deg,rgba(10,8,3,0),rgba(10,8,3,.18));
}
.cs-eyebrow:after{
  background:linear-gradient(90deg,rgba(10,8,3,.18),rgba(10,8,3,0));
}
.cs-head{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:clamp(14px,1.8vw,28px) 0 clamp(26px,3.8vw,52px);
  text-align:center;
}
.cs-head h2{
  margin:0;
  font-weight:600;
  font-size:clamp(28px,2.9vw,50px);
  line-height:1.12;
  letter-spacing:-.03em;
  color:#0a0803;
  text-align:center;
  white-space:nowrap;
}
.cs-head h2 span{color:#EE3D25}
.cs-head h2 br{display:none}
.cs-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px);
}
.cs-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:clamp(460px,38vw,580px);
  border-radius:clamp(18px,1.35vw,26px);
  overflow:hidden;
  background:#12100e;
  border:1px solid rgba(35,48,88,.12);
  box-shadow:0 14px 36px rgba(35,48,88,.12);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='15' fill='none' stroke='%23EE3D25' stroke-width='2'/%3E%3Ccircle cx='18' cy='18' r='5' fill='%23EE3D25'/%3E%3C/svg%3E")
      18 18,
    pointer;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .35s ease;
}
.cs-card *,
.cs-card a,
.cs-card .cs-btn{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='15' fill='none' stroke='%23EE3D25' stroke-width='2'/%3E%3Ccircle cx='18' cy='18' r='5' fill='%23EE3D25'/%3E%3C/svg%3E")
      18 18,
    pointer !important;
}
.cs-grid:hover .cs-card:not(:hover){
  opacity:.55;
  filter:brightness(.92) saturate(.92);
  transition:opacity .35s ease, filter .35s ease, transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .35s ease;
}
.cs-card-link{
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  text-indent:-9999px;
  overflow:hidden;
  color:transparent;
}
.cs-card:hover{
  transform:translateY(-4px);
  border-color:rgba(238,61,37,.4);
  box-shadow:0 20px 44px rgba(238,61,37,.12), 0 12px 28px rgba(35,48,88,.14);
}
.cs-media{
  position:absolute;
  inset:0;
  z-index:0;
  border:0;
  border-radius:inherit;
  overflow:hidden;
  background:#0a0803;
}
.cs-video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  transform:scale(1.01);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.cs-card:hover .cs-video{transform:scale(1.05)}
.cs-fade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,8,3,.05) 0%,rgba(10,8,3,.15) 28%,rgba(10,8,3,.72) 62%,rgba(10,8,3,.96) 100%),
    radial-gradient(80% 50% at 50% 100%,rgba(238,61,37,.12),transparent 70%);
}
.cs-body{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(22px,2.2vw,36px);
  padding-top:clamp(80px,8vw,140px);
}
.cs-title{
  margin:0 0 .4em;
  font-weight:700;
  font-size:clamp(28px,2.55vw,42px);
  line-height:1.05;
  letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.cs-card:hover .cs-title{color:#fff}
.cs-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.4em 1.05em;
  margin:0 0 .85em;
  font-family:"Raleway",sans-serif;
  font-size:clamp(12px,.85vw,15px);
  font-weight:500;
  color:rgba(255,255,255,.82);
}
.cs-tags span{
  display:inline-flex;
  align-items:center;
  gap:.42em;
}
.cs-tags span:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#EE3D25;
  box-shadow:0 0 0 3px rgba(238,61,37,.2);
  flex:none;
}
.cs-desc{
  margin:0 0 1.25em;
  max-width:34em;
  font-family:"Raleway",sans-serif;
  font-size:clamp(13px,.92vw,16px);
  line-height:1.55;
  color:rgba(255,255,255,.72);
}
a.cs-btn{text-decoration:none;color:#fff;position:relative;z-index:4;pointer-events:none}
.cs-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #EE3D25;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.8em 1.35em;
  border-radius:10px;
  background:#EE3D25;
  color:#fff;
  font-family:"Geometria",sans-serif;
  font-weight:600;
  font-size:clamp(13px,.9vw,15px);
  line-height:1.2;
  letter-spacing:.01em;
  box-shadow:0 12px 28px rgba(238,61,37,.35);
  transition:background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.cs-card:hover .cs-btn,
.cs-btn:hover,
.cs-btn:focus-visible{
  background:linear-gradient(135deg,#6e5cbf 0%,#544199 50%,#3e2b7a 100%);
  border-color:#8b78de;
  color:#fff;
  box-shadow:0 16px 36px rgba(110,92,191,.45);
  outline:none;
}
@media (max-width:900px){
  .cs-section{padding:14vw 0 16vw}
  .cs-grid{grid-template-columns:1fr;gap:4.5vw}
  .cs-card{min-height:min(118vw,560px);border-radius:5vw}
  .cs-body{padding:10vw 5.5vw 5.5vw}
  .cs-head{margin:5vw 0 8vw}
  .cs-head h2{font-size:7.2vw;white-space:normal}
  .cs-eyebrow{font-size:3.4vw!important;gap:3vw;padding:0!important}
  .cs-title{font-size:8vw}
  .cs-tags{font-size:3.4vw;margin-bottom:3.5vw}
  .cs-tags span:before{width:2vw;height:2vw}
  .cs-desc{font-size:3.5vw;margin-bottom:5vw}
  .cs-btn{width:100%;padding:3.8vw 4vw;border-radius:3vw;font-size:3.6vw}
}
@media (prefers-reduced-motion:reduce){
  .cs-card,.cs-video,.cs-btn{transition:none}
  .cs-card:hover{transform:none}
  .cs-card:hover .cs-video{transform:none}
  .cs-grid:hover .cs-card:not(:hover){opacity:1;filter:none}
}
@media (hover:none){
  .cs-card,
  .cs-card *,
  .cs-card a,
  .cs-card .cs-btn{cursor:pointer !important}
}