/* hero css  */

 body {
    background-color: #fff;
 }
 
 .hero {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 100dvh;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            background: url("/services/jovial-to-c-migration/image/JOVIAL to C bg.webp");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* ════════════════════════════════════════════════
   FLOATING CLOUD SVG
════════════════════════════════════════════════ */
        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-16px);
            }
        }

        /* ════════════════════════════════════════════════
   MAIN CONTENT GRID
════════════════════════════════════════════════ */
        .hero-content {
            position: relative;
            z-index: 2;
            flex: 1;
            display: grid;
            grid-template-columns: 1.6fr 1fr;
            align-items: center;
            gap: clamp(24px, 4vw, 60px);
            width: 100%;
            max-width: 1380px;
            margin: 0 auto;
            padding: clamp(64px, 9vh, 110px) clamp(20px, 6vw, 80px) clamp(40px, 6vh, 72px);
        }

        /* ════════════════════════════════════════════════
   LEFT — COPY
════════════════════════════════════════════════ */
        .copy {
            display: flex;
            flex-direction: column;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px 10px;
            font-size: clamp(11px, 1.1vw, 13px);
            color: var(--muted);
            margin-bottom: clamp(16px, 2.5vh, 28px);
        }

        .breadcrumb .star {
            color: var(--green);
        }

        .breadcrumb a {
            color: #FFF;
            font-family: Manrope;
            font-size: 16px;
            font-style: normal;
            text-decoration: none;
            font-weight: 500;
            line-height: 24px;
            /* 150% */
            text-transform: capitalize;
        }

        .breadcrumb a:hover {
            color: var(--white);
        }

        .breadcrumb .cur {
            color: #BEFF00;
            font-family: Manrope;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            text-transform: capitalize;
        }

        

        .headline {
            color: #FFF;
            font-family: "FONTSPRING DEMO - Roc Grotesk";
            font-size: 62px;
            font-style: normal;
            font-weight: 700;
            line-height: 74px;
            /* 102.778% */
            letter-spacing: -1px;
            margin-bottom: clamp(14px, 2vh, 22px);
        }

        .body-copy {
            color: #FFF;
            font-family: Manrope;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 26px;
            /* 150% */

            margin-bottom: clamp(24px, 4vh, 40px);
        }

        .btns {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            padding: clamp(10px, 1.2vh, 14px) clamp(16px, 1.8vw, 24px);
            border-radius: 50px;
            font-size: clamp(12px, 1vw, 14px);
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            white-space: nowrap;
            transition: background .22s, color .22s, border-color .22s, transform .15s;
        }

        .btn:active {
            transform: scale(.97);
        }

        .btn-primary {
            border-radius: 50px;
            border: 1px solid #BEFF00;
            background: #0D1100;
            color: #BEFF00;
            font-family: Roboto;
            font-size: 15px;
            padding: 15px;
            font-family: Roboto;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
            /* 133.333% */
            text-transform: capitalize;
            box-shadow: 0 0 10px 0 rgba(190, 255, 0, 0.40);
                text-decoration: none;
        }


        .btn-secondary {
            border-radius: 50px;
            border: 1px solid #000;
            background: #FFF;
            padding: 15px 35px;
            color: #000;
            font-family: Roboto;
            font-size: 15px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
            /* 133.333% */
            text-transform: capitalize;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.40);
                text-decoration: none;
        }

        .btn-secondary:hover {
            border-color: rgba(255, 255, 255, .6);
        }

        /* ════════════════════════════════════════════════
   RIGHT — STAT CARDS
════════════════════════════════════════════════ */
        .cards {
            display: flex;
            flex-direction: column;
            gap: clamp(12px, 1.8vh, 20px);
            align-items: flex-end;
        }

        .card {
            border-radius: 130px;
            border: 1px solid rgba(190, 255, 0, 0.24);
            background: rgba(0, 0, 0, 0.67);
            padding: 30px 40px;

            position: relative;
            overflow: hidden;
            transition: transform .3s, box-shadow .3s;
            width: clamp(190px, 22vw, 270px);
        }

        .card.forward-card {
            transform: translateX(-100px) !important;
        }

        

        .stat-num {
            color: #BEFF00;
            font-family: "FONTSPRING DEMO - Roc Grotesk";
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: 40px;
            /* 80% */
            letter-spacing: -1px;
        }

        .stat-num sup {
            font-size: .55em;
            font-weight: 700;
            vertical-align: super;
        }

        .stat-lbl {
            color: #FFF;
            font-family: Manrope;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 25px;
            /* 156.25% */
            margin-top: 5px;

        }

        

        

        /* ════════════════════════════════════════════════
   TRUSTED BY + INFINITE SLIDER
════════════════════════════════════════════════ */
        .trusted {
            position: relative;
            z-index: 2;

            padding: 40px 0px 60px;
        }

        .trusted-label {
            color: #FFF;
            text-align: center;
            font-family: Helvetica;
            font-size: 14.021px;
            font-style: normal;
            font-weight: 700;
            line-height: 14.021px;
            /* 100% */
            letter-spacing: 2.003px;
            text-transform: uppercase;
            margin-bottom: clamp(16px, 2.4vh, 24px);
        }

        .slider-outer {
            position: relative;
            overflow: hidden;
        }

        .slider-outer::before,
        .slider-outer::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: clamp(60px, 10vw, 140px);
            z-index: 4;
            pointer-events: none;
        }

        .slider-outer::before {
            left: 0;
            background: linear-gradient(90deg, var(--bg), transparent);
        }

        .slider-outer::after {
            right: 0;
            background: linear-gradient(270deg, var(--bg), transparent);
        }

        .slider-track {
            display: flex;
            align-items: center;
            width: max-content;
            animation: marquee 10s linear infinite;
            will-change: transform;
        }

        .slider-track:hover {
            animation-play-state: paused;
        }

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

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

        .logo-item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            flex-shrink: 0;
            opacity: 1;
            filter: grayscale(1) brightness(1.4);
            transition: opacity .25s, filter .25s;
            cursor: default;
        }

        .logo-item:hover {
            opacity: 1;
            filter: none;
        }

        .logo-text {
            font-size: clamp(13px, 1.2vw, 16px);
            font-weight: 700;
            letter-spacing: .045em;
            color: var(--white);
            white-space: nowrap;
            line-height: 1.3;
        }

        .logo-item svg {
            height: clamp(22px, 2.2vw, 30px);
            width: auto;
            display: block;
        }

        /* ════════════════════════════════════════════════
   RESPONSIVE — HERO
════════════════════════════════════════════════ */
        @media (max-width: 900px) {
            .hero-content {
                grid-template-columns: 1fr;
                padding-top: clamp(56px, 8vh, 80px);
                gap: 32px;
            }

            .cards {
                flex-direction: row;
                flex-wrap: wrap;
                align-items: stretch;
                justify-content: flex-start;
            }

            .card,
            

            .headline {
                max-width: 100%;
            }

            .body-copy {
                max-width: 100%;
            }
        }

        @media (max-width: 480px) {
            .hero-content {
                padding: 56px 18px 32px;
            }

            .cards {
                flex-direction: column;
                align-items: stretch;
            }

            .card,
            

            .btns {
                flex-direction: column;
            }

            .btn {
                justify-content: center;
                text-align: center;
            }

            .headline {
                font-size: clamp(28px, 8vw, 38px);
                line-height: 40px;
            }
            .card.forward-card {
    transform: translateX(0px) !important;
}
.card {
    width: 100%;
}

            .trusted-label {
                padding: 0 16px;
            }

            .logo-item {
                padding: 0 20px;
            }
        }

        @media (min-width: 1400px) {
            .hero-content {
                padding: 120px 30px 80px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .slider-track {
                animation: none;
            }
        }


    /* section 2 css */

   :root{
    --green:        #297907;
    --heading-dark: #000000;
    --heading-mute: #777677;
    --label:        #000D2F;
    --divider:      #E3E3E3;
 
    --font-display: "FONTSPRING DEMO - Roc Grotesk", "Roc Grotesk", "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Roboto", Arial, sans-serif;
    --font-util:    "Inter", "Roboto", Arial, sans-serif;
 
    --wrap:  1300px;   /* stats row width  */
    --measure: 1174px; /* paragraph width  */
  }
 
  *,
  *::before,
  *::after { box-sizing: border-box; }
 
  html { -webkit-text-size-adjust: 100%; }
 
  body{
    margin: 0;
    background: #FFFFFF;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
 
  /* ---------------------------------------------------------- section */
  .reference{
    padding: 80px 24px 90px;
  }
 
  .reference__inner{
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
 
  /* ------------------------------------------------------------ badge */
  .reference__badge{
    display: inline-block;
    color: #FFF;
    font-family: var(--font-body);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;              /* 100% */
    text-transform: capitalize;
    border-radius: 50px;
    border: 1px solid #C7CBDB;
    background: var(--green);
    box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 8px 12.7px 8px 13px;
    white-space: nowrap;
  }
 
  /* ---------------------------------------------------------- heading */
  .reference__title{
    margin: 26px 0 0;
    color: var(--heading-dark);
    text-align: center;
    font-family: var(--font-display);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;              /* 100% */
    letter-spacing: -1.44px;
    max-width: var(--measure);
  }
 
  .reference__title span{
    color: var(--heading-mute);
  }
 
  /* -------------------------------------------------------- body copy */
  .reference__copy{
    margin: 26px 0 0;
    width: var(--measure);
    max-width: 100%;
    color: var(--body);
    text-align: center;
    font-family: var(--font-body);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;              /* 138.889% */
    letter-spacing: -0.2px;
  }
 
  /* ------------------------------------------------------------ stats */
  .reference__stats{
    margin-top: 54px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 44px;
  }
 
  .stat{
    padding: 4px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
 
  /* hairline separators between columns only */
  .stat:not(:nth-child(4n + 1)){
    border-left: 1px solid var(--divider);
  }
 
  .stat__value{
    display: block;
    color: var(--green);
    text-align: center;
    font-family: var(--font-body);
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 52.8px;            /* 110% */
    letter-spacing: -0.96px;
  }
 
  .stat__label{
    display: block;
    margin-top: 2px;
    color: var(--label);
    text-align: center;
    font-family: var(--font-util);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;              /* 150% */
    text-transform: uppercase;
  }
 
  /* ------------------------------------------------------ closing copy */
  .reference__outro{
    margin-top: 58px;
    width: var(--measure);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
 
  .reference__outro p{
    margin: 0;
    color: var(--body);
    text-align: center;
    font-family: var(--font-body);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: -0.2px;
  }
 
  /* ------------------------------------------------------- responsive */
  @media (max-width: 1180px){
    .reference__title{ font-size: 44px; line-height: 46px; letter-spacing: -1.2px; }
    .stat__value{ font-size: 40px; line-height: 46px; }
    .stat{ padding-inline: 10px; }
  }
 
  @media (max-width: 900px){
    .reference{ padding: 64px 20px 72px; }
    .reference__stats{
      grid-template-columns: repeat(2, 1fr);
      row-gap: 36px;
    }
    .stat:not(:nth-child(4n + 1)){ border-left: 0; }
    .stat:not(:nth-child(2n + 1)){ border-left: 1px solid var(--divider); }
    .reference__title{ font-size: 36px; line-height: 40px; letter-spacing: -1px; }
    .reference__copy,
    .reference__outro p{ font-size: 17px; line-height: 24px; }
  }
 
  @media (max-width: 520px){
    .reference{ padding: 48px 18px 56px; }
    .reference__title{ font-size: 30px; line-height: 34px; letter-spacing: -0.8px; }
    .reference__stats{ grid-template-columns: 1fr; row-gap: 28px; }
    .stat:not(:nth-child(2n + 1)){ border-left: 0; }
    .stat + .stat{ border-top: 1px solid var(--divider); padding-top: 24px; }
    .stat__value{ font-size: 34px; line-height: 40px; }
    .stat__label{ font-size: 14px; }
    .reference__copy,
    .reference__outro p{ font-size: 16px; line-height: 23px; }
  }

  /* Where JOVIAL still runs section */

  :root{
    --green:       #297907;
    --deep-green:  #223500;
    --lime:        #AECB3D;
    --steel:       #206393;   /* card titles + inline link */
    --ink:         #000D2F;
    --hairline:    #ECECEC;
  }

  *,
  *::before,
  *::after { box-sizing: border-box; }

  body{ margin: 0; background: #fff; }

  .paths {
    background: #F5F5F5;
    padding: 72px 24px 96px;
  }

  .paths-inner {
    max-width: 1300px;
    margin: 0 auto;
  }

  /* ============ TOP PILL ============ */
  .paths-pill {
    display: block;
    width: fit-content;
    margin: 0 auto 26px;
    color: #FFF;
   color: #FFF;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
text-transform: capitalize;
    border-radius: 50px;
    border: 1px solid #C7CBDB;
    background: var(--green);
    box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 8px 14px;
  }

  /* ============ HEADING ============ */
  .paths h2 {
    color: #000;
    text-align: center;
    font-family: "FONTSPRING DEMO - Roc Grotesk", "Archivo", sans-serif;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;               /* 100% */
    letter-spacing: -1.44px;
    margin: 20px 0 20px;
  }

  .paths h2 .muted { color: #8A898A; }

  /* ============ RADIAL DIAGRAM ============ */
  .paths-diagram {
    position: relative;
    max-width: 1300px;
    height: 700px;
    margin: 44px auto 0px;
  }

  .paths-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .paths-lines line {
    stroke: #C9CBC6;
    stroke-width: 1;
    stroke-dasharray: 9 8;
    stroke-linecap: round;
  }

  /* --- center circle --- */
  .paths-circle {
    position: absolute;
    left: 50%;
    top: 300px;
    transform: translate(-50%, -50%);
    width: 192px;
    height: 192px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
    background: radial-gradient(circle at 35% 28%, #3A5214 0%, #263A08 55%, #162403 100%);
    background-color: var(--deep-green);
    box-shadow:
      0 18px 34px rgba(23, 38, 5, 0.35),
      inset 0 2px 6px rgba(255, 255, 255, 0.14),
      inset 0 -10px 18px rgba(0, 0, 0, 0.35);
    border: 4px solid rgba(255, 255, 255, 0.06);
  }

  .paths-circle .circle-title {
    color: #FFF;
    font-family: "Inter", sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.32px;
  }

  .paths-circle .circle-sub {
    margin-top: 4px;
    color: var(--lime);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
  }

  /* --- cards --- */
  .path-card {
    position: absolute;
    z-index: 1;
    width: clamp(232px, 21.7%, 279px);
    padding: 18px 20px 20px;
    border-radius: 12px;
    border: 1px solid #C5C6D1;
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  .path-card h3 {
    color: var(--steel);
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
  }

  .path-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .path-card li {
    color: var(--body);
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
  }

  /* --- desktop positions (unchanged) --- */
  .card-java     { left: 15.5%; top: 0; }
  .card-csharp   { left: 67.8%; top: 0; }
  .card-cloud    { left: 2.6%;  top: 230px; }
  .card-services { left: 75.6%; top: 230px; }
  .card-phased   { left: 15.5%; top: 460px; }
  .card-like     { left: 67.8%; top: 460px; }

  /* ============ FOOTNOTE BAR ============ */
  .paths-note {
    padding: 44px 48px;
    border-radius: 12px;
    border: 1px solid rgba(32, 99, 147, 0.20);
    background: rgba(0, 32, 91, 0.05);
    backdrop-filter: blur(2px);
    max-width: 1250px;
    margin: 0 auto;
  }

  .paths-note p {
    color: var(--ink);
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 29.25px;            /* 162.5% */
    max-width: 903px;
    margin: 0 auto;
  }

  .paths-note a,
  .paths-note .accent {
    color: var(--steel);
    text-decoration: none;
  }

  .paths-note a:hover { text-decoration: underline; }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1100px) {
    .paths { padding: 56px 20px 72px; }

    .paths h2 {
      font-size: 34px;
      line-height: 40px;
      letter-spacing: -1px;
    }

    .paths-diagram {
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin: 36px auto 48px;
    }

    .paths-lines { display: none; }

    .paths-circle {
      position: static;
      transform: none;
      width: 150px;
      height: 150px;
      margin-bottom: 12px;
    }

    .paths-circle .circle-title { font-size: 24px; line-height: 30px; }

    .path-card,
    .card-java, .card-csharp, .card-cloud,
    .card-services, .card-phased, .card-like {
      position: static;
      width: 100%;
      max-width: 420px;
    }

    .paths-note { padding: 24px 22px; }
    .paths-note p { font-size: 15px; line-height: 25px; }
  }

  /* section 4  */

    :root{
    --green:      #297907;
    --green-tint: rgba(127, 184, 8, 0.10);
    --ink:        #000D2F;
    --muted:      rgba(12, 2, 29, 0.60);
    --heading-2:  #8A898A;
    --line:       #C5C6D1;

    --font-display: "FONTSPRING DEMO - Roc Grotesk", "Roc Grotesk", "Archivo", sans-serif;

    /* gap between the 48px divider and the bullet list.
       Your spec said 48px — that measured too wide against the
       screenshot, so this is set to 18px. Change here to tune. */
    --list-gap: 18px;
  }

  /* ================================================= shared section bits */
  .jv{ 
    background-color: #fff;
    padding: 72px 24px; 

}

  .jv-inner{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
  }

  .jv-pill{
    display: block;
    width: fit-content;
    margin: 0 auto 24px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;                /* 100% */
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 50px;
    border: 1px solid #C7CBDB;
    background: var(--green);
    box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 8px 12.7px 8px 13px;
  }

  .jv-title{
    color: #000;
    text-align: center;
    font-family: var(--font-display);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;                /* 100% */
    letter-spacing: -1.44px;
    margin: 0;
  }

  .jv-title .muted{ color: var(--heading-2); }

  .jv-lede{
    margin: 22px auto 0;
    max-width: 1174px;
    color: var(--muted);
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;                /* 138.889% */
    letter-spacing: -0.2px;
  }

  /* ============================================== 1. DIALECT CARD GRID */
  .dialects-grid{
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 278px));
    justify-content: center;
    gap: 24px;
  }

  .dialect-card{
    width: 100%;
    max-width: 278px;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid rgba(197, 198, 209, 0.50);
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  .dialect-card h3{
    margin: 0;
    color: var(--ink);
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 31.2px;              /* 141.818% */
  }

  .dialect-card .rule{
    display: block;
    width: 48px;
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 14px 0 0;
  }

  .dialect-card ul{
    margin: var(--list-gap) 0 0;
    padding-left: 18px;
  }

  .dialect-card li{
    color: var(--body);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;                /* 150% */
  }

  .dialect-card li + li{ margin-top: 10px; }

  .dialect-card li::marker{ color: var(--line); }

  /* ================================================= 2. MAPPING TABLE */
  .constructs{ padding-top: 24px; }

  .table-wrap{
    margin-top: 44px;
    border-radius: 8px;
    border: 1px solid rgba(197, 198, 209, 0.50);
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  .map-table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .map-table th{
    background: var(--green);
    color: #FFF;
    text-align: left;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    padding: 16px 24px;
  }

  .map-table th:first-child,
  .map-table td:first-child{ width: 44%; }

  .map-table td{
    padding: 15px 24px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    line-height: 22px;
    vertical-align: top;
    border-top: 1px solid rgba(197, 198, 209, 0.40);
  }

  .map-table tbody td:first-child{
    background: var(--green-tint);
    color: var(--ink);
    font-weight: 600;
  }

  .map-table tbody td:last-child{
    background: #FFF;
    color: var(--body);
    font-weight: 400;
  }

  /* ===================================================== 3. FOOTNOTE */
  .map-note{
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 8px;
    border: 1px solid rgba(127, 184, 8, 0.30);
    background: rgba(127, 184, 8, 0.07);
  }

  .map-note .icon{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--green);
    color: #FFF;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
  }

  .map-note p{
    margin: 0;
    color: var(--body);
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 23px;
  }

  /* ==================================================== RESPONSIVE */
  @media (max-width: 1100px){
    .dialects-grid{ grid-template-columns: repeat(2, minmax(0, 278px)); }
  }

  @media (max-width: 900px){
    .jv{ padding: 56px 20px; }
    .jv-title{ font-size: 36px; line-height: 40px; letter-spacing: -1px; }
    .jv-lede{ font-size: 16px; line-height: 24px; }
    .jv-pill{ font-size: 14px; }
    .map-table th{ font-size: 15px; padding: 14px 18px; }
    .map-table td{ font-size: 14px; padding: 13px 18px; }
  }

  @media (max-width: 640px){
    .jv{ padding: 44px 16px; }
    .jv-title{ font-size: 28px; line-height: 32px; letter-spacing: -0.8px; }
    .dialects-grid{ grid-template-columns: minmax(0, 400px); gap: 16px; }
    .dialect-card{ max-width: 400px; }
    .dialect-card h3{ font-size: 20px; line-height: 28px; }

    /* table becomes stacked label / value pairs */
    .table-wrap{ border: 0; box-shadow: none; border-radius: 0; }
    .map-table,
    .map-table tbody,
    .map-table tr,
    .map-table td{ display: block; width: 100% !important; }
    .map-table thead{ display: none; }

    .map-table tr{
      margin-bottom: 12px;
      border-radius: 8px;
      border: 1px solid rgba(197, 198, 209, 0.50);
      overflow: hidden;
    }

    .map-table td{ border-top: 0; padding: 12px 16px; }

    .map-table tbody td:last-child{
      border-top: 1px solid rgba(197, 198, 209, 0.40);
    }

    .map-table tbody td::before{
      content: attr(data-label);
      display: block;
      margin-bottom: 3px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--green);
    }
  }


  /*  THE HARD PARTS  */

    :root{
    --bg:          #192400;
    --pill-green:  #297907;
    --card-title:  #00205B;
    --card-body:   #444650;
    --icon:        #206393;
    --icon-pad:    #EDF1F7;
    --hover-tint:  #F2F7EA;

    --font-display: "FONTSPRING DEMO - Roc Grotesk", "Roc Grotesk", "Archivo", sans-serif;
  }

  /* ==================================================== section shell */
  .hard{
    background: var(--bg);
    padding: 72px 24px 90px;
  }

  .hard-inner{
    width: 100%;
    max-width: 1350px;              /* 361*4 + 24*3 */
    margin-inline: auto;
  }

  .hard-pill{
    display: block;
    width: fit-content;
    margin: 0 auto 26px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;              /* 100% */
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 50px;
    border: 1px solid #C7CBDB;
    background: var(--pill-green);
    box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 8px 12.7px 8px 13px;
  }

  .hard-title{
    margin: 0 0 48px;
    color: #FFF;
    text-align: center;
    font-family: var(--font-display);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;              /* 100% */
    letter-spacing: -1.44px;
  }

  /* ========================================================= card grid */
  .hard-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .hard-card{
    min-height: 468px;
    padding: 40px;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 4px 20px -2px rgba(0, 32, 91, 0.05);
    transition: background 0.25s ease, box-shadow 0.25s ease;
  }

  .hard-card:hover{
    background: var(--hover-tint);
    box-shadow: 0 4px 20px -2px rgba(0, 32, 91, 0.05);
  }

  /* icon sits bare until hover, then picks up its rounded pad */
  .hard-card .icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 0 22px -12px;
    border-radius: 12px;
    background: transparent;
    transition: background 0.25s ease;
  }

  .hard-card:hover .icon{ background: var(--icon-pad); }

  .hard-card .icon svg{ display: block; }

  .hard-card h3{
    margin: 0;
    color: var(--card-title);
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;              /* 133.333% */
  }

  .hard-card p{
    margin: 12px 0 0;
    color: var(--card-body);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;              /* 150% */
  }

  /* ==================================================== wide bottom card */
  .hard-wide{
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 40px 50px;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 4px 20px -2px rgba(0, 32, 91, 0.05);
    transition: background 0.25s ease;
  }

  .hard-wide:hover{ background: var(--hover-tint); }

  .hard-wide .icon{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--icon-pad);
  }

  .hard-wide h3{
    margin: 0;
    color: var(--card-title);
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
  }

  .hard-wide p{
    margin: 12px 0 0;
    max-width: 1080px;
    color: var(--card-body);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }

  /* ========================================================= responsive */
  @media (max-width: 1400px){
    .hard-card{ padding: 36px; min-height: 440px; }
    .hard-wide{ padding: 36px 40px; }
  }

  @media (max-width: 1080px){
    .hard-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .hard-card{ min-height: 0; }
    .hard-title{ font-size: 38px; line-height: 42px; letter-spacing: -1.1px; margin-bottom: 36px; }
  }

  @media (max-width: 720px){
    .hard{ padding: 56px 16px 64px; }
    .hard-title{ font-size: 28px; line-height: 32px; letter-spacing: -0.8px; }
    .hard-pill{ font-size: 14px; }
    .hard-grid{ grid-template-columns: minmax(0, 1fr); }
    .hard-card{ padding: 28px; border-radius: 16px; }
    .hard-card h3,
    .hard-wide h3{ font-size: 21px; line-height: 28px; }

    .hard-wide{
      flex-direction: column;
      gap: 18px;
      padding: 28px;
      border-radius: 16px;
      margin-top: 20px;
    }

    /* on touch there is no hover, so show the icon pad by default */
    .hard-card .icon{ background: var(--icon-pad); margin-left: 0; }
  }

  @media (hover: none){
    .hard-card .icon{ background: var(--icon-pad); }
  }

  /* SECTION 7  ·  TARGET PROCESSOR */

:root{
    --green:  #297907;
    --body:   #444650;
 
    --font-display: "FONTSPRING DEMO - Roc Grotesk", "Roc Grotesk", "Archivo", sans-serif;
  }
 
  *,
  *::before,
  *::after { box-sizing: border-box; }
 
  body{
    margin: 0;
    background: #FFFFFF;
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
 
  /* ===================================================== section shell */
  .target{ padding: 64px 24px 80px; }
 
  .target-inner{
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
  }
 
  .target-pill{
    display: block;
    width: fit-content;
    margin: 0 auto 24px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;               /* 100% */
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 50px;
    border: 1px solid #C7CBDB;
    background: var(--green);
    box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 8px 12.7px 8px 13px;
  }
 
  .target-title{
    margin: 0 0 48px;
    color: #000;
    text-align: center;
    font-family: var(--font-display);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;               /* 100% */
    letter-spacing: -1.44px;
  }
 
  /* ======================================================= two columns */
  .target-cols{
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
 
  /* ---------- left: illustration ---------- */
  .target-figure{
    align-self: center;
    margin: 0;
    padding: 0;
  }
 
  .target-figure img{
    display: block;
    width: 100%;
    height: auto;
  }
 
  /* ---------- right: content blocks ---------- */
  .target-body{
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
 
  .tblock h3{
    margin: 0;
    color: var(--green);
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;               /* 133.333% */
  }
 
  .tblock .rule{
    display: block;
    width: 100%;
    max-width: 462px;
    height: 1px;
    background: var(--green);
    border: 0;
    margin: 14px 0 20px;
  }
 
  .tblock .lead{
    margin: 0 0 14px;
    color: var(--body);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;               /* 150% */
  }
 
  .tblock ul{
    margin: 0;
    padding-left: 20px;
  }
 
  .tblock li{
    color: var(--body);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;               /* 150% */
  }
 
  .tblock li + li{ margin-top: 8px; }
 
  .tblock li::marker{ color: var(--body); }
 
  /* ========================================================= responsive */
  @media (max-width: 1080px){
    .target-cols{ gap: 40px; }
    .target-title{ font-size: 40px; line-height: 44px; letter-spacing: -1.2px; margin-bottom: 36px; }
  }
 
  @media (max-width: 900px){
    .target{ padding: 52px 20px 64px; }
    .target-cols{ grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .target-title{ font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  }
 
  @media (max-width: 560px){
    .target{ padding: 40px 16px 52px; }
    .target-title{ font-size: 26px; line-height: 30px; letter-spacing: -0.8px; }
    .target-pill{ font-size: 14px; }
    .target-body{ gap: 30px; }
    .tblock h3{ font-size: 20px; line-height: 28px; }
    .tblock .rule{ margin: 12px 0 16px; }
  }

  /* SECTION 8  ·  APPROACH */

   :root{
    --bg:        #192400;
    --pill:      #297907;
    --lime:      #BEFF00;
    --card:      #F4F4F4;
    --card-hover:#F1FFD3;
    --title:     #0C021D;
    --li:        rgba(12, 2, 29, 0.60);
 
    --font-display: "FONTSPRING DEMO - Roc Grotesk", "Roc Grotesk", "Archivo", sans-serif;
  }
 
 
  /* ==================================================== section shell */
  .approach{
    background: var(--bg);
    padding: 56px 24px 72px;
  }
 
  .approach-inner{
    width: 100%;
    max-width: 1312px;               /* 646*2 + 20 gap */
    margin-inline: auto;
  }
 
  .approach-pill{
    display: block;
    width: fit-content;
    margin: 0 auto 24px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;               /* 100% */
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 50px;
    border: 1px solid #C7CBDB;
    background: var(--pill);
    box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 8px 12.7px 8px 13px;
  }
 
  .approach-title{
    margin: 0 0 44px;
    color: #FFF;
    text-align: center;
    font-family: var(--font-display);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;               /* 100% */
    letter-spacing: -1.44px;
  }
 
  .approach-title .lime{ color: var(--lime); }
 
  /* ========================================================= two cards */
  .approach-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
 
  .approach-card{
    min-height: 251px;
    padding: 40px;
    border-radius: 20px;
    background: var(--card);
    transition: background 0.25s ease;
  }
 
  .approach-card:hover{ background: var(--card-hover); }
 
  .approach-card h3{
    margin: 0;
    color: var(--title);
    font-family: "Roboto", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 50px;               /* 192.308% */
    letter-spacing: -1.44px;
  }
 
  .approach-card ul{
    margin: 6px 0 0;
    padding-left: 22px;
  }
 
  .approach-card li{
    color: var(--li);
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;               /* 155.556% */
    letter-spacing: -0.2px;
  }
 
  .approach-card li::marker{
    color: var(--li);
    font-size: 14px;
  }
 
  /* ======================================================== responsive */
  @media (max-width: 1100px){
    .approach-title{ font-size: 38px; line-height: 44px; letter-spacing: -1.1px; margin-bottom: 32px; }
    .approach-card{ padding: 32px; }
    .approach-card h3{ font-size: 23px; line-height: 34px; letter-spacing: -0.8px; }
  }
 
  @media (max-width: 860px){
    .approach{ padding: 44px 18px 56px; }
    .approach-grid{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .approach-card{ min-height: 0; }
    .approach-title{ font-size: 30px; line-height: 34px; letter-spacing: -0.9px; }
  }
 
  @media (max-width: 520px){
    .approach-title{ font-size: 24px; line-height: 28px; letter-spacing: -0.6px; }
    .approach-pill{ font-size: 14px; }
    .approach-card{ padding: 24px; border-radius: 16px; }
    .approach-card h3{ font-size: 20px; line-height: 28px; }
    .approach-card li{ font-size: 16px; line-height: 26px; }
  }
 
  /* no hover on touch — show the tinted state on the second card as designed */
  @media (hover: none){
    .approach-card:hover{ background: var(--card); }
  }

  /* SECTION 9  ·  VERIFICATION */

   :root{
    --pill:    #297907;
    --steel:   #206393;
    --title:   #000D2F;
    --body:    #444650;
    --muted:   rgba(12, 2, 29, 0.60);
    --line:    #C5C6D1;
 
    --font-display: "FONTSPRING DEMO - Roc Grotesk", "Roc Grotesk", "Archivo", sans-serif;
  }
 
  *,
  *::before,
  *::after { box-sizing: border-box; }
 
  body{
    margin: 0;
    background: #FFFFFF;
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
 
  /* ==================================================== section shell */
  .verify{ padding: 64px 24px 76px; }
 
  .verify-inner{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
  }
 
  .verify-pill{
    display: block;
    width: fit-content;
    margin: 0 auto 24px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;                /* 100% */
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 50px;
    border: 1px solid #C7CBDB;
    background: var(--pill);
    box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 8px 12.7px 8px 13px;
  }
 
  .verify-title{
    margin: 0;
    color: #000;
    text-align: center;
    font-family: var(--font-display);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;                /* 100% */
    letter-spacing: -1.44px;
  }
 
  .verify-lede{
    margin: 20px auto 0;
    max-width: 720px;
    color: var(--muted);
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;                /* 138.889% */
    letter-spacing: -0.2px;
  }
 
  /* ========================================================== timeline */
  .verify-steps{
    position: relative;
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }
 
  /* horizontal connector, sits behind the numbered circles */
  .verify-steps::before{
    content: "";
    position: absolute;
    left: 32px;
    right: 32px;
    top: 32px;                        /* circle vertical centre */
    height: 1px;
    opacity: 0.3;
    background: linear-gradient(90deg,
      rgba(32, 99, 147, 0.00) 0%,
      #206393 15%,
      #206393 85%,
      rgba(32, 99, 147, 0.00) 100%);
    z-index: 0;
  }
 
  .step{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
  }
 
  .step .num{
    position: relative;
    z-index: 1;
    display: flex;
    width: 64px;
    height: 64px;
    padding: 14.5px 0 15.5px 0;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 1px solid var(--line);
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: var(--steel);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;                /* 133.333% */
  }
 
  /* short tick dropping from the circle into the copy */
  .step .tick{
    display: block;
    width: 1px;
    height: 16px;
    margin: 6px 0 0 32px;
    opacity: 0.5;
    background: var(--steel);
  }
 
  .step h3{
    margin: 14px 0 0;
    color: var(--title);
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;                /* 136.364% */
  }
 
  .step p{
    margin: 10px 0 30px;
    color: var(--body);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;                /* 150% */
  }
 
  /* tag pinned to the bottom so it lines up across all four columns */
  .step .tag{
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--steel);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;                /* 133.333% */
    letter-spacing: 0.6px;
  }
 
  .step .tag svg{ flex: 0 0 auto; display: block; }
 
  /* ===================================================== closing note */
  .verify-note{
    margin: 40px auto 0;
    max-width: 720px;
    color: var(--muted);
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;                /* 156.25% */
    letter-spacing: -0.2px;
  }
 
  /* ======================================================== responsive */
  @media (max-width: 1080px){
    .verify-title{ font-size: 40px; line-height: 44px; letter-spacing: -1.2px; }
    .verify-steps{ gap: 24px; }
    .step h3{ font-size: 20px; line-height: 28px; }
  }
 
  @media (max-width: 860px){
    .verify{ padding: 52px 20px 64px; }
    .verify-title{ font-size: 32px; line-height: 36px; letter-spacing: -1px; }
    .verify-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .verify-steps::before{ display: none; }
  }
 
  @media (max-width: 560px){
    .verify{ padding: 40px 16px 52px; }
    .verify-title{ font-size: 26px; line-height: 30px; letter-spacing: -0.8px; }
    .verify-pill{ font-size: 14px; }
    .verify-lede{ font-size: 16px; line-height: 24px; }
    .verify-steps{ grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
    .step .num{ width: 56px; height: 56px; font-size: 21px; padding: 0; }
    .step .tick{ margin-left: 28px; }
    .step .tag{ margin-top: 16px; }
  }

  /* SECTION 10  ·  DELIVERABLES */

   :root{
    --green:  #297907;
    --title:  #000D2F;
    --body:   #444650;
    --muted:  rgba(12, 2, 29, 0.60);
    --rule:   #C5C6D1;
 
    --font-display: "FONTSPRING DEMO - Roc Grotesk", "Roc Grotesk", "Archivo", sans-serif;
  }
 
  *,
  *::before,
  *::after { box-sizing: border-box; }
 
  body{
    margin: 0;
    background: #FFFFFF;
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
 
  /* ================================================== outer container */
  .deliv-wrap{ padding: 40px 24px; }
 
  .deliv{
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    padding: 48px 100px 60px;
    border-radius: 20px;
    border: 1px solid rgba(41, 121, 7, 0.34);
    background: rgba(241, 255, 211, 0.31);
  }
 
  /* ========================================================== header */
  .deliv-pill{
    display: block;
    width: fit-content;
    margin: 0 auto 22px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;                /* 100% */
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 50px;
    border: 1px solid #C7CBDB;
    background: var(--green);
    box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 8px 12.7px 8px 13px;
  }
 
  .deliv-title{
    margin: 0;
    color: #000;
    text-align: center;
    font-family: var(--font-display);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;                /* 100% */
    letter-spacing: -1.44px;
  }
 
  .deliv-lede{
    margin: 20px auto 0;
    max-width: 720px;
    color: var(--muted);
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;                /* 138.889% */
    letter-spacing: -0.2px;
  }
 
  /* ============================================ divided artifact grid */
  .deliv-grid{
    margin-top: 40px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
 
  .deliv-item{ padding: 50px 30px; }
 

  /* row rule */
  .deliv-item:nth-child(n + 4){ border-top: 1px solid var(--rule); }
 
  .deliv-item .head{
    display: flex;
    align-items: center;
    gap: 10px;
  }
 
  .deliv-item .head svg{ flex: 0 0 auto; display: block; }
 
  .deliv-item h3{
    margin: 0;
    color: var(--title);
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;                /* 133.333% */
  }

  .deliv-item{ position: relative; }

.deliv-item:not(:nth-child(3n + 1))::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50px;      /* ← gap above */
  bottom: 50px;   /* ← gap below */
  width: 1px;
  background: var(--rule);
}
 
  .deliv-item ul{
    margin: 14px 0 0;
    padding-left: 20px;
  }
 
  .deliv-item li{
    color: var(--body);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;                /* 162.5% */
  }
 
  .deliv-item li + li{ margin-top: 6px; }
 
  .deliv-item li::marker{ color: var(--body); }
 
  /* ======================================================= responsive */
  @media (max-width: 1180px){
    .deliv{ padding: 44px 48px 52px; }
    .deliv-title{ font-size: 40px; line-height: 44px; letter-spacing: -1.2px; }
    .deliv-item{ padding: 24px; }
  }
 
  @media (max-width: 900px){
    .deliv-wrap{ padding: 28px 16px; }
    .deliv{ padding: 36px 28px 40px; border-radius: 16px; }
    .deliv-title{ font-size: 32px; line-height: 36px; letter-spacing: -1px; }
    .deliv-lede{ font-size: 16px; line-height: 24px; }
 
    .deliv-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* remap the rules for a 2-column layout */
    .deliv-item:not(:nth-child(3n + 1)){ border-left: 0; }
    .deliv-item:nth-child(n + 4){ border-top: 0; }
    .deliv-item:not(:nth-child(2n + 1)){ border-left: 1px solid var(--rule); }
    .deliv-item:nth-child(n + 3){ border-top: 1px solid var(--rule); }
  }
 
  @media (max-width: 600px){
    .deliv{ padding: 28px 20px 32px; }
    .deliv-title{ font-size: 26px; line-height: 30px; letter-spacing: -0.8px; }
    .deliv-pill{ font-size: 14px; }
 
    .deliv-grid{ grid-template-columns: minmax(0, 1fr); }
    .deliv-item:not(:nth-child(2n + 1)){ border-left: 0; }
    .deliv-item:nth-child(n + 3){ border-top: 0; }
    .deliv-item + .deliv-item{ border-top: 1px solid var(--rule); }
    .deliv-item{ padding: 22px 4px; }
  }

  /* SECTION 11  ·  DEFENSE-SPECIFIC */

    :root{
    --pill:    #297907;
    --title:   #000D2F;
    --body:    #444650;
    --connect: #C5C6D1;

    /* image shows the display face here; Inter is kept as the next fallback
       so the spec still applies if Roc Grotesk is unavailable */
    --font-display: "FONTSPRING DEMO - Roc Grotesk", "Roc Grotesk", "Archivo", "Inter", sans-serif;
  }

  *,
  *::before,
  *::after { box-sizing: border-box; }

  body{
    margin: 0;
    background: #FFFFFF;
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* ==================================================== section shell */
  .def{ padding: 64px 24px 40px; }

  .def-inner{
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
  }

  .def-pill{
    display: block;
    width: fit-content;
    margin: 0 auto 24px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;                 /* 100% */
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 50px;
    border: 1px solid #C7CBDB;
    background: var(--pill);
    box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 8px 12.7px 8px 13px;
  }

  .def-title{
    margin: 0;
    color: #000;
    text-align: center;
    font-family: var(--font-display);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;
    letter-spacing: -1.44px;
  }

  /* ========================================================= timeline */
  .tl{
    position: relative;
    margin-top: 8px;
    padding-block: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* the spine */
  .tl::before{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-0.5px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
      rgba(117, 118, 129, 0.00) 0%,
      #757681 10%,
      #757681 90%,
      rgba(117, 118, 129, 0.00) 100%);
  }

  .tl-item{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* the node — sits on the spine, level with the heading */
  .tl-item .node{
    position: absolute;
    left: 50%;
    top: 16px;                         /* centre of a 32px heading line */
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    line-height: 0;
    background: #FFF;
    border-radius: 7px;
    z-index: 2;
  }

  /* 48px stub joining the node to the copy */
  .tl-item .connector{
    position: absolute;
    top: 16px;
    width: 48px;
    height: 1px;
    background: var(--connect);
    z-index: 1;
  }

  .tl-content{ max-width: 554px; }

  .tl-content h3{
    margin: 0;
    color: var(--title);
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;                 /* 133.333% */
  }

  .tl-content p{
    margin: 8px 0 0;
    color: var(--body);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;                 /* 162.5% */
  }

  /* ---- odd items sit left of the spine, ranged right ---- */
  .tl-item:nth-child(odd) .tl-content{
    grid-column: 1;
    margin-left: auto;
    padding-right: 60px;
    text-align: right;
  }

  .tl-item:nth-child(odd) .connector{ right: 50%; }

  /* ---- even items sit right of the spine, ranged left ---- */
  .tl-item:nth-child(even) .tl-content{
    grid-column: 2;
    margin-right: auto;
    padding-left: 60px;
    text-align: left;
  }

  .tl-item:nth-child(even) .connector{ left: 50%; }

  /* ======================================================= responsive */
  @media (max-width: 1000px){
    .def-title{ font-size: 40px; line-height: 44px; letter-spacing: -1.2px; }
    .tl-content{ max-width: 320px; }
    .tl-item:nth-child(odd) .tl-content{ padding-right: 48px; }
    .tl-item:nth-child(even) .tl-content{ padding-left: 48px; }
    .tl-item .connector{ width: 36px; }
  }

  /* single spine on the left, everything ranged left */
  @media (max-width: 760px){
    .def{ padding: 48px 18px 32px; }
    .def-title{ font-size: 30px; line-height: 34px; letter-spacing: -0.9px; }
    .def-pill{ font-size: 14px; }

    .tl{ gap: 32px; padding-block: 28px; }
    .tl::before{ left: 7px; }

    .tl-item{ grid-template-columns: minmax(0, 1fr); }

    .tl-item:nth-child(odd) .tl-content,
    .tl-item:nth-child(even) .tl-content{
      grid-column: 1;
      margin: 0;
      padding-left: 44px;
      padding-right: 0;
      text-align: left;
      max-width: none;
    }

    .tl-item .node{ left: 7px; }

    .tl-item:nth-child(odd) .connector,
    .tl-item:nth-child(even) .connector{
      left: 7px;
      right: auto;
      width: 28px;
    }

    .tl-content h3{ font-size: 20px; line-height: 28px; }
    .tl-content p{ font-size: 15px; line-height: 24px; }
    .tl-item .node,
    .tl-item .connector{ top: 14px; }
  }

  /* SECTION 12  ·  PROCESS */

    :root{
    --green:  #297907;
    --title:  #000D2F;
    --body:   #444650;
    --muted:  rgba(12, 2, 29, 0.60);
 
    --font-display: "FONTSPRING DEMO - Roc Grotesk", "Roc Grotesk", "Archivo", sans-serif;
 
    /* header stack above the cards — marker size + gaps */
    --marker: 24px;
  }
 
  *,
  *::before,
  *::after { box-sizing: border-box; }
 
  body{
    margin: 0;
    background: #FFFFFF;
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
 
  /* ================================================== outer container */
  .proc-wrap{ padding: 36px 40px;

margin-bottom: 40px;}
 
  .proc{
    width: 100%;
    max-width: 1350px;
    margin-inline: auto;
    padding: 48px 100px 64px;
    border-radius: 20px;
    background: rgba(217, 217, 217, 0.15);
  }
 
  /* ========================================================== header */
  .proc-pill{
    display: block;
    width: fit-content;
    margin: 0 auto 22px;
    color: #FFF;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;                  /* 100% */
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 50px;
    border: 1px solid #C7CBDB;
    background: var(--green);
    box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 8px 12.7px 8px 13px;
  }
 
  .proc-title{
    margin: 0;
    color: #000;
    text-align: center;
    font-family: var(--font-display);
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;                  /* 100% */
    letter-spacing: -1.44px;
  }
 
  .proc-lede{
    margin: 18px auto 0;
    max-width: 720px;
    color: var(--muted);
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;                  /* 138.889% */
  }
 
  /* ======================================================== the track */
  .proc-track{ margin-top: 44px; }
 
  .proc-heads,
  .proc-cards{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
 
  /* ---- duration badge ---- */
  .phase-badge{
    display: inline-block;
    color: var(--green);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 19.6px;                /* 122.5% */
    letter-spacing: 0.28px;
    border-radius: 12px;
    border: 1px solid rgba(0, 105, 112, 0.20);
    background: rgba(0, 105, 112, 0.05);
    padding: 2.5px 12px;
  }
 
  /* ---- marker ---- */
  .phase-head{ display: flex; flex-direction: column; align-items: flex-start; }
 
  .phase-marker{
    margin: 16px 0 0 8px;
    width: var(--marker);
    height: var(--marker);
    border-radius: 8px;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(41, 121, 7, 0.12);
  }
 
  /* final phase runs in parallel — hollow marker */
  .phase-marker.is-open{
    background: #FFF;
    border: 2px solid var(--green);
    box-shadow: 0 0 0 4px rgba(41, 121, 7, 0.10);
  }
 
  /* ---- cards row + the line that runs behind it ---- */
  .proc-cards{
    position: relative;
    margin-top: 18px;
  }
 
  .proc-cards::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;                          /* sits behind the card headings */
    height: 1px;
    z-index: 0;
    background: linear-gradient(90deg,
      rgba(127, 184, 8, 0.00) 0%,
      rgba(127, 184, 8, 0.55) 12%,
      rgba(127, 184, 8, 0.55) 88%,
      rgba(127, 184, 8, 0.00) 100%);
  }
 
  .phase-card{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid rgba(197, 198, 209, 0.20);
    background: rgba(255, 255, 255, 0.70);
    box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
 
  .phase-card h3{
    margin: 0;
    color: var(--title);
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 31.2px;                /* 130% */
  }
 
  .phase-card p{
    margin: 0;
    color: var(--body);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;                  /* 150% */
  }
 
  /* ======================================================= responsive */
  @media (max-width: 1180px){
    .proc{ padding: 40px 44px 52px; }
    .proc-title{ font-size: 40px; line-height: 44px; letter-spacing: -1.2px; }
    .phase-card{ padding: 20px; }
    .phase-card h3{ font-size: 21px; line-height: 28px; }
  }
 
  @media (max-width: 900px){
    .proc-wrap{ padding: 24px 16px; }
    .proc{ padding: 32px 24px 40px; border-radius: 16px; }
    .proc-title{ font-size: 30px; line-height: 34px; letter-spacing: -0.9px; }
    .proc-lede{ font-size: 16px; line-height: 24px; }
    .proc-pill{ font-size: 14px; }
 
    .proc-heads,
    .proc-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .proc-cards::before{ display: none; }
 
    /* pair each head with its own card so the columns stay readable */
    .proc-track{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .proc-heads, .proc-cards{ display: contents; }
    .phase-head{ display: flex; }
    .phase-card{ margin-top: 14px; }
  }
 
  @media (max-width: 600px){
    .proc-track{ grid-template-columns: minmax(0, 1fr); }
    .proc-title{ font-size: 25px; line-height: 29px; letter-spacing: -0.7px; }
  }

  /* SECTION 13  ·  FAQ */


   .faq {
  position: relative;
  background: #ffffff;
  color: #16201a;
  padding: clamp(56px, 9vh, 100px) clamp(20px, 6vw, 80px) clamp(64px, 10vh, 110px);
  overflow: hidden;
}
.faq::before {
  content: '';
  position: absolute;
  left: 0%; top: 0%;
  width: 100%;
height:100%;
opacity:0.3;
  z-index: 0;
  background: url("/services/jovial-to-c-migration/image/bg gradient SVG.svg");
background-size:cover;
background-position:center;
background-repeat: no-repeat;
  pointer-events: none;
}
.faq-inner { position: relative; z-index: 1; max-width: 840px; margin: 0 auto; }
.faq-badge { display: flex; justify-content: center; margin-bottom: clamp(16px, 2.4vh, 24px); }
.faq-badge span {
  display: inline-block;
  border-radius: 50px;
border: 1px solid #C7CBDB;
background: #297907;
box-shadow: 0 1px 4px 0 rgba(32, 41, 76, 0.10);
    padding: 12px 25px;
color: #FFF;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
text-transform: capitalize;
}
.faq-title { color: #000;
text-align: center;
font-family: "FONTSPRING DEMO - Roc Grotesk";
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 50px; /* 100% */
letter-spacing: -1.44px;
 margin-bottom: clamp(26px, 4vh, 44px); }

.faq-label { color: #676D79;
font-family: Inter;
font-size: 15px;
font-style: normal;
text-align:center;
font-weight: 500;
line-height: 20px; /* 133.333% */
 margin-bottom: clamp(16px, 2.4vh, 22px); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border-radius: 12px;
background: #FFF;
box-shadow: 0 0 1px 0 rgba(31, 34, 41, 0.24), 0 2px 6px 0 rgba(31, 34, 41, 0.04);
 overflow: hidden; }
.faq-item.is-extra { display: none; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #1A1D23;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 155.556% */
  padding: clamp(15px, 2vh, 19px) clamp(18px, 2vw, 24px);
  
}
.faq-icon { flex-shrink: 0; width: 18px; height: 18px; position: relative; transition: transform .3s ease; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: #3a7afe; border-radius: 2px; }
.faq-icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
.faq-icon::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.faq-q[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p { padding: 0 clamp(18px, 2vw, 24px) clamp(16px, 2.2vh, 20px); font-size: 16px; line-height: 1.7; color: #6a766f; font-family: 'Inter'; }
.faq-q:focus-visible,
.faq-more button:focus-visible { outline: 2px solid #2f9438; outline-offset: 2px; }

/*  */

.hpe-cta{
    position:relative;
    overflow:hidden;
    border-radius:34px 34px 0 0;
    min-height:430px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:90px 20px;
    background:#020202;
}

.hpe-cta-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hpe-cta-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.38);
}

.hpe-cta-content{
    position:relative;
    z-index:2;
    width:69%;
}

.hpe-cta-heading{
    color: #FFF;
    text-align: center;
    font-family: "FONTSPRING DEMO - Roc Grotesk", Arial, sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 45px;
    letter-spacing: -0.9px;
    margin-bottom: 20px;
}

.hpe-cta-description{
    font-family: Roboto;
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom:40px;
}

.hpe-cta-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.green-btn{
    position: relative;
    overflow: hidden;

    border-radius: 50px;
    background: #0D1100;
    padding: 20px 20px;
font-family: Inter;
    color: #BEFF00;
    box-shadow: 0 0 10px 0 rgba(190, 255, 0, 0.40);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-transform: capitalize;
    cursor: pointer;
    border: none;

    z-index: 1;
}

/* Smooth Animated Border */
.green-btn::before{
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50px;

    background: conic-gradient(
        from 00deg,
        transparent,
        #BEFF00,
        transparent,
        transparent
    );

    animation: rotateBorder 2.5s linear infinite;

    z-index: -2;
}

/* Inner Background */
.green-btn::after{
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 50px;
    background: #0D1100;
    z-index: -1;
}

/* Smooth Rotation */
@keyframes rotateBorder{
    100%{
        transform: rotate(360deg);
    }
}

/*  footer sec hide  */

.JOVIAL_to_C .footer-cta {
  display: none;
}


.JOVIAL_to_C .footer-section{
  border-radius: 0px !important;
}