/* ==========================================================================
   LOCAL FONTS
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/casestudies-assets/korial/fonts/Inter-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/casestudies-assets/korial/fonts/Manrope-Regular.woff2')
    format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/casestudies-assets/korial/fonts/Manrope-Medium.woff2')
    format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/casestudies-assets/korial/fonts/Manrope-SemiBold.woff2')
    format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/casestudies-assets/korial/fonts/Manrope-Bold.woff2')
    format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/casestudies-assets/korial/fonts/Manrope-ExtraBold.woff2')
    format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/casestudies-assets/korial/fonts/SpaceGrotesk-Regular.woff2')
    format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/casestudies-assets/korial/fonts/SpaceGrotesk-Medium.woff2')
    format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/casestudies-assets/korial/fonts/SpaceGrotesk-SemiBold.woff2')
    format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/casestudies-assets/korial/fonts/SpaceGrotesk-Bold.woff2')
    format('woff2');
}

/* ==========================================================================
   KORIAL CASE STUDY  ·  Figma node 445:703  ·  artboard 1920px
   ========================================================================== */
.korial-case-study {
  --a-hero-blur: url('/casestudies-assets/korial/images/korial-hero-blur.webp');
  --a-divider: url('/casestudies-assets/korial/svg/korial-divider.svg');
  --a-deco-why: url('/casestudies-assets/korial/svg/korial-deco-why.svg');
  --a-deco-quote: url('/casestudies-assets/korial/svg/korial-deco-quote.svg');
  --a-deco-next: url('/casestudies-assets/korial/svg/korial-deco-next.svg');

  /* ---------- colour ---------- */
  --c-ink: #03051d;
  --c-ink-2: #1c1e36;
  --c-ink-3: #1b1d34;
  --c-border-d: #2a2c41;
  --c-mint: #39f4b5;
  --c-mint-2: #35f4b4;
  --c-teal: #00cea8;
  --c-teal-deep: #008a7d;
  --c-green-rule: #72d59a;
  --c-grey-bg: #f1f1f3;
  --c-grey-bg-2: #fafafa;
  --c-grey-bg-3: #f6f8fb;
  --c-chip-blue: #f2f4fd;
  --c-muted: #7d7e8b;
  --c-muted-2: #6a6a79;
  --c-muted-3: #3b5068;
  --c-on-d-1: #dfdfdf;
  --c-on-d-2: #c5c7cd;
  --c-on-d-3: #c2c3ca;
  --c-on-d-4: #dddddd;
  --c-on-d-5: #e5feff;
  --c-on-d-6: #b0b0b0;
  --c-orange: #ff8e5d;
  --c-white: #ffffff;
  --c-rule-d: rgba(42, 44, 65, 0.1);
  --c-rule-w: rgba(255, 255, 255, 0.2);

  /* ---------- fluid type (value @1920 -> vw) ---------- */
  --fs-70: clamp(38px, 3.6458vw, 70px);
  --fs-64: clamp(30px, 3.3333vw, 64px);
  --fs-54: clamp(27px, 2.8125vw, 54px);
  --fs-50: clamp(32px, 2.6042vw, 50px);
  --fs-42: clamp(24px, 2.1875vw, 42px);
  --fs-36: clamp(22px, 1.875vw, 36px);
  --fs-32: clamp(21px, 1.6667vw, 32px);
  --fs-30: clamp(20px, 1.5625vw, 30px);
  --fs-28: clamp(19px, 1.4583vw, 28px);
  --fs-26: clamp(17px, 1.3542vw, 26px);
  --fs-24: clamp(17px, 1.25vw, 24px);
  --fs-23: clamp(15px, 1.1979vw, 23px);
  --fs-22: clamp(15px, 1.1458vw, 22px);
  --fs-20: clamp(15px, 1.0417vw, 20px);
  --fs-19: clamp(15px, 0.9896vw, 19px);
  --fs-18: clamp(15px, 0.9375vw, 18px);
  --fs-16: clamp(15px, 0.8333vw, 16px);

  /* ---------- fluid space ---------- */
  --pad-x-150: clamp(16px, 7.8125vw, 150px);
  --pad-x-96: clamp(16px, 5vw, 96px);
  --pad-x-80: clamp(16px, 4.1667vw, 80px);
  --pad-y: clamp(56px, 5.2083vw, 100px);
  --sp-60: clamp(32px, 3.125vw, 60px);
  --sp-50: clamp(28px, 2.6042vw, 50px);
  --sp-40: clamp(24px, 2.0833vw, 40px);
  --sp-32: clamp(20px, 1.6667vw, 32px);
  --sp-30: clamp(20px, 1.5625vw, 30px);
  --sp-24: clamp(16px, 1.25vw, 24px);
  --sp-20: clamp(14px, 1.0417vw, 20px);
  --sp-16: clamp(12px, 0.8333vw, 16px);
  --sp-12: clamp(10px, 0.625vw, 12px);

  --r-32: clamp(18px, 1.6667vw, 32px);
  --r-20: clamp(12px, 1.0417vw, 20px);
  --r-16: clamp(12px, 0.8333vw, 16px);
  --r-12: clamp(8px, 0.625vw, 12px);

  --wrap-1620: 1620px;
  --wrap-1760: 1760px;
  --wrap-1280: 1280px;

  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--c-ink);
  background: var(--c-white);
  width: 100%;
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.korial-case-study *,
.korial-case-study *::before,
.korial-case-study *::after {
  box-sizing: border-box;
}

