/* V4.1 mobile decision experience — full-screen, swipeable and deliberately
   independent from the desktop composition. */
@media (max-width: 767px) {
  body:has(.em-home) .mobile-header {
    min-height: 92px;
    padding: max(14px, env(safe-area-inset-top)) 20px 10px;
    grid-template-columns: 52px auto 1fr 54px !important;
    grid-template-areas: "logo wordmark empty menu" !important;
    gap: 11px;
    direction: inherit;
    color: #fff;
    border: 0;
    background: linear-gradient(180deg,rgba(2,5,13,.95),rgba(2,5,13,.78) 70%,transparent);
    box-shadow: none;
    backdrop-filter: none;
  }

  body:has(.em-home) .mobile-header:has(.lang-switch--mobile) {
    grid-template-columns: 52px auto 1fr 54px 38px !important;
    grid-template-areas: "logo wordmark empty menu lang" !important;
  }

  body:has(.em-home) .mobile-header::after {
    content: none !important;
    display: none;
  }

  body:has(.em-home) .mobile-header-logo {
    grid-area: logo;
    width: 52px;
    height: 58px;
    padding: 0;
    justify-self: start;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body:has(.em-home) .mobile-header-logo img {
    width: 46px;
    height: 54px;
    object-fit: contain;
  }

  body:has(.em-home) .mobile-header-wordmark {
    grid-area: wordmark;
    display: flex;
    min-width: 92px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.1;
  }

  body:has(.em-home) .mobile-header-wordmark strong {
    color: #fff;
    font-size: 16px;
    font-weight: 750;
  }

  body:has(.em-home) .mobile-header-wordmark small {
    margin-top: 4px;
    color: rgba(255,255,255,.56);
    font-size: 12px;
    font-weight: 450;
  }

  body:has(.em-home) .mobile-header-menu {
    grid-area: menu;
    width: 54px;
    height: 54px;
    justify-self: end;
    gap: 7px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 50%;
    background: rgba(255,255,255,.045);
    box-shadow: 0 14px 40px rgba(0,0,0,.25);
  }

  body:has(.em-home) .mobile-header-menu span {
    width: 21px;
    height: 2px;
  }

  body:has(.em-home) .lang-switch--mobile {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    align-self: center;
    color: rgba(255,255,255,.72);
    border-color: rgba(255,255,255,.08);
    border-radius: 50%;
    background: rgba(255,255,255,.035);
  }

  .em-home {
    --em-blue: #3c72f1;
    --em-ink: #07142f;
    background: #02050d;
  }

  .em-convergence-hero {
    color: #fff;
    background:
      radial-gradient(circle at 92% 49%,rgba(30,75,181,.18),transparent 27%),
      #02050d;
  }

  [dir="rtl"] .em-convergence-hero {
    background:
      radial-gradient(circle at 8% 49%,rgba(30,75,181,.18),transparent 27%),
      #02050d;
  }

  .em-convergence-bg,
  .em-convergence-bg canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .em-convergence-bg {
    z-index: 1;
    pointer-events: none;
  }

  .em-convergence-halo {
    position: absolute;
    top: 48%;
    left: 91%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle,rgba(52,105,238,.24),rgba(19,54,139,.07) 38%,transparent 68%);
    animation: emConvergenceHalo 3s ease-in-out infinite;
  }

  [dir="rtl"] .em-convergence-halo { left: 9%; }

  @keyframes emConvergenceHalo {
    0%,100% { opacity: .35; transform: translate(-50%,-50%) scale(.9); }
    50% { opacity: .7; transform: translate(-50%,-50%) scale(1.08); }
  }

  .em-convergence-endpoint {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 91%;
    width: 10px;
    height: 10px;
    opacity: 0;
    transform: translate(-50%,-50%);
    transition: opacity .8s ease;
  }

  [dir="rtl"] .em-convergence-endpoint { left: 9%; }
  .em-convergence-hero.is-resolved .em-convergence-endpoint { opacity: 1; }

  .em-convergence-endpoint i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px #fff,0 0 28px #3e73f3,0 0 58px rgba(57,110,247,.7);
    animation: emEndpointPulse 2.2s ease-in-out infinite;
  }

  @keyframes emEndpointPulse {
    50% { transform: scale(1.2); box-shadow:0 0 14px #fff,0 0 38px #3e73f3,0 0 72px rgba(57,110,247,.8); }
  }

  .em-convergence-hero .em-hero-content {
    z-index: 4;
    justify-content: center;
    padding: 112px 24px 76px;
  }

  .em-convergence-hero .em-kicker {
    margin-bottom: 17px;
    color: rgba(255,255,255,.42);
    font-size: 8px;
    letter-spacing: .09em;
  }

  .em-convergence-hero .em-kicker i {
    width: 18px;
    height: 2px;
    border-radius: 0;
    box-shadow: none;
    background: #4176f4;
  }

  .em-convergence-hero h1 {
    max-width: 330px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.35rem,10.3vw,3.05rem);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.04em;
  }

  .em-convergence-hero h1 span {
    display: block;
    margin-top: .13em;
    color: #4578f2;
  }

  .em-hero-rule {
    width: min(260px,75%);
    height: 3px;
    margin-top: 24px;
    overflow: hidden;
    background: rgba(255,255,255,.1);
  }

  .em-hero-rule i {
    display: block;
    width: 37%;
    height: 100%;
    background: #467cff;
  }

  .em-convergence-hero .em-hero-content > p {
    max-width: 305px;
    margin-top: 24px;
    color: rgba(235,240,251,.67);
    font-size: 12px;
    line-height: 1.75;
  }

  .em-convergence-hero .em-actions {
    margin-top: 24px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .em-convergence-hero .em-primary {
    width: min(230px,78%);
    min-height: 53px;
    justify-content: space-between;
    padding-inline: 20px;
    border-radius: 13px;
    background: linear-gradient(135deg,#315fe3,#3f73f5);
  }

  .em-text-action {
    min-height: 36px;
    padding: 0 0 5px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.78);
    border: 0;
    border-bottom: 1px solid #315ed5;
    background: transparent;
    font-size: 11px;
    font-weight: 650;
  }

  .em-expertise-proof {
    width: min(305px,100%);
    margin-top: 25px;
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-top: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.38);
    font-size: 8px;
    letter-spacing: .07em;
  }

  .em-expertise-proof div {
    display: flex;
    gap: 15px;
    direction: ltr;
  }

  .em-expertise-proof b {
    color: rgba(255,255,255,.72);
    font-size: 10px;
  }

  .em-convergence-hero .em-scroll-hint {
    margin-top: 14px;
  }

  .em-diagnostic-slide {
    color: #fff;
    background:
      radial-gradient(circle at 85% 80%,rgba(35,78,181,.12),transparent 28%),
      #030711;
  }

  .em-diagnostic-slide .em-slide-content {
    width: calc(100% - 28px);
    height: calc(100% - 108px);
    margin-top: 92px;
    padding: 22px 14px 66px;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    background: rgba(2,6,15,.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025),0 25px 70px rgba(0,0,0,.22);
  }

  .em-diagnostic-slide .em-kicker {
    color: #6793ff;
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .em-diagnostic-slide h2 {
    max-width: 350px;
    margin-top: 13px;
    color: #fff;
    font-size: clamp(1.65rem,7vw,2.05rem);
    font-weight: 600;
    line-height: 1.22;
  }

  .em-diagnostic-options {
    width: 100%;
    margin-top: 21px;
    padding-bottom: 5px;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .em-diagnostic-options::-webkit-scrollbar { display: none; }

  .em-diagnostic-options button {
    min-width: 78px;
    height: 124px;
    padding: 13px 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 78px;
    flex-direction: column;
    color: rgba(255,255,255,.58);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    scroll-snap-align: start;
    transition: color .3s ease,border-color .3s ease,background .3s ease,transform .3s ease;
  }

  .em-diagnostic-options button b {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.58);
    font-size: 27px;
    font-weight: 400;
  }

  .em-diagnostic-options button span {
    min-height: 34px;
    display: grid;
    place-items: center;
    font-size: 9px;
    line-height: 1.35;
    text-align: center;
  }

  .em-diagnostic-options button.is-active {
    color: #fff;
    border-color: #3f76f5;
    background: linear-gradient(180deg,rgba(41,86,195,.13),rgba(255,255,255,.02));
    box-shadow: 0 15px 35px rgba(15,50,135,.15),inset 0 0 0 1px rgba(63,118,245,.18);
    transform: translateY(-2px);
  }

  .em-diagnostic-options button.is-active b { color: #4e80fa; }

  .em-diagnostic-insights {
    position: relative;
    min-height: 222px;
    margin-top: 17px;
  }

  .em-diagnostic-insights article {
    min-height: 222px;
    padding: 21px;
    display: none;
    grid-template-columns: 1fr;
    gap: 17px;
    color: #fff;
    border: 1px solid rgba(91,136,255,.1);
    border-radius: 21px;
    background:
      radial-gradient(circle at 100% 0,rgba(45,91,207,.22),transparent 45%),
      linear-gradient(135deg,#071127,#081735);
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
  }

  .em-diagnostic-insights article.is-active {
    display: grid;
    animation: emDiagnosticIn .45s cubic-bezier(.16,1,.3,1) both;
  }

  @keyframes emDiagnosticIn {
    from { opacity:0; transform:translateY(10px); filter:blur(4px); }
    to { opacity:1; transform:none; filter:none; }
  }

  .em-diagnostic-insights small {
    display: block;
    color: #6794ff;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .em-diagnostic-insights h3 {
    margin-top: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.4;
  }

  .em-diagnostic-insights p {
    margin-top: 7px;
    color: rgba(255,255,255,.55);
    font-size: 11px;
    line-height: 1.65;
  }

  .em-diagnostic-insights article > a {
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .em-diagnostic-insights article > a span {
    margin-top: 9px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    font-size: 12px;
    font-weight: 650;
  }

  .em-diagnostic-insights article > a i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    border-radius: 50%;
    background: #245ad9;
    font-style: normal;
  }

  .em-diagnostic-insights article > a svg { margin-inline-start: auto; }

  .em-diagnostic-next {
    margin-top: 14px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.55);
    border: 0;
    background: transparent;
    font-size: 9px;
    font-weight: 700;
  }

  .em-slide-dock {
    right: 14px;
    bottom: max(10px,env(safe-area-inset-bottom));
    left: 14px;
    min-height: 48px;
    padding: 5px;
    grid-template-columns: 38px 1fr 38px;
    border-radius: 17px;
    background: rgba(2,6,15,.8);
  }

  .em-slide-dock > button {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .em-dock-progress { grid-template-columns: 22px 1fr 42px; }
}

@media (max-width: 380px), (max-height: 760px) {
  .em-convergence-hero .em-hero-content { padding-top: 98px; padding-bottom: 66px; }
  .em-convergence-hero h1 { font-size: 2.25rem; }
  .em-convergence-hero .em-kicker { margin-bottom: 12px; }
  .em-hero-rule { margin-top: 17px; }
  .em-convergence-hero .em-hero-content > p { margin-top: 17px; font-size: 11px; }
  .em-convergence-hero .em-actions { margin-top: 17px; gap: 10px; }
  .em-expertise-proof { margin-top: 17px; }
  .em-diagnostic-slide .em-slide-content { height:calc(100% - 98px); margin-top:84px; padding:15px 11px 56px; }
  .em-diagnostic-options { margin-top: 14px; }
  .em-diagnostic-options button { height: 108px; }
  .em-diagnostic-insights { min-height: 190px; margin-top: 12px; }
  .em-diagnostic-insights article { min-height: 190px; padding: 16px; gap: 10px; }
  .em-diagnostic-insights h3 { font-size: 14px; }
  .em-diagnostic-insights p { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .em-convergence-endpoint { opacity: 1; }
  .em-convergence-halo,.em-convergence-endpoint i { animation: none; }
}

/* Light mobile slides own a dark ink colour explicitly. This prevents text
   inherited from the cinematic dark slides from becoming white-on-white. */
@media (max-width: 767px) {
  .em-manifesto,
  .em-services-slide,
  .em-process-slide {
    --em-ink: #07142f;
    color: #07142f;
  }

  .em-manifesto h2,
  .em-manifesto h3,
  .em-services-slide .em-service-screen-head h2,
  .em-services-slide .em-service-product-body h3,
  .em-process-slide h2,
  .em-process-slide h3 {
    color: #07142f;
  }

  .em-services-slide .em-service-screen-head h2 span,
  .em-manifesto h2 span,
  .em-process-slide h2 span {
    color: #6f7d95;
  }
}