/* ==========================================================================
   NAGA / CAPEX CASE STUDY · MindInventory
   UI/UX Design for Multi-Asset Social Trading Platform
   Single Unified Stylesheet with Local Fonts & Assets
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LOCAL FONT DECLARATIONS (@font-face)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600-1.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600-2.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600-3.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600-4.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600-5.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600-6.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-italic-7.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-italic-8.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-italic-9.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-italic-10.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-italic-11.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-italic-12.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-italic-13.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-14.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-15.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-16.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-17.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-18.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-19.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-20.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-21.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-22.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-23.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-24.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-25.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-26.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500-27.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-28.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-29.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-30.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-31.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-32.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-33.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-34.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-35.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-36.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-37.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-38.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-39.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-40.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-41.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. ROOT VARIABLES (COLORS, LOCAL ASSETS, SPACING, FLUID SIZING)
   -------------------------------------------------------------------------- */
:root {
  /* ---------------- Local Image Assets ---------------- */
  --a-hero-glow: url('../images/naga-hero-glow.webp');
  --a-hero-desk: url('../images/naga-hero-desktop.webp');
  --a-hero-phone-screen: url('../images/naga-hero-phone-screen.webp');
  --a-lens: url('../images/naga-phone-lens.webp');
  --a-lens1: url('../images/svg/naga-phone-lens1.svg');
  --a-lens-line: url('../images/svg/naga-phone-lens-line.svg');
  --a-logo-everything: url('../images/svg/naga-logo-everything.svg');
  --a-logo-money: url('../images/svg/naga-logo-money.svg');
  --a-logo-word: url('../images/svg/naga-logo-naga-word.svg');
  --a-logo-bolt: url('../images/svg/naga-logo-naga-bolt.svg');
  --a-rule-full: url('../images/svg/naga-divider-rule-full.svg');
  --a-rule-row: url('../images/svg/naga-divider-rule-row.svg');
  --a-rule-res2: url('../images/svg/naga-divider-rule-results.svg');
  --a-tk-1: url('../images/svg/naga-takeaway-icon-1.svg');
  --a-tk-2: url('../images/svg/naga-takeaway-icon-2.svg');
  --a-tk-3: url('../images/svg/naga-takeaway-icon-3.svg');
  --a-tk-4: url('../images/svg/naga-takeaway-icon-4.svg');
  --a-g-client: url('../images/svg/naga-glance-icon-client.svg');
  --a-g-group: url('../images/svg/naga-glance-icon-group.svg');
  --a-g-hq: url('../images/svg/naga-glance-icon-hq.svg');
  --a-g-listed: url('../images/svg/naga-glance-icon-listed.svg');
  --a-g-industry: url('../images/svg/naga-glance-icon-industry.svg');
  --a-g-engage: url('../images/svg/naga-glance-icon-engagement.svg');
  --a-g-contact: url('../images/svg/naga-glance-icon-contact.svg');
  --a-g-services: url('../images/svg/naga-glance-icon-services.svg');
  --a-g-regulatory: url('../images/svg/naga-glance-icon-regulatory.svg');
  --a-g-avatar: url('../images/naga-avatar-bogdan-ungureanu.webp');
  --a-res-laptop: url('../images/naga-results-laptop.webp');
  --a-faq-minus: url('../images/svg/naga-icon-faq-minus.svg');
  --a-faq-plus: url('../images/svg/naga-icon-faq-plus.svg');
  --a-cta-arrow: url('../images/svg/naga-icon-cta-arrow.svg');
  --a-cta-screen: url('../images/naga-cta-screen.webp');
  --a-ta-1: url('../images/naga-approach-trading-experience.webp');
  --a-ta-2: url('../images/naga-approach-web-mobile.webp');
  --a-ta-3: url('../images/naga-approach-financial-data.webp');
  --a-words-video: url('../images/naga-video-bogdan-thumbnail.webp');
  --a-quote-mark: url('../images/svg/naga-quote-mark.svg');
  --a-wn-1: url('../images/naga-whats-next-autocopy.webp');
  --a-wn-2: url('../images/naga-whats-next-neobanking.webp');

  /* ---------------- Colour Palette ---------------- */
  --c-black: #000000;
  --c-white: #ffffff;
  --c-red: #ee3142;
  --c-red-alt: #ed3142;
  --c-blue: #1877f2;
  --c-ink: #1e252f;
  --c-ink-deep: #070f1b;
  --c-body: #555555;
  --c-muted: #666666;
  --c-muted-2: #888888;
  --c-surface: #f3f5f6;
  --c-rule: rgba(0, 0, 0, 0.1);
  --c-rule-w: rgba(255, 255, 255, 0.1);
  --c-on-dark: rgba(255, 255, 255, 0.8);

  /* ---------------- Fluid Typography (1920 base) ---------------- */
  --fs-54: clamp(30px, 2.8125vw, 54px);
  --fs-50: clamp(28px, 2.6042vw, 50px);
  --fs-40: clamp(26px, 2.0833vw, 40px);
  --fs-34: clamp(24px, 1.7708vw, 34px);
  --fs-30: clamp(21px, 1.5625vw, 30px);
  --fs-28: clamp(18px, 1.4583vw, 28px);
  --fs-26: clamp(17px, 1.3542vw, 26px);
  --fs-24: clamp(16px, 1.25vw, 24px);
  --fs-22: clamp(15px, 1.1458vw, 22px);

  /* Line Heights */
  --lh-70: clamp(38px, 3.6458vw, 70px);
  --lh-65: clamp(36px, 3.3854vw, 65px);
  --lh-39: clamp(26px, 2.0313vw, 39px);
  --lh-36: clamp(25px, 1.875vw, 36px);
  --lh-30: clamp(22px, 1.5625vw, 30px);

  /* ---------------- Fluid Spacing ---------------- */
  --pad-100: clamp(48px, 5.2083vw, 100px);
  --pad-60: clamp(24px, 3.125vw, 60px);
  --pad-40: clamp(20px, 2.0833vw, 40px);
  --pad-30: clamp(18px, 1.5625vw, 30px);
  --sp-80: clamp(32px, 4.1667vw, 80px);
  --sp-40: clamp(20px, 2.0833vw, 40px);
  --sp-24: clamp(14px, 1.25vw, 24px);
  --sp-20: clamp(12px, 1.0417vw, 20px);
  --sp-16: clamp(10px, 0.8333vw, 16px);
  --sp-14: clamp(9px, 0.7292vw, 14px);
  --sp-10: clamp(8px, 0.5208vw, 10px);
  --sp-6: clamp(4px, 0.3125vw, 6px);

  /* Radii */
  --r-20: clamp(12px, 1.0417vw, 20px);
  --r-16: clamp(10px, 0.8333vw, 16px);

  /* Containers */
  --gutter: clamp(16px, 2.0833vw, 40px);
  --wrap: 1840px;
  --col: 1375px;

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================ Reset & Base ============================ */
*,
*::before,
*::after,
.naga-casestudy-wrapper *,
.naga-casestudy-wrapper *::before,
.naga-casestudy-wrapper *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  background: var(--c-white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;
  color: var(--c-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.naga-casestudy-wrapper {
  margin: 0;
  width: 100%;
  background: var(--c-white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;
  color: var(--c-black);
}

.naga-casestudy-wrapper p {
  margin: 0;
}

.naga-casestudy-wrapper a {
  color: inherit;
  text-decoration: none;
}

.naga-casestudy-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

/* ============================ Shared Layout ============================ */
.naga-casestudy-wrapper .page {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--gutter);
}

.naga-casestudy-wrapper .sec {
  width: 100%;
}

.naga-casestudy-wrapper .col {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
}

.naga-casestudy-wrapper .ico {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: none;
  display: inline-block;
}

/* Typography Helpers */
.naga-casestudy-wrapper .h1 {
  font-weight: 700;
  font-size: var(--fs-54);
  line-height: var(--lh-70);
  margin: 0;
  letter-spacing: -0.02em;
}

.naga-casestudy-wrapper .h2 {
  font-weight: 700;
  font-size: var(--fs-50);
  line-height: var(--lh-65);
  margin: 0;
  letter-spacing: -0.015em;
}

.naga-casestudy-wrapper .body-28 {
  font-weight: 400;
  font-size: var(--fs-28);
  line-height: var(--lh-39);
  color: var(--c-body);
}

.naga-casestudy-wrapper .body-26 {
  font-weight: 400;
  font-size: var(--fs-26);
  line-height: var(--lh-36);
  color: var(--c-ink);
}

.naga-casestudy-wrapper .b {
  font-weight: 700;
  color: var(--c-black);
}

.naga-casestudy-wrapper .red {
  color: var(--c-red) !important;
}

.naga-casestudy-wrapper .blue {
  color: var(--c-blue);
}

.naga-casestudy-wrapper .rule {
  width: 100%;
  height: 1px;
  flex: none;
  background-image: var(--a-rule-row);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* =============================== 1. HERO =============================== */
.naga-casestudy-wrapper .hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1840 / 1040;
  background: var(--c-black);
  border-radius: var(--r-20);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.naga-casestudy-wrapper .hero__logo {
  position: absolute;
  top: 6.731%;
  left: 50%;
  transform: translateX(-50%);
  width: 14.301%;
  max-width: 264px;
  height: auto;
  aspect-ratio: 264 / 110;
  z-index: 5;
  pointer-events: auto;
  display: block;
}

.naga-casestudy-wrapper .hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--r-20);
}

/* ============================== 2. INTRO =============================== */
.naga-casestudy-wrapper .intro {
  padding: var(--pad-100) 0;
  position: relative;
}

.naga-casestudy-wrapper .intro__in {
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
}

.naga-casestudy-wrapper .intro h1 span.k {
  color: var(--c-red-alt);
}

.naga-casestudy-wrapper .intro .lede .b {
  font-weight: 700;
  color: var(--c-black);
}

.naga-casestudy-wrapper .intro .lede .red,
.naga-casestudy-wrapper .intro .lede a.red,
.naga-casestudy-wrapper .intro .lede .b.red {
  color: var(--c-red) !important;
}

.naga-casestudy-wrapper .intro__rule {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-image: var(--a-rule-full);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ============================ 3. TAKEAWAYS ============================= */
.naga-casestudy-wrapper .take {
  padding: var(--pad-100) 0;
}

.naga-casestudy-wrapper .take__in {
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
  width: 100%;
}

.naga-casestudy-wrapper .take__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-20);
  width: 100%;
}

.naga-casestudy-wrapper .tk {
  position: relative;
  border-radius: var(--r-20);
  background: var(--c-surface);
  overflow: hidden;
  padding: var(--pad-30);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.naga-casestudy-wrapper .tk:hover {
  background: var(--c-red);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(238, 49, 66, 0.35);
}

.naga-casestudy-wrapper .tk--red {
  background: var(--c-red);
}

.tk i,
.naga-casestudy-wrapper .tk__icon {
  width: clamp(28px, 2.0833vw, 40px);
  height: clamp(28px, 2.0833vw, 40px);
  object-fit: contain;
  transition: filter 0.3s ease;
}

.tk:hover i,
.tk:hover .tk__icon,
.tk--red i,
.naga-casestudy-wrapper .tk--red .tk__icon {
  filter: brightness(0) invert(1);
}

.naga-casestudy-wrapper .tk p {
  margin-top: var(--sp-20);
  font-weight: 500;
  font-size: var(--fs-26);
  line-height: var(--lh-36);
  color: var(--c-ink);
  transition: color 0.3s ease;
}

.tk:hover p,
.naga-casestudy-wrapper .tk--red p {
  color: var(--c-white);
}

/* ========================== 4. NAV + AT A GLANCE ======================= */
.naga-casestudy-wrapper .glance {
  padding-bottom: var(--pad-100);
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

.naga-casestudy-wrapper .tabs {
  display: flex;
  align-items: flex-end;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 72px;
  background: var(--c-white);
  z-index: 100;
  padding-top: var(--sp-10);
  border-bottom: 2px solid var(--c-rule);
  margin-bottom: var(--sp-20);
}

.naga-casestudy-wrapper .tabs::-webkit-scrollbar {
  display: none;
}

.naga-casestudy-wrapper .tabs a {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-20) var(--pad-30);
  white-space: nowrap;
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-24);
  color: var(--c-muted-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--transition-smooth);
}

.naga-casestudy-wrapper .tabs a:hover {
  color: var(--c-ink);
}

.naga-casestudy-wrapper .tabs a.is-active {
  color: var(--c-blue);
  font-weight: 600;
  border-bottom-color: var(--c-blue);
}

.naga-casestudy-wrapper .tabs .filler {
  flex: 1 0 0;
  min-width: 0;
}

.naga-casestudy-wrapper .panel {
  background: var(--c-surface);
  border-radius: var(--r-20);
  padding: var(--pad-60);
  width: 100%;
}

.naga-casestudy-wrapper .panel>h2 {
  margin-bottom: var(--pad-40);
}

.naga-casestudy-wrapper .gcard {
  background: var(--c-white);
  border-radius: var(--r-16);
  padding: var(--pad-40);
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.naga-casestudy-wrapper .grow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-20);
  width: 100%;
}