.korial-case-study p {
  margin: 0;
}

.korial-case-study a {
  color: inherit;
}

.korial-case-study img {
  display: block;
  max-width: 100%;
  border: 0;
}

/* every section is full-bleed; the inner wrap holds the design column */
.korial-case-study .sec {
  width: 100%;
  padding: var(--pad-y) var(--pad-x-150);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-60);
}

.korial-case-study .sec--80 {
  padding-inline: var(--pad-x-80);
}

.korial-case-study .sec--dark {
  background: var(--c-ink);
  color: var(--c-white);
}

.korial-case-study .sec--dark2 {
  background: var(--c-ink-3);
  color: var(--c-white);
}

.korial-case-study .sec--grey {
  background: var(--c-grey-bg);
}

.korial-case-study .wrap {
  width: 100%;
  max-width: var(--wrap-1620);
  margin-inline: auto;
}

.korial-case-study .wrap--1760 {
  max-width: var(--wrap-1760);
}

.korial-case-study .wrap--1280 {
  max-width: var(--wrap-1280);
}

/* shared type */
.korial-case-study .h2 {
  font-weight: 500;
  font-size: var(--fs-54);
  line-height: 1.296;
  letter-spacing: -1px;
  margin: 0;
}

.korial-case-study .ico {
  flex: none;
  object-fit: contain;
}

.korial-case-study .mint {
  color: var(--c-mint);
}

.korial-case-study .teal {
  color: var(--c-teal);
}

.korial-case-study .sg {
  font-family: 'Space Grotesk', sans-serif;
}

.korial-case-study .mn {
  font-family: 'Manrope', sans-serif;
}

/* =============================== 1. HERO =============================== */
.korial-case-study .hero {
  position: relative;
  width: 100%;
  background: var(--c-ink);
  overflow: hidden;
  aspect-ratio: 1920 / 920;
  min-height: 380px;
}

.korial-case-study .hero__blur {
  position: absolute;
  inset: 0;
  filter: blur(clamp(20px, 3.2292vw, 62px));
}

.korial-case-study .hero__blur i {
  position: absolute;
  left: -29.01%;
  top: 11.88%;
  width: 148.44%;
  height: 133.28%;
  background-image: var(--a-hero-blur);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.korial-case-study .hero__main {
  position: absolute;
  left: 50%;
  bottom: 0;
  top: auto;
  width: clamp(280px, 58vw, 1080px);
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 15px 35px rgba(57, 244, 181, 0.12))
    drop-shadow(0 25px 50px rgba(0, 0, 0, 0.4));
}

.korial-case-study .hero__main img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.korial-case-study .hero__sub {
  display: none;
}

.korial-case-study .hero__logo {
  position: absolute;
  left: 50%;
  top: clamp(30px, 4vw, 60px);
  transform: translateX(-50%);
  display: flex;
  gap: clamp(10px, 1.5vw, 24px);
  align-items: center;
  z-index: 2;
}

