/* =========================================================================
   Vahan — Case Study Individual Page
   Figma: JmFGyR5BxquecSttAjGEsh  ·  node 2323:430  ·  1920 × 6600

   Loads on top of styles.css: nav, buttons, stats band + stat cards and the
   footer are the shared site pieces; everything below re-positions them at
   their case-study coordinates or adds the sections unique to this page.
   The copy is filled at runtime from js/case-studies-data.js, keyed by the
   ?id= slug the listing page links with.

   The article between the overview card and the browse cards runs as normal
   flow rather than at fixed Figma coordinates — study copy varies in length,
   so the page script measures the article and re-hangs the cards, the footer
   and the page height beneath it. With the Zomato copy the design ships, the
   measured result lands on the Figma coordinates exactly.
   ========================================================================= */

.page{ height:6600px; }

/* ===================== background art ===================== */
.glow{ top:-1669px; }

/* ===================== HERO ===================== */
/* The cover photo bleeds off the right edge and dissolves into the page.
   Figma masks it with a horizontal gradient; the stops below are measured
   off the design render — fully clear at x=840, fully opaque at x=1618. */
.cs-hero-photo{
  position:absolute;
  left:621.098px; top:71px;
  width:1298.902px; height:764px;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 16.85%, #000 76.75%);
          mask-image:linear-gradient(to right, transparent 16.85%, #000 76.75%);
}
.cs-hero-photo img{ width:100%; height:100%; object-fit:cover; }

.cs-eyebrow{
  position:absolute;
  left:240px; top:289px;
  width:838px; height:28px;
  font-family:var(--display);
  font-weight:500;
  font-size:23px;
  line-height:normal;
  color:var(--brown);
  white-space:pre;
}
.cs-eyebrow b{
  font-weight:700;
  letter-spacing:1.28px;
  color:var(--cs-brand,#de1f18);
}

.cs-title{
  position:absolute;
  left:240px; top:335px;
  width:893px; height:198px;
  font-family:var(--display);
  font-weight:500;
  font-size:86px;
  line-height:99px;
  color:var(--brown);
  overflow:hidden;   /* the fit pass in the page script measures against this */
}

.cs-cta{
  left:240px; top:571.4724px;
  width:253.3648px; height:63.3164px;
  gap:8px;
  padding:12px 24px;
  border-radius:10px;
  font-size:28.78px;
  letter-spacing:-.5468px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 253.36 63.32' 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 -12.014 17.375 0 126.68 76.98)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
}
.cs-cta .arrow{ width:20px; height:20px; }
.cs-cta .arrow img{ width:13px; height:13px; }

/* Some frames drop the "CLIENT SUCCESS STORY" line. The headline then starts
   where the eyebrow sat and takes a third line, pushing the buttons down. */
.cs-no-eyebrow .cs-eyebrow{ display:none; }
.cs-no-eyebrow .cs-title{ top:289px; width:899px; height:297px; }
.cs-no-eyebrow .cs-cta{ top:617.4724px; }

/* ===================== STATS BAND ===================== */
/* the homepage band and cards, re-hung at this page's coordinates */
.stats-band{ left:0; top:835px; }
.stat-card{ top:930px; }
.stat-body{ top:1005px; }
.stat-card-1{ left:242px; }
.stat-card-2{ left:607.1621px; }
.stat-card-3{ left:972.3262px; }
.stat-card-4{ left:1337.1953px; }
.stat-body-1{ left:292px; }
.stat-body-2{ left:658.582px; }
.stat-body-3{ left:1022.2539px; }
.stat-body-4{ left:1387.1234px; }

/* ===================== STORY VIDEO ===================== */
/* a white 13 px frame around the poster, with the play badge dead centre */
.cs-video{
  position:absolute;
  left:240px; top:1364px;
  width:1440px; height:644px;
  box-sizing:border-box;
  border:14.362px solid #fff;
  background:#fff;
  border-radius:26.514px;
  overflow:hidden;
  display:block;
}
.cs-video[href]{ cursor:pointer; }
.cs-video-thumb{ width:100%; height:100%; object-fit:cover; }
/* the badge is centred across the plate but sits a touch below the middle,
   at the 248.57 px the frame draws it */
.cs-video-play{
  position:absolute;
  left:50%; top:248.57px;
  transform:translateX(-50%);
  width:148.245px; height:148.245px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.25));
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.cs-video-play img{ width:100%; height:100%; }
.cs-video[href]:hover .cs-video-play{ transform:translateX(-50%) scale(1.08); }

/* ===================== OVERVIEW CARD ===================== */
.cs-overview{
  position:absolute;
  left:241px; top:2092px;
  width:1438px;
  min-height:626px;
  box-sizing:border-box;
  padding:47px 50px;
  background:#fff;
  border-radius:24px;
  display:flex; align-items:center; gap:92px;
}
.cs-overview-col{
  width:872px;
  flex:none;
  display:flex; flex-direction:column; gap:48px;
}
.cs-overview-block{ display:flex; flex-direction:column; gap:28px; }
.cs-overview-h{
  height:25px;
  display:flex; flex-direction:column; justify-content:center;
  font-family:var(--display);
  font-weight:500;
  font-size:38px;
  line-height:24px;
  color:#000;
}
.cs-overview-p{
  width:872px;
  font-size:24px;
  line-height:40px;
  color:#4d4d4d;
}

.cs-facts{
  width:872px; height:90px;
  padding-left:27.071px;
  border:1.504px solid #f8c6a2;
  border-radius:13.535px;
  background:#fff;
  display:flex; align-items:center; gap:53px;
}
.cs-fact{
  font-size:18.047px;
  line-height:normal;
  color:#646464;
  white-space:nowrap;
}
.cs-fact b{ font-weight:600; }

/* the attribution frame has no client tile, so the card stops at 975 px */
.cs-overview-solo{ width:975px; }

/* ---------- client brand tile ----------
   The panel's right-hand slot is the client's mark on a neutral grey plate,
   printed in its own colours (nodes 2748:631 and 2754:662). */
.cs-logo-tile{
  position:relative;
  flex:none;
  width:339px; height:339px;
  border-radius:39px;
  background:#eaeaea;
}
/* The frame draws the wordmark itself ~258 px wide. Our marks ship inside a
   213 x 64 box with their own padding, so the slot is scaled up to land the
   ink at that size; object-fit keeps every mark's own proportions. The slot
   is a share of the tile, so it follows the tile down on mobile. A study can
   override it with `logoBox` when its mark ships tight-cropped. */
.cs-logo-tile img{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:85.8%; height:26%;     /* 291 x 88 of the 339 px tile */
  object-fit:contain;
}
/* the 248 x 72 slot the Shahi frame draws (node 2754:669) */
.cs-logo-tile-plain img{
  width:73.2%; height:21.2%;
}

/* ===================== ARTICLE ===================== */
.cs-article{
  position:absolute;
  left:240px; top:2802px;
  width:1440px;
}
.cs-h2{
  height:25px;
  display:flex; flex-direction:column; justify-content:center;
  font-family:var(--display);
  font-weight:500;
  font-size:36px;
  line-height:24px;
  color:#000;
  scroll-margin-top:120px;
}
/* 84 px between an ending section and the next heading, 48 px from a heading
   to its copy — both straight off the design. */
.cs-body + .cs-h2{ margin-top:84px; }
.cs-body{ margin-top:48px; }

/* The story photo, with an orange plate showing 10 px below it. */
.cs-figure{
  position:relative;
  width:1440px; height:584px;
  margin:84px 0 94px;
}
.cs-figure::before{
  content:"";
  position:absolute;
  left:0; top:10px;
  width:1440px; height:574px;
  border-radius:24px;
  background:#f97619;
}
.cs-figure img{
  position:relative;
  display:block;
  width:1440px; height:574px;
  border-radius:24px;
  object-fit:cover;
}
.cs-figure + .cs-h2{ margin-top:0; }

.cs-body p{
  width:1440px;
  font-size:24px;
  line-height:40px;
  color:#4d4d4d;
}
/* paragraphs inside a block are separated by one blank line */
.cs-body p + p{ margin-top:40px; }

/* the bullet list is its own block in the design, 48 px off the copy either
   side, while the bullets themselves keep the one-blank-line rhythm */
.cs-body .cs-points{ margin-top:48px; }
.cs-body .cs-points + p{ margin-top:48px; }
.cs-point b{
  font-weight:600;
  color:#f97619;
}

/* ===================== BROWSE CASE STUDIES ===================== */
.cs-cards{
  position:absolute;
  left:242px; top:4902px;
  width:1440px; height:605px;
  display:flex; gap:38px;
}

.cs-card{
  width:701px; height:605px;
  flex:none;
  padding:24px;
  border-radius:17.483px;
  background:var(--peach);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  text-decoration:none;
  color:inherit;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.cs-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(249,118,25,.20), 0 4px 14px rgba(255,156,56,.14);
}

.cs-card-img{
  position:relative;
  width:653px; height:276px;
  flex:none;
  border-radius:14.561px;
  overflow:hidden;
  background:#fff;
}
.cs-card-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.cs-card:hover .cs-card-img img{ transform:scale(1.03); }

.cs-card-body{
  width:653px; height:250px;
  display:flex; flex-direction:column; justify-content:center; gap:23.311px;
}
.cs-card-logo{
  width:155.165px; height:46.622px;
  padding:7.285px;
  display:flex; flex-direction:column; justify-content:center;
}
.cs-card-logo img{ width:100%; height:auto; object-fit:contain; }
.cs-card-title{
  width:439.269px;
  font-weight:500;
  font-size:24.768px;
  line-height:normal;
  color:#000;
}
.cs-card-meta{
  width:439.269px;
  font-size:17.483px;
  line-height:normal;
  color:#000;
}
.cs-card-btn{
  position:relative;
  width:192.3639px; height:42.2514px;
  gap:5.828px;
  padding:8.742px 17.483px;
  border-radius:10px;
  font-family:var(--ui);
  font-weight:500;
  /* Figma's dev panel reports 10.61px — that is the component's own size run
     through the instance scale a second time. The frame draws the label at
     14.569 px, filling the 192.36 px button. */
  font-size:14.569px;
  letter-spacing:-.2768px;
  filter:drop-shadow(0 0 .728px rgba(128,115,115,.23));
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 192.36 42.25' 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.569px; height:14.569px; }
.cs-card-btn .arrow img{ width:9.106px; height:9.106px; }

/* ===================== OUTCOMES RAIL =====================
   Three measures under the closing heading, each behind a 4 px orange rule.
   Breaks out of the 933 px reading column to the full 1440 px content width;
   the column stops come straight off the design (rules at 0 / 452 / 975). */
.cs-outcomes{
  display:grid;
  grid-template-columns:460px 515px 448px;
  width:1440px;
  margin-top:48px;
}
.cs-outcomes[hidden]{ display:none; }
.cs-outcome{
  min-height:180px;
  padding:8px 0 0 44px;
  border-left:4px solid #f97619;
}
.cs-outcome-num{
  font-weight:700;
  font-size:24px;
  line-height:32px;
  color:#4d4d4d;
}
.cs-outcome-text{
  font-size:18px;
  line-height:32px;
  color:#4d4d4d;
}
.cs-outcome:nth-child(1) .cs-outcome-num,
.cs-outcome:nth-child(1) .cs-outcome-text{ width:240px; }
.cs-outcome:nth-child(2) .cs-outcome-num,
.cs-outcome:nth-child(2) .cs-outcome-text{ width:295px; }
.cs-outcome:nth-child(3) .cs-outcome-num,
.cs-outcome:nth-child(3) .cs-outcome-text{ width:404px; }

/* ===================== TESTIMONIAL ===================== */
/* Also full content width. The trailing 20 px keeps the measured article tall
   enough for the 92 px the design leaves before the browse cards. */
.cs-quote{
  display:flex; align-items:center; justify-content:space-between;
  width:1440px; height:486px;
  box-sizing:border-box;
  margin:84px 0 20px;
  padding:50.5px 42px;
  border-radius:24px;
  background:var(--peach);
}
.cs-quote[hidden]{ display:none; }
.cs-quote-col{
  width:809px; height:385px;
  display:flex; flex-direction:column; justify-content:center; gap:42px;
}
.cs-quote-logo{
  width:178px; height:51px;
  object-fit:contain; object-position:left center;
}
.cs-quote-text{
  width:809px;
  font-size:24px;
  line-height:normal;
  color:#000;
}
.cs-quote-by{ display:flex; align-items:center; gap:22px; }
.cs-quote-avatar{
  width:61px; height:61px;
  flex:none;
  border-radius:50%;
  overflow:hidden;
  background:#979797;
}
.cs-quote-avatar img{ width:100%; height:100%; object-fit:cover; }
/* 229 px is the width the Shahi frame draws; longer job titles are allowed
   to run past it rather than wrap inside the 809 px column */
.cs-quote-who{ display:flex; flex-direction:column; min-width:229px; max-width:520px; }
.cs-quote-name{
  font-weight:600;
  font-size:18px;
  line-height:1.5;
  letter-spacing:-.198px;
  color:rgba(0,0,0,.8);
}
.cs-quote-role{
  font-size:16px;
  line-height:31.247px;
  color:#000;
}
.cs-quote-photo{
  width:529px; height:385px;
  flex:none;
  border-radius:19.989px;
  overflow:hidden;
  background:#fff;
}
.cs-quote-photo img{ width:100%; height:100%; object-fit:cover; }

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