.naga-casestudy-wrapper .grow__k {
  flex: 0 0 clamp(180px, 28%, 260px);
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}

.grow__k i,
.naga-casestudy-wrapper .glance__icon {
  width: clamp(18px, 1.3542vw, 26px);
  height: clamp(18px, 1.3542vw, 26px);
  object-fit: contain;
  flex: none;
}

.naga-casestudy-wrapper .grow__k span {
  font-weight: 600;
  font-size: var(--fs-24);
  color: var(--c-ink-deep);
  line-height: normal;
}

.naga-casestudy-wrapper .grow__v {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  font-weight: 400;
  font-size: var(--fs-26);
  line-height: var(--lh-36);
  color: var(--c-ink);
}

.naga-casestudy-wrapper .grow__v em {
  font-style: italic;
  font-size: var(--fs-22);
  line-height: 1.372;
  color: var(--c-muted);
}

.naga-casestudy-wrapper .gperson {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}

.gperson .av,
.naga-casestudy-wrapper .gperson__avatar {
  width: clamp(46px, 3.6458vw, 70px);
  height: clamp(46px, 3.6458vw, 70px);
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background-image: var(--a-g-avatar);
  background-size: cover;
  background-position: center;
}

.naga-casestudy-wrapper .gperson__details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.naga-casestudy-wrapper .gperson__name {
  font-weight: 600;
  font-size: var(--fs-26);
  color: var(--c-ink-deep);
  line-height: 1.2;
}