.korial-case-study .hero__logo img {
  display: block;
  height: clamp(16px, 1.6vw, 26px);
  width: auto;
  object-fit: contain;
}

.korial-case-study .hero__logo img.mark {
  height: clamp(28px, 3vw, 50px);
}

/* ========================= 2. GREEN INTRO BAND ========================= */
.korial-case-study .intro {
  background: var(--c-mint);
  color: var(--c-ink);
  overflow: hidden;
}

.korial-case-study .intro__in {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  align-items: center;
  text-align: center;
  font-weight: 500;
}

.korial-case-study .intro__h1 {
  max-width: 86.46%;
  font-size: var(--fs-64);
  line-height: 1.3;
  letter-spacing: -1px;
  margin: 0;
}

.korial-case-study .intro__h1 b {
  font-weight: 700;
}

.korial-case-study .intro__p {
  max-width: 78.85%;
  font-size: var(--fs-26);
  line-height: 1.5;
}

.korial-case-study .intro__p a {
  font-weight: 700;
  text-decoration: underline;
}

/* ========================== 3. KEY TAKEAWAYS =========================== */
.korial-case-study .takeaways__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-24);
}

.korial-case-study .tile {
  background: var(--c-grey-bg);
  border: 1px solid rgba(0, 0, 0, 0.02);
  border-radius: var(--r-16);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  align-items: flex-start;
  box-shadow: 0 22px 50px 0 rgba(0, 0, 0, 0.04);
}

.korial-case-study .tile img.ico {
  width: clamp(24px, 1.6667vw, 32px);
  height: clamp(24px, 1.6667vw, 32px);
}

.korial-case-study .tile p {
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: 1.5;
}

.korial-case-study .tile p span {
  color: var(--c-teal-deep);
}

.korial-case-study [id] {
  scroll-margin-top: 100px;
}

.korial-case-study .korial-sections-sticky-wrapper {
  position: relative;
  width: 100%;
  background: var(--c-grey-bg);
  padding-top: var(--sp-40);
}

/* =========================== 4. AT A GLANCE ============================ */
.korial-case-study .glance {
  align-items: stretch;
}

.korial-case-study .navbar {
  position: sticky;
  top: 72px;
  z-index: 999;
  background: var(--c-ink);
  border-radius: var(--r-16);
  display: flex;
  align-items: center;
  padding: 8px 12px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4);
  margin-bottom: var(--sp-20);
}

.korial-case-study .navbar__links {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  gap: var(--sp-12);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: var(--fs-22);
  line-height: 1.2;
}

.korial-case-study .navbar__links::-webkit-scrollbar {
  display: none;
}

.korial-case-study .navbar__links a {
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--c-white);
  padding: 10px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.korial-case-study .navbar__links a:hover {
  color: var(--c-mint);
}

.korial-case-study .navbar__links a.active {
  background: var(--c-mint);
  color: var(--c-ink);
}

.korial-case-study .glance__card {
  background: var(--c-white);
  border-radius: var(--r-16);
  padding: var(--sp-40);
  display: flex;
  flex-direction: column;
  gap: var(--sp-30);
  width: 100%;
}

.korial-case-study .grow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
  width: 100%;
}

.korial-case-study .grow__k {
  flex: none;
  width: clamp(120px, 12.5vw, 240px);
  display: flex;
  align-items: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--c-muted);
  text-transform: uppercase;
}

.korial-case-study .grow__v {
  flex: 1 1 0;
  min-width: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: var(--fs-22);
  line-height: 1.5;
  color: var(--c-ink);
}

