/* =========================================================================
   Vahan — Case Study Listing Page
   Figma: JmFGyR5BxquecSttAjGEsh  ·  node 2115:7563  ·  1920 × 3926

   Loads on top of styles.css: nav, buttons, hero heading, logo strip, stats
   band, CTA card and footer are the shared site pieces; everything below
   re-positions them at their case-study coordinates or adds the sections
   unique to this page.
   ========================================================================= */

.page{ height:3926px; }

/* ===================== HERO ===================== */
.hero-title{ left:413px; top:259px; width:1094px; height:198px; }
.hero-sub  { left:579px; width:762px;  }

.cs-hero-cta{
  left:833.68px; top:611px;
  width:252.6364px; height:58px;
  gap:8.909px;
  padding:13.364px 26.727px;
  border-radius:12px;
  font-size:22.27px;
  letter-spacing:-.4231px;
  filter:drop-shadow(0 0 1.114px rgba(128,115,115,.23));
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 252.64 58' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -11.007 17.32 0 126.32 70.523)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
}
.cs-hero-cta .arrow{ width:22.273px; height:22.273px; }
.cs-hero-cta .arrow img{ width:13.92px; height:13.92px; }

.logo-strip{ top:783px; }

/* ===================== BROWSE HEADING ===================== */
.cs-browse-title{
  position:absolute;
  left:516px; top:1579px;
  width:906px; height:70px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  color:var(--brown);
  scroll-margin-top:120px;
}

/* ===================== INDUSTRY FILTERS ===================== */
/* vertical rail down the left edge of the grid — Figma 240 / 1720, seven
   rows on a 115 px rhythm */
.cs-filters{
  position:absolute;
  left:240px; top:1720px;
  width:318px;
  display:flex; flex-direction:column;
  gap:36px;
}