.naga-casestudy-wrapper .gperson__role {
  font-style: italic;
  font-size: var(--fs-22);
  line-height: 1.372;
  color: var(--c-muted);
}

/* ===================== 5. WHY THIS HAD TO BE BUILT ===================== */
.naga-casestudy-wrapper .why {
  padding: var(--pad-100) 0;
}

.naga-casestudy-wrapper .why__in {
  display: flex;
  gap: var(--sp-80);
  align-items: center;
}

.naga-casestudy-wrapper .why__l {
  flex: 0 1 850px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
}

.naga-casestudy-wrapper .why__r {
  flex: 0 0 445px;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-20);
  overflow: hidden;
}

.naga-casestudy-wrapper .stat {
  background: var(--c-ink);
  border: 1px solid var(--c-rule-w);
  padding: var(--pad-30) var(--pad-40);
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  transition: var(--transition-smooth);
}

.naga-casestudy-wrapper .stat:hover {
  background: #252e3b;
}

.naga-casestudy-wrapper .stat b {
  font-weight: 700;
  font-size: var(--fs-40);
  color: var(--c-white);
  line-height: normal;
}

.naga-casestudy-wrapper .stat b.sm {
  font-size: var(--fs-30);
}

.naga-casestudy-wrapper .stat p {
  font-weight: 400;
  font-size: var(--fs-24);
  color: var(--c-on-dark);
  line-height: normal;
  letter-spacing: 0.04em;
}

