/*
 * Mobile-only composition pass for /ai-data.
 * Desktop is deliberately untouched: every rule below is confined to the
 * tablet / handset breakpoints.
 */
@media screen and (max-width: 991px) {
  html,
  body,
  .page-wrapper,
  .main-wrapper {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Keep all repeated section content inside a consistent mobile gutter. */
  #content-production .container-small,
  #ai-data-solutions .container-small,
  #core-capabilities .container-small,
  #about .container-small,
  #contact .container-small {
    width: min(100% - 2rem, 42rem);
    margin-inline: auto;
  }
}

/* The archived tablet navigation kept its collapsed menu in normal document
 * flow. Although it was clipped visually, it still reserved ~714px above the
 * hero. Make tablet use the same overlay pattern as the handset navigation. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .mobile_nav {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    height: 100svh;
    pointer-events: none;
  }

  .mobile_nav .m-nav__top-wrapper {
    display: block;
    width: 100%;
    min-height: 4.625rem;
    padding-inline: 1.5rem;
    pointer-events: auto;
  }

  .mobile_nav .m-nav__top-wrapper > .flex-between.is-static {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 4.625rem;
    height: 4.625rem;
  }

  .mobile_nav .m-nav__links {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100svh;
    overflow: hidden;
  }

  .mobile_nav .m-nav__expander {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
  }

  .mobile_nav .m-nav__expander .nav__expand-inner {
    position: relative;
    display: block;
    width: .9rem;
    height: .55rem;
    margin: auto;
  }

  .mobile_nav .m-nav__expander .m-line {
    position: absolute;
    left: 0;
    width: .9rem;
    height: 1px;
    background: rgb(213, 225, 231);
  }

  .mobile_nav .m-nav__expander .m-line.is-top { top: 0; }
  .mobile_nav .m-nav__expander .m-line.is-bot { bottom: 0; }
}

@media screen and (max-width: 767px) {
  /* Every mobile workflow item is one full-width, sequential card.  The
     archived source uses three desktop bento rows; this is an actual mobile
     reflow of that same six-card DOM sequence, not a visual CSS reordering. */
  #core-capabilities .cards__holder.is-bento,
  #core-capabilities .cards__inner {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    min-width: 0 !important;
    gap: .85rem !important;
  }

  #core-capabilities .cards__inner,
  #core-capabilities .col-33.is-bento,
  #core-capabilities .col-66.is-bento {
    width: 100% !important;
    min-width: 0 !important;
  }

  #core-capabilities .col-33.is-bento,
  #core-capabilities .col-66.is-bento {
    display: block !important;
    order: initial !important;
  }

  #core-capabilities .et__card.is__bento {
    width: 100% !important;
  }

  /* The desktop bento overlays its illustrations across the full card. On a
     phone, reserve a real lower visual stage so the 05/06 animations never
     run into their title and copy. */
  /* Each mobile card owns a lower illustration stage.  The desktop artwork
     intentionally exceeds its bento cell; on a phone that leaks through the
     copy and outside the right edge.  Establish a clipping context per card
     and keep copy in a real foreground stacking layer. */
  #core-capabilities #capability-definition,
  #core-capabilities #capability-planning,
  #core-capabilities #capability-resources,
  #core-capabilities #capability-execution,
  #core-capabilities #capability-optimization,
  #core-capabilities #capability-delivery {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
  }

  #core-capabilities #capability-definition .bento-13,
  #core-capabilities #capability-planning .bento-13,
  #core-capabilities #capability-resources .bento-13,
  #core-capabilities #capability-execution .bento-13,
  #core-capabilities #capability-optimization .bento-13,
  #core-capabilities #capability-delivery .bento-13 {
    position: relative;
    z-index: 5 !important;
    pointer-events: none;
  }

  #core-capabilities #capability-optimization .os-chat-visual,
  #core-capabilities #capability-delivery .os-delivery-parallax {
    top: 10.75rem !important;
    right: 0 !important;
    bottom: .75rem !important;
    left: 0 !important;
    height: auto !important;
    z-index: 2 !important;
    overflow: hidden !important;
    border-radius: 0 0 1.15rem 1.15rem;
  }

  /* The live 01 Rive artboard needs the same protected lower stage.  It used
     to be inset across the entire card, which let its label cut through the
     copy block before the animation had reached the visual area. */
  #core-capabilities .et__card.is__bento .rive_wrapper.is-os-mobile-rive-ready {
    top: 8.9rem !important;
    right: 0 !important;
    bottom: .75rem !important;
    left: 0 !important;
    width: auto !important;
    height: calc(100% - 9.65rem) !important;
    overflow: hidden !important;
    border-radius: 0 0 1.15rem 1.15rem;
  }

  /* The archived mobile artboards are lightweight fallbacks that replay when
     their matching card becomes visible. They never depend on hover or tap. */
  #core-capabilities .et__card.is__bento .rive__inner.is-bento {
    transform-origin: 50% 65%;
    will-change: transform, opacity, clip-path;
  }

  #core-capabilities .et__card.is__bento.is-os-mobile-visual-playing .rive__inner.is-bento {
    animation: os-mobile-capability-visual-in 760ms cubic-bezier(.22, 1, .36, 1) both;
  }

  @keyframes os-mobile-capability-visual-in {
    0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.965); clip-path: inset(11% 0 0 round 1.25rem); }
    58% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.008); clip-path: inset(0 round 1.25rem); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); clip-path: inset(0 round 1.25rem); }
  }

  #core-capabilities #capability-definition.is-os-mobile-visual-playing .rive__inner.is-bento { animation-name: os-mobile-definition-in; }
  #core-capabilities #capability-planning.is-os-mobile-visual-playing .rive__inner.is-bento { animation-name: os-mobile-planning-in; }
  #core-capabilities #capability-resources.is-os-mobile-visual-playing .rive__inner.is-bento { animation-name: os-mobile-resources-in; }
  #core-capabilities #capability-execution.is-os-mobile-visual-playing .rive__inner.is-bento { animation-name: os-mobile-execution-in; }

  /* 01 is deliberately not a mobile SVG substitute: when its same desktop
     Rive file has loaded, reveal its own canvas and retire the fallback. */
  #core-capabilities .et__card.is__bento .rive_wrapper.is-os-mobile-rive-ready {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
  }

  #core-capabilities .et__card.is__bento .rive_wrapper.is-os-mobile-rive-ready,
  #core-capabilities .et__card.is__bento .rive_wrapper.is-os-mobile-rive-ready [data-animation-type="rive"],
  #core-capabilities .et__card.is__bento .rive_wrapper.is-os-mobile-rive-ready .os-capability-rive-canvas {
    width: 100% !important;
    height: 100% !important;
  }

  #core-capabilities .et__card.is__bento .rive_wrapper.is-os-mobile-rive-ready [data-animation-type="rive"] {
    display: none !important;
  }

  #core-capabilities .et__card.is__bento .rive_wrapper.is-os-mobile-rive-ready .os-capability-rive-canvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
  }

  #core-capabilities .et__card.is__bento .rive__inner.is-bento.is-os-mobile-rive-fallback-hidden {
    /* The generic entry keyframe owns opacity, so opacity alone can leave the
       archived SVG visible over the live Rive canvas. Remove the fallback
       from paint entirely once the desktop Rive source is ready. */
    display: none !important;
    pointer-events: none;
  }

  /* Keep this after the live-Rive sizing rule above: it must win over the
     desktop-derived `height: 100%` declaration. */
  #core-capabilities .et__card.is__bento .rive_wrapper.is-os-mobile-rive-ready {
    top: 8.9rem !important;
    right: 0 !important;
    bottom: .75rem !important;
    left: 0 !important;
    width: auto !important;
    height: calc(100% - 9.65rem) !important;
    overflow: hidden !important;
    border-radius: 0 0 1.15rem 1.15rem;
  }

  @keyframes os-mobile-definition-in {
    0% { opacity: 0; transform: translate3d(-18px, 10px, 0) scale(.97); clip-path: inset(0 100% 0 0 round 1.25rem); }
    62% { opacity: 1; transform: translate3d(2px, 0, 0) scale(1.008); clip-path: inset(0 round 1.25rem); }
    100% { opacity: 1; transform: none; clip-path: inset(0 round 1.25rem); }
  }
  @keyframes os-mobile-planning-in {
    0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(.96); clip-path: inset(15% 0 0 round 1.25rem); }
    60% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.01); clip-path: inset(0 round 1.25rem); }
    100% { opacity: 1; transform: none; clip-path: inset(0 round 1.25rem); }
  }
  @keyframes os-mobile-resources-in {
    0% { opacity: 0; transform: translate3d(18px, 0, 0) scale(.97); clip-path: inset(0 0 0 100% round 1.25rem); }
    62% { opacity: 1; transform: translate3d(-2px, 0, 0) scale(1.008); clip-path: inset(0 round 1.25rem); }
    100% { opacity: 1; transform: none; clip-path: inset(0 round 1.25rem); }
  }
  @keyframes os-mobile-execution-in {
    0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.95); clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); }
    64% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.01); clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
    100% { opacity: 1; transform: none; clip-path: inset(0 round 1.25rem); }
  }
  /* Header: retain the desktop brand language but reserve comfortable touch space. */
  .mobile_nav .m-nav__top-wrapper {
    min-height: 4.25rem;
    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
  }

  .mobile_nav .button_main,
  .mobile_nav .m-nav__expander {
    min-height: 2.55rem;
  }

  /* Hero keeps the established three-line composition; this only protects its gutter. */
  #top .padding-section.is-home-hero { padding-inline: 1rem; }

  .is-home-hero [data-hero] {
    width: 100%;
    max-width: none !important;
    transform: translateY(30%);
  }

  .is-home-hero .hero-title-lines {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto;
    font-size: clamp(1.62rem, 7.35vw, 1.92rem);
    line-height: 1.2075;
    letter-spacing: 1.5px;
  }

  .is-home-hero .hero-title-line,
  .is-home-hero .hero-title-line-nowrap {
    white-space: nowrap !important;
  }

  .buttons__wrap.is-hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 22.375rem);
    max-width: 100%;
    gap: .5rem;
    scale: .8 !important;
    transform-origin: left center;
  }

  .buttons__wrap.is-hero > .button_main {
    width: 100%;
    min-width: 0;
    min-height: 3.2rem;
  }

  /* Preserve logo carousel timing while giving its marks enough visual weight. */
  .section.is-logos {
    min-height: 0;
  }

  .clients-marquee__viewport {
    height: 8.75rem;
  }

  .client-logo-item {
    flex-basis: clamp(7.5rem, 31vw, 8.75rem);
    width: clamp(7.5rem, 31vw, 8.75rem);
    height: 5.1rem;
  }

  /* Marketing cases become a mobile story card instead of a tall desktop stack. */
  #content-production .pretty__slider.is-six-categories {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 1rem;
  }

  #content-production .pretty__button-outter.active {
    min-height: 0;
    height: auto !important;
  }

  #content-production .pretty__button-outter:not(.active) {
    min-height: 3.25rem;
    height: 3.25rem !important;
  }

  #content-production .pretty__button-outter.active .pretty__content-inner {
    min-height: 0 !important;
    padding: 1.25rem 1rem 1.1rem;
  }

  #content-production .pretty__visual.is-category-art,
  #content-production .marketing-case-visual {
    min-height: 22.5rem !important;
  }

  #content-production .marketing-case-stack-shell {
    width: min(100%, 18.75rem) !important;
    height: 22rem !important;
  }

  #content-production .pretty__slider.is-six-categories .button__text.is-pretty-slider {
    font-size: 1rem;
  }

  /* AI service demos retain their detailed UI, but flow as readable single-column cards. */
  #ai-data-solutions .sticky__card-wrap.is-ai-data-pair {
    gap: 1.1rem;
  }

  #ai-data-solutions .sticky-card.ai-data-solution-card {
    min-height: 0;
  }

  #ai-data-solutions .ai-data-demo {
    border-radius: 1rem;
  }

  /* Keep the workflow bento tactile on mobile without its desktop sticky gaps. */
  #core-capabilities .cards__wrapper.is-bento {
    gap: .85rem;
  }

  #core-capabilities .cards__holder.is-bento {
    min-height: 0;
  }

  #core-capabilities .os-workflow-intro-copy {
    font-size: 1.125rem !important;
    line-height: 1.58 !important;
  }

  /* Contact keeps the cyan CTA from desktop, sized for an easy thumb target. */
  #contact.section.is-cta {
    margin-top: 2rem;
    padding-bottom: 2rem;
  }

  #contact .cta__inner-wrap {
    min-height: 24rem;
  }

  /* Mobile footer CTA: use the available card width instead of allowing the
     animated heading wrapper to reserve an unnecessary right-side column. */
  #contact .cta__text-wrap {
    gap: 2.8rem;
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }

  #contact .cta-heading-wrap {
    padding-right: 0 !important;
  }

  #contact .cta-heading-wrap .heading-style-h3 {
    width: 100%;
    font-size: clamp(1.75rem, 7.7vw, 1.9rem);
    white-space: nowrap;
  }

  #contact .cta__text-wrap > .p-small {
    width: 100%;
    font-size: 0.9375rem;
    text-wrap: pretty;
  }

  #contact .cta__button {
    min-height: 6.1rem;
  }
}

