/* page-specific styles; base reset/scene/scroll-hint/title/rule come from vision.css */

.cs-container{
  width:calc(100% - 96px);
  max-width:1280px;
  margin:0 auto;
}

.cs-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:24px;
}

.cs-subtitle{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:400;
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.6;
  color:#28417c;
  text-align:right;
  max-width:360px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease .3s, transform .8s ease .3s;
}

.cs-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:36px;
}

.cs-card{
  --paper:#cfc6ef;
  --fold:#ab9bdf;
  --tint:#c3b7e8;
  position:relative;
  aspect-ratio:1/0.68;
  background:var(--paper);
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  box-shadow:0 14px 28px rgba(30,30,60,.12);
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;
}

.cs-card::after{
  content:"";
  position:absolute;right:0;bottom:0;
  width:38px;height:38px;
  background:linear-gradient(225deg, var(--fold) 50%, transparent 51%);
}

.cs-card--yellow{--paper:#f6e0a3;--fold:#edc76a;--tint:#f0d488;}
.cs-card--green{--paper:#c9e6ba;--fold:#a0d488;--tint:#b9dda8;}
.cs-card--blue{--paper:#bfe0f2;--fold:#8fc7e8;--tint:#a9d3ea;}
.cs-card--orange{--paper:#f5d1a0;--fold:#eab26a;--tint:#eec48b;}
.cs-card--pink{--paper:#f3c9c9;--fold:#e8a0a0;--tint:#eab8b8;}

.cs-label{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#132a55;
  opacity:.7;
  margin-bottom:10px;
}

.cs-card h3{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:800;
  font-size:1.55rem;
  line-height:1.25;
  color:#132a55;
  margin:0;
}

.cs-icon-wrap{
  margin-top:auto;
  width:48px;height:48px;
  border-radius:50%;
  background:var(--tint);
  display:flex;align-items:center;justify-content:center;
}
.cs-icon-wrap svg{width:24px;height:24px;color:#132a55;}

.vision-scene.revealed .cs-subtitle,
.vision-scene.revealed .cs-card{
  opacity:1;
  transform:translateY(0);
}

.cs-card:nth-child(1){transition-delay:.45s;}
.cs-card:nth-child(2){transition-delay:.55s;}
.cs-card:nth-child(3){transition-delay:.65s;}
.cs-card:nth-child(4){transition-delay:.75s;}
.cs-card:nth-child(5){transition-delay:.85s;}
.cs-card:nth-child(6){transition-delay:.95s;}