.korial-case-study .grow__v .ico.arrow-ru {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

.korial-case-study .grow__v b {
  font-weight: 700;
}

.korial-case-study .rule {
  width: 100%;
  height: 1px;
  background-image: var(--a-divider);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  flex: none;
}

.korial-case-study .link-em {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: var(--fs-22);
  line-height: 1.5;
  color: var(--c-teal-deep);
  text-decoration: underline;
}

.korial-case-study .arrow-ru {
  width: clamp(22px, 1.5625vw, 30px);
  height: clamp(22px, 1.5625vw, 30px);
  transform: rotate(-90deg);
  object-fit: contain;
}

.korial-case-study .people {
  display: flex;
  align-items: center;
  gap: var(--sp-40);
  flex-wrap: wrap;
}

.korial-case-study .person {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}

.korial-case-study .person img.av {
  width: clamp(42px, 2.9167vw, 56px);
  height: clamp(42px, 2.9167vw, 56px);
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

.korial-case-study .person__t {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Manrope', sans-serif;
}

.korial-case-study .person__t a {
  font-weight: 700;
  font-size: var(--fs-22);
  line-height: 1.2;
  text-decoration: none;
}

.korial-case-study .person__t p {
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: 1.2;
  opacity: 0.6;
}

.korial-case-study .chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-12);
}

.korial-case-study .chip {
  background: var(--c-grey-bg);
  border-radius: 4px;
  padding: 8px 14px;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--c-ink);
}

.korial-case-study .chip--blue {
  background: var(--c-chip-blue);
}

.korial-case-study .statrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-16);
  width: 100%;
}

.korial-case-study .stat {
  background: var(--c-ink-2);
  border: 1px solid var(--c-border-d);
  border-radius: var(--r-16);
  padding: var(--sp-24);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.korial-case-study .stat b {
  font-weight: 700;
  font-size: var(--fs-50);
  line-height: 1.2;
  color: var(--c-mint);
}

.korial-case-study .stat p {
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--c-white);
}

/* ====================== 5. WHY THIS HAD TO BE BUILT ==================== */
.korial-case-study .why {
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

.korial-case-study .why__deco {
  position: absolute;
  left: 70.104%;
  top: -7.897%;
  width: 34.792%;
  aspect-ratio: 668/407;
  background-image: var(--a-deco-why);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.korial-case-study .why__grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-60);
  width: 100%;
  position: relative;
}

.korial-case-study .why__quote {
  flex: 0 1 930px;
  border-left: 3px solid var(--c-green-rule);
  padding-left: var(--sp-40);
  display: flex;
  flex-direction: column;
  gap: var(--sp-60);
}

.korial-case-study .why__quote q {
  display: block;
  quotes: none;
  font-weight: 500;
  font-size: var(--fs-42);
  line-height: 1.333;
  color: var(--c-white);
}

.korial-case-study .why__by {
  font-size: 0;
  letter-spacing: 2px;
}

.korial-case-study .why__by .n {
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 18px;
  color: var(--c-mint-2);
}

.korial-case-study .why__by .s {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 18px;
  color: var(--c-on-d-6);
}

.korial-case-study .why__by a {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 18px;
  color: var(--c-orange);
  text-decoration: underline;
}

.korial-case-study .why__side {
  flex: 0 1 704px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

.korial-case-study .why__side p {
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: 1.4;
  color: var(--c-on-d-2);
}

/* ========================== 6. THE CHALLENGE =========================== */
.korial-case-study .chal__box {
  background: var(--c-grey-bg);
  border-radius: var(--r-32);
  padding: var(--sp-20);
  width: 100%;
}

.korial-case-study .chal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-20);
}

.korial-case-study .chal {
  background: var(--c-white);
  border-radius: var(--r-16);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
  min-height: clamp(220px, 16.5104vw, 317px);
}

.korial-case-study .chal img.ico {
  width: clamp(26px, 1.7708vw, 34px);
  height: clamp(26px, 1.7708vw, 34px);
}

.korial-case-study .chal h3 {
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-28);
  line-height: 1.4286;
}

.korial-case-study .chal p {
  margin-top: auto;
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.625;
  opacity: 0.7;
}

.korial-case-study .chal__head {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.0938vw, 21px);
  align-items: flex-start;
}

/* ==================== 7. HOW AN INSPECTION MISSION RUNS ================ */
.korial-case-study .steps {
  align-items: stretch;
}

.korial-case-study .steps h2 {
  color: var(--c-mint);
}

.korial-case-study .steps__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-24);
}

.korial-case-study .step {
  background: rgba(241, 241, 243, 0.07);
  border-radius: var(--r-16);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
  min-height: clamp(240px, 17.5vw, 336px);
}