@media screen and (max-width: 479px) {
  #content-production .marketing-case-stack-shell {
    width: min(100%, 18rem) !important;
    height: 21rem !important;
  }

  #content-production .pretty__visual.is-category-art,
  #content-production .marketing-case-visual {
    min-height: 21.5rem !important;
  }
}

/* Mobile navigation: a compact directory, not a stack of coloured pills. */
@media screen and (max-width: 767px) {
  .mobile_nav.has-directory-nav::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, .18);
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .mobile_nav.has-directory-nav.is-directory-open::before {
    opacity: 1;
  }

  .mobile_nav.has-directory-nav .m-nav__links {
    position: absolute;
    /* Begin just below the independent header instead of wrapping it. */
    top: 3.875rem;
    /* The navigation is a right-anchored side panel; the -1rem cancels the
       shell's handset gutter so its outer edge meets the viewport exactly. */
    right: -1rem;
    left: auto;
    display: block;
    width: 17.125rem;
    height: auto !important;
    /* The source menu animation collapses its wrapper before it reveals the
       directory. Reserve only this compact four-row control module. */
    min-height: 13.875rem;
    padding: .45rem;
    overflow: hidden;
    background:
      linear-gradient(165deg, rgba(28, 37, 42, .99), rgba(13, 19, 23, .99));
    border: 1px solid rgba(148, 172, 183, .13);
    border-top-color: rgba(190, 211, 219, .23);
    border-left-color: rgba(173, 198, 208, .16);
    border-right-color: rgba(67, 88, 97, .20);
    border-bottom-color: rgba(73, 94, 103, .26);
    border-radius: .75rem .75rem 1.125rem 1.125rem;
    box-shadow:
      inset 0 1px 0 rgba(235, 245, 248, .065),
      inset 0 -1px 0 rgba(0, 0, 0, .34),
      inset 1px 0 0 rgba(184, 207, 216, .018),
      inset -1px 0 0 rgba(0, 0, 0, .14),
      0 8px 18px rgba(0, 0, 0, .14);
    clip-path: inset(0 0 100% 0 round .75rem .75rem 1.125rem 1.125rem) !important;
    transition: clip-path 260ms cubic-bezier(.22, 1, .36, 1);
    z-index: 1;
  }

  .mobile_nav.has-directory-nav .m-nav__top-wrapper > .flex-between.is-static {
    position: relative;
    z-index: 2;
  }

  .mobile_nav.has-directory-nav .m-nav__top-wrapper > .flex-between.is-static > .m-nav-link,
  .mobile_nav.has-directory-nav .m-nav__top-wrapper > .flex-between.is-static > .flex-gap-0-25 > .button_main,
  .mobile_nav.has-directory-nav .m-nav__expander {
    position: relative;
    z-index: 3;
  }

  .mobile_nav.has-directory-nav.is-directory-open .m-nav__links {
    clip-path: inset(0 0 0 0 round .75rem .75rem 1.125rem 1.125rem) !important;
  }

  .mobile_nav.has-directory-nav .m-nav__links > .m-nav,
  .mobile_nav.has-directory-nav .m-nav__links > .m-nav__wrap:not(.is-social) {
    display: none !important;
  }

  .m-nav-directory {
    display: block;
    width: 100%;
  }

  .m-nav-directory-shell {
    width: 100%;
    min-height: 12.5rem;
    padding: .18rem .65rem;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(13, 20, 25, .98), rgba(6, 10, 13, .99));
    border: 1px solid rgba(129, 156, 168, .115);
    border-top-color: rgba(180, 204, 213, .16);
    border-bottom-color: rgba(0, 0, 0, .38);
    border-radius: .625rem .625rem .875rem .875rem;
    box-shadow:
      inset 0 1px 0 rgba(235, 245, 248, .035),
      inset 0 -1px 0 rgba(0, 0, 0, .26);
    opacity: 0;
    transform: translateY(-.25rem);
  }

  .m-nav-directory__item {
    display: grid;
    grid-template-columns: 2rem 6rem auto;
    align-items: center;
    column-gap: .5rem;
    min-height: 3rem;
    color: rgba(232, 239, 242, .93);
    margin-inline: .15rem;
    border-bottom: 1px solid rgba(211, 229, 235, .052);
    text-decoration: none;
    opacity: 0;
    transform: translateY(.65rem);
  }

  .m-nav-directory__index {
    color: rgba(169, 188, 194, .65);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
  }

  .m-nav-directory__label {
    font-size: 1.05rem;
    font-weight: 550;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  .m-nav-directory__arrow {
    color: #62dcea;
    font-size: 1.15rem;
    transition: transform 180ms ease, color 180ms ease;
  }

  .mobile_nav.has-directory-nav .m-nav__top-wrapper .button_main {
    min-height: 2.35rem;
    padding-inline: .75rem;
    font-size: .875rem;
  }

  /* The hero CTAs are not a second navigation layer while this directory is open. */
  body:has(.mobile_nav.has-directory-nav.is-directory-open) .buttons__wrap.is-hero {
    display: none !important;
  }

  .m-nav-directory__item:active,
  .m-nav-directory__item:focus-visible {
    color: #ffffff;
    outline: none;
  }

  .m-nav-directory__item:active .m-nav-directory__arrow,
  .m-nav-directory__item:focus-visible .m-nav-directory__arrow {
    transform: translateX(.28rem);
    color: #8eeaf4;
  }

  .mobile_nav.is-directory-open .m-nav-directory__item {
    animation: mobile-directory-in 300ms cubic-bezier(.22, 1, .36, 1) forwards;
  }

  .mobile_nav.is-directory-open .m-nav-directory-shell {
    animation: mobile-directory-shell-in 300ms cubic-bezier(.22, 1, .36, 1) forwards;
  }

  .mobile_nav.is-directory-open .m-nav-directory__item:nth-child(2) { animation-delay: 35ms; }
  .mobile_nav.is-directory-open .m-nav-directory__item:nth-child(3) { animation-delay: 70ms; }
  .mobile_nav.is-directory-open .m-nav-directory__item:nth-child(4) { animation-delay: 105ms; }

  @keyframes mobile-directory-in {
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes mobile-directory-shell-in {
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .m-nav-directory__item,
  .m-nav-directory-shell,
  .mobile_nav.is-directory-open .m-nav-directory__item,
  .mobile_nav.is-directory-open .m-nav-directory-shell {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .clients-marquee__track {
    transform: translate3d(0, 0, 0) !important;
  }
}