/* ============================================================
Case Study — premium template (brand #ff7a45 / black / white / cream)
============================================================ */
   .cs,
   .cs h1,
   .cs h2,
   .cs h3,
   .cs h4,
   .cs h5,
   .cs p,
   .cs span,
   .cs a,
   .cs div,
   .cs li,
   .cs blockquote {
      font-family: "Poppins", sans-serif
   }

   .cs {
      --o: #ff7a45;
      --o2: #ff9e6b;
      --od: #e5622f;
      --ink: #141414;
      --cream: #FFF4EF;
      --dark: #0e0f12;
      --dark2: #17181d;
      position: relative;
      z-index: 2
   }

   #mainfooter {
      position: relative;
      z-index: 1
   }

   .cs * {
      box-sizing: border-box
   }

   #mainheader {
      min-height: 0 !important;
      padding: 0 !important
   }

   .cs .container {
      max-width: 1180px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 20px;
      padding-right: 20px
   }

   .cs .cmn_padd {
      padding: 88px 20px
   }

   /* buttons */
   .cs-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--o);
      color: #fff;
      font-weight: 600;
      font-size: 15px;
      padding: 15px 30px;
      border-radius: 10px;
      text-decoration: none;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
      border: 2px solid var(--o);
      box-shadow: 0 10px 26px rgba(255, 122, 69, .28)
   }

   .cs-btn:hover {
      background: var(--od);
      border-color: var(--od);
      color: #fff;
      transform: translateY(-3px);
      box-shadow: 0 16px 34px rgba(255, 122, 69, .4)
   }

   .cs-btn.out {
      background: transparent;
      color: var(--o);
      box-shadow: none
   }

   .cs-btn.out:hover {
      background: var(--o);
      color: #fff
   }

   .cs-btn svg {
      width: 17px;
      height: 17px
   }

   .cs-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 32px
   }

   /* reveal */
   .cs .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
      transition-delay: var(--d, 0s)
   }

   .cs .reveal.in {
      opacity: 1;
      transform: none
   }

   @media(prefers-reduced-motion:reduce) {
      .cs .reveal {
         opacity: 1 !important;
         transform: none !important;
         transition: none !important
      }
   }

   /* headings */
   .cs-head {
      text-align: center;
      max-width: 820px;
      margin: 0 auto
   }

   .cs-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: var(--o);
      background: #fff4ef;
      border: 1px solid #ffd8c6;
      padding: 7px 15px;
      border-radius: 30px;
      margin-bottom: 18px
   }

   .cs-eyebrow svg {
      width: 14px;
      height: 14px;
      stroke: var(--o)
   }

   .cs-eyebrow.on-dark {
      background: rgba(255, 122, 69, .12);
      border-color: rgba(255, 122, 69, .35);
      color: var(--o2)
   }

   .cs-eyebrow.on-dark svg {
      stroke: var(--o2)
   }

   .cs-head h2 {
      font-size: 38px;
      line-height: 1.16;
      font-weight: 700;
      color: var(--ink);
      margin: 0
   }

   .cs-head h2 span {
      color: var(--o)
   }

   .cs-head .uline {
      width: 118px;
      height: 5px;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--o), #ffc3a3);
      margin: 18px auto 0
   }

   .cs-head p {
      font-size: 16px;
      line-height: 1.75;
      color: #5c5c5c;
      max-width: 720px;
      margin: 22px auto 0
   }

   .cs-head.left {
      text-align: left;
      margin: 0
   }

   .cs-head.left .uline {
      margin: 18px 0 0
   }

   /* ============================================================
HERO (dark, centered)
============================================================ */
   .cs-hero {
      padding: 161px 20px 96px;
      text-align: center;
   }

   .cs-hero:before {
      top: -180px;
      left: 50%;
      transform: translateX(-50%);
      width: 760px;
      height: 640px;
      background: radial-gradient(circle, rgba(255, 122, 69, .26), transparent 62%);
   }

   .cs-hero:after {
      mask-image: radial-gradient(circle at 50% 34%, #000, transparent 74%);
      -webkit-mask-image: radial-gradient(circle at 50% 34%, #000, transparent 74%);
   }

   .cs-hero-eyebrow {
      margin-bottom: 24px;
   }

   .cs-h1 {
      font-size: 52px;
      line-height: 1.06;
      margin: 0 0 18px;
   }

   .cs-sum {
      font-size: 18px;
      line-height: 1.7;
      color: #b9bcc6;
      max-width: 640px;
      margin: 0 auto
   }

   .cs-hero-stat {
      margin: 44px auto 0;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
   }

   .cs-hero-stat .n {
      font-size: 100px;
      line-height: .92;
      font-weight: 800;
      letter-spacing: -2px;
      background: linear-gradient(135deg, #ff9e6b, var(--o));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
   }

   .cs-hero-stat .l {
      margin-top: 12px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: #cfd2db;
   }

   .cs-hero .anim {
      transform: translateY(26px);
      animation: csUp .8s cubic-bezier(.16, 1, .3, 1) forwards;
   }

   .cs-hero .anim.d1 {
      animation-delay: .06s;
   }

   .cs-hero .anim.d2 {
      animation-delay: .16s;
   }

   .cs-hero .anim.d3 {
      animation-delay: .26s;
   }

   .cs-hero .anim.d4 {
      animation-delay: .4s;
   }

   @keyframes csUp {
      to {
         opacity: 1;
         transform: none
      }
   }

   @media(prefers-reduced-motion:reduce) {}

   /* ============================================================
RESULTS STRIP (light, stat cards)
============================================================ */
   .cs-stats {
      display: grid;
      gap: 24px;
      margin: 0 auto;
      max-width: 1060px
   }

   .cs-stats.n2 {
      grid-template-columns: repeat(2, 1fr);
      max-width: 720px
   }

   .cs-stats.n3 {
      grid-template-columns: repeat(3, 1fr)
   }

   .cs-stat {
      position: relative;
      background: #fff;
      border: 1px solid #f2ece7;
      border-radius: 20px;
      padding: 38px 28px;
      text-align: center;
      box-shadow: 0 12px 34px rgba(0, 0, 0, .06);
      transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease, border-color .32s ease;
      overflow: hidden
   }

   .cs-stat:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg, var(--o), #ffc3a3)
   }

   .cs-stat:hover {
      transform: translateY(-8px);
      box-shadow: 0 26px 52px rgba(255, 122, 69, .16);
      border-color: #ffd8c6
   }

   .cs-stat .n {
      font-size: 46px;
      font-weight: 800;
      color: var(--o);
      line-height: 1;
      letter-spacing: -1px
   }

   .cs-stat .l {
      font-size: 15px;
      font-weight: 600;
      color: #222;
      margin-top: 12px;
      line-height: 1.4
   }

   .cs-stat .s {
      font-size: 12.5px;
      color: #8a8a8a;
      margin-top: 7px;
      font-weight: 500
   }

   /* ============================================================
CHALLENGE / WHAT WE DID (2-col)
============================================================ */
   .cs-work {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 58px;
      align-items: start
   }

   .cs-work .lead {
      font-size: 16.5px;
      line-height: 1.8;
      color: #565656;
      margin: 24px 0 0
   }

   .cs-didbox {
      background: #fff;
      border: 1px solid #f0e5de;
      border-radius: 20px;
      padding: 30px 30px 34px;
      box-shadow: 0 24px 56px rgba(0, 0, 0, .08)
   }

   .cs-didbox .th {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 700;
      color: #111;
      margin: 0 0 6px
   }

   .cs-didbox .th .ic {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: linear-gradient(135deg, #fff2ea, #ffe0d1);
      border: 1px solid #ffe0d1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto
   }

   .cs-didbox .th .ic svg {
      width: 20px;
      height: 20px;
      stroke: var(--o)
   }

   .cs-didbox .sub {
      font-size: 14px;
      color: #777;
      margin: 0 0 20px;
      line-height: 1.6
   }

   .cs-did {
      list-style: none;
      padding: 0;
      margin: 0
   }

   .cs-did li {
      position: relative;
      padding: 0 0 15px 36px;
      font-size: 15px;
      color: #333;
      line-height: 1.5;
      font-weight: 500
   }

   .cs-did li:last-child {
      padding-bottom: 0
   }

   .cs-did li:before {
      content: "";
      position: absolute;
      left: 0;
      top: -1px;
      width: 24px;
      height: 24px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--o), #ff9e6b);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 13px
   }

   /* ============================================================
TESTIMONIAL
============================================================ */
   .cs-quote {
      position: relative;
      background: linear-gradient(135deg, #fff8f4, #fff);
      border: 1px solid #ffe0d1;
      border-radius: 24px;
      padding: 48px 46px;
      max-width: 900px;
      margin: 0 auto;
      box-shadow: 0 24px 56px rgba(255, 122, 69, .1);
      text-align: center
   }

   .cs-quote .mark {
      font-size: 80px;
      line-height: .6;
      color: var(--o);
      font-family: Georgia, serif;
      height: 34px
   }

   .cs-quote blockquote {
      font-size: 21px;
      line-height: 1.65;
      font-weight: 500;
      color: #2b2b2b;
      margin: 0 0 24px
   }

   .cs-quote .who {
      display: inline-flex;
      align-items: center;
      gap: 12px
   }

   .cs-quote .who .av {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--o), #ff9e6b);
      color: #fff;
      font-weight: 800;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center
   }

   .cs-quote .who b {
      font-size: 15.5px;
      color: #111;
      display: block
   }

   .cs-quote .who small {
      font-size: 12.5px;
      color: #8a8a8a
   }

   .cs-quote .who .txt {
      text-align: left
   }

   /* ============================================================
CTA (dark)
============================================================ */
   .cs-cta {
      background: var(--dark);
      position: relative;
      overflow: hidden;
      padding: 80px 20px
   }

   .cs-cta:before {
      content: "";
      position: absolute;
      top: -140px;
      left: 50%;
      transform: translateX(-50%);
      width: 640px;
      height: 420px;
      background: radial-gradient(circle, rgba(255, 122, 69, .24), transparent 62%);
      pointer-events: none
   }

   .cs-cta .container {
      position: relative;
      z-index: 2;
      text-align: center
   }

   .cs-cta h2 {
      color: #fff;
      font-size: 36px;
      font-weight: 700;
      margin: 0 auto 14px;
      letter-spacing: -.4px;
      max-width: 640px
   }

   .cs-cta h2 span {
      color: var(--o)
   }

   .cs-cta p {
      color: #b9bcc6;
      font-size: 16.5px;
      line-height: 1.7;
      max-width: 540px;
      margin: 0 auto
   }

   .cs-cta .cs-btns {
      justify-content: center
   }

   /* ============================================================
MORE CASE STUDIES
============================================================ */
   .cs-more {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
      margin-top: 48px
   }

   .cs-mcard {
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid #f2ece7;
      border-radius: 18px;
      padding: 26px 24px;
      text-decoration: none;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
      transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease, border-color .32s ease
   }

   .cs-mcard:hover {
      transform: translateY(-8px);
      box-shadow: 0 26px 52px rgba(255, 122, 69, .16);
      border-color: #ffd8c6
   }

   .cs-mcard .tr {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--o)
   }

   .cs-mcard h4 {
      font-size: 16.5px;
      font-weight: 700;
      color: #111;
      margin: 8px 0 14px;
      line-height: 1.3
   }

   .cs-mcard .st {
      font-size: 14px;
      color: #555;
      font-weight: 500;
      line-height: 1.5;
      margin: 0 0 18px
   }

   .cs-mcard .st b {
      color: #111;
      font-weight: 800
   }

   .cs-mcard .go {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 14px;
      font-weight: 700;
      color: var(--o)
   }

   .cs-mcard .go svg {
      width: 15px;
      height: 15px;
      stroke: var(--o);
      transition: transform .25s ease
   }

   .cs-mcard:hover .go svg {
      transform: translateX(4px)
   }

   /* ============================================================
RESPONSIVE
============================================================ */
   @media(max-width:992px) {
      .cs-hero {
         padding: 140px 18px 72px;
      }

      .cs-h1 {
         font-size: 40px;
      }

      .cs-hero-stat .n {
         font-size: 78px;
      }

      .cs-work {
         grid-template-columns: 1fr;
         gap: 40px
      }

      .cs-head.left {
         text-align: center;
         margin: 0 auto
      }

      .cs-head.left .uline {
         margin: 18px auto 0
      }

      .cs-stats.n3 {
         grid-template-columns: repeat(3, 1fr)
      }

      .cs-more {
         grid-template-columns: repeat(2, 1fr)
      }
   }

   @media(max-width:680px) {
      .cs-h1 {
         font-size: 32px;
      }

      .cs-hero-stat .n {
         font-size: 62px;
      }

      .cs-head h2,
      .cs-cta h2 {
         font-size: 27px
      }

      .cs-stats.n2,
      .cs-stats.n3 {
         grid-template-columns: 1fr;
         max-width: 420px
      }

      .cs-more {
         grid-template-columns: 1fr
      }

      .cs-quote {
         padding: 38px 26px
      }

      .cs-quote blockquote {
         font-size: 18px
      }

      .cs-btns {
         flex-direction: column
      }

      .cs-btn {
         justify-content: center
      }
   }