.korial-case-study .step__n {
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: normal;
  color: var(--c-mint);
}

.korial-case-study .step__t {
  font-weight: 600;
  font-size: var(--fs-36);
  line-height: normal;
  color: var(--c-white);
}

.korial-case-study .step__b {
  margin-top: auto;
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: 1.4583;
  color: var(--c-on-d-1);
}

.korial-case-study .step__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  align-items: flex-start;
}

/* ============================ 8. THE RESULTS =========================== */
.korial-case-study .results__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.korial-case-study .result {
  padding-inline: var(--sp-40);
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
  border-right: 1px solid rgba(125, 126, 139, 0.5);
}

.korial-case-study .results__grid .result:last-child {
  border-right: 0;
}

.korial-case-study .result b {
  font-weight: 700;
  font-size: var(--fs-70);
  line-height: 1.2;
  color: var(--c-white);
}

.korial-case-study .result .lab {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: var(--fs-23);
  line-height: normal;
  color: var(--c-mint);
}

.korial-case-study .result .d {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: 1.4444;
  color: var(--c-on-d-3);
  margin-top: auto;
}

.korial-case-study .result__top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- client logo marquee ---- */
.korial-case-study .marquee {
  position: relative;
  width: 100%;
  max-width: clamp(320px, 75vw, 1280px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 10%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}

.korial-case-study .marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 4vw, 72px);
  width: max-content;
  animation: marquee 32s linear infinite;
}

.korial-case-study .marquee__set {
  display: flex;
  align-items: center;
  gap: clamp(40px, 4vw, 72px);
  flex: none;
}

.korial-case-study .marquee__logo {
  height: clamp(48px, 5vw, 84px);
  max-height: 84px;
  width: auto;
  object-fit: contain;
  flex: none;
  opacity: 0.95;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.korial-case-study .marquee__logo:hover {
  opacity: 1;
  transform: scale(1.05);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.korial-case-study .marquee:hover .marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .korial-case-study .marquee__track {
    animation: none;
  }
}

/* ============ 9. MANUAL INSPECTION VS ENGINEERED PLATFORM ============== */
.korial-case-study .mx-sec {
  align-items: stretch;
}

.korial-case-study .mx-sec h2 {
  max-width: clamp(300px, 58.3333vw, 1120px);
}

.korial-case-study .mx-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.korial-case-study .mx {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 780px;
}

.korial-case-study .mx__col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.korial-case-study .mx__col--lab {
  flex: 1 1 0;
  min-width: 0;
  background: var(--c-white);
  border: 1px solid var(--c-rule-d);
  border-right: 0;
  border-radius: var(--r-16) 0 0 var(--r-16);
}

.korial-case-study .mx__col--mid {
  flex: 0 0 33.333%;
  background: var(--c-grey-bg-3);
  border: 1px solid var(--c-rule-d);
}

.korial-case-study .mx__col--pos {
  flex: 0 0 33.333%;
  background: var(--c-ink);
  color: var(--c-white);
  border-radius: 0 var(--r-16) var(--r-16) 0;
}

.korial-case-study .mx__cell {
  height: clamp(76px, 5.2083vw, 100px);
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-32);
}

.korial-case-study .mx__col--lab .mx__cell + .mx__cell {
  border-top: 1px solid var(--c-rule-d);
}

.korial-case-study .mx__col--mid .mx__cell + .mx__cell {
  border-top: 1px solid var(--c-rule-d);
}

.korial-case-study .mx__col--pos .mx__cell + .mx__cell {
  border-top: 1px solid var(--c-rule-w);
}

.korial-case-study .mx__h {
  font-weight: 600;
  font-size: var(--fs-30);
  line-height: normal;
  white-space: nowrap;
}

.korial-case-study .mx__cell p {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: 1.5;
}

.korial-case-study .mx__col--lab .mx__cell p {
  color: var(--c-muted-2);
}

.korial-case-study .mx__cell img.ico {
  width: clamp(18px, 1.25vw, 24px);
  height: clamp(18px, 1.25vw, 24px);
}

/* ============ 10. PROVEN ACROSS REAL INDUSTRIAL DEPLOYMENTS ============ */
.korial-case-study .proven {
  align-items: stretch;
}