/* ======================= 6. THE DESIGN APPROACH ======================= */
.naga-casestudy-wrapper .appr {
  padding: var(--pad-100) 0;
  display: flex;
  flex-direction: column;
  gap: var(--pad-40);
}

.naga-casestudy-wrapper .appr__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3.125vw, 60px);
  width: 100%;
  align-items: stretch;
}

.naga-casestudy-wrapper .acard {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--r-20);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  transition: var(--transition-smooth);
}

.naga-casestudy-wrapper .acard:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.1);
}

.naga-casestudy-wrapper .acard__shot {
  aspect-ratio: 571 / 320;
  width: 100%;
  background: #e4e7e9;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: none;
  overflow: hidden;
}

.naga-casestudy-wrapper .acard__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.naga-casestudy-wrapper .acard__t {
  padding: var(--pad-30);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.625vw, 12px);
}

.naga-casestudy-wrapper .acard__t h3 {
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-26);
  line-height: clamp(24px, 1.7708vw, 34px);
  color: var(--c-black);
}

.naga-casestudy-wrapper .acard__t p {
  font-weight: 400;
  font-size: var(--fs-22);
  line-height: var(--lh-30);
  color: var(--c-muted);
}

/* ---------------------------- In Their Words -------------------------- */
.naga-casestudy-wrapper .words {
  padding-top: var(--pad-100);
  display: flex;
  flex-direction: column;
  gap: var(--pad-40);
}