.cs-chip{
  height:79px;
  display:flex; align-items:center;
  gap:24px;
  padding:0 10px 0 0;
  border:0;
  border-radius:0;
  background:linear-gradient(90deg, #e2e2e2 1.8%, rgba(255,255,255,0) 100%);
  cursor:pointer;
  text-align:left;
  transition:background .25s ease;
}
.cs-chip-bar{
  width:5px; height:52px;
  flex:none;
  background:#e3e3e2;
  transition:height .25s ease, background .25s ease;
}
.cs-chip-label{
  font-family:var(--body);
  font-weight:400;
  font-size:19.519px;
  line-height:40.664px;
  color:#000;
  white-space:nowrap;
  transition:font-size .25s ease;
}
.cs-chip:hover{ background:linear-gradient(90deg, #ededed 1.8%, rgba(255,255,255,0) 100%); }
.cs-chip:hover .cs-chip-bar{ height:66px; }

.cs-chip.cs-chip-active{
  background:linear-gradient(90deg, #ffd3b3 1.8%, rgba(255,255,255,0) 100%);
}
.cs-chip.cs-chip-active .cs-chip-bar{ height:79px; background:#ff9c38; }
.cs-chip.cs-chip-active .cs-chip-label{ font-size:22px; }

/* ===================== CASE STUDY CARDS ===================== */
.cs-card{
  position:absolute;
  width:511.6222px; height:438px;
  background:var(--peach);
  border-radius:17.4832px;
  padding:23.311px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.cs-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(249,118,25,.20), 0 4px 14px rgba(0,0,0,.05);
}
.cs-card-hidden{ display:none; }

.cs-slot-1{ left:632px;     top:1720px; }
.cs-slot-2{ left:1168.69px; top:1720px; }
.cs-slot-3{ left:632px;     top:2183px; }
.cs-slot-4{ left:1168.69px; top:2183px; }

/* card enters on filter / page change */
@keyframes cs-card-in{
  from{ opacity:0; transform:translateY(28px) scale(.985); }
  to  { opacity:1; transform:none; }
}
.cs-card-enter{ animation:cs-card-in .5s cubic-bezier(.16,1,.3,1) both; }
.cs-slot-2.cs-card-enter{ animation-delay:.07s; }
.cs-slot-3.cs-card-enter{ animation-delay:.14s; }
.cs-slot-4.cs-card-enter{ animation-delay:.21s; }

.cs-card-img{
  width:464px; height:150px;
  border-radius:14.5607px;
  overflow:hidden;
  flex:none;
  background:#fff;
}
.cs-card-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
/* Figma frames each photo individually rather than centring it */
.cs-card-img.cs-crop-top   img{ object-position:center top; }
.cs-card-img.cs-crop-upper img{ object-position:center 26%; }
.cs-card:hover .cs-card-img img{ transform:scale(1.045); }

.cs-card-body{
  width:465px; height:224px;
  display:flex; flex-direction:column; justify-content:center; gap:16px;
}
/* Figma sizes each logo to the full 123 px width and centres it in the 46 px
   frame — the 7.285 px padding it carries never becomes the constraint. */
.cs-logo-wrap{
  width:123px; height:46px;
  flex:none;
  display:flex; align-items:center;
}
.cs-logo{ width:100%; height:100%; object-fit:contain; object-position:left center; }

.cs-card-copy{ display:flex; flex-direction:column; gap:12px; }

.cs-title{
  width:439.269px;
  font-family:var(--body);
  font-weight:500;
  font-size:24px;
  line-height:normal;
  color:#000;
  transition:color .25s ease;
}
.cs-card:hover .cs-title{ color:#f97316; }

.cs-sub{
  width:439.269px;
  font-size:14px;
  line-height:normal;
  color:#000;
}

.cs-card-btn{
  position:relative;
  width:192.3607px; height:42.2511px;
  flex:none;
  gap:5.8277px;
  padding:8.7416px 17.4832px;
  border-radius:10px;
  font-family:var(--ui);
  font-weight:500;
  /* Figma's dev panel reports 10.61px, but the frame renders the label filling
     the 192.36 px button — match what the design actually draws. */
  font-size:14.87px;
  letter-spacing:-.2825px;
  filter:drop-shadow(0 0 .7278px rgba(128,115,115,.23));
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 192.36 42.251' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -8.0182 13.188 0 96.182 51.374)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
}
.cs-card-btn .arrow{ width:14.5693px; height:14.5693px; }
.cs-card-btn .arrow img{ width:9.1058px; height:9.1058px; }
.cs-card-btn .arrow img{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.cs-card:hover .cs-card-btn .arrow img{ transform:translate(-50%,-50%) translateX(3px); }

/* ===================== PAGINATION ===================== */
.pager{
  position:absolute;
  left:827.5px; top:2676px;
  width:265px; height:46.1091px;
  display:flex; align-items:center; justify-content:center; gap:5.7636px;
}
.pager-nums{
  display:flex; align-items:center;
  gap:5.7636px;
}
.pager-nav{
  width:51.8727px; height:46.1091px;
  border:0;
  background:none;
  border-radius:34.582px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
}
.pager-nav:hover{ transform:scale(1.12); }
.pager-nav.pager-disabled{ opacity:.5; cursor:default; }
.pager-nav.pager-disabled:hover{ transform:none; }
.pager-nav img{ width:23.0545px; height:23.0545px; }
.pager-num{
  width:46.1091px; height:46.1091px;
  border:0;
  background:none;
  border-radius:34.582px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--body);
  font-size:20.1727px;
  line-height:28.818px;
  color:#18181b;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pager-num:not(.active):hover{ background:#ffe8d6; }
.pager-num.active{ background:#f97316; color:#fff; transform:scale(1.08); }

/* ===================== CTA ===================== */
.cta{ left:240px; top:2823px; width:1440px; height:384px; }
/* the export is 1440 × 448, so let it cover the shorter band instead of
   letterboxing itself inside it */
.cta-bg{ width:1440px; height:384px; object-fit:cover; }
.cta-text{
  left:204px; top:74px;
  width:1032px; height:136px;
  font-size:54px;
  line-height:68px;
}
.cta-btn{
  left:605.68px; top:234px;
  width:228.6363px; height:73px;
}

/* ===================== FOOTER ===================== */
.footer{ top:3326px; }

/* ===================== ON-LOAD REVEAL ===================== */
@keyframes cs-rise{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
.cs-reveal{ animation:cs-rise .7s cubic-bezier(.16,1,.3,1) both; }
.hero-sub.cs-reveal    { animation-delay:.10s; }
.cs-hero-cta.cs-reveal { animation-delay:.20s; }
.logo-strip.cs-reveal  { animation-delay:.30s; }