.korial-case-study .proven h2 {
  max-width: clamp(300px, 41.6667vw, 800px);
}

.korial-case-study .proven__grid {
  display: flex;
  gap: var(--sp-60);
  align-items: flex-start;
  width: 100%;
}

.korial-case-study .proven__grid > p {
  flex: 1 1 0;
  min-width: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: var(--fs-26);
  line-height: 1.5;
  color: var(--c-on-d-4);
}

.korial-case-study .qcard {
  flex: 1 1 0;
  min-width: 0;
  background: var(--c-ink-2);
  border: 1px solid var(--c-border-d);
  border-radius: var(--r-12);
  padding: var(--sp-40);
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
  filter: drop-shadow(-1px 16px 18px rgba(140, 140, 140, 0.1));
}

.korial-case-study .qcard q {
  display: block;
  quotes: none;
  font-weight: 500;
  font-size: var(--fs-32);
  line-height: 1.4;
  color: var(--c-on-d-5);
}

.korial-case-study .qcard .by {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.korial-case-study .qcard .by b {
  font-weight: 500;
  font-size: var(--fs-26);
  line-height: 1.3;
  color: var(--c-mint);
}

.korial-case-study .qcard .by p {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: 1.4444;
  color: var(--c-on-d-3);
}

/* ================ 11. BUILT FOR OPERATORS WHO TRUST OUTPUT ============= */
.korial-case-study .ops {
  position: relative;
  overflow: hidden;
  background-color: white !important;
}

.korial-case-study .ops h2 {
  max-width: var(--wrap-1280);
  width: 100%;
}

.korial-case-study .ops__panel {
  width: 100%;
  max-width: var(--wrap-1280);
  background: var(--c-grey-bg-2);
  border-radius: 8px;
  border-left: 8px solid var(--c-teal);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: var(--sp-60) clamp(20px, 4.1667vw, 80px);
  min-height: clamp(300px, 26.0417vw, 500px);
}

.korial-case-study .ops__panel p {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: var(--fs-30);
  line-height: 1.4667;
  color: var(--c-muted);
}

.korial-case-study .ops__panel a {
  font-weight: 700;
  color: var(--c-teal);
  text-decoration: underline;
}

.korial-case-study .ops__deco {
  position: absolute;
  left: 20.833%;
  top: 34.5%;
  width: 4.583%;
  aspect-ratio: 88/50;
  background-image: var(--a-deco-quote);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ================== 12. ENGINEERING DECISIONS WORTH KNOWING ============ */
.korial-case-study .eng {
  align-items: stretch;
}

.korial-case-study .eng__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  width: 100%;
}

.korial-case-study .eng__head h2 {
  max-width: clamp(300px, 58.3333vw, 1120px);
}

.korial-case-study .eng__head p {
  max-width: clamp(300px, 69.6875vw, 1338px);
  font-weight: 500;
  font-size: var(--fs-26);
  line-height: 1.5;
  color: var(--c-muted-3);
}

.korial-case-study .eng__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-16);
  align-items: stretch;
  width: 100%;
}

.korial-case-study .eng__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.korial-case-study .dec {
  background: var(--c-white);
  border-radius: var(--r-20);
  padding: var(--sp-30);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-24);
  flex: 1 1 0;
}

.korial-case-study .dec__tag {
  background: var(--c-ink);
  border-radius: var(--r-20);
  height: clamp(32px, 2.0833vw, 40px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--sp-16);
  align-self: flex-start;
}

.korial-case-study .dec__tag span {
  font-weight: 600;
  font-size: var(--fs-16);
  letter-spacing: -0.48px;
  color: var(--c-white);
  white-space: nowrap;
}