.naga-casestudy-wrapper .words__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-20);
  width: 100%;
  align-items: stretch;
}

.naga-casestudy-wrapper .words__video {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-20);
  overflow: hidden;
  background: #000000;
  cursor: pointer;
}

.naga-casestudy-wrapper .words__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.naga-casestudy-wrapper .words__video:hover img {
  transform: scale(1.03);
}

.naga-casestudy-wrapper .words__play-btn {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: clamp(52px, 4.5vw, 76px);
  height: clamp(52px, 4.5vw, 76px);
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  z-index: 3;
}

.naga-casestudy-wrapper .words__play-btn svg {
  margin-left: 4px;
  width: 36%;
  height: 36%;
}

.naga-casestudy-wrapper .words__video:hover .words__play-btn {
  transform: scale(1.12);
  box-shadow: 0 12px 32px rgba(24, 119, 242, 0.45);
}

/* Video Modal Popup Overlay */
.naga-modal,
.naga-casestudy-wrapper .naga-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.naga-modal.is-active,
.naga-casestudy-wrapper .naga-modal.is-active {
  opacity: 1;
  visibility: visible;
}

.naga-modal__backdrop,
.naga-casestudy-wrapper .naga-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.naga-modal__container,
.naga-casestudy-wrapper .naga-modal__container {
  position: relative;
  width: 90%;
  max-width: 960px;
  background: #000000;
  border-radius: 16px;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.naga-modal.is-active .naga-modal__container,
.naga-casestudy-wrapper .naga-modal.is-active .naga-modal__container {
  transform: scale(1);
}

.naga-modal__close,
.naga-casestudy-wrapper .naga-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s ease, transform 0.2s ease;
}

.naga-modal__close:hover,
.naga-casestudy-wrapper .naga-modal__close:hover {
  background: #ee3142;
  transform: scale(1.1);
}

.naga-modal__video-wrapper,
.naga-casestudy-wrapper .naga-modal__video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.naga-modal__video-wrapper iframe,
.naga-casestudy-wrapper .naga-modal__video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.naga-casestudy-wrapper .quote {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-20);
  background: #000000;
  border: 1px solid var(--c-surface);
  overflow: hidden;
  padding: clamp(24px, 2.5vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.naga-casestudy-wrapper .quote>p {
  font-weight: 400;
  font-size: var(--fs-28);
  line-height: clamp(26px, 1.95vw, 38px);
  color: var(--c-white);
  max-width: 98%;
  margin: 0;
}

.naga-casestudy-wrapper .quote__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  margin-top: var(--sp-20);
}

.naga-casestudy-wrapper .quote__by {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--c-white);
}

.naga-casestudy-wrapper .quote__by b {
  font-weight: 700;
  font-size: var(--fs-26);
  line-height: 1.2;
  color: #ffffff;
}

.naga-casestudy-wrapper .quote__by em {
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-22);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
}

.naga-casestudy-wrapper .quote__mark {
  width: clamp(60px, 5.06vw, 97px);
  height: auto;
  flex: none;
  display: block;
  object-fit: contain;
  transform: rotate(180deg);
  transform-origin: center center;
}

/* ============================ 7. THE RESULTS ========================== */
.naga-casestudy-wrapper .results {
  position: relative;
  background: var(--c-surface);
  border-radius: var(--r-20);
  overflow: hidden;
  aspect-ratio: 1840 / 966;
}

.naga-casestudy-wrapper .results h2 {
  position: absolute;
  left: 3.261%;
  top: 6.211%;
  white-space: nowrap;
}

.naga-casestudy-wrapper .results__card {
  position: absolute;
  left: 3.261%;
  top: 17.081%;
  width: 47.12%;
  background: var(--c-white);
  border-radius: var(--r-16);
  padding: var(--pad-30);
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.naga-casestudy-wrapper .results__head {
  display: flex;
  gap: var(--sp-20);
  align-items: center;
  width: 100%;
  font-weight: 400;
  font-size: var(--fs-26);
  line-height: var(--lh-36);
  color: var(--c-blue);
}

.naga-casestudy-wrapper .results__head span:first-child {
  width: 38.06%;
  flex: none;
}

.naga-casestudy-wrapper .rrow {
  display: flex;
  gap: var(--sp-20);
  align-items: flex-start;
  width: 100%;
}

.naga-casestudy-wrapper .rrow__l {
  flex: none;
  width: 38.06%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.naga-casestudy-wrapper .rrow__l b {
  font-weight: 700;
  font-size: var(--fs-34);
  color: var(--c-red);
  line-height: normal;
}

.naga-casestudy-wrapper .rrow__l span {
  font-weight: 400;
  font-size: var(--fs-26);
  line-height: var(--lh-36);
  color: var(--c-black);
}

.naga-casestudy-wrapper .rrow>p {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 400;
  font-size: var(--fs-22);
  line-height: normal;
  color: var(--c-muted);
}

.naga-casestudy-wrapper .rrule {
  width: 100%;
  height: 1px;
  background-image: var(--a-rule-res2);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.naga-casestudy-wrapper .results__shot {
  position: absolute;
  right: -20.05%;
  top: -8.696%;
  width: 81.79%;
  height: 116.87%;
  background-image: var(--a-res-laptop);
  background-size: cover;
  background-position: center;
}

.naga-casestudy-wrapper .results__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (min-width: 992px) and (max-width: 1300px) {
  .naga-casestudy-wrapper .results__card {
    gap: var(--sp-24);
    padding: var(--sp-24);
    top: 14%;
  }
}

/* ======================= 8. A PLATFORM THAT GREW ======================= */
.naga-casestudy-wrapper .grew {
  padding: var(--pad-100) 0;
}

.naga-casestudy-wrapper .grew__in {
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
}

/* ============================ 9. WHAT'S NEXT ========================== */
.naga-casestudy-wrapper .next {
  background: var(--c-surface);
  border-radius: var(--r-20);
  padding: var(--pad-60);
  display: flex;
  flex-direction: column;
  gap: var(--pad-40);
}

.naga-casestudy-wrapper .next__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-40);
  width: 100%;
  align-items: stretch;
}

.naga-casestudy-wrapper .ncard {
  background: var(--c-white);
  border-radius: var(--r-16);
  padding: var(--pad-40);
  display: flex;
  flex-direction: column;
  gap: var(--pad-40);
  transition: var(--transition-smooth);
}

.naga-casestudy-wrapper .ncard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.08);
}

.naga-casestudy-wrapper .ncard__t {
  display: flex;
  gap: var(--sp-20);
  align-items: flex-start;
}

.naga-casestudy-wrapper .ncard__dot {
  flex: none;
  height: clamp(27px, 2.0313vw, 39px);
  display: flex;
  align-items: center;
}

.naga-casestudy-wrapper .ncard__dot span {
  width: clamp(7px, 0.5208vw, 10px);
  height: clamp(7px, 0.5208vw, 10px);
  background: var(--c-red);
  display: block;
  border-radius: 2px;
}

.naga-casestudy-wrapper .ncard__t p {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 400;
  font-size: var(--fs-28);
  line-height: var(--lh-39);
  color: var(--c-body);
}