.korial-case-study .dec__b {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.korial-case-study .dec__b h3 {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: 1.4;
}

.korial-case-study .dec__b p {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: 1.5;
  opacity: 0.8;
}

.korial-case-study .eng__photo-wrap {
  border-radius: var(--r-20);
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
}

.korial-case-study .eng__photo-img {
  width: 100%;
  height: 100%;
  min-height: clamp(240px, 20vw, 384px);
  object-fit: cover;
  border-radius: var(--r-20);
}

/* ==================== 13. WHAT'S NEXT FOR THE PLATFORM ================= */
.korial-case-study .next {
  background: var(--c-teal);
  color: var(--c-white);
  position: relative;
  overflow: hidden;
}

.korial-case-study .next__deco {
  position: absolute;
  width: 41.979%;
  aspect-ratio: 806/491;
  background-image: var(--a-deco-next);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.korial-case-study .next__deco--l {
  left: -32.708%;
  top: 26.5%;
}

.korial-case-study .next__deco--r {
  left: 92.083%;
  top: 4.4%;
}

.korial-case-study .next__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-24);
  width: 100%;
  max-width: var(--wrap-1280);
}

.korial-case-study .nx {
  background: var(--c-white);
  border: 1px solid var(--c-white);
  border-radius: var(--r-12);
  padding: var(--sp-40);
  filter: drop-shadow(-1px 16px 18px rgba(140, 140, 140, 0.1));
}

.korial-case-study .nx p {
  font-weight: 400;
  font-size: var(--fs-26);
  line-height: 1.4;
  color: var(--c-ink-2);
}

.korial-case-study .nx b {
  font-weight: 600;
}

/* ==================== 14. FREQUENTLY ASKED ======================= */
.korial-case-study .faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  width: 100%;
  max-width: var(--wrap-1280);
}

.korial-case-study .faq__item {
  background: var(--c-white);
  border-radius: var(--r-16);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  color: var(--c-ink);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.korial-case-study .faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  width: 100%;
  cursor: pointer;
  user-select: none;
}

.korial-case-study .faq__q h3 {
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-30);
  line-height: 1.3333;
}

.korial-case-study .faq__q img.ico {
  width: clamp(16px, 1.0417vw, 20px);
  height: clamp(16px, 1.0417vw, 20px);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  flex: none;
}

.korial-case-study .faq__item.active .faq__q img.ico {
  transform: rotate(45deg);
}

.korial-case-study .faq__a {
  max-width: clamp(280px, 59.0104vw, 1133px);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: 1.4;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease,
    margin-top 0.35s ease;
}

.korial-case-study .faq__item.active .faq__a {
  opacity: 0.85;
  max-height: 500px;
  margin-top: var(--sp-20);
}

/* ============================== 15. FOOTER ============================= */
.korial-case-study .footer {
  padding: var(--pad-y) var(--pad-x-96);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-40);
  text-align: center;
  color: var(--c-white);
  background: radial-gradient(
    ellipse 50% 100% at 50% 137.5%,
    rgba(85, 225, 221, 1) 0%,
    rgba(64, 194, 205, 0.875) 5.9786%,
    rgba(43, 163, 190, 0.75) 11.957%,
    rgba(21, 131, 174, 0.625) 17.936%,
    rgba(0, 100, 158, 0.5) 23.914%,
    rgba(1, 54, 90, 0.75) 61.957%,
    rgba(2, 31, 56, 0.875) 80.979%,
    rgba(2, 20, 39, 0.9375) 90.489%,
    rgba(2, 8, 22, 1) 100%
  );
}

.korial-case-study .footer__logo-img {
  width: clamp(44px, 3.4635vw, 66.5px);
  height: auto;
  object-fit: contain;
}

.korial-case-study .footer h2 {
  max-width: clamp(300px, 49.6875vw, 954px);
  font-weight: 500;
  font-size: var(--fs-64);
  line-height: 1;
  letter-spacing: -1px;
  margin: 0;
}

.korial-case-study .footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--c-white);
  border-radius: 100px;
  padding: var(--sp-16) clamp(22px, 1.8vw, 32px);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: var(--fs-19);
  line-height: 1.263;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.korial-case-study .footer__cta:hover {
  background: var(--c-mint);
  color: var(--c-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(57, 244, 181, 0.35);
}

.korial-case-study .footer__cta .cta__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.korial-case-study .footer__cta:hover .cta__icon {
  transform: translateX(5px);
}

/* ======================================================================
   BREAKPOINTS - layout reflow only
   ====================================================================== */
@media (max-width: 1280px) {
  .korial-case-study .navbar {
    flex-wrap: nowrap;
  }

  .korial-case-study .navbar__links {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    gap: var(--sp-12);
  }

  .korial-case-study .eng__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .korial-case-study .eng__photo-wrap {
    grid-column: 1 / -1;
    min-height: 300px;
  }
}

@media (max-width: 1024px) {
  .korial-case-study .takeaways__grid,
  .korial-case-study .statrow,
  .korial-case-study .results__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .korial-case-study .results__grid .result {
    border-bottom: 1px solid rgba(125, 126, 139, 0.5);
    padding-block: var(--sp-32);
  }

  .korial-case-study .results__grid .result:nth-child(2n) {
    border-right: 0;
  }

  .korial-case-study .results__grid .result:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .korial-case-study .chal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .korial-case-study .steps__grid {
    grid-template-columns: 1fr;
  }

  .korial-case-study .why__grid {
    flex-direction: column;
    align-items: stretch;
  }

  .korial-case-study .why__quote,
  .korial-case-study .why__side {
    flex: 1 1 auto;
  }

  .korial-case-study .proven__grid {
    flex-direction: column;
  }

  .korial-case-study .why__deco,
  .korial-case-study .ops__deco {
    display: none;
  }
}

@media (max-width: 768px) {
  .korial-case-study {
    --pad-x-150: 16px;
    --pad-x-96: 16px;
    --pad-x-80: 16px;
    --fs-18: 15px;
    --fs-16: 15px;
  }

  .korial-case-study .sec,
  .korial-case-study .sec--80,
  .korial-case-study .sec--96,
  .korial-case-study section:not(.hero) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .korial-case-study .hero {
    aspect-ratio: 4 / 3.4;
    min-height: 350px;
  }

  .korial-case-study .hero__logo {
    top: clamp(24px, 5vw, 40px);
  }

  .korial-case-study .hero__main {
    bottom: 0;
    top: auto;
    width: 84%;
    height: auto;
  }

  .korial-case-study .hero__sub {
    display: none;
  }

  .korial-case-study .intro__h1,
  .korial-case-study .intro__p {
    max-width: 100%;
  }

  .korial-case-study .takeaways__grid,
  .korial-case-study .statrow,
  .korial-case-study .chal__grid,
  .korial-case-study .next__grid {
    grid-template-columns: 1fr;
  }

  .korial-case-study .results__grid {
    grid-template-columns: 1fr;
  }

  .korial-case-study .results__grid .result {
    border-right: 0;
    padding-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-block: var(--sp-24);
    border-bottom: 1px solid rgba(125, 126, 139, 0.5);
  }

  .korial-case-study .results__grid .result:last-child {
    border-bottom: 0;
  }

  .korial-case-study .eng__grid {
    grid-template-columns: 1fr;
  }

  .korial-case-study .grow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-12);
  }

  .korial-case-study .grow__k,
  .korial-case-study .grow__v {
    width: 100%;
  }

  .korial-case-study .navbar {
    padding: 10px;
  }

  .korial-case-study .navbar__pill {
    width: 100%;
  }

  .korial-case-study .faq__q {
    align-items: flex-start;
  }

  .korial-case-study .ops__panel {
    padding: var(--sp-40) var(--sp-24);
  }

  .korial-case-study .next__deco {
    display: none;
  }
}

@media (max-width: 480px) {
  .korial-case-study .hero {
    aspect-ratio: 4 / 3.6;
    min-height: 320px;
  }

  .korial-case-study .hero__logo {
    top: 20px;
  }

  .korial-case-study .hero__main {
    bottom: 0;
    top: auto;
    width: 90%;
    height: auto;
  }

  .korial-case-study .mx {
    min-width: 640px;
  }
}

@media (max-width: 991px) {
  .korial-case-study .navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 6px 8px;
    margin: 12px auto;
    width: calc(100% - 32px);
    flex-wrap: nowrap;
  }

  .korial-case-study .navbar__links {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    gap: 8px;
  }

  .korial-case-study .navbar__links::-webkit-scrollbar {
    display: none;
  }

  .korial-case-study .navbar__links a {
    padding: 8px 16px;
    font-size: 15px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}