.naga-casestudy-wrapper .ncard__shot {
  width: 100%;
  aspect-ratio: 760 / 492;
  margin-top: auto;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  overflow: hidden;
}

.naga-casestudy-wrapper .ncard__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* ============================ 10. FAQ + CTA =========================== */
.naga-casestudy-wrapper .faq {
  padding: clamp(48px, 5vw, 100px) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-40, 40px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.naga-casestudy-wrapper .faq h2 {
  text-align: center;
  width: 100%;
  font-size: clamp(28px, 2.5vw, 44px);
  font-weight: 700;
  color: var(--c-black, #000000);
}

.naga-casestudy-wrapper .faq__list {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.2vw, 20px);
  width: 100%;
}

.naga-casestudy-wrapper .faq__item {
  background: var(--c-surface, #f3f5f6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: clamp(12px, 1vw, 20px);
  padding: clamp(20px, 2vw, 28px) clamp(24px, 2.2vw, 36px);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.naga-casestudy-wrapper .faq__item:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.naga-casestudy-wrapper .faq__item.is-open {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.naga-casestudy-wrapper .faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16, 16px);
  width: 100%;
}

.naga-casestudy-wrapper .faq__q-text,
.naga-casestudy-wrapper .faq__q h3,
.naga-casestudy-wrapper .faq__q p {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-weight: 700 !important;
  font-size: clamp(18px, 1.35vw, 24px) !important;
  line-height: 1.4 !important;
  color: var(--c-ink-deep, #070f1b) !important;
}

.faq__q i,
.naga-casestudy-wrapper .faq__q .faq__icon {
  width: clamp(22px, 1.6vw, 30px);
  height: clamp(22px, 1.6vw, 30px);
  flex-shrink: 0;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.naga-casestudy-wrapper .faq__a {
  font-weight: 400;
  font-size: clamp(16px, 1.1vw, 20px);
  line-height: 1.65;
  color: var(--c-body, #555555);
  max-width: 100%;
  margin-top: clamp(14px, 1.2vw, 20px);
  padding-top: clamp(14px, 1.2vw, 20px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: none;
}

.naga-casestudy-wrapper .faq__item.is-open .faq__a {
  display: block;
  animation: faqFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes faqFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CTA Wrapper with Responsive breakout */
.naga-casestudy-wrapper .ctawrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1840 / 649;
  overflow: visible;
  margin-bottom: var(--pad-100);
}

.naga-casestudy-wrapper .ctawrap .cta {
  position: absolute;
  left: 0;
  top: 20.801%;
  width: 100%;
  height: 79.199%;
  aspect-ratio: auto;
  background: var(--c-black);
  border-radius: var(--r-20);
  overflow: hidden;
}

.naga-casestudy-wrapper .cta__t {
  position: absolute;
  left: 3.261%;
  top: 50%;
  transform: translateY(-50%);
  width: 57.01%;
  display: flex;
  flex-direction: column;
  gap: var(--pad-60);
  z-index: 3;
}

.naga-casestudy-wrapper .cta__t h2 {
  font-weight: 700;
  font-size: var(--fs-54);
  line-height: var(--lh-70);
  color: var(--c-white);
  margin: 0;
}

.naga-casestudy-wrapper .cta__btn {
  align-self: flex-start;
  background: var(--c-blue);
  border-radius: var(--r-16);
  padding: clamp(10px, 0.9375vw, 18px) var(--sp-20);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-10);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-24);
  color: var(--c-white);
  transition: var(--transition-smooth);
}

.naga-casestudy-wrapper .cta__btn:hover {
  background: #2062de;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(49, 121, 255, 0.4);
}

.cta__btn i,
.naga-casestudy-wrapper .cta__btn .cta__arrow {
  width: clamp(24px, 1.9792vw, 38px);
  height: clamp(24px, 1.9792vw, 38px);
  object-fit: contain;
}

.naga-casestudy-wrapper .ctawrap .cta__shot {
  position: absolute;
  left: 60.054%;
  top: 0;
  width: 39.946%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.naga-casestudy-wrapper .cta__shot i {
  position: absolute;
  left: -20.54%;
  top: 0;
  width: 144.07%;
  height: 108.78%;
  display: block;
  background-image: var(--a-cta-screen);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.naga-casestudy-wrapper .cta__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

/* ======================================================================
   RESPONSIVE BREAKPOINTS
   ====================================================================== */
@media (max-width: 991px) {
  .naga-casestudy-wrapper .take__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .naga-casestudy-wrapper .why__in {
    flex-direction: column;
    align-items: stretch;
  }

  .naga-casestudy-wrapper .why__l,
  .naga-casestudy-wrapper .why__r {
    flex: 1 1 auto;
  }

  .naga-casestudy-wrapper .appr__grid {
    grid-template-columns: 1fr;
  }

  .naga-casestudy-wrapper .words__grid,
  .naga-casestudy-wrapper .next__grid {
    grid-template-columns: 1fr;
  }

  .naga-casestudy-wrapper .quote,
  .naga-casestudy-wrapper .words__video {
    aspect-ratio: auto;
  }

  .naga-casestudy-wrapper .quote {
    padding: var(--pad-40);
  }

  .naga-casestudy-wrapper .quote>p,
  .naga-casestudy-wrapper .quote__by {
    position: static;
    width: 100%;
  }

  .naga-casestudy-wrapper .quote__by {
    margin-top: var(--pad-40);
  }

  .naga-casestudy-wrapper .quote__mark {
    display: none;
  }

  .naga-casestudy-wrapper .words__video {
    aspect-ratio: 910 / 504;
  }

  .naga-casestudy-wrapper .results {
    aspect-ratio: auto;
    padding: var(--pad-60) 0;
  }

  .naga-casestudy-wrapper .results h2,
  .naga-casestudy-wrapper .results__card,
  .naga-casestudy-wrapper .results__shot {
    position: static;
    width: 100%;
  }

  .naga-casestudy-wrapper .results h2 {
    padding: 0 var(--pad-60) var(--pad-40);
  }

  .naga-casestudy-wrapper .results__card {
    margin: 0 auto;
    width: calc(100% - 2 * var(--pad-60));
  }

  .naga-casestudy-wrapper .results__shot {
    height: auto;
    aspect-ratio: 1505 / 1129;
    margin-top: var(--pad-40);
  }

  /* stack the CTA and let the phone sit inside it */
  .naga-casestudy-wrapper .ctawrap {
    aspect-ratio: auto;
    background: var(--c-black);
    border-radius: var(--r-20);
    overflow: hidden;
    margin-bottom: var(--pad-60);
  }

  .naga-casestudy-wrapper .ctawrap .cta {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: transparent;
  }

  .naga-casestudy-wrapper .cta__t {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    padding: var(--pad-60);
  }

  .naga-casestudy-wrapper .ctawrap .cta__shot {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    height: auto;
    aspect-ratio: 735 / 550;
  }
}

@media (max-width: 991px) {
  .naga-casestudy-wrapper .tabs {
    top: 0;
  }
}

@media (max-width: 900px) {
  .naga-casestudy-wrapper .faq__a {
    max-width: 100%;
  }

  .naga-casestudy-wrapper .hero__logo {
    width: 26%;
  }
}

@media (max-width: 640px) {
  .naga-casestudy-wrapper .grow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-10);
  }

  .naga-casestudy-wrapper .grow__k {
    width: 100%;
    flex: none;
  }

  .naga-casestudy-wrapper .grow__v {
    width: 100%;
    align-items: flex-start;
    text-align: left;
    padding-left: clamp(24px, 6vw, 36px);
  }

  .naga-casestudy-wrapper .take__grid {
    grid-template-columns: 1fr;
  }

  .naga-casestudy-wrapper .tk {
    aspect-ratio: auto;
    /* min-height: 220px; */
  }

  .naga-casestudy-wrapper .hero {
    aspect-ratio: 3 / 4;
  }

  .naga-casestudy-wrapper .hero__logo {
    width: 36%;
    top: 4.5%;
  }

  .naga-casestudy-wrapper .cta__t {
    padding: var(--pad-40);
  }
}

/* SEO Heading Element Resets */
.naga-casestudy-wrapper h3.faq__q-text {
  margin: 0;
  padding: 0;
}